feat #78: add Liquidity provider tab

pages/pools/[id]/index.tsx

@@ -28,27 +28,25 @@ import Tabs from "components/tabs";
 import { Row } from "components/styled/row";
 import { SearchInput } from "components/styled/search-input";
 import RenderIf from "components/render-if";
-import TokensTable from "components/tokens-table/tokens-table";
-import { useQueryTokens } from "hooks/tokens";
+import LiquidityProvidersTable from "components/liquidity-provider-table/liquidity-provider-table";
+import { useLiquidityProviders } from "../../../src/hooks/use-liquidity-providers";
+import { shouldFilterEvent } from "utils/filters";
 import { useState } from "react";
-import { shouldFilterEvent, shouldFilterToken } from "utils/filters";
 
 const PoolPage = () => {
   const router = useRouter();
   const { id } = router.query;
 
   const { handleSavePool, isPoolSaved } = useSavedPools();
-
   const eventsFilter = useEventTopicFilter();
 
   const events = useQueryAllEvents({
     address: id as string,
     type: eventsFilter.topic,
   });
 
-  const tokens = useQueryTokens();
-
   const pool = useQueryPool({ poolAddress: id as string });
+  const liquidityProviders = useLiquidityProviders({ poolAddress: id as string });
 
   const token0 = pool.data?.tokenA;
   const token1 = pool.data?.tokenB;
@@ -66,12 +64,9 @@ const PoolPage = () => {
 
   const [searchValue, setSearchValue] = useState("");
 
-  const filteredTokens = tokens.data?.filter((token) => {
-    return (
-      (shouldFilterToken(token.asset, token0?.contract) ||
-        shouldFilterToken(token.asset, token1?.contract)) &&
-      shouldFilterToken(token.asset, searchValue)
-    );
+  const filteredProviders = liquidityProviders.data?.filter((provider) => {
+    if (!searchValue) return true;
+    return provider.address.toLowerCase().includes(searchValue.toLowerCase());
   });
 
   const filteredEvents = events.data?.filter((event) => {
@@ -316,7 +311,7 @@ const PoolPage = () => {
       </Grid>
       <Box mt={8}>
         <Tabs
-          items={["Transactions"]}
+          items={["Transactions", "Liquidity Providers"]}
           endContent={(selected) => (
             <Row gap="8px">
               <SearchInput
@@ -336,6 +331,14 @@ const PoolPage = () => {
                   filters={eventsFilter}
                 />
               </RenderIf>
+              <RenderIf isTrue={selected === "Liquidity Providers"}>
+                <LiquidityProvidersTable
+                  rows={filteredProviders ?? []}
+                  isLoading={liquidityProviders.isLoading}
+                  itemsPerPage={10}
+                  emptyMessage="No liquidity providers found"
+                />
+              </RenderIf>
             </Box>
           )}
         </Tabs>

src/components/liquidity-provider-table/liquidity-provider-table.tsx

@@ -0,0 +1,186 @@
+import {
+  Skeleton,
+  Box,
+  Table,
+  TableBody,
+  TableHead,
+  TablePagination,
+  TableRow,
+  TableSortLabel,
+  TableContainer,
+} from "soroswap-ui";
+import { visuallyHidden } from "@mui/utils";
+import * as React from "react";
+import useTable from "../../hooks/use-table";
+import { formatNumberToMoney } from "../../utils/utils";
+import { StyledCard } from "components/styled/card";
+import { StyledTableCell } from "components/styled/table-cell";
+import { useTheme } from "soroswap-ui";
+import { LiquidityProvider, LiquidityProviderTableProps } from "../../types/liquidity-providers";
+
+interface HeadCell {
+  id: keyof LiquidityProvider;
+  label: string;
+  numeric: boolean;
+}
+
+const headCells: readonly HeadCell[] = [
+  {
+    id: "address",
+    numeric: false,
+    label: "Account",
+  },
+  {
+    id: "tvl",
+    numeric: true,
+    label: "TVL",
+  },
+  {
+    id: "poolShare",
+    numeric: true,
+    label: "Pool Share",
+  },
+];
+
+interface TableHeadProps {
+  onRequestSort: (
+    event: React.MouseEvent<unknown>,
+    property: keyof LiquidityProvider
+  ) => void;
+  order: "asc" | "desc";
+  orderBy: string;
+}
+
+function LiquidityProvidersTableHead(props: TableHeadProps) {
+  const { order, orderBy, onRequestSort } = props;
+  const createSortHandler =
+    (property: keyof LiquidityProvider) => (event: React.MouseEvent<unknown>) => {
+      onRequestSort(event, property);
+    };
+
+  return (
+    <TableHead>
+      <TableRow sx={{ bgcolor: "#1b1b1b" }}>
+        <StyledTableCell>#</StyledTableCell>
+        {headCells.map((headCell) => (
+          <StyledTableCell
+            key={headCell.id}
+            align={headCell.numeric ? "right" : "left"}
+            sortDirection={orderBy === headCell.id ? order : false}
+          >
+            <TableSortLabel
+              active={orderBy === headCell.id}
+              direction={orderBy === headCell.id ? order : "asc"}
+              onClick={createSortHandler(headCell.id)}
+            >
+              {headCell.label}
+              {orderBy === headCell.id ? (
+                <Box component="span" sx={visuallyHidden}>
+                  {order === "desc" ? "sorted descending" : "sorted ascending"}
+                </Box>
+              ) : null}
+            </TableSortLabel>
+          </StyledTableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}
+
+export default function LiquidityProvidersTable({
+  rows,
+  emptyMessage = "No liquidity providers found",
+  isLoading = false,
+  itemsPerPage = 10,
+}: LiquidityProviderTableProps) {
+  const {
+    order,
+    orderBy,
+    handleRequestSort,
+    visibleRows,
+    emptyRows,
+    rowsPerPage,
+    page,
+    handleChangePage,
+    handleChangeRowsPerPage,
+  } = useTable<LiquidityProvider>({
+    rows,
+    defaultOrder: "desc",
+    defaultOrderBy: "tvl",
+    itemsPerPage,
+  });
+
+  const theme = useTheme();
+
+  if (isLoading) {
+    return <Skeleton variant="rounded" height={300} />;
+  }
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <StyledCard sx={{ width: "100%" }}>
+        <TableContainer>
+          <Table sx={{ minWidth: 750 }} aria-labelledby="tableTitle">
+            <LiquidityProvidersTableHead
+              order={order}
+              orderBy={orderBy}
+              onRequestSort={handleRequestSort}
+            />
+            <TableBody>
+              {visibleRows.map((row, index) => (
+                <TableRow
+                  key={row.address}
+                  sx={{
+                    "&:nth-of-type(2n)": {
+                      bgcolor: "#1b1b1b",
+                    },
+                    "&:hover": {
+                      cursor: "pointer",
+                      bgcolor: theme.palette.background.paper,
+                      borderTop: `1px solid ${theme.palette.customBackground.accentAction}`,
+                      borderBottom: `1px solid ${theme.palette.customBackground.accentAction}`,
+                    },
+                    bgcolor: "transparent",
+                  }}
+                  component="a"
+                  href={`https://stellar.expert/explorer/public/account/${row.address}`}
+                  target="_blank"
+                >
+                  <StyledTableCell>{page * rowsPerPage + index + 1}</StyledTableCell>
+                  <StyledTableCell>{row.address}</StyledTableCell>
+                  <StyledTableCell align="right">
+                    {formatNumberToMoney(row.tvl)}
+                  </StyledTableCell>
+                  <StyledTableCell align="right">
+                    {row.poolShare.toFixed(2)}%
+                  </StyledTableCell>
+                </TableRow>
+              ))}
+              {emptyRows > 0 && (
+                <TableRow style={{ height: 53 * emptyRows }}>
+                  <StyledTableCell colSpan={4} />
+                </TableRow>
+              )}
+              {visibleRows.length === 0 && (
+                <TableRow>
+                  <StyledTableCell colSpan={4} align="center">
+                    {emptyMessage}
+                  </StyledTableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
+        <TablePagination
+          component="div"
+          count={rows.length}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          onPageChange={handleChangePage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+          rowsPerPageOptions={[]}
+        />
+      </StyledCard>
+    </Box>
+  );
+}

src/hooks/use-liquidity-providers.ts

@@ -0,0 +1,40 @@
+// src/hooks/use-liquidity-providers.ts
+import { useQuery } from "@tanstack/react-query";
+import { LiquidityProvider } from "../types/liquidity-providers";
+
+interface UseLiquidityProvidersProps {
+  poolAddress?: string;
+}
+
+export const useLiquidityProviders = ({ poolAddress }: UseLiquidityProvidersProps) => {
+  return useQuery({
+    queryKey: ["liquidityProviders", poolAddress],
+    queryFn: async () => {
+      try {
+        // This is temporary mock data - replace with actual API call
+        const mockData: LiquidityProvider[] = [
+          {
+            address: "GBZV...DMUB",
+            tvl: 1234.56,
+            poolShare: 25.5,
+          },
+          {
+            address: "GDZL...XVUC",
+            tvl: 5678.90,
+            poolShare: 15.3,
+          },
+          // Add more mock data as needed
+        ];
+        return mockData;
+
+        // Uncomment this when API is ready:
+        // const response = await fetch(`/api/pools/${poolAddress}/liquidity-providers`);
+        // return await response.json();
+      } catch (error) {
+        console.error("Error fetching liquidity providers:", error);
+        return [];
+      }
+    },
+    enabled: !!poolAddress,
+  });
+};

src/types/liquidity-providers.ts

@@ -0,0 +1,15 @@
+// src/types/liquidity-providers.ts
+
+export interface LiquidityProvider {
+    address: string;  // The account address of the liquidity provider
+    tvl: number;      // Total Value Locked for this provider
+    poolShare: number; // Provider's share of the pool as a percentage
+  }
+
+  // If you need any additional types related to liquidity providers, add them here
+  export interface LiquidityProviderTableProps {
+    rows: LiquidityProvider[];
+    emptyMessage?: string;
+    isLoading?: boolean;
+    itemsPerPage?: number;
+  }