adding deeplinking to transaction history tab on evm wallet

.vscode/settings.json

@@ -4,4 +4,4 @@
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
 
   "vetur.experimental.templateInterpolationService": true
-}
+}

src/antelope/stores/history.ts

@@ -53,6 +53,7 @@ export const transfers_filter_limit = 10000;
 
 export interface HistoryState {
     __evm_filter: IndexerTransactionsFilter;
+    __evm_last_filter_used: IndexerTransactionsFilter | null;
     __evm_transactions: {
         [label: Label]: {
             transactions: EvmTransaction[],
@@ -146,30 +147,36 @@ export const useHistoryStore = defineStore(store_name, {
                     await this.fetchEvmNftTransfersForAccount(label, this.__evm_filter.address);
                 }
 
-                const transactionsResponse = await chainSettings.getEVMTransactions(toRaw(this.__evm_filter));
-                const contracts = transactionsResponse.contracts;
-                const transactions = transactionsResponse.results;
+                const lastFilterUsedStr = JSON.stringify(this.__evm_last_filter_used);
+                const currentFilterStr = JSON.stringify(this.__evm_filter);
+                if (lastFilterUsedStr !== currentFilterStr) {
+                    this.__evm_last_filter_used = { ... toRaw(this.__evm_filter) };
 
-                this.setEvmTransactionsRowCount(label, transactionsResponse.total_count);
+                    const transactionsResponse = await chainSettings.getEVMTransactions(toRaw(this.__evm_filter));
+                    const contracts = transactionsResponse.contracts;
+                    const transactions = transactionsResponse.results;
 
-                const contractAddresses = Object.keys(contracts);
-                const parsedContracts: Record<string, ParsedIndexerAccountTransactionsContract> = {};
-                contractAddresses.forEach((address: string) => {
-                    const extraInfo = JSON.parse(contracts[address]?.calldata ?? '{}');
-                    parsedContracts[address] = {
-                        ...contracts[address],
-                        ...extraInfo,
-                    };
-                });
+                    this.setEvmTransactionsRowCount(label, transactionsResponse.total_count);
 
-                // cache contracts
-                contractAddresses.forEach((address) => {
-                    contractStore.createAndStoreContract(label, address, parsedContracts[address]);
-                });
+                    const contractAddresses = Object.keys(contracts);
+                    const parsedContracts: Record<string, ParsedIndexerAccountTransactionsContract> = {};
+                    contractAddresses.forEach((address: string) => {
+                        const extraInfo = JSON.parse(contracts[address]?.calldata ?? '{}');
+                        parsedContracts[address] = {
+                            ...contracts[address],
+                            ...extraInfo,
+                        };
+                    });
+
+                    // cache contracts
+                    contractAddresses.forEach((address) => {
+                        contractStore.createAndStoreContract(label, address, parsedContracts[address]);
+                    });
 
-                this.setEVMTransactions(label, transactions);
+                    this.setEVMTransactions(label, transactions);
 
-                await this.shapeTransactions(label, transactions);
+                    await this.shapeTransactions(label, transactions);
+                }
             } catch (error) {
                 console.error(error);
                 throw new AntelopeError('antelope.history.error_fetching_transactions');
@@ -181,6 +188,7 @@ export const useHistoryStore = defineStore(store_name, {
                 } else {
                     feedbackStore.unsetLoading('history.fetchEVMTransactionsForAccount');
                 }
+
             }
         },
 
@@ -488,6 +496,7 @@ const historyInitialState: HistoryState = {
     __evm_filter: {
         address: '',
     },
+    __evm_last_filter_used: null,
     __shaped_evm_transaction_rows: {
     },
     __evm_transactions_pagination_data: {},

src/pages/evm/wallet/WalletTransactionsTab.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, toRaw } from 'vue';
 import WalletTransactionRow from 'pages/evm/wallet/WalletTransactionRow.vue';
 
 import TableControls from 'components/evm/TableControls.vue';
@@ -11,6 +11,8 @@ const historyStore = useHistoryStore();
 const accountStore = useAccountStore();
 const feedbackStore = useFeedbackStore();
 
+const rowsPerPageOptions = [5, 10, 20, 50, 100];
+
 export default defineComponent({
     name: 'WalletTransactionsTab',
     components: {
@@ -40,12 +42,7 @@ export default defineComponent({
             const txLoading = feedbackStore.isLoading('history.fetchEVMTransactionsForAccount');
             const transfersLoading = feedbackStore.isLoading('history.fetchEvmNftTransfersForAccount');
             const actionsInProgress = txLoading || transfersLoading;
-            const hideLoadingState = this.pagination.page === 1 && this.initialLoadComplete && !this.rowsPerPageUpdating;
-
-            // don't show the loading state if we're on the first page and transactions are already present
-            // this covers two scenarios, 1. the user came to the page from the balances page, meaning we prefetched transactions
-            // or 2. the user is on the first page and we are re-fetching transactions on an interval
-            return actionsInProgress && !hideLoadingState;
+            return actionsInProgress;
         },
         address() {
             return accountStore.loggedEvmAccount?.address ?? '';
@@ -76,26 +73,68 @@ export default defineComponent({
             // also reload txs if the user switches accounts
             this.getTransactions();
         },
-        pagination(newPagination, oldPagination) {
-            if (newPagination.rowsPerPage !== oldPagination.rowsPerPage) {
-                this.rowsPerPageUpdating = true;
-            }
-            this.getTransactions().finally(() => {
-                this.rowsPerPageUpdating = false;
-            });
+        pagination: {
+            handler(newPagination, oldPagination) {
+                if (newPagination.rowsPerPage !== oldPagination.rowsPerPage) {
+                    this.rowsPerPageUpdating = true;
+                }
+
+                const { rowsPerPage, page } = newPagination;
+
+                this.$router.replace({
+                    name: 'evm-wallet',
+                    query: {
+                        ...this.$route.query,
+                        rowsPerPage,
+                        page,
+                    },
+                });
+            },
+            deep: true,
         },
         totalRows: {
             immediate: true,
             handler(newValue) {
-                this.pagination.rowsNumber = newValue;
+                if (this.pagination.rowsNumber === 0) {
+                    // this means we just arrived the page, so we got to take the page and rowsPerPage from the url
+                    const page = +(this.$route.query.page ?? 1);
+                    const rowsPerPage = +(this.$route.query.rowsPerPage ?? 5);
+                    const rowsNumber = newValue;
+                    this.pagination = {
+                        page,
+                        rowsPerPage,
+                        rowsCurrentPage: rowsPerPage,
+                        rowsNumber,
+                    };
+                } else {
+                    this.pagination.rowsNumber = newValue;
+                }
             },
         },
+        $route(newRoute) {
+            if (newRoute.name !== 'evm-wallet' || newRoute.query.tab !== 'transactions') {
+                return;
+            }
+
+            this.pagination = {
+                page: +(newRoute.query.page ?? 1),
+                rowsPerPage: +(newRoute.query.rowsPerPage ?? 5),
+                rowsCurrentPage: this.pagination.rowsPerPage,
+                rowsNumber: this.pagination.rowsNumber,
+            };
+
+            this.getTransactions().finally(() => {
+                this.rowsPerPageUpdating = false;
+            });
+        },
     },
     created() {
         if (this.shapedTransactions.length) {
             this.initialLoadComplete = true;
         }
 
+        this.getTransactions();
+
         this.fetchTransactionsInterval = setInterval(() => {
             if (this.doLiveUpdate) {
                 this.getTransactions();
@@ -109,6 +148,8 @@ export default defineComponent({
     },
     methods: {
         async getTransactions() {
+
+
             const offset = (this.pagination.page - 1) * this.pagination.rowsPerPage;
             let limit = this.pagination.rowsPerPage;
 
@@ -121,6 +162,7 @@ export default defineComponent({
                 this.pagination.rowsCurrentPage = this.pagination.rowsPerPage;
             }
 
+
             if (this.address) {
                 historyStore.setEVMTransactionsFilter({
                     address: this.address,