Merge branch 'main' into rd.create-page-wrappers

public/icons/token.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="16/token" clip-path="url(#clip0_101_177067)">
+<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M2.0999 8.00002C2.0999 4.74154 4.74142 2.10002 7.9999 2.10002C11.2584 2.10002 13.8999 4.74154 13.8999 8.00002C13.8999 11.2585 11.2584 13.9 7.9999 13.9C4.74142 13.9 2.0999 11.2585 2.0999 8.00002ZM7.9999 0.900024C4.07868 0.900024 0.899902 4.0788 0.899902 8.00002C0.899902 11.9212 4.07868 15.1 7.9999 15.1C11.9211 15.1 15.0999 11.9212 15.0999 8.00002C15.0999 4.0788 11.9211 0.900024 7.9999 0.900024ZM7.31034 5.76572C7.64449 5.59963 8.00358 5.55901 8.34841 5.64132C8.69532 5.72413 9.03172 5.93274 9.30682 6.26287L10.2287 5.49464C9.80453 4.98565 9.25002 4.62282 8.62702 4.47411L8.59999 4.46781V3.50007H7.39999V4.46782C7.18648 4.5165 6.97733 4.59119 6.77622 4.69115C6.19937 4.97788 5.7242 5.45404 5.3971 6.04147C5.07015 6.62866 4.89999 7.30995 4.89999 8.00008C4.89999 8.6902 5.07015 9.37149 5.3971 9.95868C5.7242 10.5461 6.19937 11.0223 6.77622 11.309C6.97725 11.4089 7.18632 11.4836 7.39975 11.5323V12.5001H8.59975V11.5324C8.60884 11.5303 8.61793 11.5282 8.62702 11.526C9.25002 11.3773 9.80453 11.0145 10.2287 10.5055L9.30682 9.73728C9.03172 10.0674 8.69532 10.276 8.34841 10.3588C8.00358 10.4411 7.64449 10.4005 7.31034 10.2344C6.97357 10.067 6.66784 9.77415 6.44553 9.3749C6.22308 8.97539 6.09999 8.49664 6.09999 8.00008C6.09999 7.50351 6.22308 7.02476 6.44553 6.62525C6.66784 6.226 6.97357 5.93312 7.31034 5.76572Z" fill="#647084"/>
+</g>
+<defs>
+<clipPath id="clip0_101_177067">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/icons/vector.svg

