#582 | Adding chevrons to navigate to "next" and "prev" transactions

src/core/types/EvmTransaction.ts

@@ -35,6 +35,8 @@ export interface EvmTransaction {
     to: string | null; // null if contract creation
     v: string;
     value: string; // string representation of hex number
+    prevTxHash: string | null; // hash of the previous transaction in the same contract
+    nextTxHash: string | null; // hash of the next transaction in the same contract
 }
 
 export interface EvmTransactionParsed extends EvmTransaction {

src/css/global/_mixins.scss

@@ -23,9 +23,9 @@
     cursor: pointer;
     height: 22px;
     width: 22px;
-    color: white;
-    background-color: $grey;
-    border: solid 1.25px $grey;
+    color: var(--text-color);
+    background-color: var(--tab-bg-color);
+    border: solid 1.25px var(--border-color);
     border-radius: 6px;
     display: flex;
     justify-content: center;
@@ -36,6 +36,11 @@
     &--right {
         padding-left: 1px;
     }
+    &--disabled {
+        cursor: not-allowed;
+        color: var(--muted-text-color);
+        border-color: var(--muted-text-color);
+    }
     .q-dark & {
         color: rgb(8, 29, 53);
     }

src/i18n/de-de/index.js

@@ -43,6 +43,10 @@ export default {
             logs: 'Protokolle',
             internal: 'Interne Transaktionen',
             not_found: 'Transaktion nicht gefunden',
+            previous: 'Vorherige Transaktion des Absenders',
+            next: 'Nächste Transaktion des Absenders',
+            not_previous: 'Keine vorherige Transaktion des Absenders',
+            not_next: 'Keine nächste Transaktion des Absenders',
         },
         internaltrx: {
             page_title: 'Interne Transaktionen des Vertrags',

src/i18n/en-us/index.js

@@ -43,6 +43,10 @@ export default {
             logs: 'Logs',
             internal: 'Internal Transactions',
             not_found: 'Transaction not found',
+            previous: 'Previous transaction by sender',
+            next: 'Next transaction by sender',
+            not_previous: 'No previous transaction by sender',
+            not_next: 'No next transaction by sender',
         },
         internaltrx: {
             page_title: 'Contract Internal Transactions',

src/i18n/es-es/index.js

@@ -43,6 +43,10 @@ export default {
             logs: 'Registros',
             internal: 'Transacciones Internas',
             not_found: 'Transacción no encontrada',
+            previous: 'Transacción anterior del remitente',
+            next: 'Siguiente transacción del remitente',
+            not_previous: 'No hay transacción anterior del remitente',
+            not_next: 'No hay siguiente transacción del remitente',
         },
         internaltrx: {
             page_title: 'Transacciones internas del contrato',

src/i18n/fr-fr/index.js

@@ -43,6 +43,10 @@ export default {
             logs: 'Journaux',
             internal: 'Transactions internes',
             not_found: 'Transaction non trouvée',
+            previous: 'Transaction précédente par l\'expéditeur',
+            next: 'Transaction suivante par l\'expéditeur',
+            not_previous: 'Aucune transaction précédente par l\'expéditeur',
+            not_next: 'Aucune transaction suivante par l\'expéditeur',
         },
         internaltrx: {
             page_title: 'Transactions internes du contrat',

src/i18n/pt-br/index.js

@@ -43,6 +43,10 @@ export default {
             logs: 'Logs',
             internal: 'Transações Internas',
             not_found: 'Transação não encontrada',
+            previous: 'Transação anterior do remetente',
+            next: 'Próxima transação do remetente',
+            not_previous: 'Nenhuma transação anterior do remetente',
+            not_next: 'Nenhuma próxima transação do remetente',
         },
         internaltrx: {
             page_title: 'Transações internas do contrato',

src/pages/BlockListPage.vue

@@ -40,9 +40,6 @@ const showEmptyBlocks = ref(false);
 
     &__header {
         @include page-header;
-        &-nav-btn {
-            @include page-header-nav-btn;
-        }
     }
 
     &__tabs {

src/pages/TransactionPage.vue

@@ -19,39 +19,37 @@ const tab = ref<string>(route.query.tab as string || defaultTab);
 const trxNotFound = ref(false);
 const hash = ref('');
 const trx = ref<EvmTransactionExtended | null>(null);
+const prevTxHash = ref<string | null>(null);
+const nextTxHash = ref<string | null>(null);
 
 const updateData = async () => {
+    console.log('TransactionPage: updateData() loadTransaction(hash.value)', hash.value);
     trx.value = await loadTransaction(hash.value);
     trxNotFound.value = !trx.value;
     if (!trx.value || !route.query.tab) {
         tab.value = defaultTab;
     }
+    prevTxHash.value = trx.value?.prevTxHash || null;
+    nextTxHash.value = trx.value?.nextTxHash || null;
+    console.log('TransactionPage: updateData()', prevTxHash.value, nextTxHash.value);
 };
 
+
 watch(() => route.params.hash, async (newValue) => {
     if (!newValue || hash.value === newValue) {
+        console.log('TransactionPage: watch route.params.hash (SKIP)', newValue, hash.value);
         return;
     }
     hash.value = typeof newValue === 'string' ? newValue : newValue[0];
+    console.log('TransactionPage: watch route.params.hash', newValue, hash.value);
     updateData();
 }, { immediate: true });
 
-watch(() => route.query, () => {
-    updateData();
-});
-
 watch(tab, (newTab) => {
+    console.log('TransactionPage: watch tab', newTab);
     router.replace({ query: { ...route.query, tab: newTab } });
 });
 
-const prevTransaction = () => {
-    console.error('prevTransaction() NOT IMPLEMENTED');
-};
-
-const nextTransaction = () => {
-    console.error('nextTransaction() NOT IMPLEMENTED');
-};
-
 </script>
 
 
@@ -61,11 +59,39 @@ const nextTransaction = () => {
 
     <div class="c-transactions__header">
         <span class="c-transactions__header-title">{{ $t('pages.transaction.page_title') }}</span>
-        <div class="c-transactions__header-nav-btn c-transactions__header-nav-btn--left" @click="prevTransaction">
+
+        <!-- navigation to previous transaction -->
+        <router-link
+            v-if="prevTxHash"
+            :to="{ name: 'transaction', params: { hash: prevTxHash } }"
+            class="c-transactions__header-nav-btn c-transactions__header-nav-btn--left"
+        >
             <i class="fa fa-chevron-left small"></i>
+            <q-tooltip>{{ $t('pages.transaction.previous') }} </q-tooltip>
+        </router-link>
+        <div
+            v-else
+            class="c-transactions__header-nav-btn c-transactions__header-nav-btn--left c-transactions__header-nav-btn--disabled"
+        >
+            <i class="fa fa-chevron-left small"></i>
+            <q-tooltip>{{ $t('pages.transaction.not_previous') }} </q-tooltip>
         </div>
-        <div class="c-transactions__header-nav-btn c-transactions__header-nav-btn--right" @click="nextTransaction">
+
+        <!-- navigation to next transaction -->
+        <router-link
+            v-if="nextTxHash"
+            :to="{ name: 'transaction', params: { hash: nextTxHash } }"
+            class="c-transactions__header-nav-btn c-transactions__header-nav-btn--right"
+        >
+            <i class="fa fa-chevron-right small"></i>
+            <q-tooltip>{{ $t('pages.transaction.next') }} </q-tooltip>
+        </router-link>
+        <div
+            v-else
+            class="c-transactions__header-nav-btn c-transactions__header-nav-btn--right c-transactions__header-nav-btn--disabled"
+        >
             <i class="fa fa-chevron-right small"></i>
+            <q-tooltip>{{ $t('pages.transaction.not_next') }} </q-tooltip>
         </div>
     </div>
 
@@ -160,9 +186,10 @@ const nextTransaction = () => {
 
     &__header {
         @include page-header;
+        flex-direction: row;
+        gap: 5px;
         &-nav-btn {
             @include page-header-nav-btn;
-            display: none; // remove this line to enable the buttons
         }
     }