feat: Show Volume, Fees and APY

pages/api/token-stats.ts

@@ -0,0 +1,34 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { fetchTokenList } from "services/tokens";
+import { Network } from "types/network";
+import { TokenType } from "types/tokens";
+import { buildPoolsInfo } from "utils/info/pools";
+import { buildTokenStats } from "utils/info/tokens";
+import { getMercuryPools } from "zephyr/helpers";
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const queryParams = req.query;
+
+  let network = queryParams?.network as string;
+  network = network?.toUpperCase() as Network;
+
+  if (network !== "MAINNET" && network !== "TESTNET") {
+    return res.status(400).json({ error: "Invalid network" });
+  }
+
+  try {
+    const tokenList: TokenType[] = await fetchTokenList({ network });
+
+    const data = await getMercuryPools(network);
+
+    const result = await buildPoolsInfo(data, tokenList, network);
+
+    const tokensInfo = await buildTokenStats(tokenList, result);
+
+    return res.json(tokensInfo);
+  } catch (error) {
+    return res.status(500).json({ error: "Failed to fetch token list" });
+  }
+}
+
+export default handler;

pages/index.tsx

@@ -5,7 +5,7 @@ import PoolsTable from "../src/components/pools-table/pools-table";
 import TokensTable from "../src/components/tokens-table/tokens-table";
 import TVLChart from "../src/components/tvl-chart";
 import { useQueryPools } from "../src/hooks/pools";
-import { useQueryTokens } from "../src/hooks/tokens";
+import { useQueryTokens, useQueryTokenStats } from "../src/hooks/tokens";
 import TransactionsTable from "../src/components/transaction-table/transactions-table";
 import { useQueryAllEvents } from "../src/hooks/events";
 import useEventTopicFilter from "../src/hooks/use-event-topic-filter";
@@ -24,10 +24,12 @@ import { useRouter } from "next/router";
 import { StyledCard } from "components/styled/card";
 import LoadingSkeleton from "components/loading-skeleton";
 import { formatNumberToMoney } from "utils/utils";
