feat: show add node stepper after splash screen and splash content with no nodes

src/renderer/App.tsx

@@ -14,6 +14,8 @@ import { SidebarWrapper } from './Presentational/SidebarWrapper/SidebarWrapper';
 import NNSplash from './Presentational/NNSplashScreen/NNSplashScreen';
 import { dragWindowContainer } from './app.css';
 import ThemeManager from './ThemeManager';
+import { Modal } from './Generics/redesign/Modal/Modal';
+import AddNodeStepper from './Presentational/AddNodeStepper/AddNodeStepper';
 
 Sentry.init({
   dsn: electron.SENTRY_DSN,
@@ -24,6 +26,7 @@ const MainScreen = () => {
   const dispatch = useAppDispatch();
   const [sHasSeenSplashscreen, setHasSeenSplashscreen] = useState<boolean>();
   const [sHasClickedGetStarted, setHasClickedGetStarted] = useState<boolean>();
+  const [sIsModalOpenAddNode, setIsModalOpenAddNode] = useState<boolean>();
 
   // const isStartOnLogin = await electron.getStoreValue('isStartOnLogin');
   // console.log('isStartOnLogin: ', isStartOnLogin);
@@ -46,6 +49,7 @@ const MainScreen = () => {
     setHasSeenSplashscreen(true);
     electron.getSetHasSeenSplashscreen(true);
     setHasClickedGetStarted(true);
+    setIsModalOpenAddNode(true);
   };
 
   // const onChangeOpenOnLogin = (openOnLogin: boolean) => {
@@ -87,6 +91,22 @@ const MainScreen = () => {
 
           <Footer />
           <DataRefresher />
+          {/* Todo: remove this when Modal Manager is created */}
+          <Modal
+            title=""
+            isOpen={sIsModalOpenAddNode}
+            onClickCloseButton={() => setIsModalOpenAddNode(false)}
+            isFullScreen
+          >
+            <AddNodeStepper
+              onChange={(newValue: 'done' | 'cancel') => {
+                console.log(newValue);
+                if (newValue === 'done' || newValue === 'cancel') {
+                  setIsModalOpenAddNode(false);
+                }
+              }}
+            />
+          </Modal>
         </>
       )}
     </ThemeManager>

src/renderer/Generics/redesign/Splash/splash.css.ts

@@ -7,18 +7,18 @@ export const container = style({
   backgroundSize: '1281px 169px',
   width: '100%',
   height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
 });
 
 export const contentContainer = style({
   alignItems: 'center',
   display: 'flex',
   flexDirection: 'column',
   gap: 24,
-  position: 'absolute',
   width: 420,
   height: 378,
-  left: 'calc(50% - 420px/2)',
-  top: 'calc(50% - 378px/2 - 16px)',
 });
 
 export const titleFont = style({

src/renderer/NodeScreen.tsx

@@ -18,6 +18,9 @@ import ContentSingleClient, {
 } from './Presentational/ContentSingleClient/ContentSingleClient';
 import { hexToDecimal } from './utils';
 import { NodeAction } from './Generics/redesign/consts';
+import NNSplash from './Presentational/NNSplashScreen/NNSplashScreen';
+import AddNodeStepper from './Presentational/AddNodeStepper/AddNodeStepper';
+import { Modal } from './Generics/redesign/Modal/Modal';
 
 const NodeScreen = () => {
   // const { t } = useTranslation();
@@ -51,6 +54,7 @@ const NodeScreen = () => {
       pollingInterval,
     }
   );
+  const [sIsModalOpenAddNode, setIsModalOpenAddNode] = useState<boolean>();
 
   // use to show if internet is disconnected
   // const qNetwork = useGetNetworkConnectedQuery(null, {
@@ -162,9 +166,30 @@ const NodeScreen = () => {
   //   },
   // });
   if (!selectedNode) {
-    // if docker is not installed, show prompt
-    // eslint-disable-next-line react/jsx-curly-brace-presence
-    return <p>{'Get started! "Add a node"!'}</p>;
+    // if there is no node selected, prompt user to create a new node
+    return (
+      <>
+        {!sIsModalOpenAddNode && (
+          <NNSplash onClickGetStarted={() => setIsModalOpenAddNode(true)} />
+        )}
+        {/* Todo: remove this when Modal Manager is created */}
+        <Modal
+          title=""
+          isOpen={sIsModalOpenAddNode}
+          onClickCloseButton={() => setIsModalOpenAddNode(false)}
+          isFullScreen
+        >
+          <AddNodeStepper
+            onChange={(newValue: 'done' | 'cancel') => {
+              console.log(newValue);
+              if (newValue === 'done' || newValue === 'cancel') {
+                setIsModalOpenAddNode(false);
+              }
+            }}
+          />
+        </Modal>
+      </>
+    );
   }
 
   const { status, spec } = selectedNode;