2023-11-02 04:22:04 +01:00
|
|
|
import { useState, type FormEvent, useEffect } from 'react'
|
2023-11-02 22:47:14 +01:00
|
|
|
import { useStore } from '@nanostores/react'
|
|
|
|
import { useNetwork, useEnsAddress, useEnsName } from 'wagmi'
|
2023-11-02 04:22:04 +01:00
|
|
|
import type {
|
|
|
|
SendTransactionArgs,
|
|
|
|
WriteContractPreparedArgs
|
|
|
|
} from 'wagmi/actions'
|
2023-11-02 22:47:14 +01:00
|
|
|
import { $selectedToken, $isInitSend } from '@features/Web3/stores'
|
|
|
|
import siteConfig from '@config/blog.config'
|
|
|
|
import { prepareTransaction, sendTransaction } from './actions'
|
|
|
|
import styles from './Send.module.css'
|
|
|
|
import { SendTable } from './SendTable'
|
|
|
|
import { Loader } from '@components/Loader'
|
2023-11-02 04:22:04 +01:00
|
|
|
|
2023-11-02 22:47:14 +01:00
|
|
|
export function Send({ amount }: { amount: string }) {
|
|
|
|
const { ens } = siteConfig.author.ether
|
2023-11-02 04:22:04 +01:00
|
|
|
const { chain } = useNetwork()
|
|
|
|
const selectedToken = useStore($selectedToken)
|
2023-11-02 22:47:14 +01:00
|
|
|
|
|
|
|
// Always resolve to address from ENS name and vice versa
|
|
|
|
// so nobody has to trust my config values.
|
|
|
|
const { data: to } = useEnsAddress({ name: ens, chainId: 1 })
|
|
|
|
const { data: ensResolved } = useEnsName({
|
|
|
|
address: to as `0x${string}` | undefined,
|
2023-11-02 04:22:04 +01:00
|
|
|
chainId: 1
|
|
|
|
})
|
|
|
|
|
|
|
|
const [txConfig, setTxConfig] = useState<
|
|
|
|
SendTransactionArgs | WriteContractPreparedArgs
|
|
|
|
>()
|
|
|
|
const [txHash, setTxHash] = useState<string>()
|
2023-11-02 22:47:14 +01:00
|
|
|
const [isLoading, setIsLoading] = useState(false)
|
2023-11-02 04:22:04 +01:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
async function init() {
|
|
|
|
if (!selectedToken || !amount || !to || !chain?.id) return
|
|
|
|
|
|
|
|
const config = await prepareTransaction(
|
|
|
|
selectedToken,
|
|
|
|
amount,
|
|
|
|
to,
|
|
|
|
chain.id
|
|
|
|
)
|
|
|
|
setTxConfig(config)
|
|
|
|
}
|
|
|
|
init()
|
|
|
|
}, [selectedToken || amount || to || chain?.id])
|
|
|
|
|
|
|
|
async function handleSend(event: FormEvent<HTMLButtonElement>) {
|
|
|
|
event?.preventDefault()
|
2023-11-02 22:47:14 +01:00
|
|
|
try {
|
|
|
|
setIsLoading(true)
|
|
|
|
const result = await sendTransaction(selectedToken, txConfig)
|
|
|
|
setTxHash(result?.hash)
|
|
|
|
setIsLoading(false)
|
|
|
|
} catch (error: unknown) {
|
|
|
|
console.error((error as Error).message)
|
|
|
|
setIsLoading(false)
|
|
|
|
}
|
2023-11-02 04:22:04 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
console.log(txHash)
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
2023-11-02 22:47:14 +01:00
|
|
|
<div className={styles.send}>
|
|
|
|
{/* <h5 className={styles.title}>You are sending</h5> */}
|
|
|
|
|
|
|
|
<SendTable
|
|
|
|
to={to}
|
|
|
|
ensResolved={ensResolved}
|
|
|
|
txConfig={txConfig}
|
|
|
|
isDisabled={isLoading}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<footer className={styles.actions}>
|
|
|
|
<button
|
|
|
|
onClick={(e) => handleSend(e)}
|
|
|
|
className="btn btn-primary"
|
|
|
|
disabled={isLoading}
|
|
|
|
>
|
|
|
|
{isLoading ? <Loader /> : 'Make it rain'}
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
onClick={() => $isInitSend.set(false)}
|
|
|
|
className="link"
|
|
|
|
disabled={isLoading}
|
|
|
|
>
|
|
|
|
Cancel
|
|
|
|
</button>
|
|
|
|
</footer>
|
2023-11-02 04:22:04 +01:00
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|