@@ -0,0 +1,3 @@
+<svg width="93" height="46" viewBox="0 0 93 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M69.75 23.0001V46C56.9658 46 50.375 44.8503 42.625 34.5002C34.875 24.1502 29.8681 22.9999 23.25 22.9999V46H0V22.9999H23.25V9.06453e-09C35.1786 -1.88392e-08 42.625 1.53334 50.375 11.5001C58.125 21.4668 62.2115 23.0001 69.75 23.0001V0H93V23.0001H69.75Z" fill="#FF6161"/>
+</svg>

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: <ConnectDevicePage />,
+    path: '/device-sync-status',
+    element: <DeviceSyncStatus />,
   },
 ])
 

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 => (
+      <div style={{ height: '100%', width: '100%' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DeviceSyncStatus>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const WithData: Story = {
+  args: {},
+}

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 => (
+      <div style={{ height: '25vh' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof SyncStatusCardConsensus>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const WithData: Story = {
+  args: {
+    synced: 132432,
+    total: 200000,
+  },
+}
+export const WithoutData: Story = {
+  args: {
+    synced: 0,
+    total: 0,
+  },
+}
+
+ 

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<DeviceStorageHealthProps> = ({ 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 (
+    <Shadow
+      variant="$2"
+      style={{
+        width: '632px',
+        borderRadius: '16px',
+        borderTopLeftRadius: '0px',
+        borderTopRightRadius: '0px',
+      }}
+    >
+      <YStack>
+        <XStack
+          justifyContent="space-between"
+          style={{
+            padding: '8px 16px',
+            position: 'relative',
+            height: '160px',
+          }}
+        >
+          <YStack space={'$3'} style={{ width: '100%' }}>
+            <Text size={15} color="#84888e" weight={'semibold'}>
+              Consensus Client
+            </Text>
+            <XStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+              <Icon src="/icons/vector.svg" height={46} width={93} />
+              <Stack
+                style={{
+                  height: '115px',
+                  width: '115px',
+                }}
+              >
+                <StandardGauge data={data()} />
+              </Stack>
+            </XStack>
+          </YStack>
+        </XStack>
+
+        <Separator borderColor={'#e3e3e3'} />
+
+        <XStack space={'$2'} style={{ padding: '10px 16px 10px 16px' }}>
+          <IconText icon="/icons/token.svg">{message}</IconText>
+
+          <Text size={13}>
+            {formatNumber(synced)} / {formatNumber(total)}
+          </Text>
+        </XStack>
+      </YStack>
+    </Shadow>
+  )
+}
+
+export default SyncStatusCardConsensus

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 => (
+      <div style={{ height: '25vh' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof SyncStatusCardExecution>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const WithData: Story = {
+  args: {
+    synced: 132432,
+    total: 200000,
+  },
+}
+export const WithoutData: Story = {
+  args: {
+    synced: 0,
+    total: 0,
+  },
+}
+
+ 

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<DeviceStorageHealthProps> = ({ 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 (
+    <Shadow
+      variant="$2"
+      style={{
+        width: '632px',
+        borderRadius: '16px',
+        borderBottomRightRadius: '0px',
+        borderBottomLeftRadius: '0px',
+      }}
+    >
+      <YStack>
+        <XStack
+          justifyContent="space-between"
+          style={{
+            padding: '8px 16px',
+            position: 'relative',
+            height: '160px',
+          }}
+        >
+          <YStack space={'$3'} style={{ width: '100%' }}>
+            <Text size={15} color="#84888e" weight={'semibold'}>
+              Execution Client
+            </Text>
+            <XStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+              <Text color={'#09101C'} size={27} weight={'semibold'}>
+                Geth
+              </Text>
+              <Stack
+                style={{
+                  height: '115px',
+                  width: '115px',
+                }}
+              >
+                <StandardGauge data={data()} />
+              </Stack>
+            </XStack>
+          </YStack>
+        </XStack>
+
+        <Separator borderColor={'#e3e3e3'} />
+
+        <XStack space={'$2'} style={{ padding: '10px 16px 10px 16px' }}>
+          <IconText icon="/icons/token.svg">{message}</IconText>
+
+          <Text size={13}>
+            {' '}
+            {formatNumber(synced)} / {formatNumber(total)}
+          </Text>
+        </XStack>
+      </YStack>
+    </Shadow>
+  )
+}
+
+export default SyncStatusCardExecution

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 (
+    <LayoutComponent
+      content={<DeviceSyncStatusContent />}
+      rightImageSrc="/background-images/sync-status-background.png"
+    />
+  )
+}
+
+export default DeviceSyncStatus
+
+const DeviceSyncStatusContent = () => {
+  return (
+    <>
+      <Stack>
+        <PinnedMessage
+          messages={[
+            {
+              id: '123',
+              text: 'You are currently syncing to the Nimbus Validator Client and Beacon node. This may take a while... Please stay put until you can access the Node Manager.',
+              reactions: { love: new Set(['userId1', 'userId2']) },
+            },
+            {
+              id: '123',
+              text: 'You are currently syncing to the Nimbus Validator Client and Beacon node. This may take a while... Please stay put until you can access the Node Manager.',
+              reactions: { love: new Set(['userId3', 'userId4w']) },
+            },
+          ]}
+        />
+      </Stack>
+      <div className="container-inner landing-page">
+        <YStack
+          space={'$4'}
+          style={{
+            justifyContent: 'end',
+            alignItems: 'start',
+            marginBottom: '2rem',
+            maxWidth: '100%',
+          }}
+        >
+          <NimbusLogo />
+          <Titles
+            title="Device Health Check"
+            subtitle="Configure your device to start Staking on Nimbus"
+            isAdvancedSettings={true}
+          />
+          <YStack>
+            <SyncStatusCardExecution synced={132432} total={200000} />
+            <SyncStatusCardConsensus synced={149500} total={160000} />
+          </YStack>
+          <Stack style={{ marginTop: '1rem' }}>
+            <Button>Continue</Button>
+          </Stack>
+        </YStack>
+      </div>
+    </>
+  )
+}