@yqrashawn/conflux-portal-onboarding
v0.2.0-alpha
Published
Tools to support Conflux Portal one-click onboarding
Downloads
95
Readme
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>