status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-22 16:18:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15 from nimbus-gui/ia.responsive-css

Browse Source 
Add validator onboarding styles, and add some responsive css
This commit is contained in:
Ivana Andersson 2023-09-13 09:29:31 +03:00 committed by GitHub
commit fa71f7978e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
51 changed files with 317 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -5,6 +5,20 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<link
rel="preload"
href="./Inter-font/Inter-Regular.ttf"
as="font"
type="font/ttf"
crossOrigin=""
/>
<link
rel="preload"
href="./Inter-font/Inter-Bold.ttf"
as="font"
type="font/ttf"
crossOrigin=""
/>
</head>
<body>
<script>window.global = window;</script>

BIN
public/Inter-font/Inter-Black.ttf Normal file
View File

Binary file not shown.

BIN
public/Inter-font/Inter-Bold.ttf Normal file
View File

Binary file not shown.

BIN
public/Inter-font/Inter-Light.ttf Normal file
View File

Binary file not shown.

BIN
public/Inter-font/Inter-Medium.ttf Normal file
View File

Binary file not shown.

BIN
public/Inter-font/Inter-Regular.ttf Normal file
View File

Binary file not shown.

BIN
public/Inter-font/Inter-SemiBold.ttf Normal file
View File

Binary file not shown.

6
public/icons/NimbusDisabled.svg
View File

@ -1,5 +1,3 @@
<svg width="74" height="60" viewBox="0 0 74 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame 31443">
<path id="Vector" d="M59.1019 45.0375V59.0747C51.3854 59.0747 47.4072 58.373 42.7293 52.0562C38.0514 45.7393 35.0293 45.0373 31.0346 45.0373V59.0747H17.001V45.0373H31.0346V31C38.2347 31 42.7293 31.9358 47.4072 38.0187C52.0851 44.1016 54.5517 45.0375 59.1019 45.0375V31H73.1355V45.0375H59.1019Z" fill="#DCE0E5"/>
</g>
<svg xmlns="http://www.w3.org/2000/svg" width="74" height="60" viewBox="0 0 74 60" fill="none">
<path d="M59.1019 45.0375V59.0747C51.3854 59.0747 47.4072 58.373 42.7293 52.0562C38.0514 45.7393 35.0293 45.0373 31.0346 45.0373V59.0747H17.001V45.0373H31.0346V31C38.2347 31 42.7293 31.9358 47.4072 38.0187C52.0851 44.1016 54.5517 45.0375 59.1019 45.0375V31H73.1355V45.0375H59.1019Z" fill="#DCE0E5"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 441 B

After

Width:  |  Height:  |  Size: 405 B

BIN
public/icons/erigon-circle.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 84 KiB

BIN
public/icons/gethereum-mascot-circle.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 47 KiB

BIN
public/icons/hyperledger-besu-circle.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
public/icons/nethermind-circle.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 37 KiB

20
src/components/Charts/DeviceCPULoad.tsx
View File

