2024-04-01 14:42:08 +02:00
|
|
|
import styles from './FormAmount.module.css'
|
|
|
|
import { Dispatch, SetStateAction } from 'react'
|
|
|
|
import { TokenSymbol } from '@/types'
|
2024-04-01 15:23:01 +02:00
|
|
|
import { Select, Input } from '@/components'
|
2024-04-01 14:42:08 +02:00
|
|
|
|
|
|
|
export function FormAmount({
|
|
|
|
amount,
|
|
|
|
setAmount,
|
|
|
|
token,
|
|
|
|
setToken,
|
|
|
|
isFiat
|
|
|
|
}: {
|
|
|
|
amount: number
|
|
|
|
setAmount: Dispatch<SetStateAction<number>>
|
|
|
|
token: TokenSymbol | string
|
|
|
|
setToken?: Dispatch<SetStateAction<TokenSymbol>>
|
|
|
|
isFiat?: boolean
|
|
|
|
}) {
|
2024-04-01 15:23:01 +02:00
|
|
|
function handleAmountChange(e: React.ChangeEvent<HTMLInputElement>) {
|
|
|
|
const { value } = e.target
|
|
|
|
|
|
|
|
if (value === '') {
|
|
|
|
setAmount(0)
|
|
|
|
} else {
|
|
|
|
setAmount(Number(value))
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-04-01 14:42:08 +02:00
|
|
|
function handleTokenChange(e: React.ChangeEvent<HTMLSelectElement>) {
|
|
|
|
if (!setToken) return
|
|
|
|
setToken(e.target.value as TokenSymbol)
|
|
|
|
}
|
|
|
|
|
|
|
|
const options = isFiat
|
|
|
|
? [{ value: 'USD', label: 'USD' }]
|
|
|
|
: [
|
|
|
|
{ value: 'OCEAN', label: 'OCEAN' },
|
|
|
|
{ value: 'FET', label: 'FET' },
|
|
|
|
{ value: 'AGIX', label: 'AGIX' }
|
|
|
|
]
|
|
|
|
|
|
|
|
return (
|
|
|
|
<form className={styles.form}>
|
2024-04-01 15:23:01 +02:00
|
|
|
<Input
|
|
|
|
type="text"
|
|
|
|
inputMode="numeric"
|
|
|
|
pattern="[0-9]*"
|
|
|
|
value={amount}
|
|
|
|
onChange={handleAmountChange}
|
|
|
|
style={{
|
|
|
|
width: Math.min(Math.max(amount.toString().length, 2), 50) + 'ch'
|
|
|
|
}}
|
|
|
|
/>
|
2024-04-01 14:42:08 +02:00
|
|
|
|
|
|
|
<Select
|
|
|
|
options={options}
|
|
|
|
value={token}
|
|
|
|
onChange={handleTokenChange}
|
|
|
|
disabled={!setToken}
|
|
|
|
style={setToken ? { paddingRight: '1.25rem' } : {}}
|
|
|
|
/>
|
|
|
|
</form>
|
|
|
|
)
|
|
|
|
}
|