@yqrashawn/conflux-portal-onboarding NPM

ConfluxPortal Onboarding

This library is used to help onboard new ConfluxPortal users. It allows you to ask the ConfluxPortal extension to redirect users back to your page after onboarding has finished.

This library will register the current page as having initiated onboarding, so that ConfluxPortal knows where to redirect the user after onboarding. Note that the page will be automatically reloaded a single time once a ConfluxPortal installation is detected, in order to facilitate this registration.

Installation

@yqrashawn/conflux-portal-onboarding is made available as either a CommonJS module, and ES6 module, or an ES5 bundle.

ES6 module: import ConfluxPortalOnboarding from '@yqrashawn/conflux-portal-onboarding'
ES5 module: const ConfluxPortalOnboarding = require('@yqrashawn/conflux-portal-onboarding')
ES5 bundle: dist/conflux-portal-onboarding.bundle.js (this can be included directly in a page)

Usage

Minimal example:

const onboarding = new ConfluxPortalOnboarding()
onboarding.startOnboarding()

Here is an example of an onboarding button that uses this library:

<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>Sample Dapp</h1>
    <button id='onboard'>Loading...</button>
    <script type="text/javascript" src="./conflux-portal-onboarding.bundle.js"></script>
    <script type="text/javascript">
      window.addEventListener('DOMContentLoaded', () => {
        const onboarding = new ConfluxPortalOnboarding()
        const onboardButton = document.getElementById('onboard')
        let accounts

        const updateButton = () => {
          if (!ConfluxPortalOnboarding.isConfluxPortalInstalled()) {
            onboardButton.innerText = 'Click here to install ConfluxPortal!'
            onboardButton.onclick = () => {
              onboardButton.innerText = 'Onboarding in progress'
              onboardButton.disabled = true
              onboarding.startOnboarding()
            }
          } else if (accounts && accounts.length > 0) {
            onboardButton.innerText = 'Connected'
            onboardButton.disabled = true
            onboarding.stopOnboarding()
          } else {
            onboardButton.innerText = 'Connect'
            onboardButton.onclick = async () => {
              await window.ethereum.enable()
            }
          }
        }

        updateButton()
        if (ConfluxPortalOnboarding.isConfluxPortalInstalled()) {
          window.ethereum.on('accountsChanged', (newAccounts) => {
            accounts = newAccounts
            updateButton()
          })
        }
      })
    </script>
  </body>
</html>

bowser

@infinitebrahmanuniverse/nolb-_yq @everything-registry/sub-chunk-1044 @zalastax/nolb-_yq

0.2.0-alpha

5 years ago