2023-10-26 21:32:57 +02:00
|
|
|
import { type ReactElement } from 'react'
|
|
|
|
import Input from '@components/Input'
|
|
|
|
import { Conversion } from '../Conversion'
|
|
|
|
import styles from './InputGroup.module.css'
|
2023-10-29 17:36:39 +01:00
|
|
|
import { TokenSelect } from '../TokenSelect'
|
2023-11-02 22:47:14 +01:00
|
|
|
import { $isInitSend } from '@features/Web3/stores'
|
2023-10-26 21:32:57 +02:00
|
|
|
|
|
|
|
export function InputGroup({
|
|
|
|
amount,
|
|
|
|
isDisabled,
|
2023-11-02 22:47:14 +01:00
|
|
|
setAmount
|
2023-10-26 21:32:57 +02:00
|
|
|
}: {
|
|
|
|
amount: string
|
|
|
|
isDisabled: boolean
|
2023-10-28 23:34:58 +02:00
|
|
|
setAmount: React.Dispatch<React.SetStateAction<string>>
|
2023-10-26 21:32:57 +02:00
|
|
|
}): ReactElement {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div className={styles.inputGroup}>
|
2023-11-01 23:56:35 +01:00
|
|
|
<div className={styles.inputWrap}>
|
|
|
|
<div className={styles.token}>
|
|
|
|
<TokenSelect />
|
|
|
|
</div>
|
|
|
|
<Input
|
|
|
|
type="text"
|
|
|
|
inputMode="decimal"
|
|
|
|
pattern="[0-9.]*"
|
|
|
|
value={amount}
|
|
|
|
placeholder="0.00"
|
|
|
|
onChange={(e) => setAmount(e.target.value)}
|
|
|
|
className={styles.inputInput}
|
|
|
|
/>
|
2023-10-26 21:32:57 +02:00
|
|
|
</div>
|
2023-11-01 23:56:35 +01:00
|
|
|
|
2023-10-26 21:32:57 +02:00
|
|
|
<button
|
|
|
|
className={`${styles.submit} btn btn-primary`}
|
2023-10-31 21:31:04 +01:00
|
|
|
disabled={isDisabled || !amount}
|
2023-11-02 22:47:14 +01:00
|
|
|
onClick={() => $isInitSend.set(true)}
|
2023-10-26 21:32:57 +02:00
|
|
|
>
|
2023-11-02 22:47:14 +01:00
|
|
|
Preview
|
2023-10-26 21:32:57 +02:00
|
|
|
</button>
|
|
|
|
</div>
|
2023-10-29 23:51:31 +01:00
|
|
|
<Conversion amount={amount} />
|
2023-10-26 21:32:57 +02:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|