diff --git a/pages/transfers.vue b/pages/transfers.vue index cce85cd43..110454e43 100644 --- a/pages/transfers.vue +++ b/pages/transfers.vue @@ -184,6 +184,7 @@ const fetch = () => { if (!isConnected.value) return; transfersHistoryStore.requestRecentTransfers(); failedDepositHistory.requestFailedDepositTransfers(); + transfersHistoryStore.requestWithdrawals(); }; fetch(); diff --git a/store/zksync/transfersHistory.ts b/store/zksync/transfersHistory.ts index d79af10b1..8b76f80e9 100644 --- a/store/zksync/transfersHistory.ts +++ b/store/zksync/transfersHistory.ts @@ -75,8 +75,24 @@ export const useZkSyncTransfersHistoryStore = defineStore("zkSyncTransfersHistor url.searchParams.set("limit", TRANSACTIONS_FETCH_LIMIT.toString()); return url; }); - const transfers = ref([]); + const { + canLoadMore: canLoadMoreWithdrawals, + loadNext: loadNextWithdrawals, + reset: resetPaginatedWithdrawalsRequest, + } = usePaginatedRequest(() => { + if (!eraNetwork.value.blockExplorerApi) + throw new Error(`Block Explorer API is not available on ${eraNetwork.value.name}`); + + const url = new URL( + `/address/${account.value.address}/withdrawalTransfers?limit=100`, + eraNetwork.value.blockExplorerApi + ); + return url; + }); + + const transfers = ref([]); + const withdrawals = ref([]); const { inProgress: recentTransfersRequestInProgress, error: recentTransfersRequestError, @@ -90,7 +106,24 @@ export const useZkSyncTransfersHistoryStore = defineStore("zkSyncTransfersHistor } const response = await loadNext(); const mappedTransfers = response.items.map(mapApiTransfer); - useZkSyncWithdrawalsStore().updateWithdrawals(); + transfers.value = filterOutDuplicateTransfers(mappedTransfers); + }, + { cache: 30000 } + ); + + const { + inProgress: requestWithdrawalsInProgress, + error: requestWithdrawalsError, + execute: requestWithdrawals, + reset: restRequestWithdrawals, + reload: reloadRequestWithdrawals, + } = usePromise( + async () => { + if (withdrawals.value.length) { + restRequestWithdrawals(); + } + const response = await loadNextWithdrawals(); + const mappedTransfers = response.items.map(mapApiTransfer); transfers.value = filterOutDuplicateTransfers(mappedTransfers); //TODO put withdrawals into local storage for (const withdrawal of transfers.value.filter((e) => e.type === "withdrawal")) { @@ -128,6 +161,7 @@ export const useZkSyncTransfersHistoryStore = defineStore("zkSyncTransfersHistor }); } } + useZkSyncWithdrawalsStore().updateWithdrawals(); }, { cache: 30000 } ); @@ -169,5 +203,6 @@ export const useZkSyncTransfersHistoryStore = defineStore("zkSyncTransfersHistor previousTransfersRequestInProgress, previousTransfersRequestError, requestPreviousTransfers, + requestWithdrawals, }; }); diff --git a/store/zksync/withdrawals.ts b/store/zksync/withdrawals.ts index 7f4d2c960..2fc9af0ed 100644 --- a/store/zksync/withdrawals.ts +++ b/store/zksync/withdrawals.ts @@ -204,7 +204,7 @@ export const useZkSyncWithdrawalsStore = defineStore("zkSyncWithdrawals", () => const transfers: { items: any[] } = await $fetch( `${eraNetwork.value.blockExplorerApi}/address/${ account.value.address - }/transfers?limit=${TRANSACTIONS_FETCH_LIMIT.toString()}` + }/withdrawalTransfers?limit=${TRANSACTIONS_FETCH_LIMIT.toString()}` ); const withdrawals = transfers.items.filter((e) => e.type === "withdrawal" && e.token && e.amount); for (const withdrawal of withdrawals) {