Skip to content
Create Dapp's without implementing any web3 provider yourself
Vue JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
public
src
ssl
.browserslistrc
.eslintrc.js
.gitignore
.npmignore
.travis.yml
README.md
babel.config.js
package-lock.json
package.json
postcss.config.js
vue.config.js

README.md

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
You can’t perform that action at this time.