switch to Web3 1.0 beta

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",

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 <strong>Main</strong> network. You are on <strong>${networkName}</strong> right now.`,
     noWeb3:
       'No Web3 detected. Install <a href="https://metamask.io">MetaMask</a>, <a href="https://brave.com">Brave</a>, or <a href="https://github.com/ethereum/mist">Mist</a>.',
-    success: `You are awesome, thanks!<br />
-        <a href="https://etherscan.io/tx/${transactionHash}">
-          See your transaction on etherscan.io.
-        </a>`
+    transaction: `<a href="https://etherscan.io/tx/${transactionHash}" target="_blank">See your transaction on etherscan.io.</a>`
   })
 
   render() {
@@ -56,8 +55,7 @@ export default class Alerts extends PureComponent {
 
             {transactionHash && (
               <Message
-                className={styles.success}
-                message={this.alertMessages(transactionHash).success}
+                message={this.alertMessages(null, transactionHash).transaction}
               />
             )}
           </Fragment>

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 && (
           <div className={styles.web3Row}>
             {loading ? (
-              'Hang on...'
+              message
             ) : (
               <InputGroup
                 hasCorrectNetwork={hasCorrectNetwork}
@@ -215,6 +211,7 @@ export default class Web3Donation extends PureComponent {
           error={error}
           transactionHash={transactionHash}
           web3Connected={web3Connected}
+          confirmationNumber={confirmationNumber}
         />
       </div>
     )

src/components/Web3Donation/index.module.scss

@@ -19,4 +19,7 @@
 
 .web3Row {
     min-height: 58px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }

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: