From 03c1a39f93c0cbbde15057cdf1dfa43d73946e75 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 22 Oct 2018 21:07:53 +0200 Subject: [PATCH] switch to Web3 1.0 beta --- package.json | 2 +- src/components/Web3Donation/Alerts.jsx | 10 ++-- src/components/Web3Donation/index.jsx | 59 +++++++++---------- src/components/Web3Donation/index.module.scss | 3 + src/components/Web3Donation/utils.js | 10 ++-- 5 files changed, 41 insertions(+), 43 deletions(-) diff --git a/package.json b/package.json index 14542f31..db200d44 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "react-time": "^4.3.0", "react-transition-group": "^2.5.0", "slugify": "^1.3.1", - "web3": "^0.20.7" + "web3": "^1.0.0-beta.36" }, "devDependencies": { "@babel/node": "^7.0.0", diff --git a/src/components/Web3Donation/Alerts.jsx b/src/components/Web3Donation/Alerts.jsx index 24009f9e..da216a57 100644 --- a/src/components/Web3Donation/Alerts.jsx +++ b/src/components/Web3Donation/Alerts.jsx @@ -13,6 +13,8 @@ export default class Alerts extends PureComponent { networkName: PropTypes.string, error: PropTypes.object, transactionHash: PropTypes.string, + confirmationNumber: PropTypes.number, + receipt: PropTypes.object, web3Connected: PropTypes.bool.isRequired } @@ -22,10 +24,7 @@ export default class Alerts extends PureComponent { noCorrectNetwork: `Please connect to Main network. You are on ${networkName} right now.`, noWeb3: 'No Web3 detected. Install MetaMask, Brave, or Mist.', - success: `You are awesome, thanks!
- - See your transaction on etherscan.io. - ` + transaction: `See your transaction on etherscan.io.` }) render() { @@ -56,8 +55,7 @@ export default class Alerts extends PureComponent { {transactionHash && ( )} diff --git a/src/components/Web3Donation/index.jsx b/src/components/Web3Donation/index.jsx index 63c1e484..445f3602 100644 --- a/src/components/Web3Donation/index.jsx +++ b/src/components/Web3Donation/index.jsx @@ -18,8 +18,10 @@ export default class Web3Donation extends PureComponent { selectedAccount: null, amount: '0.01', transactionHash: null, + receipt: null, loading: false, - error: null + error: null, + message: 'Hang on...' } static propTypes = { @@ -57,7 +59,6 @@ export default class Web3Donation extends PureComponent { } // Legacy dapp browsers... else if (window.web3) { - // this.web3 = new Web3(Web3.givenProvider || 'ws://localhost:8546') this.web3 = new Web3(window.web3.currentProvider) this.setState({ web3Connected: true }) @@ -99,11 +100,10 @@ export default class Web3Donation extends PureComponent { web3 && web3.eth && - //web3.eth.net.getId((err, netId) => { - web3.version.getNetwork((err, netId) => { + web3.eth.net.getId((err, netId) => { if (err) this.setState({ error: err }) - if (netId != this.state.networkId) { + if (netId !== this.state.networkId) { this.setState({ error: null, networkId: netId @@ -135,33 +135,27 @@ export default class Web3Donation extends PureComponent { handleButton = () => { const { web3 } = this - this.setState({ loading: true }) + this.setState({ + loading: true, + message: 'Waiting for your confirmation...' + }) - // web3.eth - // .sendTransaction({ - // from: this.state.selectedAccount, - // to: this.props.address, - // value: '10000000000000000' - // }) - // .then(receipt => { - // this.setState({ receipt, loading: false }) - // }) - // .catch(error => { - // this.setState({ error, loading: false }) - // }) - - web3.eth.sendTransaction( - { + web3.eth + .sendTransaction({ from: this.state.selectedAccount, to: this.props.address, value: this.state.amount * 1e18 // ETH -> Wei - }, - (error, transactionHash) => { - if (error) this.setState({ error, loading: false }) - if (!transactionHash) this.setState({ loading: true }) - this.setState({ transactionHash, loading: false }) - } - ) + }) + .once('transactionHash', transactionHash => { + this.setState({ + transactionHash, + message: 'Waiting for network confirmation, hang on...' + }) + }) + .on('error', error => this.setState({ error, loading: false })) + .then(() => { + this.setState({ message: 'Confirmed. You are awesome, thanks!' }) + }) } onAmountChange = ({ target }) => { @@ -178,10 +172,12 @@ export default class Web3Donation extends PureComponent { amount, networkName, error, - transactionHash + transactionHash, + confirmationNumber, + message } = this.state - const hasCorrectNetwork = networkId === '1' + const hasCorrectNetwork = networkId === 42 const hasAccount = accounts.length !== 0 return ( @@ -194,7 +190,7 @@ export default class Web3Donation extends PureComponent { {web3Connected && (
{loading ? ( - 'Hang on...' + message ) : (
) diff --git a/src/components/Web3Donation/index.module.scss b/src/components/Web3Donation/index.module.scss index 5796a2e1..194c5c59 100644 --- a/src/components/Web3Donation/index.module.scss +++ b/src/components/Web3Donation/index.module.scss @@ -19,4 +19,7 @@ .web3Row { min-height: 58px; + display: flex; + align-items: center; + justify-content: center; } diff --git a/src/components/Web3Donation/utils.js b/src/components/Web3Donation/utils.js index 3e870dc1..70430dec 100644 --- a/src/components/Web3Donation/utils.js +++ b/src/components/Web3Donation/utils.js @@ -2,19 +2,19 @@ export const getNetworkName = async netId => { let networkName switch (netId) { - case '1': + case 1: networkName = 'Main' break - case '2': + case 2: networkName = 'Morden' break - case '3': + case 3: networkName = 'Ropsten' break - case '4': + case 4: networkName = 'Rinkeby' break - case '42': + case 42: networkName = 'Kovan' break default: