diff --git a/public/background-images/sync-status-background.png b/public/background-images/sync-status-background.png new file mode 100644 index 00000000..9b288c6a Binary files /dev/null and b/public/background-images/sync-status-background.png differ diff --git a/public/icons/token.svg b/public/icons/token.svg new file mode 100644 index 00000000..cf171b59 --- /dev/null +++ b/public/icons/token.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/icons/vector.svg b/public/icons/vector.svg new file mode 100644 index 00000000..fb59ff83 --- /dev/null +++ b/public/icons/vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/App.tsx b/src/App.tsx index 1ea12bb1..42dcd795 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,7 @@ import config from '../tamagui.config' import LandingPage from './pages/LandingPage/LandingPage' import DeviceHealthCheck from './pages/DeviceHealthCheck/DeviceHealthCheck' import ConnectDevicePage from './pages/ConnectDevicePage/ConnectDevicePage' +import DeviceSyncStatus from './pages/DeviceSyncStatus/DeviceSyncStatus' const router = createBrowserRouter([ { @@ -19,6 +20,8 @@ const router = createBrowserRouter([ { path: '/connect-device', element: , + path: '/device-sync-status', + element: , }, ]) diff --git a/src/components/DeviceSync.stories.tsx b/src/components/DeviceSync.stories.tsx new file mode 100644 index 00000000..34c89a6d --- /dev/null +++ b/src/components/DeviceSync.stories.tsx @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import DeviceSyncStatus from '../pages/DeviceSyncStatus/DeviceSyncStatus' + +const meta = { + title: 'General/DeviceSyncStatus', + component: DeviceSyncStatus, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + decorators: [ + Story => ( +
+ +
+ ), + ], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const WithData: Story = { + args: {}, +} diff --git a/src/components/SyncStatusCardConsensus.stories.tsx b/src/components/SyncStatusCardConsensus.stories.tsx new file mode 100644 index 00000000..8c3a634c --- /dev/null +++ b/src/components/SyncStatusCardConsensus.stories.tsx @@ -0,0 +1,37 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import SyncStatusCardConsensus from './SyncStatusCardConsensus' + +const meta = { + title: 'General/SyncStatusCardConsensus', + component: SyncStatusCardConsensus, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + decorators: [ + Story => ( +
+ +
+ ), + ], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const WithData: Story = { + args: { + synced: 132432, + total: 200000, + }, +} +export const WithoutData: Story = { + args: { + synced: 0, + total: 0, + }, +} + + diff --git a/src/components/SyncStatusCardConsensus.tsx b/src/components/SyncStatusCardConsensus.tsx new file mode 100644 index 00000000..1725348e --- /dev/null +++ b/src/components/SyncStatusCardConsensus.tsx @@ -0,0 +1,83 @@ +import IconText from './IconText' +import { Separator, Stack, XStack, YStack } from 'tamagui' +import StandardGauge from './StandardGauge' +import { Shadow, Text } from '@status-im/components' +import Icon from './Icon' +interface DeviceStorageHealthProps { + synced: number + total: number +} +const SyncStatusCardConsensus: React.FC = ({ synced, total }) => { + const message = synced === total ? 'Synced all data' : 'Syncing' + + const data = () => { + return [ + { + id: 'storage', + label: 'Used', + value: synced, + color: '#ff6161', + }, + { + id: 'storage', + label: 'Free', + value: total - synced || 1, + color: '#E7EAEE', + }, + ] + } + const formatNumber = (n: number): string => { + return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + } + return ( + + + + + + Consensus Client + + + + + + + + + + + + + + {message} + + + {formatNumber(synced)} / {formatNumber(total)} + + + + + ) +} + +export default SyncStatusCardConsensus diff --git a/src/components/SyncStatusCardExecution.stories.tsx b/src/components/SyncStatusCardExecution.stories.tsx new file mode 100644 index 00000000..febdb790 --- /dev/null +++ b/src/components/SyncStatusCardExecution.stories.tsx @@ -0,0 +1,37 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import SyncStatusCardExecution from './SyncStatusCardExecution' + +const meta = { + title: 'General/SyncStatusCardExecution', + component: SyncStatusCardExecution, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + decorators: [ + Story => ( +
+ +
+ ), + ], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const WithData: Story = { + args: { + synced: 132432, + total: 200000, + }, +} +export const WithoutData: Story = { + args: { + synced: 0, + total: 0, + }, +} + + diff --git a/src/components/SyncStatusCardExecution.tsx b/src/components/SyncStatusCardExecution.tsx new file mode 100644 index 00000000..fbc845c1 --- /dev/null +++ b/src/components/SyncStatusCardExecution.tsx @@ -0,0 +1,86 @@ +import IconText from './IconText' +import { Separator, Stack, XStack, YStack } from 'tamagui' +import StandardGauge from './StandardGauge' +import { Shadow, Text } from '@status-im/components' +interface DeviceStorageHealthProps { + synced: number + total: number +} +const SyncStatusCardExecution: React.FC = ({ synced, total }) => { + const message = synced === total ? 'Synced all data' : 'Syncing' + + const data = () => { + return [ + { + id: 'storage', + label: 'Used', + value: synced, + color: '#2a4af5', + }, + { + id: 'storage', + label: 'Free', + value: total - synced || 1, + color: '#E7EAEE', + }, + ] + } + const formatNumber = (n: number): string => { + return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + } + + return ( + + + + + + Execution Client + + + + Geth + + + + + + + + + + + + {message} + + + {' '} + {formatNumber(synced)} / {formatNumber(total)} + + + + + ) +} + +export default SyncStatusCardExecution diff --git a/src/pages/DeviceSyncStatus/DeviceSyncStatus.tsx b/src/pages/DeviceSyncStatus/DeviceSyncStatus.tsx new file mode 100644 index 00000000..c79795bb --- /dev/null +++ b/src/pages/DeviceSyncStatus/DeviceSyncStatus.tsx @@ -0,0 +1,66 @@ +import { Stack, YStack } from 'tamagui' +import LayoutComponent from '../../components/LayoutComponent' +import NimbusLogo from '../../components/NimbusLogo' +import Titles from '../../components/Titles' +import { Button, PinnedMessage } from '@status-im/components' +import SyncStatusCardExecution from '../../components/SyncStatusCardExecution' +import SyncStatusCardConsensus from '../../components/SyncStatusCardConsensus' + +const DeviceSyncStatus = () => { + return ( + } + rightImageSrc="/background-images/sync-status-background.png" + /> + ) +} + +export default DeviceSyncStatus + +const DeviceSyncStatusContent = () => { + return ( + <> + + + +
+ + + + + + + + + + + +
+ + ) +}