@ -1,6 +1,6 @@
import StandartLineChart from './StandardLineChart'
import IconText from '../General/IconText'
import { Paragraph, Separator, XStack, YStack } from 'tamagui'
import { Separator, XStack, YStack } from 'tamagui'
import { Shadow, Text } from '@status-im/components'
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
@ -38,8 +38,8 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
<Shadow
variant="$2"
style={{
width: '284px',
height: '136px',
width: '50%',
minHeight: '135px',
borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
@ -49,7 +49,7 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
<XStack
justifyContent="space-between"
style={{
padding: '8px 16px',
padding: '0.75rem 1rem',
position: 'relative',
}}
>
@ -57,16 +57,16 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
<StandartLineChart data={chartData} />
</div>
<YStack space={'$3'}>
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
<Text size={15} weight={'semibold'}>
CPU
</Paragraph>
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
</Text>
<Text size={27} weight={'semibold'}>
{currentLoad} GB
</Paragraph>
</Text>
</YStack>
</XStack>
<Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
<XStack space={'$4'} style={{ padding: '0.65rem 1rem' }}>
<IconText
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
weight={'semibold'}
@ -74,7 +74,7 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
{message}
</IconText>
{message === 'Poor' && (
<Text size={13} color="#E95460">
<Text size={13} color={'#E95460'} weight={'semibold'}>
{((currentLoad / 80) * 100).toFixed(0)}% Utilization
</Text>
)}

21
src/components/Charts/DeviceMemoryHealth.tsx
View File

@ -1,7 +1,7 @@
import StandartLineChart from './StandardLineChart'
import IconText from '../General/IconText'
import { Paragraph, Separator, XStack, YStack } from 'tamagui'
import { Separator, XStack, YStack } from 'tamagui'
import { Shadow as ShadowBox, Text } from '@status-im/components'
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
@ -42,8 +42,8 @@ const DeviceMemoryHealth = ({ currentMemory, maxMemory }: DeviceMemoryHealthProp
<ShadowBox
variant="$2"
style={{
width: '284px',
height: '136px',
width: '50%',
minHeight: '135px',
borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
@ -53,7 +53,7 @@ const DeviceMemoryHealth = ({ currentMemory, maxMemory }: DeviceMemoryHealthProp
<XStack
justifyContent="space-between"
style={{
padding: '8px 16px',
padding: '0.75rem 1rem',
position: 'relative',
}}
>
@ -61,23 +61,24 @@ const DeviceMemoryHealth = ({ currentMemory, maxMemory }: DeviceMemoryHealthProp
<StandartLineChart data={chartData} />
</div>
<YStack space={'$3'}>
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
<Text size={15} weight={'semibold'}>
Memory
</Paragraph>
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
</Text>
<Text size={27} weight={'semibold'}>
{currentLoad} GB
</Paragraph>
</Text>
</YStack>
</XStack>
<Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
<XStack space={'$4'} style={{ padding: '0.65rem 1rem' }}>
<IconText
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
weight={'semibold'}
>
{message}
</IconText>
{message === 'Poor' && (
<Text size={13} color="#E95460">
<Text size={13} color={'#E95460'} weight={'semibold'}>
{((currentLoad / maxMemory || 0) * 100).toFixed(0)}% Utilization
</Text>
)}

21
src/components/Charts/DeviceNetworkHealth.tsx
View File

@ -1,6 +1,6 @@
import StandartLineChart from './StandardLineChart'
import IconText from '../General/IconText'
import { Paragraph, Separator, XStack, YStack } from 'tamagui'
import { Separator, XStack, YStack } from 'tamagui'
import { Shadow as ShadowBox, Text } from '@status-im/components'
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
@ -47,8 +47,8 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr
<ShadowBox
variant="$2"
style={{
width: '284px',
height: '136px',
width: '50%',
minHeight: '135px',
borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
@ -58,7 +58,7 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr
<XStack
justifyContent="space-between"
style={{
padding: '8px 16px',
padding: '0.75rem 1rem',
position: 'relative',
}}
>
@ -66,23 +66,24 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr
<StandartLineChart data={chartData} />
</div>
<YStack space={'$3'}>
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
<Text size={15} weight={'semibold'}>
Network
</Paragraph>
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
</Text>
<Text size={27} weight={'semibold'}>
{currentLoad} GB
</Paragraph>
</Text>
</YStack>
</XStack>
<Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
<XStack space={'$4'} style={{ padding: '0.65rem 1rem' }}>
<IconText
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
weight={'semibold'}
>
{message}
</IconText>
{message === 'Poor' && (
<Text size={13} color="#E95460">
<Text size={13} color={'#E95460'} weight={'semibold'}>
{((currentLoad / 60) * 100).toFixed(0)}% Utilization
</Text>
)}

26
src/components/Charts/DeviceStorageHealth.tsx
View File

@ -1,5 +1,5 @@
import IconText from '../General/IconText'
import { Paragraph, Separator, XStack, YStack } from 'tamagui'
import { Separator, XStack, YStack } from 'tamagui'
import StandardGauge from './StandardGauge'
import { Shadow, Text } from '@status-im/components'
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
@ -33,8 +33,8 @@ const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxS
<Shadow
variant="$2"
style={{
width: '284px',
height: '136px',
width: '50%',
minHeight: '135px',
borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
@ -44,31 +44,31 @@ const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxS
<XStack
justifyContent="space-between"
style={{
padding: '8px 16px',
padding: '0.75rem 1rem',
position: 'relative',
}}
>
<div
style={{
position: 'absolute',
right: '44px',
width: '75px',
height: '75px',
right: '33px',
width: '4.75rem',
height: '4.75rem',
}}
>
<StandardGauge data={data(free)} />
</div>
<YStack space={'$3'}>
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
<Text size={15} weight={'semibold'}>
Storage
</Paragraph>
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
</Text>
<Text size={27} weight={'semibold'}>
{storage} GB
</Paragraph>
</Text>
</YStack>
</XStack>
<Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
<XStack space={'$4'} style={{ padding: '0.65rem 1rem' }}>
<IconText
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
weight={'semibold'}
@ -76,7 +76,7 @@ const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxS
{message}
</IconText>
{message === 'Poor' && (
<Text size={13} color="#E95460">
<Text size={13} color={'#E95460'} weight={'semibold'}>
{utilization.toFixed(0)}% Utilization
</Text>
)}

31
src/components/General/CreateAvatar/CreateAvatar.tsx
View File

@ -1,4 +1,4 @@
import { useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import { XStack, YStack } from 'tamagui'
import { Avatar, Text } from '@status-im/components'
import { ReactionIcon } from '@status-im/icons'
@ -6,15 +6,30 @@ import './CreateAvatar.css'
import LabelInputField from '../LabelInputField'
import ColorPicker from '../ColorPicker/ColorPicker'
import EmojiPickerDialog from '../EmojiPickerDialog'
import { Emoji, EmojiClickData } from 'emoji-picker-react'
import { Emoji, EmojiClickData, EmojiStyle } from 'emoji-picker-react'
const CreateAvatar = () => {
const [chosenColor, setChosenColor] = useState('#2A4AF5')
const [isEmojiDialogOpen, setIsEmojiDialogOpen] = useState(false)
const [selectedEmoji, setSelectedEmoji] = useState<string>('1f600')
const emojiRef = useRef<HTMLDivElement | null>(null)
function changeEmoji(emojiData: EmojiClickData) {
setSelectedEmoji(emojiData.unified)
}
useEffect(() => {
function handleClickOutside(event: any) {
if (emojiRef.current && !emojiRef.current.contains(event.target)) {
setIsEmojiDialogOpen(false)
}
}
document.addEventListener('mousedown', handleClickOutside)
return () => {
document.removeEventListener('mousedown', handleClickOutside)
}
}, [emojiRef])
return (
<YStack my={16}>
<XStack space>
@ -27,7 +42,9 @@ const CreateAvatar = () => {
</Text>
<XStack my={10} alignItems={'end'}>
<div className="device-avatar" style={{ background: chosenColor }}>
{selectedEmoji ? <Emoji unified={selectedEmoji} size={30} /> : null}
{selectedEmoji ? (
<Emoji unified={selectedEmoji} emojiStyle={EmojiStyle.TWITTER} size={30} />
) : null}
</div>
<Avatar
type="icon"
@ -40,9 +57,11 @@ const CreateAvatar = () => {
/>
}
/>
{isEmojiDialogOpen && (
<EmojiPickerDialog changeEmoji={changeEmoji} emojiStyle="TWITTER" />
)}
<div ref={emojiRef}>
{isEmojiDialogOpen && (
<EmojiPickerDialog changeEmoji={changeEmoji} emojiStyle="TWITTER" />
)}
</div>
</XStack>
</YStack>
<YStack flexWrap="wrap" width="80%">

6
src/components/General/EmojiPickerDialog.tsx
View File

@ -16,13 +16,13 @@ type EmojiPickerProps = {
function EmojiPickerDialog({ emojiStyle, changeEmoji }: EmojiPickerProps) {
return (
<Stack position="absolute" zIndex={1} left={100}>
<Stack position="absolute" zIndex={1} left={100} top={-150}>
<EmojiPicker
onEmojiClick={changeEmoji}
autoFocusSearch={false}
theme={Theme.AUTO}
height={350}
width={350}
height={'50vh'}
width={'50vw'}
emojiVersion="1"
lazyLoadEmojis={false}
previewConfig={{ showPreview: false }}

2
src/components/General/Header.tsx
View File

@ -8,7 +8,7 @@ type HeaderProps = {
const Header = ({ selectedTag }: HeaderProps) => {
return (
<XStack justifyContent="space-between" py={'25px'} mt={'70px'}>
<XStack justifyContent="space-between" py={'25px'} mt={'4.4rem'}>
<NimbusLogo />
<TagContainer selectedTag={selectedTag} />
</XStack>

2
src/components/General/IconText.tsx
View File

@ -17,7 +17,7 @@ const IconText = ({ icon, children, weight }: IconTextProps) => {
space={'$2'}
>
{icon}
<Text size={13} color={'#000000'} weight={weight}>
<Text size={13} color={'#09101C'} weight={weight}>
{children}
</Text>
</XStack>

10
src/components/General/LinkWithArrow.tsx
View File

@ -37,7 +37,15 @@ const LinkWithArrow = ({
onClick={navigateHandler}
>
{arrowLeft && <ArrowLeftIcon size={20} color="#2A4CF4" />}
<Link style={{ color: textColor || '#2A4CF4', marginBottom: '2px' }} to={to}>
<Link
style={{
color: textColor || '#2A4CF4',
marginBottom: '2px',
fontSize: 'inherit',
fontWeight: 'inherit',
}}
to={to}
>
{text}
</Link>
{arrowRight && <ArrowRightIcon size={20} color="#2A4CF4" />}

9
src/components/PageWrappers/PageWrapperShadow.tsx
View File

@ -8,6 +8,7 @@ type PageWrapperShadowProps = {
rightImageSrc?: string
rightImageLogo?: boolean
children: ReactNode
imgHeight?: string
}
const PageWrapperShadow = ({
@ -15,6 +16,7 @@ const PageWrapperShadow = ({
rightImageSrc,
rightImageLogo,
children,
imgHeight,
}: PageWrapperShadowProps) => {
const theme = useTheme()
@ -29,7 +31,12 @@ const PageWrapperShadow = ({
<section className="layout-right">
<div className="image-container">
<img src={rightImageSrc} alt="background" className="background-img" />
<img
src={rightImageSrc}
alt="background"
className="background-img"
style={{ height: imgHeight }}
/>
{rightImageLogo ? <NimbusLogoMark /> : null}
</div>
</section>

43
src/index.css
View File

@ -1,3 +1,46 @@
@font-face {
font-family: "Inter";
src: url("./Inter-font/Inter-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("./Inter-font/Inter-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("./Inter-font/Inter-Medium.ttf") format("truetype");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("./Inter-font/Inter-SemiBold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("./Inter-font/Inter-Bold.ttf") format("truetype");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("./Inter-font/Inter-Black.ttf") format("truetype");
font-weight: 900;
font-style: normal;
font-display: swap;
}
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;

7
src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx
View File

@ -16,13 +16,14 @@ const DeviceHealthCheck = () => {
const deviceHealthState = useSelector((state: RootState) => state.deviceHealth)
return (
<PageWrapperShadow rightImageSrc="./background-images/eye-background.png">
<PageWrapperShadow rightImageSrc="./background-images/eye-background.png" imgHeight="100%">
<YStack
space={'$4'}
style={{
justifyContent: 'end',
alignItems: 'start',
marginBottom: '2rem',
marginTop: '4.4rem',
maxWidth: '100%',
}}
>
@ -32,14 +33,14 @@ const DeviceHealthCheck = () => {
subtitle="Configure your device to start Staking on Nimbus"
isAdvancedSettings={true}
/>
<XStack space={'$4'}>
<XStack space={'$4'} width={'100%'}>
<DeviceStorageHealth
storage={deviceHealthState.storage}
maxStorage={deviceHealthState.maxMemory}
/>
<DeviceCPULoad load={deviceHealthState.cpuLoad} />
</XStack>
<XStack space={'$4'}>
<XStack space={'$4'} width={'100%'}>
<DeviceMemory
currentMemory={deviceHealthState.memory}
maxMemory={deviceHealthState.maxMemory}

6
src/pages/DeviceSyncStatus/DeviceSyncStatus.tsx
View File

@ -25,13 +25,17 @@ const DeviceSyncStatus = () => {
}, [dispatch])
return (
<PageWrapperShadow rightImageSrc="./background-images/sync-status-background.png">
<PageWrapperShadow
rightImageSrc="./background-images/sync-status-background.png"
imgHeight="120%"
>
<YStack
space={'$4'}
style={{
justifyContent: 'end',
alignItems: 'start',
maxWidth: '100%',
marginTop: '4.4rem',
}}
>
<NimbusLogo />

2
src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx
View File

@ -46,7 +46,7 @@ const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, t
style={{
padding: '8px 16px',
position: 'relative',
height: '160px',
minHeight: '180px',
}}
>
<YStack space={'$3'} style={{ width: '100%' }}>

2
src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx
View File

@ -45,7 +45,7 @@ const SyncStatusCardExecution: React.FC<DeviceStorageHealthProps> = ({ synced, t
style={{
padding: '8px 16px',
position: 'relative',
height: '160px',
minHeight: '180px',
}}
>
<YStack space={'$3'} style={{ width: '100%' }}>

2
src/pages/LandingPage/LandingPage.tsx
View File

@ -16,7 +16,7 @@ const LandingPage = () => {
return (
<>
<PageWrapperShadow rightImageSrc="./background-images/landing-page-bg.png">
<PageWrapperShadow rightImageSrc="./background-images/landing-page-bg.png" imgHeight="150%">
<YStack className="landing-page">
<XStack pt={'70px'}>
<NimbusLogo />

10
src/pages/ValidatorOnboarding/Activation/Activation.tsx
View File

@ -48,20 +48,20 @@ const Activation = ({
}, [])
return (
<Stack style={styles.confettiContainer} width={'100%'}>
<Stack style={styles.confettiContainer} width={'100%'} minHeight={'65vh'}>
{showConfetti && <Confetti style={styles.confettiCanvas} />}
<YStack style={{ padding: '16px 32px' }}>
<YStack style={{ padding: '26px 32px' }}>
<YStack space={'$5'}>
<Text size={27} weight={'semibold'}>
Activation
</Text>
<Stack style={{ width: '66%' }}>
<Text size={27}>
<Text size={19}>
Congratulations! You have successfully setup your Nimbus Validators and are currently
syncing your nodes.
</Text>
</Stack>
<YStack space={'$3'} marginTop={'10px'} width={'33%'}>
<YStack space={'$3'} marginTop={'25px'} width={'33%'}>
<XStack space={'$3'} justifyContent={'space-between'}>
<ActivationCard text="Validators" value={validatorsValue} />
<ActivationCard {...executionSyncStatus1} />
@ -81,7 +81,7 @@ const Activation = ({
text="Edit Validators"
to="/"
arrowLeft={true}
style={{ marginTop: '44px', marginBottom: '88px' }}
style={{ marginTop: '44px', marginBottom: '88px', fontSize: '13px' }}
/>
</YStack>
</Stack>

4
src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx
View File

@ -30,7 +30,7 @@ const ActivationCard = ({
}}
>
{!isGaugeIncluded && (
<Stack>
<Stack space={'$2'}>
<Text size={15} weight={'semibold'}>
{text}
</Text>
@ -40,7 +40,7 @@ const ActivationCard = ({
</Stack>
)}
{isGaugeIncluded && (
<Stack>
<Stack space={'$2'}>
<Text size={15} weight={'semibold'}>
{text}
</Text>

6
src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
View File

@ -15,8 +15,8 @@ const Advisories = () => {
return (
<XStack
style={{ padding: '16px 32px', justifyContent: 'space-between' }}
height={'65vh'}
style={{ padding: '30px 33px', justifyContent: 'space-between' }}
minHeight={'65vh'}
width={'100%'}
>
<YStack space={'$2'}>
@ -33,7 +33,7 @@ const Advisories = () => {
space={'$2'}
>
<Text
size={27}
size={19}
weight={isSameTitle(title) && 'semibold'}
color={isSameTitle(title) ? 'blue' : ''}
>

6
src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.tsx
View File

@ -17,11 +17,11 @@ const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => {
</Stack>
<YStack space={'$4'}>
{content.map(row => (
<Text key={row} size={19}>
<Text key={row} size={15}>
{row}
</Text>
))}
<Text size={19}>
<Text size={15}>
<Link
to={'https://github.com/ethereum/consensus-specs'}
style={{ textDecorationLine: 'underline', color: '#484848' }}
@ -29,7 +29,7 @@ const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => {
The Ethereum consensus layer specification
</Link>
</Text>
<Text size={19} weight={'semibold'}>
<Text size={15} weight={'semibold'}>
<Link
to={'https://github.com/ethereum/consensus-specs'}
style={{ textDecorationLine: 'underline', color: '#2A4CF4', fontWeight: 'bold' }}

4
src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx
View File

@ -6,7 +6,7 @@ import LinkWithArrow from '../../../components/General/LinkWithArrow'
const ClientSetup = () => {
return (
<YStack padding={'26px'} width={'100%'} space={'$5'}>
<YStack space={'$8'} padding={'26px'} width={'100%'} minHeight={'65vh'}>
<SetupRow title={'Setup up Validators'} />
<Separator borderColor={'#F0F2F5'} />
<WithdrawalAddress title={'Withdrawal address'} />
@ -14,7 +14,7 @@ const ClientSetup = () => {
text="Advanced Recovery Method"
to={'/'}
arrowRight={true}
style={{ marginBottom: '50px' }}
style={{ marginBottom: '50px', fontWeight: 'bold', fontSize: '15px' }}
/>
</YStack>
)

6
src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx
View File

@ -22,7 +22,7 @@ const SetupRow = ({ title }: SetupRowProps) => {
return (
<YStack space={'$4'}>
<Text size={27} weight={'semibold'}>
<Text size={19} weight={'semibold'}>
{title}
</Text>
<XStack justifyContent={'space-between'} width={'80%'}>
@ -38,7 +38,7 @@ const SetupRow = ({ title }: SetupRowProps) => {
/>
</Stack>
<YStack space={'$2'}>
<Text size={19} weight={'semibold'} color="#09101C">
<Text size={15} weight={'semibold'} color="#09101C">
ETH
</Text>
<Text size={27} weight={'semibold'} color="#09101C">
@ -47,7 +47,7 @@ const SetupRow = ({ title }: SetupRowProps) => {
</YStack>
<YStack space={'$2'}>
<XStack style={{ justifyContent: 'space-between' }}>
<Text size={19} weight={'semibold'} color="#09101C">
<Text size={15} weight={'semibold'} color="#09101C">
USD
</Text>
<ChevronDownIcon size={16} color={'#919191'} />

2
src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx
View File

@ -20,7 +20,7 @@ const WithdrawalAddress = ({ title }: WithdrawalAddressProps) => {
return (
<YStack space={'$4'}>
<Text size={27} weight={'semibold'}>
<Text size={19} weight={'semibold'}>
{title}
</Text>
<YStack space={'$3'}>

7
src/pages/ValidatorOnboarding/ContinueButton.tsx
View File

@ -1,4 +1,4 @@
import { Stack, XStack } from 'tamagui'
import { Stack, YStack } from 'tamagui'
import { Button, InformationBox } from '@status-im/components'
import { CloseCircleIcon } from '@status-im/icons'
import { useDispatch, useSelector } from 'react-redux'
@ -43,7 +43,7 @@ const ContinueButton = ({
const isActivationValScreen = activeStep === 3 && subStepValidatorSetup === 3
return (
<XStack style={{ width: '100%', alignItems: 'center', zIndex: 999, marginTop: '40px' }}>
<YStack style={{ width: '100%', alignItems: 'center', zIndex: 999, marginTop: '30px' }}>
<Stack style={{ width: '100%' }}>
{isCopyPastedPhrase && (
<InformationBox
@ -66,14 +66,13 @@ const ContinueButton = ({
width: '100%',
zIndex: 999,
alignItems: 'end',
position: 'absolute',
}}
>
<Button onPress={continueHandler} size={40} disabled={isDisabled()}>
{activeStep < 5 ? 'Continue' : 'Continue to Dashboard'}
</Button>
</Stack>
</XStack>
</YStack>
)
}

47
src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
View File

@ -1,7 +1,23 @@
.custom-step {
background-color: #ffffff;
}
div[class*="StepMain-"] {
align-items: start;
}
div[class*="LabelContainer-"] span[class*="Label-"] {
text-align: initial;
text-transform: uppercase;
font-family: "Inter", sans-serif;
}
div[class*="ConnectorContainer-"] {
right: unset;
left: calc(-100% + 28px);
width: 100%;
}
span[class*="Connector-"] {
position: relative;
z-index: -1;
}
.custom-step.StepMain--active,
.custom-step.StepMain--completed {
background-color: #2a4cf4;
@ -37,32 +53,9 @@
content: attr(data-subtitle);
position: absolute;
top: calc(100% + 4px);
left: 8px;
font-size: 12px;
font-family: "Inter", sans-serif;
color: #A2A9B0;
background: transparent;
border: none;
}
[data-step="Overview"]::after {
left: 35%;
}
[data-step="Advisories"]::after {
left: 30%;
}
[data-step="Client Setup"]::after {
left: 32%;
}
[data-step="Validator Setup"]::after {
left: 25%;
}
[data-step="Key Generation"]::after {
left: 24.5%;
}
[data-step="Activation"]::after {
left: 33%;
width: max-content;
}

9
src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
View File

@ -22,7 +22,14 @@ const FormStepper = ({ activeStep, changeActiveStep }: FormStepperProps) => {
nonLinear={true}
styleConfig={stepStyle}
connectorStyleConfig={customConnectorStyle}
style={{ fontSize: '14px', zIndex: 999, width: '100%', padding: 0, marginBottom: '2rem' }}
style={{
fontSize: '14px',
zIndex: 999,
width: '100%',
padding: 0,
marginBottom: '3rem',
fontFamily: 'Inter',
}}
>
{steps.map((step, index) => (
<Step

2
src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.module.css
View File

@ -30,6 +30,8 @@
background-color: #f7f8f9;
width: 100%;
font-size: 16px;
color: rgb(13, 22, 37);
font-family: "Inter", sans-serif;
}
.input-wrapper {

2
src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx
View File

@ -12,7 +12,7 @@ const ConfirmRecoveryPhrase = () => {
return (
<YStack space={'$3'} style={{ width: '100%', marginTop: '20px' }}>
<KeyGenerationTitle />
<Text size={27}>Confirm Recovery Phrase</Text>
<Text size={19}>Confirm Recovery Phrase</Text>
<Stack
style={{
display: 'grid',

56
src/pages/ValidatorOnboarding/Overview/Overview.tsx
View File

@ -1,4 +1,4 @@
import { Text as TextTam, XStack, YStack } from 'tamagui'
import { XStack, YStack } from 'tamagui'
import { Text } from '@status-im/components'
import OverviewCard from './OverviewCard'
@ -7,29 +7,37 @@ import LinkWithArrow from '../../../components/General/LinkWithArrow'
const Overview = () => {
return (
<>
<YStack className="layout-left" space={'$5'} style={{ padding: '16px 32px' }}>
<TextTam fontSize={27} fontWeight={'600'}>
Overview
</TextTam>
<Text size={27}>
Becoming a validator is a big responsibility with important preparation steps. Only start
the deposit process when youre ready.
</Text>
<Text size={15} color="#939BA1">
By running a validator, you'll be responsible for securing the network and receive
continuous payouts for actions that help the network reach consensus.
</Text>
<Text size={15} color="#939BA1">
Since the successful transition to proof-of-stake via The Merge, Ethereum is fully secured
by proof-of-stake validators. By running a validator, you'll be helping to secure the
Ethereum network.
</Text>
<LinkWithArrow
text="Learn more"
to={'/'}
arrowRight={true}
style={{ marginBottom: '1%' }}
/>
<YStack
className="layout-left"
space={'$5'}
style={{ padding: '26px 0 32px 32px' }}
minHeight={'65vh'}
justifyContent={'space-between'}
>
<YStack space={'$5'}>
<Text size={27} weight={'semibold'}>
Overview
</Text>
<Text size={19}>
Becoming a validator is a big responsibility with important preparation steps. Only
start the deposit process when you're ready.
</Text>
<Text size={15} color="#939BA1">
By running a validator, you'll be responsible for securing the network and receive
continuous payouts for actions that help the network reach consensus.
</Text>
<Text size={15} color="#939BA1">
Since the successful transition to proof-of-stake via The Merge, Ethereum is fully
secured by proof-of-stake validators. By running a validator, you'll be helping to
secure the Ethereum network.
</Text>
<LinkWithArrow
text="Learn More"
to={'/'}
arrowRight={true}
style={{ marginBottom: '1%', fontSize: '13px' }}
/>
</YStack>
<XStack space={'$3'}>
<OverviewCard text={'Current APR'} value={'4.40%'} />
<OverviewCard text={'Total ETH Staked'} value={'9,451,123'} />

4
src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx
View File

@ -12,12 +12,12 @@ const OverviewCard = ({ text, value }: OverviewCardProps) => {
style={{
borderRadius: '16px',
border: '1px solid rgba(0, 0, 0, 0.15)',
width: '46%',
width: '44%',
padding: '12px 16px',
backgroundColor: '#FFF',
}}
>
<Text size={19} weight={'semibold'}>
<Text size={15} weight={'semibold'}>
{text}
</Text>
<Text size={27} color="blue" weight={'semibold'}>

46
src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
View File

@ -82,8 +82,8 @@ const ValidatorOnboarding = () => {
<YStack
style={{
width: '100%',
margin: '0 auto',
padding: '2% 10% 2%',
maxWidth: '1100px',
margin: '4rem auto 2rem',
justifyContent: 'start',
alignItems: 'start',
}}
@ -105,26 +105,28 @@ const ValidatorOnboarding = () => {
{activeStep === 3 && subStepValidatorSetup === 3 && <ActivationValidatorSetup />}
{activeStep === 4 && <KeyGeneration isConfirmPhraseStage={isConfirmPhraseStage} />}
{activeStep === 5 && <Activation
validatorsValue='4'
executionSyncStatus1={{
text: "Execution Sync Status",
isGaugeIncluded: true,
gaugeColor: "$blue",
gaugeSynced: 123.524,
gaugeTotal: 172.503,
}}
executionSyncStatus2={{
text: "Execution Sync Status",
isGaugeIncluded: true,
gaugeColor: "$red",
gaugeSynced: 123.524,
gaugeTotal: 172.503,
}}
currentAPRValue="4.40%"
estimatedActivationTimeValue="32 Days"
validatorQueueValue="92603"
/>}
{activeStep === 5 && (
<Activation
validatorsValue="4"
executionSyncStatus1={{
text: 'Execution Sync Status',
isGaugeIncluded: true,
gaugeColor: '$blue',
gaugeSynced: 123.524,
gaugeTotal: 172.503,
}}
executionSyncStatus2={{
text: 'Execution Sync Status',
isGaugeIncluded: true,
gaugeColor: '$red',
gaugeSynced: 123.524,
gaugeTotal: 172.503,
}}
currentAPRValue="4.40%"
estimatedActivationTimeValue="32 Days"
validatorQueueValue="92603"
/>
)}
</ValidatorBoxWrapper>
<ContinueButton
activeStep={activeStep}

4
src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusClientCard.tsx
View File

@ -18,10 +18,10 @@ const ConsensusClientCard = ({ name, icon }: ConsensusClientCardProps) => {
padding: '12px 16px',
width: '29%',
}}
space={'$10'}
space={'$8'}
>
<Stack>
<Text size={27} weight={'semibold'}>
<Text size={15} weight={'semibold'}>
{name}
</Text>
</Stack>

15
src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx
View File

@ -32,29 +32,29 @@ const ConsensusSelection = () => {
]
return (
<YStack style={{ width: '100%', padding: '32px' }}>
<XStack justifyContent={'space-between'}>
<YStack style={{ width: '100%', padding: '32px' }} minHeight={'65vh'}>
<XStack justifyContent={'space-between'} alignItems={'center'} mb={'30px'}>
<Text size={27} weight={'semibold'}>
Validator Setup
</Text>
<XStack space={'$2'}>
<PairedDeviceCard isVisibleState={true} />
<ConsensusGaugeCard
color="blue"
synced={134879}
title="Execution Sync Status"
total={150000}
/>
<PairedDeviceCard isVisibleState={true} />
</XStack>
</XStack>
<YStack>
<YStack mb={'50px'}>
<Stack style={{ marginBottom: '4px' }}>
<Text size={13} color="#647084">
Consensus Client Detection
</Text>
</Stack>
<Text size={15} weight={'regular'}>
<Text size={15}>
No existing execution client installations have been detected on paired device.
</Text>
<Text size={13} color="#828282">
@ -63,14 +63,14 @@ const ConsensusSelection = () => {
</Text>
</YStack>
<TextTam fontSize={27} style={{ margin: '5px', marginLeft: 0, marginTop: '50px' }}>
<TextTam fontSize={19} style={{ marginLeft: 0, marginTop: '50px', marginBottom: '25px' }}>
Install Consensus client
</TextTam>
<XStack space={'$8'}>
<ConsensusClientCard name={clients[0].name} icon={clients[0].icon} />
<YStack width={'67%'} space={'$4'}>
<Text size={27}>The resource efficient Ethereum Clients.</Text>
<Text size={19}>The resource efficient Ethereum Clients.</Text>
<Text size={15}>
{selectedClient} is a client implementation for both execution and consensus layers that
strives to be as lightweight as possible in terms of resources used. This allows it to
@ -81,6 +81,7 @@ const ConsensusSelection = () => {
<LinkWithArrow
textColor="black"
text="Nimbus Documentation"
style={{ fontSize: '15px' }}
arrowRight={true}
to="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
/>

4
src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx
View File

@ -20,9 +20,9 @@ const PairedDeviceCard = ({ isVisibleState }: PairedDeviceCardProps) => {
<XStack
space={'$7'}
style={{
padding: '2px 6px',
padding: '6px 12px',
border: '1px solid #DCE0E5',
borderRadius: '15px',
borderRadius: '10px',
}}
alignItems={'center'}
>

10
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx
View File

@ -19,21 +19,21 @@ const ActivationValidatorSetup = () => {
}, [])
return (
<Stack style={styles.confettiContainer} width={'100%'}>
<Stack style={styles.confettiContainer} width={'100%'} minHeight={'65vh'}>
{showConfetti && <Confetti style={styles.confettiCanvas} />}
<YStack style={{ padding: '16px 32px' }}>
<YStack space={'$3'}>
<YStack style={{ padding: '26px 32px' }}>
<YStack space={'$5'}>
<Text size={27} weight={'semibold'}>
Activation
</Text>
<Stack>
<Text size={27}>
<Text size={19}>
Congratulations! You have successfully setup your Execution and Consensus clients and
are currently syncing your nodes. You need to be sufficiently synced prior to setting
up your validators and making a deposit.
</Text>
</Stack>
<YStack space={'$3'} marginTop={'10px'} width={'33%'}>
<YStack space={'$3'} marginTop={'25px'} width={'33%'}>
<XStack width={'151%'} space={'$3'}>
<ActivationCard
text="Execution Sync Status"

6
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OsCard.tsx
View File

@ -18,13 +18,13 @@ const OsCard = ({ name, icon, onClick, isSelected }: OsCardProps) => {
border: isSelected ? '1px solid #2A4AF566' : '1px solid rgba(0, 0, 0, 0.15);',
borderRadius: '16px',
padding: '12px 16px',
width: '33%',
width: '32%',
}}
space={'$12'}
space={'$8'}
onPress={onClick}
>
<Stack>
<Text size={27} weight={'semibold'}>
<Text size={19} weight={'semibold'}>
{name}
</Text>
</Stack>

20
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
View File

@ -13,7 +13,7 @@ const ValidatorSetupInstall = () => {
const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient)
return (
<YStack style={{ width: '100%', padding: '16px 32px' }}>
<YStack style={{ width: '100%', padding: '26px 32px' }}>
<XStack justifyContent={'space-between'} style={{ marginBottom: '10px' }}>
<Text size={27} weight={'semibold'}>
Validator Setup
@ -23,7 +23,7 @@ const ValidatorSetupInstall = () => {
<YStack>
<Stack style={{ marginBottom: '4px' }}>
<YStack space={'$3'}>
<Text size={19} weight={'semibold'}>
<Text size={15} weight={'semibold'}>
{selectedClient}
</Text>
@ -41,12 +41,12 @@ const ValidatorSetupInstall = () => {
style={{
border: '1px solid #00000026',
borderRadius: '16px',
padding: '6px 12px',
padding: '19px 16px',
}}
space={'$3'}
>
<Text size={27}> Installing {selectedClient}</Text>
<Text size={19} color="#647084" weight={'regular'}>
<Text size={19}> Installing {selectedClient}</Text>
<Text size={15} color="#647084" weight={'regular'}>
There are several ways to install Geth, including via a package manager, downloading
a pre-built bundle, running as a docker container or building from downloaded source
code. On this page the various installation options are explained for several major
@ -59,10 +59,10 @@ const ValidatorSetupInstall = () => {
are also provided in each section.
</Text>
<XStack justifyContent={'space-between'} space={'$2'} margin={'50px 0px'}>
<XStack justifyContent={'space-between'} my={'15px'}>
<OsCard
icon="/icons/MAC.png"
name="Mac"
name="MacOS"
isSelected={selectedOs === 'Mac'}
onClick={() => setSelectedOs('Mac')}
/>
@ -80,17 +80,17 @@ const ValidatorSetupInstall = () => {
/>
</XStack>
<YStack space={'$2'}>
<Text size={27}> Package Managers</Text>
<Text size={19}> Package Managers</Text>
<Text size={15} weight={'semibold'}>
MacOS via Homebrew
</Text>
<Text size={19} color="#647084" weight={'regular'}>
<Text size={15} color="#647084">
The easiest way to install go-ethereum is to use the Geth Homebrew tap. The first
step is to check that Homebrew is installed. The following command should return a
version number.
</Text>
<SyntaxHighlighterBox rows={['brew -v']} />
<Text size={19} color="#647084" weight={'regular'}>
<Text size={15} color="#647084">
If a version number is returned, then Homebrew is installed. If not, Homebrew can
be installed by following the instructions here. With Homebrew installed, the
following commands add the Geth tap and install Geth:

8
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx
View File

@ -30,13 +30,13 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
padding: '12px 16px',
width: '19%',
}}
space={'$12'}
space={'$8'}
onClick={() => {
dispatch(selectClient(name))
}}
>
<Stack>
<Text size={27} weight={'semibold'} color={isComingSoon ? '#DCE0E5' : ''}>
<Text size={19} weight={'semibold'} color={isComingSoon ? '#DCE0E5' : ''}>
{name}
</Text>
{isComingSoon && (
@ -46,9 +46,9 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
padding: '3px',
padding: '3px 6px',
borderRadius: '67px',
width: '50%',
width: 'fit-content',
}}
>
<Text size={11} color="#fff">

14
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx
View File

@ -7,8 +7,12 @@ import LinkWithArrow from '../../../../components/General/LinkWithArrow'
const ValidatorSetup = () => {
return (
<YStack style={{ width: '100%', padding: '16px 32px' }}>
<XStack justifyContent={'space-between'}>
<YStack
style={{ width: '100%', padding: '26px 32px' }}
minHeight={'65vh'}
justifyContent={'space-between'}
>
<XStack justifyContent={'space-between'} alignItems={'center'}>
<Text size={27} weight={'semibold'}>
Validator Setup
</Text>
@ -21,7 +25,7 @@ const ValidatorSetup = () => {
Execution Client Detection
</Text>
</Stack>
<Text size={15} weight={'regular'}>
<Text size={15}>
No existing execution client installations have been detected on paired device.
</Text>
<Text size={13} color="#828282">
@ -30,7 +34,7 @@ const ValidatorSetup = () => {
</Text>
</YStack>
<TextTam fontSize={27} style={{ margin: '5px', marginLeft: 0 }}>
<TextTam fontSize={27} style={{ marginTop: '15px', marginLeft: 0, marginBottom: '15px' }}>
Select Execution client
</TextTam>
<XStack justifyContent={'space-between'}>
@ -43,7 +47,7 @@ const ValidatorSetup = () => {
<LinkWithArrow
to="/"
text="View Execution client comparison chart"
style={{ marginTop: '3%' }}
style={{ marginTop: '6%', fontWeight: 'bold' }}
/>
</YStack>
)