2019-11-22 21:26:50 +01:00
|
|
|
import React, { useState, useEffect } from 'react'
|
2020-01-13 22:07:21 +01:00
|
|
|
import { parseEther } from '@ethersproject/units'
|
2019-11-22 21:26:50 +01:00
|
|
|
import useWeb3, { connectors, getErrorMessage } from '../../../hooks/use-web3'
|
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'
|
2018-10-13 20:37:13 +02:00
|
|
|
import styles from './index.module.scss'
|
2018-10-09 23:48:25 +02:00
|
|
|
|
2019-11-21 21:32:55 +01:00
|
|
|
export default function Web3Donation({ address }: { address: string }) {
|
|
|
|
const {
|
2019-11-22 21:26:50 +01:00
|
|
|
connector,
|
2019-11-21 21:32:55 +01:00
|
|
|
library,
|
2019-11-22 21:26:50 +01:00
|
|
|
chainId,
|
|
|
|
account,
|
|
|
|
activate,
|
2019-11-21 21:32:55 +01:00
|
|
|
active,
|
2019-11-22 21:26:50 +01:00
|
|
|
error
|
|
|
|
} = useWeb3()
|
2019-11-21 21:32:55 +01:00
|
|
|
const [message, setMessage] = useState()
|
|
|
|
|
|
|
|
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
|
|
|
|
2019-11-21 21:32:55 +01:00
|
|
|
const [transactionHash, setTransactionHash] = useState(undefined)
|
2018-10-09 23:48:25 +02:00
|
|
|
|
2019-11-22 21:26:50 +01:00
|
|
|
async function sendTransaction(amount: number) {
|
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,
|
|
|
|
value: parseEther(amount.toString()) // ETH -> Wei
|
|
|
|
})
|
|
|
|
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()
|
2019-11-23 18:19:41 +01:00
|
|
|
|
2020-01-13 22:07:48 +01:00
|
|
|
setMessage({
|
|
|
|
status: 'success',
|
|
|
|
text: getTransactionMessage().success
|
|
|
|
})
|
|
|
|
} catch (error) {
|
|
|
|
setMessage({
|
|
|
|
status: 'error',
|
|
|
|
text: error.message
|
|
|
|
})
|
|
|
|
}
|
2018-10-09 23:48:25 +02:00
|
|
|
}
|
|
|
|
|
2019-11-21 21:32:55 +01:00
|
|
|
return (
|
|
|
|
<div className={styles.web3}>
|
2019-11-22 21:26:50 +01:00
|
|
|
{!active && !message ? (
|
|
|
|
<button className="link" onClick={() => activate(connectors.MetaMask)}>
|
|
|
|
Activate Web3
|
|
|
|
</button>
|
|
|
|
) : library && account && !message ? (
|
|
|
|
<InputGroup sendTransaction={sendTransaction} />
|
2019-11-21 21:32:55 +01:00
|
|
|
) : (
|
2019-11-22 21:26:50 +01:00
|
|
|
message && <Alert message={message} transactionHash={transactionHash} />
|
2019-11-21 21:32:55 +01:00
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
)
|
2018-10-09 23:48:25 +02:00
|
|
|
}
|