Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Greenkeeper badge semantic-release

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


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.

Select provider Metamask if unlocked Connect with WalletConnect Connect with Ledger

Design credits go to Balance Manager.


<script src=""></script>
<script src="https://dist/web3-ready.min.js"></script>
    dapp-name="My new Dapp"

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


  • 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
  • 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).


  • 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


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