react-web3-provider

Simple higher-order component (HOC) providing a web3 context to React app.

Detects whether the user is using MetaMask or Ethereum wallet-enabled browser. If not, it will access the Ethereum network through a given Web3 fallback provider (e.g. INFURA node).

Ready for the upcoming changes in MetaMask.

Installation

$ yarn add react-web3-provider

Basic usage

Add the Web3Provider to your root React component:

import Web3 from 'web3';
import Web3Provider from 'react-web3-provider';

ReactDOM.render(
	<Web3Provider
		defaultProvider={(cb) => cb(new Web3(new Web3.providers.HttpProvider("https://mainnet.infura.io/YOUR_API_KEY")))}
		loading="Loading..."
		error={(err) => `Connection error: ${err.message}`}
	>
		<App />
	</Web3Provider>
)

Then in component where you want to use Web3:

import { withWeb3 } from 'react-web3-provider';

class MyComponent {
	render() {
		const { web3 } = this.props;

		web3.eth.getAccounts(console.log);

		// Version 1.0.0-beta.35
		return "Web3 version: {web3.version}";
	}
}

export default withWeb3(MyComponent);

Custom web3 state handling

You can render the web3 state somewhere else in the page instead of the global loading and error components:

import Web3 from 'web3';
import Web3Provider from 'react-web3-provider';

ReactDOM.render(
	<Web3Provider
		defaultProvider={(cb) => cb(new Web3(new Web3.providers.HttpProvider("https://mainnet.infura.io/YOUR_API_KEY")))}
	>
		<App />
	</Web3Provider>
)

You can use the injected web3State property in your components:

import { withWeb3 } from 'react-web3-provider';

class MyComponent {
	render() {
		const { web3, web3State } = this.props;

		return (
			<pre>
				{web3State.isConnected && "Connected!\n"}
				{web3State.isLoading && "Loading...\n"}
				{web3State.error && `Connection error: ${web3State.error.message}\n`}
				Web3 version: {web3.version}
			</pre>
		);
	}
}

export default withWeb3(MyComponent);

Web3 Provider filtering

It may be useful to skip the MetaMask Provider if the user has the MetaMask extension installed but is currently not signed-in. We can use acceptProvider parameter to filter out Web3 Provider. The given defaultProvider is always accepted.

ReactDOM.render(
	<Web3Provider
		defaultProvider={...}
		acceptProvider={(web3, accept, reject) => {
			web3.eth.getAccounts().then((accounts) => {
				if (accounts.length >= 1) accept();
				else reject();
			});
		}}
	>
		<App />
	</Web3Provider>
);

Hooked wallet

More complex example demonstrating transaction sending with a zero-client wallet.

import Web3 from 'web3';
import Lightwallet from 'eth-lightwallet';
import Web3ProviderEngine from 'web3-provider-engine';
import HookedWalletSubprovider from 'web3-provider-engine/subproviders/hooked-wallet';
import SubscriptionsSubprovider from 'web3-provider-engine/subproviders/subscriptions';
import RpcSubprovider from 'web3-provider-engine/subproviders/rpc';
import waterfall from 'async-waterfall';
import Web3Provider from 'react-web3-provider';

const defaultWeb3Provider = (cb) => {
	// Light-wallet options
	const vaultOpts = {
		seedPhrase: '...',
		password: '...',
		hdPathString: "m/44'/60'/0'/0",
	}
	const lightWalletEnabled = true;

	waterfall([
		// 1. Initialize Web3 Provider engine
		(wcb) => wcb(null, new Web3ProviderEngine()),
		// 2. Add Hooked wallet sub-provider
		(engine, wcb) => {
			if (lightWalletEnabled) {
				try {
					Lightwallet.keystore.createVault(vaultOpts, (err1, ks) => {
						if (err1) throw err1;

						ks.keyFromPassword(vaultOpts.password, (err2, pwDerivedKey) => {
							if (err2) throw err2;
			
							ks.generateNewAddress(pwDerivedKey, 1);
							engine.addProvider(new HookedWalletSubprovider({
								getAccounts: (ecb) => cb(null, ks.getAddresses()),
								signTransaction: (tx, ecb) => ks.signTransaction(tx, ecb),
							}));
							wcb(null, engine);
						});
					});
				} catch((err) => wcb(err, engine));
			} else wcb(null, engine);
		},
		// 3. Add RPC subprovider
		(engine, wcb) => {
			const web3 = new Web3(engine);
			engine.addProvider(new SubscriptionsSubprovider());
			engine.addProvider(new RpcSubprovider({
				rpcUrl: 'https://mainnet.infura.io/YOUR_API_KEY',
			}));
			engine.start();
			wcb(null, web3);
		},
		// 4. Pass the selected Web3 to the Web3Provider callback
	], (_, web3) => cb(web3));
}

ReactDOM.render(
	<Web3Provider
		defaultProvider={defaultWeb3Provider}
	>
		<App />
	</Web3Provider>
);

Sending transaction:

import waterfall from 'async-waterfall';
import { withWeb3 } from 'react-web3-provider';

class MyComponent {
	sendEther(amount, to) {
		const { web3 } = this.props;

		waterfall([
			(wcb) => {
				web3.eth.getAccounts().then((accounts) => {
					if (accounts && accounts.length >= 1) {
						wcb(null, accounts[0]);
					} else {
						wcb('Unknown account', null);
					}
				});
			},
			(account, wcb) => {
				web3.eth.sendTransaction({
					from: account,
					to,
					value: amount * 1000000000000000000,
				}, wcb);
			},
 		], console.log);
  }

	render() {
		return <button onClick={() => this.sendEther(0.1, '0x12345...')}>SEND TRANSACTION</button>;
	}
}

Contributors

• Peter