Merge pull request #931 from telosnetwork/927-add-holders-for-tlos-it…

…self-create-accounts-endpoint #927 | adding section /accounts for paginated native balances
telosnetwork · Jan 29, 2025 · d58e984 · d58e984
2 parents 4ec3ce1 + 3158e82
commit d58e984
Show file tree

Hide file tree

Showing 29 changed files with 1,459 additions and 333 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -36,7 +36,11 @@ const checkNetworkHealth = async () => {
     const background = theme?.primary || '#0099FF';
     const color = theme?.color || 'white';
     // print in console with background #8B3F98 and white text the following message: Using indexer {health.data.version} with {health.data.secondsBehind} seconds behind
-    console.debug(`%cUsing indexer ${health.data.version} for '${chainName}' with ${health.data.secondsBehind} seconds behind`, `background: ${background}; color: ${color};`);
+    console.debug(
+        `%cUsing indexer ${health.data.version} for '${chainName}' ` +
+        (health.data?.secondsBehind > 3 ? `%cwith ${health.data.secondsBehind} seconds behind` : ''),
+        `background: ${background}; color: ${color};`,
+    );
 
     if (health.data?.secondsBehind > 3) {
         let behindBy = moment(health.data.secondsBehind * 1000).utc().format('HH:mm:ss');
@@ -64,7 +68,7 @@ const checkNetworkHealth = async () => {
 };
 
 onMounted(async () => {
-    // await checkNetworkHealth();
+    await checkNetworkHealth();
 
     // On login we must set the address and record the provider
     getCore().events.onLoggedOut.subscribe(() => {
@@ -97,6 +101,7 @@ watch(
         }
     },
 );
+
 </script>
 
 <template>

diff --git a/src/boot/core.ts b/src/boot/core.ts
@@ -7,7 +7,6 @@ export default boot(({ app }) => {
 
     const defaultNetwork = Object.keys(evmSettings)[0];
     let network = new URLSearchParams(window.location.search).get('network') ?? process.env.NETWORK_EVM_NAME;
-    console.log('Multichain initMultichain()', { network, NETWORK_EVM_NAME: process.env.NETWORK_EVM_NAME });
     if (network) {
         const exists = Object.keys(evmSettings).some(key => evmSettings[key].getNetwork() === network);
         if (!exists) {

diff --git a/src/components/AddressField.vue b/src/components/AddressField.vue
@@ -114,7 +114,7 @@ const getDisplay = async () => {
 };
 
 const loadDisplayInfo = async () => {
-    let info = await useChainStore().currentChain.settings.getContractManager().getContractDisplayInfo(props.address);
+    let info = useChainStore().currentChain.settings.getContractManager().getContractDisplayInfo(props.address);
 
     if (info) {
         contractName.value = info.name ?? '';

diff --git a/src/components/MinimumVersionRequired.vue b/src/components/MinimumVersionRequired.vue
@@ -0,0 +1,127 @@
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useChainStore } from 'src/core';
+
+const { t: $t } = useI18n();
+const loadingComplete = ref(false);
+
+defineProps({
+    required: {
+        type: String,
+        required: true,
+    },
+});
+
+const current = ref('N/A');
+const settings = computed(() => useChainStore().currentChain.settings);
+const state = computed(() => settings.value.indexerHealthState);
+
+const updateData = async () => {
+    loadingComplete.value = false;
+    try {
+        if (typeof state.value.version === 'undefined') {
+            return;
+        }
+        current.value = state.value.version;
+        loadingComplete.value = true;
+    } catch(e) {
+        console.error(e);
+    }
+};
+
+onBeforeMount(async () => {
+    useChainStore().currentChain.settings.indexerReady$.subscribe(() => {
+        updateData();
+    });
+});
+
+watch(() => useChainStore().currentChain.settings.indexerHealthState.version, () => {
+    updateData();
+});
+
+</script>
+
+<template>
+<q-card class="c-minimum-version-required c-minimum-version-required__card">
+    <q-card-section class="c-minimum-version-required__card-section c-minimum-version-required__card-section--title">
+        <q-icon name="info" class="c-minimum-version-required__not-supported-icon" />
+        <div class="c-minimum-version-required__not-supported-text">
+            {{ $t('pages.indexer_outdated_title', {
+                network: settings.getDisplay(),
+            }) }}
+        </div>
+    </q-card-section>
+    <q-card-section class="c-minimum-version-required__card-section">
+        <!--
+            indexer_outdated_desc_1: '(Need version { version } but ',
+            indexer_outdated_desc_2: '{ apiUrl }',
+            indexer_outdated_desc_3: ' is version { current })',
+        -->
+        <span class="c-minimum-version-required__not-supported-text">
+            {{ $t('pages.indexer_outdated_desc_1', {
+                version: required,
+            }) }}
+        </span>
+        <a
+            color="primary"
+            class="c-minimum-version-required__not-supported-text"
+            :href="`${settings.getIndexerApiEndpoint()}/v1/health`"
+            target="_blank"
+        >
+            {{ $t('pages.indexer_outdated_desc_2', {
+                apiUrl: settings.getIndexerApiEndpoint(),
+            }) }}
+        </a>
+        <span class="c-minimum-version-required__not-supported-text">
+            {{ $t('pages.indexer_outdated_desc_3', {
+                current: current,
+            }) }}
+        </span>
+    </q-card-section>
+</q-card>
+</template>
+
+<style lang="scss">
+.c-minimum-version-required {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &__card {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 20px;
+        &-section {
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            flex-direction: column;
+            gap: 6px;
+            word-wrap: break-word;
+            &--title {
+                flex-direction: row;
+                padding: 25px 0 10px 0;
+                font-size: 18px
+            }
+        }
+    }
+
+    &__not-supported-icon {
+        font-size: 24px;
+    }
+
+    @media screen and (min-width: $breakpoint-md-min) {
+        width: 70%;
+        &__card-section {
+            flex-direction: row;
+        }
+    }
+}
+</style>