Merge pull request #9 from nimbus-gui/rd.make-a-page-flow-for-nodes

Make a page flow for nodes

src/App.tsx

@@ -36,6 +36,7 @@ const router = createBrowserRouter([
   },
   { path: '/create-local-node', element: <CreateLocalNodePage /> },
 ])
+
 function App() {
   return (
     <ReduxProvider store={store}>

src/components/General/TagContainer.tsx

@@ -2,19 +2,52 @@ import { Tag } from '@status-im/components'
 import { XStack } from 'tamagui'
 import './TagContainer.css'
 import { ConnectionIcon, AddSmallIcon, SwapIcon } from '@status-im/icons'
+import { useNavigate } from 'react-router'
 
 type TagContainerProps = {
   selectedTag: 'pair' | 'create' | 'connect'
 }
 
 const TagContainer = ({ selectedTag }: TagContainerProps) => {
+  const navigate = useNavigate()
+
+  const onPressConnect = () => {
+    navigate('/connect-device')
+  }
+
+  const onPressPair = () => {
+    navigate('/pair-device')
+  }
+
+  const onPressCreate = () => {
+    navigate('/create-local-node')
+  }
+
   return (
     <XStack space={'$2'} alignItems="center" className="tag-container">
       {selectedTag === 'connect' ? (
-        <Tag selected={selectedTag === 'connect'} icon={ConnectionIcon} label="Connect" size={32} />
+        <Tag
+          selected={selectedTag === 'connect'}
+          icon={ConnectionIcon}
+          label="Connect"
+          size={32}
+          onPress={onPressConnect}
+        />
       ) : null}
-      <Tag selected={selectedTag === 'pair'} icon={SwapIcon} label="Pair" size={32} />
-      <Tag selected={selectedTag === 'create'} icon={AddSmallIcon} label="Create" size={32} />
+      <Tag
+        selected={selectedTag === 'pair'}
+        icon={SwapIcon}
+        label="Pair"
+        size={32}
+        onPress={onPressPair}
+      />
+      <Tag
+        selected={selectedTag === 'create'}
+        icon={AddSmallIcon}
+        label="Create"
+        size={32}
+        onPress={onPressCreate}
+      />
     </XStack>
   )
 }

src/pages/ConnectDevicePage/ConnectDevicePage.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import ConnectDevicePage from './ConnectDevicePage'
+import { withRouter } from 'storybook-addon-react-router-v6'
 
 const meta = {
   title: 'Pages/ConnectDevicePage',
@@ -10,6 +11,7 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
+  decorators: [withRouter],
 } satisfies Meta<typeof ConnectDevicePage>
 
 export default meta

src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import CreateLocalNodePage from './CreateLocalNodePage'
+import { withRouter } from 'storybook-addon-react-router-v6'
 
 const meta = {
   title: 'Pages/CreateLocalNodePage',
@@ -10,6 +11,7 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
+  decorators: [withRouter],
 } satisfies Meta<typeof CreateLocalNodePage>
 
 export default meta

src/pages/LandingPage/LandingPage.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { withRouter } from 'storybook-addon-react-router-v6'
 
 import LandingPage from './LandingPage'
 
@@ -10,6 +11,7 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
+  decorators: [withRouter],
 } satisfies Meta<typeof LandingPage>
 
 export default meta

src/pages/LandingPage/LandingPage.tsx

@@ -6,8 +6,15 @@ import NimbusLogo from '../../components/Logos/NimbusLogo'
 import { NodeIcon } from '@status-im/icons'
 import { Button as StatusButton, Text } from '@status-im/components'
 import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar'
+import { useNavigate } from 'react-router'
 
 function LandingPage() {
+  const navigate = useNavigate()
+
+  const getStartedHanlder = () => {
+    navigate('/pair-device')
+  }
+
   return (
     <>
       <PageWrapperShadow rightImageSrc="./background-images/landing-page-bg.png">
@@ -25,7 +32,9 @@ function LandingPage() {
           </YStack>
 
           <XStack>
-            <StatusButton icon={<NodeIcon size={20} />}>Get Started</StatusButton>
+            <StatusButton icon={<NodeIcon size={20} />} onPress={getStartedHanlder}>
+              Get Started
+            </StatusButton>
           </XStack>
         </YStack>
       </PageWrapperShadow>

src/pages/PairDevice/SyncStatus.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import SyncStatus from './SyncStatus'
+import { withRouter } from 'storybook-addon-react-router-v6'
 
 const meta = {
   title: 'Pair Device/SyncStatus',
@@ -10,6 +11,7 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
+  decorators: [withRouter],
 } satisfies Meta<typeof SyncStatus>
 
 export default meta

src/pages/PairDevice/SyncStatus.tsx

@@ -7,6 +7,7 @@ import Icon from '../../components/General/Icon'
 import ConnectionIcon from '/icons/connection.svg'
 import { convertSecondsToTimerFormat } from '../../utilities'
 import { RefreshIcon } from '@status-im/icons'
+import { useNavigate } from 'react-router'
 
 type SyncStatusProps = {
   isPairing: boolean
@@ -20,11 +21,13 @@ const SyncStatus = ({
   changeSetIsAwaitingPairing,
 }: SyncStatusProps) => {
   const [elapsedTime, setElapsedTime] = useState(0)
+  const navigate = useNavigate()
 
   const resetTimer = () => {
     setElapsedTime(0)
     changeSetIsAwaitingPairing(false)
   }
+
   useEffect(() => {
     let timer: ReturnType<typeof setTimeout>
 
@@ -42,7 +45,11 @@ const SyncStatus = ({
     return () => clearInterval(timer)
   }, [isPairing, elapsedTime])
 
-  const timer = convertSecondsToTimerFormat(elapsedTime) // Assuming you've imported the convertSecondsToTimerFormat function
+  const timer = convertSecondsToTimerFormat(elapsedTime)
+
+  const connectViaIpHandler = () => {
+    navigate('/connect-device');
+  };
 
   return (
     <YStack space={'$2'}>
@@ -84,7 +91,7 @@ const SyncStatus = ({
       )}
       {isAwaitingPairing && (
         <XStack>
-          <Button icon={<Icon src={ConnectionIcon} />} size={40}>
+          <Button icon={<Icon src={ConnectionIcon} />} size={40} onPress={connectViaIpHandler} >
             Connect via IP
           </Button>
         </XStack>