add: fees24USD column in table, rewrite pools queries

cryptoalgebra · May 21, 2024 · 9c33864 · 9c33864
1 parent a6b1777
commit 9c33864
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 52 deletions.
diff --git a/src/components/common/Table/poolsColumns.tsx b/src/components/common/Table/poolsColumns.tsx
@@ -116,6 +116,15 @@ export const poolsColumns: ColumnDef<Pool>[] = [
         ),
         cell: ({ getValue }) => formatUSD.format(getValue() as number),
     },
+    {
+        accessorKey: "fees24USD",
+        header: ({ column }) => (
+            <HeaderItem sort={() => column.toggleSorting(column.getIsSorted() === "asc")} isAsc={column.getIsSorted() === "asc"}>
+                Fees 24H
+            </HeaderItem>
+        ),
+        cell: ({ getValue }) => formatUSD.format(getValue() as number),
+    },
     {
         accessorKey: "avgApr",
         header: ({ column }) => (

diff --git a/src/components/common/Table/poolsTable.tsx b/src/components/common/Table/poolsTable.tsx
@@ -152,7 +152,7 @@ const PoolsTable = <TData, TValue>({
                                     }}
                                 >
                                     {row.getVisibleCells().map((cell: any) => (
-                                        <TableCell key={cell.id} className="text-left">
+                                        <TableCell key={cell.id} className="text-left min-w-[120px] first:min-w-[320px]">
                                             {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                         </TableCell>
                                     ))}
@@ -164,13 +164,15 @@ const PoolsTable = <TData, TValue>({
             </Table>
             {showPagination && (
                 <div className="flex items-center justify-end space-x-2 px-4 mt-auto">
-                    <p className="mr-2">
-                        {`${table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1} - 
+                    {table.getFilteredRowModel().rows.length > 0 && (
+                        <p className="mr-2">
+                            {`${table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1} - 
                         ${Math.min(
                             table.getState().pagination.pageSize * (table.getState().pagination.pageIndex + 1),
                             table.getFilteredRowModel().rows.length
                         )} of ${table.getFilteredRowModel().rows.length}`}
-                    </p>
+                        </p>
+                    )}
                     <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
                         Previous
                     </Button>

diff --git a/src/components/pools/PoolsList/index.tsx b/src/components/pools/PoolsList/index.tsx
@@ -1,5 +1,5 @@
 import { poolsColumns } from "@/components/common/Table/poolsColumns";
-import { useActiveFarmingsQuery, usePoolsListQuery, usePoolsVolumeDataQuery } from "@/graphql/generated/graphql";
+import { useActiveFarmingsQuery, usePoolsListQuery } from "@/graphql/generated/graphql";
 import { useMemo } from "react";
 import { Address } from "viem";
 import { ETERNAL_FARMINGS_API, POOL_AVG_APR_API, POOL_MAX_APR_API, fetcher } from "@/constants/api";
@@ -11,44 +11,41 @@ import { farmingClient } from "@/graphql/clients";
 const PoolsList = () => {
     const { data: pools, loading: isPoolsListLoading } = usePoolsListQuery();
 
-    const { data: poolsVolume, loading: isPoolsVolumeLoading } = usePoolsVolumeDataQuery();
-
-    const { data: poolsMaxApr, isLoading: isPoolsMaxAprLoading } = useSWR(POOL_MAX_APR_API, fetcher);
-    const { data: poolsAvgApr, isLoading: isPoolsAvgAprLoading } = useSWR(POOL_AVG_APR_API, fetcher);
-    const { data: farmingsAPR } = useSWR(ETERNAL_FARMINGS_API, fetcher);
-
     const { data: activeFarmings, loading: isFarmingsLoading } = useActiveFarmingsQuery({
         client: farmingClient,
     });
-
     const { positions, loading: isPositionsLoading } = usePositions();
 
+    const { data: poolsMaxApr, isLoading: isPoolsMaxAprLoading } = useSWR(POOL_MAX_APR_API, fetcher);
+    const { data: poolsAvgApr, isLoading: isPoolsAvgAprLoading } = useSWR(POOL_AVG_APR_API, fetcher);
+    const { data: farmingsAPR, isLoading: isFarmingsAPRLoading } = useSWR(ETERNAL_FARMINGS_API, fetcher);
+
     const isLoading =
         isPoolsListLoading ||
-        isPoolsVolumeLoading ||
         isPoolsMaxAprLoading ||
         isPoolsAvgAprLoading ||
         isPositionsLoading ||
-        isFarmingsLoading;
+        isFarmingsLoading ||
+        isFarmingsAPRLoading;
 
     const formattedPools = useMemo(() => {
-        if (isLoading || !pools || !poolsVolume || !positions) return [];
+        if (isLoading || !pools) return [];
 
-        return pools.pools.map(({ id, token0, token1, fee, totalValueLockedUSD }) => {
-            const currentPool = poolsVolume.poolDayDatas.find((currPool) => currPool.pool.id === id);
+        return pools.pools.map(({ id, token0, token1, fee, totalValueLockedUSD, poolDayData }) => {
+            const currentPool = poolDayData[0];
             const lastDate = currentPool ? currentPool.date * 1000 : 0;
             const currentDate = new Date().getTime();
 
+            /* time difference calculations here to ensure that the graph provides information for the last 24 hours */
             const timeDifference = currentDate - lastDate;
             const msIn24Hours = 24 * 60 * 60 * 1000;
 
-            const openPositions = positions.filter((position) => position.pool.toLowerCase() === id.toLowerCase());
+            const openPositions = positions?.filter((position) => position.pool.toLowerCase() === id.toLowerCase());
             const activeFarming = activeFarmings?.eternalFarmings.find((farming) => farming.pool === id);
-            const hasActiveFarming = Boolean(activeFarming);
 
-            const poolMaxApr = poolsMaxApr[id] ? Number(poolsMaxApr[id].toFixed(2)) : 0;
-            const poolAvgApr = poolsAvgApr[id] ? Number(poolsAvgApr[id].toFixed(2)) : 0;
-            const farmApr = activeFarming ? farmingsAPR[activeFarming.id] : 0;
+            const poolMaxApr = poolsMaxApr && poolsMaxApr[id] ? Number(poolsMaxApr[id].toFixed(2)) : 0;
+            const poolAvgApr = poolsAvgApr && poolsAvgApr[id] ? Number(poolsAvgApr[id].toFixed(2)) : 0;
+            const farmApr = activeFarming && farmingsAPR ? farmingsAPR[activeFarming.id] : 0;
 
             const avgApr = farmApr + poolAvgApr;
 
@@ -60,16 +57,17 @@ const PoolsList = () => {
                 },
                 fee: Number(fee) / 10_000,
                 tvlUSD: Number(totalValueLockedUSD),
-                volume24USD: timeDifference <= msIn24Hours && currentPool ? currentPool.volumeUSD : 0,
+                volume24USD: timeDifference <= msIn24Hours ? currentPool.volumeUSD : 0,
+                fees24USD: timeDifference <= msIn24Hours ? currentPool.feesUSD : 0,
                 poolMaxApr,
                 poolAvgApr,
                 farmApr,
                 avgApr,
-                isMyPool: openPositions?.length > 0,
-                hasActiveFarming,
+                isMyPool: Boolean(openPositions?.length),
+                hasActiveFarming: Boolean(activeFarming),
             };
         });
-    }, [isLoading, pools, poolsVolume, positions, activeFarmings, poolsMaxApr, poolsAvgApr, farmingsAPR]);
+    }, [isLoading, pools, positions, activeFarmings, poolsMaxApr, poolsAvgApr, farmingsAPR]);
 
     return (
         <div className="flex flex-col gap-4">

diff --git a/src/graphql/queries/pools.ts b/src/graphql/queries/pools.ts
@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client';
+import { gql } from "@apollo/client";
 
 export const POOL_FRAGMENT = gql`
     fragment PoolFields on Pool {
@@ -21,7 +21,7 @@ export const POOL_FRAGMENT = gql`
         token0Price
         token1Price
     }
-`
+`;
 export const TICK_FRAGMENT = gql`
     fragment TickFields on Tick {
         tickIdx
@@ -30,25 +30,31 @@ export const TICK_FRAGMENT = gql`
         price0
         price1
     }
-`
+`;
 
 export const POOL_FEE_DATA_FRAGMENT = gql`
-    fragment PoolFeeDataFields on PoolFeeData {
-        fee
-        timestamp
+    fragment PoolFeeDataFields on PoolDayData {
+        feesUSD
     }
-`
+`;
 
 export const POOL_DAY_DATA_FRAGMENT = gql`
     fragment PoolDayDataFields on PoolDayData {
         feesUSD
+        tvlUSD
+        volumeUSD
+        id
+        date
     }
-`
+`;
 
 export const POOLS_LIST = gql`
     query PoolsList {
         pools {
             ...PoolFields
+            poolDayData(first: 1, orderBy: date, orderDirection: desc) {
+                ...PoolDayDataFields
+            }
         }
     }
 `;
@@ -59,40 +65,41 @@ export const ALL_TICKS = gql`
             ...TickFields
         }
     }
-`
+`;
 
 export const SINGLE_POOL = gql`
     query SinglePool($poolId: ID!) {
         pool(id: $poolId) {
             ...PoolFields
         }
     }
-`
+`;
 
 export const MULTIPLE_POOLS = gql`
     query MultiplePools($poolIds: [ID!]) {
         pools(where: { id_in: $poolIds }) {
             ...PoolFields
         }
     }
-`
+`;
 
 export const POOL_FEE_DATA = gql`
     query PoolFeeData($poolId: String) {
         poolDayDatas(where: { pool: $poolId }, orderBy: date, orderDirection: desc) {
-            ...PoolDayDataFields
+            ...PoolFeeDataFields
         }
     }
-`
+`;
 
-export const POOLS_VOLUME_DATA = gql`
-    query PoolsVolumeData {
-        poolDayDatas(orderBy: date, orderDirection: desc) {
-            date
-            volumeUSD
-            pool {
-                id
-            }
-        }
-    }
-`;
+// export const POOLS_DAY_DATAS = gql`
+//     query PoolsVolumeData {
+//         poolDayDatas(orderBy: date, orderDirection: desc) {
+//             date
+//             pool {
+//                 id
+//             }
+//             volumeUSD
+//             ...PoolDayDataFields
+//         }
+//     }
+// `;
diff --git a/src/utils/positions/getPositionAPR.ts b/src/utils/positions/getPositionAPR.ts
@@ -1,13 +1,13 @@
 import { getAlgebraPool } from "@/generated"
 import { Position } from "@cryptoalgebra/integral-sdk"
-import { PoolDayDataFieldsFragment, PoolFieldsFragment } from "@/graphql/generated/graphql"
+import { PoolFeeDataFieldsFragment, PoolFieldsFragment } from "@/graphql/generated/graphql"
 import { Address } from "wagmi"
 
 export async function getPositionAPR(
     poolId: Address, 
     position: Position, 
     pool: PoolFieldsFragment | undefined | null, 
-    poolFeeData: PoolDayDataFieldsFragment[] | undefined, 
+    poolFeeData: PoolFeeDataFieldsFragment[] | undefined, 
     nativePrice: string | undefined 
 ) {