status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-04 07:34:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Pinned notification and format received numbers

Browse Source
This commit is contained in:
Hristo Nedelkov 2023-08-15 13:13:22 +03:00
parent 60c08348e5
commit 59bcd20428
3 changed files with 61 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/SyncStatusCardConsensus.tsx
View File

@ -16,7 +16,7 @@ const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, t
id: 'storage',
label: 'Used',
value: synced,
color: '#E95460',
color: '#ff6161',
},
{
id: 'storage',
@ -26,7 +26,9 @@ const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, t
},
]
}
function formatNumber(n: number): string {
return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}
return (
<Shadow
variant="$2"
@ -41,12 +43,12 @@ const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, t
style={{
padding: '8px 16px',
position: 'relative',
height: '155px',
height: '160px',
}}
>
<YStack space={'$3'} style={{ width: '100%' }}>
<Text size={15} color="#84888e" weight={'semibold'}>
Execution Client
Consensus Client
</Text>
<XStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
<Icon src="/icons/vector.svg" height={46} width={93} />
@ -67,7 +69,9 @@ const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, t
<XStack space={'$2'} style={{ padding: '10px 16px 10px 16px' }}>
<IconText icon="/icons/token.svg">{message}</IconText>
<Text size={13}>123,424 / 170,000</Text>
<Text size={13}>
{formatNumber(synced)} / {formatNumber(total)}
</Text>
</XStack>
</YStack>
</Shadow>

12
src/components/SyncStatusCardExecution.tsx
View File

@ -15,7 +15,7 @@ const SyncStatusCardExecution: React.FC<DeviceStorageHealthProps> = ({ synced, t
id: 'storage',
label: 'Used',
value: synced,
color: '#E95460',
color: '#2a4af5',
},
{
id: 'storage',
@ -25,6 +25,9 @@ const SyncStatusCardExecution: React.FC<DeviceStorageHealthProps> = ({ synced, t
},
]
}
function formatNumber(n: number): string {
return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}
return (
<Shadow
@ -40,7 +43,7 @@ const SyncStatusCardExecution: React.FC<DeviceStorageHealthProps> = ({ synced, t
style={{
padding: '8px 16px',
position: 'relative',
height: '155px',
height: '160px',
}}
>
<YStack space={'$3'} style={{ width: '100%' }}>
@ -68,7 +71,10 @@ const SyncStatusCardExecution: React.FC<DeviceStorageHealthProps> = ({ synced, t
<XStack space={'$2'} style={{ padding: '10px 16px 10px 16px' }}>
<IconText icon="/icons/token.svg">{message}</IconText>
<Text size={13}>123,424 / 170,000</Text>
<Text size={13}>
{' '}
{formatNumber(synced)} / {formatNumber(total)}
</Text>
</XStack>
</YStack>
</Shadow>

67
src/pages/DeviceHealthCheck/DeviceSyncStatus.tsx
View File

@ -2,7 +2,7 @@ import { Stack, YStack } from 'tamagui'
import LayoutComponent from '../../components/LayoutComponent'
import NimbusLogo from '../../components/NimbusLogo'
import Titles from '../../components/Titles'
import { Button } from '@status-im/components'
import { Button, PinnedMessage } from '@status-im/components'
import SyncStatusCardExecution from '../../components/SyncStatusCardExecution'
import SyncStatusCardConsensus from '../../components/SyncStatusCardConsensus'
@ -19,29 +19,48 @@ export default DeviceSyncStatus
const DeviceSyncStatusContent = () => {
return (
<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}
<>
<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',
},
{
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',
},
]}
/>
<SyncStatusCardExecution synced={30} total={50} />
<SyncStatusCardConsensus synced={30} total={50} />
<Stack style={{ marginTop: '1rem' }}>
<Button>Continue</Button>
</Stack>
</YStack>
</div>
</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>
</>
)
}