web3-ready

Web3-ready takes away the burden of implementing different providers while developing a web3 application.

Demo

https://web3ready.github.io/latest

Development goals

• Minimal footprint: Try to only load the bare minimum of code initially. Lazy load more if required
• Don't store any user data. We only persist the last selected web3 provider. In case this provider supports auto-reconnect we can initialize on page load.
• Simplistic UX: Don't bother the user with anything that can be solved behind his back.
• Developer friendly: A web3 developer includes the web3-ready web-component and implements a window.web3Ready(web3, account) function to start his Dapp after the user connected.
• Common UI for multiple Dapps. The idea is simplify web3 interaction by providing the same interaction pattern to connect to any web3 Dapp.
• Multilingual (but not yet translated. See src/translations)

Sneak preview

Some of the current screens.

Design credits go to Balance Manager.

Usage

<script src="https://unpkg.com/vue"></script>
<script src="https://dist/web3-ready.min.js"></script>
...
<web3-ready
    dapp-name="My new Dapp"
    required-network="42"
    rpc-url="https://mainnet.infura.io/drupal"
    enable-providers="metamask,walletConnect,ledger"
></web3-ready>

<script>
window.addEventListener("web3Ready", function(web3, account){ 
	// Do something with a initialized web3
	// And the user's chosen account address
});
</script>

Properties

• dapp-name
  Unique name for your dapp
• required-network
  Required network Id.
  Please refer to src/translations.default.js:globals.networks to see valid options.
• rpc-url
  RPC to connect to Ethereum
  • Must match required-network
  • Set up your own Ethereum node or use a service like infura.io
• enable-providers
  List of provider is's separated by comma.
  Please refer to src/translations.default.js:globals.signers to see valid options

To integrate in your website make sure the site is served via https. This is partly required (at least for Ledger).

Todo's

• Add Tresor provider
• Lazy load Provider dialogues
• provide CDN based and non-CDN version

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Git

Commit with a semantic-release friendly commit message

npm run commit

Testing this build

npm run build

Test the web-comüonent with dist/index.html

Lints and fixes files

npm run lint