From 10facdc80a6e2aad1f1f3ba00357be09cb4a093a Mon Sep 17 00:00:00 2001
From: nguyenlejoe <joe_le.1@hotmail.com>
Date: Tue, 9 Jan 2024 14:04:25 -0800
Subject: [PATCH] initial pool detail view

---
 .../XYKPoolDetailView.stories.tsx             |  19 ++
 .../XYKPoolDetailView/XYKPoolDetailView.tsx   | 187 ++++++++++++++++++
 src/utils/types/organisms.types.ts            |   6 +
 3 files changed, 212 insertions(+)
 create mode 100644 src/components/Organisms/XYK/XYKPoolDetailView/XYKPoolDetailView.stories.tsx
 create mode 100644 src/components/Organisms/XYK/XYKPoolDetailView/XYKPoolDetailView.tsx

diff --git a/src/components/Organisms/XYK/XYKPoolDetailView/XYKPoolDetailView.stories.tsx b/src/components/Organisms/XYK/XYKPoolDetailView/XYKPoolDetailView.stories.tsx
new file mode 100644
index 00000000..24fe1f07
--- /dev/null
+++ b/src/components/Organisms/XYK/XYKPoolDetailView/XYKPoolDetailView.stories.tsx
@@ -0,0 +1,19 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { XYKPoolDetailView } from "./XYKPoolDetailView";
+
+type Story = StoryObj<typeof XYKPoolDetailView>;
+
+const meta: Meta<typeof XYKPoolDetailView> = {
+    title: "Organisms/XYK",
+    component: XYKPoolDetailView,
+};
+
+export default meta;
+
+export const XYKPoolDetail: Story = {
+    args: {
+        chain_name: "eth-mainnet",
+        dex_name: "uniswap_v2",
+        address: "0x21b8065d10f73ee2e260e5b47d3344d3ced7596e",
+    },
+};
diff --git a/src/components/Organisms/XYK/XYKPoolDetailView/XYKPoolDetailView.tsx b/src/components/Organisms/XYK/XYKPoolDetailView/XYKPoolDetailView.tsx
new file mode 100644
index 00000000..f6362926
--- /dev/null
+++ b/src/components/Organisms/XYK/XYKPoolDetailView/XYKPoolDetailView.tsx
@@ -0,0 +1,187 @@
+import { TypographyH4 } from "@/components/ui/typography";
+import { useCovalent } from "@/utils/store/Covalent";
+import { type Option, Some, None } from "@/utils/option";
+import { type XYKPoolDetailViewProps } from "@/utils/types/organisms.types";
+import { useEffect, useState } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { GRK_SIZES } from "@/utils/constants/shared.constants";
+import { XYKPoolTimeSeriesView } from "@/components/Molecules/XYK/XYKPoolTimeSeriesView/XYKPoolTimeSeriesView";
+
+export const XYKPoolDetailView: React.FC<XYKPoolDetailViewProps> = ({
+    chain_name,
+    dex_name,
+    address,
+}) => {
+    const [maybeResult, setResult] = useState<Option<any>>(None);
+    const [error, setError] = useState({ error: false, error_message: "" });
+    const { covalentClient } = useCovalent();
+
+    useEffect(() => {
+        (async () => {
+            let response;
+            setResult(None);
+            try {
+                response = await covalentClient.XykService.getPoolByAddress(
+                    chain_name,
+                    dex_name,
+                    address
+                );
+                console.log(response);
+                setResult(new Some(response.data.items[0]));
+            } catch (error) {
+                setError({
+                    error: response ? response.error : false,
+                    error_message: response ? response.error_message : "",
+                });
+            }
+        })();
+    }, [chain_name, dex_name]);
+
+    if (error.error) {
+        return <>{error.error_message}</>;
+    }
+
+    return (
+        <div className="w-full">
+            <div className="mt-4 flex gap-4">
+                {maybeResult.match({
+                    None: () => (
+                        <div className="rounded">
+                            <div className="h-[30rem] w-[30rem] animate-pulse rounded bg-accent-foreground" />
+
+                            <div className="mt-2 p-4">
+                                <TypographyH4>Attributes</TypographyH4>
+
+                                <div className="mt-2 flex flex-wrap gap-4">
+                                    {[1, 2, 3, 4, 5, 6, 7, 8].map((o, i) => {
+                                        return (
+                                            <Skeleton
+                                                key={i}
+                                                size={GRK_SIZES.LARGE}
+                                            />
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                        </div>
+                    ),
+                    Some: () => {
+                        return (
+                            <div className="flex min-w-[25rem] max-w-[70rem] flex-col gap-2 rounded ">
+                                <div className="flex w-full flex-grow flex-col justify-center gap-2 rounded border p-4">
+                                    <h2 className="text-md text-secondary">
+                                        Total Liquidity
+                                    </h2>
+                                    <div className="flex items-end gap-2">
+                                        <span className="text-2xl">
+                                            {maybeResult.match({
+                                                None: () => (
+                                                    <Skeleton
+                                                        size={GRK_SIZES.MEDIUM}
+                                                    />
+                                                ),
+                                                Some: (result) => {
+                                                    return (
+                                                        <span>
+                                                            {
+                                                                result.total_liquidity_quote
+                                                            }
+                                                        </span>
+                                                    );
+                                                },
+                                            })}
+                                        </span>
+                                    </div>
+                                </div>
+                                <div className="flex w-full flex-grow flex-col justify-center gap-2 rounded border p-4">
+                                    <h2 className="text-md text-secondary">
+                                        Volume 24h
+                                    </h2>
+                                    <div className="flex items-end gap-2">
+                                        <span className="text-2xl">
+                                            {maybeResult.match({
+                                                None: () => (
+                                                    <Skeleton
+                                                        size={GRK_SIZES.MEDIUM}
+                                                    />
+                                                ),
+                                                Some: (result) => {
+                                                    return (
+                                                        <span>
+                                                            {
+                                                                result.volume_24h_quote
+                                                            }
+                                                        </span>
+                                                    );
+                                                },
+                                            })}
+                                        </span>
+                                    </div>
+                                </div>
+                                <div className="flex w-full flex-grow flex-col justify-center gap-2 rounded border p-4">
+                                    <h2 className="text-md text-secondary">
+                                        Fee 24h
+                                    </h2>
+                                    <div className="flex items-end gap-2">
+                                        <span className="text-2xl">
+                                            {maybeResult.match({
+                                                None: () => (
+                                                    <Skeleton
+                                                        size={GRK_SIZES.MEDIUM}
+                                                    />
+                                                ),
+                                                Some: (result) => {
+                                                    return (
+                                                        <span>
+                                                            {
+                                                                result.fee_24h_quote
+                                                            }
+                                                        </span>
+                                                    );
+                                                },
+                                            })}
+                                        </span>
+                                    </div>
+                                </div>
+                                <div className="flex w-full flex-grow flex-col justify-center gap-2 rounded border p-4">
+                                    <h2 className="text-md text-secondary">
+                                        Total Liquidity
+                                    </h2>
+                                    <div className="flex items-end gap-2">
+                                        <span className="text-2xl">
+                                            {maybeResult.match({
+                                                None: () => (
+                                                    <Skeleton
+                                                        size={GRK_SIZES.MEDIUM}
+                                                    />
+                                                ),
+                                                Some: (result) => {
+                                                    return (
+                                                        <span>
+                                                            {
+                                                                result.total_liquidity_quote
+                                                            }
+                                                        </span>
+                                                    );
+                                                },
+                                            })}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    },
+                })}
+                <div className=" flex w-full flex-col gap-4">
+                    <div className="">
+                        <XYKPoolTimeSeriesView
+                            chain_name={chain_name}
+                            dex_name={dex_name}
+                            address={address}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/src/utils/types/organisms.types.ts b/src/utils/types/organisms.types.ts
index a8926026..b480eca4 100644
--- a/src/utils/types/organisms.types.ts
+++ b/src/utils/types/organisms.types.ts
@@ -11,6 +11,12 @@ export interface NFTDetailViewProps {
     token_id: string;
 }
 
+export interface XYKPoolDetailViewProps {
+    chain_name: Chain;
+    dex_name: string;
+    address: string;
+}
+
 export interface NFTWalletCollectionViewProps {
     chain_name: Chain;
     address: string;