+import { Text } from "components/styled/text";
 
 export default function Home() {
   const pools = useQueryPools();
   const tokens = useQueryTokens();
+  const tokenStats = useQueryTokenStats();
 
   const router = useRouter();
 
@@ -82,6 +84,60 @@ export default function Home() {
         <title>Soroswap Info</title>
       </Head>
       <Layout>
+        <Box display={"flex"} flexDirection={"column"} gap={4} mb={4}>
+          <StyledCard sx={{ p: 2 }}>
+            <Box mt={2}>
+              <Text>Total Volume 24h</Text>
+              <LoadingSkeleton isLoading={tokenStats.isLoading} variant="text">
+                <Typography variant="h6">
+                  {formatNumberToMoney(tokenStats.data?.volume24h)}
+                </Typography>
+              </LoadingSkeleton>
+            </Box>
+            <Box mt={2}>
+              <Text>Total Volume 7d</Text>
+              <LoadingSkeleton isLoading={tokenStats.isLoading} variant="text">
+                <Typography variant="h6">
+                  {formatNumberToMoney(tokenStats.data?.volume7d)}
+                </Typography>
+              </LoadingSkeleton>
+            </Box>
+            <Box mt={2}>
+              <Text>Total Volume All Time</Text>
+              <LoadingSkeleton isLoading={tokenStats.isLoading} variant="text">
+                <Typography variant="h6">
+                  {formatNumberToMoney(tokenStats.data?.volumeAllTime)}
+                </Typography>
+              </LoadingSkeleton>
+            </Box>
+          </StyledCard>
+          <StyledCard sx={{ p: 2 }}>
+            <Box mt={2}>
+              <Text>Total Fees Generated 24h</Text>
+              <LoadingSkeleton isLoading={tokenStats.isLoading} variant="text">
+                <Typography variant="h6">
+                  {formatNumberToMoney(tokenStats.data?.fees24h)}
+                </Typography>
+              </LoadingSkeleton>
+            </Box>
+            <Box mt={2}>
+              <Text>Total Fees Generated 7d</Text>
+              <LoadingSkeleton isLoading={tokenStats.isLoading} variant="text">
+                <Typography variant="h6">
+                  {formatNumberToMoney(tokenStats.data?.fees7d)}
+                </Typography>
+              </LoadingSkeleton>
+            </Box>
+            <Box mt={2}>
+              <Text>Total Fees Generated All Time</Text>
+              <LoadingSkeleton isLoading={tokenStats.isLoading} variant="text">
+                <Typography variant="h6">
+                  {formatNumberToMoney(tokenStats.data?.feesAllTime)}
+                </Typography>
+              </LoadingSkeleton>
+            </Box>
+          </StyledCard>
+        </Box>
         <Typography variant="h6" sx={{ mb: 1 }}></Typography>
         <Grid container spacing={4}>
           <Grid item xs={12} md={12}>

pages/pools/[id]/index.tsx

@@ -314,6 +314,35 @@ const PoolPage = () => {
           </StyledCard>
         </Grid>
       </Grid>
+
+      <Box mt={3}>
+        <StyledCard sx={{ p: 2 }} flexBasis={"30%"}>
+          <Box mt={2}>
+            <Text>Volume 7d</Text>
+            <LoadingSkeleton isLoading={pool.isLoading} variant="text">
+              <Typography variant="h6">
+                {formatNumberToMoney(pool.data?.volume7d)}
+              </Typography>
+            </LoadingSkeleton>
+          </Box>
+          <Box mt={2}>
+            <Text>Fees 7d</Text>
+            <LoadingSkeleton isLoading={pool.isLoading} variant="text">
+              <Typography variant="h6">
+                {formatNumberToMoney(pool.data?.fees7d)}
+              </Typography>
+            </LoadingSkeleton>
+          </Box>
+          <Box mt={2}>
+            <Text>APY</Text>
+            <LoadingSkeleton isLoading={pool.isLoading} variant="text">
+              <Typography variant="h6">
+                {formatNumberToToken(pool.data?.apy)}
+              </Typography>
+            </LoadingSkeleton>
+          </Box>
+        </StyledCard>
+      </Box>
       <Box mt={8}>
         <Tabs
           items={["Transactions"]}

src/components/pools-table/pools-table.tsx

@@ -57,11 +57,21 @@ const headCells: readonly HeadCell[] = [
     numeric: true,
     label: "Fees 24H",
   },
+  {
+    id: "fees7d",
+    numeric: true,
+    label: "Fees 7D",
+  },
   {
     id: "feesYearly",
     numeric: true,
     label: "Fees Yearly",
   },
+  {
+    id: "apy",
+    numeric: true,
+    label: "APY",
+  },
 ];
 
 interface PoolsTableProps {
@@ -218,9 +228,15 @@ export default function PoolsTable({
                     <StyledTableCell align="right">
                       {formatNumberToMoney(row.fees24h)}
                     </StyledTableCell>
+                    <StyledTableCell align="right">
+                      {formatNumberToMoney(row.fees7d)}
+                    </StyledTableCell>
                     <StyledTableCell align="right">
                       {formatNumberToMoney(row.feesYearly)}
                     </StyledTableCell>
+                    <StyledTableCell align="right">
+                      {formatNumberToMoney(row.apy)}
+                    </StyledTableCell>
                   </TableRow>
                 );
               })}

src/hooks/tokens.ts

@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import {
   fetchToken,
   fetchTokenPriceChart,
+  fetchTokenStats,
   fetchTokenTVLChart,
   fetchTokenVolumeChart,
   fetchTokens,
@@ -71,3 +72,13 @@ export const useQueryTokenVolumeChart = ({
     enabled: !!tokenAddress && isValidQuery,
   });
 };
+
+export const useQueryTokenStats = () => {
+  const { network, isValidQuery } = useQueryNetwork();
+
+  return useQuery({
+    queryKey: [key, network, "token-stats"],
+    queryFn: () => fetchTokenStats({ network: network! }),
+    enabled: isValidQuery,
+  });
+};

src/services/tokens.ts

@@ -1,5 +1,5 @@
 import { ApiNetwork, Network } from "types/network";
-import { Token } from "../types/tokens";
+import { Token, TokenStats } from "../types/tokens";
 import { fillDatesAndSort } from "../utils/complete-chart";
 import axiosInstance from "./axios";
 import { xlmToken } from "constants/constants";
@@ -105,3 +105,11 @@ export const fetchTokenVolumeChart = async ({
 
   return filledData;
 };
+
+export const fetchTokenStats = async ({ network }: ApiNetwork) => {
+  const { data } = await axiosInstance.get<TokenStats>("/api/token-stats", {
+    params: { network },
+  });
+
+  return data;
+};

src/types/pools.ts

@@ -44,6 +44,8 @@ export interface Pool {
   volume24h?: number;
   volume7d?: number;
   fees24h?: number;
+  fees7d?: number;
+  apy?:number;
   feesYearly?: number;
   tvlChartData?: TvlChartData[];
   volumeChartData?: VolumeChartData[];

src/types/tokens.ts

@@ -18,6 +18,21 @@ export interface Token {
   issuer: string;
 }
 
+export interface TokenFeesChartData {
+  date: string;
+  fees: number;
+  timestamp: number;
+}
+
+export interface TokenStats {
+  volume24h: number;
+  volume7d: number;
+  volumeAllTime: number;
+  fees24h: number;
+  fees7d: number;
+  feesAllTime: number;
+}
+
 export interface TokenType {
   code: string;
   issuer?: string;

src/utils/info/pools/index.ts

@@ -144,6 +144,9 @@ export const buildPoolsInfo = async (
 
       const feesYearly = fees7d * 52;
 
+      const weeklyYield = fees7d / tvl;
+      const apy = weeklyYield * 52 * 100;
+
       return {
         ...poolData,
         tvlChartData,
@@ -152,6 +155,8 @@ export const buildPoolsInfo = async (
         volume7d,
         volume24h,
         fees24h,
+        fees7d,
+        apy,
         feesYearly,
       };
     })