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" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <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> </head>
<body> <body>
<script>window.global = window;</script> <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"> <svg xmlns="http://www.w3.org/2000/svg" width="74" height="60" viewBox="0 0 74 60" fill="none">
<g id="Frame 31443"> <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"/>
<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> </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 StandartLineChart from './StandardLineChart'
import IconText from '../General/IconText' 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 { Shadow, Text } from '@status-im/components'
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons' import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
@ -38,8 +38,8 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
<Shadow <Shadow
variant="$2" variant="$2"
style={{ style={{
width: '284px', width: '50%',
height: '136px', minHeight: '135px',
borderRadius: '16px', borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none', border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff', backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
@ -49,7 +49,7 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
<XStack <XStack
justifyContent="space-between" justifyContent="space-between"
style={{ style={{
padding: '8px 16px', padding: '0.75rem 1rem',
position: 'relative', position: 'relative',
}} }}
> >
@ -57,16 +57,16 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
<StandartLineChart data={chartData} /> <StandartLineChart data={chartData} />
</div> </div>
<YStack space={'$3'}> <YStack space={'$3'}>
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}> <Text size={15} weight={'semibold'}>
CPU CPU
</Paragraph> </Text>
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}> <Text size={27} weight={'semibold'}>
{currentLoad} GB {currentLoad} GB
</Paragraph> </Text>
</YStack> </YStack>
</XStack> </XStack>
<Separator borderColor={'#e3e3e3'} /> <Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}> <XStack space={'$4'} style={{ padding: '0.65rem 1rem' }}>
<IconText <IconText
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />} icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
weight={'semibold'} weight={'semibold'}
@ -74,7 +74,7 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
{message} {message}
</IconText> </IconText>
{message === 'Poor' && ( {message === 'Poor' && (
<Text size={13} color="#E95460"> <Text size={13} color={'#E95460'} weight={'semibold'}>
{((currentLoad / 80) * 100).toFixed(0)}% Utilization {((currentLoad / 80) * 100).toFixed(0)}% Utilization
</Text> </Text>
)} )}

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

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

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

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

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

