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: },
])
+
function App() {
return (
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 (
{selectedTag === 'connect' ? (
-
+
) : null}
-
-
+
+
)
}
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
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
export default meta
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
export default meta
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 (
<>
@@ -25,7 +32,9 @@ function LandingPage() {
- }>Get Started
+ } onPress={getStartedHanlder}>
+ Get Started
+
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
export default meta
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
@@ -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 (
@@ -84,7 +91,7 @@ const SyncStatus = ({
)}
{isAwaitingPairing && (
- } size={40}>
+ } size={40} onPress={connectViaIpHandler} >
Connect via IP