Skip to content

Latest commit

 

History

History
170 lines (122 loc) · 5.61 KB

BTU-Plugin.md

File metadata and controls

170 lines (122 loc) · 5.61 KB
Raw

BTU dappbar

The BTU dappbar makes it simpler for business providers to cashback BTU tokens.

Overview

The BTU dappbar makes it simpler for business providers to cashback BTU tokens. In its current version (v2.1), the tool enables the wallet address display in an uniform way and has been tested with most web3-enabled browser.

The dappbar component is implemented with HTML5, CSS3 and Javascript only. It can be embedded in any Javascript framework: React, Angular etc... It is able to detect wallets integrated with a Web3-compatible browser such as Opera, plugins like Metamask installed on Chrome or Firefox, Dapp browsers like BTU-Direct, Trust, Coinbase Wallet or Status.

Installation

Script

In order to initialize the dappbar, the dappbar.js script must first be integrated.

In an HTML file, the script may ben called by the following tag, in the <head></head> section:

<script type="text/javascript"src="https://btu-cdn.s3.eu-west-3.amazonaws.com/public/dappbar.min.js"></script>

Otherwise, the script can be injected by the following Javascript functions:

const script = document.createElement('script')
script.src = 'https://btu-cdn.s3.eu-west-3.amazonaws.com/public/dappbar.min.js'
script.async = true
document.head.appendChild(script)

If not used in your project, the dappbar.js script injects by itself two other scripts:

Unless the server prevents those scripts to be injected, they need not be manually initialized prior to the dappbar.js script.

Dappbar container

The dappbar needs a <div> tag with the specific "btu-placeholder" id in order to be deployed:

<div id="btu-placeholder"></div>

This tag should be placed as early as possible in the page, so that it may take up all the top space.

Domain restriction

If your website is available with several domain names, and you need the wallet connection to be possible with only one of them, (e.g. if you want the users sharing the link to your website to earns the cashback instead of the final user,) you may explicitly specicify the domain names where the dappbar has to be displayed, by listing them in the "data-restrict-domain" attribute, separated by commas:

<div id="btu-placeholder" data-restrict-domain="<list of domain to restrict the dappbar to>"></div>

For example, if the dappbar should only be displayed on the domains test.com and test.fr:

<div id="btu-placeholder" data-restrict-domain="test.com,test.fr"></div>

If the attribute is omitted, the dappbar will be displayed without any restriction.

Use

Overview

Once the dappbar is installed, a user's wallet will be connected automatically to the dappbar. (Or a validation request will be displayed if the user hasn't yet authorized the dappbar to connect to their wallet.) The relevant information are saved in the sessionStorage object.

Dappbar enabled

The status of the dappbar is given by the following command:

sessionStorage.getItem('BTU-dappbarEnabled');

This command returns a string:

  • "true" if the dappbar is enabled for the current website
  • "false" otherwise.

Wallet connection

The status of the wallet is given by the following command:

sessionStorage.getItem("BTU-walletConnected");

This command returns a string:

  • "true" if a wallet is connected
  • "false" otherwise.

Wallet address

The current wallet address is given by the following command:

sessionStorage.getItem("BTU-walletAddr");

This command returns a string with the current address. (42 characters : "0x" followed by 40 hexadecimal characters.)

Reloading the dapp bar

The dappbar may be reloaded with the following command:

_btu_loadDappbar();

The current state is preserved: current wallet, current popup, etc.

Changing language

When first loaded, the dappbar is in French is the default language of the browser is French, and in English otherwise. The language of the dappbar may be changed from French to English (or English to French). The dappbar needs reloading after the language is modified.

To change the language to English:

_btu_setLanguage('en');
_btu_loadDappbar();

To change the language to French:

_btu_setLanguage('fr');
_btu_loadDappbar();

Window Events

BTU-dappbarEnabled

This event is dispatched when the dappbar is enabled.

To listen to this event:

window.addEventListener('BTU-dappbarEnabled', callback, false)

The dappbar status can be accessed with:

sessionStorage.getItem("BTU-dappbarEnabled")

BTU-dappbarEthereum

This event is dispatched when an ethereum account has been read.

To listen to this event:

window.addEventListener('BTU-dappbarEthereum', callback, false)

The wallet address can be accessed with:

sessionStorage.getItem("BTU-walletAddr")

The Web3 Object is available with:

window.web3