1.8.9 • Published 5 years ago
web3ready v1.8.9
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
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