Active

Payout
10 DAI

$10.08

Remaining Balance
200 DAI

$201.56

Remove Web3.js injection dependency from your Dapp

html

colorado

A common issue we see in Dapps is that their developers assume that a Web 3 browser == MetaMask and that they will magically have access to a Web3.js library, injected inside the page on their behalf.

We see this implicit dependency & injection as a bad practice that needs to disappear for the ecosystem to move forward. Developers should import the web3 convenience library of their choice and build their Dapp on top of that, just as they do for other Javascript libraries.

Opera exposes a Web3 Provider (window.web3.currentProvider) which you need to instantiate your own web3 object from.

Removing this dependency on MetaMask Web3.JS library injection will make your dapp more compatible and resilient with other Web3 browsers such as Opera and make it future-proof as this will likely be deprecated.

With plain html/js

Include a script tag with web3.js. This can be fetched from a CDN or included in your project.

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.0.0-beta.34/dist/web3.min.js"></script>
<script>
    const web3 = new Web3(window.web3.currentProvider);
    web3.eth.getAccounts().then(...)
</script>

You can also replace window.web3 with the created web3 object. This way it be accessed anywhere in the Dapp and be used just like you would Metamask's injected library.

<script>
    window.web3 = new Web3(window.web3.currentProvider);
</script>

EthJS can be initialized in a similar way

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ethjs@0.3.4/dist/ethjs.min.js"></script>
<script>
    const eth = new Eth(window.web3.currentProvider);
    eth.accounts().then(...)
</script>

In node.js

Install web3 module in your project

npm install web3 --save

Import and initialize the module with

const Web3 = require("web3");
const web3 = new Web3(window.web3.currentProvider);

Or with ES modules

import { Web3 } from "web3";
const web3 = new Web3(window.web3.currentProvider);

Definition of Done

Your Dapp no longer depends on web3.js library being injected by the browser.

Requirements

A correct submission will:
Your Dapp was previously dependent on Web3.js injection
Screenshot of the “Wallet permission” dialog shown when visiting your Dapp for the first time Opera, this shows that the dev is using the web3 object properly.

You are not employed by Opera

3 monthsremaining
Beginnerdifficulty
1 revisionsexpected

Submissions

6

Comments

7

Submissions are private

The submissions for this bounty have been set to private.