1
0
Fork 0
blog/src/components/molecules/Web3Donation/index.tsx

69 lines
1.8 KiB
TypeScript
Raw Normal View History

2020-05-22 14:38:19 +02:00
import React, { ReactElement, useState, useEffect } from 'react'
import { parseEther } from '@ethersproject/units'
2021-03-23 21:38:06 +01:00
import useWeb3, { getErrorMessage } from '../../../hooks/useWeb3'
2018-10-13 20:37:13 +02:00
import InputGroup from './InputGroup'
2019-11-22 21:26:50 +01:00
import Alert, { getTransactionMessage } from './Alert'
2021-03-23 01:09:32 +01:00
import { web3 as styleWeb3 } from './index.module.css'
import Account from './Account'
2018-10-09 23:48:25 +02:00
2020-05-22 14:38:19 +02:00
export default function Web3Donation({
address
}: {
address: string
}): ReactElement {
2021-03-23 01:09:32 +01:00
const { connector, library, chainId, account, active, error } = useWeb3()
2021-03-23 21:38:06 +01:00
const [message, setMessage] = useState<{ status: string; text: string }>()
const [transactionHash, setTransactionHash] = useState<string>()
2019-11-21 21:32:55 +01:00
useEffect(() => {
2019-11-22 21:26:50 +01:00
setMessage(undefined)
2019-11-21 21:32:55 +01:00
2019-11-22 21:26:50 +01:00
error &&
setMessage({
status: 'error',
text: getErrorMessage(error, chainId)
})
}, [connector, account, library, chainId, active, error])
2018-10-09 23:48:25 +02:00
2021-03-23 21:38:06 +01:00
async function sendTransaction(amount: string) {
2019-11-21 21:32:55 +01:00
const signer = library.getSigner()
2018-10-09 23:48:25 +02:00
2019-11-21 21:32:55 +01:00
setMessage({
status: 'loading',
2019-11-22 21:26:50 +01:00
text: getTransactionMessage().waitingForUser
2019-11-21 21:32:55 +01:00
})
2018-10-09 23:48:25 +02:00
2020-01-13 22:07:48 +01:00
try {
const tx = await signer.sendTransaction({
to: address,
2021-03-23 21:38:06 +01:00
value: parseEther(amount) // ETH -> Wei
2020-01-13 22:07:48 +01:00
})
setTransactionHash(tx.hash)
setMessage({
status: 'loading',
text: getTransactionMessage().waitingConfirmation
})
2018-10-30 18:08:07 +01:00
2020-01-13 22:07:48 +01:00
await tx.wait()
2020-01-13 22:07:48 +01:00
setMessage({
status: 'success',
text: getTransactionMessage().success
})
} catch (error) {
2021-03-23 21:38:06 +01:00
setMessage(null)
2020-01-13 22:07:48 +01:00
}
2018-10-09 23:48:25 +02:00
}
2019-11-21 21:32:55 +01:00
return (
2021-03-23 01:09:32 +01:00
<div className={styleWeb3}>
<Account />
{message ? (
<Alert message={message} transactionHash={transactionHash} />
2019-11-21 21:32:55 +01:00
) : (
2021-03-23 01:09:32 +01:00
<InputGroup sendTransaction={sendTransaction} />
2019-11-21 21:32:55 +01:00
)}
</div>
)
2018-10-09 23:48:25 +02:00
}