WalletConnect Wizard

This is a web component to integrate WalletConnect token and cryptocurrency wallets to your service easily.

We believe that separating the concerns of service providers and value storages increases security and privacy of Internet. However this so called Web3 principle is also a novel concept for a lot of users and education in this area is needed. WalletConnect Wizard is a component designed to provide a smooth user experience for helping users to install, start using, confirm transactions and see their tokens in their third party wallets.

We support different kind of wallet mechanisms (see below), though the emphasis is on WalletConnect wallets as they are more secure due to running on a separate hardened mobile device.

Goals

• A component for web and mobile service developers
• Easy to integrate to your site - providing a bundled JS and CSS option
• Explain new users what is a wallet and why it is needed
• Support both WalletConnect (mobile) and web3.js/MetaMask (desktop) style wallets
• Support multiple blockchains: Ethereum, Binance, otehrs
• Maintain list of logos, names and install locations of supported wallets
• Multimodal - automatically adapt styles and installation links depending on the platform: desktop, iOS, Android

Demo

• See live demo

Usage

We currently provide an UMD build, which should be usable directly from the browser, and a CommonJS build.

<div id="root"></div>
<script src="./dist/umd/walletconnect-wizard.js"></script>

walletConnectWizard.init('root', {
    onConnect: function(response) {
        alert("You are connected with: " + response.type);
        response.provider.sendAsync({
            method: 'eth_accounts',
            params: [],
        }, function(error, params)  {
            var account = params.result[0];
            alert("Your ethereum account is:" + account);
        });
    }
});

Usage with ES6/Typescript and React:

import { Wizard } from 'walletconnect-wizard';

<Wizard
    onConnect={(response) => {
        // do stuff
    }}
/>

The response object API is to be fully designed, but it looks something like this:

export interface ConnectionResponse {
    type: ConnectionType;                   // 'walletconnect' or 'browser'
    provider: any;                          // asyncSendable provider that can be passed to new Web3(...)
                                            // for MetaMask, this will be window.ethereum
                                            // for WalletConnect, we use @walletconnect/web-provider
    web3: any;                              // currently always null, maybe Web3 object in the future
    walletConnector: WalletConnect | null;  // WalletConnect object, or null if connected using MetaMask
}

Development

We use StoryBook for easy local development:

$ yarn
$ yarn start

Building:

$ yarn build

Updating github pages (live demo):

$ git checkout gh-pages
$ git merge master
$ rm -rf dist
$ yarn build
$ git add --force dist
$ git commit -m "Update gh-pages"
$ git push origin gh-pages

Analyzing built bundle size:

$ yarn analyze-bundle

This opens a server in http://localhost:8888/, where you can see a visual representation of the bundle contents.

UI mockups

• See LucidChart mock ups

Eligible wallets

We are currently focusing on wallets that can directly interact with smart contracts and blockchain. Wallets that do only transfer-of-value only are out of the scope

For Ethereum the wallet must pass all tests on example.walletconnect.org

Different wallet categories

We can roughly classify how wallets and web services interact

• Mobile wallets that connect to your service by reading a WalletConnect QR code on a desktop page
• Desktop web browser extensions (MetaMask)
• Wallet integrated in a desktop web browser (Opera, Brave)
• Wallet integrated in a mobile browser (Opera for Android)
• Mobile app that integrates a WebView web browser (Status.im)
• Desktop wallet apps that connect via localhost socket (Scatter for EOS)

Limitations between if your wallet integrates a browser or a browser integrates a wallet comes obvious when you try to interact with third party sign in services like Facebook and Google.

Wallet database entries

• id: internal id
• name: Human readable brand name
• homepage: Link to the homepage
• support: Link to the support - displayed on connection page if the user is having issues
• blockchains: ids of supported blockchains - currently ethereum and binance
• install: direct installation links to different platform
• operations: what kind of operations this support: transactions, message signing, etc.

TODO

• Generate wallet list from database json
• Detect mobile browsers and don't show QR-code
• Provide multiple build targets: [x] UMD (named walletconnect-wizard.js), [x] CommonJS, [ ] esmodule
• Strip down the build size
• Finalize response (maybe return Web3 object there)
• Better documentation (document finalized response object and props to pass to init and Wizard)
• Configure TSLint

License

MIT