├── .gitignore
├── src
    ├── index.js
    ├── CheckIcon.jsx
    ├── AccountUnavailable.jsx
    ├── Web3Unavailable.jsx
    ├── ErrorTemplate.jsx
    ├── stylesheet.js
    ├── IconNoWeb3.jsx
    └── Web3Provider.jsx
├── test
    ├── helpers
    │   ├── utils.js
    │   ├── Component.jsx
    │   ├── web3.mock.js
    │   └── web3-v1.mock.js
    ├── provider-styles.test.js
    ├── .setup.js
    └── Web3Provider.test.js
├── webpack.config.js
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/
3 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | const Web3Provider = require('./Web3Provider');
 2 | const ErrorTemplate = require('./ErrorTemplate');
 3 | 
 4 | module.exports.Web3Provider = Web3Provider;
 5 | module.exports.ErrorTemplate = ErrorTemplate;
 6 | 
 7 | module.exports = {
 8 |   Web3Provider,
 9 |   ErrorTemplate
10 | };
11 | 


--------------------------------------------------------------------------------
/src/CheckIcon.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function CheckIcon() {
 4 |   return (
 5 |     <svg
 6 |       xmlns="http://www.w3.org/2000/svg"
 7 |       width="26"
 8 |       height="26"
 9 |       viewBox="-263.5 236.5 26 26"
10 |     >
11 |       <g className="svg-success">
12 |         <circle cx="-250.5" cy="249.5" r="12" />
13 |         <path d="M-256.46 249.65l3.9 3.74 8.02-7.8" />
14 |       </g>
15 |     </svg>
16 |   );
17 | }
18 | 
19 | export default CheckIcon;
20 | 


--------------------------------------------------------------------------------
/src/AccountUnavailable.jsx:
--------------------------------------------------------------------------------
 1 | const React = require('react');
 2 | const ErrorTemplate = require('./ErrorTemplate');
 3 | 
 4 | const AccountUnavailable = ErrorTemplate.bind(null, {
 5 |   title: 'No ETH Account Available',
 6 |   message: `
 7 | It seems that you don&apos;t have an ETH account selected. If using
 8 | MetaMask, please make sure that your wallet is unlocked and that
 9 | you have at least one account in your accounts list.`
10 | });
11 | 
12 | module.exports = AccountUnavailable;
13 | 


--------------------------------------------------------------------------------
/test/helpers/utils.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Web3Provider from '../../src/Web3Provider';
 3 | import { shallow, mount } from 'enzyme';
 4 | 
 5 | export const wait = t => new Promise(
 6 |   (resolve, reject) => setTimeout(t, resolve)
 7 | );
 8 | 
 9 | export const getWrapper = () => shallow(
10 |   <Web3Provider>
11 |     <div id="foo" />
12 |   </Web3Provider>
13 | );
14 | export const getMount = () => mount(
15 |   <Web3Provider>
16 |     <div id="foo" />
17 |   </Web3Provider>
18 | );
19 | 


--------------------------------------------------------------------------------
/src/Web3Unavailable.jsx:
--------------------------------------------------------------------------------
 1 | const React = require('react');
 2 | const ErrorTemplate = require('./ErrorTemplate');
 3 | 
 4 | const Web3Unavailable = ErrorTemplate.bind(null, {
 5 |   title: 'Web3 Not Found',
 6 |   message: `
 7 | It seems that you are using a browser without Web3 capabilities. Please
 8 | make sure that you are using a web3-capable browser like mist or parity.
 9 | If you are using MetaMask or Parity extension, make sure that it is
10 | enabled.
11 | `
12 | });
13 | 
14 | module.exports = Web3Unavailable;
15 | 


--------------------------------------------------------------------------------
/test/helpers/Component.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | class Component extends React.Component {
 5 |   render() {
 6 |     const {
 7 |       web3: {
 8 |         selectedAccount
 9 |       }
10 |     } = this.context;
11 | 
12 |     return (
13 |       <div className="root">
14 |         <span className="selected-account">{selectedAccount}</span>
15 |       </div>
16 |     )
17 |   }
18 | }
19 | 
20 | Component.contextTypes = {
21 |   web3: PropTypes.object
22 | };
23 | 
24 | Component.displayName = 'mock-component';
25 | 
26 | export default Component;
27 | 


--------------------------------------------------------------------------------
/test/helpers/web3.mock.js:
--------------------------------------------------------------------------------
 1 | let defaultAccounts = [];
 2 | let defaultNetwork = '1';
 3 | let accounts = defaultAccounts.slice();
 4 | let network = defaultNetwork;
 5 | 
 6 | module.exports = {
 7 |   eth: {
 8 |     accounts: accounts,
 9 |     getAccounts: cb => cb(null, accounts)
10 |   },
11 |   version: {
12 |     getNetwork: () => network
13 |   },
14 |   currentProvider: {
15 |     enable: () => {
16 |       return Promise.resolve(accounts)
17 |     },
18 |   },
19 |   setNetwork: v => network = v,
20 |   setAccounts: v => accounts = v,
21 |   restore: () => {
22 |     accounts = defaultAccounts.slice();
23 |     network = defaultNetwork;
24 |   }
25 | };
26 | 


