index.html

<!DOCTYPE html>
<html>
<head>
<title>SEP20 Tokens</title>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="stylesheet" href="./styles.css">
<script src="assets/web3.min.js"></script>
<script src="assets/abi.js"></script>
<script>
const web3 = new Web3(Web3.givenProvider || 'https://global.uat.cash');
const explorerUrl = 'https://www.smartscan.cash/address/';

function enableEthereum() {
  if (typeof window.ethereum === 'undefined') {
    alert("Your browser does not have a wallet plugin");
    return
  } else {
    window.ethereum.enable();
  }
}

async function getTokenInfo() {
  enableEthereum();
  const address = document.getElementById('token-address').value;
  if (address === "") return;

  const contract = new web3.eth.Contract(abi, address);

  contract.methods.name().call((err, result) => {
    document.getElementById('tokenName').innerHTML = '<li>Name: '+result+'</li>';
  });
  contract.methods.symbol().call((err, result) => {
    document.getElementById('tokenSymbol').innerHTML = '<li>Symbol: <a href="'+explorerUrl+address+'" target="_blank">'+result+'</a></li>';
  });
  contract.methods.decimals().call((err, result) => {
    document.getElementById('tokenDecimals').innerHTML = '<li>Decimals: '+result+'</li>';
  });
}

async function smartBCHAdd(mainnet = true) {
  enableEthereum();
  const chainId = mainnet ? '0x2710' : '0x2711';
  const chainName = mainnet ? 'SmartBCH Mainnet' : 'SmartBCH Testnet';
  let rpcUrls;
  if (mainnet) {
    rpcUrls = [
      "https://global.uat.cash",
      "https://smartbch.greyh.at",
      "https://smartbch.fountainhead.cash/mainnet:8545",
      "https://rpc.uatvo.com:8545"
    ];
  } else {
    rpcUrls = ["https://moeing.tech:9545", "http://35.220.203.194:8545"];
  }
  try {
  await window.ethereum.request({
    method: 'wallet_switchEthereumChain',
    params: [{ chainId }],
  });
} catch (switchError) {
  // This error code indicates that the chain has not been added to MetaMask.
  if (switchError.code === 4902) {
    try {
      await window.ethereum.request({
        method: 'wallet_addEthereumChain',
        params: [{
          chainId,
          chainName,
          blockExplorerUrls: ['https://www.smartscan.cash/'],
          rpcUrls,
          nativeCurrency: {
            name: 'BCH',
            symbol: 'BCH',
            decimals: 18,
          },
        }],
      });
    } catch (addError) {
      // handle "add" error
    }
  }
  // handle other "switch" errors
}
}

async function tokenAdd(address, symbol, decimals, image) {
  enableEthereum();
  try {
    // wasAdded is a boolean. Like any RPC method, an error may be thrown.
    const wasAdded = await ethereum.request(
      {
        method: 'wallet_watchAsset',
        params: {
          type: 'ERC20',
          options: {
            address,
            symbol,
            decimals,
            image
          },
        },
      }
    );
  
    if (wasAdded) {
      alert('Succeed to add the token at '+tokenAddress);
    } else {
      alert('Fail to add the token at '+tokenAddress);
    }
  } catch (error) {
    console.log(error);
  }
}

