Token Select

Fork me on GitHub


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

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

@import url(",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;


yarn add @openrelay/token-select


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


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.
Outgoing Events
  • change — Fired when the user selects a token. The event includes the details of the token at e.detail.token.