diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte
index 52f1421aa5..f420d4c672 100644
--- a/packages/bridge-ui/src/App.svelte
+++ b/packages/bridge-ui/src/App.svelte
@@ -29,8 +29,16 @@
import { CustomTokenService } from './storage/CustomTokenService';
import { userTokens, tokenService } from './store/userToken';
import { RelayerAPIService } from './relayer-api/RelayerAPIService';
- import type { RelayerAPI } from './domain/relayerApi';
- import { relayerApi, relayerBlockInfoMap } from './store/relayerApi';
+ import {
+ DEFAULT_PAGE,
+ MAX_PAGE_SIZE,
+ type RelayerAPI,
+ } from './domain/relayerApi';
+ import {
+ paginationInfo,
+ relayerApi,
+ relayerBlockInfoMap,
+ } from './store/relayerApi';
import { chains, mainnetWagmiChain, taikoWagmiChain } from './chain/chains';
import { providers } from './provider/providers';
import { RELAYER_URL } from './constants/envVars';
@@ -91,9 +99,13 @@
if (store) {
const userAddress = await store.getAddress();
- const apiTxs = await $relayerApi.getAllBridgeTransactionByAddress(
- userAddress,
- );
+ const { txs: apiTxs, paginationInfo: info } =
+ await $relayerApi.getAllBridgeTransactionByAddress(userAddress, {
+ page: DEFAULT_PAGE,
+ size: MAX_PAGE_SIZE,
+ });
+
+ paginationInfo.set(info);
const blockInfoMap = await $relayerApi.getBlockInfo();
relayerBlockInfoMap.set(blockInfoMap);
diff --git a/packages/bridge-ui/src/components/Pagination.svelte b/packages/bridge-ui/src/components/Pagination.svelte
new file mode 100644
index 0000000000..5a9e8f88d0
--- /dev/null
+++ b/packages/bridge-ui/src/components/Pagination.svelte
@@ -0,0 +1,93 @@
+
+
+
+
+
diff --git a/packages/bridge-ui/src/components/Transactions/Transactions.svelte b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
index 730c1d2b23..dda608afda 100644
--- a/packages/bridge-ui/src/components/Transactions/Transactions.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
@@ -1,20 +1,56 @@
- {#if $transactions.length}
+ {#if transactionsToShow.length}
@@ -26,7 +62,7 @@
- {#each $transactions as transaction (transaction.hash)}
+ {#each transactionsToShow as transaction (transaction.hash)}
noticeModal.open(detail)}
on:tooltipStatus={() => (showMessageStatusTooltip = true)}
@@ -38,6 +74,7 @@
{/each}
+
{:else}
No transactions
{/if}
diff --git a/packages/bridge-ui/src/domain/relayerApi.ts b/packages/bridge-ui/src/domain/relayerApi.ts
index 8aa59975dc..4abc5621b5 100644
--- a/packages/bridge-ui/src/domain/relayerApi.ts
+++ b/packages/bridge-ui/src/domain/relayerApi.ts
@@ -1,11 +1,25 @@
import type { Address, ChainID } from './chain';
import type { BridgeTransaction } from './transactions';
+export const MAX_PAGE_SIZE = 100;
+export const DEFAULT_PAGE = 0;
+
+export type GetAllByAddressResponse = {
+ txs: BridgeTransaction[];
+ paginationInfo: PaginationInfo;
+};
+
+export type PaginationParams = {
+ size: typeof MAX_PAGE_SIZE;
+ page: number;
+};
+
export interface RelayerAPI {
getAllBridgeTransactionByAddress(
address: string,
+ pagination: PaginationParams,
chainID?: number,
- ): Promise
;
+ ): Promise;
getBlockInfo(): Promise