Merge pull request #79 from unjapones/improve-eip1102-support

(Fix) Update DApp loading code considering upcoming Breaking Change in MetaMask

frontend/package.json

@@ -23,6 +23,7 @@
     "react-plaid-link": "^1.0.2",
     "react-router-dom": "^4.3.1",
     "react-scripts": "^1.1.4",
+    "react-web3-provider": "^1.1.1",
     "sweetalert2": "^7.19.3",
     "truffle-contract": "^3.0.5",
     "web3": "^1.0.0-beta.34"

frontend/src/App.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { BrowserRouter, Route } from 'react-router-dom'
+import { withWeb3 } from 'react-web3-provider'
 import Header from './ui/layout/Header'
 import Footer from './ui/layout/Footer'
 import Main from './ui/layout/Main'
@@ -11,58 +12,69 @@ import HelpPage from './ui/pages/HelpPage'
 import ErrorPage from './ui/pages/ErrorPage'
 import MyPlaidBankAccountsPage from './ui/pages/MyPlaidBankAccountsPage'
 import MyVerifiedBankAccountsPage from './ui/pages/MyVerifiedBankAccountsPage'
-import Web3Provider from './Web3Provider'
 
-const noWeb3Render = () => <ErrorPage error="noWeb3Render" />
-const noUnlockedAccountRender = () => <ErrorPage error="noUnlockedAccountRender" />
-const routesRender = (web3, accounts) => {
-  return (
-    <section className="h100percent">
-      <Route exact path="/" component={() => <IndexPage web3={web3} accounts={accounts} />} />
-      <Route exact path="/help" component={() => <HelpPage />} />
-      <Route
-        path="/bankaccountslist/:token"
-        component={props => (
-          <MyPlaidBankAccountsPage props={props} web3={web3} account={accounts[0]} />
-        )}
-      />
-      <Route
-        path="/mybankaccountslist"
-        component={props => (
-          <MyVerifiedBankAccountsPage props={props} web3={web3} account={accounts[0]} />
-        )}
-      />
-    </section>
-  )
-}
+export class AppContainer extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      selectedAccount: null
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const { web3, web3State } = this.props
+    if (web3State.isConnected !== prevProps.web3State.isConnected && web3) {
+      web3.eth.getAccounts().then(accounts => {
+        this.setState({
+          selectedAccount: accounts[0]
+        })
+      })
+    }
+  }
+
+  renderRoutes() {
+    const { web3 } = this.props
+    const { selectedAccount } = this.state
+    return (
+      <BrowserRouter>
+        <Route exact path="/" component={IndexPage} />
+        <Route exact path="/help" component={HelpPage} />
+        <Route
+          path="/bankaccountslist/:token"
+          component={props => (
+            <MyPlaidBankAccountsPage props={props} web3={web3} account={selectedAccount} />
+          )}
+        />
+        <Route
+          path="/mybankaccountslist"
+          component={() => <MyVerifiedBankAccountsPage web3={web3} account={selectedAccount} />}
+        />
+      </BrowserRouter>
+    )
+  }
 
-const App = () => (
-  <div className="App">
-    <BrowserRouter>
-      <Main>
-        <Sidebar />
-        <Content>
-          <Header />
-          <Section>
-            <Web3Provider
-              render={({ web3, accounts }) => {
-                let content = null
-                if (!web3) {
-                  content = noWeb3Render()
-                } else if (!accounts || accounts.length === 0) {
-                  content = noUnlockedAccountRender()
-                } else {
-                  content = routesRender(web3, accounts)
-                }
-                return content
-              }}
-            />
-          </Section>
-          <Footer />
-        </Content>
-      </Main>
-    </BrowserRouter>
-  </div>
-)
+  render() {
+    const { web3 } = this.props
+    const { selectedAccount } = this.state
+
+    return (
+      <div className="App">
+        <Main>
+          <Sidebar />
+          <Content>
+            <Header />
+            <Section>
+              <section className="h100percent">
+                {!web3 || !selectedAccount ? <ErrorPage /> : this.renderRoutes()}
+              </section>
+            </Section>
+            <Footer />
+          </Content>
+        </Main>
+      </div>
+    )
+  }
+}
 
+const App = withWeb3(AppContainer)
 export default App

frontend/src/__tests__/App.js

@@ -1,17 +1,37 @@
 import React from 'react'
 import { configure, shallow } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
-import App from '../App'
+import { AppContainer } from '../App'
 
 configure({ adapter: new Adapter() })
 
-describe('App component', () => {
-  it('renders correctly', () => {
-    const wrapper = shallow(<App />)
+describe('AppContainer', () => {
+  it('renders correctly when no wallet is present', () => {
+    const wrapper = shallow(<AppContainer web3={null} />)
 
-    expect(wrapper.find('BrowserRouter')).toHaveLength(1)
-    expect(wrapper.find('Web3Provider')).toHaveLength(1)
+    // @TODO: test the rest of the scenarios
+    expect(wrapper.find('.App')).toHaveLength(1)
     expect(wrapper.find('Header')).toHaveLength(1)
     expect(wrapper.find('Footer')).toHaveLength(1)
   })
+
+  it('renders correctly when a wallet and account is unlocked', () => {
+    const web3State = {
+      isConnected: false
+    }
+    const web3 = {
+      eth: {
+        getAccounts: () => Promise.resolve(['account'])
+      }
+    }
+    const wrapper = shallow(<AppContainer web3={web3} web3State={web3State} />)
+    expect(wrapper.find('.App')).toHaveLength(1)
+    expect(wrapper.find('BrowserRouter')).toHaveLength(0)
+    wrapper.setProps({
+      web3State: { isConnected: true },
+      web3
+    })
+    // Still renders ok
+    expect(wrapper.find('.App')).toHaveLength(1)
+  })
 })

frontend/src/index.js

@@ -1,10 +1,45 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import Web3Provider from 'react-web3-provider'
+import Web3 from 'web3'
 import 'font-awesome/css/font-awesome.css'
 import 'font-awesome/css/font-awesome.min.css'
 import App from './App'
 import './ui/styles/global'
 import registerServiceWorker from './registerServiceWorker'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+const renderAppWithWeb3Provider = () => {
+  let isEthereumAccessRequested = false
+
+  return (
+    <Web3Provider
+      error={err => `Connection error: ${err}`}
+      acceptProvider={(web3, accept, reject) => {
+        const { ethereum } = window
+        // acceptProvider is a collection-filter function: the 2nd time it gets invoked
+        // it should not performe the same verification
+        if (ethereum && isEthereumAccessRequested === false) {
+          ethereum
+            .enable()
+            .then(() => {
+              accept(new Web3(ethereum))
+            })
+            .catch(error => {
+              isEthereumAccessRequested = true
+              console.error(error)
+              reject()
+            })
+        } else if (web3 && web3.currentProvider) {
+          accept(new Web3(web3.currentProvider))
+        } else {
+          reject()
+        }
+      }}
+    >
+      <App />
+    </Web3Provider>
+  )
+}
+
+ReactDOM.render(renderAppWithWeb3Provider(), document.getElementById('root'))
 registerServiceWorker()