mirror of https://github.com/kremalicious/blog.git
42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import React, { ReactElement } from 'react'
|
|
import { useAccount, useNetwork } from 'wagmi'
|
|
import Input from '../../atoms/Input'
|
|
import Conversion from './Conversion'
|
|
import * as styles from './InputGroup.module.css'
|
|
|
|
export default function InputGroup({
|
|
amount,
|
|
setAmount
|
|
}: {
|
|
amount: string
|
|
setAmount(amount: string): void
|
|
}): ReactElement {
|
|
const { address } = useAccount()
|
|
const { chain } = useNetwork()
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.inputGroup}>
|
|
<div className={styles.input}>
|
|
<Input
|
|
type="text"
|
|
inputMode="decimal"
|
|
pattern="[0-9.]*"
|
|
value={amount}
|
|
onChange={(e) => setAmount(e.target.value)}
|
|
className={styles.inputInput}
|
|
disabled={!address}
|
|
/>
|
|
<div className={styles.currency}>
|
|
<span>{chain?.nativeCurrency?.symbol || 'ETH'}</span>
|
|
</div>
|
|
</div>
|
|
<button className="btn btn-primary" disabled={!address}>
|
|
Make it rain
|
|
</button>
|
|
</div>
|
|
<Conversion amount={amount} />
|
|
</>
|
|
)
|
|
}
|