feat/add pagination to my interchain tokens

apps/maestro/src/config/app.ts

@@ -1,12 +1,4 @@
-import { uniq } from "rambda";
-
 export const APP_NAME = "Interchain Token Service";
 export const APP_TITLE = "Interchain Token Service. Build once, run anywhere.";
 
-export const DISABLED_CHAINS = uniq(
-  String(process.env.NEXT_PUBLIC_DISABLED_CHAINS)
-    .split(",")
-    .map((chain) => chain.trim())
-);
-
 export const IS_STAGING = process.env.NEXT_PUBLIC_SITE_URL?.includes("staging");

apps/maestro/src/config/env.ts

@@ -1,6 +1,6 @@
 import { Maybe } from "@axelarjs/utils";
 
-import { map, split, trim } from "rambda";
+import { map, split, trim, uniq } from "rambda";
 
 export const NEXT_PUBLIC_E2E_ENABLED =
   process.env.NEXT_PUBLIC_E2E_ENABLED === "true";
@@ -69,6 +69,7 @@ export const NEXT_PUBLIC_DISABLED_CHAINS = Maybe.of(
   process.env.NEXT_PUBLIC_DISABLED_CHAINS
 )
   .map(split(","))
+  .map(uniq)
   .mapOr([], map(trim));
 
 export const NEXT_PUBLIC_DISABLED_WALLET_IDS = Maybe.of(

apps/maestro/src/features/RecentTransactions/RecentTransactionsTable.tsx

@@ -1,4 +1,4 @@
-import { Button, ExternalLinkIcon, Table, Tooltip } from "@axelarjs/ui";
+import { ExternalLinkIcon, Table, Tooltip } from "@axelarjs/ui";
 import { maskAddress } from "@axelarjs/utils";
 import { useEffect, useMemo, useState, type FC } from "react";
 import Link from "next/link";
@@ -8,6 +8,7 @@ import { type Address } from "wagmi";
 import { NEXT_PUBLIC_EXPLORER_URL } from "~/config/env";
 import { trpc } from "~/lib/trpc";
 import type { RecentTransactionsOutput } from "~/server/routers/gmp/getRecentTransactions";
+import Pagination from "~/ui/components/Pagination";
 import { CONTRACT_METHODS_LABELS } from "./RecentTransactions";
 import { type ContractMethod } from "./types";
 
@@ -75,31 +76,12 @@ export const RecentTransactionsTable: FC<Props> = ({
       hasNextPage || hasPrevPage ? (
         <Table.Row>
           <Table.Cell colSpan={columns.length}>
-            <div>
-              <div className="join flex items-center justify-center">
-                <Button
-                  aria-label="previous page"
-                  size="sm"
-                  disabled={!hasPrevPage}
-                  onClick={setPage.bind(null, page - 1)}
-                  className="join-item disabled:opacity-50"
-                >
-                  «
-                </Button>
-                <Button size="sm" className="join-item">
-                  Page {page + 1}
-                </Button>
-                <Button
-                  aria-label="next page"
-                  size="sm"
-                  disabled={!hasNextPage}
-                  onClick={setPage.bind(null, page + 1)}
-                  className="join-item disabled:opacity-50"
-                >
-                  »
-                </Button>
-              </div>
-            </div>
+            <Pagination
+              page={page}
+              onPageChange={setPage}
+              hasNextPage={hasNextPage}
+              hasPrevPage={hasPrevPage}
+            />
           </Table.Cell>
         </Table.Row>
       ) : null,

apps/maestro/src/server/routers/axelarscan/getCosmosChainConfigs.ts

@@ -1,12 +1,13 @@
 import { TRPCError } from "@trpc/server";
 
-import { DISABLED_CHAINS, IS_STAGING } from "~/config/app";
+import { IS_STAGING } from "~/config/app";
+import { NEXT_PUBLIC_DISABLED_CHAINS } from "~/config/env";
 import { publicProcedure } from "~/server/trpc";
 
 export const getCosmosChainConfigs = publicProcedure.query(async ({ ctx }) => {
   try {
     const { cosmos } = await ctx.services.axelarscan.getChainConfigs({
-      disabledChains: DISABLED_CHAINS,
+      disabledChains: NEXT_PUBLIC_DISABLED_CHAINS,
       isStaging: IS_STAGING,
     });
 

apps/maestro/src/server/routers/interchainToken/getMyInterchainTokens.ts

@@ -10,18 +10,33 @@ export const getMyInterchainTokens = protectedProcedure
     z.object({
       // only for cache invalidation on account change
       sessionAddress: hex40Literal(),
+      // pagination
+      limit: z.number().optional().default(10),
+      offset: z.number().optional().default(0),
     })
   )
-  .query(async ({ ctx }) => {
+  .query(async ({ ctx, input }) => {
     invariant(ctx.session?.address, "Missing session address");
 
     const tokenRecords =
       await ctx.persistence.postgres.getInterchainTokensByDeployerAddress(
         ctx.session?.address
       );
 
-    return tokenRecords.sort(
+    const sorted = tokenRecords.sort(
       // sort by creation date newest to oldest
       (a, b) => Number(b.createdAt?.getTime()) - Number(a.createdAt?.getTime())
     );
+
+    const totalPages = Math.ceil(sorted.length / input.limit);
+    const pageIndex = Math.floor(input.offset / input.limit);
+
+    // return paginated results
+    const page = sorted.slice(input.offset, input.offset + input.limit);
+
+    return {
+      items: page,
+      totalPages,
+      pageIndex,
+    };
   });

apps/maestro/src/ui/components/Pagination/Pagination.tsx

@@ -0,0 +1,44 @@
+import { Button } from "@axelarjs/ui";
+import type { FC } from "react";
+
+type PaginationProps = {
+  page: number;
+  hasNextPage: boolean;
+  hasPrevPage: boolean;
+  onPageChange: (page: number) => void;
+};
+
+const Pagination: FC<PaginationProps> = ({
+  page,
+  onPageChange,
+  hasNextPage,
+  hasPrevPage,
+}) => (
+  <div>
+    <div className="join flex items-center justify-center">
+      <Button
+        aria-label="previous page"
+        size="sm"
+        disabled={!hasPrevPage}
+        onClick={onPageChange.bind(null, page - 1)}
+        className="join-item disabled:opacity-50"
+      >
+        «
+      </Button>
+      <Button size="sm" className="join-item">
+        Page {page + 1}
+      </Button>
+      <Button
+        aria-label="next page"
+        size="sm"
+        disabled={!hasNextPage}
+        onClick={onPageChange.bind(null, page + 1)}
+        className="join-item disabled:opacity-50"
+      >
+        »
+      </Button>
+    </div>
+  </div>
+);
+
+export default Pagination;

apps/maestro/src/ui/components/Pagination/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Pagination";
+export * from "./Pagination";

apps/maestro/src/ui/pages/InterchainTokenDetailsPage/TokenDetailsSection.tsx

@@ -45,7 +45,7 @@ const TokenDetailsSection: FC<TokenDetailsSectionProps> = (props) => {
             {maskAddress(tokenId)}
           </CopyToClipboardButton>
           <Tooltip
-            tip="TokeId is a common key used to identify an interchain token across all chains"
+            tip="TokenId is a common key used to identify an interchain token across all chains"
             variant="info"
             position="bottom"
           >

apps/maestro/src/ui/pages/InterchainTokensPage/TokenList.tsx

@@ -1,6 +1,6 @@
 import { Card, CopyToClipboardButton } from "@axelarjs/ui";
 import { maskAddress, Maybe } from "@axelarjs/utils";
-import { useMemo, type FC } from "react";
+import { useMemo, useState, type FC } from "react";
 import Link from "next/link";
 
 import { filter, map } from "rambda";
@@ -9,6 +9,7 @@ import { WAGMI_CHAIN_CONFIGS } from "~/config/wagmi";
 import { trpc } from "~/lib/trpc";
 import { useEVMChainConfigsQuery } from "~/services/axelarscan/hooks";
 import { ChainIcon } from "~/ui/components/EVMChainsDropdown";
+import Pagination from "~/ui/components/Pagination";
 import Page from "~/ui/layouts/Page";
 
 const useGetMyInterchainTokensQuery =
@@ -20,14 +21,21 @@ function getChainNameSlug(chainId: number) {
   return chain?.axelarChainName.toLowerCase() ?? "";
 }
 
+const PAGE_LIMIT = 12;
+
 type TokenListProps = {
   sessionAddress?: `0x${string}`;
 };
 
 const TokenList: FC<TokenListProps> = ({ sessionAddress }) => {
+  const [pageIndex, setPageIndex] = useState(0);
+  const offset = pageIndex * PAGE_LIMIT;
+
   const { data } = useGetMyInterchainTokensQuery(
     {
       sessionAddress: sessionAddress as `0x${string}`,
+      limit: PAGE_LIMIT,
+      offset,
     },
     {
       suspense: true,
@@ -37,9 +45,13 @@ const TokenList: FC<TokenListProps> = ({ sessionAddress }) => {
 
   const { computed } = useEVMChainConfigsQuery();
 
+  const maybeTokens = Maybe.of(data).map((data) => data.items);
+
+  const totalPages = Maybe.of(data).mapOr(0, (data) => data.totalPages);
+
   const filteredTokens = useMemo(
     () =>
-      Maybe.of(data)
+      maybeTokens
         .map(
           map(
             (token) =>
@@ -50,7 +62,7 @@ const TokenList: FC<TokenListProps> = ({ sessionAddress }) => {
           [],
           filter(([token, chain]) => Boolean(token) && Boolean(chain))
         ),
-    [computed.indexedById, data]
+    [computed.indexedById, maybeTokens]
   );
 
   return (
@@ -102,6 +114,12 @@ const TokenList: FC<TokenListProps> = ({ sessionAddress }) => {
           );
         })}
       </ul>
+      <Pagination
+        page={pageIndex}
+        onPageChange={setPageIndex}
+        hasNextPage={pageIndex < totalPages - 1}
+        hasPrevPage={pageIndex > 0}
+      />
     </>
   );
 };