docs/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Get Started With Developing In Ethereum</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="description" content="Get Started With Developing In Ethereum (c) Bok Consulting Pty Ltd 2023" /4
    <meta name="author" content="BokkyPooBah" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@BokkyPooBah" />
    <meta name="twitter:creator" content="@BokkyPooBah" />
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="css/bootstrap-vue.min.css"/>
    <link type="text/css" rel="stylesheet" href="css/bootstrap-vue-icons.min.css"/>
    <link type="text/css" rel="stylesheet" href="css/app.css" />
    <script src="js/vue.js"></script>
    <script src="js/bootstrap-vue.min.js"></script>
    <script src="js/bootstrap-vue-icons.min.js"></script>
    <script src="js/ethers-5.7.umd.min.js" type="application/javascript"></script>
    <script src="js/moment.min.js"></script>
    <script src="globals.js"></script>
    <script src="customNames.js"></script>
    <script src="deploymentData.js"></script>
    <script src="networks.js"></script>

    <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
    <link rel="manifest" href="images/site.webmanifest">
    <link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href="images/favicon.ico">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="msapplication-config" content="images/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
  </head>
  <body>
    <div id="app">
      <b-container fluid class="m-0 p-0">
        <b-navbar toggleable="sm" variant="light" class="mx-1 my-0 p-0">
          <b-navbar-brand to="https://bokkypoobah.github.io/GetStartedWithDevelopingInEthereum/" variant="primary">
            <b-avatar rounded variant="light" size="3.0rem" src="images/ZombieBaby_004_transparentbg_zoomed.png" v-b-popover.hover.ds500="'gm'" class="ml-0"></b-avatar>
            <em v-b-popover.hover.ds500="'gm gm gm'">Get Started With Developing In Ethereum</em>
          </b-navbar-brand>
          <b-navbar-nav class="ml-auto">
            <b-nav-item size="sm" @click="settings.tabIndex = 0; saveSettings();" :active="settings.tabIndex == 0" active-class="active" v-b-popover.hover.ds500="'Home, and information on this tool'">Home</b-nav-item>
            <b-nav-item size="sm" @click="settings.tabIndex = 1; saveSettings();" :active="settings.tabIndex == 1" active-class="active" v-b-popover.hover.ds500="'ERC-20 Fungible Tokens'">ERC-20</b-nav-item>
            <b-nav-item size="sm" @click="settings.tabIndex = 2; saveSettings();" :active="settings.tabIndex == 2" active-class="active" v-b-popover.hover.ds500="'ERC-721 Non-Fungible Tokens'">ERC-721</b-nav-item>
            <b-nav-item size="sm" @click="settings.tabIndex = 3; saveSettings();" :active="settings.tabIndex == 3" active-class="active" v-b-popover.hover.ds500="'ERC-1155 Non-Fungible Tokens - WIP'">ERC-1155</b-nav-item>
            <b-button size="sm" variant="outline-primary" class="ml-1" @click="connectToWeb3(); processNewBlock(0);" v-b-popover.hover.ds500="'Click to update wallet'">{{ coinbase && (coinbase.substring(0, 8) + '...' + coinbase.slice(-6)) || 'Connect' }}</b-button>
          </b-navbar-nav>
        </b-navbar>

        <b-card no-body class="p-0 mt-0" style="min-height: 666px;">
          <b-alert v-if="false && chainId && chainId != 11155111" size="sm" dismissible variant="warning" show class="m-1 my-0">
            Warning: This dapp is for use on the Ethereum Sepolia testnet
          </b-alert>
          <b-card class="m-2 p-1" header-class="warningheader" header="Welcome" v-if="!coinbase">
            <b-card-text>
              Please install the MetaMask extension and connect to the Ethereum Mainnet or an EVM compatible chain. Then refresh this page, and click the [Connect] button on the top right.
            </b-card-text>
          </b-card>

          <b-card class="m-0 p-0 border-0" body-class="m-1 p-0">

            <b-modal ref="nonfungiblemodal" v-model="modalNonFungible.show" hide-footer header-class="m-0 px-3 py-2" body-bg-variant="light" size="lg">
              <template #modal-title>{{ modalNonFungible.type.replace(/erc/, "ERC-") + ' Non-Fungible Token' }}</template>

              <b-form-group label="contract:" label-for="nonfungiblemodal-contract" label-size="sm" label-cols-sm="2" label-align-sm="right" class="mx-0 my-1 p-0">
                <b-input-group size="sm" class="w-100">
                  <b-form-input type="text" readonly size="sm" id="nonfungiblemodal-contract" v-model="modalNonFungible.contract"></b-form-input>
                  <b-input-group-append>
                    <b-button size="sm" :href="explorer + 'token/' + modalNonFungible.contract + '#code'" variant="link" v-b-popover.hover.ds500="'View in explorer'" target="_blank" class="m-0 ml-1 p-0"><b-icon-link45deg shift-v="+1" font-scale="0.95"></b-icon-link45deg></b-button>
                  </b-input-group-append>
                </b-input-group>
              </b-form-group>

              <b-form-group label="tokenId:" label-for="nonfungiblemodal-tokenid" label-size="sm" label-cols-sm="2" label-align-sm="right" class="mx-0 my-1 p-0">
                <b-input-group size="sm" class="w-100">
                  <b-form-input type="text" readonly size="sm" id="nonfungiblemodal-tokenid" v-model="modalNonFungible.tokenId"></b-form-input>
                  <b-input-group-append>
                    <b-button size="sm" :href="nonFungibleViewerURL(modalNonFungible.contract, modalNonFungible.tokenId)" variant="link" v-b-popover.hover.ds500="'View in NFT viewer'" target="_blank" class="m-0 ml-1 p-0"><b-icon-link45deg shift-v="+1" font-scale="0.95"></b-icon-link45deg></b-button>
                  </b-input-group-append>
                </b-input-group>
              </b-form-group>
              <font size="-1">
                <!-- <b-table small fixed striped :fields="erc20EventsFields" :items="pagedSortedFilteredERC20Events" show-empty empty-html="Click [Retrieve] above" head-variant="light" class="mt-1"> -->
                <b-table small fixed striped :items="modalNonFungible.logs" show-empty head-variant="light" class="mt-1">
                  <template #cell(log)="data">
                    <font size="-2" style="overflow-wrap: break-word;">{{ data.item.log }}</font>
                  </template>
                </b-table>
              </font>

              name: {{ modalNonFungible.name }}
              description: {{ modalNonFungible.description }}
              image: {{ modalNonFungible.image }}
              attributes: {{ modalNonFungible.attributes }}
            </b-modal>

            <!-- HOME: -->
            <b-card v-if="settings.tabIndex == 0" header="Home" no-body class="m-0 p-0">
              <b-card-body class="mt-1 p-1">
                <h5>Welcome</h5>
                This app is an explorer for <b-link href="https://eips.ethereum.org/EIPS/eip-20" target="_blank">ERC-20</b-link> Fungible, and <b-link href="https://eips.ethereum.org/EIPS/eip-721" target="_blank">ERC-721</b-link> and <b-link href="https://eips.ethereum.org/EIPS/eip-1155" target="_blank">ERC-1155</b-link> Non-Fungible tokens.
                <br />
                <h6 class="mt-4">How This Works</h6>
                <ul>
                  <li>Enter a token contact address, or select from one of the samples token contracts from the dropdown list</li>
                  <li>This app then scans for event logs using the <b-link href="https://docs.ethers.org/v5/api/providers/provider/#Provider-getLogs" target="_blank">getLogs(filter)</b-link> web3 call</li>
                  <li>These event logs are then processed for presentation in this app</li>
                </ul>
                <h6 class="mt-4">Requirements</h6>
                <ul>
                  <li>Web3 enabled desktop browser, connected to an Ethereum-Virtual-Machine compatible chain</li>
                  <li>Use one of these web3 browser plug-ins if necessary: MetaMask @ <b-link href="https://metamask.io/" target="_blank">https://metamask.io/</b-link>, or Rabby @ <b-link href="https://rabby.io/" target="_blank">https://rabby.io/</b-link></li>
                </ul>
                <h6 class="mt-4">References</h6>
                <ul>
                  <li>App UI: <b-link href="https://bokkypoobah.github.io/GetStartedWithDevelopingInEthereum/" target="_blank">https://bokkypoobah.github.io/GetStartedWithDevelopingInEthereum/</b-link></li>
                  <li>GitHub: <b-link href="https://github.com/bokkypoobah/GetStartedWithDevelopingInEthereum" target="_blank">https://github.com/bokkypoobah/GetStartedWithDevelopingInEthereum</b-link></li>
                  <li>Main app source code: <b-link href="https://github.com/bokkypoobah/GetStartedWithDevelopingInEthereum/blob/main/docs/index.html" target="_blank">https://github.com/bokkypoobah/GetStartedWithDevelopingInEthereum/blob/main/docs/index.html</b-link></li>
                </ul>
                <h6 class="mt-4">Running Locally</h6>
                <ul>
                  <li>In a folder on your computer, <b>git clone <b-link href="https://github.com/bokkypoobah/GetStartedWithDevelopingInEthereum" target="_blank">https://github.com/bokkypoobah/GetStartedWithDevelopingInEthereum</b-link></b></li>
                  <li>Run a tool like <b-link href="https://www.npmjs.com/package/anywhere" target="_blank">anywhere</b-link> in the <b>./docs</b> subdirectory of the folder created above</li>
                </ul>
                <h6 class="mt-4">Troubleshooting</h6>
                <ul>
                  <li>If this dapp is not receiving the latest Mainnet data, reset your MetaMask web3 connection using <b>Settings</b> -> <b>Advanced</b> -> <b>Clear activity and nonce data</b></li>
                  <li>Reset this dapp data by removing LocalStorage entries with the keys beginning with <b>approval</b></li>
                </ul>
              </b-card-body>
            </b-card>

            <!-- ERC-20: -->
            <b-card v-if="settings.tabIndex == 1" header="ERC-20" class="m-0 p-0">
              <b-form-group label="contract:" label-for="erc20-contract" label-size="lg" label-class="font-weight-bold pt-0" label-cols-sm="2" label-align-sm="right" :state="!settings.erc20.contract || validAddress(settings.erc20.contract)" :invalid-feedback="'Invalid address'" :description="erc20Description" class="mx-0 my-1 p-0">
                <b-input-group size="sm" class="w-50">
                  <b-form-input type="text" size="sm" id="erc20-contract" v-model="settings.erc20.contract" @change="saveSettings" placeholder="Enter token contract address, or select from dropdown"></b-form-input>
                  <b-input-group-append>
                    <b-button size="sm" :disabled="!validAddress(settings.erc20.contract)" @click="retrieveERC20" variant="primary">Retrieve</b-button>
                    <b-dropdown size="sm" id="dropdown-left" text="" variant="link" v-b-popover.hover.ds500="'Some sample token contracts'" class="m-0 ml-1 p-0">
                      <b-dropdown-item v-if="sampleContracts('erc20').length == 0" disabled>No sample contracts on this network</b-dropdown-item>
                      <div v-for="(item, index) of sampleContracts('erc20')" v-bind:key="index">
                        <b-dropdown-item @click="settings.erc20.contract = item.contract; saveSettings();">{{ index }}. {{ item.contract.substring(0, 8) + '...' + item.contract.slice(-6) + ' ' + item.name }}</b-dropdown-item>
                      </div>
                    </b-dropdown>
                    <b-button :disabled="!settings.erc20.contract || !validAddress(settings.erc20.contract)" @click="copyToClipboard(settings.erc20.contract);" variant="link" v-b-popover.hover.ds500="'Copy ERC-20 contract address to clipboard'" class="m-0 ml-3 p-0"><b-icon-clipboard shift-v="+1" font-scale="1.1"></b-icon-clipboard></b-button>
                    <b-button size="sm" :disabled="!validAddress(settings.erc20.contract)" :href="explorer + 'token/' + settings.erc20.contract + '#code'" variant="link" v-b-popover.hover.ds500="'View in explorer'" target="_blank" class="m-0 ml-2 p-0"><b-icon-link45deg shift-v="-4" font-scale="1.1"></b-icon-link45deg></b-button>
                  </b-input-group-append>
                </b-input-group>
              </b-form-group>
              <!-- <b-form-group label="" label-size="sm" label-cols-sm="2" label-align-sm="right" class="mx-0 my-1 p-0">
                <b-button size="sm" :disabled="!validAddress(settings.erc20.contract)" @click="retrieveERC20" variant="primary">Retrieve</b-button>
              </b-form-group> -->
              <!-- <b-form-group label="symbol:" label-for="erc20-symbol" label-size="sm" label-cols-sm="2" label-align-sm="right" class="mx-0 my-1 p-0">
                <b-form-input type="text" size="sm" readonly id="erc20-symbol" :value="erc20.symbol" class="w-25"></b-form-input>
              </b-form-group> -->
              <!-- <b-form-group label="name:" label-for="erc20-name" label-size="sm" label-cols-sm="2" label-align-sm="right" class="mx-0 my-1 p-0">
                <b-form-input type="text" size="sm" readonly id="erc20-name" :value="erc20.name" class="w-25"></b-form-input>
              </b-form-group> -->
              <!-- <b-form-group label="decimals:" label-for="erc20-decimals" label-size="sm" label-cols-sm="2" label-align-sm="right" class="mx-0 my-1 p-0">
                <b-form-input type="text" size="sm" readonly id="erc20-decimals" :value="erc20.decimals" class="w-25"></b-form-input>
              </b-form-group> -->
              <!-- <b-form-group label="totalSupply:" label-for="erc20-totalsupply" label-size="sm" label-cols-sm="2" label-align-sm="right" :description="erc20.totalSupply ? 'Raw value: ' + formatNumber(erc20.totalSupply) : null" class="mx-0 my-1 p-0">
                <b-form-input type="text" size="sm" readonly id="erc20-totalsupplydecimals" :value="formatDecimals(erc20.totalSupply, erc20.decimals)" class="w-25"></b-form-input>
              </b-form-group> -->

              <b-form-group label="events:" label-size="lg" label-class="font-weight-bold pt-0" label-cols-sm="2" label-align-sm="right" class="mx-0 mt-3 mb-1 p-0">
                <div class="d-flex flex-wrap m-0 p-0">
                  <div class="mt-0 pr-1" style="width: 20.0rem;">
                    <b-form-input type="text" size="sm" v-model.trim="settings.erc20.eventsTable.filter" @change="saveSettings" debounce="600" placeholder="🔍 address/blocknumber/txhash regex"></b-form-input>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pr-1">
                    <b-button size="sm" @click="retrieveTimestamps(pagedSortedFilteredERC20Events.map(e => e.blockNumber))" variant="link" v-b-popover.hover.ds500="'Retrieve timestamps for events below'"><b-icon-clock-history shift-v="+1" font-scale="1.2"></b-icon-clock-history></b-button>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc20.eventsTable.sortOption" @change="saveSettings" :options="eventsSortOptions" v-b-popover.hover.bottom="'Yeah. Sort'"></b-form-select>
                  </div>
                  <div class="mt-0 pl-1">
                    <font size="-2" v-b-popover.hover.bottom="'# filtered / total events'">{{ formatNumber(sortedFilteredERC20Events.length) + '/' + formatNumber(erc20.events.length) }}</font>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-pagination size="sm" v-model="settings.erc20.eventsTable.currentPage" @input="saveSettings" :total-rows="sortedFilteredERC20Events.length" :per-page="settings.erc20.eventsTable.pageSize" style="height: 0;"></b-pagination>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc20.eventsTable.pageSize" @change="saveSettings();" :options="pageSizes" v-b-popover.hover.bottom="'Yeah. Page size'"></b-form-select>
                  </div>
                </div>
                <b-table small fixed striped :fields="erc20EventsFields" :items="pagedSortedFilteredERC20Events" show-empty empty-html="Click [Retrieve] above" head-variant="light" class="mt-1">
                  <template #cell(number)="data">
                      <font size="-1" class="text-muted">{{ parseInt(data.index) + ((settings.erc20.eventsTable.currentPage - 1) * settings.erc20.eventsTable.pageSize) + 1 }}</font>
                  </template>
                  <template #cell(when)="data">
                    <font size="-1">
                      <b-link size="sm" :href="explorer + 'tx/' + data.item.txHash + '#eventlog#' + data.item.logIndex" variant="link" v-b-popover.hover.ds500="(timestamps[chainId] && timestamps[chainId][data.item.blockNumber]) ? ('Block ' + formatNumber(data.item.blockNumber)) : 'blockNumber:txIndex'" target="_blank">
                        <span v-if="timestamps[chainId] && timestamps[chainId][data.item.blockNumber]">
                          {{ formatTimestamp(timestamps[chainId][data.item.blockNumber]) }}
                        </span>
                        <span v-else>
                          {{ data.item.blockNumber + ':' + data.item.txIndex }}
                        </span>
                      </b-link>
                      <font size="-1" v-b-popover.hover.ds500="'logIndex'" class="text-muted">{{ data.item.logIndex }}</font>
                      <font size="-1" v-b-popover.hover.ds500="'txHash'" class="text-muted">{{ data.item.txHash.substring(0, 8) + '...' + data.item.txHash.slice(-6) }}</font>
                    </font>
                  </template>
                  <template #cell(fromOwner)="data">
                    <div v-if="data.item.name == 'Transfer'">
                      <b-link size="sm" :href="explorer + 'address/' + data.item.from" variant="link" v-b-popover.hover.ds500="'Transfer from ' + data.item.from" target="_blank">
                        {{ data.item.from.substring(0, 8) + '...' + data.item.from.slice(-6) }}
                      </b-link>
                    </div>
                    <div v-else-if="data.item.name == 'Approval'">
                      <b-link size="sm" :href="explorer + 'address/' + data.item.owner" variant="link" v-b-popover.hover.ds500="'Approval owner ' + data.item.owner" target="_blank">
                        {{ data.item.owner.substring(0, 8) + '...' + data.item.owner.slice(-6) }}
                      </b-link>
                    </div>
                  </template>
                  <template #cell(toSpender)="data">
                    <div v-if="data.item.name == 'Transfer'">
                      <b-link size="sm" :href="explorer + 'address/' + data.item.to" variant="link" v-b-popover.hover.ds500="'Transfer to ' + data.item.to" target="_blank">
                        {{ data.item.to.substring(0, 8) + '...' + data.item.to.slice(-6) }}
                      </b-link>
                    </div>
                    <div v-else-if="data.item.name == 'Approval'">
                      <b-link size="sm" :href="explorer + 'address/' + data.item.spender" variant="link" v-b-popover.hover.ds500="'Approval spender ' + data.item.spender" target="_blank">
                        {{ data.item.spender.substring(0, 8) + '...' + data.item.spender.slice(-6) }}
                      </b-link>
                    </div>
                  </template>
                  <template #cell(tokens)="data">
                    <font size="-2" class="text-muted">
                      {{ formatNumber(data.item.tokens) }}
                    </font>
                    {{ formatDecimals(data.item.tokens, erc20.decimals) }}
                  </template>
                </b-table>
              </b-form-group>

              <b-form-group label="balances:" label-size="lg" label-class="font-weight-bold pt-0" label-cols-sm="2" label-align-sm="right" class="mx-0 mt-3 mb-1 p-0">
                <div class="d-flex flex-wrap m-0 p-0">
                  <div class="mt-0 pr-1" style="width: 20.0rem;">
                    <b-form-input type="text" size="sm" v-model.trim="settings.erc20.balancesTable.filter" @change="saveSettings" debounce="600" placeholder="🔍 address/blocknumber/txhash regex"></b-form-input>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pr-1">
                    <b-button size="sm" @click="retrieveTimestamps(pagedSortedFilteredERC20Balances.map(e => e.blockNumber))" variant="link" v-b-popover.hover.ds500="'Retrieve timestamps for balances below'"><b-icon-clock-history shift-v="+1" font-scale="1.2"></b-icon-clock-history></b-button>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc20.balancesTable.sortOption" @change="saveSettings" :options="erc20BalancesSortOptions" v-b-popover.hover.bottom="'Yeah. Sort'"></b-form-select>
                  </div>
                  <div class="mt-0 pl-1">
                    <font size="-2" v-b-popover.hover.bottom="'# filtered / total events'">{{ formatNumber(sortedFilteredERC20Balances.length) + '/' + formatNumber(erc20.balances.length) }}</font>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-pagination size="sm" v-model="settings.erc20.balancesTable.currentPage" @input="saveSettings" :total-rows="sortedFilteredERC20Balances.length" :per-page="settings.erc20.balancesTable.pageSize" style="height: 0;"></b-pagination>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc20.balancesTable.pageSize" @change="saveSettings();" :options="pageSizes" v-b-popover.hover.bottom="'Yeah. Page size'"></b-form-select>
                  </div>
                </div>
                <b-table small fixed striped :fields="erc20BalancesFields" :items="pagedSortedFilteredERC20Balances" show-empty empty-html="Click [Retrieve] above" head-variant="light" class="mt-1">
                  <template #cell(number)="data">
                      <font size="-1" class="text-muted">{{ parseInt(data.index) + ((settings.erc20.balancesTable.currentPage - 1) * settings.erc20.balancesTable.pageSize) + 1 }}</font>
                  </template>
                  <template #cell(latestUpdate)="data">
                    <b-link size="sm" :href="explorer + 'tx/' + data.item.txHash + '#eventlog#' + data.item.logIndex" variant="link" v-b-popover.hover.ds500="(timestamps[chainId] && timestamps[chainId][data.item.blockNumber]) ? ('Block ' + formatNumber(data.item.blockNumber)) : 'blockNumber:txIndex'" target="_blank">
                      <font size="-1">
                        <span v-if="timestamps[chainId] && timestamps[chainId][data.item.blockNumber]">
                          {{ formatTimestamp(timestamps[chainId][data.item.blockNumber]) }}
                        </span>
                        <span v-else>
                          {{ data.item.blockNumber + ':' + data.item.txIndex }}
                        </span>
                      </font>
                    </b-link>
                    <font size="-1" v-b-popover.hover.ds500="'logIndex'" class="text-muted">{{ data.item.logIndex }}</font>
                    <font size="-1" v-b-popover.hover.ds500="'txHash'" class="text-muted">{{ data.item.txHash.substring(0, 8) + '...' + data.item.txHash.slice(-6) }}</font>
                  </template>
                  <template #cell(owner)="data">
                    <b-link size="sm" :href="explorer + 'token/' + settings.erc20.contract + '?a=' + data.item.owner" variant="link" v-b-popover.hover.ds500="data.item.owner" target="_blank">
                      {{ data.item.owner.substring(0, 8) + '...' + data.item.owner.slice(-6) }}
                    </b-link>
                  </template>
                  <template #cell(balance)="data">
                    <font size="-2" class="text-muted">
                      {{ formatNumber(data.item.tokens) }}
                    </font>
                    {{ formatDecimals(data.item.tokens, erc20.decimals) }}
                  </template>
                </b-table>
              </b-form-group>

              <b-form-group label="allowances:" label-size="lg" label-class="font-weight-bold pt-0" label-cols-sm="2" label-align-sm="right" class="mx-0 mt-3 mb-1 p-0">
                <div class="d-flex flex-wrap m-0 p-0">
                  <div class="mt-0 pr-1" style="width: 20.0rem;">
                    <b-form-input type="text" size="sm" v-model.trim="settings.erc20.allowancesTable.filter" @change="saveSettings" debounce="600" placeholder="🔍 address/blocknumber/txhash regex"></b-form-input>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pr-1">
                    <b-button size="sm" @click="retrieveTimestamps(pagedSortedFilteredAllowances.map(e => e.blockNumber))" variant="link" v-b-popover.hover.ds500="'Retrieve timestamps for allowances below'"><b-icon-clock-history shift-v="+1" font-scale="1.2"></b-icon-clock-history></b-button>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc20.allowancesTable.sortOption" @change="saveSettings" :options="erc20AllowancesSortOptions" v-b-popover.hover.bottom="'Yeah. Sort'"></b-form-select>
                  </div>
                  <div class="mt-0 pl-1">
                    <font size="-2" v-b-popover.hover.bottom="'# filtered / total events'">{{ formatNumber(sortedFilteredERC20Allowances.length) + '/' + formatNumber(erc20.allowances.length) }}</font>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-pagination size="sm" v-model="settings.erc20.allowancesTable.currentPage" @input="saveSettings" :total-rows="sortedFilteredERC20Allowances.length" :per-page="settings.erc20.allowancesTable.pageSize" style="height: 0;"></b-pagination>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc20.allowancesTable.pageSize" @change="saveSettings();" :options="pageSizes" v-b-popover.hover.bottom="'Yeah. Page size'"></b-form-select>
                  </div>
                </div>
                <b-table small fixed striped :fields="erc20AllowancesFields" :items="pagedSortedFilteredAllowances" show-empty empty-html="Click [Retrieve] above" head-variant="light" class="mt-1">
                  <template #cell(number)="data">
                      <font size="-1" class="text-muted">{{ parseInt(data.index) + ((settings.erc20.allowancesTable.currentPage - 1) * settings.erc20.allowancesTable.pageSize) + 1 }}</font>
                  </template>
                  <template #cell(latestUpdate)="data">
                    <font size="-1">
                      <b-link size="sm" :href="explorer + 'tx/' + data.item.txHash + '#eventlog#' + data.item.logIndex" variant="link" v-b-popover.hover.ds500="(timestamps[chainId] && timestamps[chainId][data.item.blockNumber]) ? ('Block ' + formatNumber(data.item.blockNumber)) : 'blockNumber:txIndex.logIndex'" target="_blank">
                        <span v-if="timestamps[chainId] && timestamps[chainId][data.item.blockNumber]">
                          {{ formatTimestamp(timestamps[chainId][data.item.blockNumber]) }}
                        </span>
                        <span v-else>
                          {{ data.item.blockNumber + ':' + data.item.txIndex }}
                        </span>
                      </b-link>
                      <font size="-1" v-b-popover.hover.ds500="'logIndex'" class="text-muted">{{ data.item.logIndex }}</font>
                      <font size="-1" v-b-popover.hover.ds500="'txHash'" class="text-muted">{{ data.item.txHash.substring(0, 8) + '...' + data.item.txHash.slice(-6) }}</font>
                    </font>
                  </template>
                  <template #cell(owner)="data">
                    <b-link size="sm" :href="explorer + 'token/' + settings.erc20.contract + '?a=' + data.item.owner" variant="link" v-b-popover.hover.ds500="data.item.owner" target="_blank">
                      {{ data.item.owner.substring(0, 8) + '...' + data.item.owner.slice(-6) }}
                    </b-link>
                  </template>
                  <template #cell(spender)="data">
                    <b-link size="sm" :href="explorer + 'token/' + settings.erc20.contract + '?a=' + data.item.spender" variant="link" v-b-popover.hover.ds500="data.item.spender" target="_blank">
                      {{ data.item.spender.substring(0, 8) + '...' + data.item.spender.slice(-6) }}
                    </b-link>
                  </template>
                  <template #cell(tokens)="data">
                    <font size="-2" class="text-muted">
                      {{ formatNumber(data.item.tokens) }}
                    </font>
                    <b-link size="sm" :href="explorer + 'tx/' + data.item.txHash + '#eventlog#' + data.item.logIndex" variant="link" v-b-popover.hover.ds500="formatDecimals(data.item.tokens, data.item.decimals)" target="_blank">
                      <span v-if="data.item.toString().length > 30">
                        &infin;
                      </span>
                      <span v-else>
                        {{ formatDecimals(data.item.tokens, erc20.decimals) }}
                      </span>
                    </b-link>
                  </template>
                </b-table>
              </b-form-group>

              <b-form-group label="balanceOf:" label-size="lg" label-class="font-weight-bold pt-0" label-cols-sm="2" label-align-sm="right" class="mx-0 mt-3 mb-1 p-0">
                <b-card bg-variant="light">
                  <b-form-group label="owner:" label-for="erc20-balanceof-owner" label-size="sm" label-cols-sm="3" label-align-sm="right" :state="!settings.erc20.balanceOf.owner || validAddress(settings.erc20.balanceOf.owner)" :invalid-feedback="'Invalid address'" class="mx-0 my-1 p-0">
                    <b-input-group size="sm" class="w-50">
                      <b-form-input type="text" size="sm" id="erc20-balanceof-owner" v-model="settings.erc20.balanceOf.owner" @change="saveSettings" placeholder="owner"></b-form-input>
                      <b-input-group-append>
                        <b-button size="sm" :disabled="!validAddress(settings.erc20.balanceOf.owner)" :href="explorer + 'address/' + settings.erc20.balanceOf.owner" variant="link" v-b-popover.hover.ds500="'View in explorer'" target="_blank" class="m-0 ml-1 p-0"><b-icon-link45deg shift-v="+1" font-scale="0.95"></b-icon-link45deg></b-button>
                      </b-input-group-append>
                    </b-input-group>
                  </b-form-group>
                  <b-form-group label="" label-size="sm" label-cols-sm="3" label-align-sm="right" class="mx-0 my-1 p-0">
                    <b-button size="sm" :disabled="!validAddress(settings.erc20.contract) || !validAddress(settings.erc20.balanceOf.owner)" @click="retrieveERC20BalanceOf" variant="primary">Retrieve</b-button>
                  </b-form-group>
                  <b-form-group label="balanceOf(owner):" label-for="erc20-balanceof-balance" label-size="sm" label-cols-sm="3" label-align-sm="right" :description="erc20.balanceOf ? 'Raw value: ' + formatNumber(erc20.balanceOf) : null" class="mx-0 my-1 p-0">
                    <b-form-input type="text" size="sm" readonly id="erc20-balanceof-balance" :value="formatDecimals(erc20.balanceOf, erc20.decimals)" class="w-25"></b-form-input>
                  </b-form-group>
                </b-card>
              </b-form-group>

              <b-form-group label="allowance:" label-size="lg" label-class="font-weight-bold pt-0" label-cols-sm="2" label-align-sm="right" class="mx-0 mt-3 mb-1 p-0">
                <b-card bg-variant="light">
                  <b-form-group label="owner:" label-for="erc20-allowance-owner" label-size="sm" label-cols-sm="3" label-align-sm="right" :state="!settings.erc20.allowance.owner || validAddress(settings.erc20.allowance.owner)" :invalid-feedback="'Invalid address'" class="mx-0 my-1 p-0">
                    <b-input-group size="sm" class="w-50">
                      <b-form-input type="text" size="sm" id="erc20-allowance-owner" v-model="settings.erc20.allowance.owner" @change="saveSettings" placeholder="owner"></b-form-input>
                      <b-input-group-append>
                        <b-button size="sm" :disabled="!validAddress(settings.erc20.allowance.owner)" :href="explorer + 'address/' + settings.erc20.allowance.owner" variant="link" v-b-popover.hover.ds500="'View in explorer'" target="_blank" class="m-0 ml-1 p-0"><b-icon-link45deg shift-v="+1" font-scale="0.95"></b-icon-link45deg></b-button>
                      </b-input-group-append>
                    </b-input-group>
                  </b-form-group>
                  <b-form-group label="spender:" label-for="erc20-allowance-spender" label-size="sm" label-cols-sm="3" label-align-sm="right" :state="!settings.erc20.allowance.spender || validAddress(settings.erc20.allowance.spender)" :invalid-feedback="'Invalid address'" class="mx-0 my-1 p-0">
                    <b-input-group size="sm" class="w-50">
                      <b-form-input type="text" size="sm" id="erc20-allowance-spender" v-model="settings.erc20.allowance.spender" @change="saveSettings" placeholder="spender"></b-form-input>
                      <b-input-group-append>
                        <b-button size="sm" :disabled="!validAddress(settings.erc20.allowance.spender)" :href="explorer + 'address/' + settings.erc20.allowance.spender" variant="link" v-b-popover.hover.ds500="'View in explorer'" target="_blank" class="m-0 ml-1 p-0"><b-icon-link45deg shift-v="+1" font-scale="0.95"></b-icon-link45deg></b-button>
                      </b-input-group-append>
                    </b-input-group>
                  </b-form-group>
                  <b-form-group label="" label-size="sm" label-cols-sm="3" label-align-sm="right" class="mx-0 my-1 p-0">
                    <b-button size="sm" :disabled="!validAddress(settings.erc20.contract) || !validAddress(settings.erc20.allowance.owner) || !validAddress(settings.erc20.allowance.spender)" @click="retrieveERC20Allowance" variant="primary">Retrieve</b-button>
                  </b-form-group>
                  <b-form-group label="allowance(owner, spender):" label-for="erc20-allowance-tokens" label-size="sm" label-cols-sm="3" label-align-sm="right" :description="erc20.allowance ? 'Raw value: ' + formatNumber(erc20.allowance) : null" class="mx-0 my-1 p-0">
                    <b-form-input type="text" size="sm" readonly id="erc20-allowance-tokens" :value="formatDecimals(erc20.allowance, erc20.decimals)" class="w-25"></b-form-input>
                  </b-form-group>
                </b-card>
              </b-form-group>

              <b-form-group label="transfer:" label-size="lg" label-class="font-weight-bold pt-0" label-cols-sm="2" label-align-sm="right" class="mx-0 mt-3 mb-1 p-0">
                <b-card bg-variant="light">
                  <b-form-group label="msg.sender:" label-for="erc20-transfer-coinbase" label-size="sm" label-cols-sm="3" label-align-sm="right" class="mx-0 my-1 p-0">
                    <b-input-group size="sm" class="w-50">
                      <b-form-input type="text" size="sm" readonly id="erc20-transfer-coinbase" v-model="coinbase"></b-form-input>
                      <b-input-group-append>
                        <b-button size="sm" :href="explorer + 'token/' + settings.erc20.contract + '?a=' + coinbase" variant="link" v-b-popover.hover.ds500="'View in explorer'" target="_blank" class="m-0 ml-1 p-0"><b-icon-link45deg shift-v="+1" font-scale="0.95"></b-icon-link45deg></b-button>
                      </b-input-group-append>
                    </b-input-group>
                  </b-form-group>
                  <b-form-group label="" label-size="sm" label-cols-sm="3" label-align-sm="right" class="mx-0 my-1 p-0">
                    <b-button size="sm" @click="retrieveERC20" variant="primary">Retrieve</b-button>
                  </b-form-group>
                  <b-form-group label="balanceOf(msg.sender):" label-for="erc20-transfer-coinbasebalanceof" label-size="sm" label-cols-sm="3" label-align-sm="right" :description="erc20.coinbaseBalanceOf ? 'Raw value: ' + formatNumber(erc20.coinbaseBalanceOf) : 'Click [Retrieve] above'" class="mx-0 my-1 p-0">
                    <b-form-input type="text" size="sm" readonly id="erc20-transfer-coinbasebalanceof" :value="formatDecimals(erc20.coinbaseBalanceOf, erc20.decimals)" class="w-25"></b-form-input>
                  </b-form-group>
                  <b-form-group label="to:" label-for="erc20-transfer-to" label-size="sm" label-cols-sm="3" label-align-sm="right" :state="!settings.erc20.transfer.to || validAddress(settings.erc20.transfer.to)" :invalid-feedback="'Invalid address'" class="mx-0 my-1 p-0">
                    <b-input-group size="sm" class="w-50">
                      <b-form-input type="text" size="sm" id="erc20-transfer-to" v-model="settings.erc20.transfer.to" @change="saveSettings" placeholder="to"></b-form-input>
                      <b-input-group-append>
                        <b-button size="sm" :disabled="!validAddress(settings.erc20.transfer.to)" :href="explorer + 'address/' + settings.erc20.transfer.to" variant="link" v-b-popover.hover.ds500="'View in explorer'" target="_blank" class="m-0 ml-1 p-0"><b-icon-link45deg shift-v="+1" font-scale="0.95"></b-icon-link45deg></b-button>
                      </b-input-group-append>
                    </b-input-group>
                  </b-form-group>
                  <b-form-group label="tokens:" label-for="erc20-transfer-tokens" label-size="sm" label-cols-sm="3" label-align-sm="right" :state="!settings.erc20.transfer.tokens || validNumber(settings.erc20.transfer.tokens)" :invalid-feedback="'Invalid number'" class="mx-0 my-1 p-0">
                    <b-form-input type="text" size="sm" id="erc20-transfer-tokens" v-model="settings.erc20.transfer.tokens" @change="saveSettings" class="w-25"></b-form-input>
                  </b-form-group>
                  <b-form-group label="" label-size="sm" label-cols-sm="3" label-align-sm="right" class="mx-0 my-1 p-0">
                    <b-button size="sm" :disabled="!validAddress(settings.erc20.contract) || !validAddress(settings.erc20.transfer.to) || !validNumber(settings.erc20.transfer.tokens)" @click="transferERC20" variant="warning">Transfer</b-button>
                  </b-form-group>
                  <b-form-group label="txHash:" label-for="erc20-transfer-txhash" label-size="sm" label-cols-sm="3" label-align-sm="right" class="mx-0 my-1 p-0">
                    <b-input-group size="sm" class="w-75">
                      <b-form-input type="text" size="sm" readonly id="erc20-transfer-txhash" v-model="erc20.transferTx.txHash"></b-form-input>
                      <b-input-group-append>
                        <b-button size="sm" :disabled="!erc20.transferTx.txHash" :href="explorer + 'tx/' + erc20.transferTx.txHash" variant="link" v-b-popover.hover.ds500="'View in explorer'" target="_blank" class="m-0 ml-1 p-0"><b-icon-link45deg shift-v="+1" font-scale="0.95"></b-icon-link45deg></b-button>
                      </b-input-group-append>
                    </b-input-group>
                  </b-form-group>
                  <b-form-group label="results:" label-for="erc20-transfer-results" label-size="sm" label-cols-sm="3" label-align-sm="right" class="mx-0 my-1 p-0">
                    <b-form-textarea size="sm" plaintext id="erc20-transfer-results" :value="erc20.transferTx.result" rows="3" max-rows="10" style="background: white; " class="w-100"></b-form-textarea>
                  </b-form-group>
                </b-card>
              </b-form-group>

              <b-form-group label="approve:" label-size="lg" label-class="font-weight-bold pt-0" label-cols-sm="2" label-align-sm="right" class="mx-0 mt-3 mb-1 p-0">
                <b-card bg-variant="light">
                  <b-form-group label="msg.sender:" label-for="erc20-approve-coinbase" label-size="sm" label-cols-sm="3" label-align-sm="right" class="mx-0 my-1 p-0">
                    <b-input-group size="sm" class="w-50">
                      <b-form-input type="text" size="sm" readonly id="erc20-approve-coinbase" v-model="coinbase"></b-form-input>
                      <b-input-group-append>
                        <b-button size="sm" :href="explorer + 'token/' + settings.erc20.contract + '?a=' + coinbase" variant="link" v-b-popover.hover.ds500="'View in explorer'" target="_blank" class="m-0 ml-1 p-0"><b-icon-link45deg shift-v="+1" font-scale="0.95"></b-icon-link45deg></b-button>
                      </b-input-group-append>
                    </b-input-group>
                  </b-form-group>
                  <b-form-group label="spender:" label-for="erc20-approve-spender" label-size="sm" label-cols-sm="3" label-align-sm="right" :state="!settings.erc20.approve.spender || validAddress(settings.erc20.approve.spender)" :invalid-feedback="'Invalid address'" class="mx-0 my-1 p-0">
                    <b-input-group size="sm" class="w-50">
                      <b-form-input type="text" size="sm" id="erc20-approve-spender" v-model="settings.erc20.approve.spender" @change="saveSettings" placeholder="spender"></b-form-input>
                      <b-input-group-append>
                        <b-button size="sm" :disabled="!validAddress(settings.erc20.approve.spender)" :href="explorer + 'address/' + settings.erc20.approve.spender" variant="link" v-b-popover.hover.ds500="'View in explorer'" target="_blank" class="m-0 ml-1 p-0"><b-icon-link45deg shift-v="+1" font-scale="0.95"></b-icon-link45deg></b-button>
                      </b-input-group-append>
                    </b-input-group>
                  </b-form-group>
                  <b-form-group label="tokens:" label-for="erc20-approve-tokens" label-size="sm" label-cols-sm="3" label-align-sm="right" :state="!settings.erc20.approve.tokens || validNumber(settings.erc20.approve.tokens)" :invalid-feedback="'Invalid number'"class="mx-0 my-1 p-0">
                    <b-form-input type="text" size="sm" id="erc20-approve-tokens" v-model="settings.erc20.approve.tokens" @change="saveSettings"  placeholder="e.g., 1.2345" class="w-25"></b-form-input>
                  </b-form-group>
                  <b-form-group label="" label-size="sm" label-cols-sm="3" label-align-sm="right" class="mx-0 my-1 p-0">
                    <b-button size="sm" :disabled="!validAddress(settings.erc20.contract) || !validAddress(settings.erc20.approve.spender) || !validNumber(settings.erc20.approve.tokens)" @click="approveERC20" variant="warning">Approve</b-button>
                  </b-form-group>
                  <b-form-group label="txHash:" label-for="erc20-approve-txhash" label-size="sm" label-cols-sm="3" label-align-sm="right" class="mx-0 my-1 p-0">
                    <b-input-group size="sm" class="w-75">
                      <b-form-input type="text" size="sm" readonly id="erc20-approve-txhash" v-model="erc20.approveTx.txHash"></b-form-input>
                      <b-input-group-append>
                        <b-button size="sm" :disabled="!erc20.approveTx.txHash" :href="explorer + 'tx/' + erc20.approveTx.txHash" variant="link" v-b-popover.hover.ds500="'View in explorer'" target="_blank" class="m-0 ml-1 p-0"><b-icon-link45deg shift-v="+1" font-scale="0.95"></b-icon-link45deg></b-button>
                      </b-input-group-append>
                    </b-input-group>
                  </b-form-group>
                  <b-form-group label="results:" label-for="erc20-approve-results" label-size="sm" label-cols-sm="3" label-align-sm="right" class="mx-0 my-1 p-0">
                    <b-form-textarea size="sm" plaintext id="erc20-approve-results" :value="erc20.approveTx.result" rows="3" max-rows="10" style="background: white; " class="w-100"></b-form-textarea>
                  </b-form-group>
                </b-card>
              </b-form-group>

              <b-form-group label="transferfrom:" label-size="lg" label-class="font-weight-bold pt-0" label-cols-sm="2" label-align-sm="right" class="mx-0 mt-3 mb-1 p-0">
                <b-card bg-variant="light">
                  <b-form-group label="msg.sender:" label-for="erc20-transferfrom-coinbase" label-size="sm" label-cols-sm="3" label-align-sm="right" class="mx-0 my-1 p-0">
                    <b-input-group size="sm" class="w-50">
                      <b-form-input type="text" size="sm" readonly id="erc20-transferfrom-coinbase" v-model="coinbase"></b-form-input>
                      <b-input-group-append>
                        <b-button size="sm" :href="explorer + 'token/' + settings.erc20.contract + '?a=' + coinbase" variant="link" v-b-popover.hover.ds500="'View in explorer'" target="_blank" class="m-0 ml-1 p-0"><b-icon-link45deg shift-v="+1" font-scale="0.95"></b-icon-link45deg></b-button>
                      </b-input-group-append>
                    </b-input-group>
                  </b-form-group>
                  <b-form-group label="from:" label-for="erc20-transferfrom-from" label-size="sm" label-cols-sm="3" label-align-sm="right" :state="!settings.erc20.transferFrom.from || validAddress(settings.erc20.transferFrom.from)" :invalid-feedback="'Invalid address'" class="mx-0 my-1 p-0">
                    <b-input-group size="sm" class="w-50">
                      <b-form-input type="text" size="sm" id="erc20-transferfrom-from" v-model="settings.erc20.transferFrom.from" @change="saveSettings" placeholder="from"></b-form-input>
                      <b-input-group-append>
                        <b-button size="sm" :disabled="!validAddress(settings.erc20.transferFrom.from)" :href="explorer + 'address/' + settings.erc20.transferFrom.from" variant="link" v-b-popover.hover.ds500="'View in explorer'" target="_blank" class="m-0 ml-1 p-0"><b-icon-link45deg shift-v="+1" font-scale="0.95"></b-icon-link45deg></b-button>
                      </b-input-group-append>
                    </b-input-group>
                  </b-form-group>
                  <b-form-group label="to:" label-for="erc20-transferfrom-to" label-size="sm" label-cols-sm="3" label-align-sm="right" :state="!settings.erc20.transferFrom.to || validAddress(settings.erc20.transferFrom.to)" :invalid-feedback="'Invalid address'" class="mx-0 my-1 p-0">
                    <b-input-group size="sm" class="w-50">
                      <b-form-input type="text" size="sm" id="erc20-transferfrom-to" v-model="settings.erc20.transferFrom.to" @change="saveSettings" placeholder="to"></b-form-input>
                      <b-input-group-append>
                        <b-button size="sm" :disabled="!validAddress(settings.erc20.transferFrom.to)" :href="explorer + 'address/' + settings.erc20.transferFrom.to" variant="link" v-b-popover.hover.ds500="'View in explorer'" target="_blank" class="m-0 ml-1 p-0"><b-icon-link45deg shift-v="+1" font-scale="0.95"></b-icon-link45deg></b-button>
                      </b-input-group-append>
                    </b-input-group>
                  </b-form-group>
                  <b-form-group label="tokens:" label-for="erc20-transferfrom-tokens" label-size="sm" label-cols-sm="3" label-align-sm="right" :state="!settings.erc20.transferFrom.tokens || validNumber(settings.erc20.transferFrom.tokens)" :invalid-feedback="'Invalid number'"class="mx-0 my-1 p-0">
                    <b-form-input type="text" size="sm" id="erc20-transferfrom-tokens" v-model="settings.erc20.transferFrom.tokens" @change="saveSettings"  placeholder="e.g., 2.3456" class="w-25"></b-form-input>
                  </b-form-group>
                  <b-form-group label="" label-size="sm" label-cols-sm="3" label-align-sm="right" class="mx-0 my-1 p-0">
                    <b-button size="sm" :disabled="!validAddress(settings.erc20.contract) || !validAddress(settings.erc20.transferFrom.from) || !validAddress(settings.erc20.transferFrom.to) || !validNumber(settings.erc20.transferFrom.tokens)" @click="transferFromERC20" variant="warning">Transfer From</b-button>
                  </b-form-group>
                  <b-form-group label="txHash:" label-for="erc20-transferfrom-txhash" label-size="sm" label-cols-sm="3" label-align-sm="right" class="mx-0 my-1 p-0">
                    <b-input-group size="sm" class="w-75">
                      <b-form-input type="text" size="sm" readonly id="erc20-transferfrom-txhash" v-model="erc20.transferFromTx.txHash"></b-form-input>
                      <b-input-group-append>
                        <b-button size="sm" :disabled="!erc20.transferFromTx.txHash" :href="explorer + 'tx/' + erc20.transferFromTx.txHash" variant="link" v-b-popover.hover.ds500="'View in explorer'" target="_blank" class="m-0 ml-1 p-0"><b-icon-link45deg shift-v="+1" font-scale="0.95"></b-icon-link45deg></b-button>
                      </b-input-group-append>
                    </b-input-group>
                  </b-form-group>
                  <b-form-group label="results:" label-for="erc20-transferfrom-results" label-size="sm" label-cols-sm="3" label-align-sm="right" class="mx-0 my-1 p-0">
                    <b-form-textarea size="sm" plaintext id="erc20-transferfrom-results" :value="erc20.transferFromTx.result" rows="3" max-rows="10" style="background: white; " class="w-100"></b-form-textarea>
                  </b-form-group>
                </b-card>
              </b-form-group>
            </b-card>

            <!-- ERC-721: -->
            <b-card v-if="settings.tabIndex == 2" header="ERC-721" class="m-0 p-0">
              <b-form-group label="contract:" label-for="erc721-contract" label-size="lg" label-class="font-weight-bold pt-0" label-cols-sm="2" label-align-sm="right" :state="!settings.erc721.contract || validAddress(settings.erc721.contract)" :invalid-feedback="'Invalid address'" :description="erc721Description" class="mx-0 my-1 p-0">
                <b-input-group size="sm" class="w-50">
                  <b-form-input type="text" size="sm" id="erc721-contract" v-model="settings.erc721.contract" @change="saveSettings" placeholder="Enter token contract address, or select from dropdown"></b-form-input>
                  <b-input-group-append>
                    <b-button size="sm" :disabled="!validAddress(settings.erc721.contract)" @click="retrieveERC721" variant="primary">Retrieve</b-button>
                    <b-dropdown size="sm" id="dropdown-left" text="" variant="link" v-b-popover.hover.ds500="'Some sample token contracts'" class="m-0 ml-1 p-0">
                      <b-dropdown-item v-if="sampleContracts('erc721').length == 0" disabled>No sample contracts on this network</b-dropdown-item>
                      <div v-for="(item, index) of sampleContracts('erc721')" v-bind:key="index">
                        <b-dropdown-item @click="settings.erc721.contract = item.contract; saveSettings();">{{ index }}. {{ item.contract.substring(0, 8) + '...' + item.contract.slice(-6) + ' ' + item.name }}</b-dropdown-item>
                      </div>
                    </b-dropdown>
                    <b-button :disabled="!settings.erc721.contract || !validAddress(settings.erc721.contract)" @click="copyToClipboard(settings.erc721.contract);" variant="link" v-b-popover.hover.ds500="'Copy ERC-721 contract address to clipboard'" class="m-0 ml-3 p-0"><b-icon-clipboard shift-v="+1" font-scale="1.1"></b-icon-clipboard></b-button>
                    <b-button size="sm" :disabled="!validAddress(settings.erc721.contract)" :href="explorer + 'token/' + settings.erc721.contract + '#code'" variant="link" v-b-popover.hover.ds500="'View in explorer'" target="_blank" class="m-0 ml-2 p-0"><b-icon-link45deg shift-v="-4" font-scale="1.1"></b-icon-link45deg></b-button>
                  </b-input-group-append>
                </b-input-group>
              </b-form-group>
              <!-- <b-form-group label="" label-size="sm" label-cols-sm="2" label-align-sm="right" class="mx-0 my-1 p-0">
                <b-button size="sm" :disabled="!validAddress(settings.erc721.contract)" @click="retrieveERC721" variant="primary">Retrieve</b-button>
              </b-form-group> -->
              <!-- <b-form-group label="symbol:" label-for="erc721-symbol" label-size="sm" label-cols-sm="2" label-align-sm="right" class="mx-0 my-1 p-0">
                <b-form-input type="text" size="sm" readonly id="erc721-symbol" :value="erc721.symbol" class="w-25"></b-form-input>
              </b-form-group> -->

              <b-form-group label="events:" label-size="lg" label-class="font-weight-bold pt-0" label-cols-sm="2" label-align-sm="right" class="mx-0 mt-3 mb-1 p-0">
                <div class="d-flex flex-wrap m-0 p-0">
                  <div class="mt-0 pr-1" style="width: 20.0rem;">
                    <b-form-input type="text" size="sm" v-model.trim="settings.erc721.eventsTable.filter" @change="saveSettings" debounce="600" placeholder="🔍 address/blocknumber/txhash regex"></b-form-input>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pr-1">
                    <b-button size="sm" @click="retrieveTimestamps(pagedSortedFilteredERC721Events.map(e => e.blockNumber))" variant="link" v-b-popover.hover.ds500="'Retrieve timestamps for events below'"><b-icon-clock-history shift-v="+1" font-scale="1.2"></b-icon-clock-history></b-button>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc721.eventsTable.sortOption" @change="saveSettings" :options="eventsSortOptions" v-b-popover.hover.bottom="'Yeah. Sort'"></b-form-select>
                  </div>
                  <div class="mt-0 pl-1">
                    <font size="-2" v-b-popover.hover.bottom="'# filtered / total events'">{{ formatNumber(sortedFilteredERC721Events.length) + '/' + formatNumber(erc721.events.length) }}</font>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-pagination size="sm" v-model="settings.erc721.eventsTable.currentPage" @input="saveSettings" :total-rows="sortedFilteredERC721Events.length" :per-page="settings.erc721.eventsTable.pageSize" style="height: 0;"></b-pagination>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc721.eventsTable.pageSize" @change="saveSettings();" :options="pageSizes" v-b-popover.hover.bottom="'Yeah. Page size'"></b-form-select>
                  </div>
                </div>
                <b-table small fixed striped :fields="erc721EventsFields" :items="pagedSortedFilteredERC721Events" show-empty empty-html="Click [Retrieve] above" head-variant="light" class="mt-1">
                  <template #cell(number)="data">
                      <font size="-1" class="text-muted">{{ parseInt(data.index) + ((settings.erc721.eventsTable.currentPage - 1) * settings.erc721.eventsTable.pageSize) + 1 }}</font>
                  </template>
                  <template #cell(when)="data">
                    <font size="-1">
                      <b-link size="sm" :href="explorer + 'tx/' + data.item.txHash + '#eventlog#' + data.item.logIndex" variant="link" v-b-popover.hover.ds500="(timestamps[chainId] && timestamps[chainId][data.item.blockNumber]) ? ('Block ' + formatNumber(data.item.blockNumber)) : 'blockNumber:txIndex'" target="_blank">
                        <span v-if="timestamps[chainId] && timestamps[chainId][data.item.blockNumber]">
                          {{ formatTimestamp(timestamps[chainId][data.item.blockNumber]) }}
                        </span>
                        <span v-else>
                          {{ data.item.blockNumber + ':' + data.item.txIndex }}
                        </span>
                      </b-link>
                      <font size="-1" v-b-popover.hover.ds500="'logIndex'" class="text-muted">{{ data.item.logIndex }}</font>
                      <font size="-1" v-b-popover.hover.ds500="'txHash'" class="text-muted">{{ data.item.txHash.substring(0, 8) + '...' + data.item.txHash.slice(-6) }}</font>
                    </font>
                  </template>
                  <template #cell(fromOwner)="data">
                    <div v-if="data.item.name == 'Transfer'">
                      <b-link size="sm" :href="explorer + 'address/' + data.item.from" variant="link" v-b-popover.hover.ds500="'Transfer from ' + data.item.from" target="_blank">
                        {{ data.item.from.substring(0, 8) + '...' + data.item.from.slice(-6) }}
                      </b-link>
                    </div>
                    <div v-else-if="data.item.name == 'Approval'">
                      <b-link size="sm" :href="explorer + 'address/' + data.item.owner" variant="link" v-b-popover.hover.ds500="'Approval owner ' + data.item.owner" target="_blank">
                        {{ data.item.owner.substring(0, 8) + '...' + data.item.owner.slice(-6) }}
                      </b-link>
                    </div>
                    <div v-else-if="data.item.name == 'ApprovalForAll' ">
                      <b-link size="sm" :href="explorer + 'address/' + data.item.owner" variant="link" v-b-popover.hover.ds500="'ApprovalForAll owner ' + data.item.owner" target="_blank">
                        {{ data.item.owner.substring(0, 8) + '...' + data.item.owner.slice(-6) }}
                      </b-link>
                    </div>
                  </template>
                  <template #cell(toSpenderOperator)="data">
                    <div v-if="data.item.name == 'Transfer'">
                      <b-link size="sm" :href="explorer + 'address/' + data.item.to" variant="link" v-b-popover.hover.ds500="'Transfer to ' + data.item.to" target="_blank">
                        {{ data.item.to.substring(0, 8) + '...' + data.item.to.slice(-6) }}
                      </b-link>
                    </div>
                    <div v-else-if="data.item.name == 'Approval'">
                      <b-link size="sm" :href="explorer + 'address/' + data.item.spender" variant="link" v-b-popover.hover.ds500="'Approval spender ' + data.item.spender" target="_blank">
                        {{ data.item.spender.substring(0, 8) + '...' + data.item.spender.slice(-6) }}
                      </b-link>
                    </div>
                    <div v-else-if="data.item.name == 'ApprovalForAll'">
                      <b-link size="sm" :href="explorer + 'address/' + data.item.operator" variant="link" v-b-popover.hover.ds500="'ApprovalForAll operator ' + data.item.operator" target="_blank">
                        {{ data.item.operator.substring(0, 8) + '...' + data.item.operator.slice(-6) }}
                      </b-link>
                    </div>
                  </template>
                  <template #cell(tokenIdApproved)="data">
                    <div v-if="data.item.name == 'Transfer' || data.item.name == 'Approval'">
                      <b-badge pill @click="viewNonFungible('erc721', settings.erc721.contract, data.item.tokenId)" v-b-popover.hover.ds500="'Click to view token'" variant="info">
                        {{ data.item.tokenId }}
                      </b-badge>
                    </div>
                    <div v-else-if="data.item.name == 'ApprovalForAll'">
                        {{ data.item.approved }}
                    </div>
                  </template>
                </b-table>
              </b-form-group>

              <b-form-group label="tokens:" label-size="lg" label-class="font-weight-bold pt-0" label-cols-sm="2" label-align-sm="right" class="mx-0 mt-3 mb-1 p-0">
                <div class="d-flex flex-wrap m-0 p-0">
                  <div class="mt-0 pr-1" style="width: 20.0rem;">
                    <b-form-input type="text" size="sm" v-model.trim="settings.erc721.tokensTable.filter" @change="saveSettings" debounce="600" placeholder="🔍 address/blocknumber/txhash regex"></b-form-input>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pr-1">
                    <b-button size="sm" @click="retrieveTimestamps(pagedSortedFilteredERC721Tokens.map(e => e.blockNumber))" variant="link" v-b-popover.hover.ds500="'Retrieve timestamps for balances below'"><b-icon-clock-history shift-v="+1" font-scale="1.2"></b-icon-clock-history></b-button>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc721.tokensTable.sortOption" @change="saveSettings" :options="erc721And1155TokensSortOptions" v-b-popover.hover.bottom="'Yeah. Sort'"></b-form-select>
                  </div>
                  <div class="mt-0 pl-1">
                    <font size="-2" v-b-popover.hover.bottom="'# filtered / total events'">{{ formatNumber(sortedFilteredERC721Tokens.length) + '/' + formatNumber(erc721.tokens.length) }}</font>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-pagination size="sm" v-model="settings.erc721.tokensTable.currentPage" @input="saveSettings" :total-rows="sortedFilteredERC721Tokens.length" :per-page="settings.erc721.tokensTable.pageSize" style="height: 0;"></b-pagination>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc721.tokensTable.pageSize" @change="saveSettings();" :options="pageSizes" v-b-popover.hover.bottom="'Yeah. Page size'"></b-form-select>
                  </div>
                </div>
                <b-table small fixed striped :fields="erc721TokensFields" :items="pagedSortedFilteredERC721Tokens" show-empty empty-html="Click [Retrieve] above" head-variant="light" class="mt-1">
                  <template #cell(number)="data">
                      <font size="-1" class="text-muted">{{ parseInt(data.index) + ((settings.erc721.tokensTable.currentPage - 1) * settings.erc721.tokensTable.pageSize) + 1 }}</font>
                  </template>
                  <template #cell(latestUpdate)="data">
                    <b-link size="sm" :href="explorer + 'tx/' + data.item.txHash + '#eventlog#' + data.item.logIndex" variant="link" v-b-popover.hover.ds500="(timestamps[chainId] && timestamps[chainId][data.item.blockNumber]) ? ('Block ' + formatNumber(data.item.blockNumber)) : 'blockNumber:txIndex'" target="_blank">
                      <font size="-1">
                        <span v-if="timestamps[chainId] && timestamps[chainId][data.item.blockNumber]">
                          {{ formatTimestamp(timestamps[chainId][data.item.blockNumber]) }}
                        </span>
                        <span v-else>
                          {{ data.item.blockNumber + ':' + data.item.txIndex }}
                        </span>
                      </font>
                    </b-link>
                    <font size="-1" v-b-popover.hover.ds500="'logIndex'" class="text-muted">{{ data.item.logIndex }}</font>
                    <font size="-1" v-b-popover.hover.ds500="'txHash'" class="text-muted">{{ data.item.txHash.substring(0, 8) + '...' + data.item.txHash.slice(-6) }}</font>
                  </template>
                  <template #cell(tokenId)="data">
                    <b-badge pill @click="viewNonFungible('erc721', settings.erc721.contract, data.item.tokenId)" v-b-popover.hover.ds500="'Click to view token'" variant="info">
                      {{ data.item.tokenId }}
                    </b-badge>
                  </template>
                  <template #cell(owner)="data">
                    <b-link size="sm" :href="explorer + 'token/' + settings.erc721.contract + '?a=' + data.item.owner" variant="link" v-b-popover.hover.ds500="data.item.owner" target="_blank">
                      {{ data.item.owner.substring(0, 8) + '...' + data.item.owner.slice(-6) }}
                    </b-link>
                  </template>
                </b-table>
              </b-form-group>

              <b-form-group label="approvalForAlls:" label-size="lg" label-class="font-weight-bold pt-0" label-cols-sm="2" label-align-sm="right" class="mx-0 mt-3 mb-1 p-0">
                <div class="d-flex flex-wrap m-0 p-0">
                  <div class="mt-0 pr-1" style="width: 20.0rem;">
                    <b-form-input type="text" size="sm" v-model.trim="settings.erc721.approvalForAllsTable.filter" @change="saveSettings" debounce="600" placeholder="🔍 address/blocknumber/txhash regex"></b-form-input>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pr-1">
                    <b-button size="sm" @click="retrieveTimestamps(pagedSortedFilteredERC721ApprovalForAlls.map(e => e.blockNumber))" variant="link" v-b-popover.hover.ds500="'Retrieve timestamps for allowances below'"><b-icon-clock-history shift-v="+1" font-scale="1.2"></b-icon-clock-history></b-button>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc721.approvalForAllsTable.sortOption" @change="saveSettings" :options="erc721And1155ApprovalForAllsSortOptions" v-b-popover.hover.bottom="'Yeah. Sort'"></b-form-select>
                  </div>
                  <div class="mt-0 pl-1">
                    <font size="-2" v-b-popover.hover.bottom="'# filtered / total events'">{{ formatNumber(sortedFilteredERC721ApprovalForAlls.length) + '/' + formatNumber(erc721.approvalForAlls.length) }}</font>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-pagination size="sm" v-model="settings.erc721.approvalForAllsTable.currentPage" @input="saveSettings" :total-rows="sortedFilteredERC721ApprovalForAlls.length" :per-page="settings.erc721.approvalForAllsTable.pageSize" style="height: 0;"></b-pagination>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc721.approvalForAllsTable.pageSize" @change="saveSettings();" :options="pageSizes" v-b-popover.hover.bottom="'Yeah. Page size'"></b-form-select>
                  </div>
                </div>
                <b-table small fixed striped :fields="erc721ApprovalForAllsFields" :items="pagedSortedFilteredERC721ApprovalForAlls" show-empty empty-html="Click [Retrieve] above" head-variant="light" class="mt-1">
                  <template #cell(number)="data">
                      <font size="-1" class="text-muted">{{ parseInt(data.index) + ((settings.erc721.approvalForAllsTable.currentPage - 1) * settings.erc721.approvalForAllsTable.pageSize) + 1 }}</font>
                  </template>
                  <template #cell(latestUpdate)="data">
                    <font size="-1">
                      <b-link size="sm" :href="explorer + 'tx/' + data.item.txHash + '#eventlog#' + data.item.logIndex" variant="link" v-b-popover.hover.ds500="(timestamps[chainId] && timestamps[chainId][data.item.blockNumber]) ? ('Block ' + formatNumber(data.item.blockNumber)) : 'blockNumber:txIndex.logIndex'" target="_blank">
                        <span v-if="timestamps[chainId] && timestamps[chainId][data.item.blockNumber]">
                          {{ formatTimestamp(timestamps[chainId][data.item.blockNumber]) }}
                        </span>
                        <span v-else>
                          {{ data.item.blockNumber + ':' + data.item.txIndex }}
                        </span>
                      </b-link>
                      <font size="-1" v-b-popover.hover.ds500="'logIndex'" class="text-muted">{{ data.item.logIndex }}</font>
                      <font size="-1" v-b-popover.hover.ds500="'txHash'" class="text-muted">{{ data.item.txHash.substring(0, 8) + '...' + data.item.txHash.slice(-6) }}</font>
                    </font>
                  </template>
                  <template #cell(owner)="data">
                    <b-link size="sm" :href="explorer + 'token/' + settings.erc721.contract + '?a=' + data.item.owner" variant="link" v-b-popover.hover.ds500="data.item.owner" target="_blank">
                      {{ data.item.owner.substring(0, 8) + '...' + data.item.owner.slice(-6) }}
                    </b-link>
                  </template>
                  <template #cell(operator)="data">
                    <b-link size="sm" :href="explorer + 'token/' + settings.erc721.contract + '?a=' + data.item.operator" variant="link" v-b-popover.hover.ds500="data.item.operator" target="_blank">
                      {{ data.item.operator.substring(0, 8) + '...' + data.item.operator.slice(-6) }}
                    </b-link>
                  </template>
                </b-table>
              </b-form-group>

              <b-form-group label="approvals:" label-size="lg" label-class="font-weight-bold pt-0" label-cols-sm="2" label-align-sm="right" class="mx-0 mt-3 mb-1 p-0">
                <div class="d-flex flex-wrap m-0 p-0">
                  <div class="mt-0 pr-1" style="width: 20.0rem;">
                    <b-form-input type="text" size="sm" v-model.trim="settings.erc721.approvalsTable.filter" @change="saveSettings" debounce="600" placeholder="🔍 address/blocknumber/txhash regex"></b-form-input>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pr-1">
                    <b-button size="sm" @click="retrieveTimestamps(pagedSortedFilteredERC721Approvals.map(e => e.blockNumber))" variant="link" v-b-popover.hover.ds500="'Retrieve timestamps for allowances below'"><b-icon-clock-history shift-v="+1" font-scale="1.2"></b-icon-clock-history></b-button>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc721.approvalsTable.sortOption" @change="saveSettings" :options="erc721ApprovalsSortOptions" v-b-popover.hover.bottom="'Yeah. Sort'"></b-form-select>
                  </div>
                  <div class="mt-0 pl-1">
                    <font size="-2" v-b-popover.hover.bottom="'# filtered / total events'">{{ formatNumber(sortedFilteredERC721Approvals.length) + '/' + formatNumber(erc721.approvals.length) }}</font>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-pagination size="sm" v-model="settings.erc721.approvalsTable.currentPage" @input="saveSettings" :total-rows="sortedFilteredERC721Approvals.length" :per-page="settings.erc721.approvalsTable.pageSize" style="height: 0;"></b-pagination>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc721.approvalsTable.pageSize" @change="saveSettings();" :options="pageSizes" v-b-popover.hover.bottom="'Yeah. Page size'"></b-form-select>
                  </div>
                </div>
                <b-table small fixed striped :fields="erc721ApprovalsFields" :items="pagedSortedFilteredERC721Approvals" show-empty empty-html="Click [Retrieve] above" head-variant="light" class="mt-1">
                  <template #cell(number)="data">
                      <font size="-1" class="text-muted">{{ parseInt(data.index) + ((settings.erc721.approvalsTable.currentPage - 1) * settings.erc721.approvalsTable.pageSize) + 1 }}</font>
                  </template>
                  <template #cell(latestUpdate)="data">
                    <font size="-1">
                      <b-link size="sm" :href="explorer + 'tx/' + data.item.txHash + '#eventlog#' + data.item.logIndex" variant="link" v-b-popover.hover.ds500="(timestamps[chainId] && timestamps[chainId][data.item.blockNumber]) ? ('Block ' + formatNumber(data.item.blockNumber)) : 'blockNumber:txIndex.logIndex'" target="_blank">
                        <span v-if="timestamps[chainId] && timestamps[chainId][data.item.blockNumber]">
                          {{ formatTimestamp(timestamps[chainId][data.item.blockNumber]) }}
                        </span>
                        <span v-else>
                          {{ data.item.blockNumber + ':' + data.item.txIndex }}
                        </span>
                      </b-link>
                      <font size="-1" v-b-popover.hover.ds500="'logIndex'" class="text-muted">{{ data.item.logIndex }}</font>
                      <font size="-1" v-b-popover.hover.ds500="'txHash'" class="text-muted">{{ data.item.txHash.substring(0, 8) + '...' + data.item.txHash.slice(-6) }}</font>
                    </font>
                  </template>
                  <template #cell(owner)="data">
                    <b-link size="sm" :href="explorer + 'token/' + settings.erc721.contract + '?a=' + data.item.owner" variant="link" v-b-popover.hover.ds500="data.item.owner" target="_blank">
                      {{ data.item.owner.substring(0, 8) + '...' + data.item.owner.slice(-6) }}
                    </b-link>
                  </template>
                  <template #cell(spender)="data">
                    <b-link size="sm" :href="explorer + 'token/' + settings.erc721.contract + '?a=' + data.item.spender" variant="link" v-b-popover.hover.ds500="data.item.spender" target="_blank">
                      {{ data.item.spender.substring(0, 8) + '...' + data.item.spender.slice(-6) }}
                    </b-link>
                  </template>
                  <template #cell(tokenId)="data">
                    <b-badge pill @click="viewNonFungible('erc721', settings.erc721.contract, data.item.tokenId)" v-b-popover.hover.ds500="'Click to view token'" variant="info">
                      {{ data.item.tokenId }}
                    </b-badge>
                  </template>
                </b-table>
              </b-form-group>
            </b-card>

            <!-- ERC-1155: -->
            <b-card v-if="settings.tabIndex == 3" header="ERC-1155" class="m-0 p-0">
              <b-form-group label="contract:" label-for="erc1155-contract" label-size="lg" label-class="font-weight-bold pt-0" label-cols-sm="2" label-align-sm="right" :state="!settings.erc1155.contract || validAddress(settings.erc1155.contract)" :invalid-feedback="'Invalid address'" class="mx-0 my-1 p-0">
                <b-input-group size="sm" class="w-50">
                  <b-form-input type="text" size="sm" id="erc1155-contract" v-model="settings.erc1155.contract" @change="saveSettings" placeholder="Enter token contract address, or select from dropdown"></b-form-input>
                  <b-input-group-append>
                    <b-button size="sm" :disabled="!validAddress(settings.erc1155.contract)" @click="retrieveERC1155" variant="primary">Retrieve</b-button>
                    <b-dropdown size="sm" id="dropdown-left" text="" variant="link" v-b-popover.hover.ds500="'Some sample token contracts'" class="m-0 ml-1 p-0">
                      <b-dropdown-item v-if="sampleContracts('erc1155').length == 0" disabled>No sample contracts on this network</b-dropdown-item>
                      <div v-for="(item, index) of sampleContracts('erc1155')" v-bind:key="index">
                        <b-dropdown-item @click="settings.erc1155.contract = item.contract; saveSettings();">{{ index }}. {{ item.contract.substring(0, 8) + '...' + item.contract.slice(-6) + ' ' + item.name }}</b-dropdown-item>
                      </div>
                    </b-dropdown>
                    <b-button :disabled="!settings.erc1155.contract || !validAddress(settings.erc1155.contract)" @click="copyToClipboard(settings.erc1155.contract);" variant="link" v-b-popover.hover.ds500="'Copy ERC-1155 contract address to clipboard'" class="m-0 ml-3 p-0"><b-icon-clipboard shift-v="+1" font-scale="1.1"></b-icon-clipboard></b-button>
                    <b-button size="sm" :disabled="!validAddress(settings.erc1155.contract)" :href="explorer + 'token/' + settings.erc1155.contract + '#code'" variant="link" v-b-popover.hover.ds500="'View in explorer'" target="_blank" class="m-0 ml-2 p-0"><b-icon-link45deg shift-v="-4" font-scale="1.1"></b-icon-link45deg></b-button>
                  </b-input-group-append>
                </b-input-group>
              </b-form-group>
              <!-- <b-form-group label="" label-size="sm" label-cols-sm="2" label-align-sm="right" class="mx-0 my-1 p-0">
                <b-button size="sm" :disabled="!validAddress(settings.erc1155.contract)" @click="retrieveERC1155" variant="primary">Retrieve</b-button>
              </b-form-group> -->

              <b-form-group label="events:" label-size="lg" label-class="font-weight-bold pt-0" label-cols-sm="2" label-align-sm="right" class="mx-0 mt-3 mb-1 p-0">
                <div class="d-flex flex-wrap m-0 p-0">
                  <div class="mt-0 pr-1" style="width: 20.0rem;">
                    <b-form-input type="text" size="sm" v-model.trim="settings.erc1155.eventsTable.filter" @change="saveSettings" debounce="600" placeholder="🔍 address/blocknumber/txhash regex"></b-form-input>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pr-1">
                    <b-button size="sm" @click="retrieveTimestamps(pagedSortedFilteredERC1155Events.map(e => e.blockNumber))" variant="link" v-b-popover.hover.ds500="'Retrieve timestamps for events below'"><b-icon-clock-history shift-v="+1" font-scale="1.2"></b-icon-clock-history></b-button>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc1155.eventsTable.sortOption" @change="saveSettings" :options="eventsSortOptions" v-b-popover.hover.bottom="'Yeah. Sort'"></b-form-select>
                  </div>
                  <div class="mt-0 pl-1">
                    <font size="-2" v-b-popover.hover.bottom="'# filtered / total events'">{{ formatNumber(sortedFilteredERC1155Events.length) + '/' + formatNumber(erc1155.events.length) }}</font>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-pagination size="sm" v-model="settings.erc1155.eventsTable.currentPage" @input="saveSettings" :total-rows="sortedFilteredERC1155Events.length" :per-page="settings.erc1155.eventsTable.pageSize" style="height: 0;"></b-pagination>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc1155.eventsTable.pageSize" @change="saveSettings();" :options="pageSizes" v-b-popover.hover.bottom="'Yeah. Page size'"></b-form-select>
                  </div>
                </div>
                <b-table small fixed striped :fields="erc1155EventsFields" :items="pagedSortedFilteredERC1155Events" show-empty empty-html="Click [Retrieve] above" head-variant="light" class="mt-1">
                  <template #cell(number)="data">
                      <font size="-1" class="text-muted">{{ parseInt(data.index) + ((settings.erc1155.eventsTable.currentPage - 1) * settings.erc1155.eventsTable.pageSize) + 1 }}</font>
                  </template>
                  <template #cell(when)="data">
                    <font size="-1">
                      <b-link size="sm" :href="explorer + 'tx/' + data.item.txHash + '#eventlog#' + data.item.logIndex" variant="link" v-b-popover.hover.ds500="(timestamps[chainId] && timestamps[chainId][data.item.blockNumber]) ? ('Block ' + formatNumber(data.item.blockNumber)) : 'blockNumber:txIndex'" target="_blank">
                        <span v-if="timestamps[chainId] && timestamps[chainId][data.item.blockNumber]">
                          {{ formatTimestamp(timestamps[chainId][data.item.blockNumber]) }}
                        </span>
                        <span v-else>
                          {{ data.item.blockNumber + ':' + data.item.txIndex }}
                        </span>
                      </b-link>
                      <font size="-1" v-b-popover.hover.ds500="'logIndex'" class="text-muted">{{ data.item.logIndex }}</font>
                      <font size="-1" v-b-popover.hover.ds500="'txHash'" class="text-muted">{{ data.item.txHash.substring(0, 8) + '...' + data.item.txHash.slice(-6) }}</font>
                    </font>
                  </template>
                  <template #cell(fromOwner)="data">
                    <div v-if="data.item.name == 'TransferSingle'">
                      <b-link size="sm" :href="explorer + 'address/' + data.item.from" variant="link" v-b-popover.hover.ds500="'TransferSingle from ' + data.item.from" target="_blank">
                        {{ data.item.from.substring(0, 8) + '...' + data.item.from.slice(-6) }}
                      </b-link>
                    </div>
                    <div v-else-if="data.item.name == 'TransferBatch'">
                      <b-link size="sm" :href="explorer + 'address/' + data.item.from" variant="link" v-b-popover.hover.ds500="'TransferBatch from ' + data.item.from" target="_blank">
                        {{ data.item.from.substring(0, 8) + '...' + data.item.from.slice(-6) }}
                      </b-link>
                    </div>
                    <div v-else-if="data.item.name == 'ApprovalForAll' ">
                      <b-link size="sm" :href="explorer + 'address/' + data.item.owner" variant="link" v-b-popover.hover.ds500="'ApprovalForAll owner ' + data.item.owner" target="_blank">
                        {{ data.item.owner.substring(0, 8) + '...' + data.item.owner.slice(-6) }}
                      </b-link>
                    </div>
                  </template>
                  <template #cell(toOperator)="data">
                    <div v-if="data.item.name == 'TransferSingle'">
                      <b-link size="sm" :href="explorer + 'address/' + data.item.to" variant="link" v-b-popover.hover.ds500="'TransferSingle to ' + data.item.to" target="_blank">
                        {{ data.item.to.substring(0, 8) + '...' + data.item.to.slice(-6) }}
                      </b-link>
                    </div>
                    <div v-else-if="data.item.name == 'TransferBatch'">
                      <b-link size="sm" :href="explorer + 'address/' + data.item.to" variant="link" v-b-popover.hover.ds500="'TransferBatch to ' + data.item.to" target="_blank">
                        {{ data.item.to.substring(0, 8) + '...' + data.item.to.slice(-6) }}
                      </b-link>
                    </div>
                    <div v-else-if="data.item.name == 'ApprovalForAll'">
                      <b-link size="sm" :href="explorer + 'address/' + data.item.operator" variant="link" v-b-popover.hover.ds500="'ApprovalForAll operator ' + data.item.operator" target="_blank">
                        {{ data.item.operator.substring(0, 8) + '...' + data.item.operator.slice(-6) }}
                      </b-link>
                    </div>
                  </template>
                  <template #cell(tokenIdApproved)="data">
                    <div v-if="data.item.name == 'TransferSingle'">
                      <b-badge pill @click="viewNonFungible('erc1155', settings.erc1155.contract, data.item.tokenId)" v-b-popover.hover.ds500="'Click to view token'" variant="info">
                        {{ data.item.tokenId }}
                      </b-badge>
                      <font size="-1" class="text-muted">{{ 'x' + data.item.value }}</font>
                    </div>
                    <div v-else-if="data.item.name == 'TransferBatch'">
                      <span v-for="(item, index) of data.item.tokenIds" v-bind:key="index">
                        <b-badge pill @click="viewNonFungible('erc1155', settings.erc1155.contract, data.item.tokenIds[index])" variant="info">
                          {{ data.item.tokenIds[index] }}
                        </b-badge>
                        <font size="-1" class="text-muted">{{ 'x' + data.item.values[index] }}</font>
                      </span>
                    </div>
                    <div v-else-if="data.item.name == 'ApprovalForAll'">
                        {{ data.item.approved }}
                    </div>
                  </template>
                </b-table>
              </b-form-group>

              <b-form-group label="tokens:" label-size="lg" label-class="font-weight-bold pt-0" label-cols-sm="2" label-align-sm="right" class="mx-0 mt-3 mb-1 p-0">
                <div class="d-flex flex-wrap m-0 p-0">
                  <div class="mt-0 pr-1" style="width: 20.0rem;">
                    <b-form-input type="text" size="sm" v-model.trim="settings.erc1155.tokensTable.filter" @change="saveSettings" debounce="600" placeholder="🔍 address/blocknumber/txhash regex"></b-form-input>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pr-1">
                    <b-button size="sm" @click="retrieveTimestamps(pagedSortedFilteredERC1155Tokens.map(e => e.blockNumber))" variant="link" v-b-popover.hover.ds500="'Retrieve timestamps for balances below'"><b-icon-clock-history shift-v="+1" font-scale="1.2"></b-icon-clock-history></b-button>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc1155.tokensTable.sortOption" @change="saveSettings" :options="erc721And1155TokensSortOptions" v-b-popover.hover.bottom="'Yeah. Sort'"></b-form-select>
                  </div>
                  <div class="mt-0 pl-1">
                    <font size="-2" v-b-popover.hover.bottom="'# filtered / total events'">{{ formatNumber(sortedFilteredERC1155Tokens.length) + '/' + formatNumber(erc1155.tokens.length) }}</font>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-pagination size="sm" v-model="settings.erc1155.tokensTable.currentPage" @input="saveSettings" :total-rows="sortedFilteredERC1155Tokens.length" :per-page="settings.erc1155.tokensTable.pageSize" style="height: 0;"></b-pagination>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc1155.tokensTable.pageSize" @change="saveSettings();" :options="pageSizes" v-b-popover.hover.bottom="'Yeah. Page size'"></b-form-select>
                  </div>
                </div>
                <b-table small fixed striped :fields="erc1155TokensFields" :items="pagedSortedFilteredERC1155Tokens" show-empty empty-html="Click [Retrieve] above" head-variant="light" class="mt-1">
                  <template #cell(number)="data">
                      <font size="-1" class="text-muted">{{ parseInt(data.index) + ((settings.erc1155.tokensTable.currentPage - 1) * settings.erc1155.tokensTable.pageSize) + 1 }}</font>
                  </template>
                  <template #cell(latestUpdate)="data">
                    <b-link size="sm" :href="explorer + 'tx/' + data.item.txHash + '#eventlog#' + data.item.logIndex" variant="link" v-b-popover.hover.ds500="(timestamps[chainId] && timestamps[chainId][data.item.blockNumber]) ? ('Block ' + formatNumber(data.item.blockNumber)) : 'blockNumber:txIndex'" target="_blank">
                      <font size="-1">
                        <span v-if="timestamps[chainId] && timestamps[chainId][data.item.blockNumber]">
                          {{ formatTimestamp(timestamps[chainId][data.item.blockNumber]) }}
                        </span>
                        <span v-else>
                          {{ data.item.blockNumber + ':' + data.item.txIndex }}
                        </span>
                      </font>
                    </b-link>
                    <font size="-1" v-b-popover.hover.ds500="'logIndex'" class="text-muted">{{ data.item.logIndex }}</font>
                    <font size="-1" v-b-popover.hover.ds500="'txHash'" class="text-muted">{{ data.item.txHash.substring(0, 8) + '...' + data.item.txHash.slice(-6) }}</font>
                  </template>
                  <template #cell(tokenId)="data">
                    <b-badge pill @click="viewNonFungible('erc1155', settings.erc1155.contract, data.item.tokenId)" v-b-popover.hover.ds500="'Click to view token'" variant="info">
                      {{ data.item.tokenId }}
                    </b-badge>
                  </template>
                  <template #cell(owner)="data">
                    <b-link size="sm" :href="explorer + 'token/' + settings.erc1155.contract + '?a=' + data.item.owner" variant="link" v-b-popover.hover.ds500="data.item.owner" target="_blank">
                      {{ data.item.owner.substring(0, 8) + '...' + data.item.owner.slice(-6) }}
                    </b-link>
                    <font size="-1" class="text-muted">{{ 'x' + data.item.value }}</font>
                  </template>
                </b-table>
              </b-form-group>

              <b-form-group label="approvalForAlls:" label-size="lg" label-class="font-weight-bold pt-0" label-cols-sm="2" label-align-sm="right" class="mx-0 mt-3 mb-1 p-0">
                <div class="d-flex flex-wrap m-0 p-0">
                  <div class="mt-0 pr-1" style="width: 20.0rem;">
                    <b-form-input type="text" size="sm" v-model.trim="settings.erc1155.approvalForAllsTable.filter" @change="saveSettings" debounce="600" placeholder="🔍 address/blocknumber/txhash regex"></b-form-input>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pr-1">
                    <b-button size="sm" @click="retrieveTimestamps(pagedSortedFilteredERC1155ApprovalForAlls.map(e => e.blockNumber))" variant="link" v-b-popover.hover.ds500="'Retrieve timestamps for ApprovalForAlls below'"><b-icon-clock-history shift-v="+1" font-scale="1.2"></b-icon-clock-history></b-button>
                  </div>
                  <div class="mt-0 flex-grow-1">
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc1155.approvalForAllsTable.sortOption" @change="saveSettings" :options="erc721And1155ApprovalForAllsSortOptions" v-b-popover.hover.bottom="'Yeah. Sort'"></b-form-select>
                  </div>
                  <div class="mt-0 pl-1">
                    <font size="-2" v-b-popover.hover.bottom="'# filtered / total events'">{{ formatNumber(sortedFilteredERC1155ApprovalForAlls.length) + '/' + formatNumber(erc1155.approvalForAlls.length) }}</font>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-pagination size="sm" v-model="settings.erc1155.approvalForAllsTable.currentPage" @input="saveSettings" :total-rows="sortedFilteredERC1155ApprovalForAlls.length" :per-page="settings.erc1155.approvalForAllsTable.pageSize" style="height: 0;"></b-pagination>
                  </div>
                  <div class="mt-0 pl-1">
                    <b-form-select size="sm" v-model="settings.erc1155.approvalForAllsTable.pageSize" @change="saveSettings();" :options="pageSizes" v-b-popover.hover.bottom="'Yeah. Page size'"></b-form-select>
                  </div>
                </div>
                <b-table small fixed striped :fields="erc721ApprovalForAllsFields" :items="pagedSortedFilteredERC1155ApprovalForAlls" show-empty empty-html="Click [Retrieve] above" head-variant="light" class="mt-1">
                  <template #cell(number)="data">
                      <font size="-1" class="text-muted">{{ parseInt(data.index) + ((settings.erc1155.approvalForAllsTable.currentPage - 1) * settings.erc1155.approvalForAllsTable.pageSize) + 1 }}</font>
                  </template>
                  <template #cell(latestUpdate)="data">
                    <font size="-1">
                      <b-link size="sm" :href="explorer + 'tx/' + data.item.txHash + '#eventlog#' + data.item.logIndex" variant="link" v-b-popover.hover.ds500="(timestamps[chainId] && timestamps[chainId][data.item.blockNumber]) ? ('Block ' + formatNumber(data.item.blockNumber)) : 'blockNumber:txIndex.logIndex'" target="_blank">
                        <span v-if="timestamps[chainId] && timestamps[chainId][data.item.blockNumber]">
                          {{ formatTimestamp(timestamps[chainId][data.item.blockNumber]) }}
                        </span>
                        <span v-else>
                          {{ data.item.blockNumber + ':' + data.item.txIndex }}
                        </span>
                      </b-link>
                      <font size="-1" v-b-popover.hover.ds500="'logIndex'" class="text-muted">{{ data.item.logIndex }}</font>
                      <font size="-1" v-b-popover.hover.ds500="'txHash'" class="text-muted">{{ data.item.txHash.substring(0, 8) + '...' + data.item.txHash.slice(-6) }}</font>
                    </font>
                  </template>
                  <template #cell(owner)="data">
                    <b-link size="sm" :href="explorer + 'token/' + settings.erc721.contract + '?a=' + data.item.owner" variant="link" v-b-popover.hover.ds500="data.item.owner" target="_blank">
                      {{ data.item.owner.substring(0, 8) + '...' + data.item.owner.slice(-6) }}
                    </b-link>
                  </template>
                  <template #cell(operator)="data">
                    <b-link size="sm" :href="explorer + 'token/' + settings.erc721.contract + '?a=' + data.item.operator" variant="link" v-b-popover.hover.ds500="data.item.operator" target="_blank">
                      {{ data.item.operator.substring(0, 8) + '...' + data.item.operator.slice(-6) }}
                    </b-link>
                  </template>
                </b-table>
              </b-form-group>
            </b-card>
          </b-card>
        </b-card>

        <b-card no-header body-class="m-0 p-0" class="m-0 p-0 border-0">
          <div class="d-flex flex-wrap m-0 p-0">
            <div class="ml-0 mt-1 pl-1">
              <font v-if="connected" size="-2">
                <b-link v-if="coinbase" :href="explorer + 'address/' + coinbase" v-b-popover.hover.ds500="'Coinbase'" target="_blank">
                  {{ coinbase && (coinbase.substring(0, 8) + '...' + coinbase.slice(-6)) || 'Connect' }}
                </b-link>
                <b-link v-if="chainId" :href="explorer + ''" v-b-popover.hover.ds500="'Network'" target="_blank">
                  {{ networkName }}
                </b-link>
                <b-link v-if="blockNumber" :href="explorer + 'block/' + blockNumber" v-b-popover.hover.ds500="'Latest block'" target="_blank">
                  {{ '#' + formatNumber(blockNumber) }}
                </b-link>
                <b-link v-if="blockNumber" :href="explorer + 'block/' + blockNumber" v-b-popover.hover.ds500="formatTimestamp(timestamp)" target="_blank">
                  {{ formatTimeDiff(timestamp) }}
                </b-link>
              </font>
            </div>
            <div class="mt-0 flex-grow-1">
            </div>
            <div class="mt-0 pl-1 pr-1">
              gm, and enjoy! <i>GetStartedWithDevelopingInEthereum</i> &copy; Bok Consulting Pty Ltd 2024
            </div>
          </div>
        </b-card>
      </b-container>
    </div>

    <script>
      window.app = new Vue({
        el: '#app',
        // --- DATA ---
        data: {
          connected: false,
          chainId: null,
          coinbase: null,
          blockNumber: null,
          timestamp: null,
          forceRefresh: 0,

          settings: {
            tabIndex: 0,
            erc20: {
              contract: null,
              eventsTable: {
                filter: null,
                currentPage: 1,
                pageSize: 10,
                sortOption: 'txorderdsc',
              },
              balancesTable: {
                filter: null,
                currentPage: 1,
                pageSize: 10,
                sortOption: 'txorderdsc',
              },
              allowancesTable: {
                filter: null,
                currentPage: 1,
                pageSize: 10,
                sortOption: 'txorderdsc',
              },
              balanceOf: {
                owner: null,
              },
              allowance: {
                owner: null,
                spender: null,
              },
              transfer: {
                to: null,
                tokens: null,
              },
              approve: {
                spender: null,
                tokens: null,
              },
              transferFrom: {
                from: null,
                to: null,
                tokens: null,
              },
            },
            erc721: {
              contract: null,
              eventsTable: {
                filter: null,
                currentPage: 1,
                pageSize: 10,
                sortOption: 'txorderdsc',
              },
              tokensTable: {
                filter: null,
                currentPage: 1,
                pageSize: 10,
                sortOption: 'txorderdsc',
              },
              approvalForAllsTable: {
                filter: null,
                currentPage: 1,
                pageSize: 10,
                sortOption: 'txorderdsc',
              },
              approvalsTable: {
                filter: null,
                currentPage: 1,
                pageSize: 10,
                sortOption: 'txorderdsc',
              },
            },
            erc1155: {
              contract: null,
              eventsTable: {
                filter: null,
                currentPage: 1,
                pageSize: 10,
                sortOption: 'txorderdsc',
              },
              tokensTable: {
                filter: null,
                currentPage: 1,
                pageSize: 10,
                sortOption: 'txorderdsc',
              },
              approvalForAllsTable: {
                filter: null,
                currentPage: 1,
                pageSize: 10,
                sortOption: 'txorderdsc',
              },
            },
            version: 11,
          },
          erc20: {
            symbol: null,
            name: null,
            decimals: null,
            totalSupply: null,
            coinbaseBalanceOf: null,
            events: [],
            balances: [],
            allowances: [],
            balanceOf: null,
            allowance: null,
            transferTx: {
              txHash: null,
              result: null,
            },
            approveTx: {
              txHash: null,
              result: null,
            },
            transferFromTx: {
              txHash: null,
              result: null,
            },
          },
          erc721: {
            symbol: null,
            coinbaseBalanceOf: null,
            events: [],
            tokens: [],
            approvalForAlls: [],
            approvals: [],
          },
          erc1155: {
            events: [],
            tokens: [],
            approvalForAlls: [],
          },
          modalNonFungible: {
            show: false,
            type: null,
            contract: null,
            tokenId: null,
            name: null,
            description: null,
            image: null,
            attributes: [],
            logs: [],
          },
          timestamps: {},
          eventsSortOptions: [
            { value: 'txorderasc', text: '▲ TxOrder' },
            { value: 'txorderdsc', text: '▼ TxOrder' },
          ],
          erc20BalancesSortOptions: [
            { value: 'txorderasc', text: '▲ Latest Update' },
            { value: 'txorderdsc', text: '▼ Latest Update' },
            { value: 'ownerasc', text: '▲ Owner' },
            { value: 'ownerdsc', text: '▼ Owner' },
            { value: 'balanceasc', text: '▲ Balance' },
            { value: 'balancedsc', text: '▼ Balance' },
          ],
          erc20AllowancesSortOptions: [
            { value: 'txorderasc', text: '▲ Latest Update' },
            { value: 'txorderdsc', text: '▼ Latest Update' },
            { value: 'ownerasc', text: '▲ Owner' },
            { value: 'ownerdsc', text: '▼ Owner' },
            { value: 'spenderasc', text: '▲ Spender' },
            { value: 'spenderdsc', text: '▼ Spender' },
            { value: 'tokensasc', text: '▲ Tokens' },
            { value: 'tokensdsc', text: '▼ Tokens' },
          ],
          erc721And1155TokensSortOptions: [
            { value: 'txorderasc', text: '▲ Latest Update' },
            { value: 'txorderdsc', text: '▼ Latest Update' },
            { value: 'tokenidasc', text: '▲ Token Id, ▲ Owner' },
            { value: 'tokeniddsc', text: '▼ Token Id, ▲ Owner' },
            { value: 'ownerasc', text: '▲ Owner, ▲ Token Id' },
            { value: 'ownerdsc', text: '▼ Owner, ▲ Token Id' },
          ],
          erc721And1155ApprovalForAllsSortOptions: [
            { value: 'txorderasc', text: '▲ Latest Update' },
            { value: 'txorderdsc', text: '▼ Latest Update' },
            { value: 'ownerasc', text: '▲ Owner, ▼ Latest Update' },
            { value: 'ownerdsc', text: '▼ Owner, ▼ Latest Update' },
            { value: 'operatorasc', text: '▲ Operator, ▼ Latest Update' },
            { value: 'operatordsc', text: '▼ Operator, ▼ Latest Update' },
            { value: 'approvedasc', text: '▲ Approved, ▼ Latest Update' },
            { value: 'approveddsc', text: '▼ Approved, ▼ Latest Update' },
          ],
          erc721ApprovalsSortOptions: [
            { value: 'txorderasc', text: '▲ Latest Update' },
            { value: 'txorderdsc', text: '▼ Latest Update' },
            { value: 'ownerasc', text: '▲ Owner, ▼ Latest Update' },
            { value: 'ownerdsc', text: '▼ Owner, ▼ Latest Update' },
            { value: 'spenderasc', text: '▲ Spender, ▼ Latest Update' },
            { value: 'spenderdsc', text: '▼ Spender, ▼ Latest Update' },
            { value: 'tokenidasc', text: '▲ Token Id' },
            { value: 'tokeniddsc', text: '▼ Token Id' },
          ],
          pageSizes: [
            { value: 5, text: '5' },
            { value: 10, text: '10' },
            { value: 25, text: '25' },
            { value: 50, text: '50' },
            { value: 100, text: '100' },
            { value: 500, text: '500' },
            { value: 1000, text: '1k' },
            { value: 2500, text: '2.5k' },
            { value: 10000, text: '10k' },
          ],
          erc20EventsFields: [
            { key: 'number', label: '#', sortable: false, thStyle: 'width: 5%;', tdClass: 'text-truncate' },
            { key: 'when', label: 'When', sortable: false, thStyle: 'width: 30%;', thClass: 'text-left', tdClass: 'text-left' },
            { key: 'name', label: 'Name', sortable: false, thStyle: 'width: 10%;', tdClass: 'text-truncate' },
            { key: 'fromOwner', label: 'From / Owner', sortable: false, thStyle: 'width: 15%;', tdClass: 'text-truncate' },
            { key: 'toSpender', label: 'To / Spender', sortable: false, thStyle: 'width: 15%;', tdClass: 'text-truncate' },
            { key: 'tokens', label: 'Tokens', sortable: false, thStyle: 'width: 25%;', thClass: 'text-right', tdClass: 'text-right' },
          ],
          erc20BalancesFields: [
            { key: 'number', label: '#', sortable: false, thStyle: 'width: 5%;', tdClass: 'text-truncate' },
            { key: 'latestUpdate', label: 'Latest Update', sortable: false, thStyle: 'width: 30%;', thClass: 'text-left', tdClass: 'text-left' },
            { key: 'owner', label: 'Owner', sortable: false, thStyle: 'width: 25%;', thClass: 'text-left', tdClass: 'text-left' },
            { key: 'balance', label: 'Balance', sortable: false, thStyle: 'width: 40%;', thClass: 'text-right', tdClass: 'text-right' },
          ],
          erc20AllowancesFields: [
            { key: 'number', label: '#', sortable: false, thStyle: 'width: 5%;', tdClass: 'text-truncate' },
            { key: 'latestUpdate', label: 'Latest Update', sortable: false, thStyle: 'width: 30%;', thClass: 'text-left', tdClass: 'text-left' },
            { key: 'owner', label: 'Owner', sortable: false, thStyle: 'width: 20%;', thClass: 'text-left', tdClass: 'text-left' },
            { key: 'spender', label: 'Spender', sortable: false, thStyle: 'width: 20%;', thClass: 'text-left', tdClass: 'text-left' },
            { key: 'tokens', label: 'Tokens', sortable: false, thStyle: 'width: 25%;', thClass: 'text-right', tdClass: 'text-right' },
          ],
          erc721EventsFields: [
            { key: 'number', label: '#', sortable: false, thStyle: 'width: 5%;', tdClass: 'text-truncate' },
            { key: 'when', label: 'When', sortable: false, thStyle: 'width: 30%;', thClass: 'text-left', tdClass: 'text-left' },
            { key: 'name', label: 'Name', sortable: false, thStyle: 'width: 15%;', tdClass: 'text-truncate' },
            { key: 'fromOwner', label: 'From / Owner', sortable: false, thStyle: 'width: 15%;', tdClass: 'text-truncate' },
            { key: 'toSpenderOperator', label: 'To / Spender / Operator', sortable: false, thStyle: 'width: 20%;', tdClass: 'text-truncate' },
            { key: 'tokenIdApproved', label: 'Token Id / Approved', sortable: false, thStyle: 'width: 15%;', thClass: 'text-right', tdClass: 'text-right' },
          ],
          erc721TokensFields: [
            { key: 'number', label: '#', sortable: false, thStyle: 'width: 5%;', tdClass: 'text-truncate' },
            { key: 'latestUpdate', label: 'Latest Update', sortable: false, thStyle: 'width: 30%;', thClass: 'text-left', tdClass: 'text-left' },
            { key: 'tokenId', label: 'Token Id', sortable: false, thStyle: 'width: 35%;', thClass: 'text-right', tdClass: 'text-right' },
            { key: 'owner', label: 'Owner', sortable: false, thStyle: 'width: 30%;', thClass: 'text-left', tdClass: 'text-left' },
          ],
          erc721ApprovalForAllsFields: [
            { key: 'number', label: '#', sortable: false, thStyle: 'width: 5%;', tdClass: 'text-truncate' },
            { key: 'latestUpdate', label: 'Latest Update', sortable: false, thStyle: 'width: 30%;', thClass: 'text-left', tdClass: 'text-left' },
            { key: 'owner', label: 'Owner', sortable: false, thStyle: 'width: 20%;', thClass: 'text-left', tdClass: 'text-left' },
            { key: 'operator', label: 'Operator', sortable: false, thStyle: 'width: 20%;', thClass: 'text-left', tdClass: 'text-left' },
            { key: 'approved', label: 'Approved', sortable: false, thStyle: 'width: 25%;', thClass: 'text-right', tdClass: 'text-right' },
          ],
          erc721ApprovalsFields: [
            { key: 'number', label: '#', sortable: false, thStyle: 'width: 5%;', tdClass: 'text-truncate' },
            { key: 'latestUpdate', label: 'Latest Update', sortable: false, thStyle: 'width: 30%;', thClass: 'text-left', tdClass: 'text-left' },
            { key: 'owner', label: 'Owner', sortable: false, thStyle: 'width: 20%;', thClass: 'text-left', tdClass: 'text-left' },
            { key: 'spender', label: 'Spender', sortable: false, thStyle: 'width: 20%;', thClass: 'text-left', tdClass: 'text-left' },
            { key: 'tokenId', label: 'Token Id', sortable: false, thStyle: 'width: 25%;', thClass: 'text-right', tdClass: 'text-right' },
          ],
          erc1155EventsFields: [
            { key: 'number', label: '#', sortable: false, thStyle: 'width: 5%;', tdClass: 'text-truncate' },
            { key: 'when', label: 'When', sortable: false, thStyle: 'width: 30%;', thClass: 'text-left', tdClass: 'text-left' },
            { key: 'name', label: 'Name', sortable: false, thStyle: 'width: 15%;', tdClass: 'text-truncate' },
            { key: 'fromOwner', label: 'From / Owner', sortable: false, thStyle: 'width: 15%;', tdClass: 'text-truncate' },
            { key: 'toOperator', label: 'To / Operator', sortable: false, thStyle: 'width: 20%;', tdClass: 'text-truncate' },
            { key: 'tokenIdApproved', label: 'Token Id / Approved', sortable: false, thStyle: 'width: 15%;', thClass: 'text-right', tdClass: 'text-right' },
          ],
          erc1155TokensFields: [
            { key: 'number', label: '#', sortable: false, thStyle: 'width: 5%;', tdClass: 'text-truncate' },
            { key: 'latestUpdate', label: 'Latest Update', sortable: false, thStyle: 'width: 30%;', thClass: 'text-left', tdClass: 'text-left' },
            { key: 'tokenId', label: 'Token Id', sortable: false, thStyle: 'width: 35%;', thClass: 'text-right', tdClass: 'text-right' },
            { key: 'owner', label: 'Owner', sortable: false, thStyle: 'width: 30%;', thClass: 'text-left', tdClass: 'text-left' },
          ],
          erc1155ApprovalForAllsFields: [
            { key: 'number', label: '#', sortable: false, thStyle: 'width: 5%;', tdClass: 'text-truncate' },
            { key: 'latestUpdate', label: 'Latest Update', sortable: false, thStyle: 'width: 30%;', thClass: 'text-left', tdClass: 'text-left' },
            { key: 'owner', label: 'Owner', sortable: false, thStyle: 'width: 20%;', thClass: 'text-left', tdClass: 'text-left' },
            { key: 'operator', label: 'Operator', sortable: false, thStyle: 'width: 20%;', thClass: 'text-left', tdClass: 'text-left' },
            { key: 'approved', label: 'Approved', sortable: false, thStyle: 'width: 25%;', thClass: 'text-right', tdClass: 'text-right' },
          ],
        },

        // --- COMPUTED ---
        computed: {
          network() {
            return NETWORKS[this.chainId] || {};
          },
          networkName() {
            return this.network.name || "Unknown - chainId: " + this.chainId;
          },
          explorer() {
            return this.network.explorer || "https://etherscan.io/";
          },
          nonFungibleViewer() {
            return this.network.nonFungibleViewer || "https://opensea.io/assets/ethereum/${contract}/${tokenId}";
          },
          erc20Description() {
            if (this.erc20.symbol || this.erc20.name || this.erc20.decimals || this.erc20.totalSupply) {
              return "symbol: '" + (this.erc20.symbol || '') + "', name: '" + (this.erc20.name || '') + "', decimals: " + (this.erc20.decimals || '') + ", totalSupply: " + (this.erc20.totalSupply && this.formatDecimals(this.erc20.totalSupply, this.erc20.decimals || 0) || '');
            }
            return null;
          },
          erc721Description() {
            if (this.erc721.symbol) {
              return "symbol: '" + (this.erc721.symbol || '') + "'";
            }
            return null;
          },
          // --- ERC-20: ---
          sortedFilteredERC20Events() {
            // console.log(now() + " sortedFilteredERC20Events - this.settings.erc20.eventsTable: " + JSON.stringify(this.settings.erc20.eventsTable));
            const results = [];
            let regex = null;
            if (this.settings.erc20.eventsTable.filter != null && this.settings.erc20.eventsTable.filter.length > 0) {
              try {
                regex = new RegExp(this.settings.erc20.eventsTable.filter, 'i');
              } catch (e) {
                console.log(now() + " sortedFilteredERC20Events - regex error: " + e.message);
                regex = new RegExp(/thequickbrowndogjumpsoverthelazyfox/, 'i');
              }
            }
            for (const event of this.erc20.events) {
              let include = true;
              if (regex) {
                if (event.name == "Transfer") {
                  if (!(regex.test(event.from) || regex.test(event.to) || regex.test(event.txHash) || regex.test(event.blockNumber.toString()))) {
                    include = false;
                  }
                } else if (event.name == "Approval") {
                  if (!(regex.test(event.owner) || regex.test(event.spender) || regex.test(event.txHash) || regex.test(event.blockNumber))) {
                    include = false;
                  }
                }
              }
              if (include) {
                results.push(event);
              }
            }
            if (this.settings.erc20.eventsTable.sortOption == "txorderasc") {
              results.sort((a, b) => {
                if (a.blockNumber == b.blockNumber) {
                  return a.logIndex - b.logIndex;
                } else {
                  return a.blockNumber - b.blockNumber;
                }
              });
            } else if (this.settings.erc20.eventsTable.sortOption == "txorderdsc") {
              results.sort((a, b) => {
                if (a.blockNumber == b.blockNumber) {
                  return b.logIndex - a.logIndex;
                } else {
                  return b.blockNumber - a.blockNumber;
                }
              });
            }
            return results;
          },
          pagedSortedFilteredERC20Events() {
            return this.sortedFilteredERC20Events.slice((this.settings.erc20.eventsTable.currentPage - 1) * this.settings.erc20.eventsTable.pageSize, this.settings.erc20.eventsTable.currentPage * this.settings.erc20.eventsTable.pageSize);
          },
          sortedFilteredERC20Balances() {
            // console.log(now() + " sortedFilteredERC20Balances - this.settings.erc20.balancesTable: " + JSON.stringify(this.settings.erc20.balancesTable));
            const results = [];
            let regex = null;
            if (this.settings.erc20.balancesTable.filter != null && this.settings.erc20.balancesTable.filter.length > 0) {
              try {
                regex = new RegExp(this.settings.erc20.balancesTable.filter, 'i');
              } catch (e) {
                console.log(now() + " sortedFilteredERC20Balances - regex error: " + e.message);
                regex = new RegExp(/thequickbrowndogjumpsoverthelazyfox/, 'i');
              }
            }
            for (const balance of this.erc20.balances) {
              let include = true;
              if (regex) {
                if (!(regex.test(balance.owner) || regex.test(balance.balance.txHash) || regex.test(balance.balance.blockNumber))) {
                  include = false;
                }
              }
              if (include) {
                results.push(balance);
              }
            }
            if (this.settings.erc20.balancesTable.sortOption == "txorderasc") {
              results.sort((a, b) => {
                if (a.blockNumber == b.blockNumber) {
                  return a.logIndex - b.logIndex;
                } else {
                  return a.blockNumber - b.blockNumber;
                }
              });
            } else if (this.settings.erc20.balancesTable.sortOption == "txorderdsc") {
              results.sort((a, b) => {
                if (a.blockNumber == b.blockNumber) {
                  return b.logIndex - a.logIndex;
                } else {
                  return b.blockNumber - a.blockNumber;
                }
              });
            } else if (this.settings.erc20.balancesTable.sortOption == "ownerasc") {
              results.sort((a, b) => {
                return ('' + a.owner).localeCompare(b.owner);
              });
            } else if (this.settings.erc20.balancesTable.sortOption == "ownerdsc") {
              results.sort((a, b) => {
                return ('' + b.owner).localeCompare(a.owner);
              });
            } else if (this.settings.erc20.balancesTable.sortOption == "balanceasc") {
              results.sort((a, b) => {
                return a.balance.tokens - b.balance.tokens;
              });
            } else if (this.settings.erc20.balancesTable.sortOption == "balancedsc") {
              results.sort((a, b) => {
                return b.balance.tokens - a.balance.tokens;
              });
            }
            return results;
          },
          pagedSortedFilteredERC20Balances() {
            return this.sortedFilteredERC20Balances.slice((this.settings.erc20.balancesTable.currentPage - 1) * this.settings.erc20.balancesTable.pageSize, this.settings.erc20.balancesTable.currentPage * this.settings.erc20.balancesTable.pageSize);
          },
          sortedFilteredERC20Allowances() {
            // console.log(now() + " sortedFilteredERC20Allowances - this.settings.erc20.allowancesTable: " + JSON.stringify(this.settings.erc20.allowancesTable));
            const results = [];
            let regex = null;
            if (this.settings.erc20.allowancesTable.filter != null && this.settings.erc20.allowancesTable.filter.length > 0) {
              try {
                regex = new RegExp(this.settings.erc20.allowancesTable.filter, 'i');
              } catch (e) {
                console.log(now() + " sortedFilteredERC20Allowances - regex error: " + e.message);
                regex = new RegExp(/thequickbrowndogjumpsoverthelazyfox/, 'i');
              }
            }
            for (const allowance of this.erc20.allowances) {
              let include = true;
              if (regex) {
                if (!(regex.test(allowance.owner) || regex.test(allowance.spender) || regex.test(allowance.tokens.txHash) || regex.test(allowance.tokens.blockNumber))) {
                  include = false;
                }
              }
              if (include) {
                results.push(allowance);
              }
            }
            if (this.settings.erc20.allowancesTable.sortOption == "txorderasc") {
              results.sort((a, b) => {
                if (a.tokens.blockNumber == b.tokens.blockNumber) {
                  return a.tokens.logIndex - b.tokens.logIndex;
                } else {
                  return a.tokens.blockNumber - b.tokens.blockNumber;
                }
              });
            } else if (this.settings.erc20.allowancesTable.sortOption == "txorderdsc") {
              results.sort((a, b) => {
                if (a.tokens.blockNumber == b.tokens.blockNumber) {
                  return b.tokens.logIndex - a.tokens.logIndex;
                } else {
                  return b.tokens.blockNumber - a.tokens.blockNumber;
                }
              });
            } else if (this.settings.erc20.allowancesTable.sortOption == "ownerasc") {
              results.sort((a, b) => {
                return ('' + a.owner).localeCompare(b.owner);
              });
            } else if (this.settings.erc20.allowancesTable.sortOption == "ownerdsc") {
              results.sort((a, b) => {
                return ('' + b.owner).localeCompare(a.owner);
              });
            } else if (this.settings.erc20.allowancesTable.sortOption == "spenderasc") {
              results.sort((a, b) => {
                return ('' + a.spender).localeCompare(b.spender);
              });
            } else if (this.settings.erc20.allowancesTable.sortOption == "spenderdsc") {
              results.sort((a, b) => {
                return ('' + b.spender).localeCompare(a.spender);
              });
            } else if (this.settings.erc20.allowancesTable.sortOption == "tokensasc") {
              results.sort((a, b) => {
                return a.tokens.tokens - b.tokens.tokens;
              });
            } else if (this.settings.erc20.allowancesTable.sortOption == "tokensdsc") {
              results.sort((a, b) => {
                return b.tokens.tokens - a.tokens.tokens;
              });
            }
            return results;
          },
          pagedSortedFilteredAllowances() {
            return this.sortedFilteredERC20Allowances.slice((this.settings.erc20.allowancesTable.currentPage - 1) * this.settings.erc20.allowancesTable.pageSize, this.settings.erc20.allowancesTable.currentPage * this.settings.erc20.allowancesTable.pageSize);
          },

          // --- ERC-721: ---
          sortedFilteredERC721Events() {
            // console.log(now() + " sortedFilteredERC721Events - this.settings.erc721.eventsTable: " + JSON.stringify(this.settings.erc721.eventsTable));
            const results = [];
            let regex = null;
            if (this.settings.erc721.eventsTable.filter != null && this.settings.erc721.eventsTable.filter.length > 0) {
              try {
                regex = new RegExp(this.settings.erc721.eventsTable.filter, 'i');
              } catch (e) {
                console.log(now() + " sortedFilteredERC721Events - regex error: " + e.message);
                regex = new RegExp(/thequickbrowndogjumpsoverthelazyfox/, 'i');
              }
            }
            for (const event of this.erc721.events) {
              let include = true;
              if (regex) {
                if (event.name == "Transfer") {
                  if (!(regex.test(event.from) || regex.test(event.to)  || regex.test(event.tokenId.toString())|| regex.test(event.txHash) || regex.test(event.blockNumber.toString()))) {
                    include = false;
                  }
                } else if (event.name == "Approval") {
                  if (!(regex.test(event.owner) || regex.test(event.spender)  || regex.test(event.tokenId.toString())|| regex.test(event.txHash) || regex.test(event.blockNumber))) {
                    include = false;
                  }
                } else if (event.name == "ApprovalForAll") {
                  if (!(regex.test(event.owner) || regex.test(event.operator)  || regex.test(event.txHash) || regex.test(event.blockNumber))) {
                    include = false;
                  }
                }
              }
              if (include) {
                results.push(event);
              }
            }
            if (this.settings.erc721.eventsTable.sortOption == "txorderasc") {
              results.sort((a, b) => {
                if (a.blockNumber == b.blockNumber) {
                  return a.logIndex - b.logIndex;
                } else {
                  return a.blockNumber - b.blockNumber;
                }
              });
            } else if (this.settings.erc721.eventsTable.sortOption == "txorderdsc") {
              results.sort((a, b) => {
                if (a.blockNumber == b.blockNumber) {
                  return b.logIndex - a.logIndex;
                } else {
                  return b.blockNumber - a.blockNumber;
                }
              });
            }
            return results;
          },
          pagedSortedFilteredERC721Events() {
            return this.sortedFilteredERC721Events.slice((this.settings.erc721.eventsTable.currentPage - 1) * this.settings.erc721.eventsTable.pageSize, this.settings.erc721.eventsTable.currentPage * this.settings.erc721.eventsTable.pageSize);
          },

          sortedFilteredERC721Tokens() {
            // console.log(now() + " sortedFilteredERC721Tokens - this.settings.erc721.tokensTable: " + JSON.stringify(this.settings.erc721.tokensTable));
            const results = [];
            let regex = null;
            if (this.settings.erc721.tokensTable.filter != null && this.settings.erc721.tokensTable.filter.length > 0) {
              try {
                regex = new RegExp(this.settings.erc721.tokensTable.filter, 'i');
              } catch (e) {
                console.log(now() + " sortedFilteredERC721Tokens - regex error: " + e.message);
                regex = new RegExp(/thequickbrowndogjumpsoverthelazyfox/, 'i');
              }
            }
            for (const token of this.erc721.tokens) {
              let include = true;
              if (regex) {
                if (!(regex.test(token.tokenId) || regex.test(token.owner) || regex.test(token.txHash) || regex.test(token.blockNumber))) {
                  include = false;
                }
              }
              if (include) {
                results.push(token);
              }
            }
            if (this.settings.erc721.tokensTable.sortOption == "txorderasc") {
              results.sort((a, b) => {
                if (a.blockNumber == b.blockNumber) {
                  return a.logIndex - b.logIndex;
                } else {
                  return a.blockNumber - b.blockNumber;
                }
              });
            } else if (this.settings.erc721.tokensTable.sortOption == "txorderdsc") {
              results.sort((a, b) => {
                if (a.blockNumber == b.blockNumber) {
                  return b.logIndex - a.logIndex;
                } else {
                  return b.blockNumber - a.blockNumber;
                }
              });
            } else if (this.settings.erc721.tokensTable.sortOption == "tokenidasc") {
              results.sort((a, b) => {
                return a.tokenId - b.tokenId;
              });
            } else if (this.settings.erc721.tokensTable.sortOption == "tokeniddsc") {
              results.sort((a, b) => {
                return b.tokenId - a.tokenId;
              });
            } else if (this.settings.erc721.tokensTable.sortOption == "ownerasc") {
              results.sort((a, b) => {
                return ('' + a.owner).localeCompare(b.owner);
              });
            } else if (this.settings.erc721.tokensTable.sortOption == "ownerdsc") {
              results.sort((a, b) => {
                return ('' + b.owner).localeCompare(a.owner);
              });
            }
            return results;
          },
          pagedSortedFilteredERC721Tokens() {
            // console.log(now() + " pagedSortedFilteredERC721Tokens - this.settings.erc721.tokensTable: " + JSON.stringify(this.settings.erc721.tokensTable));
            return this.sortedFilteredERC721Tokens.slice((this.settings.erc721.tokensTable.currentPage - 1) * this.settings.erc721.tokensTable.pageSize, this.settings.erc721.tokensTable.currentPage * this.settings.erc721.tokensTable.pageSize);
          },

          sortedFilteredERC721ApprovalForAlls() {
            // console.log(now() + " sortedFilteredERC721ApprovalForAlls - this.settings.erc20.allowancesTable: " + JSON.stringify(this.settings.erc20.allowancesTable));
            const results = [];
            let regex = null;
            if (this.settings.erc721.approvalForAllsTable.filter != null && this.settings.erc721.approvalForAllsTable.filter.length > 0) {
              try {
                regex = new RegExp(this.settings.erc721.approvalForAllsTable.filter, 'i');
              } catch (e) {
                console.log(now() + " sortedFilteredERC721ApprovalForAlls - regex error: " + e.message);
                regex = new RegExp(/thequickbrowndogjumpsoverthelazyfox/, 'i');
              }
            }
            for (const approvalForAll of this.erc721.approvalForAlls) {
              let include = true;
              if (regex) {
                if (!(regex.test(approvalForAll.owner) || regex.test(approvalForAll.operator) || regex.test(approvalForAll.txHash) || regex.test(approvalForAll.blockNumber))) {
                  include = false;
                }
              }
              if (include) {
                results.push(approvalForAll);
              }
            }
            if (this.settings.erc721.approvalForAllsTable.sortOption == "txorderasc") {
              results.sort((a, b) => {
                if (a.blockNumber == b.blockNumber) {
                  return a.logIndex - b.logIndex;
                } else {
                  return a.blockNumber - b.blockNumber;
                }
              });
            } else if (this.settings.erc721.approvalForAllsTable.sortOption == "txorderdsc") {
              results.sort((a, b) => {
                if (a.blockNumber == b.blockNumber) {
                  return b.logIndex - a.logIndex;
                } else {
                  return b.blockNumber - a.blockNumber;
                }
              });
            } else if (this.settings.erc721.approvalForAllsTable.sortOption == "ownerasc") {
              results.sort((a, b) => {
                if (('' + a.owner).localeCompare(b.owner) == 0) {
                  if (a.blockNumber == b.blockNumber) {
                    return a.logIndex - b.logIndex;
                  } else {
                    return b.blockNumber - a.blockNumber;
                  }
                } else {
                  return ('' + a.owner).localeCompare(b.owner);
                }
              });
            } else if (this.settings.erc721.approvalForAllsTable.sortOption == "ownerdsc") {
              results.sort((a, b) => {
                if (('' + a.owner).localeCompare(b.owner) == 0) {
                  if (a.blockNumber == b.blockNumber) {
                    return a.logIndex - b.logIndex;
                  } else {
                    return b.blockNumber - a.blockNumber;
                  }
                } else {
                  return ('' + b.owner).localeCompare(a.owner);
                }
              });
            } else if (this.settings.erc721.approvalForAllsTable.sortOption == "operatorasc") {
              results.sort((a, b) => {
                if (('' + a.operator).localeCompare(b.operator) == 0) {
                  if (a.blockNumber == b.blockNumber) {
                    return a.logIndex - b.logIndex;
                  } else {
                    return b.blockNumber - a.blockNumber;
                  }
                } else {
                  return ('' + a.operator).localeCompare(b.operator);
                }
              });
            } else if (this.settings.erc721.approvalForAllsTable.sortOption == "operatordsc") {
              results.sort((a, b) => {
                if (('' + a.operator).localeCompare(b.operator) == 0) {
                  if (a.blockNumber == b.blockNumber) {
                    return a.logIndex - b.logIndex;
                  } else {
                    return b.blockNumber - a.blockNumber;
                  }
                } else {
                  return ('' + b.operator).localeCompare(a.operator);
                }
              });
            } else if (this.settings.erc721.approvalForAllsTable.sortOption == "approvedasc") {
              results.sort((a, b) => {
                if (a.approved == b.approved) {
                  if (a.blockNumber == b.blockNumber) {
                    return a.logIndex - b.logIndex;
                  } else {
                    return b.blockNumber - a.blockNumber;
                  }
                } else {
                  return (a.approved ? 1 : 0) - (b.approved ? 1 : 0);
                }
              });
            } else if (this.settings.erc721.approvalForAllsTable.sortOption == "approveddsc") {
              results.sort((a, b) => {
                if (a.approved == b.approved) {
                  if (a.blockNumber == b.blockNumber) {
                    return a.logIndex - b.logIndex;
                  } else {
                    return b.blockNumber - a.blockNumber;
                  }
                } else {
                  return (b.approved ? 1 : 0) - (a.approved ? 1 : 0);
                }
              });
            }
            return results;
          },
          pagedSortedFilteredERC721ApprovalForAlls() {
            return this.sortedFilteredERC721ApprovalForAlls.slice((this.settings.erc721.approvalForAllsTable.currentPage - 1) * this.settings.erc721.approvalForAllsTable.pageSize, this.settings.erc721.approvalForAllsTable.currentPage * this.settings.erc721.approvalForAllsTable.pageSize);
          },

          sortedFilteredERC721Approvals() {
            // console.log(now() + " sortedFilteredERC721Approvals - this.settings.erc721.approvalsTable: " + JSON.stringify(this.settings.erc721.approvalsTable));
            const results = [];
            let regex = null;
            if (this.settings.erc721.approvalsTable.filter != null && this.settings.erc721.approvalsTable.filter.length > 0) {
              try {
                regex = new RegExp(this.settings.erc721.approvalsTable.filter, 'i');
              } catch (e) {
                console.log(now() + " sortedFilteredERC721Approvals - regex error: " + e.message);
                regex = new RegExp(/thequickbrowndogjumpsoverthelazyfox/, 'i');
              }
            }
            for (const approval of this.erc721.approvals) {
              let include = true;
              if (regex) {
                if (!(regex.test(approval.owner) || regex.test(approval.spender) || regex.test(approval.txHash) || regex.test(approval.blockNumber))) {
                  include = false;
                }
              }
              if (include) {
                results.push(approval);
              }
            }
            if (this.settings.erc721.approvalsTable.sortOption == "txorderasc") {
              results.sort((a, b) => {
                if (a.blockNumber == b.blockNumber) {
                  return a.logIndex - b.logIndex;
                } else {
                  return a.blockNumber - b.blockNumber;
                }
              });
            } else if (this.settings.erc721.approvalsTable.sortOption == "txorderdsc") {
              results.sort((a, b) => {
                if (a.blockNumber == b.blockNumber) {
                  return b.logIndex - a.logIndex;
                } else {
                  return b.blockNumber - a.blockNumber;
                }
              });
            } else if (this.settings.erc721.approvalsTable.sortOption == "ownerasc") {
              results.sort((a, b) => {
                if (('' + a.owner).localeCompare(b.owner) == 0) {
                  if (a.blockNumber == b.blockNumber) {
                    return a.logIndex - b.logIndex;
                  } else {
                    return b.blockNumber - a.blockNumber;
                  }
                } else {
                  return ('' + a.owner).localeCompare(b.owner);
                }
              });
            } else if (this.settings.erc721.approvalsTable.sortOption == "ownerdsc") {
              results.sort((a, b) => {
                if (('' + a.owner).localeCompare(b.owner) == 0) {
                  if (a.blockNumber == b.blockNumber) {
                    return a.logIndex - b.logIndex;
                  } else {
                    return b.blockNumber - a.blockNumber;
                  }
                } else {
                  return ('' + b.owner).localeCompare(a.owner);
                }
              });
            } else if (this.settings.erc721.approvalsTable.sortOption == "spenderasc") {
              results.sort((a, b) => {
                if (('' + a.spender).localeCompare(b.spender) == 0) {
                  if (a.blockNumber == b.blockNumber) {
                    return a.logIndex - b.logIndex;
                  } else {
                    return b.blockNumber - a.blockNumber;
                  }
                } else {
                  return ('' + a.spender).localeCompare(b.spender);
                }
              });
            } else if (this.settings.erc721.approvalsTable.sortOption == "spenderdsc") {
              results.sort((a, b) => {
                if (('' + a.spender).localeCompare(b.spender) == 0) {
                  if (a.blockNumber == b.blockNumber) {
                    return a.logIndex - b.logIndex;
                  } else {
                    return b.blockNumber - a.blockNumber;
                  }
                } else {
                  return ('' + b.spender).localeCompare(a.spender);
                }
              });
            } else if (this.settings.erc721.approvalsTable.sortOption == "tokenidasc") {
              results.sort((a, b) => {
                return a.tokenId - b.tokenId;
              });
            } else if (this.settings.erc721.approvalsTable.sortOption == "tokeniddsc") {
              results.sort((a, b) => {
                return b.tokenId - a.tokenId;
              });
            }
            return results;
          },
          pagedSortedFilteredERC721Approvals() {
            return this.sortedFilteredERC721Approvals.slice((this.settings.erc721.approvalsTable.currentPage - 1) * this.settings.erc721.approvalsTable.pageSize, this.settings.erc721.approvalsTable.currentPage * this.settings.erc721.approvalsTable.pageSize);
          },

          // --- ERC-1155: ---
          sortedFilteredERC1155Events() {
            console.log(now() + " sortedFilteredERC1155Events - this.settings.erc1155.eventsTable: " + JSON.stringify(this.settings.erc1155.eventsTable));
            const results = [];
            let regex = null;
            if (this.settings.erc1155.eventsTable.filter != null && this.settings.erc1155.eventsTable.filter.length > 0) {
              try {
                regex = new RegExp(this.settings.erc1155.eventsTable.filter, 'i');
              } catch (e) {
                console.log(now() + " sortedFilteredERC1155Events - regex error: " + e.message);
                regex = new RegExp(/thequickbrowndogjumpsoverthelazyfox/, 'i');
              }
            }
            for (const event of this.erc1155.events) {
              let include = true;
              if (regex) {
                if (event.name == "TransferSingle" || event.name == "TransferBatch") {
                  if (!(regex.test(event.from) || regex.test(event.to) || regex.test(event.txHash) || regex.test(event.blockNumber.toString()))) {
                    include = false;
                  }
                } else if (event.name == "ApprovalForAll") {
                  if (!(regex.test(event.owner) || regex.test(event.operator) || regex.test(event.txHash) || regex.test(event.blockNumber))) {
                    include = false;
                  }
                }
              }
              if (include) {
                results.push(event);
              }
            }
            // console.log("results: " + JSON.stringify(results));
            if (this.settings.erc1155.eventsTable.sortOption == "txorderasc") {
              results.sort((a, b) => {
                if (a.blockNumber == b.blockNumber) {
                  return a.logIndex - b.logIndex;
                } else {
                  return a.blockNumber - b.blockNumber;
                }
              });
            } else if (this.settings.erc1155.eventsTable.sortOption == "txorderdsc") {
              results.sort((a, b) => {
                if (a.blockNumber == b.blockNumber) {
                  return b.logIndex - a.logIndex;
                } else {
                  return b.blockNumber - a.blockNumber;
                }
              });
            }
            return results;
          },
          pagedSortedFilteredERC1155Events() {
            return this.sortedFilteredERC1155Events.slice((this.settings.erc1155.eventsTable.currentPage - 1) * this.settings.erc1155.eventsTable.pageSize, this.settings.erc1155.eventsTable.currentPage * this.settings.erc1155.eventsTable.pageSize);
          },

          sortedFilteredERC1155Tokens() {
            // console.log(now() + " sortedFilteredERC1155Tokens - this.settings.erc1155.tokensTable: " + JSON.stringify(this.settings.erc1155.tokensTable));
            const results = [];
            let regex = null;
            if (this.settings.erc1155.tokensTable.filter != null && this.settings.erc1155.tokensTable.filter.length > 0) {
              try {
                regex = new RegExp(this.settings.erc1155.tokensTable.filter, 'i');
              } catch (e) {
                console.log(now() + " sortedFilteredERC1155Tokens - regex error: " + e.message);
                regex = new RegExp(/thequickbrowndogjumpsoverthelazyfox/, 'i');
              }
            }
            for (const token of this.erc1155.tokens) {
              // console.log(JSON.stringify(token));
              let include = true;
              if (regex) {
                if (!(regex.test(token.tokenId) || regex.test(token.owner) || regex.test(token.txHash) || regex.test(token.blockNumber))) {
                  include = false;
                }
              }
              if (include) {
                results.push(token);
              }
            }
            if (this.settings.erc1155.tokensTable.sortOption == "txorderasc") {
              results.sort((a, b) => {
                if (a.blockNumber == b.blockNumber) {
                  return a.logIndex - b.logIndex;
                } else {
                  return a.blockNumber - b.blockNumber;
                }
              });
            } else if (this.settings.erc1155.tokensTable.sortOption == "txorderdsc") {
              results.sort((a, b) => {
                if (a.blockNumber == b.blockNumber) {
                  return b.logIndex - a.logIndex;
                } else {
                  return b.blockNumber - a.blockNumber;
                }
              });
            } else if (this.settings.erc1155.tokensTable.sortOption == "tokenidasc") {
              results.sort((a, b) => {
                if (a.tokenId == b.tokenId) {
                  return ('' + a.owner).localeCompare(b.owner);
                } else {
                  return a.tokenId - b.tokenId;
                }
              });
            } else if (this.settings.erc1155.tokensTable.sortOption == "tokeniddsc") {
              results.sort((a, b) => {
                if (a.tokenId == b.tokenId) {
                  return ('' + a.owner).localeCompare(b.owner);
                } else {
                  return b.tokenId - a.tokenId;
                }
              });
            } else if (this.settings.erc1155.tokensTable.sortOption == "ownerasc") {
              results.sort((a, b) => {
                if (('' + a.owner).localeCompare(b.owner) == 0) {
                  return a.tokenId - b.tokenId;
                } else {
                  return ('' + a.owner).localeCompare(b.owner);
                }
              });
            } else if (this.settings.erc1155.tokensTable.sortOption == "ownerdsc") {
              results.sort((a, b) => {
                if (('' + a.owner).localeCompare(b.owner) == 0) {
                  return a.tokenId - b.tokenId;
                } else {
                  return ('' + b.owner).localeCompare(a.owner);
                }
              });
            }
            return results;
          },
          pagedSortedFilteredERC1155Tokens() {
            // console.log(now() + " pagedSortedFilteredERC1155Tokens - this.settings.erc1155.tokensTable: " + JSON.stringify(this.settings.erc1155.tokensTable));
            return this.sortedFilteredERC1155Tokens.slice((this.settings.erc1155.tokensTable.currentPage - 1) * this.settings.erc1155.tokensTable.pageSize, this.settings.erc1155.tokensTable.currentPage * this.settings.erc1155.tokensTable.pageSize);
          },

          sortedFilteredERC1155ApprovalForAlls() {
            console.log(now() + " sortedFilteredERC1155ApprovalForAlls - this.settings.erc1155.approvalForAllsTable: " + JSON.stringify(this.settings.erc1155.approvalForAllsTable));
            const results = [];
            let regex = null;
            if (this.settings.erc1155.approvalForAllsTable.filter != null && this.settings.erc1155.approvalForAllsTable.filter.length > 0) {
              try {
                regex = new RegExp(this.settings.erc1155.approvalForAllsTable.filter, 'i');
              } catch (e) {
                console.log(now() + " sortedFilteredERC1155ApprovalForAlls - regex error: " + e.message);
                regex = new RegExp(/thequickbrowndogjumpsoverthelazyfox/, 'i');
              }
            }
            for (const approvalForAll of this.erc1155.approvalForAlls) {
              let include = true;
              if (regex) {
                if (!(regex.test(approvalForAll.owner) || regex.test(approvalForAll.operator) || regex.test(approvalForAll.txHash) || regex.test(approvalForAll.blockNumber))) {
                  include = false;
                }
              }
              if (include) {
                results.push(approvalForAll);
              }
            }
            if (this.settings.erc1155.approvalForAllsTable.sortOption == "txorderasc") {
              results.sort((a, b) => {
                if (a.blockNumber == b.blockNumber) {
                  return a.logIndex - b.logIndex;
                } else {
                  return a.blockNumber - b.blockNumber;
                }
              });
            } else if (this.settings.erc1155.approvalForAllsTable.sortOption == "txorderdsc") {
              results.sort((a, b) => {
                if (a.blockNumber == b.blockNumber) {
                  return b.logIndex - a.logIndex;
                } else {
                  return b.blockNumber - a.blockNumber;
                }
              });
            } else if (this.settings.erc1155.approvalForAllsTable.sortOption == "ownerasc") {
              results.sort((a, b) => {
                if (('' + a.owner).localeCompare(b.owner) == 0) {
                  if (a.blockNumber == b.blockNumber) {
                    return a.logIndex - b.logIndex;
                  } else {
                    return b.blockNumber - a.blockNumber;
                  }
                } else {
                  return ('' + a.owner).localeCompare(b.owner);
                }
              });
            } else if (this.settings.erc1155.approvalForAllsTable.sortOption == "ownerdsc") {
              results.sort((a, b) => {
                if (('' + a.owner).localeCompare(b.owner) == 0) {
                  if (a.blockNumber == b.blockNumber) {
                    return a.logIndex - b.logIndex;
                  } else {
                    return b.blockNumber - a.blockNumber;
                  }
                } else {
                  return ('' + b.owner).localeCompare(a.owner);
                }
              });
            } else if (this.settings.erc1155.approvalForAllsTable.sortOption == "operatorasc") {
              results.sort((a, b) => {
                if (('' + a.operator).localeCompare(b.operator) == 0) {
                  if (a.blockNumber == b.blockNumber) {
                    return a.logIndex - b.logIndex;
                  } else {
                    return b.blockNumber - a.blockNumber;
                  }
                } else {
                  return ('' + a.operator).localeCompare(b.operator);
                }
              });
            } else if (this.settings.erc1155.approvalForAllsTable.sortOption == "operatordsc") {
              results.sort((a, b) => {
                if (('' + a.operator).localeCompare(b.operator) == 0) {
                  if (a.blockNumber == b.blockNumber) {
                    return a.logIndex - b.logIndex;
                  } else {
                    return b.blockNumber - a.blockNumber;
                  }
                } else {
                  return ('' + b.operator).localeCompare(a.operator);
                }
              });
            } else if (this.settings.erc1155.approvalForAllsTable.sortOption == "approvedasc") {
              results.sort((a, b) => {
                if (a.approved == b.approved) {
                  if (a.blockNumber == b.blockNumber) {
                    return a.logIndex - b.logIndex;
                  } else {
                    return b.blockNumber - a.blockNumber;
                  }
                } else {
                  return (a.approved ? 1 : 0) - (b.approved ? 1 : 0);
                }
              });
            } else if (this.settings.erc1155.approvalForAllsTable.sortOption == "approveddsc") {
              results.sort((a, b) => {
                if (a.approved == b.approved) {
                  if (a.blockNumber == b.blockNumber) {
                    return a.logIndex - b.logIndex;
                  } else {
                    return b.blockNumber - a.blockNumber;
                  }
                } else {
                  return (b.approved ? 1 : 0) - (a.approved ? 1 : 0);
                }
              });
            }
            return results;
          },
          pagedSortedFilteredERC1155ApprovalForAlls() {
            return this.sortedFilteredERC1155ApprovalForAlls.slice((this.settings.erc1155.approvalForAllsTable.currentPage - 1) * this.settings.erc1155.approvalForAllsTable.pageSize, this.settings.erc1155.approvalForAllsTable.currentPage * this.settings.erc1155.approvalForAllsTable.pageSize);
          },

        },

        // --- METHODS ---
        methods: {
          sampleContracts(type) {
            const results = [];
            for (const [ contract, contractData ] of Object.entries(this.network && this.network.contracts || {})) {
              if (contractData.type == type) {
                results.push({ contract, name: contractData.name });
              }
            }
            return results;
          },
          nonFungibleViewerURL(contract, tokenId) {
            return this.nonFungibleViewer.replace(/\${contract}/, contract).replace(/\${tokenId}/, tokenId);
          },
          async viewNonFungible(type, contract, tokenId) {
            console.log(now() + " retrieveERC20 viewNonFungible - type: " + type + ", contract: " + contract + ", tokenId: " + tokenId);
            Vue.set(this.modalNonFungible, 'show', true);
            Vue.set(this.modalNonFungible, 'type', type);
            Vue.set(this.modalNonFungible, 'contract', contract);
            Vue.set(this.modalNonFungible, 'tokenId', tokenId);

            const provider = new ethers.providers.Web3Provider(window.ethereum);
            const interface = new ethers.Contract(contract, type == "erc721" ? ERC721ABI : ERC1155ABI, provider);
            Vue.set(this.modalNonFungible, 'logs', []);
            this.modalNonFungible.logs.push({ log:now() + " " + type.replace(/erc/, "ERC-") + " @ " + contract });
            let erc721Owner = null;
            let uriResult = null;
            if (type == "erc721") {
              erc721Owner = await interface.ownerOf(tokenId);
              this.modalNonFungible.logs.push({ log:now() + " erc721.ownerOf(" + tokenId + ") returned '" + erc721Owner + "'"});
            }
            if (type == "erc721") {
              uriResults = await interface.tokenURI(tokenId);
              this.modalNonFungible.logs.push({ log:now() + " erc721.tokenURI(" + tokenId + ") returned '" + uriResults + "'" });
            } else if (type == "erc1155") {
              uriResults = await interface.uri(tokenId);
              this.modalNonFungible.logs.push({ log:now() + " erc1155.uri(" + tokenId + ") returned '" + uriResults + "'" });
            }
            console.log("uriResults: " + uriResults);
            if (uriResults.substring(0, 12) == "ipfs://ipfs/") {
              uriResults = "https://ipfs.io/" + uriResults.substring(7)
              this.modalNonFungible.logs.push({ log:now() + " Updated URI to '" + uriResults + "'" });
            } else if (uriResults.substring(0, 7) == "ipfs://") {
              uriResults = "https://ipfs.io/ipfs/" + uriResults.substring(7);
              this.modalNonFungible.logs.push({ log:now() + " Updated URI to '" + uriResults + "'" });
            }
            if (type == "erc1155") {
              if (uriResults.indexOf("0x{id}") >= 0) {
                uriResults = uriResults.replace(/0x{id}/, tokenId);
                this.modalNonFungible.logs.push({ log:now() + " Updated URI to '" + uriResults + "'" });
              }
              if (uriResults.indexOf("{id}") >= 0) {
                uriResults = uriResults.replace(/{id}/, tokenId);
                this.modalNonFungible.logs.push({ log:now() + " Updated URI to '" + uriResults + "'" });
              }
            }
            try {
              this.modalNonFungible.logs.push({ log:now() + " Fetching '" + uriResults + "'" });
              try {
                const fileContent = await fetch(uriResults, { mode: 'cors', signal: AbortSignal.timeout(10000) }).then(response => response.json());
                this.modalNonFungible.logs.push({ log:now() + " Fetched '" + JSON.stringify(fileContent, null, 2) + "'" });
                console.log(now() + " retrieveERC20 viewNonFungible - fileContent: '" + JSON.stringify(fileContent, null, 2) + "'");

                // name: null,
                // description: null,
                // attributes: [],
                // image: null,


                this.modalNonFungible.name = fileContent && fileContent.name || null;
                this.modalNonFungible.logs.push({ log:now() + " name '" + this.modalNonFungible.name + "'" });
                this.modalNonFungible.description = fileContent && fileContent.description || null;
                this.modalNonFungible.logs.push({ log:now() + " description '" + this.modalNonFungible.description + "'" });
                this.modalNonFungible.image = fileContent && fileContent.image || null;
                this.modalNonFungible.logs.push({ log:now() + " image '" + this.modalNonFungible.image + "'" });
                if (this.modalNonFungible.image.substring(0, 12) == "ipfs://ipfs/") {
                  this.modalNonFungible.image = "https://ipfs.io/" + this.modalNonFungible.image.substring(7)
                  this.modalNonFungible.logs.push({ log:now() + " Updated image to '" + this.modalNonFungible.image + "'" });
                } else if (this.modalNonFungible.image.substring(0, 7) == "ipfs://") {
                  this.modalNonFungible.image = "https://ipfs.io/ipfs/" + this.modalNonFungible.image.substring(7);
                  this.modalNonFungible.logs.push({ log:now() + " Updated image to '" + this.modalNonFungible.image + "'" });
                }
                this.modalNonFungible.attributes = fileContent && fileContent.attributes || null;
                this.modalNonFungible.logs.push({ log:now() + " attributes '" + this.modalNonFungible.attributes + "'" });

              } catch (e) {
                this.modalNonFungible.logs.push({ log:now() + " ERROR Fetched failed" });
                console.log(now() + " ERROR - fetch: '" + e.message);
              }
            } catch (e) {
              console.log(now() + " viewNonFungible - ERROR: " + e.message);
            }


          },

          async retrieveERC20() {
            console.log(now() + " retrieveERC20 BEGIN - settings.erc20: " + JSON.stringify(this.settings.erc20, null, 2));
            const provider = new ethers.providers.Web3Provider(window.ethereum);
            const contract = new ethers.Contract(this.settings.erc20.contract, ERC20ABI, provider);
            const block = await provider.getBlock("latest");
            const latestBlockNumber = parseInt(block.number);
            const timestamp = parseInt(block.timestamp);

            const symbol = await contract.symbol();
            Vue.set(this.erc20, 'symbol', symbol);
            const name = await contract.name();
            Vue.set(this.erc20, 'name', name);
            const decimals = await contract.decimals();
            Vue.set(this.erc20, 'decimals', decimals.toString());
            const totalSupply = await contract.totalSupply();
            Vue.set(this.erc20, 'totalSupply', totalSupply.toString());
            const coinbaseBalanceOf = await contract.balanceOf(this.coinbase);
            Vue.set(this.erc20, 'coinbaseBalanceOf', coinbaseBalanceOf.toString());
            console.log(now() + " retrieveERC20 - coinbaseBalanceOf: " + coinbaseBalanceOf);

            // Retrieve Event Logs
            const events = [];
            const t = this; // async function has a new `this`, so use `t` to represent the original `this`
            async function getLogs(fromBlock, toBlock) {
              console.log(now() + " retrieveERC20.getLogs - fromBlock: " + fromBlock + ", toBlock: " + toBlock);
              let split = false;
              try {
                const filter = {
                  address: t.settings.erc20.contract,
                  fromBlock,
                  toBlock,
                  topics: [
                    [
                      // event Transfer(address indexed from, address indexed to, uint tokens);
                      ethers.utils.id("Transfer(address,address,uint256)"),
                      // event Approval(address indexed owner, address indexed spender, uint tokens);
                      ethers.utils.id("Approval(address,address,uint256)"),
                    ],
                    null,
                    null,
                  ],
                };
                const eventLogs = await provider.getLogs(filter);
                for (const event of eventLogs) {
                  const log = contract.interface.parseLog(event);
                  if (log.eventFragment.name == "Transfer") {
                    // event Transfer(address indexed from, address indexed to, uint tokens);
                    const [ from, to, tokens ] = log.args;
                    events.push({
                      blockNumber: event.blockNumber,
                      confirmations: latestBlockNumber - event.blockNumber,
                      txIndex: parseInt(event.transactionIndex),
                      txHash: event.transactionHash,
                      logIndex: parseInt(event.logIndex),
                      address: event.address,
                      name: log.eventFragment.name,
                      from,
                      to,
                      tokens: tokens.toString(),
                    });
                  } else if (log.eventFragment.name == "Approval") {
                    // event Approval(address indexed owner, address indexed spender, uint tokens);
                    const [ owner, spender, tokens ] = log.args;
                    events.push({
                      blockNumber: event.blockNumber,
                      confirmations: latestBlockNumber - event.blockNumber,
                      txIndex: parseInt(event.transactionIndex),
                      txHash: event.transactionHash,
                      logIndex: parseInt(event.logIndex),
                      address: event.address,
                      name: log.eventFragment.name,
                      owner,
                      spender,
                      tokens: tokens.toString(),
                    });
                  }
                }
                Vue.set(t.erc20, 'events', events);
              } catch (e) {
                split = true;
              }
              if (split) {
                const mid = parseInt((fromBlock + toBlock) / 2);
                await getLogs(fromBlock, mid);
                await getLogs(parseInt(mid) + 1, toBlock);
              }
            }
            const startBlock = 0;
            // const startBlock = latestBlockNumber - 10000;
            await getLogs(startBlock, latestBlockNumber);

            const balanceCollator = {};
            const allowancesCollator = {};
            for (const event of events) {
              if (event.name == "Transfer") {
                if (!(event.from in balanceCollator)) {
                  balanceCollator[event.from] = {
                    blockNumber: event.blockNumber,
                    txIndex: event.txIndex,
                    txHash: event.txHash,
                    logIndex: event.logIndex,
                    tokens: event.from == ADDRESS0 ? "0" : ethers.BigNumber.from(0).sub(event.tokens).toString(),
                  };
                } else {
                  balanceCollator[event.from].blockNumber = event.blockNumber;
                  balanceCollator[event.from].txIndex = event.txIndex;
                  balanceCollator[event.from].txHash = event.txHash;
                  balanceCollator[event.from].logIndex = event.logIndex;
                  balanceCollator[event.from].blockNumber = event.blockNumber;
                  if (event.from != ADDRESS0) {
                    balanceCollator[event.from].tokens = ethers.BigNumber.from(balanceCollator[event.from].tokens).sub(event.tokens).toString();
                  }
                }
                if (!(event.to in balanceCollator)) {
                  balanceCollator[event.to] = {
                    blockNumber: event.blockNumber,
                    txIndex: event.txIndex,
                    txHash: event.txHash,
                    logIndex: event.logIndex,
                    tokens: event.tokens,
                  };
                } else {
                  balanceCollator[event.to].blockNumber = event.blockNumber;
                  balanceCollator[event.to].txIndex = event.txIndex;
                  balanceCollator[event.to].txHash = event.txHash;
                  balanceCollator[event.to].logIndex = event.logIndex;
                  balanceCollator[event.to].tokens = ethers.BigNumber.from(balanceCollator[event.to].tokens).add(event.tokens).toString();
                }
              } else if (event.name == "Approval") {
                if (!(event.owner in allowancesCollator)) {
                  allowancesCollator[event.owner] = {};
                }
                allowancesCollator[event.owner][event.spender] = {
                  blockNumber: event.blockNumber,
                  txIndex: event.txIndex,
                  txHash: event.txHash,
                  logIndex: event.logIndex,
                  tokens: event.tokens,
                };
              }
            }
            Vue.set(this.erc20, 'events', events);
            const balances = [];
            for (const [ owner, balance ] of Object.entries(balanceCollator)) {
              balances.push({ owner, ...balance });
            }
            Vue.set(this.erc20, 'balances', balances);
            const allowances = [];
            for (const [ owner, spenders ] of Object.entries(allowancesCollator)) {
              for (const [spender, tokens] of Object.entries(spenders)) {
                allowances.push({ owner, spender, ...tokens });
              }
            }
            Vue.set(this.erc20, 'allowances', allowances);
            // console.log(now() + " retrieveERC20 END - erc20: " + JSON.stringify(this.erc20, null, 2));
          },

          async retrieveERC721() {
            console.log(now() + " retrieveERC721 BEGIN - settings.erc20: " + JSON.stringify(this.settings.erc20, null, 2));
            const provider = new ethers.providers.Web3Provider(window.ethereum);
            const contract = new ethers.Contract(this.settings.erc721.contract, ERC721ABI, provider);
            const block = await provider.getBlock("latest");
            const latestBlockNumber = parseInt(block.number);
            const timestamp = parseInt(block.timestamp);

            // ERC-721
            // event Transfer(address indexed from, address indexed to, uint256 indexed tokenId);
            // event Approval(address indexed owner, address indexed approved, uint256 indexed tokenId);
            // event ApprovalForAll(address indexed owner, address indexed operator, bool approved);
            //
            // function balanceOf(address owner) external view returns (uint256 balance);
            // function ownerOf(uint256 tokenId) external view returns (address owner);
            // function getApproved(uint256 tokenId) external view returns (address operator);
            // function isApprovedForAll(address owner, address operator) external view returns (bool);
            //
            // function approve(address to, uint256 tokenId) external;
            // function setApprovalForAll(address operator, bool _approved) external;
            // function transferFrom(address from, address to, uint256 tokenId) external;
            // function safeTransferFrom(address from, address to, uint256 tokenId) external;
            // function safeTransferFrom(address from, address to, uint256 tokenId, bytes calldata data) external;

            const symbol = await contract.symbol();
            Vue.set(this.erc721, 'symbol', symbol);
            console.log(now() + " retrieveERC721 - symbol: " + symbol);
            const coinbaseBalanceOf = await contract.balanceOf(this.coinbase);
            Vue.set(this.erc721, 'coinbaseBalanceOf', coinbaseBalanceOf.toString());
            console.log(now() + " retrieveERC721 - coinbaseBalanceOf: " + coinbaseBalanceOf);

            // Retrieve Event Logs
            const events = [];
            const t = this; // async function has a new `this`, so use `t` to represent the original `this`
            async function getLogs(fromBlock, toBlock) {
              console.log(now() + " retrieveERC721.getLogs - fromBlock: " + fromBlock + ", toBlock: " + toBlock);
              let split = false;
              try {
                const filter = {
                  address: t.settings.erc721.contract,
                  fromBlock,
                  toBlock,
                  topics: [
                    [
                      // event Transfer(address indexed from, address indexed to, uint256 indexed tokenId);
                      ethers.utils.id("Transfer(address,address,uint256)"),
                      // event Approval(address indexed owner, address indexed approved, uint256 indexed tokenId);
                      ethers.utils.id("Approval(address,address,uint256)"),
                      // event ApprovalForAll(address indexed owner, address indexed operator, bool approved);
                      ethers.utils.id("ApprovalForAll(address,address,bool)"),
                    ],
                    null,
                    null,
                  ],
                };
                // console.log(now() + " retrieveERC721.getLogs - filter: " + JSON.stringify(filter));
                const eventLogs = await provider.getLogs(filter);
                for (const event of eventLogs) {
                  const log = contract.interface.parseLog(event);
                  if (log.eventFragment.name == "Transfer") {
                    // event Transfer(address indexed from, address indexed to, uint256 indexed tokenId);
                    const [ from, to, tokenId ] = log.args;
                    events.push({
                      blockNumber: event.blockNumber,
                      confirmations: latestBlockNumber - event.blockNumber,
                      txIndex: parseInt(event.transactionIndex),
                      txHash: event.transactionHash,
                      logIndex: parseInt(event.logIndex),
                      address: event.address,
                      name: log.eventFragment.name,
                      from,
                      to,
                      tokenId: tokenId.toString(),
                    });
                  } else if (log.eventFragment.name == "Approval") {
                    // event Approval(address indexed owner, address indexed approved, uint256 indexed tokenId);
                    const [ owner, spender, tokenId ] = log.args;
                    events.push({
                      blockNumber: event.blockNumber,
                      confirmations: latestBlockNumber - event.blockNumber,
                      txIndex: parseInt(event.transactionIndex),
                      txHash: event.transactionHash,
                      logIndex: parseInt(event.logIndex),
                      address: event.address,
                      name: log.eventFragment.name,
                      owner,
                      spender,
                      tokenId: tokenId.toString(),
                    });
                  } else if (log.eventFragment.name == "ApprovalForAll") {
                    // event ApprovalForAll(address indexed owner, address indexed operator, bool approved);
                    const [ owner, operator, approved ] = log.args;
                    events.push({
                      blockNumber: event.blockNumber,
                      confirmations: latestBlockNumber - event.blockNumber,
                      txIndex: parseInt(event.transactionIndex),
                      txHash: event.transactionHash,
                      logIndex: parseInt(event.logIndex),
                      address: event.address,
                      name: log.eventFragment.name,
                      owner,
                      operator,
                      approved: !!approved,
                    });
                  }
                }
                Vue.set(t.erc721, 'events', events);
              } catch (e) {
                split = true;
              }
              if (split) {
                const mid = parseInt((fromBlock + toBlock) / 2);
                await getLogs(fromBlock, mid);
                await getLogs(parseInt(mid) + 1, toBlock);
              }
            }
            const startBlock = 0;
            // const startBlock = latestBlockNumber - 10000;
            await getLogs(startBlock, latestBlockNumber);

            const tokensCollator = {};
            const approvalForAllsCollator = {};
            const approvalsCollator = {};
            for (const event of events) {
              if (event.name == "Transfer") {
                tokensCollator[event.tokenId] = {
                  blockNumber: event.blockNumber,
                  txIndex: event.txIndex,
                  txHash: event.txHash,
                  logIndex: event.logIndex,
                  owner: event.to,
                };
              } else if (event.name == "Approval") {
                approvalsCollator[event.tokenId] = {
                  blockNumber: event.blockNumber,
                  txIndex: event.txIndex,
                  txHash: event.txHash,
                  logIndex: event.logIndex,
                  owner: event.owner,
                  spender: event.spender,
                };
              } else if (event.name == "ApprovalForAll") {
                if (!(event.owner in approvalForAllsCollator)) {
                  approvalForAllsCollator[event.owner] = {};
                }
                approvalForAllsCollator[event.owner][event.operator] = {
                  blockNumber: event.blockNumber,
                  txIndex: event.txIndex,
                  txHash: event.txHash,
                  logIndex: event.logIndex,
                  approved: event.approved,
                };
              } else {
                console.log(now() + " retrieveERC721 - ELSE event: " + JSON.stringify(event));
              }
            }

            const tokens = [];
            for (const [ tokenId, tokenData ] of Object.entries(tokensCollator)) {
              tokens.push({ tokenId, ...tokenData });
            }
            Vue.set(this.erc721, 'tokens', tokens);
            const approvalForAlls = [];
            for (const [ owner, ownerData ] of Object.entries(approvalForAllsCollator)) {
              for (const [ operator, operatorData ] of Object.entries(ownerData)) {
                approvalForAlls.push({ owner, operator, ...operatorData });
              }
            }
            Vue.set(this.erc721, 'approvalForAlls', approvalForAlls);
            const approvals = [];
            for (const [ tokenId, tokenData ] of Object.entries(approvalsCollator)) {
              approvals.push({ tokenId, ...tokenData });
            }
            Vue.set(this.erc721, 'approvals', approvals);
            // console.log(now() + " retrieveERC721 END - erc721: " + JSON.stringify(this.erc721, null, 2));
          },

          async retrieveERC1155() {
            // console.log(now() + " retrieveERC1155 BEGIN - settings.erc20: " + JSON.stringify(this.settings.erc20, null, 2));
            const provider = new ethers.providers.Web3Provider(window.ethereum);
            const contract = new ethers.Contract(this.settings.erc1155.contract, ERC1155ABI, provider);
            const block = await provider.getBlock("latest");
            const latestBlockNumber = parseInt(block.number);
            const timestamp = parseInt(block.timestamp);

            // ERC-1155
            // event TransferSingle(address indexed operator, address indexed from, address indexed to, uint256 id, uint256 value)
            // event TransferBatch(address indexed operator, address indexed from, address indexed to, uint256[] ids, uint256[] values);
            // event ApprovalForAll(address indexed account, address indexed operator, bool approved);
            // event URI(string value, uint256 indexed id);
            //
            // function balanceOf(address account, uint256 id) external view returns (uint256);
            // function balanceOfBatch(address[] calldata accounts, uint256[] calldata ids) external view returns (uint256[] memory);
            // function isApprovedForAll(address account, address operator) external view returns (bool);
            //
            // function setApprovalForAll(address operator, bool approved) external;
            // function safeTransferFrom(address from, address to, uint256 id, uint256 amount, bytes calldata data) external;
            // function safeBatchTransferFrom(address from, address to, uint256[] calldata ids, uint256[] calldata amounts, bytes calldata data) external;

            // Retrieve Event Logs
            const events = [];
            const t = this; // async function has a new `this`, so use `t` to represent the original `this`
            async function getLogs(fromBlock, toBlock) {
              console.log(now() + " retrieveERC1155.getLogs - fromBlock: " + fromBlock + ", toBlock: " + toBlock);
              let split = false;
              try {
                const filter = {
                  address: t.settings.erc1155.contract,
                  fromBlock,
                  toBlock,
                  topics: [
                    [
                      // event TransferSingle(address indexed operator, address indexed from, address indexed to, uint256 tokenId, uint256 value)
                      ethers.utils.id("TransferSingle(address,address,address,uint256,uint256)"),
                      // event TransferBatch(address indexed operator, address indexed from, address indexed to, uint256[] tokenIds, uint256[] values);
                      ethers.utils.id("TransferBatch(address,address,address,uint256[],uint256[])"),
                      // event ApprovalForAll(address indexed owner, address indexed operator, bool approved);
                      ethers.utils.id("ApprovalForAll(address,address,bool)"),
                      // event URI(string value, uint256 indexed tokenId);
                      ethers.utils.id("URI(string,uint256)"),
                    ],
                    null,
                    null,
                  ],
                };
                const eventLogs = await provider.getLogs(filter);
                for (const event of eventLogs) {
                  const log = contract.interface.parseLog(event);
                  if (log.eventFragment.name == "TransferSingle") {
                    // event TransferSingle(address indexed operator, address indexed from, address indexed to, uint256 tokenId, uint256 value)
                    const [ operator, from, to, tokenId, value ] = log.args;
                    events.push({
                      blockNumber: event.blockNumber,
                      confirmations: latestBlockNumber - event.blockNumber,
                      txIndex: parseInt(event.transactionIndex),
                      txHash: event.transactionHash,
                      logIndex: parseInt(event.logIndex),
                      address: event.address,
                      name: log.eventFragment.name,
                      from,
                      to,
                      tokenId: tokenId.toString(),
                      value: value.toString(),
                    });
                  } else if (log.eventFragment.name == "TransferBatch") {
                    // event TransferBatch(address indexed operator, address indexed from, address indexed to, uint256[] tokenIds, uint256[] values);
                    const [ operator, from, to, tokenIds, values ] = log.args;
                    events.push({
                      blockNumber: event.blockNumber,
                      confirmations: latestBlockNumber - event.blockNumber,
                      txIndex: parseInt(event.transactionIndex),
                      txHash: event.transactionHash,
                      logIndex: parseInt(event.logIndex),
                      address: event.address,
                      name: log.eventFragment.name,
                      from,
                      to,
                      tokenIds: tokenIds.map(e => e.toString()),
                      values: values.map(e => e.toString()),
                    });
                  } else if (log.eventFragment.name == "ApprovalForAll") {
                    // event ApprovalForAll(address indexed owner, address indexed operator, bool approved);
                    const [ owner, operator, approved ] = log.args;
                    events.push({
                      blockNumber: event.blockNumber,
                      confirmations: latestBlockNumber - event.blockNumber,
                      txIndex: parseInt(event.transactionIndex),
                      txHash: event.transactionHash,
                      logIndex: parseInt(event.logIndex),
                      address: event.address,
                      name: log.eventFragment.name,
                      owner,
                      operator,
                      approved: !!approved,
                    });
                  } else if (log.eventFragment.name == "URI") {
                    // TODO Low priority event URI(string value, uint256 indexed tokenId);
                  }
                }
                Vue.set(t.erc1155, 'events', events);
              } catch (e) {
                split = true;
              }
              if (split) {
                const mid = parseInt((fromBlock + toBlock) / 2);
                await getLogs(fromBlock, mid);
                await getLogs(parseInt(mid) + 1, toBlock);
              }
            }
            const startBlock = 0;
            // const startBlock = latestBlockNumber - 10000;
            await getLogs(startBlock, latestBlockNumber);

            const tokensCollator = {};
            const approvalForAllsCollator = {};
            for (const event of events) {
              if (event.name == "TransferSingle") {
                if (!(event.tokenId in tokensCollator)) {
                  tokensCollator[event.tokenId] = {};
                }
                if (!(event.from in tokensCollator[event.tokenId])) {
                  tokensCollator[event.tokenId][event.from] = {
                    blockNumber: event.blockNumber,
                    txIndex: event.txIndex,
                    txHash: event.txHash,
                    logIndex: event.logIndex,
                    value: event.from == ADDRESS0 ? "0" : ethers.BigNumber.from(0).sub(event.value).toString(),
                  };
                } else {
                  tokensCollator[event.tokenId][event.from].blockNumber = event.blockNumber;
                  tokensCollator[event.tokenId][event.from].txIndex = event.txIndex;
                  tokensCollator[event.tokenId][event.from].txHash = event.txHash;
                  tokensCollator[event.tokenId][event.from].logIndex = event.logIndex;
                  if (event.from != ADDRESS0) {
                    tokensCollator[event.tokenId][event.from].value = ethers.BigNumber.from(tokensCollator[event.tokenId][event.from].value).add(event.value).toString();
                  }
                }
                if (!(event.to in tokensCollator[event.tokenId])) {
                  tokensCollator[event.tokenId][event.to] = {
                    blockNumber: event.blockNumber,
                    txIndex: event.txIndex,
                    txHash: event.txHash,
                    logIndex: event.logIndex,
                    value: event.value,
                  };
                } else {
                  tokensCollator[event.tokenId][event.to].blockNumber = event.blockNumber;
                  tokensCollator[event.tokenId][event.to].txIndex = event.txIndex;
                  tokensCollator[event.tokenId][event.to].txHash = event.txHash;
                  tokensCollator[event.tokenId][event.to].logIndex = event.logIndex;
                  tokensCollator[event.tokenId][event.to].value = ethers.BigNumber.from(tokensCollator[event.tokenId][event.to].value).add(event.value).toString();
                }
              } else if (event.name == "TransferBatch") {
                for (let i = 0; i < event.tokenIds.length; i++) {
                  if (!(event.tokenIds[i] in tokensCollator)) {
                    tokensCollator[event.tokenIds[i]] = {};
                  }
                  if (!(event.from in tokensCollator[event.tokenIds[i]])) {
                    tokensCollator[event.tokenIds[i]][event.from] = {
                      blockNumber: event.blockNumber,
                      txIndex: event.txIndex,
                      txHash: event.txHash,
                      logIndex: event.logIndex,
                      value: event.from == ADDRESS0 ? "0" : ethers.BigNumber.from(0).sub(event.values[i]).toString(),
                    };
                  } else {
                    tokensCollator[event.tokenIds[i]][event.from].blockNumber = event.blockNumber;
                    tokensCollator[event.tokenIds[i]][event.from].txIndex = event.txIndex;
                    tokensCollator[event.tokenIds[i]][event.from].txHash = event.txHash;
                    tokensCollator[event.tokenIds[i]][event.from].logIndex = event.logIndex;
                    if (event.from != ADDRESS0) {
                      tokensCollator[event.tokenIds[i]][event.from].value = ethers.BigNumber.from(tokensCollator[event.tokenIds[i]][event.from].value).add(event.values[i]).toString();
                    }
                  }

                }
              } else if (event.name == "ApprovalForAll") {
                if (!(event.owner in approvalForAllsCollator)) {
                  approvalForAllsCollator[event.owner] = {};
                }
                approvalForAllsCollator[event.owner][event.operator] = {
                  blockNumber: event.blockNumber,
                  txIndex: event.txIndex,
                  txHash: event.txHash,
                  logIndex: event.logIndex,
                  approved: event.approved,
                };
              } else {
                console.log(now() + " retrieveERC1155 - ELSE event: " + JSON.stringify(event));
              }
            }
            Vue.set(this.erc1155, 'events', events);
            const tokens = [];
            for (const [ tokenId, tokenData ] of Object.entries(tokensCollator)) {
              for (const [ owner, ownerData ] of Object.entries(tokenData)) {
                tokens.push({ tokenId, owner, ...ownerData });
              }
            }
            Vue.set(this.erc1155, 'tokens', tokens);
            const approvalForAlls = [];
            for (const [ owner, ownerData ] of Object.entries(approvalForAllsCollator)) {
              for (const [ operator, operatorData ] of Object.entries(ownerData)) {
                approvalForAlls.push({ owner, operator, ...operatorData });
              }
            }
            Vue.set(this.erc1155, 'approvalForAlls', approvalForAlls);
            // console.log(now() + " retrieveERC1155 END - erc1155: " + JSON.stringify(this.erc1155, null, 2));
          },

          async retrieveERC20BalanceOf() {
            console.log(now() + " retrieveERC20BalanceOf BEGIN - settings.erc20: " + JSON.stringify(this.settings.erc20, null, 2));
            const provider = new ethers.providers.Web3Provider(window.ethereum);
            const contract = new ethers.Contract(this.settings.erc20.contract, ERC20ABI, provider);
            const block = await provider.getBlock("latest");
            const decimals = await contract.decimals();
            Vue.set(this.erc20, 'decimals', decimals.toString());
            const balanceOf = await contract.balanceOf(this.settings.erc20.balanceOf.owner);
            Vue.set(this.erc20, 'balanceOf', balanceOf);
            // console.log(now() + " retrieveERC20BalanceOf - erc20.balanceOf: " + balanceOf);
          },

          async retrieveERC20Allowance() {
            console.log(now() + " retrieveERC20Allowance BEGIN - settings.erc20: " + JSON.stringify(this.settings.erc20, null, 2));
            const provider = new ethers.providers.Web3Provider(window.ethereum);
            const contract = new ethers.Contract(this.settings.erc20.contract, ERC20ABI, provider);
            const block = await provider.getBlock("latest");
            const decimals = await contract.decimals();
            Vue.set(this.erc20, 'decimals', decimals.toString());
            const allowance = await contract.allowance(this.settings.erc20.allowance.owner, this.settings.erc20.allowance.spender);
            Vue.set(this.erc20, 'allowance', allowance);
            // console.log(now() + " retrieveERC20Allowance - erc20.allowance: " + allowance);
          },

          async retrieveTimestamps(blockNumbers) {
            console.log(now() + " retrieveTimestamps BEGIN - blockNumbers: " + JSON.stringify(blockNumbers, null, 2));
            const provider = new ethers.providers.Web3Provider(window.ethereum);
            if (!(this.chainId in this.timestamps)) {
              Vue.set(this.timestamps, this.chainId, {});
            }
            for (const blockNumber of blockNumbers) {
              if (!(blockNumber in this.timestamps[this.chainId])) {
                try {
                  const block = await provider.getBlock(blockNumber);
                  Vue.set(this.timestamps[this.chainId], blockNumber, parseInt(block.timestamp));
                } catch (e) {
                  console.log(now() + " retrieveTimestamps ERROR: " + e.message);
                }
              }
            }
            localStorage.getStartedWithDevelopingInEthereumTimestamps = JSON.stringify(this.timestamps);
            // console.log(now() + " retrieveTimestamps END - timestamps: " + JSON.stringify(this.timestamps, null, 2));
          },

          async transferERC20() {
            console.log(now() + " transferERC20 - settings.erc20: " + JSON.stringify(this.settings.erc20));
            const provider = new ethers.providers.Web3Provider(window.ethereum);
            const signer = provider.getSigner();
            const contract = new ethers.Contract(this.settings.erc20.contract, ERC20ABI, provider);
            const contractWithSigner = contract.connect(provider.getSigner());
            const decimals = await contract.decimals();
            try {
              const tx = await contractWithSigner.transfer(this.settings.erc20.transfer.to, ethers.utils.parseUnits(this.settings.erc20.transfer.tokens, decimals));
              console.log(now() + " transferERC20 - tx: " + JSON.stringify(tx));
              Vue.set(this.erc20.transferTx, 'txHash', tx && tx.hash || null);
              Vue.set(this.erc20.transferTx, 'result', JSON.stringify(tx, null, 2));
            } catch (e) {
              console.log(now() + " transferERC20 - ERROR: " + JSON.stringify(e));
              Vue.set(this.erc20.transferTx, 'txHash', null);
              Vue.set(this.erc20.transferTx, 'result', JSON.stringify(e, null, 2));
            }
            console.log(now() + " transferERC20 END - erc20.transferTx: " + JSON.stringify(this.erc20.transferTx));
          },

          async approveERC20() {
            console.log(now() + " approveERC20 - settings.erc20: " + JSON.stringify(this.settings.erc20));
            const provider = new ethers.providers.Web3Provider(window.ethereum);
            const signer = provider.getSigner();
            const contract = new ethers.Contract(this.settings.erc20.contract, ERC20ABI, provider);
            const contractWithSigner = contract.connect(provider.getSigner());
            const decimals = await contract.decimals();
            try {
              const tx = await contractWithSigner.approve(this.settings.erc20.approve.spender, ethers.utils.parseUnits(this.settings.erc20.approve.tokens, decimals));
              console.log(now() + " approveERC20 - tx: " + JSON.stringify(tx));
              Vue.set(this.erc20.approveTx, 'txHash', tx && tx.hash || null);
              Vue.set(this.erc20.approveTx, 'result', JSON.stringify(tx, null, 2));
            } catch (e) {
              console.log(now() + " approveERC20 - ERROR: " + JSON.stringify(e));
              Vue.set(this.erc20.approveTx, 'txHash', null);
              Vue.set(this.erc20.approveTx, 'result', JSON.stringify(e, null, 2));
            }
            console.log(now() + " approveERC20 END - erc20.approveTx: " + JSON.stringify(this.erc20.approveTxHash));
          },

          async transferFromERC20() {
            console.log(now() + " transferFromERC20 - settings.erc20: " + JSON.stringify(this.settings.erc20));
            const provider = new ethers.providers.Web3Provider(window.ethereum);
            const signer = provider.getSigner();
            const contract = new ethers.Contract(this.settings.erc20.contract, ERC20ABI, provider);
            const contractWithSigner = contract.connect(provider.getSigner());
            const decimals = await contract.decimals();
            try {
              const tx = await contractWithSigner.transferFrom(this.settings.erc20.transferFrom.from, this.settings.erc20.transferFrom.to, ethers.utils.parseUnits(this.settings.erc20.transferFrom.tokens, decimals));
              console.log(now() + " transferFromERC20 - tx: " + JSON.stringify(tx));
              Vue.set(this.erc20.transferFromTx, 'txHash', tx && tx.hash || null);
              Vue.set(this.erc20.transferFromTx, 'result', JSON.stringify(tx, null, 2));
            } catch (e) {
              console.log(now() + " transferFromERC20 - ERROR: " + JSON.stringify(e));
              Vue.set(this.erc20.transferFromTx, 'txHash', null);
              Vue.set(this.erc20.transferFromTx, 'result', JSON.stringify(e, null, 2));
            }
            console.log(now() + " transferFromERC20 END - erc20.transferFromTx: " + JSON.stringify(this.erc20.transferFromTx));
          },

          validAddress(a) {
            if (a) {
              try {
                const address = ethers.utils.getAddress(a);
                return true;
              } catch (e) {
              }
            }
            return false;
          },
          validNumber(n) {
            return n && !isNaN(n) || false;
          },
          saveSettings() {
            console.log(now() + " saveSettings: " + JSON.stringify(this.settings, null, 2));
            localStorage.getStartedWithDevelopingInEthereumSettings = JSON.stringify(this.settings);
          },
          async processNewBlock(blockNumber) {
            console.log(now() + " processNewBlock[" + this.chainId + "] #" + this.formatNumber(blockNumber) + ", latest #" + this.formatNumber(this.blockNumber) + " @ " + moment.unix(this.timestamp).format("YYYY-MM-DD HH:mm:ss") + " " + moment.unix(this.timestamp).fromNow());
          },
          formatETH(e, precision = 9) {
            try {
              if (precision == 0) {
                return e ? ethers.utils.formatEther(e) : null;
              } else {
                return e ? parseFloat(ethers.utils.formatEther(e)).toFixed(precision) : null;
              }
            } catch (err) {
            }
            return e.toFixed(precision);
          },
          formatNumber(e) {
            return e != null ? e.toString().replace(/(?<!(\.\d*|^.{0}))(?=(\d{3})+(?!\d))/g, ',') : null;
          },
          formatDecimals(e, decimals = 18) {
            return e != null ? ethers.utils.formatUnits(e, decimals).replace(/(?<!(\.\d*|^.{0}))(?=(\d{3})+(?!\d))/g, ',') : null;
          },
          formatTimestamp(ts) {
            if (ts != null) {
              if (this.settings.reportingDateTime == 1) {
                return moment.unix(ts).utc().format("YYYY-MM-DD HH:mm:ss");
              } else {
                return moment.unix(ts).format("YYYY-MM-DD HH:mm:ss");
              }
            }
            return null;
          },
          formatTimeDiff(unixtime) {
            if (!unixtime) {
              return "";
            } else {
              return moment.unix(unixtime).fromNow();
            }
          },
          copyToClipboard(str) {
            navigator.clipboard.writeText(str);
          },
          async connectToWeb3() {
            if (!window.ethereum) {
              this.connected = false;
            } else {
              try {
                const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
                this.connected = window.ethereum.isConnected();
              } catch (e) {
                console.log("window.ethereum.request error: " + e.message);
                this.connected = false;
              }
            }
            if (!this.connected) {
              alert("Please use the https://metamask.io addon with Firefox, Chromium, Opera or Chrome, or any other other web3 browser, for web3 data retrieval. And refresh!");
            } else {
              const t = this;
              function handleChainChanged(_chainId) {
                t.chainId = parseInt(_chainId);
                console.log(now() + " connectToWeb3 - handleChainChanged - this.chainId: " + t.chainId);
                // alert('Ethereum chain has changed - reloading this page.')
                // window.location.reload();
              }
              window.ethereum.on('chainChanged', handleChainChanged);
              const provider = new ethers.providers.Web3Provider(window.ethereum);
              async function handleAccountsChanged(accounts) {
                const signer = provider.getSigner();
                t.coinbase = await signer.getAddress();
                console.log(now() + " connectToWeb3 - handleAccountsChanged: " + t.coinbase);
              }
              window.ethereum.on('accountsChanged', handleAccountsChanged);
              async function handleNewBlock(blockNumber) {
                if (!t.blockNumber || blockNumber > t.blockNumber) {
                  const block = await provider.getBlock("latest");
                  t.blockNumber = block.number;
                  t.timestamp = block.timestamp;
                  await t.processNewBlock(blockNumber);
                }
              }
              provider.on("block", handleNewBlock);
              const signer = provider.getSigner();
              this.coinbase = await signer.getAddress();
              const network = await provider.getNetwork();
              this.chainId = network.chainId;
              console.log(now() + " connectToWeb3[" + this.chainId + "]");
            }
          },
        },

        // --- MOUNTED ---
        mounted() {
          (async() => {
            await this.connectToWeb3();
          })();
          if ('getStartedWithDevelopingInEthereumChainId' in localStorage) {
            this.chainId = localStorage.getStartedWithDevelopingInEthereumChainId;
          }
          if ('getStartedWithDevelopingInEthereumCoinbase' in localStorage) {
            this.coinbase = localStorage.getStartedWithDevelopingInEthereumCoinbase;
          }
          if ('getStartedWithDevelopingInEthereumTimestamps' in localStorage) {
            this.timestamps = JSON.parse(localStorage.getStartedWithDevelopingInEthereumTimestamps);
          }
          if ('getStartedWithDevelopingInEthereumSettings' in localStorage) {
            const tempSettings = JSON.parse(localStorage.getStartedWithDevelopingInEthereumSettings);
            if ('version' in tempSettings && tempSettings.version == this.settings.version) {
              this.settings = tempSettings;
              this.settings.erc20.eventsTable.currentPage = 1;
              this.settings.erc20.balancesTable.currentPage = 1;
              this.settings.erc20.allowancesTable.currentPage = 1;
            }
          }
        },
      })
    </script>
  </body>
</html>