document.addEventListener("DOMContentLoaded", async function() {
  const mainnet = 10000;
  const testnet = 10001;
  const mainnetList = ['<tr class="header"><th>Logo</th><th>Symbol</th><th>Address</th><th>Decimals</th><th>&nbsp;</th></tr>'];
  const testnetList = ['<tr class="header"><th>Logo</th><th>Symbol</th><th>Address</th><th>Decimals</th><th>&nbsp;</th></tr>'];
  let tokensObj = {};
  try {
    const resp = await fetch("./smartbch.tokenlist.json");
    tokensObj = await resp.json();
  }  catch(e) {
    console.log(e);
  }

  if (tokensObj.timestamp) {
    document.getElementById('listTimestamp').innerHTML = '<code>'+tokensObj.timestamp+'</code>';
  }

  if (tokensObj.version) {
    const version = tokensObj.version.major+'.'+tokensObj.version.minor+'.'+tokensObj.version.patch;
    document.getElementById('listVersion').innerHTML = '<code>'+version+'</code>';
  }

  if (tokensObj.tokens && tokensObj.tokens.length > 0) {
    tokensObj.tokens.map(t => {
      const logoUri = '<img src="'+t.logoURI+'" width="32" height="32" />';
      const addToWallet = 'javascript:tokenAdd(\''+t.address+'\',\''+t.symbol+'\','+t.decimals+',\''+t.logoURI+'\')"';
      if (t.chainId === mainnet) {
        mainnetList.push('<tr><td>'+logoUri+'</td><td><a title="'+t.name+'" class="symbol" href="'+explorerUrl+t.address+'" target="_blank">'+t.symbol+'</a></td>');
        mainnetList.push('<td><span title="click to copy" class="copy" onclick="navigator.clipboard.writeText(\''+t.address+'\')"><code>'+t.address+'</code></span></td>');
        mainnetList.push('<td class="number">'+t.decimals+'</td>');
        mainnetList.push('<td><a title="Add this asset to your wallet" href="'+addToWallet+'">Add</a></td></tr>');
      }
      if (t.chainId === testnet) {
        testnetList.push('<tr><td>'+logoUri+'</td><td><a title="'+t.name+'" class="symbol" href="'+explorerUrl+t.address+'" target="_blank">'+t.symbol+'</a></td>');
        testnetList.push('<td><span title="click to copy" class="copy" onclick="navigator.clipboard.writeText(\''+t.address+'\')"><code>'+t.address+'</code></span></td>');
        testnetList.push('<td class="number">'+t.decimals+'</td>');
        testnetList.push('<td><a title="Add this asset to your wallet" href="'+addToWallet+'">Add</a></td></tr>');
      }
    });
  }

  document.getElementById('mainnetTokenTbl').innerHTML = mainnetList.join("");
  document.getElementById('testnetTokenTbl').innerHTML = testnetList.join("");
});
</script>
</head>
<body>
<div class="normal">
<h1 style="text-align: center;">SEP20 Tokens</h1>
<p>Here are some known SEP20 tokens on smartBCH. You can view these tokens in the <a href="https://www.smartscan.cash">browser</a>, or add them to your wallet plugin as an asset to watch.</p>

<b>Token List</b>:<br/>
<ul>
  <li>Download: <a href="./smartbch.tokenlist.json" target="_blank">JSON file</a></li>
  <li>Version: <span id="listVersion"></span></li>
  <li>Created: <span id="listTimestamp"></span></li>
</ul>

<p>
<h2 style="text-align: center;">SmartBCH mainnet and testnet blockchains</h2>

To send and receive SEP-20 tokens you need first to add the proper blockchain
to your Metamask wallet.
<ul>
  <li>Add <a href="javascript:smartBCHAdd();">SmartBCH mainnet</a> blockchain</li>
  <li>Add <a href="javascript:smartBCHAdd(false);">SmartBCH testnet</a> blockchain</li>
</ul>
</p>

<p>
<h2 style="text-align: center;">Get token information by address</h2>
Address (0x....):
<input type="text" maxlength="128" size="64" id="token-address" />
<a href="javascript:getTokenInfo();">Get Info</a>
<ul>
  <span id="tokenName"></span>
  <span id="tokenSymbol"></span>
  <span id="tokenDecimals"></span>
</ul>
</p>


<p>
<h2 style="text-align: center;">Mainnet SEP20 Tokens</h2>
<table id="mainnetTokenTbl"></table>
</p>

<p>
<h2 style="text-align: center;">Testnet (Amber) SEP20 Tokens</h2>
<table id="testnetTokenTbl"></table>
</p>

<p>You can also view some <a href="app.html">known dApps' addresses</a>.</p>
<p><a href="tools.html">List of SmartBCH ready tools</a> is also available.</p>
</div>
</body>
</html>