@ -1,5 +1,5 @@
import IconText from '../General/IconText' import IconText from '../General/IconText'
import { Paragraph, Separator, XStack, YStack } from 'tamagui' import { Separator, XStack, YStack } from 'tamagui'
import StandardGauge from './StandardGauge' import StandardGauge from './StandardGauge'
import { Shadow, Text } from '@status-im/components' import { Shadow, Text } from '@status-im/components'
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons' import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
@ -33,8 +33,8 @@ const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxS
<Shadow <Shadow
variant="$2" variant="$2"
style={{ style={{
width: '284px', width: '50%',
height: '136px', minHeight: '135px',
borderRadius: '16px', borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none', border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff', backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
@ -44,31 +44,31 @@ const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxS
<XStack <XStack
justifyContent="space-between" justifyContent="space-between"
style={{ style={{
padding: '8px 16px', padding: '0.75rem 1rem',
position: 'relative', position: 'relative',
}} }}
> >
<div <div
style={{ style={{
position: 'absolute', position: 'absolute',
right: '44px', right: '33px',
width: '75px', width: '4.75rem',
height: '75px', height: '4.75rem',
}} }}
> >
<StandardGauge data={data(free)} /> <StandardGauge data={data(free)} />
</div> </div>
<YStack space={'$3'}> <YStack space={'$3'}>
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}> <Text size={15} weight={'semibold'}>
Storage Storage
</Paragraph> </Text>
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}> <Text size={27} weight={'semibold'}>
{storage} GB {storage} GB
</Paragraph> </Text>
</YStack> </YStack>
</XStack> </XStack>
<Separator borderColor={'#e3e3e3'} /> <Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}> <XStack space={'$4'} style={{ padding: '0.65rem 1rem' }}>
<IconText <IconText
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />} icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
weight={'semibold'} weight={'semibold'}
@ -76,7 +76,7 @@ const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxS
{message} {message}
</IconText> </IconText>
{message === 'Poor' && ( {message === 'Poor' && (
<Text size={13} color="#E95460"> <Text size={13} color={'#E95460'} weight={'semibold'}>
{utilization.toFixed(0)}% Utilization {utilization.toFixed(0)}% Utilization
</Text> </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 { XStack, YStack } from 'tamagui'
import { Avatar, Text } from '@status-im/components' import { Avatar, Text } from '@status-im/components'
import { ReactionIcon } from '@status-im/icons' import { ReactionIcon } from '@status-im/icons'
@ -6,15 +6,30 @@ import './CreateAvatar.css'
import LabelInputField from '../LabelInputField' import LabelInputField from '../LabelInputField'
import ColorPicker from '../ColorPicker/ColorPicker' import ColorPicker from '../ColorPicker/ColorPicker'
import EmojiPickerDialog from '../EmojiPickerDialog' import EmojiPickerDialog from '../EmojiPickerDialog'
import { Emoji, EmojiClickData } from 'emoji-picker-react' import { Emoji, EmojiClickData, EmojiStyle } from 'emoji-picker-react'
const CreateAvatar = () => { const CreateAvatar = () => {
const [chosenColor, setChosenColor] = useState('#2A4AF5') const [chosenColor, setChosenColor] = useState('#2A4AF5')
const [isEmojiDialogOpen, setIsEmojiDialogOpen] = useState(false) const [isEmojiDialogOpen, setIsEmojiDialogOpen] = useState(false)
const [selectedEmoji, setSelectedEmoji] = useState<string>('1f600') const [selectedEmoji, setSelectedEmoji] = useState<string>('1f600')
const emojiRef = useRef<HTMLDivElement | null>(null)
function changeEmoji(emojiData: EmojiClickData) { function changeEmoji(emojiData: EmojiClickData) {
setSelectedEmoji(emojiData.unified) 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 ( return (
<YStack my={16}> <YStack my={16}>
<XStack space> <XStack space>
@ -27,7 +42,9 @@ const CreateAvatar = () => {
</Text> </Text>
<XStack my={10} alignItems={'end'}> <XStack my={10} alignItems={'end'}>
<div className="device-avatar" style={{ background: chosenColor }}> <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> </div>
<Avatar <Avatar
type="icon" type="icon"
@ -40,9 +57,11 @@ const CreateAvatar = () => {
/> />
} }
/> />
{isEmojiDialogOpen && ( <div ref={emojiRef}>
<EmojiPickerDialog changeEmoji={changeEmoji} emojiStyle="TWITTER" /> {isEmojiDialogOpen && (
)} <EmojiPickerDialog changeEmoji={changeEmoji} emojiStyle="TWITTER" />
)}
</div>
</XStack> </XStack>
</YStack> </YStack>
<YStack flexWrap="wrap" width="80%"> <YStack flexWrap="wrap" width="80%">

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

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

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

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

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

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

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

@ -37,7 +37,15 @@ const LinkWithArrow = ({
onClick={navigateHandler} onClick={navigateHandler}
> >
{arrowLeft && <ArrowLeftIcon size={20} color="#2A4CF4" />} {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} {text}
</Link> </Link>
{arrowRight && <ArrowRightIcon size={20} color="#2A4CF4" />} {arrowRight && <ArrowRightIcon size={20} color="#2A4CF4" />}

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

@ -8,6 +8,7 @@ type PageWrapperShadowProps = {
rightImageSrc?: string rightImageSrc?: string
rightImageLogo?: boolean rightImageLogo?: boolean
children: ReactNode children: ReactNode
imgHeight?: string
} }
const PageWrapperShadow = ({ const PageWrapperShadow = ({
@ -15,6 +16,7 @@ const PageWrapperShadow = ({
rightImageSrc, rightImageSrc,
rightImageLogo, rightImageLogo,
children, children,
imgHeight,
}: PageWrapperShadowProps) => { }: PageWrapperShadowProps) => {
const theme = useTheme() const theme = useTheme()
@ -29,7 +31,12 @@ const PageWrapperShadow = ({
<section className="layout-right"> <section className="layout-right">
<div className="image-container"> <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} {rightImageLogo ? <NimbusLogoMark /> : null}
</div> </div>
</section> </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 { :root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5; 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) const deviceHealthState = useSelector((state: RootState) => state.deviceHealth)
return ( return (
<PageWrapperShadow rightImageSrc="./background-images/eye-background.png"> <PageWrapperShadow rightImageSrc="./background-images/eye-background.png" imgHeight="100%">
<YStack <YStack
space={'$4'} space={'$4'}
style={{ style={{
justifyContent: 'end', justifyContent: 'end',
alignItems: 'start', alignItems: 'start',
marginBottom: '2rem', marginBottom: '2rem',
marginTop: '4.4rem',
maxWidth: '100%', maxWidth: '100%',
}} }}
> >
@ -32,14 +33,14 @@ const DeviceHealthCheck = () => {
subtitle="Configure your device to start Staking on Nimbus" subtitle="Configure your device to start Staking on Nimbus"
isAdvancedSettings={true} isAdvancedSettings={true}
/> />
<XStack space={'$4'}> <XStack space={'$4'} width={'100%'}>
<DeviceStorageHealth <DeviceStorageHealth
storage={deviceHealthState.storage} storage={deviceHealthState.storage}
maxStorage={deviceHealthState.maxMemory} maxStorage={deviceHealthState.maxMemory}
/> />
<DeviceCPULoad load={deviceHealthState.cpuLoad} /> <DeviceCPULoad load={deviceHealthState.cpuLoad} />
</XStack> </XStack>
<XStack space={'$4'}> <XStack space={'$4'} width={'100%'}>
<DeviceMemory <DeviceMemory
currentMemory={deviceHealthState.memory} currentMemory={deviceHealthState.memory}
maxMemory={deviceHealthState.maxMemory} maxMemory={deviceHealthState.maxMemory}

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -17,11 +17,11 @@ const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => {
</Stack> </Stack>
<YStack space={'$4'}> <YStack space={'$4'}>
{content.map(row => ( {content.map(row => (
<Text key={row} size={19}> <Text key={row} size={15}>
{row} {row}
</Text> </Text>
))} ))}
<Text size={19}> <Text size={15}>
<Link <Link
to={'https://github.com/ethereum/consensus-specs'} to={'https://github.com/ethereum/consensus-specs'}
style={{ textDecorationLine: 'underline', color: '#484848' }} style={{ textDecorationLine: 'underline', color: '#484848' }}
@ -29,7 +29,7 @@ const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => {
The Ethereum consensus layer specification The Ethereum consensus layer specification
</Link> </Link>
</Text> </Text>
<Text size={19} weight={'semibold'}> <Text size={15} weight={'semibold'}>
<Link <Link
to={'https://github.com/ethereum/consensus-specs'} to={'https://github.com/ethereum/consensus-specs'}
style={{ textDecorationLine: 'underline', color: '#2A4CF4', fontWeight: 'bold' }} 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 = () => { const ClientSetup = () => {
return ( return (
<YStack padding={'26px'} width={'100%'} space={'$5'}> <YStack space={'$8'} padding={'26px'} width={'100%'} minHeight={'65vh'}>
<SetupRow title={'Setup up Validators'} /> <SetupRow title={'Setup up Validators'} />
<Separator borderColor={'#F0F2F5'} /> <Separator borderColor={'#F0F2F5'} />
<WithdrawalAddress title={'Withdrawal address'} /> <WithdrawalAddress title={'Withdrawal address'} />
@ -14,7 +14,7 @@ const ClientSetup = () => {
text="Advanced Recovery Method" text="Advanced Recovery Method"
to={'/'} to={'/'}
arrowRight={true} arrowRight={true}
style={{ marginBottom: '50px' }} style={{ marginBottom: '50px', fontWeight: 'bold', fontSize: '15px' }}
/> />
</YStack> </YStack>
) )

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

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

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

@ -20,7 +20,7 @@ const WithdrawalAddress = ({ title }: WithdrawalAddressProps) => {
return ( return (
<YStack space={'$4'}> <YStack space={'$4'}>
<Text size={27} weight={'semibold'}> <Text size={19} weight={'semibold'}>
{title} {title}
</Text> </Text>
<YStack space={'$3'}> <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 { Button, InformationBox } from '@status-im/components'
import { CloseCircleIcon } from '@status-im/icons' import { CloseCircleIcon } from '@status-im/icons'
import { useDispatch, useSelector } from 'react-redux' import { useDispatch, useSelector } from 'react-redux'
@ -43,7 +43,7 @@ const ContinueButton = ({
const isActivationValScreen = activeStep === 3 && subStepValidatorSetup === 3 const isActivationValScreen = activeStep === 3 && subStepValidatorSetup === 3
return ( 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%' }}> <Stack style={{ width: '100%' }}>
{isCopyPastedPhrase && ( {isCopyPastedPhrase && (
<InformationBox <InformationBox
@ -66,14 +66,13 @@ const ContinueButton = ({
width: '100%', width: '100%',
zIndex: 999, zIndex: 999,
alignItems: 'end', alignItems: 'end',
position: 'absolute',
}} }}
> >
<Button onPress={continueHandler} size={40} disabled={isDisabled()}> <Button onPress={continueHandler} size={40} disabled={isDisabled()}>
{activeStep < 5 ? 'Continue' : 'Continue to Dashboard'} {activeStep < 5 ? 'Continue' : 'Continue to Dashboard'}
</Button> </Button>
</Stack> </Stack>
</XStack> </YStack>
) )
} }

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

@ -1,7 +1,23 @@
.custom-step { .custom-step {
background-color: #ffffff; 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--active,
.custom-step.StepMain--completed { .custom-step.StepMain--completed {
background-color: #2a4cf4; background-color: #2a4cf4;
@ -37,32 +53,9 @@
content: attr(data-subtitle); content: attr(data-subtitle);
position: absolute; position: absolute;
top: calc(100% + 4px); top: calc(100% + 4px);
left: 8px;
font-size: 12px; font-size: 12px;
font-family: "Inter", sans-serif;
color: #A2A9B0; color: #A2A9B0;
background: transparent; width: max-content;
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%;
} }

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

@ -22,7 +22,14 @@ const FormStepper = ({ activeStep, changeActiveStep }: FormStepperProps) => {
nonLinear={true} nonLinear={true}
styleConfig={stepStyle} styleConfig={stepStyle}
connectorStyleConfig={customConnectorStyle} 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) => ( {steps.map((step, index) => (
<Step <Step

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

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

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

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

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

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

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

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

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

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

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

@ -19,21 +19,21 @@ const ActivationValidatorSetup = () => {
}, []) }, [])
return ( return (
<Stack style={styles.confettiContainer} width={'100%'}> <Stack style={styles.confettiContainer} width={'100%'} minHeight={'65vh'}>
{showConfetti && <Confetti style={styles.confettiCanvas} />} {showConfetti && <Confetti style={styles.confettiCanvas} />}
<YStack style={{ padding: '16px 32px' }}> <YStack style={{ padding: '26px 32px' }}>
<YStack space={'$3'}> <YStack space={'$5'}>
<Text size={27} weight={'semibold'}> <Text size={27} weight={'semibold'}>
Activation Activation
</Text> </Text>
<Stack> <Stack>
<Text size={27}> <Text size={19}>
Congratulations! You have successfully setup your Execution and Consensus clients and 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 are currently syncing your nodes. You need to be sufficiently synced prior to setting
up your validators and making a deposit. up your validators and making a deposit.
</Text> </Text>
</Stack> </Stack>
<YStack space={'$3'} marginTop={'10px'} width={'33%'}> <YStack space={'$3'} marginTop={'25px'} width={'33%'}>
<XStack width={'151%'} space={'$3'}> <XStack width={'151%'} space={'$3'}>
<ActivationCard <ActivationCard
text="Execution Sync Status" 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);', border: isSelected ? '1px solid #2A4AF566' : '1px solid rgba(0, 0, 0, 0.15);',
borderRadius: '16px', borderRadius: '16px',
padding: '12px 16px', padding: '12px 16px',
width: '33%', width: '32%',
}} }}
space={'$12'} space={'$8'}
onPress={onClick} onPress={onClick}
> >
<Stack> <Stack>
<Text size={27} weight={'semibold'}> <Text size={19} weight={'semibold'}>
{name} {name}
</Text> </Text>
</Stack> </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) const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient)
return ( return (
<YStack style={{ width: '100%', padding: '16px 32px' }}> <YStack style={{ width: '100%', padding: '26px 32px' }}>
<XStack justifyContent={'space-between'} style={{ marginBottom: '10px' }}> <XStack justifyContent={'space-between'} style={{ marginBottom: '10px' }}>
<Text size={27} weight={'semibold'}> <Text size={27} weight={'semibold'}>
Validator Setup Validator Setup
@ -23,7 +23,7 @@ const ValidatorSetupInstall = () => {
<YStack> <YStack>
<Stack style={{ marginBottom: '4px' }}> <Stack style={{ marginBottom: '4px' }}>
<YStack space={'$3'}> <YStack space={'$3'}>
<Text size={19} weight={'semibold'}> <Text size={15} weight={'semibold'}>
{selectedClient} {selectedClient}
</Text> </Text>
@ -41,12 +41,12 @@ const ValidatorSetupInstall = () => {
style={{ style={{
border: '1px solid #00000026', border: '1px solid #00000026',
borderRadius: '16px', borderRadius: '16px',
padding: '6px 12px', padding: '19px 16px',
}} }}
space={'$3'} space={'$3'}
> >
<Text size={27}> Installing {selectedClient}</Text> <Text size={19}> Installing {selectedClient}</Text>
<Text size={19} color="#647084" weight={'regular'}> <Text size={15} color="#647084" weight={'regular'}>
There are several ways to install Geth, including via a package manager, downloading 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 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 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. are also provided in each section.
</Text> </Text>
<XStack justifyContent={'space-between'} space={'$2'} margin={'50px 0px'}> <XStack justifyContent={'space-between'} my={'15px'}>
<OsCard <OsCard
icon="/icons/MAC.png" icon="/icons/MAC.png"
name="Mac" name="MacOS"
isSelected={selectedOs === 'Mac'} isSelected={selectedOs === 'Mac'}
onClick={() => setSelectedOs('Mac')} onClick={() => setSelectedOs('Mac')}
/> />
@ -80,17 +80,17 @@ const ValidatorSetupInstall = () => {
/> />
</XStack> </XStack>
<YStack space={'$2'}> <YStack space={'$2'}>
<Text size={27}> Package Managers</Text> <Text size={19}> Package Managers</Text>
<Text size={15} weight={'semibold'}> <Text size={15} weight={'semibold'}>
MacOS via Homebrew MacOS via Homebrew
</Text> </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 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 step is to check that Homebrew is installed. The following command should return a
version number. version number.
</Text> </Text>
<SyntaxHighlighterBox rows={['brew -v']} /> <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 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 be installed by following the instructions here. With Homebrew installed, the
following commands add the Geth tap and install Geth: 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', padding: '12px 16px',
width: '19%', width: '19%',
}} }}
space={'$12'} space={'$8'}
onClick={() => { onClick={() => {
dispatch(selectClient(name)) dispatch(selectClient(name))
}} }}
> >
<Stack> <Stack>
<Text size={27} weight={'semibold'} color={isComingSoon ? '#DCE0E5' : ''}> <Text size={19} weight={'semibold'} color={isComingSoon ? '#DCE0E5' : ''}>
{name} {name}
</Text> </Text>
{isComingSoon && ( {isComingSoon && (
@ -46,9 +46,9 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
padding: '3px', padding: '3px 6px',
borderRadius: '67px', borderRadius: '67px',
width: '50%', width: 'fit-content',
}} }}
> >
<Text size={11} color="#fff"> <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 = () => { const ValidatorSetup = () => {
return ( return (
<YStack style={{ width: '100%', padding: '16px 32px' }}> <YStack
<XStack justifyContent={'space-between'}> style={{ width: '100%', padding: '26px 32px' }}
minHeight={'65vh'}
justifyContent={'space-between'}
>
<XStack justifyContent={'space-between'} alignItems={'center'}>
<Text size={27} weight={'semibold'}> <Text size={27} weight={'semibold'}>
Validator Setup Validator Setup
</Text> </Text>
@ -21,7 +25,7 @@ const ValidatorSetup = () => {
Execution Client Detection Execution Client Detection
</Text> </Text>
</Stack> </Stack>
<Text size={15} weight={'regular'}> <Text size={15}>
No existing execution client installations have been detected on paired device. No existing execution client installations have been detected on paired device.
</Text> </Text>
<Text size={13} color="#828282"> <Text size={13} color="#828282">
@ -30,7 +34,7 @@ const ValidatorSetup = () => {
</Text> </Text>
</YStack> </YStack>
<TextTam fontSize={27} style={{ margin: '5px', marginLeft: 0 }}> <TextTam fontSize={27} style={{ marginTop: '15px', marginLeft: 0, marginBottom: '15px' }}>
Select Execution client Select Execution client
</TextTam> </TextTam>
<XStack justifyContent={'space-between'}> <XStack justifyContent={'space-between'}>
@ -43,7 +47,7 @@ const ValidatorSetup = () => {
<LinkWithArrow <LinkWithArrow
to="/" to="/"
text="View Execution client comparison chart" text="View Execution client comparison chart"
style={{ marginTop: '3%' }} style={{ marginTop: '6%', fontWeight: 'bold' }}
/> />
</YStack> </YStack>
) )