Zippie Button

r0kk3rz edited this page Oct 29, 2018 · 5 revisions

Sign in with Zippie

Want to unshackle your dApp from clunky onboarding solutions? Want to have a consistent experience no matter where your users are coming from?

Follow these instructions to include the 'Sign in with Zippie' button

1. Install the Modules

Install the zippie modules from node repostiory

npm install @zippie/vault-api
npm install @zippie/vault-web3-provider

2. Import the Modules

Import the modules into your DApp

import * as vault from '@zippie/vault-api'
import * as vaultSecp256k1 from '@zippie/vault-api/src/secp256k1.js'
import * as zippieprovider from '@zippie/vault-web3-provider'

3. Choose your Button Style

import the button graphics, you get a choice of light or dark themed buttons

zippie-light zippie-dark
import zippieButtonDark from '@zippie/vault-api/static/img/zippie-button-dark-default.png'

import zippieButtonLight from '@zippie/vault-api/static/img/zippie-button-light-default.png'

you will need something like file-loader to make sure the graphics are packed into your deployment

4. Add the Button

Add a spot for the button in the HTML

<div id='zippie-button' />

Create the button from Javascript

var loginDiv = document.getElementById('zippie-button')
var loginButton = vault.createButton();

var buttonStyle = document.createElement('img')
buttonStyle.src = zippieButtonDark;
loginButton.appendChild(buttonStyle);

loginDiv.appendChild(loginButton);

When the button is pressed, the user will be asked to onboard if they haven't already and then be returned to your dApp.

5. Initialise the Vault for returning customers

Check for the presence of the zippie login cookie, and automatically initialise the zippie vault and start your dApp

if(vault.isUserOnboarded())
{
    vault.init()
      .then((result) => {          
          // Initialise Web3 Provider
          if(window.web3 === undefined) {
            var ethereum = zippieprovider.init(vault, vaultSecp256k1, { network: 'kovan' })
            window.web3 = new Web3(ethereum)
          }

          // anything else you need to start your dApp running here
        },
        (error) => {
        }
     )
}

6. Read up on how to integrate Zippie into your dApp

Check out the documentation on github at:

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.