2018-10-09 23:48:25 +02:00
|
|
|
import React, { PureComponent } from 'react'
|
|
|
|
import PropTypes from 'prop-types'
|
2018-10-13 20:37:13 +02:00
|
|
|
import InputGroup from './InputGroup'
|
|
|
|
import Alerts from './Alerts'
|
|
|
|
import styles from './index.module.scss'
|
2018-10-26 23:47:41 +02:00
|
|
|
import { getWeb3, getAccounts, getNetwork } from './utils'
|
2018-10-09 23:48:25 +02:00
|
|
|
|
|
|
|
const ONE_SECOND = 1000
|
|
|
|
const ONE_MINUTE = ONE_SECOND * 60
|
|
|
|
|
|
|
|
export default class Web3Donation extends PureComponent {
|
|
|
|
state = {
|
|
|
|
web3Connected: false,
|
2018-10-26 23:47:41 +02:00
|
|
|
netId: null,
|
2018-10-13 20:13:50 +02:00
|
|
|
networkName: null,
|
2018-10-27 14:23:06 +02:00
|
|
|
isCorrectNetwork: false,
|
|
|
|
loading: true,
|
2018-10-09 23:48:25 +02:00
|
|
|
accounts: [],
|
|
|
|
selectedAccount: null,
|
2018-10-14 20:28:35 +02:00
|
|
|
amount: '0.01',
|
2018-10-11 23:18:03 +02:00
|
|
|
transactionHash: null,
|
2018-10-22 21:07:53 +02:00
|
|
|
receipt: null,
|
2018-10-27 14:23:06 +02:00
|
|
|
inTransaction: false,
|
2018-10-22 21:07:53 +02:00
|
|
|
error: null,
|
|
|
|
message: 'Hang on...'
|
2018-10-09 23:48:25 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
address: PropTypes.string
|
|
|
|
}
|
|
|
|
|
2018-10-11 20:06:02 +02:00
|
|
|
web3 = null
|
2018-10-09 23:48:25 +02:00
|
|
|
interval = null
|
|
|
|
networkInterval = null
|
|
|
|
|
|
|
|
componentDidMount() {
|
2018-10-22 19:24:53 +02:00
|
|
|
this.initWeb3()
|
2018-10-13 20:13:50 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
this.resetAllTheThings()
|
|
|
|
}
|
|
|
|
|
2018-10-27 14:23:06 +02:00
|
|
|
initWeb3 = async () => {
|
2018-10-26 23:47:41 +02:00
|
|
|
try {
|
|
|
|
this.web3 = await getWeb3()
|
2018-10-09 23:48:25 +02:00
|
|
|
|
2018-10-26 23:47:41 +02:00
|
|
|
this.setState({ web3Connected: this.web3 ? true : false })
|
2018-10-27 14:23:06 +02:00
|
|
|
this.web3 ? this.initAllTheTings() : this.setState({ loading: false })
|
2018-10-26 23:47:41 +02:00
|
|
|
} catch (error) {
|
|
|
|
this.setState({ error })
|
2018-10-13 20:13:50 +02:00
|
|
|
this.setState({ web3Connected: false })
|
|
|
|
}
|
2018-10-09 23:48:25 +02:00
|
|
|
}
|
|
|
|
|
2018-10-27 14:23:06 +02:00
|
|
|
async initAllTheTings() {
|
|
|
|
await this.fetchAccounts()
|
|
|
|
await this.fetchNetwork()
|
|
|
|
|
|
|
|
this.setState({ loading: false })
|
|
|
|
|
2018-10-22 19:24:53 +02:00
|
|
|
this.initAccountsPoll()
|
|
|
|
this.initNetworkPoll()
|
|
|
|
}
|
|
|
|
|
2018-10-13 20:13:50 +02:00
|
|
|
resetAllTheThings() {
|
2018-10-09 23:48:25 +02:00
|
|
|
clearInterval(this.interval)
|
|
|
|
clearInterval(this.networkInterval)
|
2018-10-13 23:35:21 +02:00
|
|
|
this.setState({ web3Connected: false })
|
2018-10-09 23:48:25 +02:00
|
|
|
}
|
|
|
|
|
2018-10-13 20:13:50 +02:00
|
|
|
initAccountsPoll() {
|
2018-10-09 23:48:25 +02:00
|
|
|
if (!this.interval) {
|
|
|
|
this.interval = setInterval(this.fetchAccounts, ONE_SECOND)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
initNetworkPoll() {
|
|
|
|
if (!this.networkInterval) {
|
|
|
|
this.networkInterval = setInterval(this.fetchNetwork, ONE_MINUTE)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-10-26 23:47:41 +02:00
|
|
|
fetchNetwork = async () => {
|
2018-10-09 23:48:25 +02:00
|
|
|
const { web3 } = this
|
|
|
|
|
2018-10-26 23:47:41 +02:00
|
|
|
try {
|
|
|
|
const { netId, networkName } = await getNetwork(web3)
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
error: null,
|
|
|
|
netId,
|
2018-10-27 14:23:06 +02:00
|
|
|
networkName,
|
|
|
|
isCorrectNetwork: netId === 1
|
2018-10-09 23:48:25 +02:00
|
|
|
})
|
2018-10-26 23:47:41 +02:00
|
|
|
} catch (error) {
|
|
|
|
this.setState({ error })
|
|
|
|
}
|
2018-10-09 23:48:25 +02:00
|
|
|
}
|
|
|
|
|
2018-10-26 23:47:41 +02:00
|
|
|
fetchAccounts = async () => {
|
2018-10-09 23:48:25 +02:00
|
|
|
const { web3 } = this
|
|
|
|
|
2018-10-26 23:47:41 +02:00
|
|
|
try {
|
|
|
|
const accounts = await getAccounts(web3)
|
2018-10-11 20:06:02 +02:00
|
|
|
|
2018-10-26 23:47:41 +02:00
|
|
|
this.setState({
|
|
|
|
error: null,
|
|
|
|
accounts,
|
|
|
|
selectedAccount: accounts[0] ? accounts[0].toLowerCase() : null
|
2018-10-09 23:48:25 +02:00
|
|
|
})
|
2018-10-26 23:47:41 +02:00
|
|
|
} catch (error) {
|
|
|
|
this.setState({ error })
|
|
|
|
}
|
2018-10-09 23:48:25 +02:00
|
|
|
}
|
|
|
|
|
2018-10-25 17:08:42 +02:00
|
|
|
sendTransaction() {
|
2018-10-09 23:48:25 +02:00
|
|
|
const { web3 } = this
|
|
|
|
|
2018-10-22 21:07:53 +02:00
|
|
|
web3.eth
|
|
|
|
.sendTransaction({
|
2018-10-09 23:48:25 +02:00
|
|
|
from: this.state.selectedAccount,
|
|
|
|
to: this.props.address,
|
2018-10-13 15:40:05 +02:00
|
|
|
value: this.state.amount * 1e18 // ETH -> Wei
|
2018-10-22 21:07:53 +02:00
|
|
|
})
|
|
|
|
.once('transactionHash', transactionHash => {
|
|
|
|
this.setState({
|
|
|
|
transactionHash,
|
|
|
|
message: 'Waiting for network confirmation, hang on...'
|
|
|
|
})
|
|
|
|
})
|
2018-10-27 14:23:06 +02:00
|
|
|
.on('error', error => this.setState({ error, inTransaction: false }))
|
2018-10-22 21:07:53 +02:00
|
|
|
.then(() => {
|
|
|
|
this.setState({ message: 'Confirmed. You are awesome, thanks!' })
|
|
|
|
})
|
2018-10-09 23:48:25 +02:00
|
|
|
}
|
|
|
|
|
2018-10-25 17:08:42 +02:00
|
|
|
handleButton = () => {
|
|
|
|
this.setState({
|
2018-10-27 14:23:06 +02:00
|
|
|
inTransaction: true,
|
2018-10-25 17:08:42 +02:00
|
|
|
message: 'Waiting for your confirmation...'
|
|
|
|
})
|
|
|
|
|
|
|
|
this.sendTransaction()
|
|
|
|
}
|
|
|
|
|
2018-10-13 15:40:05 +02:00
|
|
|
onAmountChange = ({ target }) => {
|
|
|
|
this.setState({ amount: target.value })
|
|
|
|
}
|
|
|
|
|
2018-10-09 23:48:25 +02:00
|
|
|
render() {
|
2018-10-14 21:48:38 +02:00
|
|
|
const {
|
2018-10-27 14:23:06 +02:00
|
|
|
isCorrectNetwork,
|
2018-10-14 21:48:38 +02:00
|
|
|
accounts,
|
|
|
|
selectedAccount,
|
|
|
|
web3Connected,
|
2018-10-27 14:23:06 +02:00
|
|
|
inTransaction,
|
2018-10-14 21:48:38 +02:00
|
|
|
loading,
|
|
|
|
amount,
|
|
|
|
networkName,
|
|
|
|
error,
|
2018-10-22 21:07:53 +02:00
|
|
|
transactionHash,
|
|
|
|
confirmationNumber,
|
|
|
|
message
|
2018-10-14 21:48:38 +02:00
|
|
|
} = this.state
|
2018-10-22 19:24:53 +02:00
|
|
|
|
2018-10-14 21:48:38 +02:00
|
|
|
const hasAccount = accounts.length !== 0
|
2018-10-13 23:35:21 +02:00
|
|
|
|
2018-10-11 20:06:02 +02:00
|
|
|
return (
|
|
|
|
<div className={styles.web3}>
|
2018-10-13 18:13:36 +02:00
|
|
|
<header>
|
|
|
|
<h4>web3</h4>
|
|
|
|
<p>Send Ether with MetaMask, Brave, or Mist.</p>
|
|
|
|
</header>
|
2018-10-11 20:06:02 +02:00
|
|
|
|
2018-10-27 14:23:06 +02:00
|
|
|
<div className={styles.web3Row}>
|
|
|
|
{loading ? (
|
|
|
|
<div className={styles.message}>Checking...</div>
|
|
|
|
) : (
|
|
|
|
web3Connected && (
|
2018-10-13 18:13:36 +02:00
|
|
|
<InputGroup
|
2018-10-27 14:23:06 +02:00
|
|
|
hasCorrectNetwork={isCorrectNetwork}
|
2018-10-13 23:35:21 +02:00
|
|
|
hasAccount={hasAccount}
|
2018-10-14 22:04:54 +02:00
|
|
|
selectedAccount={selectedAccount}
|
2018-10-14 21:48:38 +02:00
|
|
|
amount={amount}
|
2018-10-13 18:13:36 +02:00
|
|
|
onAmountChange={this.onAmountChange}
|
2018-10-13 23:35:21 +02:00
|
|
|
handleButton={this.handleButton}
|
2018-10-27 14:23:06 +02:00
|
|
|
inTransaction={inTransaction}
|
|
|
|
message={message}
|
2018-10-13 18:13:36 +02:00
|
|
|
/>
|
2018-10-27 14:23:06 +02:00
|
|
|
)
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{!loading && (
|
|
|
|
<Alerts
|
|
|
|
hasCorrectNetwork={isCorrectNetwork}
|
|
|
|
hasAccount={hasAccount}
|
|
|
|
networkName={networkName}
|
|
|
|
error={error}
|
|
|
|
transactionHash={transactionHash}
|
|
|
|
web3Connected={web3Connected}
|
|
|
|
confirmationNumber={confirmationNumber}
|
|
|
|
/>
|
2018-10-11 20:06:02 +02:00
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
)
|
2018-10-09 23:48:25 +02:00
|
|
|
}
|
|
|
|
}
|