status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: use responsive stack and media hook for deposit price

This commit is contained in:
RadoslavDimchev 2024-01-15 22:04:25 +02:00
parent 1d255f76cd
commit a10d828645
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,11 @@
import { useState } from 'react' import { useState } from 'react'
import { Input, Text } from '@status-im/components' import { Input, Text } from '@status-im/components'
import { AddIcon } from '@status-im/icons' import { AddIcon } from '@status-im/icons'
import { Stack, XStack, YStack } from 'tamagui' import { Stack, XStack, YStack, useMedia } from 'tamagui'
import { CURRENCIES, ETH_PER_VALIDATOR } from '../../constants' import { CURRENCIES, ETH_PER_VALIDATOR } from '../../constants'
import CurrencyDropdown from './CurrencyDropdown' import CurrencyDropdown from './CurrencyDropdown'
import ResponsiveStack from './ResponsiveStack'
type ValidatorsMenuWithPriceProps = { type ValidatorsMenuWithPriceProps = {
validatorCount: number validatorCount: number
@ -20,6 +21,7 @@ const ValidatorsMenuWithPrice = ({
label, label,
}: ValidatorsMenuWithPriceProps) => { }: ValidatorsMenuWithPriceProps) => {
const [currency, setCurrency] = useState(Object.keys(CURRENCIES)[0] as CurrencyType) const [currency, setCurrency] = useState(Object.keys(CURRENCIES)[0] as CurrencyType)
const media = useMedia()
const changeCurrency = (currency: CurrencyType) => { const changeCurrency = (currency: CurrencyType) => {
if (CURRENCIES[currency]) { if (CURRENCIES[currency]) {
@ -31,7 +33,11 @@ const ValidatorsMenuWithPrice = ({
const totalPrice = totalETH * CURRENCIES[currency as keyof typeof CURRENCIES] const totalPrice = totalETH * CURRENCIES[currency as keyof typeof CURRENCIES]
return ( return (
<XStack justifyContent={'space-between'} width={'80%'}> <ResponsiveStack
isVerticalAligned={media.sm}
style={{ justifyContent: 'space-between', width: media.md ? '100%' : '80%' }}
space={'$3'}
>
<Stack space={'$2'}> <Stack space={'$2'}>
<Text size={15} weight="regular" color={'#647084'}> <Text size={15} weight="regular" color={'#647084'}>
{label} {label}
@ -68,7 +74,7 @@ const ValidatorsMenuWithPrice = ({
{totalPrice.toFixed(2)} {currency} {totalPrice.toFixed(2)} {currency}
</Text> </Text>
</YStack> </YStack>
</XStack> </ResponsiveStack>
) )
} }