Merge pull request #668 from telosnetwork/dev

Teloscan v1.5

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
         sourceType: 'module',
     },
     env: {
+        'es2020': true,
         'browser': true,
         'es2021': true,
         'amd': true,
@@ -35,7 +36,6 @@ module.exports = {
         'comma-dangle': ['error', 'always-multiline'],
         'indent': ['error', 4],
         'quotes': ['error', 'single'],
-        'max-len': ['error', { 'code': 120 }],
         'eol-last': ['error', 'always'],
         'object-curly-spacing': ['error', 'always'],
         'array-bracket-spacing': ['error', 'never'],
@@ -55,7 +55,8 @@ module.exports = {
         }],
         'no-return-assign': ['error', 'always'],
         'no-param-reassign': 'error',
-
+        'no-unused-vars': 'off',
+        '@typescript-eslint/no-unused-vars': ['error'],
 
         'vue/html-indent': ['warn', 4, { 'baseIndent': 0 }],
         'vue/max-attributes-per-line': ['warn', {

.gitignore

@@ -25,6 +25,9 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+# Locks
+yarn.lock
+
 # Editor directories and files
 .idea
 *.suo

env.js

@@ -25,9 +25,11 @@ 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.testnet.teloscan.io/v1',
     VERIFIED_CONTRACTS_BUCKET: 'verified-evm-contracts-testnet',
     STAKED_TLOS_CONTRACT_ADDRESS: '0xa9991E4daA44922D00a78B6D986cDf628d46C4DD',
     TELOS_ESCROW_CONTRACT_ADDRESS: '0x7E9cF9fBc881652B05BB8F26298fFAB538163b6f',
+    MULTICALL_CONTRACT_ADDRESS: '0x39b0CF441E616e4e21a5f7b37c9CE0Ca750bd05B',
     OREID_APP_ID: 't_1e0417d2456e401893ec106e5e4c6314',
     OREID_APP_ID_NATIVE: 't_a61e9926d5204387a9ac113dfce7cbc5',
 };
@@ -45,10 +47,12 @@ const MAINNET = {
     NETWORK_EVM_NAME: 'telos-evm',
     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',  //'http://localhost:9999/v1', //for local instance of api
+    INDEXER_API_ENDPOINT: 'https://api.teloscan.io/v1',
     VERIFIED_CONTRACTS_BUCKET: 'verified-evm-contracts',
     STAKED_TLOS_CONTRACT_ADDRESS: '0xB4B01216a5Bc8F1C8A33CD990A1239030E60C905',
     TELOS_ESCROW_CONTRACT_ADDRESS: '0x95F5713A1422Aa3FBD3DCB8D553945C128ee3855',
+    MULTICALL_CONTRACT_ADDRESS: '0xdDCbf776dF3dE60163066A5ddDF2277cB445E0F3',
     OREID_APP_ID: 'p_b5cfbadeb17a44bdaf01e73b3120d202',
     OREID_APP_ID_NATIVE: 'p_751f87258d5b40998b55c626d612fd4e',
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "teloscan",
-  "version": "1.4.8",
+  "version": "1.5.0",
   "description": "Teloscan block explorer",
   "productName": "Teloscan",
   "author": "Jesse Schulman <[email protected]>",
@@ -37,9 +37,11 @@
     "fs": "^0.0.1-security",
     "highlight.js": "10",
     "highlightjs-solidity": "^2.0.3",
+    "js-big-decimal": "^1.4.1",
     "moment": "^2.29.4",
     "oreid-js": "^4.7.1",
     "oreid-webpopup": "^2.4.0",
+    "qrious": "^4.0.2",
     "quasar": "2",
     "rxjs": "^7.8.0",
     "ual-anchor": "^1.0.0",
@@ -48,9 +50,9 @@
     "vue": "3",
     "vue-i18n": "^9.0.0",
     "vue-inline-svg": "^3.1.2",
+    "vue-json-pretty": "^2.2.4",
     "vue-json-viewer": "3",
     "vue-router": "4",
-    "vue3-click-away": "^1.2.4",
     "vuex": "4",
     "web3": "^4.0.1"
   },
@@ -60,6 +62,7 @@
     "@babel/preset-env": "7.19.3",
     "@babel/preset-typescript": "^7.23.0",
     "@quasar/app-webpack": "3.6.2",
+    "@quasar/quasar-app-extension-qmediaplayer": "^2.0.0-beta.6",
     "@types/jest": "29.1.1",
     "@types/lodash": "^4.14.182",
     "@typescript-eslint/eslint-plugin": "^5.48.2",

quasar.conf.js

@@ -44,7 +44,7 @@ module.exports = function(/* ctx */) {
         ],
 
         // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
-        css: ['fonts/silka/silka.css', 'app.sass'],
+        css: ['fonts/silka/silka.css', 'app.scss'],
 
         // https://github.com/quasarframework/quasar/tree/dev/extras
         extras: [
@@ -70,6 +70,11 @@ module.exports = function(/* ctx */) {
                 chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin);
             },
 
+            scssLoaderOptions: {
+                additionalData: '@import "~src/css/global/global-index.scss";',
+                sourceMap: false, // prevent issue where changing style in devtools breaks page styles
+            },
+
             // transpile: false,
 
             // Add dependencies for transpiling with Babel (Array of string/regex)
@@ -98,7 +103,14 @@ module.exports = function(/* ctx */) {
         framework: {
             iconSet: 'material-icons', // Quasar icon set
             lang: 'en-US', // Quasar language pack
-            config: {},
+            config: {
+                brand: {
+                    // brand colors
+                    primary: '#8B3F98',
+                    secondary: '#348DCC',
+                    accent: '#73C58F',
+                },
+            },
 
             // Possible values for "importStrategy":
             // * 'auto' - (DEFAULT) Auto-import needed Quasar components & directives
@@ -118,7 +130,7 @@ module.exports = function(/* ctx */) {
 
         // animations: 'all', // --- includes all animations
         // https://quasar.dev/options/animations
-        animations: [],
+        animations: ['fadeIn', 'fadeOut'],
 
         // https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr
         ssr: {

quasar.extensions.json

@@ -1,2 +1,3 @@
 {
+  "@quasar/qmediaplayer": {}
 }

src/App.vue

@@ -1,42 +1,77 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import moment from 'moment';
 
 import { getAntelope, useChainStore } from 'src/antelope';
 import { TELOS_NETWORK_NAMES } from 'src/antelope/mocks/chain-constants';
+import { indexerApi } from 'src/boot/telosApi';
+import { ual } from 'src/boot/ual';
+import { providerManager } from 'src/boot/evm';
 
-export const isTodayBeforeTelosCloudDown = new Date().getTime() < new Date('2023-12-31').getTime();
-
-export default defineComponent({
-    name: 'App',
-    mounted() {
-        const network = useChainStore().currentChain.settings.getNetwork();
-        if (TELOS_NETWORK_NAMES.includes(network)) {
-            const script = document.createElement('script');
-            script.src = 'https://cdn.usefathom.com/script.js';
-            script.dataset.site = 'PDKJSBKL';
-            script.dataset.spa = 'auto';
-            script.defer = true;
-            document.body.appendChild(script);
+const $store = useStore();
+const { t: $t } = useI18n();
+const $q = useQuasar();
+
+// computed
+const isNative = computed(() => $store.getters['login/isNative']);
+
+onMounted(async () => {
+    const network = useChainStore().currentChain.settings.getNetwork();
+    if (TELOS_NETWORK_NAMES.includes(network)) {
+        const script = document.createElement('script');
+        script.src = 'https://cdn.usefathom.com/script.js';
+        script.dataset.site = 'PDKJSBKL';
+        script.dataset.spa = 'auto';
+        script.defer = true;
+        document.body.appendChild(script);
+    }
+
+    const health = await indexerApi.get('/health');
+
+    if (health.data?.secondsBehind > 3) {
+        let behindBy = moment(health.data.secondsBehind * 1000).utc().format('HH:mm:ss');
+        if (health.data?.secondsBehind > 86400) {
+            const behindByHours = Math.round(health.data.secondsBehind / 60 / 60);
+            const behindByDays = Math.floor(health.data.secondsBehind / 60 / 60 / 24);
+            const behindByLeft = behindByHours - (behindByDays * 24);
+            const behindByLeftStr = (behindByLeft === 0)
+                ? ''
+                : $t('global.and') + ' ' + behindByLeft + ' ' + $t('global.hours');
+            behindBy = (behindByDays > 0)
+                ? behindByDays + ' ' + $t('global.days') + ' ' + behindByLeftStr
+                : behindByHours + ' ' + $t('global.hours');
         }
+        $q.notify({
+            type: 'negative',
+            timeout: 12000,
+            progress: true,
+            message: $t('global.not_synced'),
+            caption: $t('global.data_behind_by') + ' <strong>' +
+                behindBy + '</strong>. <br>' + $t('global.try_reloading'),
+            html: true,
+        });
+    }
 
-        if (isTodayBeforeTelosCloudDown) {
-            getAntelope().config.notifyRememberInfoHandler(
-                this.$t('temporal.telos_cloud_discontinued_title'),
-                [{
-                    tag: 'p',
-                    class: 'c-notify__message--subtitle',
-                    text: this.$t('temporal.telos_cloud_discontinued_message_title'),
-                }, {
-                    tag: 'p',
-                    class: '',
-                    text: this.$t('temporal.telos_cloud_discontinued_message_body'),
-                }],
-                '',
-                'telos-cloud-discontinued',
-            );
+    // On login we must set the address and record the provider
+    getAntelope().events.onLoggedOut.subscribe(() => {
+        const loginData = localStorage.getItem('loginData');
+        if (isNative.value) {
+            if (!loginData) {
+                return;
+            }
+            const loginObj = JSON.parse(loginData);
+            const wallet = ual.getAuthenticators().availableAuthenticators.find(a => a.getName() === loginObj.provider);
+            wallet?.logout();
         }
-    },
+        $store.commit('login/setLogin', {});
+        localStorage.removeItem('loginData');
+        providerManager.setProvider(null);
+    });
 });
+
 </script>
 <template>
 <div id="q-app">

src/antelope/mocks/AccountStore.ts

@@ -65,7 +65,6 @@ class AccountStore {
     }
 
     logout() {
-        console.log('AccountStore.logout()');
         currentAuthenticator.logout();
         currentAuthenticator = {} as EVMAuthenticator;
         currentAccount = null;

src/antelope/types/EvmContractData.ts

@@ -82,20 +82,26 @@ export interface EvmContractCalldata {
     symbol?: string;
 }
 
-export interface EvmContractFactoryData {
+export interface EvmContractData {
+    symbol?: string;
+    creator?: string;
     address: string;
+    fromTrace?: boolean;
     abi?: string | EvmABI
-    block?: number;
-    calldata?: string;
-    creator?: string;
+    trace_address?: string; // same attribute (raw)
+    traceAddress?: string;  // same attribute (processed)
+    logoURI?: string;
+    supply?: string; // string representation of number
+    calldata?: string; // string holding JSON
     decimals?: number | null;
-    fromTrace?: boolean;
-    metadata?: string;
-    name?: string;
+    name?: string | null;
+    block?: number;
     supportedInterfaces?: string[];
-    symbol?: string;
-    traceAddress?: string;
     transaction?: string;
+}
+
+export interface EvmContractFactoryData extends EvmContractData {
+    metadata?: string;
     timestamp?: string;
     manager?: EvmContractManagerI;
 }

src/antelope/types/EvmTransaction.ts

@@ -1,7 +1,7 @@
 import { ethers } from 'ethers';
 import { NftTokenInterface } from 'src/antelope/types';
 
-export type EvmTransactionTopic = string[];
+export type EvmTransactionTopic = string;
 
 export interface EvmTransactionLog {
     address: string;
@@ -21,7 +21,7 @@ export interface EvmTransaction {
     from: string;
     gasLimit: string; // string representation of hex number
     gasPrice: string; // string representation of hex number
-    gasused: string; // string representation of hex number
+    gasUsed: string; // string representation of hex number
     hash: string;
     index: number;
     input: string;
@@ -32,11 +32,26 @@ export interface EvmTransaction {
     s: string;
     status: string; // string representation of hex number
     timestamp: number; // epoch in milliseconds
-    to: string;
+    to: string | null; // null if contract creation
     v: string;
     value: string; // string representation of hex number
 }
 
+export interface EvmTransactionParsed extends EvmTransaction {
+    gasLimitBn: ethers.BigNumber;
+    gasPriceBn: ethers.BigNumber;
+    gasUsedBn: ethers.BigNumber;
+    valueBn: ethers.BigNumber;
+    logsArray: EvmTransactionLog[];
+}
+
+export interface EvmContractFunctionParameter {
+    name: string;
+    type: string;
+    arrayChildren: string | false;
+    value: (string | number | boolean | null | ethers.BigNumber)[];
+}
+
 export interface TransactionValueData {
     amount: number;
     symbol: string;

src/antelope/wallets/authenticators/OreIdAuth.ts

@@ -96,7 +96,7 @@ export class OreIdAuth extends EVMAuthenticator {
     }
 
     async login(network: string): Promise<addressString | null> {
-        console.log('login', network);
+        this.trace('login', network);
         const chainSettings = this.getChainSettings();
         const trackSuccessfulLogin = () => {
             this.trace('login', 'trackAnalyticsEvent -> generic login succeeded', TELOS_ANALYTICS_EVENT_NAMES.loginSuccessful);

src/antelope/wallets/authenticators/WalletConnectAuth.ts

@@ -63,9 +63,6 @@ export class WalletConnectAuth extends EVMAuthenticator {
         this.options = options;
         this.wagmiClient = wagmiClient;
         this._debouncedPrepareTokenConfigResolver = null;
-
-        console.log('this.options, this.wagmiClient', this.options, this.wagmiClient);
-
         this.web3Modal = new Web3Modal(this.options, this.wagmiClient);
     }
 

src/antelope/wallets/init.ts

@@ -20,7 +20,6 @@ export function initAntelope(app: App) {
     };
 
     const projectId = process.env.PROJECT_ID || '14ec76c44bae7d461fa0f5fd5f8a9da1';
-    console.log('process.env', process.env);
     const chains = [telos, telosTestnet];
 
     const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);