diff --git a/src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/DepositPanel.tsx b/src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/DepositPanel.tsx index 6ab5737a..4c7bc324 100644 --- a/src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/DepositPanel.tsx +++ b/src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/DepositPanel.tsx @@ -1,6 +1,6 @@ -import { InformationBox, Input, Text } from '@status-im/components' +import { DividerLine, InformationBox, Input, Text } from '@status-im/components' import { ClearIcon, PlaceholderIcon } from '@status-im/icons' -import { Stack, YStack } from 'tamagui' +import { XStack, YStack } from 'tamagui' import { useState } from 'react' import { useSelector } from 'react-redux' @@ -10,17 +10,34 @@ import ConnectedWallet from '../../../../../components/General/ConnectedWallet' import ConnectWallet from '../../../../../components/General/ConnectWallet' import ChainParity from '../../../../ValidatorOnboarding/Deposit/ChainParity' import ValidatorRequest from '../../../../ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest' +import CurrencyDropdown from '../../../../../components/General/CurrencyDropdown' +import { CurrencyType } from '../../../../../components/General/ValidatorsMenuWithPrice' +import { CURRENCIES } from '../../../../../constants' +import { + formatNumbersWithComa, + getDepositTitle, +} from '../../../../../utilities' const DepositPanel = () => { const [isInfoBoxVisible, setIsInfoBoxVisible] = useState(true) const [depositAmount, setDepositAmount] = useState('') + const [currency, setCurrency] = useState( + Object.keys(CURRENCIES)[0] as CurrencyType, + ) const { isWalletConnected, isTransactionConfirmation, isChainParity } = useSelector((state: RootState) => state.deposit) + const totalPrice = 1594 const onCloseInfoBox = () => { setIsInfoBoxVisible(false) } + const changeCurrency = (currency: CurrencyType) => { + if (CURRENCIES[currency]) { + setCurrency(currency) + } + } + const changeDepositAmountHandler = (value: string) => { const numberValue = Number(value) if (isNaN(numberValue) === false) { @@ -45,23 +62,42 @@ const DepositPanel = () => { width: '100%', }} > - - - Deposit validator - - - } - placeholder="Deposit Amount" - value={depositAmount} - onChangeText={changeDepositAmountHandler} - /> - + + + + Deposit validator + + + } + placeholder="Deposit Amount" + value={depositAmount} + onChangeText={changeDepositAmountHandler} + /> + + + + + {currency} + + + + + {formatNumbersWithComa(totalPrice)} {currency} + + + +