https://github.com/digitaldonkey/web3ready

Create Dapp's without implementing any web3 provider yourself
https://github.com/digitaldonkey/web3ready

web-component web3 web3-dapp web3-javascript web3js

Last synced: 3 days ago
JSON representation

Create Dapp's without implementing any web3 provider yourself

• Host: GitHub
• URL: https://github.com/digitaldonkey/web3ready
• Owner: digitaldonkey
• Created: 2018-10-08T18:25:33.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-05-31T01:18:37.000Z (over 4 years ago)
• Last Synced: 2024-04-27T22:40:29.170Z (5 months ago)
• Topics: web-component, web3, web3-dapp, web3-javascript, web3js
• Language: Vue
• Homepage:
• Size: 15.6 MB
• Stars: 26
• Watchers: 3
• Forks: 12
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# web3-ready

[![Greenkeeper badge](https://badges.greenkeeper.io/digitaldonkey/web3ready.svg)](https://greenkeeper.io/)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

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

**Demo**

[https://web3ready.github.io/latest](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](https://github.com/digitaldonkey/web3ready/blob/master/docs/selectProvider.png?raw=true)

![Metamask if unlocked](https://github.com/digitaldonkey/web3ready/blob/master/docs/Metamask.png?raw=true)

![Connect with WalletConnect](https://github.com/digitaldonkey/web3ready/blob/master/docs/walletConnect.png?raw=true)

![Connect with Ledger](https://github.com/digitaldonkey/web3ready/blob/master/docs/ledger.png?raw=true)

Design credits go to [Balance Manager](https://manager.balance.io/).

## Usage

```

...

window.addEventListener("web3Ready", function(web3, account){ 

	// Do something with a initialized web3

	// And the user's chosen account address

});

```

### 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

```