Implement the Indexer API

env.js

@@ -22,6 +22,7 @@ const TESTNET = {
     HYPERION_ENDPOINT: 'https://testnet.telos.net',
     NETWORK_EXPLORER: 'https://explorer-test.telos.net',
     TELOS_API_ENDPOINT: 'https://api-dev.telos.net/v1', //'http://localhost:9999/v1', //for local instance of api
+    INDEXER_API_ENDPOINT: 'https://api.teloscan.io/v1',
     VERIFIED_CONTRACTS_BUCKET: 'verified-evm-contracts-testnet',
     STAKED_TLOS_CONTRACT_ADDRESS: '0xa9991E4daA44922D00a78B6D986cDf628d46C4DD',
     TELOS_ESCROW_CONTRACT_ADDRESS: '0x7E9cF9fBc881652B05BB8F26298fFAB538163b6f',
@@ -38,7 +39,8 @@ const MAINNET = {
     NETWORK_EVM_CHAIN_ID: 40,
     HYPERION_ENDPOINT: 'https://mainnet.telos.net',
     NETWORK_EXPLORER: 'https://explorer.telos.net',
-    TELOS_API_ENDPOINT: 'https://api.telos.net/v1', //'http://localhost:9999/v1', //for local instance of api
+    TELOS_API_ENDPOINT: 'https://api.telos.net/v1',
+    INDEXER_API_ENDPOINT: 'https://api.teloscan.io/v1', //'http://localhost:9999/v1', //for local instance of api
     VERIFIED_CONTRACTS_BUCKET: 'verified-evm-contracts',
     STAKED_TLOS_CONTRACT_ADDRESS: '0xB4B01216a5Bc8F1C8A33CD990A1239030E60C905',
     TELOS_ESCROW_CONTRACT_ADDRESS: '0x95F5713A1422Aa3FBD3DCB8D553945C128ee3855',

quasar.conf.js

@@ -30,7 +30,7 @@ module.exports = function(/* ctx */) {
         // app boot file (/src/boot)
         // --> boot files are part of "main.js"
         // https://quasar.dev/quasar-cli/boot-files
-        boot: ['ual', 'hyperion', 'i18n', 'api', 'telosApi', 'evm', 'q-component-defaults'],
+        boot: ['ual', 'hyperion', 'i18n', 'telosApi', 'antelopeApi', 'evm', 'q-component-defaults'],
 
         // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
         css: ['fonts/silka/silka.css', 'app.sass'],

src/boot/api.js → src/boot/antelopeApi.js

@@ -37,15 +37,15 @@ const getRpc = function () {
 };
 
 const getTableRows = async function(options) {
-    const rpc = this.$api.getRpc();
+    const rpc = this.$antelopeApi.getRpc();
     return await rpc.get_table_rows({
         json: true,
         ...options,
     });
 };
 
 const getAccount = async function (accountName) {
-    const rpc = this.$api.getRpc();
+    const rpc = this.$antelopeApi.getRpc();
     return await rpc.get_account(accountName);
 };
 
@@ -58,12 +58,10 @@ export default boot(async ({ store }) => {
         textDecoder: new TextDecoder(),
         textEncoder: new TextEncoder(),
     });
-
-    store['$api'] = {
+    store['$antelopeApi'] = {
         signTransaction: signTransaction.bind(store),
         getTableRows: getTableRows.bind(store),
         getAccount: getAccount.bind(store),
         getRpc: getRpc.bind(store),
     };
-
 });

src/boot/evm.js

@@ -1,10 +1,8 @@
 import { boot } from 'quasar/wrappers';
 import { TelosEvmApi } from '@telosnetwork/telosevm-js';
-import ContractManager from 'src/lib/ContractManager';
 import fetch from 'node-fetch';
 import axios from 'axios';
 import { ethers } from 'ethers';
-import { markRaw } from 'vue';
 
 const evm = new TelosEvmApi({
     endpoint: process.env.NETWORK_EVM_ENDPOINT,
@@ -42,14 +40,10 @@ const hyperion = axios.create({
     baseURL: process.env.NETWORK_EVM_ENDPOINT,
 });
 
-const contractManager = new ContractManager(hyperion);
-contractManager.init();
-
 export default boot(({ app, store }) => {
     store.$providerManager = app.config.globalProperties.$providerManager = new ProviderManager();
     store.$evm = app.config.globalProperties.$evm = evm;
     store.$evmEndpoint = app.config.globalProperties.$evmEndpoint = hyperion;
-    store.$contractManager = app.config.globalProperties.$contractManager = markRaw(contractManager);
 });
 
 export { evm };

src/boot/telosApi.js

@@ -1,12 +1,43 @@
-import { boot } from 'quasar/wrappers';
-import axios from 'axios';
-
-const telosApi = axios.create({
-    baseURL: process.env.TELOS_API_ENDPOINT,
-});
-
-export default boot(({ app }) => {
-    app.config.globalProperties.$telosApi = telosApi;
-});
-
-export { telosApi };
+import { boot } from 'quasar/wrappers';
+import axios from 'axios';
+import ContractManager from 'src/lib/contract/ContractManager';
+import FragmentParser from 'src/lib/contract/FragmentParser';
+import { markRaw } from 'vue';
+
+const telosApi = axios.create({
+    baseURL: process.env.TELOS_API_ENDPOINT,
+});
+const indexerApi = axios.create({
+    baseURL: process.env.INDEXER_API_ENDPOINT,
+});
+const hyperion = axios.create({
+    baseURL: process.env.NETWORK_EVM_ENDPOINT,
+});
+
+const fragmentParser = new FragmentParser(hyperion);
+let contractManager = new ContractManager(indexerApi, fragmentParser);
+
+
+export default boot(({ app, store }) => {
+    app.config.globalProperties.$telosApi =  telosApi;
+    app.config.globalProperties.$indexerApi = indexerApi;
+    app.config.globalProperties.$fragmentParser = fragmentParser;
+    store.$contractManager = app.config.globalProperties.$contractManager = markRaw(contractManager);
+
+    indexerApi.interceptors.response.use(function (response) {
+        if(response.data.abi){
+            for (const [key, value] of Object.entries(response.data.abi)) {
+                app.config.globalProperties.$contractManager.parser.addFunctionInterface(key, value);
+                app.config.globalProperties.$fragmentParser.addFunctionInterface(key, value);
+            }
+        }
+        if(response.data.contracts){
+            app.config.globalProperties.$contractManager.addContractsToCache(response.data.contracts);
+        }
+        return response;
+    }, function (error) {
+        return Promise.reject(error);
+    });
+});
+
+export { telosApi, indexerApi };

src/components/AddressField.vue

@@ -1,5 +1,4 @@
 <script>
-import { mapActions } from 'vuex';
 import { ethers } from 'ethers';
 
 import CopyButton from 'components/CopyButton';
@@ -47,7 +46,6 @@ export default {
         await this.loadContract();
     },
     methods: {
-        ...mapActions('evm', ['getContract']),
         getDisplay() {
             if(!this.address){
                 return;
@@ -57,7 +55,6 @@ export default {
                     `${this.name.slice(0, this.truncate)}...` :
                     `${this.name}`;
             }
-
             if (this.contract && this.contract.getName()) {
                 const name = this.contract.getName();
                 if(name[0] === '0' && name[1] === 'x'){
@@ -77,13 +74,14 @@ export default {
         async loadContract() {
             this.contract = null;
             if (!this.isContractTrx) {
+                let contract = await this.$contractManager.getCachedContract(this.address);
+                if (contract) {
+                    this.contract = contract;
+                }
                 return;
             }
 
-            // TODO: check if this is a contract, account lookup via telosevm-js?
-            // TODO: if this is linked to a Telos account, display the Telos account name and link it to bloks
-            //   for now if we ask for a contract, we'll get one back and it'll be labeled as undefined
-            let contract = await this.getContract({ address: this.address });
+            let contract = await this.$contractManager.getContract(this.address);
             if (contract) {
                 this.contract = contract;
             }
@@ -95,9 +93,6 @@ export default {
 
 <template>
 <div class="c-address-field">
-    <q-icon v-if="contract && !copy" class="far fa-file-alt">
-        <q-tooltip>Contract</q-tooltip>
-    </q-icon>
     <router-link :to="`/address/${address}`" :class="highlight ? 'highlighted' : ''">
         {{ getDisplay() }}
     </router-link>
@@ -106,6 +101,12 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+.c-address-field .q-icon {
+    margin-right: 3px;
+}
+.c-address-field a {
+    vertical-align: middle;
+}
 .c-address-field {
     display: inline-flex;
     align-items: center;

src/components/ContractTab/FunctionInterface.vue

@@ -216,7 +216,7 @@ export default {
             return `${this.abi.name}(${this.abi.inputs.map(i => i.type).join(',')})`;
         },
         async getEthersFunction(provider) {
-            const contractInstance = await this.contract.getContractInstance(provider);
+            const contractInstance = await this.$contractManager.getContractInstance(this.contract, provider);
             return contractInstance[this.getFunctionAbi()];
         },
         runRead() {
@@ -233,7 +233,7 @@ export default {
                 );
         },
         async runNative(opts) {
-            const contractInstance = await this.contract.getContractInstance();
+            const contractInstance = await this.$contractManager.getContractInstance(this.contract);
             const func = contractInstance.populateTransaction[this.getFunctionAbi()];
             const gasEstimater = contractInstance.estimateGas[this.getFunctionAbi()];
             const gasLimit = await gasEstimater(...this.params, Object.assign({ from: this.address }, opts));

src/components/ContractTab/GenericContractInterface.vue

@@ -1,7 +1,7 @@
 <script>
 import JsonViewer from 'vue-json-viewer';
 
-import Contract from 'src/lib/Contract';
+import Contract from 'src/lib/contract/Contract';
 import { erc721Abi } from 'src/lib/abi';
 import erc20Abi from 'erc-20-abi';
 

src/components/DateField.vue

@@ -30,7 +30,6 @@ export default {
     computed: {
         friendlyDate ()  {
             const showAge = this.forceShowAge === true || (this.forceShowAge === null && this.showAge);
-
             if (showAge) {
                 return moment.unix(this.epoch).fromNow();
             }

src/components/HomeInfo.vue

@@ -14,7 +14,7 @@ export default {
         blockImage: blockImage,
     }),
     computed: {
-        ...mapGetters('evm', ['tlosPrice', 'gasPrice', 'latestBlock']),
+        ...mapGetters('chain', ['tlosPrice', 'gasPrice', 'latestBlock']),
         gasPriceGwei() {
             let gweiStr = ethers.utils.formatUnits(this.gasPrice, 'gwei');
             gweiStr = (+gweiStr).toFixed(0);
@@ -32,7 +32,7 @@ export default {
         }, 3000);
     },
     methods: {
-        ...mapActions('evm', ['fetchTlosPrice', 'fetchGasPrice', 'fetchLatestBlock']),
+        ...mapActions('chain', ['fetchTlosPrice', 'fetchGasPrice', 'fetchLatestBlock']),
     },
 };
 </script>