Skip to content

Create Dapp's without implementing any web3 provider yourself

Notifications You must be signed in to change notification settings

digitaldonkey/web3ready

Repository files navigation

web3-ready

Greenkeeper badge semantic-release

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.

Select provider Metamask if unlocked Connect with WalletConnect Connect with Ledger

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