From 1bccf7642f5d7b6a14b0f349c7d2ae7822822941 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 22 Aug 2023 12:38:00 +0300
Subject: [PATCH 1/6] feat: add connection between landing and pair page

---
 src/App.tsx                           |  1 +
 src/pages/LandingPage/LandingPage.tsx | 11 ++++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4136b233..79aced95 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -36,6 +36,7 @@ const router = createBrowserRouter([
   },
   { path: '/create-local-node', element: <CreateLocalNodePage /> },
 ])
+
 function App() {
   return (
     <ReduxProvider store={store}>
diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx
index ba3065b9..c3833354 100644
--- a/src/pages/LandingPage/LandingPage.tsx
+++ b/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>

From 0789ad2d7204b530d82b2fe039762124ec8417f0 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 22 Aug 2023 12:58:10 +0300
Subject: [PATCH 2/6] feat: add connections at tags

---
 src/components/General/TagContainer.tsx | 39 +++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/components/General/TagContainer.tsx b/src/components/General/TagContainer.tsx
index 525961b6..915f4b04 100644
--- a/src/components/General/TagContainer.tsx
+++ b/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>
   )
 }

From 43cd20af57ccb07746bec92b446c6c172c6f8ae3 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 22 Aug 2023 13:09:38 +0300
Subject: [PATCH 3/6] feat: add navigate to manual create

---
 src/pages/PairDevice/SyncStatus.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/pages/PairDevice/SyncStatus.tsx b/src/pages/PairDevice/SyncStatus.tsx
index e7c689a6..e783d4c7 100644
--- a/src/pages/PairDevice/SyncStatus.tsx
+++ b/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>

From 4a851108ca17ac953ec5d5db1c432e9794b0e493 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 22 Aug 2023 13:12:23 +0300
Subject: [PATCH 4/6] fix: landing page story

---
 src/pages/LandingPage/LandingPage.stories.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/LandingPage/LandingPage.stories.ts b/src/pages/LandingPage/LandingPage.stories.ts
index 8ba9e266..cd135e43 100644
--- a/src/pages/LandingPage/LandingPage.stories.ts
+++ b/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

From 91cae3f39db7ed7e9f6dce2f36fa4911eae6ca08 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 22 Aug 2023 13:17:20 +0300
Subject: [PATCH 5/6] fix: add decorators with router

---
 src/pages/ConnectDevicePage/ConnectDevicePage.stories.ts     | 2 ++
 src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/pages/ConnectDevicePage/ConnectDevicePage.stories.ts b/src/pages/ConnectDevicePage/ConnectDevicePage.stories.ts
index 77185299..5793f322 100644
--- a/src/pages/ConnectDevicePage/ConnectDevicePage.stories.ts
+++ b/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
diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts b/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts
index 99c8bae0..8b61dea8 100644
--- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts
+++ b/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

From b8c191abf86fb7e15bee61e4e9301d3fe3ac5792 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 22 Aug 2023 13:46:45 +0300
Subject: [PATCH 6/6] fix: add with router at sync part from pair page

---
 src/pages/PairDevice/SyncStatus.stories.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/PairDevice/SyncStatus.stories.tsx b/src/pages/PairDevice/SyncStatus.stories.tsx
index 132fa607..dba77b31 100644
--- a/src/pages/PairDevice/SyncStatus.stories.tsx
+++ b/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