From 3c3df21169b78c56a35decaf5e60ac307733460c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viterbo=20Rodr=C3=ADguez?= <viter.rod@gmail.com>
Date: Mon, 29 Apr 2024 11:05:44 -0300
Subject: [PATCH 01/12] saving wip - tinternal trx flat

---
 .../InternalTransactionFlatTable.vue          | 442 ++++++++++++++++++
 src/components/InternalTransactionTable.vue   |   2 +-
 src/pages/AccountPage.vue                     |  16 +-
 src/store/general/actions.js                  |  11 +
 src/store/general/getters.js                  |   1 +
 src/store/general/mutations.js                |   4 +
 src/store/general/state.js                    |   1 +
 7 files changed, 475 insertions(+), 2 deletions(-)
 create mode 100644 src/components/InternalTransactionFlatTable.vue

diff --git a/src/components/InternalTransactionFlatTable.vue b/src/components/InternalTransactionFlatTable.vue
new file mode 100644
index 00000000..9c765bf9
--- /dev/null
+++ b/src/components/InternalTransactionFlatTable.vue
@@ -0,0 +1,442 @@
+<script>
+import BlockField from 'components/BlockField';
+import DateField from 'components/DateField';
+import TransactionField from 'components/TransactionField';
+import InternalTxns from 'components/Transaction/InternalTxns';
+import ValueField from 'components/ValueField.vue';
+import { WEI_PRECISION, formatWei } from 'src/lib/utils';
+import { TRANSFER_SIGNATURES } from 'src/lib/abi/signature/transfer_signatures';
+
+export default {
+    name: 'InternalTransactionFlatTable',
+    components: {
+        TransactionField,
+        DateField,
+        BlockField,
+        ValueField,
+        InternalTxns,
+    },
+    props: {
+        page: {
+            type: Number,
+        },
+        pagesize: {
+            type: Number,
+        },
+        title: {
+            type: String,
+            required: true,
+        },
+        filter: {
+            type: Object,
+            default: () => ({}),
+        },
+        initialPageSize: {
+            type: Number,
+            default: 1,
+        },
+    },
+    data() {
+        const columns = [
+            {
+                name: 'hash',
+                label: '',
+                align: 'left',
+            },
+            {
+                name: 'block',
+                label: '',
+                align: 'left',
+            },
+            {
+                name: 'date',
+                label: '',
+                align: 'left',
+            },
+            {
+                name: 'from',
+                label: '',
+                align: 'left',
+            },
+            {
+                name: 'to',
+                label: '',
+                align: 'left',
+            },
+            {
+                name: 'value',
+                label: '',
+                align: 'right',
+            },
+        ];
+
+        return {
+            rows: [],
+            loadingRows: [],
+            columns,
+            transactions: [],
+            pageSize: this.initialPageSize,
+            total: null,
+            loading: false,
+            pagination: {
+                sortBy: 'date',
+                descending: true,
+                page: 1,
+                rowsPerPage: 10,
+                rowsNumber: 0,
+            },
+            page_size_options: [10, 20, 50],
+            showDateAge: true,
+        };
+    },
+    async created() {
+        // initialization of the translated texts
+        this.columns[0].label = this.$t('components.tx_hash');
+        this.columns[1].label = this.$t('components.block');
+        this.columns[2].label = this.$t('components.age');
+        this.columns[3].label = this.$t('pages.from');
+        this.columns[4].label = this.$t('pages.to');
+        this.columns[5].label = this.$t('pages.value');
+        this.updateLoadingRows();
+    },
+    watch: {
+        '$route.query.page': {
+            handler(_pag) {
+                let pag = _pag;
+                let page = 1;
+                let size = this.page_size_options[0];
+
+                // we also allow to pass a single number as the page number
+                if (typeof pag === 'number') {
+                    page = pag;
+                } else if (typeof pag === 'string') {
+                    // we also allow to pass a string of two numbers: 'page,rowsPerPage'
+                    const [p, s] = pag.split(',');
+                    page = p;
+                    size = s;
+                }
+
+                this.setPagination(page, size);
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        updateLoadingRows() {
+            this.loadingRows = [];
+            for (var i = 1; i <= this.pagination.rowsPerPage; i++) {
+                this.loadingRows.push(i);
+            }
+        },
+        popstate(event) {
+            const page = event.state.pagination.page;
+            const size = event.state.pagination.size;
+            this.setPagination(page, size);
+        },
+        setPagination(page, size) {
+            if (page) {
+                this.pagination.page = Number(page);
+            }
+            if (size) {
+                this.pagination.rowsPerPage = Number(size);
+            }
+            this.updateLoadingRows();
+            this.onRequest({
+                pagination: this.pagination,
+            });
+        },
+        async onPaginationChange(props) {
+            const { page, rowsPerPage } = props.pagination;
+
+            // we need to change the URL to keep the pagination state by changing the this.$route.query.page
+            // with a string like 'page,rowsPerPage'
+            this.$router.push({
+                // taking care to preserve the current #hash anchor and the current query parameters
+                hash: window.location.hash,
+                query: {
+                    ...this.$route.query,
+                    page: `${page},${rowsPerPage}`,
+                },
+            });
+        },
+        async onRequest(props) {
+            this.loading = true;
+            // this line cleans the table for a second and the components have to be created again (clean)
+            this.rows = [];
+            const { page, rowsPerPage, sortBy, descending } = props.pagination;
+            let result = await this.$indexerApi.get(this.getPath(props));
+            if (this.total === null) {
+                this.pagination.rowsNumber = result.data.total_count;
+            }
+            this.pagination.page = page;
+            this.pagination.rowsPerPage = rowsPerPage;
+            this.pagination.sortBy = sortBy;
+            this.pagination.descending = descending;
+            this.transactions = [...result.data.results];
+            for (const transaction of this.transactions) {
+                try {
+                    transaction.transfer = false;
+                    transaction.value = formatWei(transaction.value.toLocaleString(0, { useGrouping: false }), 18);
+                    if (transaction.input === '0x') {
+                        continue;
+                    }
+                    if(!transaction.to) {
+                        continue;
+                    }
+                    const contract = await this.$contractManager.getContract(
+                        transaction.to,
+                    );
+                    if (!contract) {
+                        continue;
+                    }
+                    let traces = await this.$indexerApi.get(
+                        '/transaction/' + transaction.hash + '/internal?limit=1000&sort=ASC&offset=0&includeAbi=1',
+                    );
+                    for(const trace of [...traces.data.results]){
+                        trace.hash = trace.transactionHash;
+                    }
+                    transaction.traces = traces.data?.results;
+                    transaction.contract = contract;
+                    transaction.contractAddress = contract.address;
+                    const parsedTransaction = await this.$contractManager.parseContractTransaction(
+                        transaction,
+                        transaction.input,
+                        contract,
+                    );
+                    transaction.parsedTransaction = parsedTransaction;
+                    // Get ERC20 transfer from main function call
+                    let signature = transaction.input.substring(0, 10);
+                    if (
+                        signature &&
+                        TRANSFER_SIGNATURES.includes(signature) &&
+                        transaction.parsedTransaction.args['amount']
+                    ) {
+                        let decimals = transaction.contract.properties?.decimals;
+                        if(transaction.contract && decimals){
+                            transaction.transfer = {
+                                'value': `${formatWei(transaction.parsedTransaction.args['amount'], decimals)}`,
+                                'symbol': transaction.contract.properties.symbol,
+                            };
+                        }
+                    }
+
+
+                    transaction.traces.forEach((trace) => {
+                        const entry = {
+                            hash: transaction.hash,
+                            blockNumber: transaction.blockNumber,
+                            timestamp: transaction.timestamp,
+                            from: trace.action.from,
+                            to: trace.action.to,
+                            value: trace.action.value,
+                            symbol: 'TLOS',
+                            decimals: WEI_PRECISION,
+                        };
+                        this.rows.push(entry);
+                    });
+
+
+
+                } catch (e) {
+                    console.error(
+                        `Failed to parse data for transaction, error was: ${e.message}`,
+                    );
+                    // notifiy user
+                    this.$q.notify({
+                        message: this.$t('components.failed_to_parse_transaction', { message: e.message }),
+                        color: 'negative',
+                        position: 'top',
+                        timeout: 5000,
+                    });
+                }
+            }
+            // this.rows = this.transactions; // FIXME:
+            this.loading = false;
+        },
+        getPath(props) {
+            const { page, rowsPerPage, descending } = props.pagination;
+            let path;
+            const filter = Object.assign({}, this.filter ? this.filter : {});
+            if (filter.address) {
+                path = `/address/${filter.address}/transactions`;
+            } else {
+                path = '/transactions';
+            }
+            path += `?limit=${
+                rowsPerPage === 0 ? 500 : rowsPerPage
+            }`;
+
+            if (filter.block) {
+                path += `&block=${filter.block}`;
+            }
+
+            if (filter.hash) {
+                path += `&hash=${filter.hash}`;
+            }
+
+            path += `&offset=${(page - 1) * rowsPerPage}`;
+            path += `&sort=${descending ? 'desc' : 'asc'}`;
+            path += '&includeAbi=1&full=1';
+
+            path += (this.total === null) ? '&includePagination=true' : '';  // We only need the count once
+
+            return path;
+        },
+        toggleDateFormat() {
+            this.showDateAge = !this.showDateAge;
+        },
+    },
+};
+</script>
+
+<template>
+<q-table
+    v-if="!loading"
+    v-model:pagination="pagination"
+    :rows="rows"
+    :row-key="row => row.hash"
+    :columns="columns"
+    :rows-per-page-options="page_size_options"
+    @request="onPaginationChange"
+>
+    <template v-slot:header="props">
+        <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <div :class="[ 'u-flex--center-y', { 'u-flex--right': col.align === 'right' } ]" >
+                    <div
+                        v-if="col.name === 'date'"
+                        @click="toggleDateFormat"
+                    >
+                        <a>{{ showDateAge ? col.label: $t('components.date') }}</a>
+                        <q-icon
+                            class="info-icon"
+                            name="far fa-question-circle"
+                        >
+                            <q-tooltip anchor="bottom middle" self="bottom middle" :offset="[0, 36]">
+                                {{ $t('components.click_to_change_format') }}
+                            </q-tooltip>
+                        </q-icon>
+                    </div>
+                    <div v-else-if="col.name === 'method'">
+                        {{ col.label }}
+                        <q-icon class="info-icon" name="far fa-question-circle" />
+                        <q-tooltip anchor="bottom middle" self="top middle" max-width="10rem">
+                            {{ $t('components.executed_based_on_decoded_data') }}
+                        </q-tooltip>
+                    </div>
+                    <div v-else>
+                        {{ col.label }}
+                    </div>
+                </div>
+            </q-th>
+            <q-td auto-width/>
+        </q-tr>
+    </template>
+    <template v-slot:body="props">
+        <q-tr :props="props">
+            <q-td key="hash" :props="props">
+                <TransactionField :transaction-hash="props.row.hash"/>
+            </q-td>
+            <q-td key="block" :props="props">
+                <BlockField :block="props.row.blockNumber"/>
+            </q-td>
+            <q-td key="date" :props="props">
+                <DateField :epoch="(props.row.timestamp / 1000)" :force-show-age="showDateAge"/>
+            </q-td>
+            <q-td key="from" :props="props">
+                <TransactionField :transaction-hash="props.row.from"/>
+            </q-td>
+            <q-td key="to" :props="props">
+                <TransactionField :transaction-hash="props.row.to"/>
+            </q-td>
+            <q-td key="value" :props="props">
+                <ValueField
+                    :value="props.row.value"
+                    :symbol="props.row.symbol"
+                    :decimals="props.row.decimals"
+                />
+            </q-td>
+        </q-tr>
+        <q-tr
+            v-show="props.expand"
+            v-if="props.row.traces?.length > 0"
+            :props="props"
+            class="q-virtual-scroll--with-prev"
+        >
+            <q-td colspan="100%">
+                <InternalTxns :traces="props.row.traces" :transaction="props.row" />
+            </q-td>
+        </q-tr>
+    </template>
+</q-table>
+<q-table
+    v-else
+    v-model:pagination="pagination"
+    :rows="loadingRows"
+    :row-key="row => row.hash"
+    :columns="columns"
+    :rows-per-page-options="page_size_options"
+>
+    <template v-slot:header="props">
+        <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <div :class="[ 'u-flex--center-y', { 'u-flex--right': col.align === 'right' } ]" >
+                    <div
+                        v-if="col.name === 'date'"
+                        @click="toggleDateFormat"
+                    >
+                        <a>{{ showDateAge ? col.label: $t('components.date') }}</a>
+                        <q-icon
+                            class="info-icon"
+                            name="far fa-question-circle"
+                        >
+                            <q-tooltip anchor="bottom middle" self="bottom middle" :offset="[0, 36]">
+                                {{ $t('components.click_to_change_format') }}
+                            </q-tooltip>
+                        </q-icon>
+                    </div>
+                    <div v-else-if="col.name === 'method'">
+                        {{ col.label }}
+                        <q-icon class="info-icon" name="far fa-question-circle" />
+                        <q-tooltip anchor="bottom middle" self="top middle" max-width="10rem">
+                            {{ $t('components.executed_based_on_decoded_data') }}
+                        </q-tooltip>
+                    </div>
+                    <div v-else>
+                        {{ col.label }}
+                    </div>
+                </div>
+            </q-th>
+            <q-td auto-width/>
+        </q-tr>
+    </template>
+    <template v-slot:body="">
+        <q-tr>
+            <q-td key="hash" >
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td key="block" >
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td key="date" >
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td key="method" >
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td key="int_txns" >
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td auto-width>
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+        </q-tr>
+    </template>
+</q-table>
+</template>
+<style lang="scss" scoped>
+.info-icon{
+    margin-left: .25rem;
+    padding-bottom: 0.2rem;
+}
+</style>
diff --git a/src/components/InternalTransactionTable.vue b/src/components/InternalTransactionTable.vue
index 8a992698..4e16c2ee 100644
--- a/src/components/InternalTransactionTable.vue
+++ b/src/components/InternalTransactionTable.vue
@@ -187,7 +187,7 @@ export default {
                         '/transaction/' + transaction.hash + '/internal?limit=1000&sort=ASC&offset=0&includeAbi=1',
                     );
                     for(const trace of [...traces.data.results]){
-                        trace.hash = trace.transaction_hash;
+                        trace.hash = trace.transactionHash;
                     }
                     transaction.traces = traces.data?.results;
                     transaction.contract = contract;
diff --git a/src/pages/AccountPage.vue b/src/pages/AccountPage.vue
index a0faba1b..ee6da841 100644
--- a/src/pages/AccountPage.vue
+++ b/src/pages/AccountPage.vue
@@ -14,6 +14,7 @@ import { Token } from 'src/types/Token';
 
 import TransactionTable from 'components/TransactionTable.vue';
 import InternalTransactionTable from 'components/InternalTransactionTable.vue';
+import InternalTransactionFlatTable from 'components/InternalTransactionFlatTable.vue';
 import NftTransfersTable from 'components/NftTransfersTable.vue';
 import TokenList from 'components/Token/TokenList.vue';
 import ApprovalList from 'components/Token/ApprovalList.vue';
@@ -44,6 +45,7 @@ const nonce = ref<number | null>(null);
 const contract = ref<Contract | null>(null);
 const tab = ref(tabs[0]);
 const initialLoadComplete = ref(false);
+const useInternalTransactionsFlat = ref(true);
 
 const accountAddress = computed(() => route.params.address as string ?? '');
 const isLoggedIn = computed(() => store.getters['login/isLoggedIn']);
@@ -312,7 +314,19 @@ async function loadAccount() {
                 <HolderList :contract="contract" />
             </q-tab-panel>
             <q-tab-panel v-else name="internaltx">
-                <InternalTransactionTable :title="accountAddress" :filter="{address:accountAddress}"/>
+
+                <q-card class="c-address__internal-txns">
+                    <q-card-section>
+                        <q-toggle
+                            v-model="useInternalTransactionsFlat"
+                            label="Flat view"
+                            color="primary"
+                        />
+                    </q-card-section>
+
+                    <InternalTransactionFlatTable v-if="useInternalTransactionsFlat" :title="accountAddress" :filter="{address:accountAddress}"/>
+                    <InternalTransactionTable v-else :title="accountAddress" :filter="{address:accountAddress}"/>
+                </q-card>
             </q-tab-panel>
             <q-tab-panel
                 v-if="
diff --git a/src/store/general/actions.js b/src/store/general/actions.js
index da6d020f..3859c14f 100644
--- a/src/store/general/actions.js
+++ b/src/store/general/actions.js
@@ -4,3 +4,14 @@ export const toggleDisplayDecimals = async function({ commit }) {
     commit('setDisplayDecimals', displayDecimals);
 };
 
+export const setHighlightAddress = async function({ commit }, address) {
+    commit('setHighlightAddress', address);
+};
+
+export const setHighlightMethod = async function({ commit }, method) {
+    commit('setHighlightMethod', method);
+};
+
+export const setHighlightTx = async function({ commit }, tx) {
+    commit('setHighlightTx', tx);
+};
diff --git a/src/store/general/getters.js b/src/store/general/getters.js
index 66d77ae2..439ef3fa 100644
--- a/src/store/general/getters.js
+++ b/src/store/general/getters.js
@@ -3,5 +3,6 @@ export const successMsg = ({ successMsg }) => successMsg;
 export const isLoading = ({ isLoading }) => isLoading;
 export const highlightAddress = ({ highlightAddress }) => highlightAddress;
 export const highlightMethod = ({ highlightMethod }) => highlightMethod;
+export const highlightTx = ({ highlightTx }) => highlightTx;
 export const displayDecimals = ({ displayDecimals }) => displayDecimals;
 
diff --git a/src/store/general/mutations.js b/src/store/general/mutations.js
index 4d7c85c6..b436335f 100644
--- a/src/store/general/mutations.js
+++ b/src/store/general/mutations.js
@@ -18,6 +18,10 @@ export const setHighlightMethod = (state, highlightMethod) => {
     state.highlightMethod = highlightMethod;
 };
 
+export const setHighlightTx = (state, highlightTx) => {
+    state.highlightTx = highlightTx;
+};
+
 export const setDisplayDecimals = (state, displayDecimals) => {
     state.displayDecimals = displayDecimals;
 };
diff --git a/src/store/general/state.js b/src/store/general/state.js
index 168ee239..65eaadde 100644
--- a/src/store/general/state.js
+++ b/src/store/general/state.js
@@ -4,5 +4,6 @@ export default () => ({
     isLoading: null,
     highlightAddress: '',
     highlightMethod: '',
+    highlightTx: '',
     displayDecimals: 'fixed', // fixed, dynamic
 });

From a60a0b47fc710b73f1ca3e04197240e05f85b2a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viterbo=20Rodr=C3=ADguez?= <viter.rod@gmail.com>
Date: Thu, 2 May 2024 01:19:39 -0300
Subject: [PATCH 02/12] Add IntTrx flat table for address page

---
 src/components/AddressField.vue               |  25 ++-
 src/components/AddressOverview.vue            |   5 +
 src/components/ContractMoreInfo.vue           |   1 +
 .../InternalTransactionFlatTable.vue          | 158 +++++++++++++++---
 src/components/MethodField.vue                |  24 ++-
 src/components/NftTransfersTable.vue          |  11 --
 src/components/Token/ApprovalList.vue         |   8 +-
 src/components/Token/HolderList.vue           |   7 +-
 src/components/Token/TokenGridElement.vue     |   1 +
 src/components/Token/TokenTable.vue           |   7 +-
 .../Transaction/ERCTransferList.vue           |  10 --
 .../Transaction/TLOSTransferList.vue          |   8 -
 src/components/TransactionAction.vue          |  13 +-
 src/components/TransactionField.vue           |  41 ++++-
 src/components/TransactionOverview.vue        |  19 +--
 src/components/TransactionTable.vue           |   9 -
 src/pages/AccountPage.vue                     |  20 +--
 src/router/routes.js                          |   9 +
 src/store/general/state.js                    |   2 +-
 19 files changed, 244 insertions(+), 134 deletions(-)

diff --git a/src/components/AddressField.vue b/src/components/AddressField.vue
index cc066829..bcb728f0 100644
--- a/src/components/AddressField.vue
+++ b/src/components/AddressField.vue
@@ -1,19 +1,15 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch, onMounted, computed } from 'vue';
 
 import { contractManager } from 'src/boot/telosApi';
 import { getIcon } from 'src/lib/token-utils';
 import { toChecksumAddress } from 'src/lib/utils';
 
 import CopyButton from 'components/CopyButton.vue';
+import { useStore } from 'vuex';
 
 const props = defineProps({
-    highlightAddress: {
-        type: String,
-        required: false,
-        default: '',
-    },
     address: {
         type: String,
         required: true,
@@ -38,9 +34,12 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    useHighlight: {
+        type: Boolean,
+        default: true,
+    },
 });
 
-const emit = defineEmits(['highlight']);
 
 const displayName = ref('');
 const fullName = ref(toChecksumAddress(props.address));
@@ -60,7 +59,9 @@ const restart = async () => {
     await getDisplay();
 };
 
-
+const $store = useStore();
+const setHighlightAddress = (method: string) => props.useHighlight ? $store.dispatch('general/setHighlightAddress', method) : null;
+const highlightAddress = computed(() => props.useHighlight ? $store.state.general.highlightAddress : '');
 
 watch(() => props.address, async () => {
     restart();
@@ -124,18 +125,14 @@ const loadContract = async () => {
     }
 };
 
-function emitHighlight(val: string) {
-    emit('highlight', val);
-}
-
 </script>
 
 <template>
 <div
     :key="displayName + checksum"
     :class="['c-address-field', props.class]"
-    @mouseover="emitHighlight(checksum)"
-    @mouseleave="emitHighlight('')"
+    @mouseover="setHighlightAddress(checksum)"
+    @mouseleave="setHighlightAddress('')"
 >
     <router-link
         :to="`/address/${checksum}`"
diff --git a/src/components/AddressOverview.vue b/src/components/AddressOverview.vue
index 2276f1cf..9f087b91 100644
--- a/src/components/AddressOverview.vue
+++ b/src/components/AddressOverview.vue
@@ -51,6 +51,11 @@ onBeforeMount(() => {
                     width="18"
                 >
                 {{ getBalanceDisplay(tokenQty) }}
+                <ValueField
+                    :value="tokenQty"
+                    :symbol="'TLOS'"
+                    :decimals="WEI_PRECISION"
+                />
             </div>
         </q-card-section>
         <q-card-section v-if="!loadingComplete" >
diff --git a/src/components/ContractMoreInfo.vue b/src/components/ContractMoreInfo.vue
index c7d1286b..332772b8 100644
--- a/src/components/ContractMoreInfo.vue
+++ b/src/components/ContractMoreInfo.vue
@@ -36,6 +36,7 @@ const props = defineProps({
         <AddressField
             :address="props.address"
             :truncate="18"
+            :useHighlight="false"
         />
         <CopyButton
             :text="props.address"
diff --git a/src/components/InternalTransactionFlatTable.vue b/src/components/InternalTransactionFlatTable.vue
index 9c765bf9..1876865e 100644
--- a/src/components/InternalTransactionFlatTable.vue
+++ b/src/components/InternalTransactionFlatTable.vue
@@ -2,6 +2,7 @@
 import BlockField from 'components/BlockField';
 import DateField from 'components/DateField';
 import TransactionField from 'components/TransactionField';
+import AddressField from 'components/AddressField';
 import InternalTxns from 'components/Transaction/InternalTxns';
 import ValueField from 'components/ValueField.vue';
 import { WEI_PRECISION, formatWei } from 'src/lib/utils';
@@ -11,6 +12,7 @@ export default {
     name: 'InternalTransactionFlatTable',
     components: {
         TransactionField,
+        AddressField,
         DateField,
         BlockField,
         ValueField,
@@ -35,6 +37,15 @@ export default {
             type: Number,
             default: 1,
         },
+        usePagination: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    computed: {
+        address() {
+            return this.filter?.address ?? '';
+        },
     },
     data() {
         const columns = [
@@ -76,7 +87,6 @@ export default {
             columns,
             transactions: [],
             pageSize: this.initialPageSize,
-            total: null,
             loading: false,
             pagination: {
                 sortBy: 'date',
@@ -97,6 +107,9 @@ export default {
         this.columns[3].label = this.$t('pages.from');
         this.columns[4].label = this.$t('pages.to');
         this.columns[5].label = this.$t('pages.value');
+        if (!this.usePagination) {
+            this.pagination.rowsPerPage = 25;
+        }
         this.updateLoadingRows();
     },
     watch: {
@@ -137,9 +150,15 @@ export default {
             if (page) {
                 this.pagination.page = Number(page);
             }
-            if (size) {
-                this.pagination.rowsPerPage = Number(size);
+
+            if (this.usePagination) {
+                if (size) {
+                    this.pagination.rowsPerPage = Number(size);
+                }
+            } else {
+                this.pagination.rowsPerPage = 0;
             }
+
             this.updateLoadingRows();
             this.onRequest({
                 pagination: this.pagination,
@@ -164,8 +183,9 @@ export default {
             // this line cleans the table for a second and the components have to be created again (clean)
             this.rows = [];
             const { page, rowsPerPage, sortBy, descending } = props.pagination;
-            let result = await this.$indexerApi.get(this.getPath(props));
-            if (this.total === null) {
+            const path = this.getPath(props);
+            let result = await this.$indexerApi.get(path);
+            if (!this.pagination.rowsNumber) {
                 this.pagination.rowsNumber = result.data.total_count;
             }
             this.pagination.page = page;
@@ -173,6 +193,8 @@ export default {
             this.pagination.sortBy = sortBy;
             this.pagination.descending = descending;
             this.transactions = [...result.data.results];
+            let totalTraces = 0;
+            let processedTransactions = 0;
             for (const transaction of this.transactions) {
                 try {
                     transaction.transfer = false;
@@ -189,6 +211,10 @@ export default {
                     if (!contract) {
                         continue;
                     }
+                    if (totalTraces >= 25 && !props.usePagination) {
+                        // we already have enough data
+                        break;
+                    }
                     let traces = await this.$indexerApi.get(
                         '/transaction/' + transaction.hash + '/internal?limit=1000&sort=ASC&offset=0&includeAbi=1',
                     );
@@ -196,6 +222,7 @@ export default {
                         trace.hash = trace.transactionHash;
                     }
                     transaction.traces = traces.data?.results;
+                    totalTraces += +transaction.traces?.length;
                     transaction.contract = contract;
                     transaction.contractAddress = contract.address;
                     const parsedTransaction = await this.$contractManager.parseContractTransaction(
@@ -221,8 +248,10 @@ export default {
                     }
 
 
+                    processedTransactions++;
                     transaction.traces.forEach((trace) => {
                         const entry = {
+                            trx: processedTransactions % 2 === 0 ? 'even' : 'odd',
                             hash: transaction.hash,
                             blockNumber: transaction.blockNumber,
                             timestamp: transaction.timestamp,
@@ -235,7 +264,14 @@ export default {
                         this.rows.push(entry);
                     });
 
-
+                    // TODO: if we want to crop in exactly 25 rows, we need to uncomment this
+                    // if (!this.usePagination) {
+                    //     // we make sure there are no more than 25 rows.
+                    //     // If we have more than 25 rows, we discard the rest
+                    //     if (this.rows.length > 25) {
+                    //         this.rows = this.rows.slice(0, 25);
+                    //     }
+                    // }
 
                 } catch (e) {
                     console.error(
@@ -250,7 +286,6 @@ export default {
                     });
                 }
             }
-            // this.rows = this.transactions; // FIXME:
             this.loading = false;
         },
         getPath(props) {
@@ -263,7 +298,7 @@ export default {
                 path = '/transactions';
             }
             path += `?limit=${
-                rowsPerPage === 0 ? 500 : rowsPerPage
+                rowsPerPage === 0 ? 25 : rowsPerPage
             }`;
 
             if (filter.block) {
@@ -278,7 +313,7 @@ export default {
             path += `&sort=${descending ? 'desc' : 'asc'}`;
             path += '&includeAbi=1&full=1';
 
-            path += (this.total === null) ? '&includePagination=true' : '';  // We only need the count once
+            path += (!this.pagination.rowsNumber) ? '&includePagination=true' : '';  // We only need the count once
 
             return path;
         },
@@ -293,12 +328,24 @@ export default {
 <q-table
     v-if="!loading"
     v-model:pagination="pagination"
+    class="c-inttrx-flat__table"
     :rows="rows"
     :row-key="row => row.hash"
     :columns="columns"
     :rows-per-page-options="page_size_options"
     @request="onPaginationChange"
 >
+    <template v-if="!usePagination" v-slot:bottom>
+        <q-card-actions
+            align="center"
+            class="c-inttrx-flat__footer"
+        >
+            <router-link class="c-inttrx-flat__footer-container" :to="{ name: 'txsInternal', query: { a: address } }">
+                <span class="c-inttrx-flat__footer-text"> See all transactions </span>
+                <q-icon name="arrow_forward" class="c-inttrx-flat__footer-icon" />
+            </router-link>
+        </q-card-actions>
+    </template>
     <template v-slot:header="props">
         <q-tr :props="props">
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -329,13 +376,13 @@ export default {
                     </div>
                 </div>
             </q-th>
-            <q-td auto-width/>
+            <q-td v-if="usePagination" auto-width/>
         </q-tr>
     </template>
     <template v-slot:body="props">
-        <q-tr :props="props">
+        <q-tr :props="props" :class="props.row.trx">
             <q-td key="hash" :props="props">
-                <TransactionField :transaction-hash="props.row.hash"/>
+                <TransactionField :transaction-hash="props.row.hash" :useHighlight="true"/>
             </q-td>
             <q-td key="block" :props="props">
                 <BlockField :block="props.row.blockNumber"/>
@@ -344,10 +391,20 @@ export default {
                 <DateField :epoch="(props.row.timestamp / 1000)" :force-show-age="showDateAge"/>
             </q-td>
             <q-td key="from" :props="props">
-                <TransactionField :transaction-hash="props.row.from"/>
+                <AddressField
+                    v-if="props.row.from"
+                    :key="props.row.from"
+                    :address="props.row.from"
+                    :truncate="12"
+                />
             </q-td>
             <q-td key="to" :props="props">
-                <TransactionField :transaction-hash="props.row.to"/>
+                <AddressField
+                    v-if="props.row.to"
+                    :key="props.row.to"
+                    :address="props.row.to"
+                    :truncate="12"
+                />
             </q-td>
             <q-td key="value" :props="props">
                 <ValueField
@@ -372,11 +429,23 @@ export default {
 <q-table
     v-else
     v-model:pagination="pagination"
+    class="c-inttrx-flat__table"
     :rows="loadingRows"
     :row-key="row => row.hash"
     :columns="columns"
     :rows-per-page-options="page_size_options"
 >
+    <template v-if="!usePagination" v-slot:bottom>
+        <q-card-actions
+            align="center"
+            class="c-inttrx-flat__footer"
+        >
+            <router-link class="c-inttrx-flat__footer-container" :to="{ name: 'txsInternal' }">
+                <span class="c-inttrx-flat__footer-text"> See all transactions </span>
+                <q-icon name="arrow_forward" class="c-inttrx-flat__footer-icon" />
+            </router-link>
+        </q-card-actions>
+    </template>
     <template v-slot:header="props">
         <q-tr :props="props">
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -427,16 +496,67 @@ export default {
             <q-td key="int_txns" >
                 <q-skeleton type="text" class="c-trx-overview__skeleton" />
             </q-td>
-            <q-td auto-width>
+            <q-td key="value" >
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td v-if="usePagination" auto-width>
                 <q-skeleton type="text" class="c-trx-overview__skeleton" />
             </q-td>
         </q-tr>
     </template>
 </q-table>
 </template>
-<style lang="scss" scoped>
-.info-icon{
-    margin-left: .25rem;
-    padding-bottom: 0.2rem;
+<style lang="scss">
+
+.odd {
+        background-color: var(--scrollbar-track-bg-color);
 }
+
+.c-inttrx-flat {
+    .info-icon{
+        margin-left: .25rem;
+        padding-bottom: 0.2rem;
+    }
+
+
+
+    &__table {
+        .q-table__bottom {
+            position: relative;
+        }
+    }
+    &__footer {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        top: 0;
+        cursor: pointer;
+        display: flex;
+        gap: 5px;
+        background-color: color-mix(in srgb, white, black 5%);
+
+        &-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex: 1;
+        }
+
+        body.body--dark & {
+            background-color: color-mix(in srgb, $dark, white 5%);
+        }
+
+        &-text {
+            font-size: 0.7rem;
+            text-transform: uppercase;
+        }
+        &:hover {
+            color: var(--q-primary);
+        }
+    }
+
+}
+
+
 </style>
diff --git a/src/components/MethodField.vue b/src/components/MethodField.vue
index 3459ad1c..faa92f0b 100644
--- a/src/components/MethodField.vue
+++ b/src/components/MethodField.vue
@@ -3,15 +3,11 @@ import { computed, ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { ZERO_ADDRESSES } from 'src/lib/utils';
+import { useStore } from 'vuex';
 
 const { t: $t } = useI18n();
 
 const props = defineProps({
-    highlightMethod: {
-        type: String,
-        required: false,
-        default: '',
-    },
     trx: {
         type: Object as () => {
             parsedTransaction?: {
@@ -38,13 +34,19 @@ const props = defineProps({
         type: Object,
         default: () => null,
     },
+    useHighlight: {
+        type: Boolean,
+        default: true,
+    },
 });
 
-const emit = defineEmits(['highlight']);
-
 const methodName = ref('');
 const nativeTooltipText = ref('');
 
+const $store = useStore();
+const setHighlightMethod = (method: string) => props.useHighlight ? $store.dispatch('general/setHighlightMethod', method) : null;
+const highlightMethod = computed(() => props.useHighlight ? $store.state.general.highlightMethod : '');
+
 const methodSignature = computed(() => {
     if (props.trx.input && props.trx.input !== '0x') {
         // the first 10 characters of the input data are the method signature, including leading '0x'
@@ -108,10 +110,6 @@ const setValues = async () => {
         methodName.value = props.trx.parsedTransaction.name;
     }
 };
-
-function emitHighlight(val: string) {
-    emit('highlight', val);
-}
 </script>
 
 <template>
@@ -121,8 +119,8 @@ function emitHighlight(val: string) {
         'c-method--highlight': [methodName, methodSignature].includes(highlightMethod) && highlightMethod !== '',
         'c-method--full-text': fullText,
     }"
-    @mouseenter="emitHighlight(methodName || methodSignature)"
-    @mouseleave="emitHighlight('')"
+    @mouseenter="setHighlightMethod(methodName || methodSignature)"
+    @mouseleave="setHighlightMethod('')"
 >
     {{ displayText }}
 
diff --git a/src/components/NftTransfersTable.vue b/src/components/NftTransfersTable.vue
index 7892f5d9..f67c82d8 100644
--- a/src/components/NftTransfersTable.vue
+++ b/src/components/NftTransfersTable.vue
@@ -162,11 +162,6 @@ const truncatedId = (id: string) => {
     }
 };
 
-const highlightAddress = ref('');
-function setHighlightAddress(val: string) {
-    highlightAddress.value = val;
-}
-
 const getPath = (settings: { pagination: Pagination }) => {
     const { page, rowsPerPage, descending } = settings.pagination;
     let path = `/account/${props.address}/transfers?limit=${
@@ -394,8 +389,6 @@ onMounted(() => {
                     :key="props.row.from"
                     :address="props.row.from"
                     :truncate="12"
-                    :highlightAddress="highlightAddress"
-                    @highlight="setHighlightAddress"
                 />
             </q-td>
             <q-td key="to" :props="props">
@@ -404,8 +397,6 @@ onMounted(() => {
                     :key="props.row.to"
                     :address="props.row.to"
                     :truncate="12"
-                    :highlightAddress="highlightAddress"
-                    @highlight="setHighlightAddress"
                 />
             </q-td>
             <q-td key="id" :props="props">
@@ -432,8 +423,6 @@ onMounted(() => {
                     :key="props.row.contract.address"
                     :address="props.row.contract.address"
                     :truncate="16"
-                    :highlightAddress="highlightAddress"
-                    @highlight="setHighlightAddress"
                 />
             </q-td>
             <q-td key="item" :props="props" class="flex items-center">
diff --git a/src/components/Token/ApprovalList.vue b/src/components/Token/ApprovalList.vue
index d45c9803..66aa1c61 100644
--- a/src/components/Token/ApprovalList.vue
+++ b/src/components/Token/ApprovalList.vue
@@ -490,7 +490,12 @@ export default {
         <template v-slot:body="props">
             <q-tr :props="props">
                 <q-td key="spender" :props="props">
-                    <AddressField :key="props.row.spender + 'c'" :address="props.row.spender" :truncate="18" />
+                    <AddressField
+                        :key="props.row.spender + 'c'"
+                        :address="props.row.spender"
+                        :truncate="18"
+                        :useHighlight="false"
+                    />
                 </q-td>
                 <q-td key="amount" :props="props" >
                     <div v-if="!this.isNFT()">
@@ -553,6 +558,7 @@ export default {
                         :key="props.row.contract.address + 'contract'"
                         :address="props.row.contract.address"
                         :truncate="18"
+                        :useHighlight="false"
                     />
                 </q-td>
                 <q-td key="updated" :props="props">
diff --git a/src/components/Token/HolderList.vue b/src/components/Token/HolderList.vue
index fbd1ce44..d574ba99 100644
--- a/src/components/Token/HolderList.vue
+++ b/src/components/Token/HolderList.vue
@@ -165,7 +165,12 @@ export default {
     <template v-slot:body="props">
         <q-tr :props="props">
             <q-td key="holder" :props="props">
-                <AddressField :key="props.row.address + 'c'" :address="props.row.address" :truncate="18" />
+                <AddressField
+                    :key="props.row.address + 'c'"
+                    :address="props.row.address"
+                    :truncate="18"
+                    :useHighlight="false"
+                />
             </q-td>
             <q-td key="balance" :props="props">
                 <span v-if="contract?.properties?.decimals">
diff --git a/src/components/Token/TokenGridElement.vue b/src/components/Token/TokenGridElement.vue
index aa160ac0..8b124edf 100644
--- a/src/components/Token/TokenGridElement.vue
+++ b/src/components/Token/TokenGridElement.vue
@@ -41,6 +41,7 @@ export default {
                     :address="element.address"
                     :name="symbol"
                     class="q-mb-sm"
+                    :useHighlight="false"
                 />
                 <div>
                     <div class="flex">
diff --git a/src/components/Token/TokenTable.vue b/src/components/Token/TokenTable.vue
index 760e1b72..bcba408e 100644
--- a/src/components/Token/TokenTable.vue
+++ b/src/components/Token/TokenTable.vue
@@ -99,7 +99,12 @@ export default {
                 <q-img :src="props.row.logoURI" class="c-token-icon" />
             </q-td>
             <q-td key="name" :props="props">
-                <AddressField :address="props.row.address" :name="props.row.name" :truncate="32"/>
+                <AddressField
+                    :address="props.row.address"
+                    :name="props.row.name"
+                    :truncate="32"
+                    :useHighlight="false"
+                />
             </q-td>
             <q-td key="symbol" :props="props">
                 {{ props.row.symbol }}
diff --git a/src/components/Transaction/ERCTransferList.vue b/src/components/Transaction/ERCTransferList.vue
index 417e4a8f..00c8b408 100644
--- a/src/components/Transaction/ERCTransferList.vue
+++ b/src/components/Transaction/ERCTransferList.vue
@@ -141,10 +141,6 @@ const loadTransfers = async () => {
     emit('transfers-count', count);
 };
 
-function setHighlightAddress(val: string) {
-    emit('highlight', val);
-}
-
 watch(() => props.logs, async (newTrx) => {
     if (newTrx) {
         await loadTransfers();
@@ -169,8 +165,6 @@ watch(() => props.logs, async (newTrx) => {
                 copy
                 :address="transfer.from"
                 :truncate="15"
-                :highlightAddress="props.highlightAddress"
-                @highlight="setHighlightAddress"
             />
         </div>
         <div class="c-erc-transfers__cell c-erc-transfers__cell--b">
@@ -179,8 +173,6 @@ watch(() => props.logs, async (newTrx) => {
                 copy
                 :address="transfer.to"
                 :truncate="15"
-                :highlightAddress="props.highlightAddress"
-                @highlight="setHighlightAddress"
             />
         </div>
         <div class="c-erc-transfers__cell c-erc-transfers__cell--c">
@@ -192,8 +184,6 @@ watch(() => props.logs, async (newTrx) => {
             <AddressField
                 :address="transfer.token.address"
                 :truncate="15"
-                :highlightAddress="props.highlightAddress"
-                @highlight="setHighlightAddress"
             />
         </div>
     </div>
diff --git a/src/components/Transaction/TLOSTransferList.vue b/src/components/Transaction/TLOSTransferList.vue
index 6fd66ad4..45008921 100644
--- a/src/components/Transaction/TLOSTransferList.vue
+++ b/src/components/Transaction/TLOSTransferList.vue
@@ -65,10 +65,6 @@ const loadTransfers = async () => {
     emit('transfers-count', tlos_transfers.value.length);
 };
 
-function setHighlightAddress(val: string) {
-    emit('highlight', val);
-}
-
 watch(() => props.transaction, async (newTrx) => {
     if (newTrx) {
         await loadTransfers();
@@ -93,8 +89,6 @@ watch(() => props.transaction, async (newTrx) => {
                 copy
                 :address="transfer.from"
                 :truncate="15"
-                :highlightAddress="props.highlightAddress"
-                @highlight="setHighlightAddress"
             />
         </div>
         <div class="c-tlos-transfers__cell c-tlos-transfers__cell--b">
@@ -103,8 +97,6 @@ watch(() => props.transaction, async (newTrx) => {
                 copy
                 :address="transfer.to"
                 :truncate="15"
-                :highlightAddress="props.highlightAddress"
-                @highlight="setHighlightAddress"
             />
         </div>
         <div class="c-tlos-transfers__cell c-tlos-transfers__cell--c">
diff --git a/src/components/TransactionAction.vue b/src/components/TransactionAction.vue
index a7693817..20fa0631 100644
--- a/src/components/TransactionAction.vue
+++ b/src/components/TransactionAction.vue
@@ -30,8 +30,6 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['highlight']);
-
 const methodName = ref('');
 const nativeTooltipText = ref('');
 
@@ -67,9 +65,6 @@ const setValues = async () => {
     }
 };
 
-function setHighlightAddress(val: string) {
-    emit('highlight', val);
-}
 </script>
 
 <template>
@@ -89,19 +84,15 @@ function setHighlightAddress(val: string) {
     <span class="c-trx-action__text">Function by</span>
 
     <AddressField
-        :address="props.trx.from"
+        :address="props.trx.from ?? ''"
         :truncate="12"
-        :highlightAddress="props.highlightAddress"
-        @highlight="setHighlightAddress"
     />
 
     <span class="c-trx-action__text">on</span>
 
     <AddressField
-        :address="props.trx.to"
+        :address="props.trx.to ?? ''"
         :truncate="12"
-        :highlightAddress="props.highlightAddress"
-        @highlight="setHighlightAddress"
     />
 </div>
 </template>
diff --git a/src/components/TransactionField.vue b/src/components/TransactionField.vue
index 30358179..a97dbe34 100644
--- a/src/components/TransactionField.vue
+++ b/src/components/TransactionField.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import CopyButton from 'components/CopyButton.vue';
 import { computed } from 'vue';
+import { useStore } from 'vuex';
 
 const props = defineProps({
     transactionHash: {
@@ -26,8 +27,16 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    useHighlight: {
+        type: Boolean,
+        default: false,
+    },
 });
 
+const $store = useStore();
+const setHighlightTx = (Trx: string) => props.useHighlight ? $store.dispatch('general/setHighlightTx', Trx) : null;
+const highlightTx = computed(() => props.useHighlight ? $store.state.general.highlightTx : '');
+
 const text = computed(() => {
     if (props.transactionHash) {
         const cropped = props.transactionHash.slice(0, props.truncate);
@@ -40,14 +49,27 @@ const text = computed(() => {
 </script>
 
 <template>
-<div class="c-transaction-field">
+<div
+    class="c-transaction-field"
+
+    @mouseover="setHighlightTx(transactionHash)"
+    @mouseleave="setHighlightTx('')"
+>
     <!-- only evaluate icon conditional if prop is passed -->
     <q-icon v-if="props.status !== null && !props.status" class="c-transaction-field__icon text-negative" name="far fa-times-circle">
         <q-tooltip anchor="bottom right" self="top start">
             {{ $t('components.txn_failed') }}
         </q-tooltip>
     </q-icon>
-    <router-link :key="$route.path" :class="`text-${color}`" :to="`/tx/${transactionHash}`">
+    <router-link
+        :key="$route.path"
+        :class="{
+            [`text-${color}`]: true,
+            'c-transaction-field__link': true,
+            'c-transaction-field__link--highlight': highlightTx === transactionHash && highlightTx !== ''
+        }"
+        :to="`/tx/${transactionHash}`"
+    >
         {{ text }}
         <q-tooltip>{{ transactionHash }}</q-tooltip>
     </router-link>
@@ -59,9 +81,24 @@ const text = computed(() => {
 .c-transaction-field{
     display: inline-flex;
     align-items: center;
+
     &__icon{
         margin-right: .1rem;
         padding-bottom: .05rem;
     }
+
+    &__link {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        position: relative;
+
+        &--highlight {
+            background: rgba($secondary, 0.2);
+            outline: 1px dashed $secondary;
+            border-radius: 5px;
+        }
+    }
+
 }
 </style>
diff --git a/src/components/TransactionOverview.vue b/src/components/TransactionOverview.vue
index f8ca8aca..9f499741 100644
--- a/src/components/TransactionOverview.vue
+++ b/src/components/TransactionOverview.vue
@@ -31,7 +31,6 @@ const blockNumber = computed(() => props.trx?.blockNumber);
 const timestamp = computed(() => props.trx?.timestamp || 0);
 const blockData = ref<BlockData | null>(null);
 const transactionIndex = ref<number>(-1);
-const highlightAddress = ref('');
 const toAddress = ref('');
 const isAContractDeployment = ref(false);
 
@@ -52,10 +51,6 @@ const loadBlockData = async () => {
     }
 };
 
-function setHighlightAddress(val: string) {
-    highlightAddress.value = val;
-}
-
 function setERC20TransfersCount(count: number) {
     showErc20Transfers.value = count > 0;
 }
@@ -170,7 +165,7 @@ watch(() => showMoreDetails.value, (newShowMoreDetails) => {
         <div class="c-trx-overview__col-val">
             <div class="c-trx-overview__row-value">
                 <q-skeleton v-if="loading" type="text" class="c-trx-overview__skeleton" />
-                <BlockField v-else :block="blockNumber" />
+                <BlockField v-else :block="blockNumber ?? 0" />
             </div>
         </div>
     </div>
@@ -224,8 +219,6 @@ watch(() => showMoreDetails.value, (newShowMoreDetails) => {
                 <TransactionAction
                     v-else
                     :trx="trx"
-                    :highlightAddress="highlightAddress"
-                    @highlight="setHighlightAddress"
                 />
             </template>
         </div>
@@ -250,8 +243,6 @@ watch(() => showMoreDetails.value, (newShowMoreDetails) => {
                 :key="'trx-from-'+ trx.from"
                 copy
                 :address="trx.from"
-                :highlightAddress="highlightAddress"
-                @highlight="setHighlightAddress"
             />
         </div>
     </div>
@@ -276,8 +267,6 @@ watch(() => showMoreDetails.value, (newShowMoreDetails) => {
                     copy
                     :address="toAddress"
                     :is-contract-trx="true"
-                    :highlightAddress="highlightAddress"
-                    @highlight="setHighlightAddress"
                 />
                 Created ]
             </template>
@@ -287,8 +276,6 @@ watch(() => showMoreDetails.value, (newShowMoreDetails) => {
                     copy
                     :address="toAddress"
                     :is-contract-trx="!!trx?.contract"
-                    :highlightAddress="highlightAddress"
-                    @highlight="setHighlightAddress"
                 />
             </template>
         </div>
@@ -315,8 +302,6 @@ watch(() => showMoreDetails.value, (newShowMoreDetails) => {
             <ERCTransferList
                 :logs="trx?.logsArray ?? []"
                 :type="'erc20'"
-                :highlightAddress="highlightAddress"
-                @highlight="setHighlightAddress"
                 @transfers-count="setERC20TransfersCount"
             />
         </div>
@@ -343,8 +328,6 @@ watch(() => showMoreDetails.value, (newShowMoreDetails) => {
             <TLOSTransferList
                 v-if="trx"
                 :transaction="trx"
-                :highlightAddress="highlightAddress"
-                @highlight="setHighlightAddress"
                 @transfers-count="setTLOSTransfersCount"
             />
         </div>
diff --git a/src/components/TransactionTable.vue b/src/components/TransactionTable.vue
index bda8b1e3..0a073044 100644
--- a/src/components/TransactionTable.vue
+++ b/src/components/TransactionTable.vue
@@ -51,7 +51,6 @@ const loading =  ref(false);
 const showDateAge = ref(true);
 const showTotalGasFee = ref(true);
 const highlightMethod = ref('');
-const highlightAddress = ref('');
 const totalRows = ref(0);
 
 const transactions: any[] = [];
@@ -302,10 +301,6 @@ function setHighlightMethod(val: string) {
     highlightMethod.value = val;
 }
 
-function setHighlightAddress(val: string) {
-    highlightAddress.value = val;
-}
-
 const updateLoadingRows = () => {
     loadingRows.value = [];
     for (var i = 1; i <= pagination.value.rowsPerPage; i++) {
@@ -438,8 +433,6 @@ onBeforeMount(() => {
                         :address="props.row.from"
                         :truncate="12"
                         :copy="true"
-                        :highlightAddress="highlightAddress"
-                        @highlight="setHighlightAddress"
                     />
                 </q-td>
                 <q-td key="to" :props="props" class="c-transaction-table__cell">
@@ -449,8 +442,6 @@ onBeforeMount(() => {
                         :address="props.row.to"
                         :truncate="12"
                         :copy="true"
-                        :highlightAddress="highlightAddress"
-                        @highlight="setHighlightAddress"
                     />
                 </q-td>
                 <q-td key='value' :props="props" class="c-transaction-table__cell">
diff --git a/src/pages/AccountPage.vue b/src/pages/AccountPage.vue
index ee6da841..5f8744e7 100644
--- a/src/pages/AccountPage.vue
+++ b/src/pages/AccountPage.vue
@@ -13,7 +13,6 @@ import { BalanceQueryResponse, BalanceResult } from 'src/types/BalanceResult';
 import { Token } from 'src/types/Token';
 
 import TransactionTable from 'components/TransactionTable.vue';
-import InternalTransactionTable from 'components/InternalTransactionTable.vue';
 import InternalTransactionFlatTable from 'components/InternalTransactionFlatTable.vue';
 import NftTransfersTable from 'components/NftTransfersTable.vue';
 import TokenList from 'components/Token/TokenList.vue';
@@ -45,7 +44,6 @@ const nonce = ref<number | null>(null);
 const contract = ref<Contract | null>(null);
 const tab = ref(tabs[0]);
 const initialLoadComplete = ref(false);
-const useInternalTransactionsFlat = ref(true);
 
 const accountAddress = computed(() => route.params.address as string ?? '');
 const isLoggedIn = computed(() => store.getters['login/isLoggedIn']);
@@ -314,19 +312,11 @@ async function loadAccount() {
                 <HolderList :contract="contract" />
             </q-tab-panel>
             <q-tab-panel v-else name="internaltx">
-
-                <q-card class="c-address__internal-txns">
-                    <q-card-section>
-                        <q-toggle
-                            v-model="useInternalTransactionsFlat"
-                            label="Flat view"
-                            color="primary"
-                        />
-                    </q-card-section>
-
-                    <InternalTransactionFlatTable v-if="useInternalTransactionsFlat" :title="accountAddress" :filter="{address:accountAddress}"/>
-                    <InternalTransactionTable v-else :title="accountAddress" :filter="{address:accountAddress}"/>
-                </q-card>
+                <InternalTransactionFlatTable
+                    :title="accountAddress"
+                    :filter="{address:accountAddress}"
+                    :usePagination="false"
+                />
             </q-tab-panel>
             <q-tab-panel
                 v-if="
diff --git a/src/router/routes.js b/src/router/routes.js
index 091f5904..44fd06d9 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -104,6 +104,15 @@ const routes = [
             component: () => import('pages/ErrorNotFoundPage.vue'),
         }],
     },
+    {
+        path: '/txsInternal',
+        component: () => import('layouts/MainLayout.vue'),
+        children: [{
+            path: '',
+            name: 'txsInternal',
+            component: () => import('pages/ErrorNotFoundPage.vue'),
+        }],
+    },
     {
         path: '/endpoints',
         redirect: () => ({ path: '/health' }),
diff --git a/src/store/general/state.js b/src/store/general/state.js
index 65eaadde..a535e9f9 100644
--- a/src/store/general/state.js
+++ b/src/store/general/state.js
@@ -5,5 +5,5 @@ export default () => ({
     highlightAddress: '',
     highlightMethod: '',
     highlightTx: '',
-    displayDecimals: 'fixed', // fixed, dynamic
+    displayDecimals: 'dynamic', // fixed, dynamic
 });

From 047fb958f7ccf2f777f58f6082e1dcb5d227d475 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viterbo=20Rodr=C3=ADguez?= <viter.rod@gmail.com>
Date: Thu, 2 May 2024 09:47:26 -0300
Subject: [PATCH 03/12] fix Age header icon

---
 src/components/InternalTransactionFlatTable.vue | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/InternalTransactionFlatTable.vue b/src/components/InternalTransactionFlatTable.vue
index 1876865e..e65c8ee0 100644
--- a/src/components/InternalTransactionFlatTable.vue
+++ b/src/components/InternalTransactionFlatTable.vue
@@ -349,10 +349,9 @@ export default {
     <template v-slot:header="props">
         <q-tr :props="props">
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <div :class="[ 'u-flex--center-y', { 'u-flex--right': col.align === 'right' } ]" >
-                    <div
+                <div :class="[ 'c-inttrx-flat__header-age', 'u-flex--center-y', { 'u-flex--right': col.align === 'right' } ]" @click="toggleDateFormat">
+                    <template
                         v-if="col.name === 'date'"
-                        @click="toggleDateFormat"
                     >
                         <a>{{ showDateAge ? col.label: $t('components.date') }}</a>
                         <q-icon
@@ -363,7 +362,7 @@ export default {
                                 {{ $t('components.click_to_change_format') }}
                             </q-tooltip>
                         </q-icon>
-                    </div>
+                    </template>
                     <div v-else-if="col.name === 'method'">
                         {{ col.label }}
                         <q-icon class="info-icon" name="far fa-question-circle" />
@@ -449,10 +448,9 @@ export default {
     <template v-slot:header="props">
         <q-tr :props="props">
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <div :class="[ 'u-flex--center-y', { 'u-flex--right': col.align === 'right' } ]" >
-                    <div
+                <div :class="[ 'c-inttrx-flat__header-age', 'u-flex--center-y', { 'u-flex--right': col.align === 'right' } ]" @click="toggleDateFormat">
+                    <template
                         v-if="col.name === 'date'"
-                        @click="toggleDateFormat"
                     >
                         <a>{{ showDateAge ? col.label: $t('components.date') }}</a>
                         <q-icon
@@ -463,7 +461,7 @@ export default {
                                 {{ $t('components.click_to_change_format') }}
                             </q-tooltip>
                         </q-icon>
-                    </div>
+                    </template>
                     <div v-else-if="col.name === 'method'">
                         {{ col.label }}
                         <q-icon class="info-icon" name="far fa-question-circle" />
@@ -525,6 +523,9 @@ export default {
             position: relative;
         }
     }
+    &__header-age {
+        gap: 5px;
+    }
     &__footer {
         position: absolute;
         right: 0;

From aace1cb4d8e326fec33d464784e931e8f612197e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viterbo=20Rodr=C3=ADguez?= <viter.rod@gmail.com>
Date: Thu, 2 May 2024 11:29:14 -0300
Subject: [PATCH 04/12] save wip

---
 src/css/global/_mixins.scss   |   5 +-
 src/i18n/en-us/index.js       |   3 +
 src/pages/InternalTrxPage.vue | 192 ++++++++++++++++++++++++++++++++++
 3 files changed, 199 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/InternalTrxPage.vue

diff --git a/src/css/global/_mixins.scss b/src/css/global/_mixins.scss
index 14e006d8..4bd3c124 100644
--- a/src/css/global/_mixins.scss
+++ b/src/css/global/_mixins.scss
@@ -17,6 +17,9 @@
         font-size: 1.4rem;
         font-weight: bold;
     }
+    &-sub-title {
+        font-size: 1rem;
+    }
 }
 
 @mixin page-header-nav-btn {
@@ -138,4 +141,4 @@
         background: rgba(148, 148, 148, 0.1);
         border: 1px solid #949494 !important;
     }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 2abdbdf1..0d6a4393 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -42,6 +42,9 @@ export default {
             internal: 'Internal Transactions',
             not_found: 'Transaction not found',
         },
+        internaltrx: {
+            page_title: 'Contract Internal Transactions',
+        },
         home: {
             telos_evm_explorer: 'The Telos EVM Explorer',
             market_cap: 'Market Cap',
diff --git a/src/pages/InternalTrxPage.vue b/src/pages/InternalTrxPage.vue
new file mode 100644
index 00000000..6d1036b6
--- /dev/null
+++ b/src/pages/InternalTrxPage.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+import { contractManager } from 'src/boot/telosApi';
+import { indexerApi } from 'src/boot/telosApi';
+import { evm } from 'src/boot/evm';
+import { toChecksumAddress } from 'src/lib/utils';
+import { getIcon } from 'src/lib/token-utils';
+import Contract from 'src/lib/contract/Contract';
+import { BalanceQueryResponse, BalanceResult } from 'src/types/BalanceResult';
+import { Token } from 'src/types/Token';
+
+import TransactionTable from 'components/TransactionTable.vue';
+import InternalTransactionFlatTable from 'components/InternalTransactionFlatTable.vue';
+import NftTransfersTable from 'components/NftTransfersTable.vue';
+import TokenList from 'components/Token/TokenList.vue';
+import ApprovalList from 'components/Token/ApprovalList.vue';
+import HolderList from 'components/Token/HolderList.vue';
+import NFTList from 'components/Token/NFTList.vue';
+import ContractTab from 'components/ContractTab/ContractTab.vue';
+import CopyButton from 'components/CopyButton.vue';
+import GenericContractInterface from 'components/ContractTab/GenericContractInterface.vue';
+import AddressQR from 'src/components/AddressQR.vue';
+import AddressOverview from 'src/components/AddressOverview.vue';
+import AddressMoreInfo from 'src/components/AddressMoreInfo.vue';
+import ContractMoreInfo from 'src/components/ContractMoreInfo.vue';
+
+
+const { t: $t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+
+const loading = ref(false);
+const title = ref('');
+const fullTitle = ref('');
+const telosAccount = ref('');
+const balance = ref('0');
+const nonce = ref<number | null>(null);
+const contract = ref<Contract | null>(null);
+const tab = ref(tabs[0]);
+const initialLoadComplete = ref(false);
+
+const accountAddress = computed(() => route.params.address as string ?? '');
+const isLoggedIn = computed(() => store.getters['login/isLoggedIn']);
+const address = computed(() => store.getters['login/address']);
+
+watch(accountAddress, (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+        const newAsChecksum = toChecksumAddress(newVal);
+        if (newAsChecksum !== newVal) {
+            router.replace({ params: { address: newAsChecksum } });
+        }
+        loadAccount().then(() => {
+            initialLoadComplete.value = true;
+        });
+    }
+}, { deep: true, immediate: true });
+
+watch(() => route.query.tab, (newTab) => {
+    const str = newTab as string;
+    tab.value = tabs.includes(str) ? str : tabs[0];
+});
+
+watch(tab, (newTab) => {
+    router.push({ query: { tab: newTab } });
+});
+
+watch(isLoggedIn, (value) => {
+    // if user logs out while on approvals tab return to transactions
+    if (!value && tab.value === 'approvals'){
+        router.push({ query: { tab: 'transactions' } });
+    }
+});
+
+onMounted(() => {
+    const tabQueryParam = route.query.tab as string;
+    tab.value = tabs.includes(tabQueryParam) ? tabQueryParam : tabs[0];
+});
+
+async function loadAccount() {
+    if(!accountAddress.value || accountLoading.value){
+        return;
+    }
+    accountLoading.value = true;
+    const tokenList = await contractManager.getTokenList();
+    try {
+        const response: BalanceQueryResponse = await indexerApi.get(
+            `/account/${accountAddress.value}/balances?includeAbi=true`,
+            // `/account/${accountAddress.value}/balances?contract=___NATIVE_CURRENCY___&includeAbi=true`,
+        );
+        //TODO restore original api query when contract param query is fixed
+        const systemTokenResult = response.data.results.find((r : BalanceResult) => r.contract === '___NATIVE_CURRENCY___') as BalanceResult;
+
+        // balance.value = (response.data?.results?.length > 0) ? response.data.results[0].balance : '0';
+        balance.value = systemTokenResult ? systemTokenResult.balance : '0';
+    } catch (e) {
+        console.error('Could not get balance: ', e);
+    }
+    contract.value = null;
+    fullTitle.value = '';
+    nonce.value = 0;
+    title.value = $t('pages.account');
+    const force = true;
+    const cachedContract = await contractManager.getContract(accountAddress.value, force);
+    if (cachedContract?.creationInfo?.transaction || cachedContract?.supportedInterfaces?.length > 0){
+        contract.value = cachedContract;
+        if(contract.value && contract.value.supportedInterfaces?.includes('erc20')){
+            tokenList.tokens.forEach((token: Token) => {
+                if(token.address.toLowerCase() ===  contract.value?.address.toLowerCase()){
+                    contract.value.issuer = token.issuer;
+                    contract.value.issuer_link = token.issuer_link;
+                    contract.value.logoURI = token.logoURI;
+                    contract.value.setVerified(true);
+                }
+            });
+        }
+        title.value = $t('pages.contract');
+    } else {
+        contractManager.addContractToCache(accountAddress.value, { address: accountAddress.value });
+        try {
+            const account = await evm.telos.getEthAccount(accountAddress.value);
+            telosAccount.value = account?.account;
+            nonce.value = account?.nonce;
+        } catch (e) {
+            console.info(e);
+        }
+    }
+
+    accountLoading.value = false;
+    fullTitle.value = contract.value?.getName() ?? '';
+}
+
+</script>
+
+<template>
+<q-page class="c-internal-trx">
+
+    <div class="c-internal-trx__header">
+        <span class="c-internal-trx__header-title">{{ $t('pages.internaltrx.page_title') }}</span>
+        <span class="c-internal-trx__header-sub-title">{{ $t('pages.internaltrx.for_address', { address: address }) }}</span>
+    </div>
+
+    <div class="c-internal-trx__body">
+        <q-card>
+            <q-toggle
+                v-model="showEmptyBlocks"
+                class="c-internal-trx__toggle"
+                label="display empty blocks"
+                color="primary"
+                checked-icon="visibility"
+                unchecked-icon="visibility_off"
+            />
+            <BlockTable :showEmptyBlocks='showEmptyBlocks' class="c-internal-trx__block-table" :title="'Block List'"/>
+        </q-card>
+    </div>
+
+</q-page>
+</template>
+
+<style lang="scss">
+
+.c-internal-trx {
+    @include page-container;
+
+    &__header {
+        @include page-header;
+    }
+
+    &__tabs {
+        @include tabs-container;
+    }
+
+    &__main-container {
+        background: transparent !important;
+    }
+    &__main-content {
+        padding: 0px;
+    }
+    &__panels {
+        background: transparent;
+        --v-overflow: visible;
+        overflow: visible !important;
+    }
+    &__panel {
+        padding: 0px;
+    }
+}
+
+</style>

From a38a9901003b2a32e6fdc0a2791d5651a034bef5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viterbo=20Rodr=C3=ADguez?= <viter.rod@gmail.com>
Date: Fri, 3 May 2024 01:46:13 -0300
Subject: [PATCH 05/12] add Contract Internal Transaction page

---
 src/components/AddressField.vue               |   1 +
 .../InternalTransactionFlatTable.vue          | 170 ++++++++++++-----
 src/components/Token/TokenTable.vue           |   5 +-
 src/components/ValueField.vue                 |   4 +-
 src/css/app.scss                              |   6 +-
 src/css/global/_mixins.scss                   |  12 +-
 src/i18n/en-us/index.js                       |   1 +
 src/lib/transaction-utils.ts                  |   2 +-
 src/pages/AccountPage.vue                     |   9 +-
 src/pages/InternalTrxPage.vue                 | 172 ++----------------
 src/router/routes.js                          |   6 +-
 11 files changed, 174 insertions(+), 214 deletions(-)

diff --git a/src/components/AddressField.vue b/src/components/AddressField.vue
index bcb728f0..59fa4c9b 100644
--- a/src/components/AddressField.vue
+++ b/src/components/AddressField.vue
@@ -90,6 +90,7 @@ const getDisplay = async () => {
         return;
     }
     let address = toChecksumAddress(props.address);
+    fullName.value = address;
     if (contractName.value) {
         if(tokenList.value?.tokens){
             tokenList.value.tokens.forEach((token: any) => {
diff --git a/src/components/InternalTransactionFlatTable.vue b/src/components/InternalTransactionFlatTable.vue
index e65c8ee0..9d32bd95 100644
--- a/src/components/InternalTransactionFlatTable.vue
+++ b/src/components/InternalTransactionFlatTable.vue
@@ -3,8 +3,8 @@ import BlockField from 'components/BlockField';
 import DateField from 'components/DateField';
 import TransactionField from 'components/TransactionField';
 import AddressField from 'components/AddressField';
-import InternalTxns from 'components/Transaction/InternalTxns';
 import ValueField from 'components/ValueField.vue';
+import { getDirection } from 'src/lib/transaction-utils';
 import { WEI_PRECISION, formatWei } from 'src/lib/utils';
 import { TRANSFER_SIGNATURES } from 'src/lib/abi/signature/transfer_signatures';
 
@@ -16,19 +16,18 @@ export default {
         DateField,
         BlockField,
         ValueField,
-        InternalTxns,
     },
     props: {
+        address: {
+            type: String,
+            required: true,
+        },
         page: {
             type: Number,
         },
         pagesize: {
             type: Number,
         },
-        title: {
-            type: String,
-            required: true,
-        },
         filter: {
             type: Object,
             default: () => ({}),
@@ -42,11 +41,6 @@ export default {
             default: true,
         },
     },
-    computed: {
-        address() {
-            return this.filter?.address ?? '';
-        },
-    },
     data() {
         const columns = [
             {
@@ -64,11 +58,21 @@ export default {
                 label: '',
                 align: 'left',
             },
+            {
+                name: 'type',
+                label: '',
+                align: 'left',
+            },
             {
                 name: 'from',
                 label: '',
                 align: 'left',
             },
+            {
+                name: 'direction',
+                label: '',
+                align: 'left',
+            },
             {
                 name: 'to',
                 label: '',
@@ -101,14 +105,17 @@ export default {
     },
     async created() {
         // initialization of the translated texts
-        this.columns[0].label = this.$t('components.tx_hash');
-        this.columns[1].label = this.$t('components.block');
-        this.columns[2].label = this.$t('components.age');
-        this.columns[3].label = this.$t('pages.from');
-        this.columns[4].label = this.$t('pages.to');
-        this.columns[5].label = this.$t('pages.value');
+        this.columns.filter(t => t.name === 'hash')[0].label = this.$t('components.tx_hash');
+        this.columns.filter(t => t.name === 'block')[0].label = this.$t('components.block');
+        this.columns.filter(t => t.name === 'date')[0].label = this.$t('components.age');
+        this.columns.filter(t => t.name === 'type')[0].label = this.$t('components.approvals.type');
+        this.columns.filter(t => t.name === 'from')[0].label = this.$t('pages.from');
+        this.columns.filter(t => t.name === 'to')[0].label = this.$t('pages.to');
+        this.columns.filter(t => t.name === 'value')[0].label = this.$t('pages.value');
         if (!this.usePagination) {
             this.pagination.rowsPerPage = 25;
+            // we need to remove type column
+            this.columns = this.columns.filter(col => col.name !== 'type');
         }
         this.updateLoadingRows();
     },
@@ -135,6 +142,7 @@ export default {
         },
     },
     methods: {
+        getDirection: getDirection,
         updateLoadingRows() {
             this.loadingRows = [];
             for (var i = 1; i <= this.pagination.rowsPerPage; i++) {
@@ -211,7 +219,7 @@ export default {
                     if (!contract) {
                         continue;
                     }
-                    if (totalTraces >= 25 && !props.usePagination) {
+                    if (totalTraces >= 25 && !this.usePagination) {
                         // we already have enough data
                         break;
                     }
@@ -247,31 +255,43 @@ export default {
                         }
                     }
 
-
                     processedTransactions++;
+                    const entries = [];
                     transaction.traces.forEach((trace) => {
                         const entry = {
                             trx: processedTransactions % 2 === 0 ? 'even' : 'odd',
                             hash: transaction.hash,
                             blockNumber: transaction.blockNumber,
                             timestamp: transaction.timestamp,
+                            type: trace.action.callType,
                             from: trace.action.from,
                             to: trace.action.to,
                             value: trace.action.value,
                             symbol: 'TLOS',
                             decimals: WEI_PRECISION,
                         };
-                        this.rows.push(entry);
+                        entries.push(entry);
                     });
 
-                    // TODO: if we want to crop in exactly 25 rows, we need to uncomment this
-                    // if (!this.usePagination) {
-                    //     // we make sure there are no more than 25 rows.
-                    //     // If we have more than 25 rows, we discard the rest
-                    //     if (this.rows.length > 25) {
-                    //         this.rows = this.rows.slice(0, 25);
-                    //     }
-                    // }
+                    if (this.usePagination) {
+                        const entry = {
+                            trx: processedTransactions % 2 === 0 ? 'even' : 'odd',
+                            hash: transaction.hash,
+                            blockNumber: transaction.blockNumber,
+                            timestamp: transaction.timestamp,
+                            type: entries[0].type,
+                            from: transaction.from,
+                            to: transaction.to,
+                            value: transaction.value,
+                            symbol: 'TLOS',
+                            decimals: WEI_PRECISION,
+                            traces: entries,
+                            expand: true,
+                        };
+                        this.rows.push(entry);
+                    } else {
+                        this.rows = this.rows.concat(entries);
+                    }
 
                 } catch (e) {
                     console.error(
@@ -292,8 +312,8 @@ export default {
             const { page, rowsPerPage, descending } = props.pagination;
             let path;
             const filter = Object.assign({}, this.filter ? this.filter : {});
-            if (filter.address) {
-                path = `/address/${filter.address}/transactions`;
+            if (this.address) {
+                path = `/address/${this.address}/transactions`;
             } else {
                 path = '/transactions';
             }
@@ -340,7 +360,7 @@ export default {
             align="center"
             class="c-inttrx-flat__footer"
         >
-            <router-link class="c-inttrx-flat__footer-container" :to="{ name: 'txsInternal', query: { a: address } }">
+            <router-link class="c-inttrx-flat__footer-container" :to="{ name: 'txsinternal', query: { a: address } }">
                 <span class="c-inttrx-flat__footer-text"> See all transactions </span>
                 <q-icon name="arrow_forward" class="c-inttrx-flat__footer-icon" />
             </router-link>
@@ -375,7 +395,7 @@ export default {
                     </div>
                 </div>
             </q-th>
-            <q-td v-if="usePagination" auto-width/>
+            <q-th v-if="usePagination" auto-width/>
         </q-tr>
     </template>
     <template v-slot:body="props">
@@ -389,6 +409,9 @@ export default {
             <q-td key="date" :props="props">
                 <DateField :epoch="(props.row.timestamp / 1000)" :force-show-age="showDateAge"/>
             </q-td>
+            <q-td key="type" :props="props">
+                {{ props.row.type }}
+            </q-td>
             <q-td key="from" :props="props">
                 <AddressField
                     v-if="props.row.from"
@@ -397,6 +420,13 @@ export default {
                     :truncate="12"
                 />
             </q-td>
+            <q-td key="direction" :props="props">
+                <span
+                    :class="`direction ${getDirection(address, props.row)}`"
+                >
+                    {{ $t(`components.transaction.${getDirection(address, props.row)}`).toUpperCase() }}
+                </span>
+            </q-td>
             <q-td key="to" :props="props">
                 <AddressField
                     v-if="props.row.to"
@@ -412,16 +442,67 @@ export default {
                     :decimals="props.row.decimals"
                 />
             </q-td>
+            <q-td v-if="usePagination" auto-width>
+                <!-- we need a switch to expand the rows below -->
+                <q-btn
+                    :icon="props.row.expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
+                    flat
+                    round
+                    dense
+                    @click="props.row.expand = !props.row.expand"
+                />
+            </q-td>
         </q-tr>
         <q-tr
-            v-show="props.expand"
-            v-if="props.row.traces?.length > 0"
+            v-for="(trace, index) in props.row.traces"
+            v-show="props.row.expand"
+            :key="`${trace.hash}-${index}`"
             :props="props"
-            class="q-virtual-scroll--with-prev"
+            :class="props.row.trx"
         >
-            <q-td colspan="100%">
-                <InternalTxns :traces="props.row.traces" :transaction="props.row" />
+            <q-td key="hash" :props="props">
+                <TransactionField :transaction-hash="trace.hash" :useHighlight="true"/>
+            </q-td>
+            <q-td key="block" :props="props">
+                <BlockField :block="trace.blockNumber"/>
+            </q-td>
+            <q-td key="date" :props="props">
+                <DateField :epoch="(trace.timestamp / 1000)" :force-show-age="showDateAge"/>
+            </q-td>
+            <q-td key="type" :props="props">
+                {{ trace.type }}
+            </q-td>
+            <q-td key="from" :props="props">
+                <AddressField
+                    v-if="trace.from"
+                    :key="trace.from"
+                    :address="trace.from"
+                    :truncate="12"
+                />
             </q-td>
+            <q-td key="direction" :props="props">
+                <span
+                    :class="`direction ${getDirection(address, trace)}`"
+                >
+                    {{ $t(`components.transaction.${getDirection(address, trace)}`).toUpperCase() }}
+                </span>
+            </q-td>
+            <q-td key="to" :props="props">
+                <AddressField
+                    v-if="trace.to"
+                    :key="trace.to"
+                    :address="trace.to"
+                    :truncate="12"
+                />
+            </q-td>
+            <q-td key="value" :props="props">
+                <ValueField
+                    :value="trace.value"
+                    :symbol="trace.symbol"
+                    :decimals="trace.decimals"
+                />
+            </q-td>
+            <q-td v-if="usePagination" auto-width/>
         </q-tr>
     </template>
 </q-table>
@@ -439,7 +520,7 @@ export default {
             align="center"
             class="c-inttrx-flat__footer"
         >
-            <router-link class="c-inttrx-flat__footer-container" :to="{ name: 'txsInternal' }">
+            <router-link class="c-inttrx-flat__footer-container" :to="{ name: 'txsinternal', query: { a: address } }">
                 <span class="c-inttrx-flat__footer-text"> See all transactions </span>
                 <q-icon name="arrow_forward" class="c-inttrx-flat__footer-icon" />
             </router-link>
@@ -488,10 +569,13 @@ export default {
             <q-td key="date" >
                 <q-skeleton type="text" class="c-trx-overview__skeleton" />
             </q-td>
-            <q-td key="method" >
+            <q-td key="from" >
                 <q-skeleton type="text" class="c-trx-overview__skeleton" />
             </q-td>
-            <q-td key="int_txns" >
+            <q-td key="direction" >
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td key="to" >
                 <q-skeleton type="text" class="c-trx-overview__skeleton" />
             </q-td>
             <q-td key="value" >
@@ -507,7 +591,11 @@ export default {
 <style lang="scss">
 
 .odd {
-        background-color: var(--scrollbar-track-bg-color);
+    background-color: var(--odd-row-bg-color);
+}
+
+.direction {
+  @include direction;
 }
 
 .c-inttrx-flat {
diff --git a/src/components/Token/TokenTable.vue b/src/components/Token/TokenTable.vue
index bcba408e..6bad136f 100644
--- a/src/components/Token/TokenTable.vue
+++ b/src/components/Token/TokenTable.vue
@@ -54,9 +54,6 @@ export default {
     },
     methods: {
         ...mapActions('general', ['toggleDisplayDecimals']),
-        async showEntry(token) {
-            console.log('showEntry', token);
-        },
     },
 };
 </script>
@@ -94,7 +91,7 @@ export default {
     </template>
 
     <template v-slot:body="props">
-        <q-tr :props="props" @click="showEntry(props.row)">
+        <q-tr :props="props">
             <q-td key="icon" :props="props">
                 <q-img :src="props.row.logoURI" class="c-token-icon" />
             </q-td>
diff --git a/src/components/ValueField.vue b/src/components/ValueField.vue
index b546ad8a..a9f92a03 100644
--- a/src/components/ValueField.vue
+++ b/src/components/ValueField.vue
@@ -44,6 +44,8 @@ function updateLocalVariables() {
 
         if (local_value.indexOf('.') === -1) {
             // if local_value has the format xxxxxxxxxxxyyyyyyyyyyyyyy
+
+            local_value = '0'.repeat(WEI_PRECISION) + local_value; // -> 0000000000xxxxxxxx.yyyyyyyyyyyyyy
             local_value = [
                 local_value.slice(0, local_value.length - local_decimals), // xxxxxxxxxxx
                 local_value.slice(local_value.length - local_decimals),    // yyyyyyyyyyyyyy
@@ -103,7 +105,7 @@ function updateLocalVariables() {
             false,
             local_decimals,
             false,
-        ).trim().replace(/(\.\d[1-9]*)(0+$)/, '$1')+ ' ' + (props.symbol ?? '');
+        ).trim().replace(/(\.\d*?[1-9])0+$|\.0+$/, '$1');
     } catch (e) {
         console.error('getValueDisplay', e);
     }
diff --git a/src/css/app.scss b/src/css/app.scss
index 94bb5f1f..802d59fa 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -28,6 +28,8 @@ body.body--light {
     --scrollbar-track-bg-color: #{$grey-5};
     --scrollbar-thumb-bg-color: #{$grey-7};
 
+    --odd-row-bg-color: #{$grey-3};
+
     a:hover {
         color: $a-hover-light;
     }
@@ -49,6 +51,8 @@ body.body--dark {
     --scrollbar-track-bg-color: #{$grey-10};
     --scrollbar-thumb-bg-color: #{$grey-7};
 
+    --odd-row-bg-color: #{$grey-10};
+
     --q-dark: #181818;
 
     a:hover {
@@ -107,4 +111,4 @@ a {
     &--right {
         top: 12px !important;
     }
-}
\ No newline at end of file
+}
diff --git a/src/css/global/_mixins.scss b/src/css/global/_mixins.scss
index 4bd3c124..c4b67b6b 100644
--- a/src/css/global/_mixins.scss
+++ b/src/css/global/_mixins.scss
@@ -8,8 +8,8 @@
 
 @mixin page-header {
     display: flex;
+    flex-direction: column;
     justify-content: left;
-    gap: 10px;
     align-items: baseline;
     margin-bottom: 1.5rem;
     vertical-align: text-bottom;
@@ -17,9 +17,6 @@
         font-size: 1.4rem;
         font-weight: bold;
     }
-    &-sub-title {
-        font-size: 1rem;
-    }
 }
 
 @mixin page-header-nav-btn {
@@ -141,4 +138,11 @@
         background: rgba(148, 148, 148, 0.1);
         border: 1px solid #949494 !important;
     }
+
+    &.to {
+        color: rgb(0, 131, 164);
+        background: rgba(0, 134, 161, 0.1);
+        border: 1px solid rgb(0, 134, 161);
+    }
+
 }
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 0d6a4393..aae6f981 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -44,6 +44,7 @@ export default {
         },
         internaltrx: {
             page_title: 'Contract Internal Transactions',
+            for_address: 'for address { address }',
         },
         home: {
             telos_evm_explorer: 'The Telos EVM Explorer',
diff --git a/src/lib/transaction-utils.ts b/src/lib/transaction-utils.ts
index 12088c58..d8fd0b01 100644
--- a/src/lib/transaction-utils.ts
+++ b/src/lib/transaction-utils.ts
@@ -176,7 +176,7 @@ export const getDirection = (address: string, row: NftTransferData) => {
     } else if (toChecksumAddress(address) === toChecksumAddress(row.to)) {
         return 'in';
     } else {
-        return 'unknown';
+        return 'to';
     }
 };
 
diff --git a/src/pages/AccountPage.vue b/src/pages/AccountPage.vue
index 5f8744e7..83533be2 100644
--- a/src/pages/AccountPage.vue
+++ b/src/pages/AccountPage.vue
@@ -62,8 +62,10 @@ watch(accountAddress, (newVal, oldVal) => {
 }, { deep: true, immediate: true });
 
 watch(() => route.query.tab, (newTab) => {
-    const str = newTab as string;
-    tab.value = tabs.includes(str) ? str : tabs[0];
+    if (route.name === 'address') {
+        const str = newTab as string;
+        tab.value = tabs.includes(str) ? str : tabs[0];
+    }
 });
 
 watch(tab, (newTab) => {
@@ -313,8 +315,7 @@ async function loadAccount() {
             </q-tab-panel>
             <q-tab-panel v-else name="internaltx">
                 <InternalTransactionFlatTable
-                    :title="accountAddress"
-                    :filter="{address:accountAddress}"
+                    :address="accountAddress"
                     :usePagination="false"
                 />
             </q-tab-panel>
diff --git a/src/pages/InternalTrxPage.vue b/src/pages/InternalTrxPage.vue
index 6d1036b6..878d39fc 100644
--- a/src/pages/InternalTrxPage.vue
+++ b/src/pages/InternalTrxPage.vue
@@ -1,137 +1,15 @@
 <script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useStore } from 'vuex';
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { contractManager } from 'src/boot/telosApi';
-import { indexerApi } from 'src/boot/telosApi';
-import { evm } from 'src/boot/evm';
-import { toChecksumAddress } from 'src/lib/utils';
-import { getIcon } from 'src/lib/token-utils';
-import Contract from 'src/lib/contract/Contract';
-import { BalanceQueryResponse, BalanceResult } from 'src/types/BalanceResult';
-import { Token } from 'src/types/Token';
 
-import TransactionTable from 'components/TransactionTable.vue';
-import InternalTransactionFlatTable from 'components/InternalTransactionFlatTable.vue';
-import NftTransfersTable from 'components/NftTransfersTable.vue';
-import TokenList from 'components/Token/TokenList.vue';
-import ApprovalList from 'components/Token/ApprovalList.vue';
-import HolderList from 'components/Token/HolderList.vue';
-import NFTList from 'components/Token/NFTList.vue';
-import ContractTab from 'components/ContractTab/ContractTab.vue';
-import CopyButton from 'components/CopyButton.vue';
-import GenericContractInterface from 'components/ContractTab/GenericContractInterface.vue';
-import AddressQR from 'src/components/AddressQR.vue';
-import AddressOverview from 'src/components/AddressOverview.vue';
-import AddressMoreInfo from 'src/components/AddressMoreInfo.vue';
-import ContractMoreInfo from 'src/components/ContractMoreInfo.vue';
 
+import InternalTransactionFlatTable from 'components/InternalTransactionFlatTable.vue';
+import AddressField from 'components/AddressField.vue';
 
 const { t: $t } = useI18n();
 const route = useRoute();
-const router = useRouter();
-const store = useStore();
-
-const loading = ref(false);
-const title = ref('');
-const fullTitle = ref('');
-const telosAccount = ref('');
-const balance = ref('0');
-const nonce = ref<number | null>(null);
-const contract = ref<Contract | null>(null);
-const tab = ref(tabs[0]);
-const initialLoadComplete = ref(false);
-
-const accountAddress = computed(() => route.params.address as string ?? '');
-const isLoggedIn = computed(() => store.getters['login/isLoggedIn']);
-const address = computed(() => store.getters['login/address']);
-
-watch(accountAddress, (newVal, oldVal) => {
-    if (newVal !== oldVal) {
-        const newAsChecksum = toChecksumAddress(newVal);
-        if (newAsChecksum !== newVal) {
-            router.replace({ params: { address: newAsChecksum } });
-        }
-        loadAccount().then(() => {
-            initialLoadComplete.value = true;
-        });
-    }
-}, { deep: true, immediate: true });
-
-watch(() => route.query.tab, (newTab) => {
-    const str = newTab as string;
-    tab.value = tabs.includes(str) ? str : tabs[0];
-});
-
-watch(tab, (newTab) => {
-    router.push({ query: { tab: newTab } });
-});
-
-watch(isLoggedIn, (value) => {
-    // if user logs out while on approvals tab return to transactions
-    if (!value && tab.value === 'approvals'){
-        router.push({ query: { tab: 'transactions' } });
-    }
-});
-
-onMounted(() => {
-    const tabQueryParam = route.query.tab as string;
-    tab.value = tabs.includes(tabQueryParam) ? tabQueryParam : tabs[0];
-});
-
-async function loadAccount() {
-    if(!accountAddress.value || accountLoading.value){
-        return;
-    }
-    accountLoading.value = true;
-    const tokenList = await contractManager.getTokenList();
-    try {
-        const response: BalanceQueryResponse = await indexerApi.get(
-            `/account/${accountAddress.value}/balances?includeAbi=true`,
-            // `/account/${accountAddress.value}/balances?contract=___NATIVE_CURRENCY___&includeAbi=true`,
-        );
-        //TODO restore original api query when contract param query is fixed
-        const systemTokenResult = response.data.results.find((r : BalanceResult) => r.contract === '___NATIVE_CURRENCY___') as BalanceResult;
-
-        // balance.value = (response.data?.results?.length > 0) ? response.data.results[0].balance : '0';
-        balance.value = systemTokenResult ? systemTokenResult.balance : '0';
-    } catch (e) {
-        console.error('Could not get balance: ', e);
-    }
-    contract.value = null;
-    fullTitle.value = '';
-    nonce.value = 0;
-    title.value = $t('pages.account');
-    const force = true;
-    const cachedContract = await contractManager.getContract(accountAddress.value, force);
-    if (cachedContract?.creationInfo?.transaction || cachedContract?.supportedInterfaces?.length > 0){
-        contract.value = cachedContract;
-        if(contract.value && contract.value.supportedInterfaces?.includes('erc20')){
-            tokenList.tokens.forEach((token: Token) => {
-                if(token.address.toLowerCase() ===  contract.value?.address.toLowerCase()){
-                    contract.value.issuer = token.issuer;
-                    contract.value.issuer_link = token.issuer_link;
-                    contract.value.logoURI = token.logoURI;
-                    contract.value.setVerified(true);
-                }
-            });
-        }
-        title.value = $t('pages.contract');
-    } else {
-        contractManager.addContractToCache(accountAddress.value, { address: accountAddress.value });
-        try {
-            const account = await evm.telos.getEthAccount(accountAddress.value);
-            telosAccount.value = account?.account;
-            nonce.value = account?.nonce;
-        } catch (e) {
-            console.info(e);
-        }
-    }
-
-    accountLoading.value = false;
-    fullTitle.value = contract.value?.getName() ?? '';
-}
+const address = computed(() => route.query.a as string);
 
 </script>
 
@@ -139,21 +17,20 @@ async function loadAccount() {
 <q-page class="c-internal-trx">
 
     <div class="c-internal-trx__header">
-        <span class="c-internal-trx__header-title">{{ $t('pages.internaltrx.page_title') }}</span>
-        <span class="c-internal-trx__header-sub-title">{{ $t('pages.internaltrx.for_address', { address: address }) }}</span>
+        <div class="c-internal-trx__header-title">{{ $t('pages.internaltrx.page_title') }}</div>
+        <div class="c-internal-trx__header-sub-title">{{ $t('pages.internaltrx.for_address') }}
+            <AddressField
+                :address="address"
+            />
+        </div>
     </div>
 
     <div class="c-internal-trx__body">
         <q-card>
-            <q-toggle
-                v-model="showEmptyBlocks"
-                class="c-internal-trx__toggle"
-                label="display empty blocks"
-                color="primary"
-                checked-icon="visibility"
-                unchecked-icon="visibility_off"
+            <InternalTransactionFlatTable
+                :address="address"
+                :usePagination="true"
             />
-            <BlockTable :showEmptyBlocks='showEmptyBlocks' class="c-internal-trx__block-table" :title="'Block List'"/>
         </q-card>
     </div>
 
@@ -167,25 +44,10 @@ async function loadAccount() {
 
     &__header {
         @include page-header;
-    }
-
-    &__tabs {
-        @include tabs-container;
-    }
 
-    &__main-container {
-        background: transparent !important;
-    }
-    &__main-content {
-        padding: 0px;
-    }
-    &__panels {
-        background: transparent;
-        --v-overflow: visible;
-        overflow: visible !important;
-    }
-    &__panel {
-        padding: 0px;
+        &-sub-title {
+            --q-primary: var(--text-color);
+        }
     }
 }
 
diff --git a/src/router/routes.js b/src/router/routes.js
index 44fd06d9..0019303d 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -105,12 +105,12 @@ const routes = [
         }],
     },
     {
-        path: '/txsInternal',
+        path: '/txsinternal',
         component: () => import('layouts/MainLayout.vue'),
         children: [{
             path: '',
-            name: 'txsInternal',
-            component: () => import('pages/ErrorNotFoundPage.vue'),
+            name: 'txsinternal',
+            component: () => import('pages/InternalTrxPage.vue'),
         }],
     },
     {

From c4ed9b06b7b99178fc5a386f503d5ea2a1520982 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viterbo=20Rodr=C3=ADguez?= <viter.rod@gmail.com>
Date: Mon, 6 May 2024 19:32:41 -0300
Subject: [PATCH 06/12] add expand/collapse all btn and add count column

---
 .../InternalTransactionFlatTable.vue          | 376 +++++++++---------
 src/i18n/de-de/index.js                       |   1 +
 src/i18n/en-us/index.js                       |   1 +
 src/i18n/es-es/index.js                       |   1 +
 src/i18n/fr-fr/index.js                       |   1 +
 src/i18n/pt-br/index.js                       |   1 +
 src/lib/contract/ContractManager.js           |   5 +
 7 files changed, 187 insertions(+), 199 deletions(-)

diff --git a/src/components/InternalTransactionFlatTable.vue b/src/components/InternalTransactionFlatTable.vue
index 9d32bd95..dd352d31 100644
--- a/src/components/InternalTransactionFlatTable.vue
+++ b/src/components/InternalTransactionFlatTable.vue
@@ -83,6 +83,11 @@ export default {
                 label: '',
                 align: 'right',
             },
+            {
+                name: 'count',
+                label: '',
+                align: 'right',
+            },
         ];
 
         return {
@@ -101,6 +106,7 @@ export default {
             },
             page_size_options: [10, 20, 50],
             showDateAge: true,
+            allExpanded: true,
         };
     },
     async created() {
@@ -112,11 +118,14 @@ export default {
         this.columns.filter(t => t.name === 'from')[0].label = this.$t('pages.from');
         this.columns.filter(t => t.name === 'to')[0].label = this.$t('pages.to');
         this.columns.filter(t => t.name === 'value')[0].label = this.$t('pages.value');
+        this.columns.filter(t => t.name === 'count')[0].label = this.$t('pages.count');
         if (!this.usePagination) {
             this.pagination.rowsPerPage = 25;
-            // we need to remove type column
+            // we need to remove type and count columns
             this.columns = this.columns.filter(col => col.name !== 'type');
+            this.columns = this.columns.filter(col => col.name !== 'count');
         }
+        this.loadAllExpanded();
         this.updateLoadingRows();
     },
     watch: {
@@ -291,6 +300,11 @@ export default {
                         this.rows.push(entry);
                     } else {
                         this.rows = this.rows.concat(entries);
+                        // we make sure there are no more than 25 rows.
+                        // If we have more than 25 rows, we discard the rest
+                        if (this.rows.length > 25) {
+                            this.rows = this.rows.slice(0, 25);
+                        }
                     }
 
                 } catch (e) {
@@ -306,6 +320,9 @@ export default {
                     });
                 }
             }
+            this.rows.forEach((row) => {
+                row.expand = this.allExpanded;
+            });
             this.loading = false;
         },
         getPath(props) {
@@ -340,16 +357,33 @@ export default {
         toggleDateFormat() {
             this.showDateAge = !this.showDateAge;
         },
+        toggleAllExpanded() {
+            this.allExpanded = !this.allExpanded;
+            this.rows.forEach((row) => {
+                row.expand = this.allExpanded;
+            });
+            this.saveAllExpanded();
+        },
+        loadAllExpanded() {
+            // we look for the local Storage to see if the user has already expanded all the rows
+            const allExpanded = localStorage.getItem('allExpanded');
+            if (allExpanded) {
+                this.allExpanded = allExpanded === 'true';
+            }
+        },
+        saveAllExpanded() {
+            // we save the state of the allExpanded variable in the local storage
+            localStorage.setItem('allExpanded', this.allExpanded);
+        },
     },
 };
 </script>
 
 <template>
 <q-table
-    v-if="!loading"
     v-model:pagination="pagination"
     class="c-inttrx-flat__table"
-    :rows="rows"
+    :rows="loading? loadingRows : rows"
     :row-key="row => row.hash"
     :columns="columns"
     :rows-per-page-options="page_size_options"
@@ -369,10 +403,8 @@ export default {
     <template v-slot:header="props">
         <q-tr :props="props">
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <div :class="[ 'c-inttrx-flat__header-age', 'u-flex--center-y', { 'u-flex--right': col.align === 'right' } ]" @click="toggleDateFormat">
-                    <template
-                        v-if="col.name === 'date'"
-                    >
+                <template v-if="col.name === 'date'" >
+                    <div class="c-inttrx-flat__header-age u-flex--center-y" @click="toggleDateFormat">
                         <a>{{ showDateAge ? col.label: $t('components.date') }}</a>
                         <q-icon
                             class="info-icon"
@@ -382,209 +414,155 @@ export default {
                                 {{ $t('components.click_to_change_format') }}
                             </q-tooltip>
                         </q-icon>
-                    </template>
-                    <div v-else-if="col.name === 'method'">
-                        {{ col.label }}
-                        <q-icon class="info-icon" name="far fa-question-circle" />
-                        <q-tooltip anchor="bottom middle" self="top middle" max-width="10rem">
-                            {{ $t('components.executed_based_on_decoded_data') }}
-                        </q-tooltip>
-                    </div>
-                    <div v-else>
-                        {{ col.label }}
                     </div>
+                </template>
+
+                <div v-else-if="col.name === 'count'">
+                    {{ col.label }}
+                    <q-tooltip anchor="bottom middle" self="top middle" max-width="10rem">
+                        {{ $t('pages.internal_txns') }}
+                    </q-tooltip>
+                </div>
+                <div v-else>
+                    {{ col.label }}
                 </div>
             </q-th>
-            <q-th v-if="usePagination" auto-width/>
-        </q-tr>
-    </template>
-    <template v-slot:body="props">
-        <q-tr :props="props" :class="props.row.trx">
-            <q-td key="hash" :props="props">
-                <TransactionField :transaction-hash="props.row.hash" :useHighlight="true"/>
-            </q-td>
-            <q-td key="block" :props="props">
-                <BlockField :block="props.row.blockNumber"/>
-            </q-td>
-            <q-td key="date" :props="props">
-                <DateField :epoch="(props.row.timestamp / 1000)" :force-show-age="showDateAge"/>
-            </q-td>
-            <q-td key="type" :props="props">
-                {{ props.row.type }}
-            </q-td>
-            <q-td key="from" :props="props">
-                <AddressField
-                    v-if="props.row.from"
-                    :key="props.row.from"
-                    :address="props.row.from"
-                    :truncate="12"
-                />
-            </q-td>
-            <q-td key="direction" :props="props">
-                <span
-                    :class="`direction ${getDirection(address, props.row)}`"
-                >
-                    {{ $t(`components.transaction.${getDirection(address, props.row)}`).toUpperCase() }}
-                </span>
-            </q-td>
-            <q-td key="to" :props="props">
-                <AddressField
-                    v-if="props.row.to"
-                    :key="props.row.to"
-                    :address="props.row.to"
-                    :truncate="12"
-                />
-            </q-td>
-            <q-td key="value" :props="props">
-                <ValueField
-                    :value="props.row.value"
-                    :symbol="props.row.symbol"
-                    :decimals="props.row.decimals"
-                />
-            </q-td>
-            <q-td v-if="usePagination" auto-width>
-                <!-- we need a switch to expand the rows below -->
+            <q-th v-if="usePagination" auto-width>
                 <q-btn
-                    :icon="props.row.expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
+                    :icon="allExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
                     flat
                     round
                     dense
-                    @click="props.row.expand = !props.row.expand"
-                />
-            </q-td>
-        </q-tr>
-        <q-tr
-            v-for="(trace, index) in props.row.traces"
-            v-show="props.row.expand"
-            :key="`${trace.hash}-${index}`"
-            :props="props"
-            :class="props.row.trx"
-        >
-            <q-td key="hash" :props="props">
-                <TransactionField :transaction-hash="trace.hash" :useHighlight="true"/>
-            </q-td>
-            <q-td key="block" :props="props">
-                <BlockField :block="trace.blockNumber"/>
-            </q-td>
-            <q-td key="date" :props="props">
-                <DateField :epoch="(trace.timestamp / 1000)" :force-show-age="showDateAge"/>
-            </q-td>
-            <q-td key="type" :props="props">
-                {{ trace.type }}
-            </q-td>
-            <q-td key="from" :props="props">
-                <AddressField
-                    v-if="trace.from"
-                    :key="trace.from"
-                    :address="trace.from"
-                    :truncate="12"
-                />
-            </q-td>
-            <q-td key="direction" :props="props">
-                <span
-                    :class="`direction ${getDirection(address, trace)}`"
+                    @click="toggleAllExpanded()"
                 >
-                    {{ $t(`components.transaction.${getDirection(address, trace)}`).toUpperCase() }}
-                </span>
-            </q-td>
-            <q-td key="to" :props="props">
-                <AddressField
-                    v-if="trace.to"
-                    :key="trace.to"
-                    :address="trace.to"
-                    :truncate="12"
-                />
-            </q-td>
-            <q-td key="value" :props="props">
-                <ValueField
-                    :value="trace.value"
-                    :symbol="trace.symbol"
-                    :decimals="trace.decimals"
-                />
-            </q-td>
-            <q-td v-if="usePagination" auto-width/>
-        </q-tr>
-    </template>
-</q-table>
-<q-table
-    v-else
-    v-model:pagination="pagination"
-    class="c-inttrx-flat__table"
-    :rows="loadingRows"
-    :row-key="row => row.hash"
-    :columns="columns"
-    :rows-per-page-options="page_size_options"
->
-    <template v-if="!usePagination" v-slot:bottom>
-        <q-card-actions
-            align="center"
-            class="c-inttrx-flat__footer"
-        >
-            <router-link class="c-inttrx-flat__footer-container" :to="{ name: 'txsinternal', query: { a: address } }">
-                <span class="c-inttrx-flat__footer-text"> See all transactions </span>
-                <q-icon name="arrow_forward" class="c-inttrx-flat__footer-icon" />
-            </router-link>
-        </q-card-actions>
-    </template>
-    <template v-slot:header="props">
-        <q-tr :props="props">
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <div :class="[ 'c-inttrx-flat__header-age', 'u-flex--center-y', { 'u-flex--right': col.align === 'right' } ]" @click="toggleDateFormat">
-                    <template
-                        v-if="col.name === 'date'"
-                    >
-                        <a>{{ showDateAge ? col.label: $t('components.date') }}</a>
-                        <q-icon
-                            class="info-icon"
-                            name="far fa-question-circle"
-                        >
-                            <q-tooltip anchor="bottom middle" self="bottom middle" :offset="[0, 36]">
-                                {{ $t('components.click_to_change_format') }}
-                            </q-tooltip>
-                        </q-icon>
-                    </template>
-                    <div v-else-if="col.name === 'method'">
-                        {{ col.label }}
-                        <q-icon class="info-icon" name="far fa-question-circle" />
-                        <q-tooltip anchor="bottom middle" self="top middle" max-width="10rem">
-                            {{ $t('components.executed_based_on_decoded_data') }}
-                        </q-tooltip>
-                    </div>
-                    <div v-else>
-                        {{ col.label }}
-                    </div>
-                </div>
+                    <q-tooltip>{{ allExpanded ? $t('components.collapse_all') : $t('components.expand_all') }}</q-tooltip>
+                </q-btn>
             </q-th>
-            <q-td auto-width/>
         </q-tr>
     </template>
-    <template v-slot:body="">
-        <q-tr>
-            <q-td key="hash" >
-                <q-skeleton type="text" class="c-trx-overview__skeleton" />
-            </q-td>
-            <q-td key="block" >
-                <q-skeleton type="text" class="c-trx-overview__skeleton" />
-            </q-td>
-            <q-td key="date" >
-                <q-skeleton type="text" class="c-trx-overview__skeleton" />
-            </q-td>
-            <q-td key="from" >
-                <q-skeleton type="text" class="c-trx-overview__skeleton" />
-            </q-td>
-            <q-td key="direction" >
-                <q-skeleton type="text" class="c-trx-overview__skeleton" />
-            </q-td>
-            <q-td key="to" >
-                <q-skeleton type="text" class="c-trx-overview__skeleton" />
-            </q-td>
-            <q-td key="value" >
-                <q-skeleton type="text" class="c-trx-overview__skeleton" />
-            </q-td>
-            <q-td v-if="usePagination" auto-width>
-                <q-skeleton type="text" class="c-trx-overview__skeleton" />
-            </q-td>
-        </q-tr>
+    <template v-slot:body="props">
+        <template v-if="loading">
+            <q-tr>
+                <!-- we need to iterate 7 times if usePagination and 10 times if not -->
+                <q-td
+                    v-for="i in (usePagination ? 10 : 7)"
+                    :key="i"
+                >
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+            </q-tr>
+        </template>
+        <template v-else>
+            <q-tr :props="props" :class="props.row.trx">
+                <q-td key="hash" :props="props">
+                    <TransactionField :transaction-hash="props.row.hash" :useHighlight="true"/>
+                </q-td>
+                <q-td key="block" :props="props">
+                    <BlockField :block="props.row.blockNumber"/>
+                </q-td>
+                <q-td key="date" :props="props">
+                    <DateField :epoch="(props.row.timestamp / 1000)" :force-show-age="showDateAge"/>
+                </q-td>
+                <q-td key="type" :props="props">
+                    {{ props.row.type }}
+                </q-td>
+                <q-td key="from" :props="props">
+                    <AddressField
+                        v-if="props.row.from"
+                        :key="props.row.from"
+                        :address="props.row.from"
+                        :truncate="12"
+                    />
+                </q-td>
+                <q-td key="direction" :props="props">
+                    <span
+                        :class="`direction ${getDirection(address, props.row)}`"
+                    >
+                        {{ $t(`components.transaction.${getDirection(address, props.row)}`).toUpperCase() }}
+                    </span>
+                </q-td>
+                <q-td key="to" :props="props">
+                    <AddressField
+                        v-if="props.row.to"
+                        :key="props.row.to"
+                        :address="props.row.to"
+                        :truncate="12"
+                    />
+                </q-td>
+                <q-td key="value" :props="props">
+                    <ValueField
+                        :value="props.row.value"
+                        :symbol="props.row.symbol"
+                        :decimals="props.row.decimals"
+                    />
+                </q-td>
+                <q-td key="count" :props="props">
+                    {{ props.row.traces.length }}
+                </q-td>
+                <q-td v-if="usePagination" auto-width>
+                    <!-- we need a switch to expand the rows below -->
+                    <q-btn
+                        :icon="props.row.expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
+                        flat
+                        round
+                        dense
+                        @click="props.row.expand = !props.row.expand"
+                    />
+                </q-td>
+            </q-tr>
+            <q-tr
+                v-for="(trace, index) in props.row.traces"
+                v-show="props.row.expand"
+                :key="`${trace.hash}-${index}`"
+                :props="props"
+                :class="props.row.trx"
+            >
+                <q-td key="hash" :props="props">
+                    <TransactionField :transaction-hash="trace.hash" :useHighlight="true"/>
+                </q-td>
+                <q-td key="block" :props="props">
+                    <BlockField :block="trace.blockNumber"/>
+                </q-td>
+                <q-td key="date" :props="props">
+                    <DateField :epoch="(trace.timestamp / 1000)" :force-show-age="showDateAge"/>
+                </q-td>
+                <q-td key="type" :props="props">
+                    {{ trace.type }}
+                </q-td>
+                <q-td key="from" :props="props">
+                    <AddressField
+                        v-if="trace.from"
+                        :key="trace.from"
+                        :address="trace.from"
+                        :truncate="12"
+                    />
+                </q-td>
+                <q-td key="direction" :props="props">
+                    <span
+                        :class="`direction ${getDirection(address, trace)}`"
+                    >
+                        {{ $t(`components.transaction.${getDirection(address, trace)}`).toUpperCase() }}
+                    </span>
+                </q-td>
+                <q-td key="to" :props="props">
+                    <AddressField
+                        v-if="trace.to"
+                        :key="trace.to"
+                        :address="trace.to"
+                        :truncate="12"
+                    />
+                </q-td>
+                <q-td key="value" :props="props">
+                    <ValueField
+                        :value="trace.value"
+                        :symbol="trace.symbol"
+                        :decimals="trace.decimals"
+                    />
+                </q-td>
+                <q-td key="count" :props="props" />
+                <q-td v-if="usePagination" auto-width/>
+            </q-tr>
+        </template>
     </template>
 </q-table>
 </template>
diff --git a/src/i18n/de-de/index.js b/src/i18n/de-de/index.js
index fcedd89c..3d01dbf5 100644
--- a/src/i18n/de-de/index.js
+++ b/src/i18n/de-de/index.js
@@ -137,6 +137,7 @@ export default {
         input: 'Eingabe',
         output: 'Ausgabe',
         value: 'Wert',
+        count: 'Anzahl',
         overview: 'Übersicht',
         more_info: 'mehr Infos',
         transaction_sent: 'txn gesendet',
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index aae6f981..532533d4 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -139,6 +139,7 @@ export default {
         input: 'Input',
         output: 'Output',
         value: 'Value',
+        count: 'Count',
         overview: 'overview',
         more_info: 'more info',
         transaction_sent: 'txn sent',
diff --git a/src/i18n/es-es/index.js b/src/i18n/es-es/index.js
index 1bea26b0..3c366c6e 100644
--- a/src/i18n/es-es/index.js
+++ b/src/i18n/es-es/index.js
@@ -137,6 +137,7 @@ export default {
         input: 'Entrada',
         output: 'Salida',
         value: 'Valor',
+        count: 'Cuenta',
         overview: 'visión general',
         more_info: 'más información',
         transaction_sent: 'txn enviado',
diff --git a/src/i18n/fr-fr/index.js b/src/i18n/fr-fr/index.js
index 724c55f9..37bca00c 100644
--- a/src/i18n/fr-fr/index.js
+++ b/src/i18n/fr-fr/index.js
@@ -141,6 +141,7 @@ export default {
         input: 'Entrée',
         output: 'Sortie',
         value: 'Valeur',
+        count: 'Montant',
         overview: 'aperçu',
         more_info: 'plus d\'info',
         transaction_sent: 'txn envoyé',
diff --git a/src/i18n/pt-br/index.js b/src/i18n/pt-br/index.js
index ab7496b0..7d820784 100644
--- a/src/i18n/pt-br/index.js
+++ b/src/i18n/pt-br/index.js
@@ -137,6 +137,7 @@ export default {
         input: 'Entrada',
         output: 'Saída',
         value: 'Valor',
+        count: 'Cuenta',
         overview: 'visão geral',
         more_info: 'mais informações',
         transaction_sent: 'txn enviado',
diff --git a/src/lib/contract/ContractManager.js b/src/lib/contract/ContractManager.js
index 29f70bae..814b8038 100644
--- a/src/lib/contract/ContractManager.js
+++ b/src/lib/contract/ContractManager.js
@@ -156,6 +156,10 @@ export default class ContractManager {
             return;
         }
         let index = address.toString().toLowerCase();
+        if (contractData === null) {
+            this.contracts[index] = null;
+            return;
+        }
         let contract = this.factory.buildContract(contractData);
         if(
             typeof this.contracts[index] === 'undefined'
@@ -261,6 +265,7 @@ export default class ContractManager {
             if(index > -1){
                 this.processing.splice(index, 1);
             }
+            this.addContractToCache(address, null);
             return;
         }
         this.addContractToCache(address, contract);

From 31c903ffbe7782e82e88aa09b482167e13a4a5dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viterbo=20Rodr=C3=ADguez?= <viter.rod@gmail.com>
Date: Mon, 6 May 2024 19:42:19 -0300
Subject: [PATCH 07/12] with this commit I am forcing a deployment

---
 .../InternalTransactionFlatTable.vue           | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/InternalTransactionFlatTable.vue b/src/components/InternalTransactionFlatTable.vue
index dd352d31..36143ed6 100644
--- a/src/components/InternalTransactionFlatTable.vue
+++ b/src/components/InternalTransactionFlatTable.vue
@@ -45,47 +45,47 @@ export default {
         const columns = [
             {
                 name: 'hash',
-                label: '',
+                label: 'hash',
                 align: 'left',
             },
             {
                 name: 'block',
-                label: '',
+                label: 'block',
                 align: 'left',
             },
             {
                 name: 'date',
-                label: '',
+                label: 'date',
                 align: 'left',
             },
             {
                 name: 'type',
-                label: '',
+                label: 'type',
                 align: 'left',
             },
             {
                 name: 'from',
-                label: '',
+                label: 'from',
                 align: 'left',
             },
             {
                 name: 'direction',
-                label: '',
+                label: 'direction',
                 align: 'left',
             },
             {
                 name: 'to',
-                label: '',
+                label: 'to',
                 align: 'left',
             },
             {
                 name: 'value',
-                label: '',
+                label: 'value',
                 align: 'right',
             },
             {
                 name: 'count',
-                label: '',
+                label: 'count',
                 align: 'right',
             },
         ];

From 44de4d8e8f093e000a4c4dd788eefb92828f049b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viterbo=20Rodr=C3=ADguez?= <viter.rod@gmail.com>
Date: Tue, 7 May 2024 11:36:54 -0300
Subject: [PATCH 08/12] setting the defoult to collapse

---
 src/components/InternalTransactionFlatTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/InternalTransactionFlatTable.vue b/src/components/InternalTransactionFlatTable.vue
index 36143ed6..e6bd33ae 100644
--- a/src/components/InternalTransactionFlatTable.vue
+++ b/src/components/InternalTransactionFlatTable.vue
@@ -106,7 +106,7 @@ export default {
             },
             page_size_options: [10, 20, 50],
             showDateAge: true,
-            allExpanded: true,
+            allExpanded: false,
         };
     },
     async created() {

From 58cec394609ff61017c35c9a809382834e2514aa Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 10 May 2024 23:35:37 -0300
Subject: [PATCH 09/12] Internal Transactions Page without address filter

---
 src/components/header/AppHeaderLinks.vue | 1 +
 src/i18n/de-de/index.js                  | 1 +
 src/i18n/en-us/index.js                  | 1 +
 src/i18n/es-es/index.js                  | 1 +
 src/i18n/fr-fr/index.js                  | 1 +
 src/i18n/pt-br/index.js                  | 1 +
 src/pages/InternalTrxPage.vue            | 2 +-
 7 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/header/AppHeaderLinks.vue b/src/components/header/AppHeaderLinks.vue
index e552672a..a26245c7 100644
--- a/src/components/header/AppHeaderLinks.vue
+++ b/src/components/header/AppHeaderLinks.vue
@@ -26,6 +26,7 @@ const emit = defineEmits(['close-menu']);
 
 
 const blockchainSubmenuItems = [
+    { name: 'txsinternal', label: $t('components.header.internal_transactions') },
     { name: 'transactions', label: $t('components.header.transactions') },
     { name: 'blocks', label: $t('components.header.blocks') },
 ];
diff --git a/src/i18n/de-de/index.js b/src/i18n/de-de/index.js
index 3d01dbf5..738b5be0 100644
--- a/src/i18n/de-de/index.js
+++ b/src/i18n/de-de/index.js
@@ -434,6 +434,7 @@ export default {
             telos_wallet: 'Wallet',
             telos_bridge: 'Bridge',
             transactions: 'Transaktionen',
+            internal_transactions: 'Internal Transactions',
             verify_contract_sourcify: 'Vertrag überprüfen (Sourcify)',
             view_other_networks: 'Andere Netzwerke anzeigen',
         },
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 532533d4..1738f361 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -449,6 +449,7 @@ export default {
             telos_wallet: 'Wallet',
             telos_bridge: 'Bridge',
             transactions: 'Transactions',
+            internal_transactions: 'Internal Transactions',
             verify_contract_sourcify: 'Verify Contract (Sourcify)',
             view_other_networks: 'View other networks',
         },
diff --git a/src/i18n/es-es/index.js b/src/i18n/es-es/index.js
index 3c366c6e..6c0da8cf 100644
--- a/src/i18n/es-es/index.js
+++ b/src/i18n/es-es/index.js
@@ -435,6 +435,7 @@ export default {
             telos_wallet: 'Wallet',
             telos_bridge: 'Bridge',
             transactions: 'Transacciones',
+            internal_transactions: 'Transacciones internas',
             verify_contract_sourcify: 'Verificar Contrato (Sourcify)',
             view_other_networks: 'Ver otras redes',
         },
diff --git a/src/i18n/fr-fr/index.js b/src/i18n/fr-fr/index.js
index 37bca00c..0341a4a2 100644
--- a/src/i18n/fr-fr/index.js
+++ b/src/i18n/fr-fr/index.js
@@ -411,6 +411,7 @@ export default {
             telos_wallet: 'Wallet',
             telos_bridge: 'Bridge',
             transactions: 'Transactions',
+            internal_transactions: 'Transactions internes',
             verify_contract_sourcify: 'Vérifier le Contrat (Sourcify)',
             view_other_networks: 'Voir d\'autres réseaux',
         },
diff --git a/src/i18n/pt-br/index.js b/src/i18n/pt-br/index.js
index 7d820784..6e83e949 100644
--- a/src/i18n/pt-br/index.js
+++ b/src/i18n/pt-br/index.js
@@ -434,6 +434,7 @@ export default {
             telos_wallet: 'Wallet',
             telos_bridge: 'Bridge',
             transactions: 'Transações',
+            internal_transactions: 'Transações Internas',
             verify_contract_sourcify: 'Verificar Contrato (Sourcify)',
             view_other_networks: 'Visualizar outras redes',
         },
diff --git a/src/pages/InternalTrxPage.vue b/src/pages/InternalTrxPage.vue
index 878d39fc..9fa8d535 100644
--- a/src/pages/InternalTrxPage.vue
+++ b/src/pages/InternalTrxPage.vue
@@ -18,7 +18,7 @@ const address = computed(() => route.query.a as string);
 
     <div class="c-internal-trx__header">
         <div class="c-internal-trx__header-title">{{ $t('pages.internaltrx.page_title') }}</div>
-        <div class="c-internal-trx__header-sub-title">{{ $t('pages.internaltrx.for_address') }}
+        <div v-if="address" class="c-internal-trx__header-sub-title">{{ $t('pages.internaltrx.for_address') }}
             <AddressField
                 :address="address"
             />

From 3973de0774934cc6fc65f4481fb570cfc7e23554 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viterbo=20Rodr=C3=ADguez?= <viter.rod@gmail.com>
Date: Tue, 14 May 2024 13:34:22 -0300
Subject: [PATCH 10/12] fix contract interface function name labels when
 overflow space

---
 src/components/ContractTab/ContractInterface.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/ContractTab/ContractInterface.vue b/src/components/ContractTab/ContractInterface.vue
index 3d332fb7..e02dab28 100644
--- a/src/components/ContractTab/ContractInterface.vue
+++ b/src/components/ContractTab/ContractInterface.vue
@@ -43,7 +43,7 @@ onMounted(async () => {
 </script>
 
 <template>
-<div class="q-pt-md">
+<div class="c-contract-interface q-pt-md">
     <AppHeaderWallet v-if="props.write" class="c-login-button c-contract-interface__login"/>
     <q-list class="c-contract-interface__container">
         <q-expansion-item
@@ -81,6 +81,13 @@ onMounted(async () => {
         margin-bottom: 0.75rem !important;
         margin-left: 1rem;
     }
+
+    .q-item__label {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
 
+
 </style>

From 5f591bc729ad19bb1038c237af036af35a780bdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viterbo=20Rodr=C3=ADguez?= <viter.rod@gmail.com>
Date: Tue, 14 May 2024 15:44:30 -0300
Subject: [PATCH 11/12] adding transaction pagination based on key instead of
 offset

---
 src/components/TransactionTable.vue | 90 +++++++++++++++++++----------
 src/types/Pagination.ts             | 10 ++++
 2 files changed, 69 insertions(+), 31 deletions(-)

diff --git a/src/components/TransactionTable.vue b/src/components/TransactionTable.vue
index d271247b..ba1d5ed5 100644
--- a/src/components/TransactionTable.vue
+++ b/src/components/TransactionTable.vue
@@ -18,7 +18,7 @@ import TransactionDialog from 'components/TransactionDialog.vue';
 import TransactionField from 'components/TransactionField.vue';
 import TransactionFeeField from 'components/TransactionFeeField.vue';
 
-import { Pagination } from 'src/types';
+import { Pagination, PaginationByKey } from 'src/types';
 import { useStore } from 'vuex';
 
 const $q = useQuasar();
@@ -41,7 +41,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
     title: '',
-    initialPageSize: 1,
+    initialPageSize: 50,
     accountAddress: '',
 });
 
@@ -56,13 +56,14 @@ const totalRows = ref(0);
 const transactions: any[] = [];
 const page_size_options = [10, 25, 50, 100];
 
-const pagination = ref<Pagination>(
+const pagination = ref<PaginationByKey>(
     {
-        sortBy: 'block',
+        key: 0,
+        page: 0,
         descending: true,
-        page: 1,
-        rowsPerPage: 50,
+        rowsPerPage: props.initialPageSize,
         rowsNumber: 0,
+        initialKey: 0,
     },
 );
 
@@ -136,9 +137,10 @@ function updateColumns() {
 
 watch(() => route.query,
     (query) => {
+        // key=1232322&rowsPerPage=50&sort=DESC
         const { p, rowsPerPage, sort } = query;
 
-        let page = p ? Number(p) : 1;
+        let page = p ? Number(p) : 0;
         let size = rowsPerPage ? Number(rowsPerPage) : pagination.value.rowsPerPage;
         let desc = sort ? sort === 'DESC' : true;
 
@@ -148,13 +150,17 @@ watch(() => route.query,
 );
 
 function setPagination(page: number, size: number, desc: boolean) {
-    if (page) {
-        pagination.value.page = page;
-    }
-    if (size) {
-        pagination.value.rowsPerPage = size;
-    }
+    console.log('setPagination()', { page, size, desc, initialKey: pagination.value.initialKey });
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = size;
     pagination.value.descending = desc;
+
+    if (pagination.value.initialKey > 0) {
+        // key is page pages away from the initial key
+        const zero_base_page = page - 1;
+        pagination.value.key = pagination.value.initialKey - (zero_base_page * pagination.value.rowsPerPage);
+        console.log('setPagination() key ->', pagination.value.key);
+    }
     updateColumns();
     parseTransactions();
 }
@@ -180,22 +186,26 @@ async function parseTransactions() {
         return;
     }
     loading.value = true;
-    const { page, rowsPerPage, sortBy, descending } = pagination.value;
+    const { key, rowsPerPage, descending } = pagination.value;
 
 
     try {
-        let response = await indexerApi.get(getPath());
+        const path = await getPath();
+        let response = await indexerApi.get(path);
         totalRows.value = response.data?.total_count;
-        const results = response.data.results.slice(0, FIVE_HUNDRED_K);
+        const results = response.data.results;
+        const next = response.data.next;
 
-        if (pagination.value.rowsNumber === 0) {
-            pagination.value.rowsNumber = response.data?.total_count > FIVE_HUNDRED_K ? FIVE_HUNDRED_K : response.data?.total_count;
+        if (pagination.value.initialKey === 0) {
+            pagination.value.initialKey = next + rowsPerPage;
         }
 
-        pagination.value.page = page;
+        pagination.value.key = key === 0 ? next : key;
         pagination.value.rowsPerPage = rowsPerPage;
-        pagination.value.sortBy = sortBy;
         pagination.value.descending = descending;
+        if (pagination.value.rowsNumber === 0) {
+            pagination.value.rowsNumber = totalRows.value;
+        }
 
         transactions.splice(
             0,
@@ -270,21 +280,39 @@ function addEmptyToCache(contracts: any, transaction: any){
     }
 }
 
-function getPath() {
-    const { page, rowsPerPage, descending } = pagination.value;
+async function getPath() {
+    const { page, key, rowsPerPage, descending } = pagination.value;
     const prepend = props.accountAddress ? `address/${props.accountAddress}` : '';
     let path = `${prepend}/transactions?limit=${
-        rowsPerPage === 0 ? 500 : rowsPerPage
+        rowsPerPage === 0 ? 100 : Math.min(rowsPerPage, props.initialPageSize)
     }`;
-    path += `&offset=${(page - 1) * rowsPerPage}`;
-    path += `&sort=${descending ? 'desc' : 'asc'}`;
-    path += (pagination.value.rowsNumber === 0) ? '&includePagination=true' : '';  // We only need the count once
-    if (props.block) {
-        if (props.accountAddress) {
-            path += `&startBlock=${props.block}&endBlock=${props.block}`;
-        } else {
-            path += `&block=${props.block}`;
+    if (props.accountAddress) {
+        path += `&offset=${(page - 1) * rowsPerPage}`;
+        path += `&sort=${descending ? 'desc' : 'asc'}`;
+        path += (pagination.value.rowsNumber === 0) ? '&includePagination=true' : '';  // We only need the count once
+        if (props.block) {
+            if (props.accountAddress) {
+                path += `&startBlock=${props.block}&endBlock=${props.block}`;
+            } else {
+                path += `&block=${props.block}`;
+            }
+        }
+    } else {
+        if (pagination.value.initialKey === 0) {
+            // in the case of the first query, we need to get the initial key
+            let _aux_path = path.replace(/limit=\d+/, 'limit=1');
+            _aux_path += `&sort=${descending ? 'desc' : 'asc'}`;
+            _aux_path += '&includePagination=true';
+            _aux_path += '&key=0';
+            let response = await indexerApi.get(_aux_path);
+            const next = response.data.next;
+            pagination.value.initialKey = next + 1;
+            console.log('--->', { next, initialKey: pagination.value.initialKey });
         }
+        path += `&sort=${descending ? 'desc' : 'asc'}`;
+        path += '&includePagination=true';
+        path += '&includeAbi=true';
+        path += `&key=${key}`;
     }
     return path;
 }
diff --git a/src/types/Pagination.ts b/src/types/Pagination.ts
index 292a4cf9..0afc4a89 100644
--- a/src/types/Pagination.ts
+++ b/src/types/Pagination.ts
@@ -5,3 +5,13 @@ export type Pagination = {
     rowsPerPage: number;
     rowsNumber: number;
 }
+
+
+export type PaginationByKey = {
+    page: number;
+    key: number;
+    initialKey: number;
+    descending: boolean;
+    rowsPerPage: number;
+    rowsNumber: number;
+}

From 09c5672d37d66c588cd3d571e6cc46b6bea8a54a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viterbo=20Rodr=C3=ADguez?= <viter.rod@gmail.com>
Date: Tue, 14 May 2024 18:57:04 -0300
Subject: [PATCH 12/12] add confirmation step before downloading image from nft

---
 src/boot/errorHandling.js        | 97 ++++++++++++++++++--------------
 src/components/Token/NFTList.vue | 40 ++++++++++---
 src/i18n/de-de/index.js          |  3 +
 src/i18n/en-us/index.js          |  3 +
 src/i18n/es-es/index.js          |  3 +
 src/i18n/fr-fr/index.js          |  3 +
 src/i18n/pt-br/index.js          |  3 +
 7 files changed, 103 insertions(+), 49 deletions(-)

diff --git a/src/boot/errorHandling.js b/src/boot/errorHandling.js
index a00beaf9..0308ab84 100644
--- a/src/boot/errorHandling.js
+++ b/src/boot/errorHandling.js
@@ -23,7 +23,7 @@ const errorNotification = function(error, dismiss = false) {
         timeout: dismiss ? 0 : 5000,
         message: `${errorStr}`,
         actions: dismiss ? [
-            { label: this.$t('notification.dismiss_label'), color: 'white' },
+            { label: $t('notification.dismiss_label'), color: 'white' },
         ] : [],
     });
 };
@@ -54,6 +54,10 @@ const successNotification = function(message) {
 
 // ---------- new notification layouts ---------------
 
+let $t = function(message) {
+    return message;
+};
+
 class NotificationAction {
     constructor(payload) {
         this.label     = payload.label;
@@ -70,6 +74,13 @@ const infoIcon  = require('src/assets/icon--info.svg');
 const checkIcon = require('src/assets/icon--check.svg');
 const discoIcon = require('src/assets/icon--disconnected.svg');
 const warningIcon = require('src/assets/icon--warning.svg');
+const icons = {
+    cross: crossIcon,
+    info: infoIcon,
+    check: checkIcon,
+    disco: discoIcon,
+    warning: warningIcon,
+};
 
 const html = `
     <div class="c-notify__container c-notify__container--{type} c-notify__container--{random}">
@@ -92,11 +103,11 @@ const notifyMessage = function(type, icon, title, message, payload, remember = '
     // action buttons
     const actions = [];
     const dismiss_btn = {
-        label: this.$t('notification.dismiss_label'),
+        label: $t('notification.dismiss_label'),
         class: 'c-notify__action-btn',
     };
     const link_btn = {
-        label: this.$t('notification.success_see_trx_label'),
+        label: $t('notification.success_see_trx_label'),
         color: 'positive',
         iconRight: 'launch',
         class: 'c-notify__action-btn',
@@ -105,7 +116,7 @@ const notifyMessage = function(type, icon, title, message, payload, remember = '
         },
     };
     const details_btn = {
-        label: this.$t('notification.error_see_details_label'),
+        label: $t('notification.error_see_details_label'),
         class: 'c-notify__action-btn ',
         handler: () => {
             let content = '';
@@ -135,14 +146,14 @@ const notifyMessage = function(type, icon, title, message, payload, remember = '
 
             Dialog.create({
                 class: 'c-notify__dialog',
-                title: this.$t('notification.error_details_title'),
+                title: $t('notification.error_details_title'),
                 message: '<q-card-section>' + content + '</q-card-section>',
                 html: true,
             });
         },
     };
     const action_btn = {
-        label: this.$t(payload?.label ?? '') ?? this.$t('notification.error_see_details_label'),
+        label: $t(payload?.label ?? '') ?? $t('notification.error_see_details_label'),
         color: payload?.color ?? type === 'error' ? 'negative' : 'positive',
         iconRight: payload?.iconRight,
         class: 'c-notify__action-btn ' + payload?.class ? payload?.class : '',
@@ -172,7 +183,7 @@ const notifyMessage = function(type, icon, title, message, payload, remember = '
         actions.splice(0, actions.length);
     }
 
-    let final_message = '<span>' + this.$t(message.toString() ?? '') + '</span>';
+    let final_message = '<span>' + $t(message.toString() ?? '') + '</span>';
     if (Array.isArray(message)) {
         final_message = message.map(
             m => ` <${m.tag ?? 'span'} class="${m.class}">${m.text}</${m.tag ?? 'span'}> `,
@@ -208,7 +219,7 @@ const notifyMessage = function(type, icon, title, message, payload, remember = '
         '{random}': random,
         '{remember}': remember,
         '{message}': final_message,
-        '{remember-my-choice}': this.$t('notification.dont_show_message_again'),
+        '{remember-my-choice}': $t('notification.dont_show_message_again'),
     };
 
     const finalHtml = replaceAllOccurrences(html, replacements);
@@ -225,75 +236,75 @@ const notifyMessage = function(type, icon, title, message, payload, remember = '
 };
 
 const notifySuccessTransaction = function(link) {
-    return notifyMessage.bind(this)(
+    return notifyMessage (
         'success',
         checkIcon,
-        this.$t('notification.success_title_trx').toUpperCase(),
-        this.$t('notification.success_message_trx'),
+        $t('notification.success_title_trx').toUpperCase(),
+        $t('notification.success_message_trx'),
         link,
     );
 };
 
 const notifySuccessMessage = function(message, payload) {
-    return notifyMessage.bind(this)(
+    return notifyMessage (
         'success',
         checkIcon,
-        this.$t('notification.success_title_trx').toUpperCase(),
+        $t('notification.success_title_trx').toUpperCase(),
         message,
         payload,
     );
 };
 
 const notifySuccessCopy = function() {
-    return notifyMessage.bind(this)(
+    return notifyMessage (
         'success',
         checkIcon,
-        this.$t('notification.success_title_copied').toUpperCase(),
-        this.$t('notification.success_message_copied'),
+        $t('notification.success_title_copied').toUpperCase(),
+        $t('notification.success_message_copied'),
     );
 };
 
 const notifyFailure = function(message, payload) {
-    return notifyMessage.bind(this)(
+    return notifyMessage (
         'error',
         crossIcon,
-        this.$t('notification.error_title').toUpperCase(),
+        $t('notification.error_title').toUpperCase(),
         message,
         payload,
     );
 };
 
 const notifyFailureWithAction = function(message, payload) {
-    return notifyMessage.bind(this)(
+    return notifyMessage (
         'error',
         crossIcon,
-        this.$t('notification.error_title').toUpperCase(),
+        $t('notification.error_title').toUpperCase(),
         message,
         new NotificationAction(payload),
     );
 };
 
 const notifyWarningWithAction = function(message, payload) {
-    return notifyMessage.bind(this)(
+    return notifyMessage (
         'error',
         warningIcon,
-        this.$t('notification.warning_title').toUpperCase(),
+        $t('notification.warning_title').toUpperCase(),
         message,
         new NotificationAction(payload),
     );
 };
 
 const notifyDisconnected = function() {
-    return notifyMessage.bind(this)(
+    return notifyMessage (
         'error',
         discoIcon,
-        this.$t('notification.error_title_disconnect'),
-        this.$t('notification.error_message_disconnect'),
+        $t('notification.error_title_disconnect'),
+        $t('notification.error_message_disconnect'),
     );
 };
 
 const notifyNeutralMessage = function(message) {
-    return notifyMessage.bind(this)(
+    return notifyMessage (
         'neutral',
         null,
         null,
@@ -308,7 +319,7 @@ const notifyRememberInfo = function(title, message, payload, key) {
     if (dismissed[id]) {
         return;
     }
-    const notification = notifyMessage.bind(this)(
+    const notification = notifyMessage (
         'info',
         infoIcon,
         title,
@@ -342,25 +353,25 @@ const notifyRememberInfo = function(title, message, payload, key) {
 
 
 export default boot(({ app, store }) => {
-    app.config.globalProperties.$errorNotification           = errorNotification.bind(store);
-    app.config.globalProperties.$unexpectedErrorNotification = unexpectedErrorNotification.bind(store);
-    app.config.globalProperties.$warningNotification         = warningNotification.bind(store);
-    app.config.globalProperties.$successNotification         = successNotification.bind(store);
+    app.config.globalProperties.$errorNotification           = errorNotification;
+    app.config.globalProperties.$unexpectedErrorNotification = unexpectedErrorNotification;
+    app.config.globalProperties.$warningNotification         = warningNotification;
+    app.config.globalProperties.$successNotification         = successNotification;
     store['$errorNotification']                              = app.config.globalProperties.$errorNotification;
     store['$unexpectedErrorNotification']                    = app.config.globalProperties.$unexpectedErrorNotification;
     store['$warningNotification']                            = app.config.globalProperties.$warningNotification;
     store['$successNotification']                            = app.config.globalProperties.$successNotification;
 
     // new Message notifications handlers
-    app.config.globalProperties.$notifySuccessTransaction = notifySuccessTransaction.bind(store);
-    app.config.globalProperties.$notifySuccessMessage     = notifySuccessMessage.bind(store);
-    app.config.globalProperties.$notifySuccessCopy        = notifySuccessCopy.bind(store);
-    app.config.globalProperties.$notifyFailure            = notifyFailure.bind(store);
-    app.config.globalProperties.$notifyFailureWithAction  = notifyFailureWithAction.bind(store);
-    app.config.globalProperties.$notifyWarningWithAction  = notifyWarningWithAction.bind(store);
-    app.config.globalProperties.$notifyDisconnected       = notifyDisconnected.bind(store);
-    app.config.globalProperties.$notifyNeutralMessage     = notifyNeutralMessage.bind(store);
-    app.config.globalProperties.$notifyRememberInfo       = notifyRememberInfo.bind(store);
+    app.config.globalProperties.$notifySuccessTransaction = notifySuccessTransaction;
+    app.config.globalProperties.$notifySuccessMessage     = notifySuccessMessage;
+    app.config.globalProperties.$notifySuccessCopy        = notifySuccessCopy;
+    app.config.globalProperties.$notifyFailure            = notifyFailure;
+    app.config.globalProperties.$notifyFailureWithAction  = notifyFailureWithAction;
+    app.config.globalProperties.$notifyWarningWithAction  = notifyWarningWithAction;
+    app.config.globalProperties.$notifyDisconnected       = notifyDisconnected;
+    app.config.globalProperties.$notifyNeutralMessage     = notifyNeutralMessage;
+    app.config.globalProperties.$notifyRememberInfo       = notifyRememberInfo;
     store['$notifySuccessTransaction']                    = app.config.globalProperties.$notifySuccessTransaction;
     store['$notifySuccessMessage']                        = app.config.globalProperties.$notifySuccessMessage;
     store['$notifySuccessCopy']                           = app.config.globalProperties.$notifySuccessCopy;
@@ -373,7 +384,7 @@ export default boot(({ app, store }) => {
 
     // transaction notifications handlers
     store['$t'] = app.config.globalProperties.$t;
-
+    $t          = app.config.globalProperties.$t;
 });
 
 export {
@@ -386,7 +397,11 @@ export {
     notifySuccessCopy,
     notifyFailure,
     notifyFailureWithAction,
+    notifyWarningWithAction,
     notifyDisconnected,
     notifyNeutralMessage,
     notifyRememberInfo,
+    notifyMessage,
+    icons,
+    NotificationAction,
 };
diff --git a/src/components/Token/NFTList.vue b/src/components/Token/NFTList.vue
index f35a9238..38ed1253 100644
--- a/src/components/Token/NFTList.vue
+++ b/src/components/Token/NFTList.vue
@@ -3,6 +3,7 @@
 import { ref, watch, onMounted, onBeforeMount } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { indexerApi } from 'src/boot/telosApi';
+import { notifyMessage, icons, NotificationAction } from 'src/boot/errorHandling';
 import { ALLOWED_VIDEO_EXTENSIONS } from 'src/lib/utils';
 
 import AddressField from 'components/AddressField.vue';
@@ -10,6 +11,8 @@ import BlockField from 'components/BlockField.vue';
 import { NFT, NFT_TYPE } from 'src/types/NFT';
 import { QTableProps } from 'quasar';
 
+
+
 const allowedFilters = ['contract', 'account'];
 
 const { t : $t } = useI18n();
@@ -213,6 +216,25 @@ function getPath(type: string) {
     }
     return `/${queryFilter}/${props.address}/nfts?type=${type}&includeAbi=true&limit=10000&forceMetadata=1&includePagination=true`;
 }
+
+function confirmDownloadImage(imageData: string, name: string) {
+    notifyMessage (
+        'success',
+        icons.info,
+        $t('components.download_image'),
+        $t('components.confirm_download_image'),
+        new NotificationAction({
+            label: $t('components.confirm'),
+            handler: () => {
+                // download image
+                const link = document.createElement('a');
+                link.href = imageData;
+                link.download = name;
+                link.click();
+            },
+        }),
+    );
+}
 </script>
 
 <template>
@@ -333,14 +355,13 @@ function getPath(type: string) {
                                 :alt="props.row.metadata?.name"
                             />
                         </a>
-                        <a
+                        <q-img
                             v-else-if="isDataImage(props.row)"
-                            :href="props.row.metadata?.image"
-                            target="_blank"
-                            download
-                        >
-                            <q-img :src="props.row.metadata?.image" :alt="props.row.metadata?.name" />
-                        </a>
+                            class="cursor-pointer"
+                            :src="props.row.metadata?.image"
+                            :alt="props.row.metadata?.name"
+                            @click="confirmDownloadImage(props.row.metadata?.image, props.row.metadata?.name)"
+                        />
                         <a
                             v-else
                             :href="props.row.metadata?.image"
@@ -358,7 +379,7 @@ function getPath(type: string) {
                         :href="props.row.tokenUri"
                         target="_blank"
                     >
-                        <q-icon name="download" size="sm" />
+                        <q-icon size="sm" name="launch"/>
                         <q-tooltip v-if="props.row.tokenUri">{{ $t('components.nfts.ipfs') }}</q-tooltip>
                     </a>
                 </q-td>
@@ -466,4 +487,7 @@ function getPath(type: string) {
     display: flex;
     align-items: center;
 }
+.cursor-pointer {
+    cursor: pointer;
+}
 </style>
diff --git a/src/i18n/de-de/index.js b/src/i18n/de-de/index.js
index fcedd89c..3f176f08 100644
--- a/src/i18n/de-de/index.js
+++ b/src/i18n/de-de/index.js
@@ -270,6 +270,9 @@ export default {
         nonce: 'Nonce',
         from: 'Von',
         to: 'An',
+        download_image: 'Bild herunterladen',
+        confirm_download_image: 'Bestätigen Sie, dass Sie dieses Bild herunterladen möchten',
+        confirm: 'Bestätigen',
         transaction: {
             in: 'in',
             out: 'out',
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 2abdbdf1..7cce98ef 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -217,6 +217,9 @@ export default {
         to: 'To',
         item: 'Item',
         amount: 'Amount',
+        download_image: 'Download Image',
+        confirm_download_image: 'Confirm you want to download this image',
+        confirm: 'Confirm',
         approvals: {
             token_id: 'Token ID',
             approved: 'Approved',
diff --git a/src/i18n/es-es/index.js b/src/i18n/es-es/index.js
index 1bea26b0..99cc2902 100644
--- a/src/i18n/es-es/index.js
+++ b/src/i18n/es-es/index.js
@@ -271,6 +271,9 @@ export default {
         nonce: 'Nonce',
         from: 'De',
         to: 'A',
+        download_image: 'Descargar imagen',
+        confirm_download_image: 'Confirma que quieres descargar esta imagen',
+        confirm: 'Confirmar',
         transaction: {
             in: 'entra',
             out: 'sale',
diff --git a/src/i18n/fr-fr/index.js b/src/i18n/fr-fr/index.js
index 724c55f9..fa84cf41 100644
--- a/src/i18n/fr-fr/index.js
+++ b/src/i18n/fr-fr/index.js
@@ -216,6 +216,9 @@ export default {
         nonce: 'Nonce',
         from: 'De',
         to: 'À',
+        download_image: 'Télécharger l’image',
+        confirm_download_image: 'Confirmez que vous voulez télécharger cette image',
+        confirm: 'Confirmer',
         approvals: {
             token_id: 'ID Jeton',
             approved: 'Approuvé',
diff --git a/src/i18n/pt-br/index.js b/src/i18n/pt-br/index.js
index ab7496b0..d9c09ae6 100644
--- a/src/i18n/pt-br/index.js
+++ b/src/i18n/pt-br/index.js
@@ -270,6 +270,9 @@ export default {
         nonce: 'Nonce',
         from: 'De',
         to: 'Para',
+        download_image: 'Baixar imagem',
+        confirm_download_image: 'Confirme que deseja baixar esta imagem',
+        confirm: 'Confirmar',
         transaction: {
             in: 'in',
             out: 'out',