#875 | adding the case for no transaction history on address page

src/components/AddressMoreInfo.vue

@@ -10,6 +10,7 @@ const { t: $t } = useI18n();
 
 const lastTxn = ref('...');
 const firstTxn = ref('...');
+const noTrxYet = ref(false);
 const loadingComplete = ref(false);
 
 const props = defineProps({
@@ -24,11 +25,13 @@ onBeforeMount(async () => {
         const lastTxnQuery = (await indexerApi.get(`address/${props.address}/transactions?limit=1&includePagination=true`) as TransactionQueryData).data;
         if (lastTxnQuery.results.length){
             lastTxn.value = lastTxnQuery.results[0].hash;
+            // use total count to offset query and fetch first transaction
+            const offset = lastTxnQuery.total_count - 1;
+            const firstTxnQuery = (await indexerApi.get(`address/${props.address}/transactions?limit=1&offset=${offset}`) as TransactionQueryData).data;
+            firstTxn.value = firstTxnQuery.results[0].hash;
+        } else {
+            noTrxYet.value = true;
         }
-        // use total count to offset query and fetch first transaction
-        const offset = lastTxnQuery.total_count - 1;
-        const firstTxnQuery = (await indexerApi.get(`address/${props.address}/transactions?limit=1&offset=${offset}`) as TransactionQueryData).data;
-        firstTxn.value = firstTxnQuery.results[0].hash;
         loadingComplete.value = true;
     }catch(e){
         console.error(e);
@@ -42,6 +45,11 @@ onBeforeMount(async () => {
     <q-card-section v-if="!loadingComplete" >
         <q-skeleton type="text" class="c-overview__skeleton" />
     </q-card-section>
+    <q-card-section v-else-if="noTrxYet" >
+        <div class="c-address-more-info__section-label">
+            {{ $t('pages.no_transactions_yet') }}
+        </div>
+    </q-card-section>
     <q-card-section v-else>
         <div class="c-address-more-info__section-label">
             {{ $t('pages.last') }} {{ $t('pages.transaction_sent') }}
@@ -56,7 +64,7 @@ onBeforeMount(async () => {
     <q-card-section v-if="!loadingComplete" >
         <q-skeleton type="text" class="c-overview__skeleton" />
     </q-card-section>
-    <q-card-section v-else>
+    <q-card-section v-else-if="!noTrxYet">
         <div class="c-address-more-info__section-label">
             {{ $t('pages.first') }} {{ $t('pages.transaction_sent') }}
         </div>

src/i18n/de-de/index.js

@@ -151,6 +151,7 @@ export default {
         overview: 'Übersicht',
         more_info: 'mehr Infos',
         transaction_sent: 'txn gesendet',
+        no_transactions_yet: 'Noch keine Transaktionen',
         first: 'erste',
         last: 'zuletzt',
         contract_creator: 'Vertragsersteller',

src/i18n/en-us/index.js

@@ -151,6 +151,7 @@ export default {
         overview: 'overview',
         more_info: 'more info',
         transaction_sent: 'txn sent',
+        no_transactions_yet: 'No transactions yet',
         first: 'first',
         last: 'last',
         contract_creator: 'contract creator',

src/i18n/es-es/index.js

@@ -151,6 +151,7 @@ export default {
         overview: 'visión general',
         more_info: 'más información',
         transaction_sent: 'txn enviado',
+        no_transactions_yet: 'Aún no hay transacciones',
         first: 'primero',
         last: 'último',
         contract_creator: 'creador del contrato',

src/i18n/fr-fr/index.js

@@ -151,6 +151,7 @@ export default {
         overview: 'aperçu',
         more_info: 'plus d\'info',
         transaction_sent: 'txn envoyé',
+        no_transactions_yet: 'Aucune transaction pour le moment',
         first: 'premier',
         last: 'dernier',
         contract_creator: 'créateur de contrat',

src/i18n/pt-br/index.js

@@ -151,6 +151,7 @@ export default {
         overview: 'visão geral',
         more_info: 'mais informações',
         transaction_sent: 'txn enviado',
+        no_transactions_yet: 'Ainda não há transações',
         first: 'primeiro',
         last: 'último',
         contract_creator: 'criador do contrato',

src/pages/AccountPage.vue

@@ -163,18 +163,6 @@ async function loadAccount() {
                         :alt="`Blockies icon for address ${accountAddress}`"
                         class="c-address__icon"
                     >
-                    <!--
-                    <q-icon
-                        v-else-if="!contract"
-                        name="account_circle"
-                        size="sm"
-                    />
-                    <q-icon
-                        v-else
-                        :name="(contract.supportedInterfaces?.includes('erc721')) ? 'perm_media' : 'source'"
-                        size="sm"
-                    />
-                    -->
                     <span class="c-address__title">{{ title }}</span>
                     <span class="c-address__hex">{{ accountAddress }}</span>
                     <q-tooltip v-if="fullTitle" anchor="top middle" self="bottom middle">{{ fullTitle }} </q-tooltip>