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(deposit-validator): separate from panel main component

This commit is contained in:
RadoslavDimchev 2024-02-28 23:12:22 +02:00 committed by Emil Ivanichkov
parent 11ed7491fe
commit 9d76b3bf59
2 changed files with 80 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/DepositPanel.tsx
View File

@ -1,6 +1,6 @@
import { DividerLine, InformationBox, Input, Text } from '@status-im/components'
import { ClearIcon, PlaceholderIcon } from '@status-im/icons'
import { XStack, YStack } from 'tamagui'
import { DividerLine, InformationBox, Text } from '@status-im/components'
import { PlaceholderIcon } from '@status-im/icons'
import { YStack } from 'tamagui'
import { useState } from 'react'
import { useSelector } from 'react-redux'
@ -10,45 +10,18 @@ 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'
import { getDepositTitle } from '../../../../../utilities'
import DepositValidator from './DepositValidator'
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) {
setDepositAmount(value)
}
}
const removeDepositAmountHandler = () => {
setDepositAmount('')
}
return (
<PanelWrapper
title={getDepositTitle({ isChainParity, isTransactionConfirmation })}
@ -62,41 +35,7 @@ const DepositPanel = () => {
width: '100%',
}}
>
<XStack
space={'$3'}
style={{
width: '100%',
}}
>
<YStack space={'$2'}>
<Text size={15} weight="regular" color={'#647084'}>
Deposit validator
</Text>
<Input
icon={
<ClearIcon
size={20}
style={{ cursor: 'pointer' }}
onClick={removeDepositAmountHandler}
/>
}
placeholder="Deposit Amount"
value={depositAmount}
onChangeText={changeDepositAmountHandler}
/>
</YStack>
<YStack space={'$2'}>
<XStack style={{ justifyContent: 'space-between' }}>
<Text size={15} weight={'semibold'}>
{currency}
</Text>
<CurrencyDropdown changeCurrency={changeCurrency} />
</XStack>
<Text size={27} weight={'semibold'}>
{formatNumbersWithComa(totalPrice)} {currency}
</Text>
</YStack>
</XStack>
<DepositValidator />
<DividerLine />
<ValidatorRequest
key={2}

74
src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/DepositValidator.tsx Normal file
View File

@ -0,0 +1,74 @@
import { Input, Text } from '@status-im/components'
import { ClearIcon } from '@status-im/icons'
import { XStack, YStack } from 'tamagui'
import { useState } from 'react'
import CurrencyDropdown from '../../../../../components/General/CurrencyDropdown'
import { CurrencyType } from '../../../../../components/General/ValidatorsMenuWithPrice'
import { CURRENCIES } from '../../../../../constants'
import { formatNumbersWithComa } from '../../../../../utilities'
const DepositValidator = () => {
const [depositAmount, setDepositAmount] = useState('')
const [currency, setCurrency] = useState(
Object.keys(CURRENCIES)[0] as CurrencyType,
)
const totalPrice = 1594
const changeCurrency = (currency: CurrencyType) => {
if (CURRENCIES[currency]) {
setCurrency(currency)
}
}
const changeDepositAmountHandler = (value: string) => {
const numberValue = Number(value)
if (isNaN(numberValue) === false) {
setDepositAmount(value)
}
}
const removeDepositAmountHandler = () => {
setDepositAmount('')
}
return (
<XStack
space={'$3'}
style={{
width: '100%',
}}
>
<YStack space={'$2'}>
<Text size={15} weight="regular" color={'#647084'}>
Deposit validator
</Text>
<Input
icon={
<ClearIcon
size={20}
style={{ cursor: 'pointer' }}
onClick={removeDepositAmountHandler}
/>
}
placeholder="Deposit Amount"
value={depositAmount}
onChangeText={changeDepositAmountHandler}
/>
</YStack>
<YStack space={'$2'}>
<XStack style={{ justifyContent: 'space-between' }}>
<Text size={15} weight={'semibold'}>
{currency}
</Text>
<CurrencyDropdown changeCurrency={changeCurrency} />
</XStack>
<Text size={27} weight={'semibold'}>
{formatNumbersWithComa(totalPrice)} {currency}
</Text>
</YStack>
</XStack>
)
}
export default DepositValidator