--------------------------------------------------------------------------------
/test/provider-styles.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { expect } from 'chai';
 3 | import { shallow, mount } from 'enzyme';
 4 | import sinon from 'sinon';
 5 | import PropTypes from 'prop-types';
 6 | import Web3Provider from '../src/Web3Provider';
 7 | import Component from './helpers/Component';
 8 | import { wait, getWrapper, getMount } from './helpers/utils';
 9 | 
10 | describe('Styles', function () {
11 | 
12 |   it('should load default stylesheet', () => {
13 |     const wrapper = mount(
14 |       <Web3Provider>
15 |         <div id="foo" />
16 |       </Web3Provider>
17 |     );
18 |     const html = wrapper.html();
19 | 
20 |     expect(html).to.contain(`<style>`);
21 |     expect(html).to.contain(`.Web3Provider-container`);
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/ErrorTemplate.jsx:
--------------------------------------------------------------------------------
 1 | const React = require('react');
 2 | const IconNoWeb3 = require('./IconNoWeb3');
 3 | const stylesheet = require('./stylesheet');
 4 | 
 5 | function ErrorTemplate(props) {
 6 |   return (
 7 |     <div className="Web3Provider-container">
 8 |       <style dangerouslySetInnerHTML={{ __html: stylesheet }}
 9 |       />
10 |       <div className="Web3Provider-wrapper">
11 |         <div className="Web3Provider-image">
12 |           <IconNoWeb3 />
13 |         </div>
14 |         <h1
15 |           className="Web3Provider-title"
16 |           dangerouslySetInnerHTML={{ __html: props.title }}
17 |         />
18 |         <p
19 |           className="Web3Provider-message"
20 |           dangerouslySetInnerHTML={{ __html: props.message }}
21 |         />
22 |       </div>
23 |     </div>
24 |   )
25 | }
26 | 
27 | module.exports = ErrorTemplate;
28 | 


--------------------------------------------------------------------------------
/test/.setup.js:
--------------------------------------------------------------------------------
 1 | require('babel-polyfill');
 2 | const { JSDOM } = require('jsdom');
 3 | const web3 = require('./helpers/web3.mock.js');
 4 | const web3_v1 = require('./helpers/web3-v1.mock.js');
 5 | 
 6 | const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
 7 | const { window } = jsdom;
 8 | 
 9 | function copyProps(src, target) {
10 |   const props = Object.getOwnPropertyNames(src)
11 |     .filter(prop => typeof target[prop] === 'undefined')
12 |     .map(prop => Object.getOwnPropertyDescriptor(src, prop));
13 |   Object.defineProperties(target, props);
14 | }
15 | 
16 | window.web3 = web3;
17 | global.web3 = web3;
18 | window.web3_v1 = web3_v1;
19 | global.web3_v1 = web3_v1;
20 | global.HTMLElement = window.HTMLElement;
21 | global.window = window;
22 | global.document = window.document;
23 | global.navigator = {
24 |   userAgent: 'node.js',
25 | };
26 | copyProps(window, global);
27 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var nodeExternals = require('webpack-node-externals');
 2 | 
 3 | module.exports = {
 4 |   entry: './src/index.js',
 5 |   output: {
 6 |     filename: './dist/index.js',
 7 |     libraryTarget: 'commonjs2'
 8 |   },
 9 |   devtool: 'inline-source-map',
10 |   target: 'node',
11 |   externals: [nodeExternals()],
12 |   resolve: {
13 |     /**
14 |     * Overriding the default to allow jsx to be resolved automatically.
15 |     */
16 |     extensions: ['.js', '.json', '.jsx'],
17 |     /**
18 |     * Access config from anywhere via `import settings from 'settings'``
19 |     */
20 |   },
21 |   module: {
22 |     loaders: [
23 |       {
24 |         test: /\.jsx?$/,
25 |         exclude: /(node_modules|bower_components)/,
26 |         loader: 'babel-loader',
27 |         query: {
28 |           presets: ['env', 'es2015', 'react'],
29 |           plugins: ['transform-class-properties']
30 |         }
31 |       }
32 |     ]
33 |   }
34 | };
35 | 


--------------------------------------------------------------------------------
/src/stylesheet.js:
--------------------------------------------------------------------------------
 1 | module.exports = `
 2 | .Web3Provider-container {
 3 |   font-family: Helvetica, Arial;
 4 |   color: hsl(0,0%,50%);
 5 |   position: relative;
 6 |   width: 100%;
 7 |   height: 100%;
 8 |   text-align: center;
 9 |   background: hsl(0, 0%, 95%);
10 |   background: -webkit-linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 95%));
11 |   background: -moz-linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 95%));
12 |   background: -o-linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 95%));
13 |   background: linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 95%));
14 | }
15 | .Web3Provider-wrapper {
16 |   width: 400px;
17 |   border: 1px solid hsl(207, 90%, 54%);
18 |   border-radius: 20px;
19 |   text-align: center;
20 |   padding: 50px 40px;
21 |   margin: 80px auto;
22 | }
23 | .Web3Provider-image {
24 |   max-height: 175px;
25 | }
26 | .Web3Provider-title {
27 |   margin-top: 50px;
28 |   color: hsl(0,0%,25%);
29 | }
30 | .Web3Provider-message {
31 |   line-height: 27px;
32 |   font-size: 18px;
33 |   color: hsl(0,0%,50%);
34 | }
35 | `;
36 | 


--------------------------------------------------------------------------------
/test/helpers/web3-v1.mock.js:
--------------------------------------------------------------------------------
 1 | let defaultAccounts = [];
 2 | let defaultNetwork = '1';
 3 | let accounts = defaultAccounts.slice();
 4 | let network = defaultNetwork;
 5 | 
 6 | const web3 = {
 7 |   eth: {
 8 |     accounts: {
 9 |       wallet: {
10 |         length: 0
11 |       }
12 |     },
13 |     getAccounts: cb => cb(null, accounts),
14 |     net: {
15 |       getId: cb => cb(null, network)
16 |     }
17 |   },
18 |   currentProvider: {
19 |     enable: () => {
20 |       return Promise.resolve(accounts)
21 |     },
22 |   },
23 |   setNetwork: v => network = v,
24 |   setAccounts: v => {
25 |     accounts = v;
26 |     accounts.forEach((address, i) => {
27 |       web3.eth.accounts.wallet[i] = {
28 |         address: address
29 |       };
30 |     });
31 |     web3.eth.accounts.wallet.length = accounts.length;
32 |   },
33 |   restore: () => {
34 |     accounts = defaultAccounts.slice();
35 |     network = defaultNetwork;
36 |     web3.eth.accounts.wallet = { length: 0 };
37 |   },
38 |   version: '1.0.0-beta.20'
39 | };
40 | 
41 | module.exports = web3;
42 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-web3",
 3 |   "version": "1.2.0",
 4 |   "description": "",
 5 |   "main": "./dist/index.js",
 6 |   "scripts": {
 7 |     "test": "mocha-webpack --webpack-config webpack.config.js --require test/.setup.js test/**/*.test.js",
 8 |     "test:watch": "mocha-webpack --watch --webpack-config webpack.config.js --require test/.setup.js test/**/*.test.js",
 9 |     "build": "webpack --config webpack.config.js",
10 |     "build:watch": "webpack --config webpack.config.js --watch",
11 |     "prepare": "npm run build"
12 |   },
13 |   "files": [
14 |     "dist"
15 |   ],
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "https://github.com/coopermaruyama/react-web3"
19 |   },
20 |   "author": "Cooper Maruyama <me@cooperm.com>",
21 |   "license": "ISC",
22 |   "dependencies": {
23 |     "lodash": "^4.17.11"
24 |   },
25 |   "peerDependencies": {
26 |     "react": ">= 15.6.1",
27 |     "prop-types": ">= 15.5.1"
28 |   },
29 |   "devDependencies": {
30 |     "babel-cli": "^6.24.1",
31 |     "babel-core": "^6.25.0",
32 |     "babel-loader": "^7.1.1",
33 |     "babel-plugin-transform-class-properties": "^6.24.1",
34 |     "babel-polyfill": "^6.23.0",
35 |     "babel-preset-env": "^1.6.0",
36 |     "babel-preset-es2015": "^6.24.1",
37 |     "babel-preset-react": "^6.24.1",
38 |     "babel-preset-stage-2": "^6.24.1",
39 |     "chai": "^4.1.0",
40 |     "enzyme": "^2.9.1",
41 |     "flow-bin": "^0.51.1",
42 |     "jsdom": "^11.1.0",
43 |     "mocha": "^3.5.0",
44 |     "mocha-webpack": "^1.0.0-rc.1",
45 |     "prop-types": "^15.5.10",
46 |     "react": "^15.6.1",
47 |     "react-dom": "^15.5.4",
48 |     "react-test-renderer": "^15.6.1",
49 |     "sinon": "^2.4.1",
50 |     "webpack": "^3.4.1",
51 |     "webpack-node-externals": "^1.6.0"
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/IconNoWeb3.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function IconNoWeb3(props) {
 4 |   return (
 5 | 
 6 |     <svg width="100%" height="100%" viewBox="0 0 332 417" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
 7 |     <defs>
 8 |       <path d="M198.610685,43.1017808 C107.24977,43.1017808 33.1017808,117.24977 33.1017808,208.610685 C33.1017808,299.971599 107.24977,374.119588 198.610685,374.119588 C289.971599,374.119588 364.119588,299.971599 364.119588,208.610685 C364.119588,117.24977 289.971599,43.1017808 198.610685,43.1017808 L198.610685,43.1017808 Z M198.610685,341.017808 C125.455749,341.017808 66.2035615,281.76562 66.2035615,208.610685 C66.2035615,177.991537 76.6306225,149.855024 94.1745663,127.511322 L279.710047,313.046803 C257.366345,330.590747 229.229832,341.017808 198.610685,341.017808 L198.610685,341.017808 Z M303.046803,289.710047 L117.511322,104.174566 C139.855024,86.6306225 167.991537,76.2035615 198.610685,76.2035615 C271.76562,76.2035615 331.017808,135.455749 331.017808,208.610685 C331.017808,239.229832 320.590747,267.366345 303.046803,289.710047 L303.046803,289.710047 Z" id="path-1"></path>
 9 |     </defs>
10 |     <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
11 |       <g id="Group" transform="translate(-33.000000, 0.000000)">
12 |         <g id="Ethereum_logo_2014" opacity="0.208899457" transform="translate(71.000000, 0.000000)" fillRule="nonzero">
13 |           <polygon id="Shape" fill="#343434" points="127.9611 0 125.1661 9.5 125.1661 285.168 127.9611 287.958 255.9231 212.32"></polygon>
14 |           <polygon id="Shape" fill="#8C8C8C" points="127.962 0 0 212.32 127.962 287.959 127.962 154.158"></polygon>
15 |           <polygon id="Shape" fill="#3C3C3B" points="127.9611 312.1866 126.3861 314.1066 126.3861 412.3056 127.9611 416.9066 255.9991 236.5866"></polygon>
16 |           <polygon id="Shape" fill="#8C8C8C" points="127.962 416.9052 127.962 312.1852 0 236.5852"></polygon>
17 |           <polygon id="Shape" fill="#141414" points="127.9611 287.9577 255.9211 212.3207 127.9611 154.1587"></polygon>
18 |           <polygon id="Shape" fill="#393939" points="0.0009 212.3208 127.9609 287.9578 127.9609 154.1588"></polygon>
19 |         </g>
20 |         <g id="ic_do_not_disturb" transform="translate(0.000000, 10.000000)"></g>
21 |         <polygon id="Bounds" points="0 10 397.221369 10 397.221369 407.221369 0 407.221369"></polygon>
22 |         <g id="Icon">
23 |           <use fill="#FFE1DE" fillRule="evenodd" xlinkHref="#path-1"></use>
24 |           <path stroke="#FFFFFF" strokeWidth="6" d="M198.610685,46.1017808 C288.314745,46.1017808 361.119588,118.906624 361.119588,208.610685 C361.119588,298.314745 288.314745,371.119588 198.610685,371.119588 C108.906624,371.119588 36.1017808,298.314745 36.1017808,208.610685 C36.1017808,118.906624 108.906624,46.1017808 198.610685,46.1017808 Z M198.610685,344.017808 C123.798895,344.017808 63.2035615,283.422474 63.2035615,208.610685 C63.2035615,178.077442 73.3736714,149.145233 91.8150049,125.658629 L93.9040007,122.998115 L284.223254,313.317368 L281.56274,315.406364 C258.076136,333.847698 229.143927,344.017808 198.610685,344.017808 Z M303.317368,294.223254 L112.998115,103.904001 L115.658629,101.815005 C139.145233,83.3736714 168.077442,73.2035615 198.610685,73.2035615 C273.422474,73.2035615 334.017808,133.798895 334.017808,208.610685 C334.017808,239.143927 323.847698,268.076136 305.406364,291.56274 L303.317368,294.223254 Z"></path>
25 |         </g>
26 |       </g>
27 |     </g>
28 |   </svg>
29 |   );
30 | }
31 | 
32 | module.exports = IconNoWeb3;
33 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Web3
  2 | 
  3 | ![demo](https://d3vv6lp55qjaqc.cloudfront.net/items/0x0U0Y2G3W3L3R203l2X/Screen%20Recording%202017-07-30%20at%2005.07%20AM.gif?X-CloudApp-Visitor-Id=1754851&v=759f0b27)
  4 | 
  5 | Ensure web3 is available before your app loads.
  6 | 
  7 | This package is compatible with both web3@0.2.x and web3@1.x.x
  8 | 
  9 | `react-web3` exports a `<Web3Provider />` React component which wraps your app
 10 | and ensures it doesn't render until web3 is available. It also renders a nice
 11 | message to the user to guide them in the following cases:
 12 | 
 13 | 1. The user is not using a web3-capable browser, or
 14 | 2. The user has web3 support, but their account is locked (their ETH address is inaccessible)
 15 | 
 16 | Along with the above, `<Web3Provider />` also:
 17 | 
 18 |  * Reacts to the user unlocking their wallet or switching accounts.
 19 |  * Provides a context to your entire app with useful data.
 20 |  * Accepts a callback that is called when user switches to a different account.
 21 | 
 22 | 
 23 | ## Installation
 24 | 
 25 | ```
 26 | $ npm install react-web3
 27 | ```
 28 | 
 29 | ## Test
 30 | 
 31 | ```
 32 | $ npm test
 33 | ```
 34 | 
 35 | ## Usage
 36 | 
 37 | Wrap your root-level react component:
 38 | 
 39 | ```js
 40 | import { Web3Provider } from 'react-web3';
 41 | 
 42 | // ...
 43 | 
 44 | // Ensure that <App /> doesn't render until we confirm web3 is available
 45 | ReactDOM.render(rootEl,
 46 |   <Web3Provider>
 47 |     <App />
 48 |   </Web3Provider>
 49 | );
 50 | ```
 51 | 
 52 | ### Context
 53 | 
 54 | `<Web3Provider />` provides a child context to your app with useful data:
 55 | 
 56 | ```js
 57 | import React from 'react';
 58 | import PropTypes from 'prop-types';
 59 | 
 60 | function SomeComponent(props, context) {
 61 |   const web3Context = context.web3;
 62 | 
 63 |   /**
 64 |    * web3Context = {
 65 |    *   accounts: {Array<string>} - All accounts
 66 |    *   selectedAccount: {string} - Default ETH account address (coinbase)
 67 |    *   network: {string} - One of 'MAINNET', 'ROPSTEN', or 'UNKNOWN'
 68 |    *   networkId: {string} - The network ID (e.g. '1' for main net)
 69 |    * }
 70 |    */
 71 | 
 72 |   return (
 73 |     <div>
 74 |       Hello Web3
 75 |     </div>
 76 |   );
 77 | }
 78 | 
 79 | SomeComponent.contextTypes = {
 80 |   web3: PropTypes.object
 81 | };
 82 | 
 83 | export default SomeComponent;
 84 | ```
 85 | 
 86 | ### Accepted Props
 87 | 
 88 | `<Web3Provider />` accepts the following optional props:
 89 | 
 90 |   * **`onChangeAccount`** *(Function)*:  Callback which is called when the user switches to
 91 |   a new account. Callback will receive the new ETH address as an argument.
 92 |     * **Example:** `onChangeAccount={nextAddress => console.log(nextAddress)}`
 93 |   * **`web3UnavailableScreen`** *(ReactElement)*: React component to override the screen that is
 94 |   shown when web3 is unavailable.
 95 |     * **Example:** `web3UnavailableScreen={() => <div>You need web3!</div>}`
 96 |   * **`accountUnavailableScreen`** *(ReactElement)*: React component to override the screen that
 97 |   is shown when the user's wallet is locked.
 98 |     * **Example:** `accountUnavailableScreen={() => <div>Please unlock your wallet!</div>}`
 99 |   * **`passive`** *(Boolean)*: If true, your app will be rendered right away
100 |   even if an ETH address is not available, and the message screens will become
101 |   irrelevant and never be rendered. This is useful for apps that don't
102 |   require web3 in order to render the app, but which has optional features that
103 |   require web3. An example would be if you had an online store that simply
104 |   allowed ETH as a payment option. In this case, you could read the web3 context
105 |   and handle it manually in any of your components.
106 |     * **Example:**
107 |       ```js
108 |       const methods = ['Credit Card', 'Check', 'Ether'];
109 |       const PaymentMethods = (props, context) => (
110 |         <div>
111 |           {methods.filter(
112 |             // filter out the 'Ether' option if no account is available
113 |             method => method !== 'Ether' || !!context.web3.selectedAccount
114 |           ).map(
115 |             method => <PaymentMethod method={method} key={method} />
116 |           )}
117 |         </div>
118 |       )
119 |       ```
120 | 
121 | ### Redux Support
122 | 
123 | If you're using `react-redux`, then you most likely have a `<Provider />`
124 | component at the very root of your app. If this is the case, `<Web3Provider />`
125 | will dispatch the following actions to your redux store:
126 | 
127 | * **`web3/RECEIVE_ACCOUNT`:** Dispatched the first time an ETH account is
128 | available.
129 | * **`web3/CHANGE_ACCOUNT`:** Dispatched when the user switches between accounts.
130 | * **`web3/LOGOUT`:** Dispatched when user logs out (accounts are no longer available).
131 | 
132 | Both actions provide the ETH address at `action.address`;
133 | 
134 | #### Example Usage:
135 | 
136 | ```js
137 | // In your reducer:
138 | function reducer(state, action) {
139 |   switch(action.type) {
140 |     case 'web3/RECEIVE_ACCOUNT':
141 |       return {
142 |         ...state,
143 |         ethAddress: action.address
144 |       };
145 | 
146 |     case 'web3/CHANGE_ACCOUNT':
147 |       return {
148 |         ...state,
149 |         ethAddress: action.address
150 |       };
151 |     case 'web3/LOGOUT':
152 |       return {
153 |         ...state,
154 |         ethAddress: null
155 |       }
156 |   }
157 | }
158 | ```
159 | 


--------------------------------------------------------------------------------
/test/Web3Provider.test.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { expect } from 'chai';
  3 | import { shallow, mount } from 'enzyme';
  4 | import sinon from 'sinon';
  5 | import PropTypes from 'prop-types';
  6 | import Web3Provider from '../src/Web3Provider';
  7 | import Component from './helpers/Component';
  8 | import { wait, getWrapper, getMount } from './helpers/utils';
  9 | 
 10 | let clock;
 11 | const { window } = global;
 12 | 
 13 | const web3_v0 = window.web3;
 14 | 
 15 | /**
 16 |  * We wrap all the tests in a function so we can run with web3 < 1.0 and again
 17 |  * with web3 >= 1.0
 18 |  */
 19 | function runTests(version) {
 20 |   describe('web3 ' + version, function() {
 21 |     describe('Web3Provider', function () {
 22 |       before(() => {
 23 | 
 24 |         if (version === 'v1') {
 25 |           window.web3 = window.web3_v1;
 26 |         } else {
 27 |           window.web3 = web3_v0;
 28 |         }
 29 | 
 30 |         clock = sinon.useFakeTimers();
 31 |       });
 32 |       after(() => {
 33 |         clock.restore();
 34 |       });
 35 |       afterEach(() => {
 36 |         window.web3.restore();
 37 |       });
 38 | 
 39 |       describe('Initial Mount', function () {
 40 |         it('should start an interval to fetch accounts', () => {
 41 |           const spy = sinon.spy(Web3Provider.prototype, 'fetchAccounts');
 42 |           const wrapper = mount(
 43 |             <Web3Provider>
 44 |               <div id="foo" />
 45 |             </Web3Provider>
 46 |           );
 47 | 
 48 |           expect(spy.callCount).to.equal(1);
 49 |           clock.tick(1000);
 50 |           expect(spy.callCount).to.be.above(1);
 51 |           spy.restore();
 52 |         });
 53 |         it('should start an interval to fetch network', () => {
 54 |           const spy = sinon.spy(Web3Provider.prototype, 'fetchNetwork');
 55 |           const wrapper = mount(
 56 |             <Web3Provider>
 57 |               <div id="foo" />
 58 |             </Web3Provider>
 59 |           );
 60 | 
 61 |           expect(spy.callCount).to.equal(1);
 62 |           clock.tick(60000);
 63 |           expect(spy.callCount).to.be.above(1);
 64 |           spy.restore();
 65 |         });
 66 | 
 67 |         it('should set context.accounts if available', async () => {
 68 |           window.web3.setAccounts(['0x987']);
 69 |           const wrapper = getMount();
 70 |           const instance = wrapper.instance();
 71 |           await instance.fetchAccounts()
 72 |           const ctx = wrapper.instance().getChildContext()
 73 | 
 74 |           expect(ctx.web3.selectedAccount).to.equal('0x987');
 75 |         });
 76 |       });
 77 | 
 78 |       describe('Polling', function () {
 79 |         it('Does not cause a state update if nothing changes', () => {
 80 |           const spy = sinon.spy(Web3Provider.prototype, 'setState');
 81 |           const wrapper = mount(
 82 |             <Web3Provider>
 83 |               <div id="foo" />
 84 |             </Web3Provider>
 85 |           );
 86 |           clock.tick(1000);
 87 |           const initialCallCount = spy.callCount;
 88 |           clock.tick(60000);
 89 |           expect(spy.callCount).to.be.eq(initialCallCount);
 90 |           spy.restore();
 91 |         });
 92 |       });
 93 | 
 94 |       describe('Redux Integration', function () {
 95 |         describe('When accounts becomes available', () => {
 96 |           it('dispatches an action', async () => {
 97 |             window.web3.setAccounts(['0x111']);
 98 |             const spy = sinon.spy();
 99 |             const wrapper = mount(
100 |               <Web3Provider>
101 |                 <div id="foo" />
102 |               </Web3Provider>,
103 |               {
104 |                 context: {
105 |                   store: {
106 |                     dispatch: spy
107 |                   }
108 |                 }
109 |               }
110 |             );
111 |             await wrapper.instance().fetchAccounts()
112 | 
113 |             expect(spy.callCount).to.equal(1);
114 |             sinon.assert.calledWith(spy, sinon.match({
115 |               type: 'web3/RECEIVE_ACCOUNT',
116 |               address: '0x111'
117 |             }));
118 |           })
119 |         });
120 |         describe('When switching between accounts', () => {
121 |           it('dispatches an action', async () => {
122 |             window.web3.setAccounts(['0x111']);
123 |             const spy = sinon.spy();
124 |             const wrapper = mount(
125 |               <Web3Provider>
126 |                 <div id="foo" />
127 |               </Web3Provider>,
128 |               {
129 |                 context: {
130 |                   store: {
131 |                     dispatch: spy
132 |                   }
133 |                 }
134 |               }
135 |             );
136 | 
137 |             // simulate changing account
138 |             window.web3.setAccounts(['0x222']);
139 |             await wrapper.instance().fetchAccounts()
140 |             clock.tick(1500);
141 | 
142 |             sinon.assert.calledWith(spy, sinon.match({
143 |               type: 'web3/CHANGE_ACCOUNT',
144 |               address: '0x222'
145 |             }));
146 |           })
147 |         });
148 | 
149 |         describe('When logging out', () => {
150 |           it('dispatches an action', async () => {
151 |             window.web3.setAccounts(['0x111']);
152 |             const spy = sinon.spy();
153 |             const wrapper = mount(
154 |               <Web3Provider>
155 |                 <div id="foo" />
156 |               </Web3Provider>,
157 |               {
158 |                 context: {
159 |                   store: {
160 |                     dispatch: spy
161 |                   }
162 |                 }
163 |               }
164 |             );
165 | 
166 |             // simulate logging out
167 |             window.web3.setAccounts([]);
168 |             await wrapper.instance().fetchAccounts()
169 |             clock.tick(1500);
170 | 
171 |             sinon.assert.calledWith(spy, sinon.match({
172 |               type: 'web3/LOGOUT',
173 |               address: null
174 |             }));
175 |           })
176 |         });
177 |       });
178 |     });
179 |   })
180 | }
181 | 
182 | runTests('v0');
183 | runTests('v1');
184 | 


--------------------------------------------------------------------------------
/src/Web3Provider.jsx:
--------------------------------------------------------------------------------
  1 | const React = require('react');
  2 | const PropTypes = require('prop-types');
  3 | const isEmpty = require('lodash/isEmpty');
  4 | const range = require('lodash/range');
  5 | const AccountUnavailable = require('./AccountUnavailable');
  6 | const Web3Unavailable = require('./Web3Unavailable');
  7 | 
  8 | const ONE_SECOND = 1000;
  9 | const ONE_MINUTE = ONE_SECOND * 60;
 10 | const propTypes = {
 11 |   web3UnavailableScreen: PropTypes.any,
 12 |   accountUnavailableScreen: PropTypes.any,
 13 |   onChangeAccount: PropTypes.func
 14 | };
 15 | const defaultProps = {
 16 |   passive: false,
 17 |   web3UnavailableScreen: Web3Unavailable,
 18 |   accountUnavailableScreen: AccountUnavailable
 19 | };
 20 | const childContextTypes = {
 21 |   web3: PropTypes.shape({
 22 |     accounts: PropTypes.array,
 23 |     selectedAccount: PropTypes.string,
 24 |     network: PropTypes.string,
 25 |     networkId: PropTypes.string
 26 |   })
 27 | };
 28 | 
 29 | class Web3Provider extends React.Component {
 30 | 
 31 |   static contextTypes = {
 32 |     store: PropTypes.object
 33 |   };
 34 | 
 35 |   constructor(props, context) {
 36 |     super(props, context);
 37 |     const accounts = this.getAccounts();
 38 | 
 39 |     this.state = {
 40 |       accounts,
 41 |       networkId: null,
 42 |       networkError: null
 43 |     };
 44 |     this.interval = null;
 45 |     this.networkInterval = null;
 46 |     this.fetchAccounts = this.fetchAccounts.bind(this);
 47 |     this.fetchNetwork = this.fetchNetwork.bind(this);
 48 | 
 49 |     if (accounts) {
 50 |       this.handleAccounts(accounts, true);
 51 |     }
 52 |   }
 53 | 
 54 |   getChildContext() {
 55 |     return {
 56 |       web3: {
 57 |         accounts: this.state.accounts,
 58 |         selectedAccount: this.state.accounts && this.state.accounts[0],
 59 |         network: getNetwork(this.state.networkId),
 60 |         networkId: this.state.networkId
 61 |       }
 62 |     };
 63 |   }
 64 | 
 65 |   /**
 66 |    * Start polling accounts, & network. We poll indefinitely so that we can
 67 |    * react to the user changing accounts or netowrks.
 68 |    */
 69 |   componentDidMount() {
 70 |     this.fetchAccounts();
 71 |     this.fetchNetwork();
 72 |     this.initPoll();
 73 |     this.initNetworkPoll();
 74 |   }
 75 | 
 76 |   /**
 77 |    * Init web3/account polling, and prevent duplicate interval.
 78 |    * @return {void}
 79 |    */
 80 |   initPoll() {
 81 |     if (!this.interval) {
 82 |       this.interval = setInterval(this.fetchAccounts, ONE_SECOND);
 83 |     }
 84 |   }
 85 | 
 86 |   /**
 87 |    * Init network polling, and prevent duplicate intervals.
 88 |    * @return {void}
 89 |    */
 90 |   initNetworkPoll() {
 91 |     if (!this.networkInterval) {
 92 |       this.networkInterval = setInterval(this.fetchNetwork, ONE_MINUTE);
 93 |     }
 94 |   }
 95 | 
 96 |   /**
 97 |    * Update state regarding the availability of web3 and an ETH account.
 98 |    * @return {void}
 99 |    */
100 |   fetchAccounts() {
101 |     const { web3 } = window;
102 |     const ethAccounts = this.getAccounts();
103 | 
104 |     if (isEmpty(ethAccounts)) {
105 |       web3 && web3.currentProvider && web3.currentProvider.enable()
106 |       .then(accounts => this.handleAccounts(accounts))
107 |       .catch((err) => {
108 |         this.setState({
109 |           accountsError: err
110 |         });
111 |       });
112 |     } else {
113 |       this.handleAccounts(ethAccounts);
114 |     }
115 |   }
116 | 
117 |   handleAccounts(accounts, isConstructor = false) {
118 |     const { onChangeAccount } = this.props;
119 |     const { store } = this.context;
120 |     let next = accounts[0];
121 |     let curr = this.state.accounts[0];
122 |     next = next && next.toLowerCase();
123 |     curr = curr && curr.toLowerCase();
124 |     const didChange = curr && next && (curr !== next);
125 | 
126 |     if (isEmpty(this.state.accounts) && !isEmpty(accounts)) {
127 |       this.setState({
128 |         accountsError: null,
129 |         accounts: accounts
130 |       });
131 |     }
132 | 
133 |     if (didChange && !isConstructor) {
134 |       this.setState({
135 |         accountsError: null,
136 |         accounts
137 |       });
138 |     }
139 | 
140 |     // If provided, execute callback
141 |     if (didChange && typeof onChangeAccount === 'function') {
142 |       onChangeAccount(next);
143 |     }
144 | 
145 |     // If available, dispatch redux action
146 |     if (store && typeof store.dispatch === 'function') {
147 |       const didLogin = !curr && next;
148 |       const didLogout = curr && !next;
149 | 
150 |       if (didLogout) {
151 |         store.dispatch({
152 |           type: 'web3/LOGOUT',
153 |           address: null
154 |         })
155 |       } else if (didLogin || (isConstructor && next)) {
156 |         store.dispatch({
157 |           type: 'web3/RECEIVE_ACCOUNT',
158 |           address: next
159 |         });
160 |       } else if (didChange) {
161 |         store.dispatch({
162 |           type: 'web3/CHANGE_ACCOUNT',
163 |           address: next
164 |         })
165 |       }
166 |     }
167 |   }
168 | 
169 |   /**
170 |    * Get the network and update state accordingly.
171 |    * @return {void}
172 |    */
173 |   fetchNetwork() {
174 |     const { web3 } = window;
175 | 
176 |     if (web3) {
177 |       const isV1 = /^1/.test(web3.version);
178 |       const getNetwork = isV1 ? web3.eth.net.getId : web3.version.getNetwork;
179 | 
180 |       getNetwork((err, netId) => {
181 |         if (err) {
182 |           this.setState({
183 |             networkError: err
184 |           });
185 |         } else {
186 |           if (netId != this.state.networkId) {
187 |             this.setState({
188 |               networkError: null,
189 |               networkId: netId
190 |             })
191 |           }
192 |         }
193 |       });
194 |     }
195 | 
196 |   }
197 | 
198 |   /**
199 |    * Get the account. We wrap in try/catch because reading `web3.eth.accounts`
200 |    * will throw if no account is selected.
201 |    * @return {String}
202 |    */
203 |   getAccounts() {
204 |     const { web3 } = window;
205 | 
206 |     try {
207 |       const { web3 } = window;
208 |       const isV1 = /^1/.test(web3.version);
209 |       // throws if no account selected
210 |       const getV1Wallets = () => range(web3.eth.accounts.wallet.length).map(i => web3.eth.accounts.wallet[i]).map(w => w.address);
211 |       const accounts = isV1 ? getV1Wallets() : web3.eth.accounts;
212 | 
213 |       return accounts;
214 |     } catch (e) {
215 |       return [];
216 |     }
217 |   }
218 | 
219 |   render() {
220 |     const { web3 } = window;
221 |     const {
222 |       passive,
223 |       web3UnavailableScreen: Web3UnavailableComponent,
224 |       accountUnavailableScreen: AccountUnavailableComponent
225 |     } = this.props;
226 | 
227 |     if (passive) {
228 |       return this.props.children;
229 |     }
230 | 
231 |     if (!web3) {
232 |       return <Web3UnavailableComponent />;
233 |     }
234 | 
235 |     if (isEmpty(this.state.accounts)) {
236 |       return <AccountUnavailableComponent />;
237 |     }
238 | 
239 |     return this.props.children;
240 |   }
241 | }
242 | 
243 | Web3Provider.propTypes = propTypes;
244 | Web3Provider.defaultProps = defaultProps;
245 | Web3Provider.childContextTypes = childContextTypes;
246 | 
247 | module.exports = Web3Provider;
248 | 
249 | /* =============================================================================
250 | =    Deps
251 | ============================================================================= */
252 | function getNetwork(networkId) {
253 |   switch (networkId) {
254 |     case '1':
255 |       return 'MAINNET';
256 |     case '2':
257 |       return 'MORDEN';
258 |     case '3':
259 |       return 'ROPSTEN';
260 |     case '4':
261 |       return 'RINKEBY';
262 |     case '42':
263 |       return 'KOVAN';
264 |     default:
265 |       return 'UNKNOWN';
266 |   }
267 | }
268 | 


--------------------------------------------------------------------------------