Token Select

Fork me on GitHub

Rendered

Live demos require a web3 client. We recommend installing Metamask. Live demos require an unlocked web3 client. Please unlock your client.

<or-web3>
  <or-token-select id="token-select"></or-token-select>
  <ul>
    <li>Symbol: <span id="token-symbol"></span>
    <li>Decimals: <span id="token-decimals"></span>
    <li>Address: <span id="token-address"></span>
  </ul>
</or-web3>

@import url("https://fonts.googleapis.com/css?family=Muli:200,400,600");

or-web3 {
  font-family: Muli, "avenir next", helvetica, sans-serif;
}

let tokenSelect = demoDoc.querySelector("#token-select");

tokenSelect.addEventListener("change", function() {
  demoDoc.querySelector("#token-symbol").innerText = tokenSelect.value.symbol;
  demoDoc.querySelector("#token-decimals").innerText = tokenSelect.value.decimals;
  demoDoc.querySelector("#token-address").innerText = tokenSelect.value.address;
  }
);

Installation

yarn add @openrelay/token-select

Description

The <or-erc20-balance> element displays the user’s balance of a given ERC20 token.

API

HTML Attributes
  • tokenListUrl — A URL for a JSON document containing a list of tokens. The list must provide symbol, decimal, and address for each record. By default, it will use the tokens for the connected network based on this list.
  • selectedIndex — Pre-select a token from the list based on index. You should not rely on indexes to remain the same when the JavaScript library is updated.
  • selectedSymbol — Pre-select a token based on its symbol.
JavaScript Properties
  • value — An object containing symbol, decimal, and address attributes corresponding to the selected token.
Events
Outgoing Events
  • change — Fired when the user selects a token. The event includes the details of the token at e.detail.token.