add pagination and filtering to pool activity table (#52)

* add pagination to pool activity table * fix get transactions filter * hook up pool activity filters
TreasureProject · Jul 16, 2024 · 5a5d88a · 5a5d88a
1 parent 50c466a
commit 5a5d88a
Show file tree

Hide file tree

Showing 11 changed files with 328 additions and 204 deletions.
diff --git a/app/api/pools.server.ts b/app/api/pools.server.ts
@@ -2,7 +2,6 @@ import type { ExecutionResult } from "graphql";
 
 import { uniswapV2PairAbi } from "~/generated";
 import { client } from "~/lib/chain.server";
-import type { Pool } from "~/lib/pools.server";
 import { createPoolFromPair } from "~/lib/pools.server";
 import { itemToTroveTokenItem } from "~/lib/tokens.server";
 import type { AddressString, Pair } from "~/types";
@@ -13,19 +12,33 @@ import {
   type GetPairTransactionsQuery,
   GetPairsDocument,
   type GetPairsQuery,
+  type TransactionType,
   execute,
 } from "../../.graphclient";
 import { fetchTokensCollections } from "./collections.server";
 import { fetchMagicUSD } from "./stats.server";
 import { fetchTroveTokenMapping } from "./tokens.server";
 
-export const fetchTransactions = async (pool: Pool) => {
+export const fetchPoolTransactions = async ({
+  id,
+  page = 1,
+  resultsPerPage = 25,
+  type,
+}: {
+  id: string;
+  page?: number;
+  resultsPerPage?: number;
+  type?: TransactionType;
+}) => {
   const result = (await execute(GetPairTransactionsDocument, {
-    id: pool.id,
+    pair: id,
+    first: resultsPerPage,
+    skip: (page - 1) * resultsPerPage,
+    ...(type ? { where: { type } } : undefined),
   })) as ExecutionResult<GetPairTransactionsQuery>;
   const { pair } = result.data ?? {};
   if (!pair) {
-    throw new Error(`Pair not found: ${pool.id}`);
+    throw new Error(`Pair not found: ${id}`);
   }
 
   const transactions = pair.transactions;
@@ -51,9 +64,9 @@ export const fetchTransactions = async (pool: Pool) => {
 };
 
 export type PoolTransaction = Awaited<
-  ReturnType<typeof fetchTransactions>
+  ReturnType<typeof fetchPoolTransactions>
 >[number];
-export type PoolTransactionType = PoolTransaction["type"];
+export type PoolTransactionType = NonNullable<PoolTransaction["type"]>;
 export type PoolTransactionItem = PoolTransaction["items0"][number];
 
 export const createPoolsFromPairs = async (pairs: Pair[]) => {

diff --git a/app/api/tokens.server.ts b/app/api/tokens.server.ts
@@ -196,17 +196,17 @@ export const fetchVaultUserInventory = async ({
 export const fetchVaultReserveItems = async ({
   id,
   page = 1,
-  itemsPerPage = 25,
+  resultsPerPage = 25,
 }: {
   id: string;
   page?: number;
-  itemsPerPage?: number;
+  resultsPerPage?: number;
 }): Promise<TroveToken[]> => {
   // Fetch vault reserve items from subgraph
   const result = (await execute(GetTokenVaultReserveItemsDocument, {
     id,
-    first: itemsPerPage,
-    skip: (page - 1) * itemsPerPage,
+    first: resultsPerPage,
+    skip: (page - 1) * resultsPerPage,
   })) as ExecutionResult<GetTokenVaultReserveItemsQuery>;
   const { vaultReserveItems = [] } = result.data ?? {};
 

diff --git a/app/components/item_selection/SelectionPopup.tsx b/app/components/item_selection/SelectionPopup.tsx
@@ -141,7 +141,11 @@ type Props = ViewOnlyProps | EditableProps;
 
 export const SelectionPopup = ({ token, type, ...props }: Props) => {
   const { address } = useAccount();
-  const { items, isLoading, refetch } = useVaultItems({
+  const {
+    results: vaultItems,
+    isLoading,
+    refetch,
+  } = useVaultItems({
     id: token.id,
     type: type === "vault" ? "reserves" : "inventory",
     address,
@@ -235,7 +239,7 @@ export const SelectionPopup = ({ token, type, ...props }: Props) => {
                   : "grid-cols-3 md:grid-cols-4 lg:grid-cols-5",
               )}
             >
-              {items.map((item) => (
+              {vaultItems.map((item) => (
                 <ItemCard
                   disabled={selectionDisabled}
                   selected={selectedItems.some(

diff --git a/app/components/pools/PoolDepositTab.tsx b/app/components/pools/PoolDepositTab.tsx
@@ -35,8 +35,8 @@ import { PoolTokenInput } from "./PoolTokenInput";
 type Props = {
   pool: Pool;
   nftBalances: {
-    nftBalance0: Promise<number> | null;
-    nftBalance1: Promise<number> | null;
+    nftBalance0: Promise<number> | undefined;
+    nftBalance1: Promise<number> | undefined;
   };
   onSuccess?: () => void;
 };

diff --git a/app/graphql/pair.queries.ts b/app/graphql/pair.queries.ts
@@ -53,15 +53,28 @@ export const PAIR_FRAGMENT = gql`
 
 export const getPairTransactions = gql`
   ${TRANSACTION_ITEM_FRAGMENT}
-  query GetPairTransactions($id: ID!) {
-    pair(id: $id) {
+  query GetPairTransactions(
+    $pair: ID!
+    $skip: Int = 0
+    $first: Int = 15
+    $where: Transaction_filter
+    $orderBy: Transaction_orderBy = timestamp
+    $orderDirection: OrderDirection = desc
+  ) {
+    pair(id: $pair) {
       token0 {
         id
       }
       token1 {
         id
       }
-      transactions(orderBy: timestamp, orderDirection: desc) {
+      transactions(
+        skip: $skip
+        first: $first
+        where: $where
+        orderBy: $orderBy
+        orderDirection: $orderDirection
+      ) {
         id
         hash
         timestamp

diff --git a/app/hooks/usePoolTransactions.ts b/app/hooks/usePoolTransactions.ts
@@ -0,0 +1,77 @@
+import { useFetcher } from "@remix-run/react";
+import { useEffect, useRef, useState } from "react";
+import type { PoolTransaction } from "~/api/pools.server";
+import type { FetchPoolTransactions } from "~/routes/resources.pools.$id.transactions";
+import type { TransactionType } from ".graphclient";
+
+type Props = {
+  id: string;
+  type?: TransactionType;
+  resultsPerPage?: number;
+  enabled?: boolean;
+};
+
+const DEFAULT_STATE = {
+  page: 1,
+  isLoading: false,
+};
+
+export const usePoolTransactions = ({
+  id,
+  type,
+  resultsPerPage = 25,
+  enabled = true,
+}: Props) => {
+  const { load, state, data } = useFetcher<FetchPoolTransactions>();
+  const [{ page, isLoading }, setState] = useState<{
+    page: number;
+    isLoading: boolean;
+  }>(DEFAULT_STATE);
+  const lastType = useRef<TransactionType | undefined>();
+  const results = data?.ok ? data.results : [];
+  const hasPreviousPage = page > 1;
+  const hasNextPage = results.length === resultsPerPage;
+
+  useEffect(() => {
+    if (enabled) {
+      if (type !== lastType.current) {
+        lastType.current = type;
+        setState(DEFAULT_STATE);
+      }
+
+      const params = new URLSearchParams({
+        page: page.toString(),
+        resultsPerPage: resultsPerPage.toString(),
+      });
+
+      if (type) {
+        params.set("type", type);
+      }
+
+      setState((curr) => ({ ...curr, isLoading: true }));
+      load(`/resources/pools/${id}/transactions?${params.toString()}`);
+      setState((curr) => ({ ...curr, isLoading: false }));
+    } else {
+      setState(DEFAULT_STATE);
+    }
+  }, [enabled, id, type, page, resultsPerPage, load]);
+
+  return {
+    isLoading: isLoading || state === "loading",
+    results,
+    page,
+    resultsPerPage,
+    hasPreviousPage,
+    hasNextPage,
+    goToPreviousPage: () =>
+      setState((curr) =>
+        hasPreviousPage ? { ...curr, page: curr.page - 1 } : curr,
+      ),
+    goToNextPage: () =>
+      setState((curr) =>
+        hasNextPage ? { ...curr, page: curr.page + 1 } : curr,
+      ),
+    refetch: () => setState({ ...DEFAULT_STATE, isLoading: true }),
+    error: !data?.ok ? data?.error : undefined,
+  };
+};
diff --git a/app/hooks/useVaultItems.ts b/app/hooks/useVaultItems.ts
@@ -8,12 +8,12 @@ type Props = {
   id: string;
   type: "reserves" | "inventory";
   address?: string;
-  itemsPerPage?: number;
+  resultsPerPage?: number;
   enabled?: boolean;
 };
 
 const DEFAULT_STATE = {
-  items: [],
+  results: [],
   page: 1,
   hasNextPage: false,
   isLoading: false,
@@ -24,39 +24,40 @@ export const useVaultItems = ({
   id,
   type,
   address,
-  itemsPerPage = 25,
+  resultsPerPage = 25,
   enabled = true,
 }: Props) => {
   const { load, state, data } = useFetcher<FetchVaultItems>();
-  const [{ items, page, hasNextPage, isLoading, error }, setState] = useState<{
-    items: TroveToken[];
-    page: number;
-    hasNextPage: boolean;
-    isLoading: boolean;
-    error: string | undefined;
-  }>(DEFAULT_STATE);
+  const [{ results, page, hasNextPage, isLoading, error }, setState] =
+    useState<{
+      results: TroveToken[];
+      page: number;
+      hasNextPage: boolean;
+      isLoading: boolean;
+      error: string | undefined;
+    }>(DEFAULT_STATE);
 
   useEffect(() => {
     if (data?.ok) {
       setState((curr) => ({
         ...curr,
-        items:
-          curr.page === 1 ? data.results : [...curr.items, ...data.results],
-        hasNextPage: data.results.length === itemsPerPage,
+        results:
+          curr.page === 1 ? data.results : [...curr.results, ...data.results],
+        hasNextPage: data.results.length === resultsPerPage,
         isLoading: false,
         error: undefined,
       }));
     } else if (data?.error) {
       setState({ ...DEFAULT_STATE, error: data.error });
     }
-  }, [data, itemsPerPage]);
+  }, [data, resultsPerPage]);
 
   useEffect(() => {
     if (enabled) {
       const params = new URLSearchParams({
         type,
         page: page.toString(),
-        itemsPerPage: itemsPerPage.toString(),
+        resultsPerPage: resultsPerPage.toString(),
       });
 
       if (type === "inventory" && address) {
@@ -68,11 +69,11 @@ export const useVaultItems = ({
     } else {
       setState(DEFAULT_STATE);
     }
-  }, [enabled, id, type, address, page, itemsPerPage, load]);
+  }, [enabled, id, type, address, page, resultsPerPage, load]);
 
   return {
     isLoading: isLoading || state === "loading",
-    items,
+    results,
     page,
     hasNextPage,
     loadNextPage: () =>