Merge pull request #43 from cryptoalgebra/fix/table-pools

fix/table-pools
cryptoalgebra · May 22, 2024 · d7e335f · d7e335f
2 parents 5a1c9f9 + 30da727
commit d7e335f
Show file tree

Hide file tree

Showing 10 changed files with 295 additions and 239 deletions.
diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
@@ -57,7 +57,7 @@ const Account = () => {
     </div>
 
     return <div className="flex h-full justify-end gap-4 whitespace-nowrap">
-        <div className="hidden lg:block">
+        <div className="max-xl:hidden">
             <w3m-network-button />
         </div>
             <div className="hidden md:block">

diff --git a/src/components/common/Table/myPositionsColumns.tsx b/src/components/common/Table/myPositionsColumns.tsx
@@ -29,24 +29,13 @@ export const myPositionsColumns: ColumnDef<MyPosition>[] = [
     },
     {
         accessorKey: 'outOfRange',
-        header: ({ column }) => <HeaderItem sort={() => column.toggleSorting(column.getIsSorted() === "asc")} isAsc={column.getIsSorted() === "asc"}>Status</HeaderItem>,
+        header: ({ column }) => <HeaderItem className='min-w-[100px]' sort={() => column.toggleSorting(column.getIsSorted() === "asc")} isAsc={column.getIsSorted() === "asc"}>Status</HeaderItem>,
         cell: ({ getValue }) => getValue() ? <span className="text-yellow-400">Out of range</span> : <span className="text-green-400">In range</span> 
     },
     {
         accessorKey: 'range',
-        header: () => <HeaderItem>Range</HeaderItem>,
-        cell: ({ getValue }) => {
-            const range = getValue() as string;
-            const minRange = "0.0000";
-            const maxRange = "338492131855223783712001310944818317035.9647"
-            const splittedRange = range.split(" — ");
-
-            if(splittedRange[0] === minRange && splittedRange[1] === maxRange) return "Full Range";
-            if(splittedRange[0] === minRange) splittedRange[0] = "0";
-            if(splittedRange[1] === maxRange) splittedRange[1] = "∞";
-
-            return splittedRange.join(" — ");
-        }
+        header: () => <HeaderItem className='min-w-[180px]'>Range</HeaderItem>,
+        cell: ({ getValue }) => getValue() as string,
     },
     {
         accessorKey: 'apr',

diff --git a/src/components/common/Table/poolsColumns.tsx b/src/components/common/Table/poolsColumns.tsx
@@ -1,14 +1,17 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { HeaderItem } from './common';
-import { Address } from 'wagmi';
-import CurrencyLogo from '../CurrencyLogo';
-import { TokenFieldsFragment } from '@/graphql/generated/graphql';
-import { DynamicFeePluginIcon } from '../PluginIcons';
-import { formatUSD } from '@/utils/common/formatUSD';
-import { usePoolPlugins } from '@/hooks/pools/usePoolPlugins';
-import { Skeleton } from '@/components/ui/skeleton';
-import { FarmingPluginIcon } from '../PluginIcons';
-import { useCurrency } from '@/hooks/common/useCurrency';
+import { ColumnDef } from "@tanstack/react-table";
+import { HeaderItem } from "./common";
+import { Address } from "wagmi";
+import CurrencyLogo from "../CurrencyLogo";
+import { TokenFieldsFragment } from "@/graphql/generated/graphql";
+import { DynamicFeePluginIcon } from "../PluginIcons";
+import { formatUSD } from "@/utils/common/formatUSD";
+import { usePoolPlugins } from "@/hooks/pools/usePoolPlugins";
+import { Skeleton } from "@/components/ui/skeleton";
+import { FarmingPluginIcon } from "../PluginIcons";
+import { useCurrency } from "@/hooks/common/useCurrency";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
+import { formatPercent } from "@/utils/common/formatPercent";
+import { ReactNode } from "react";
 
 interface Pair {
     token0: TokenFieldsFragment;
@@ -21,8 +24,12 @@ interface Pool {
     fee: number;
     tvlUSD: number;
     volume24USD: number;
-    maxApr: number;
+    poolMaxApr: number;
+    poolAvgApr: number;
     avgApr: number;
+    farmApr: number;
+    isMyPool: boolean;
+    hasActiveFarming: boolean;
 }
 
 const PoolPair = ({ pair, fee }: Pool) => {
@@ -36,11 +43,7 @@ const PoolPair = ({ pair, fee }: Pool) => {
         <div className="flex items-center gap-4 ml-2">
             <div className="flex">
                 <CurrencyLogo currency={currencyA} size={30} />
-                <CurrencyLogo
-                    currency={currencyB}
-                    size={30}
-                    className="-ml-2"
-                />
+                <CurrencyLogo currency={currencyB} size={30} className="-ml-2" />
             </div>
 
             {currencyA && currencyB ? (
@@ -65,81 +68,80 @@ const Plugins = ({ poolId }: { poolId: Address }) => {
     );
 };
 
+const AvgAPR = ({ children, avgApr, farmApr, maxApr }: { children: ReactNode; avgApr: string; farmApr: string | undefined; maxApr: string }) => {
+    return (
+        <HoverCard>
+            <HoverCardTrigger>{children}</HoverCardTrigger>
+            <HoverCardContent>
+                <p>Avg. APR - {avgApr}</p>
+                {farmApr && <p>Farm APR - {farmApr}</p>}
+                <p>Max APR - {maxApr}</p>
+            </HoverCardContent>
+        </HoverCard>
+    );
+};
+
 export const poolsColumns: ColumnDef<Pool>[] = [
     {
-        accessorKey: 'pair',
+        accessorKey: "pair",
         header: () => <HeaderItem className="ml-2">Pool</HeaderItem>,
         cell: ({ row }) => <PoolPair {...row.original} />,
         filterFn: (v, _, value) =>
-            [
-                v.original.pair.token0.symbol,
-                v.original.pair.token1.symbol,
-                v.original.pair.token0.name,
-                v.original.pair.token1.name,
-            ]
-                .join(' ')
+            [v.original.pair.token0.symbol, v.original.pair.token1.symbol, v.original.pair.token0.name, v.original.pair.token1.name]
+                .join(" ")
                 .toLowerCase()
                 .includes(value),
     },
     {
-        accessorKey: 'plugins',
+        accessorKey: "plugins",
         header: () => <HeaderItem>Plugins</HeaderItem>,
         cell: ({ row }) => <Plugins poolId={row.original.id} />,
+        filterFn: (v, _, value: boolean) => v.original.hasActiveFarming === value,
     },
     {
-        accessorKey: 'tvlUSD',
+        accessorKey: "tvlUSD",
         header: ({ column }) => (
-            <HeaderItem
-                sort={() =>
-                    column.toggleSorting(column.getIsSorted() === 'asc')
-                }
-                isAsc={column.getIsSorted() === 'asc'}
-            >
+            <HeaderItem sort={() => column.toggleSorting(column.getIsSorted() === "asc")} isAsc={column.getIsSorted() === "asc"}>
                 TVL
             </HeaderItem>
         ),
         cell: ({ getValue }) => formatUSD.format(getValue() as number),
     },
     {
-        accessorKey: 'volume24USD',
+        accessorKey: "volume24USD",
         header: ({ column }) => (
-            <HeaderItem
-                sort={() =>
-                    column.toggleSorting(column.getIsSorted() === 'asc')
-                }
-                isAsc={column.getIsSorted() === 'asc'}
-            >
+            <HeaderItem sort={() => column.toggleSorting(column.getIsSorted() === "asc")} isAsc={column.getIsSorted() === "asc"}>
                 Volume 24H
             </HeaderItem>
         ),
         cell: ({ getValue }) => formatUSD.format(getValue() as number),
     },
     {
-        accessorKey: 'maxApr',
+        accessorKey: "fees24USD",
         header: ({ column }) => (
-            <HeaderItem
-                sort={() =>
-                    column.toggleSorting(column.getIsSorted() === 'asc')
-                }
-                isAsc={column.getIsSorted() === 'asc'}
-            >
-                Max. APR
+            <HeaderItem sort={() => column.toggleSorting(column.getIsSorted() === "asc")} isAsc={column.getIsSorted() === "asc"}>
+                Fees 24H
             </HeaderItem>
         ),
-        cell: ({ getValue }) => `${getValue()} %`,
+        cell: ({ getValue }) => formatUSD.format(getValue() as number),
     },
     {
-        accessorKey: 'avgApr',
+        accessorKey: "avgApr",
         header: ({ column }) => (
-            <HeaderItem
-                sort={() =>
-                    column.toggleSorting(column.getIsSorted() === 'asc')
-                }
-                isAsc={column.getIsSorted() === 'asc'}
-            >
+            <HeaderItem sort={() => column.toggleSorting(column.getIsSorted() === "asc")} isAsc={column.getIsSorted() === "asc"}>
                 Avg. APR
             </HeaderItem>
         ),
-        cell: ({ getValue }) => `${getValue()} %`,
+        cell: ({ getValue, row }) => {
+            return (
+                <AvgAPR
+                    avgApr={formatPercent.format(row.original.poolAvgApr)}
+                    maxApr={formatPercent.format(row.original.poolMaxApr)}
+                    farmApr={row.original.hasActiveFarming ? formatPercent.format(row.original.farmApr) : undefined}
+                >
+                    {formatPercent.format(getValue() as number)}
+                </AvgAPR>
+            );
+        },
     },
 ];