Skip to content

Commit

Permalink
initial pool detail view
Browse files Browse the repository at this point in the history
  • Loading branch information
@nguyenlejoe
nguyenlejoe committed Jan 9, 2024
1 parent 331910d commit 10facdc
Show file tree
Hide file tree
Showing 3 changed files with 212 additions and 0 deletions.
19 changes: 19 additions & 0 deletions src/components/Organisms/XYK/XYKPoolDetailView/XYKPoolDetailView.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -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",
},
};
187 changes: 187 additions & 0 deletions src/components/Organisms/XYK/XYKPoolDetailView/XYKPoolDetailView.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
};
6 changes: 6 additions & 0 deletions src/utils/types/organisms.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 10facdc

Please sign in to comment.