token time series

package.json

@@ -78,14 +78,14 @@
         "vite-plugin-dts": "^1.7.3",
         "vite-plugin-lib-inject-css": "^1.3.0",
         "vite-tsconfig-paths": "^4.2.1",
-        "@covalenthq/client-sdk": "^0.7.6"
+        "@covalenthq/client-sdk": "^0.8.3"
     },
     "peerDependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },
     "dependencies": {
-        "@covalenthq/client-sdk": "^0.7.6",
+        "@covalenthq/client-sdk": "^0.8.3",
         "@headlessui/react": "^1.7.17",
         "@radix-ui/react-avatar": "^1.0.4",
         "@radix-ui/react-checkbox": "^1.0.4",

src/components/Molecules/XYK/XYKTokenTimeSeriesView/XYKTokenTimeSeriesView.stories.tsx

@@ -0,0 +1,19 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { XYKTokenTimeSeriesView } from "./XYKTokenTimeSeriesView";
+
+type Story = StoryObj<typeof XYKTokenTimeSeriesView>;
+
+const meta: Meta<typeof XYKTokenTimeSeriesView> = {
+    title: "Molecules/XYK",
+    component: XYKTokenTimeSeriesView,
+};
+
+export default meta;
+
+export const XYKTokenTimeSeries: Story = {
+    args: {
+        chain_name: "eth-mainnet",
+        dex_name: "uniswap_v2",
+        token_address: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
+    },
+};

src/components/Molecules/XYK/XYKTokenTimeSeriesView/XYKTokenTimeSeriesView.tsx

@@ -0,0 +1,184 @@
+import { type Option, None, Some } from "@/utils/option";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { AreaChart, BarChart } from "@tremor/react";
+import { rootColor, timestampParser } from "@/utils/functions";
+import { TypographyH4 } from "@/components/ui/typography";
+import { Skeleton } from "@/components/ui/skeleton";
+import { GRK_SIZES, PERIOD } from "@/utils/constants/shared.constants";
+import { CHART_COLORS } from "@/utils/constants/shared.constants";
+import { useCovalent } from "@/utils/store/Covalent";
+import { type XYKTokenTimeSeriesViewProps } from "@/utils/types/molecules.types";
+import {
+    prettifyCurrency,
+    type TokenV2VolumeWithChartData,
+} from "@covalenthq/client-sdk";
+import { capitalizeFirstLetter } from "@/utils/functions/capitalize";
+
+export const XYKTokenTimeSeriesView: React.FC<XYKTokenTimeSeriesViewProps> = ({
+    chain_name,
+    dex_name,
+    token_address,
+    token_data,
+    displayMetrics = "both",
+}) => {
+    const [maybeResult, setResult] =
+        useState<Option<TokenV2VolumeWithChartData>>(None);
+    const [chartData, setChartData] = useState<Option<any>>(None);
+    const [period, setPeriod] = useState<PERIOD>(PERIOD.DAYS_7);
+    const [timeSeries, setTimeSeries] = useState<string>(
+        displayMetrics !== "both" ? displayMetrics : "liquidity"
+    );
+    const [chartColor, setColor] = useState<any>("");
+    const { covalentClient } = useCovalent();
+
+    const handleChartData = () => {
+        maybeResult.match({
+            None: () => null,
+            Some: (response: any) => {
+                const chart_key = `${timeSeries}_timeseries_${period}d`;
+                const value_key =
+                    timeSeries === "price"
+                        ? "price_of_token0_in_token1"
+                        : `${timeSeries}_quote`;
+
+                const result = response[chart_key].map((x: any) => {
+                    const dt = timestampParser(x.dt, "DD MMM YY");
+                    return {
+                        date: dt,
+                        [`${capitalizeFirstLetter(timeSeries)} (USD)`]:
+                            x[value_key],
+                    };
+                });
+                setChartData(new Some(result));
+            },
+        });
+    };
+
+    useEffect(() => {
+        setColor(rootColor());
+        if (token_data) {
+            setResult(new Some(token_data));
+            return;
+        }
+        (async () => {
+            setResult(None);
+            const response = await covalentClient.XykService.getLpTokenView(
+                chain_name,
+                dex_name,
+                token_address
+            );
+            setResult(new Some(response.data.items[0]));
+        })();
+    }, [token_data, dex_name, token_address, chain_name, displayMetrics]);
+
+    useEffect(() => {
+        handleChartData();
+    }, [maybeResult, period, timeSeries, displayMetrics]);
+
+    useEffect(() => {
+        if (displayMetrics === "both") return;
+        setTimeSeries(displayMetrics);
+    }, [displayMetrics]);
+
+    const body = chartData.match({
+        None: () => {
+            return (
+                <div className="mt-8">
+                    <Skeleton size={GRK_SIZES.LARGE} />
+                </div>
+            );
+        },
+        Some: (result) => {
+            if (timeSeries === "liquidity") {
+                return (
+                    <AreaChart
+                        className="mt-2 p-2"
+                        data={result}
+                        index="date"
+                        valueFormatter={prettifyCurrency}
+                        yAxisWidth={100}
+                        categories={[
+                            `${capitalizeFirstLetter(timeSeries)} (USD)`,
+                        ]}
+                        colors={chartColor ? [chartColor] : CHART_COLORS}
+                    />
+                );
+            }
+            return (
+                <div>
+                    <BarChart
+                        className="mt-2 p-2"
+                        data={result}
+                        index="date"
+                        valueFormatter={prettifyCurrency}
+                        yAxisWidth={100}
+                        categories={[
+                            `${capitalizeFirstLetter(timeSeries)} (USD)`,
+                        ]}
+                        colors={chartColor ? [chartColor] : CHART_COLORS}
+                    />
+                </div>
+            );
+        },
+    });
+
+    return (
+        <div className="min-h-[20rem] w-full rounded border p-4">
+            <div className="pb-4">
+                <TypographyH4>{`${capitalizeFirstLetter(
+                    timeSeries
+                )} (USD)`}</TypographyH4>
+            </div>
+
+            <div className="flex justify-between">
+                {displayMetrics === "both" && (
+                    <div className="flex gap-2">
+                        <Button
+                            disabled={!maybeResult.isDefined}
+                            variant={
+                                timeSeries === "liquidity"
+                                    ? "accent"
+                                    : "outline"
+                            }
+                            onClick={() => setTimeSeries("liquidity")}
+                        >
+                            Liquidity
+                        </Button>
+                        <Button
+                            disabled={!maybeResult.isDefined}
+                            variant={
+                                timeSeries === "volume" ? "accent" : "outline"
+                            }
+                            onClick={() => setTimeSeries("volume")}
+                        >
+                            Volume
+                        </Button>
+                    </div>
+                )}
+                <div className="flex gap-2">
+                    <Button
+                        disabled={!maybeResult.isDefined}
+                        variant={
+                            period === PERIOD.DAYS_7 ? "accent" : "outline"
+                        }
+                        onClick={() => setPeriod(PERIOD.DAYS_7)}
+                    >
+                        7 days
+                    </Button>
+                    <Button
+                        disabled={!maybeResult.isDefined}
+                        variant={
+                            period === PERIOD.DAYS_30 ? "accent" : "outline"
+                        }
+                        onClick={() => setPeriod(PERIOD.DAYS_30)}
+                    >
+                        30 days
+                    </Button>
+                </div>
+            </div>
+
+            {body}
+        </div>
+    );
+};

src/utils/types/molecules.types.ts

@@ -2,6 +2,7 @@ import {
     type Chain,
     type PoolWithTimeseries,
     type UniswapLikeEcosystemCharts,
+    type TokenV2VolumeWithChartData,
 } from "@covalenthq/client-sdk";
 
 export interface AccountCardViewProps {
@@ -47,3 +48,11 @@ export interface XYKOverviewTimeSeriesViewProps {
     overview_data?: UniswapLikeEcosystemCharts;
     displayMetrics?: "both" | "liquidity" | "volume";
 }
+
+export interface XYKTokenTimeSeriesViewProps {
+    chain_name: Chain;
+    dex_name: string;
+    token_address: string;
+    token_data?: TokenV2VolumeWithChartData;
+    displayMetrics?: "both" | "liquidity" | "volume";
+}