Upgrade to web3 1.0

src/actions/Listing.js

@@ -18,7 +18,8 @@ export function getListingIds() {
 
     // Get listings to hide
     const hideListPromise = new Promise((resolve, reject) => {
-      window.web3.version.getNetwork((err, netId) => {
+      window.web3.eth.net.getId((err, netId) => {
+        if (err) { return reject(err) }
         resolve(netId)
       })
     })

src/components/app.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import {
-  BrowserRouter as Router,
+  HashRouter as Router,
   Route,
   Switch,
 } from 'react-router-dom'

src/components/listing-create.js

@@ -107,7 +107,7 @@ class ListingCreate extends Component {
       const transactionReceipt = await origin.listings.create(formListing.formData, selectedSchemaType)
       this.setState({ step: this.STEP.PROCESSING })
       // Submitted to blockchain, now wait for confirmation
-      await origin.contractService.waitTransactionFinished(transactionReceipt.tx)
+      await origin.contractService.waitTransactionFinished(transactionReceipt.transactionHash)
       this.setState({ step: this.STEP.SUCCESS })
     } catch (error) {
       // TODO: We need a failure step to go to here

src/components/listing-detail.js

@@ -82,7 +82,7 @@ class ListingsDetail extends Component {
       const transactionReceipt = await origin.listings.buy(this.state.address, unitsToBuy, totalPrice)
       console.log('Purchase request sent.')
       this.setState({step: this.STEP.PROCESSING})
-      await origin.contractService.waitTransactionFinished(transactionReceipt.tx)
+      await origin.contractService.waitTransactionFinished(transactionReceipt.transactionHash)
       this.setState({step: this.STEP.PURCHASED})
     } catch (error) {
       window.err = error
@@ -120,12 +120,15 @@ class ListingsDetail extends Component {
               <img src="/images/circular-check-button.svg" role="presentation"/>
             </div>
             Purchase was successful.<br />
-            <a href="#" onClick={()=>window.location.reload()}>
+            <a href="#" onClick={e => {
+              e.preventDefault()
+              window.location.reload()
+            }}>
               Reload page
             </a>
           </Modal>
         }
-        {(this.state.loading || !!this.state.pictures.length) &&
+        {(this.state.loading || (this.state.pictures && this.state.pictures.length)) &&
           <div className="carousel">
             {this.state.pictures.map(pictureUrl => (
               <div className="photo" key={pictureUrl}>

src/components/my-purchases.js

@@ -67,16 +67,16 @@ class MyPurchases extends Component {
   async loadPurchase(addr) {
     try {
       const purchase = await origin.purchases.get(addr)
-
-      if (purchase.buyerAddress === window.web3.eth.accounts[0]) {
+      var accounts = await web3.eth.getAccounts()
+      if (purchase.buyerAddress === accounts[0]) {
         const purchases = [...this.state.purchases, purchase]
 
         this.setState({ purchases })
       }
 
       return purchase
     } catch(error) {
-      console.error(`Error fetching purchase: ${addr}`)
+      console.error(`Error fetching purchase: ${addr}`, error)
     }
   }
 

src/components/purchase-detail.js

@@ -6,7 +6,7 @@ import Review from './review'
 import TransactionProgress from './transaction-progress'
 import data from '../data'
 
-import origin from '../services/origin' 
+import origin from '../services/origin'
 
 /* Transaction stages: no disputes and no seller review of buyer/transaction
  *  - step 0 was creating the listing
@@ -168,7 +168,7 @@ class PurchaseDetail extends Component {
     if (!purchase.address || !listing.address ){
       return null
     }
-    
+
     const perspective = window.web3.eth.accounts[0] === purchase.buyerAddress ? 'buyer' : 'seller'
     const seller = { name: 'Unnamed User', address: listing.sellerAddress }
     const buyer = { name: 'Unnamed User', address: purchase.buyerAddress }

src/components/timelapse.js

@@ -16,7 +16,7 @@ class Timelapse extends Component {
 
     const delay = this.props.delay || 4000
 
-    setTimeout(() => {
+    this.timeout = setTimeout(() => {
       this.ms = 1000
       this.interval = setInterval(this.updateTimelapse, this.ms)
     }, delay)
@@ -82,7 +82,7 @@ class Timelapse extends Component {
 
   render() {
     const { timelapse } = this.state;
-
+    clearTimeout(this.timeout)
     return this.props.reference ? timelapse : null
   }
 }

src/components/web3-provider.js

@@ -1,60 +1,68 @@
 import React, { Component } from 'react'
 import Modal from './modal'
 
+import origin from '../services/origin'
+
+const web3 = origin.contractService.web3
 const alertify = require('../../node_modules/alertify/src/alertify.js')
 
 const networkNames = {
-  1: "Main",
-  2: "Morden",
-  3: "Ropsten",
-  4: "Rinkeby",
-  42: "Kovan",
+  1: 'Main',
+  2: 'Morden',
+  3: 'Ropsten',
+  4: 'Rinkeby',
+  42: 'Kovan'
 }
 const supportedNetworkIds = [3, 4]
 const ONE_SECOND = 1000
 const ONE_MINUTE = ONE_SECOND * 60
 
-const AccountUnavailable = (props) => (
+const AccountUnavailable = () => (
   <Modal backdrop="static" data-modal="account-unavailable" isOpen={true}>
     <div className="image-container">
-      <img src="/images/flat_cross_icon.svg" role="presentation"/>
+      <img src="/images/flat_cross_icon.svg" role="presentation" />
     </div>
     You are not signed in to MetaMask.<br />
   </Modal>
 )
 
 // TODO (micah): potentially add a loading indicator
-const Loading = (props) => (
-  null
-)
+const Loading = () => null
 
-const UnconnectedNetwork = (props) => (
+const UnconnectedNetwork = () => (
   <Modal backdrop="static" data-modal="web3-unavailable" isOpen={true}>
     <div className="image-container">
-      <img src="/images/flat_cross_icon.svg" role="presentation"/>
+      <img src="/images/flat_cross_icon.svg" role="presentation" />
     </div>
     Connecting to network...
   </Modal>
 )
 
-const UnsupportedNetwork = (props) => (
+const UnsupportedNetwork = props => (
   <Modal backdrop="static" data-modal="web3-unavailable" isOpen={true}>
     <div className="image-container">
-      <img src="/images/flat_cross_icon.svg" role="presentation"/>
+      <img src="/images/flat_cross_icon.svg" role="presentation" />
     </div>
     MetaMask should be on <strong>Rinkeby</strong> Network<br />
     Currently on {props.currentNetworkName}.
   </Modal>
 )
 
-const Web3Unavailable = (props) => (
+const Web3Unavailable = () => (
   <Modal backdrop="static" data-modal="web3-unavailable" isOpen={true}>
     <div className="image-container">
-      <img src="/images/flat_cross_icon.svg" role="presentation"/>
+      <img src="/images/flat_cross_icon.svg" role="presentation" />
     </div>
     MetaMask extension not installed.<br />
-    <a target="_blank" href="https://metamask.io/">Get MetaMask</a><br />
-    <a target="_blank" href="https://medium.com/originprotocol/origin-demo-dapp-is-now-live-on-testnet-835ae201c58">
+    <a target="_blank" href="https://metamask.io/" rel="noopener noreferrer">
+      Get MetaMask
+    </a>
+    <br />
+    <a
+      target="_blank"
+      href="https://medium.com/originprotocol/origin-demo-dapp-is-now-live-on-testnet-835ae201c58"
+      rel="noopener noreferrer"
+    >
       Full Instructions for Demo
     </a>
   </Modal>
@@ -73,7 +81,7 @@ class Web3Provider extends Component {
       accountsLoaded: false,
       networkConnected: null,
       networkId: null,
-      networkError: null,
+      networkError: null
     }
   }
 
@@ -113,21 +121,21 @@ class Web3Provider extends Component {
    * @return {void}
    */
   fetchAccounts() {
-    const { web3 } = window
-
-    web3 && web3.eth && web3.eth.getAccounts((err, accounts) => {
-      if (err) {
-        console.log(err)
-
-        this.setState({ accountsError: err })
-      } else {
-        this.handleAccounts(accounts)
-      }
+    web3 &&
+      web3.eth &&
+      web3.eth.getAccounts((err, accounts) => {
+        if (err) {
+          console.log(err)
+
+          this.setState({ accountsError: err })
+        } else {
+          this.handleAccounts(accounts)
+        }
 
-      if (!this.state.accountsLoaded) {
-        this.setState({ accountsLoaded: true })
-      }
-    });
+        if (!this.state.accountsLoaded) {
+          this.setState({ accountsLoaded: true })
+        }
+      })
   }
 
   handleAccounts(accounts) {
@@ -141,7 +149,7 @@ class Web3Provider extends Component {
 
       this.setState({
         accountsError: null,
-        accounts,
+        accounts
       })
     }
   }
@@ -151,52 +159,57 @@ class Web3Provider extends Component {
    * @return {void}
    */
   fetchNetwork() {
-    const { web3 } = window
     let called = false
 
-    web3 && web3.version && web3.version.getNetwork((err, netId) => {
-      called = true 
+    web3 &&
+      web3.version &&
+      web3.eth.net.getId((err, netId) => {
+        called = true
 
-      const networkId = parseInt(netId, 10)
+        const networkId = parseInt(netId, 10)
 
-      if (err) {
-        this.setState({
-          networkError: err,
-        })
-      } else {
-        if (networkId !== this.state.networkId) {
+        if (err) {
           this.setState({
-            networkError: null,
-            networkId,
+            networkError: err
           })
+        } else {
+          if (networkId !== this.state.networkId) {
+            this.setState({
+              networkError: null,
+              networkId
+            })
+          }
         }
-      }
 
-      if (!this.state.networkConnected) {
-        this.setState({
-          networkConnected: true,
-        })
-      }
-    })
+        if (!this.state.networkConnected) {
+          this.setState({
+            networkConnected: true
+          })
+        }
+      })
 
     // Delay and condition the use of the network value.
     // https://github.com/MetaMask/metamask-extension/issues/1380#issuecomment-375980850
     if (this.state.networkConnected === null) {
       setTimeout(() => {
-        !called && 
-        web3 && web3.version && (web3.version.network === 'loading' || !web3.version.network) &&
-        this.setState({
-          networkConnected: false,
-        })
+        !called &&
+          web3 &&
+          web3.version &&
+          (web3.version.network === 'loading' || !web3.version.network) &&
+          this.setState({
+            networkConnected: false
+          })
       }, 1000)
     }
   }
 
   render() {
-    const { web3 } = window
     const { accounts, accountsLoaded, networkConnected, networkId } = this.state
-    const currentNetworkName = networkNames[networkId] ? networkNames[networkId] : networkId
-    const inProductionEnv = window.location.hostname === 'demo.originprotocol.com'
+    const currentNetworkName = networkNames[networkId]
+      ? networkNames[networkId]
+      : networkId
+    const inProductionEnv =
+      window.location.hostname === 'demo.originprotocol.com'
 
     if (networkConnected === false) {
       return <UnconnectedNetwork />
@@ -206,7 +219,11 @@ class Web3Provider extends Component {
       return <Web3Unavailable />
     }
 
-    if (networkId && inProductionEnv && (supportedNetworkIds.indexOf(networkId) < 0)) {
+    if (
+      networkId &&
+      inProductionEnv &&
+      supportedNetworkIds.indexOf(networkId) < 0
+    ) {
       return <UnsupportedNetwork currentNetworkName={currentNetworkName} />
     }
 

src/services/origin.js

@@ -7,4 +7,7 @@ config.ipfsApiPort = process.env.IPFS_API_PORT ? process.env.IPFS_API_PORT : nul
 config.ipfsGatewayPort = process.env.IPFS_GATEWAY_PORT ? process.env.IPFS_GATEWAY_PORT : null
 config.ipfsGatewayProtocol = process.env.IPFS_GATEWAY_PROTOCOL ? process.env.IPFS_GATEWAY_PROTOCOL : null
 
-export default new Origin(config)
+const origin = new Origin(config)
+window.web3 = origin.contractService.web3
+
+export default origin