Merge pull request #539 from telosnetwork/epic-redesign

Epic - Redesign

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
  sourceType: 'module',
  },
  env: {
+ 'es2020': true,
  'browser': true,
  'es2021': true,
  'amd': true,
@@ -54,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

README.md

@@ -8,12 +8,6 @@ Test Net: [testnet.teloscan.io](https://testnet.teloscan.io/) [![Netlify Status]
 
 ![License](https://img.shields.io/github/license/telosnetwork/teloscan?style=for-the-badge)
 
-Dev Branch Deployments:
-
-- Main Net: [dev-mainnet-teloscan.netlify.app/](https://dev-mainnet-teloscan.netlify.app/) 
-
-- Test Net: [stage.teloscan.io](https://stage.teloscan.io/)
-
 ## About
 Teloscan is the official Telos EVM block explorer. Explore accounts, transactions, and blocks. View and interact with verified contract ABIs. Connect MetaMask wallet to stake TLOS for sTLOS.
 

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 <jesse@caleos.io>",
@@ -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 })]);