status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-01-22 09:19:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: remove symbol and add better structure and types

Browse Source
This commit is contained in:
RadoslavDimchev 2023-09-27 19:55:24 +03:00
parent 47426705a3
commit 0be2d66548
3 changed files with 20 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/General/CurrencyDropdown.tsx
View File

@ -2,9 +2,10 @@ import { Button, DropdownMenu } from '@status-im/components'
import { ChevronDownIcon } from '@status-im/icons' import { ChevronDownIcon } from '@status-im/icons'
import { CURRENCIES } from '../../constants' import { CURRENCIES } from '../../constants'
import { CurrencyType } from './ValidatorsMenuWithPrice'
type CurrencyDropdownProps = { type CurrencyDropdownProps = {
changeCurrency: (currency: (typeof CURRENCIES)[0]) => void changeCurrency: (currency: CurrencyType) => void
} }
const CurrencyDropdown = ({ changeCurrency }: CurrencyDropdownProps) => { const CurrencyDropdown = ({ changeCurrency }: CurrencyDropdownProps) => {
@ -12,11 +13,11 @@ const CurrencyDropdown = ({ changeCurrency }: CurrencyDropdownProps) => {
<DropdownMenu> <DropdownMenu>
<Button variant="ghost" size={24} icon={<ChevronDownIcon size={16} color={'#919191'} />} /> <Button variant="ghost" size={24} icon={<ChevronDownIcon size={16} color={'#919191'} />} />
<DropdownMenu.Content sideOffset={10} position="absolute" zIndex={999}> <DropdownMenu.Content sideOffset={10} position="absolute" zIndex={999}>
{CURRENCIES.map(currency => ( {Object.keys(CURRENCIES).map(currency => (
<DropdownMenu.Item <DropdownMenu.Item
key={currency.name} key={currency}
label={currency.name} label={currency}
onSelect={() => changeCurrency(currency)} onSelect={() => changeCurrency(currency as CurrencyType)}
/> />
))} ))}
</DropdownMenu.Content> </DropdownMenu.Content>

17
src/components/General/ValidatorsMenuWithPrice.tsx
View File

@ -12,18 +12,22 @@ type ValidatorsMenuWithPriceProps = {
label: string label: string
} }
export type CurrencyType = keyof typeof CURRENCIES
const ValidatorsMenuWithPrice = ({ const ValidatorsMenuWithPrice = ({
validatorCount, validatorCount,
changeValidatorCountHandler, changeValidatorCountHandler,
label, label,
}: ValidatorsMenuWithPriceProps) => { }: ValidatorsMenuWithPriceProps) => {
const [currency, setCurrency] = useState(CURRENCIES[0]) const [currency, setCurrency] = useState(Object.keys(CURRENCIES)[0] as CurrencyType)
const changeCurrency = (currency: (typeof CURRENCIES)[0]) => { const changeCurrency = (currency: CurrencyType) => {
setCurrency(currency) if (CURRENCIES[currency]) {
setCurrency(currency)
}
} }
const totalPrice = validatorCount * currency.price const totalPrice = validatorCount * CURRENCIES[currency as keyof typeof CURRENCIES]
return ( return (
<XStack justifyContent={'space-between'} width={'80%'}> <XStack justifyContent={'space-between'} width={'80%'}>
@ -55,13 +59,12 @@ const ValidatorsMenuWithPrice = ({
<YStack space={'$2'}> <YStack space={'$2'}>
<XStack style={{ justifyContent: 'space-between' }}> <XStack style={{ justifyContent: 'space-between' }}>
<Text size={15} weight={'semibold'}> <Text size={15} weight={'semibold'}>
{currency.name} {currency}
</Text> </Text>
<CurrencyDropdown changeCurrency={changeCurrency} /> <CurrencyDropdown changeCurrency={changeCurrency} />
</XStack> </XStack>
<Text size={27} weight={'semibold'}> <Text size={27} weight={'semibold'}>
{currency.symbol} {totalPrice.toFixed(2)} {currency}
{totalPrice.toFixed(2)} {currency.name}
</Text> </Text>
</YStack> </YStack>
</XStack> </XStack>

16
src/constants.ts
View File

@ -19,17 +19,9 @@ export const BOTH_KEY_AND_RECOVERY = 'Both KeystoreFiles & Recovery Phrase'
export const ETH_PER_VALIDATOR = 32 export const ETH_PER_VALIDATOR = 32
// for now, this will be constant values // for now, this will be constant values
export const CURRENCIES = [ export const CURRENCIES = {
{ USD: 1583.42,
name: 'USD', EUR: 1323.61,
symbol: '$', }
price: 1583.42,
},
{
name: 'EUR',
symbol: '€',
price: 1323.61,
},
]
export const DEPOSIT_SUBTITLE = 'Connect you Wallet to stake required ETH for new validators' export const DEPOSIT_SUBTITLE = 'Connect you Wallet to stake required ETH for new validators'
export const CLIENT_SETUP_SUBTITLE = 'How many Validators would you like to run?' export const CLIENT_SETUP_SUBTITLE = 'How many Validators would you like to run?'