Compatibility with Web3.js patching the ethereum provider

aragon · Feb 16, 2020 · d3526e6 · d3526e6
1 parent 9f04fdb
commit d3526e6
Show file tree

Hide file tree

Showing 6 changed files with 9,708 additions and 6 deletions.
diff --git a/examples/web3-js-compat/.babelrc b/examples/web3-js-compat/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": "> 2%, not dead, not ie > 0",
+        "modules": false
+      }
+    ],
+    "@babel/preset-react"
+  ]
+}
diff --git a/examples/web3-js-compat/index.html b/examples/web3-js-compat/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/examples/web3-js-compat/index.js b/examples/web3-js-compat/index.js
@@ -0,0 +1,142 @@
+import 'babel-polyfill'
+import React, { useRef, useState } from 'react'
+import ReactDOM from 'react-dom'
+import Web3 from 'web3'
+import {
+  RejectedActivationError,
+  UseWalletProvider,
+  useWallet,
+} from 'use-wallet'
+
+function App() {
+  const [lastError, setLastError] = useState('')
+  const wallet = useWallet()
+  const blockNumber = wallet.getBlockNumber()
+  const { current: web3 } = useRef(new Web3(window.ethereum))
+
+  const activate = async connector => {
+    setLastError('')
+
+    try {
+      await wallet.activate(connector)
+    } catch (err) {
+      if (err instanceof RejectedActivationError) {
+        setLastError('Connection error: the user rejected the activation')
+      }
+      setLastError(err.message)
+    }
+  }
+
+  return (
+    <>
+      <h1>use-wallet</h1>
+
+      {(() => {
+        if (lastError) {
+          return (
+            <p>
+              <span>{lastError}</span>
+              <button onClick={() => setLastError('')}>retry</button>
+            </p>
+          )
+        }
+
+        if (wallet.activating) {
+          return (
+            <p>
+              <span>Connecting to {wallet.activating}…</span>
+              <button onClick={() => wallet.deactivate()}>cancel</button>
+            </p>
+          )
+        }
+
+        if (wallet.connected) {
+          return (
+            <p>
+              <span>Connected.</span>
+              <button onClick={() => wallet.deactivate()}>disconnect</button>
+            </p>
+          )
+        }
+
+        return (
+          <p>
+            <span>Connect:</span>
+            <button onClick={() => activate('injected')}>injected</button>
+            <button onClick={() => activate('frame')}>frame</button>
+            <button onClick={() => activate('portis')}>portis</button>
+            <button onClick={() => activate('fortmatic')}>fortmatic</button>
+          </p>
+        )
+      })()}
+
+      {wallet.connected && (
+        <>
+          <p>
+            <span>Account:</span>
+            <span>{wallet.account}</span>
+          </p>
+        </>
+      )}
+
+      {wallet.account && (
+        <p>
+          <span>Balance:</span>
+          <span>{wallet.balance === '-1' ? '…' : `${wallet.balance} ETH`}</span>
+        </p>
+      )}
+
+      {wallet.connected && (
+        <p>
+          <span>Block:</span> <span>{blockNumber || '…'}</span>
+        </p>
+      )}
+    </>
+  )
+}
+
+ReactDOM.render(
+  <UseWalletProvider
+    chainId={1}
+    connectors={{
+      fortmatic: { apiKey: '' },
+      portis: { dAppId: '' },
+    }}
+  >
+    <App />
+    <style>
+      {`
+        body {
+          width: 40rem;
+          margin: 0 auto;
+          font-family: sans-serif;
+          font-size: 18px;
+          line-height: 1.5;
+        }
+        button {
+          width: 6rem;
+        }
+        h1 {
+          font-weight: 400;
+        }
+        p {
+          display: grid;
+          justify-content: space-between;
+          align-items: center;
+          grid-auto-flow: column;
+          gap: 1rem;
+          align-items: center;
+          margin: 2rem 0;
+        }
+        button {
+          width: 7rem;
+          height: 3rem;
+          cursor: pointer;
+          font-size: 1rem;
+          padding: 0;
+        }
+      `}
+    </style>
+  </UseWalletProvider>,
+  document.querySelector('#app')
+)
diff --git a/examples/web3-js-compat/package.json b/examples/web3-js-compat/package.json
@@ -0,0 +1,18 @@
+{
+  "scripts": {
+    "start": "parcel serve index.html",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "babel-polyfill": "^6.26.0",
+    "jsbi": "^3.1.1",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "use-wallet": "link:../..",
+    "web3": "^1.2.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.3",
+    "parcel": "^1.12.4"
+  }
+}