Skip to content

Commit

Permalink
refactor to add display settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@nguyenlejoe
nguyenlejoe committed Jan 23, 2024
1 parent 990caca commit 555f3f0
Show file tree
Hide file tree
Showing 3 changed files with 156 additions and 103 deletions.
132 changes: 80 additions & 52 deletions src/components/Molecules/XYK/XYKOverviewLiquidityView/XYKOverviewLiquidityView.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { type Option, None, Some } from "@/utils/option";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { BarChart } from "@tremor/react";
import { AreaChart, BarChart } from "@tremor/react";
import { rootColor, timestampParser } from "@/utils/functions";
import { TypographyH4 } from "@/components/ui/typography";
import { Skeleton } from "@/components/ui/skeleton";
Expand All @@ -17,12 +17,20 @@ import { capitalizeFirstLetter } from "@/utils/functions/capitalize";

export const XYKOverviewLiquidityView: React.FC<
XYKOverviewLiquidityViewProps
> = ({ chain_name, dex_name, pool_address, pool_data }) => {
> = ({
chain_name,
dex_name,
pool_address,
pool_data,
displayMetrics = "both",
}) => {
const [maybeResult, setResult] =
useState<Option<UniswapLikeEcosystemCharts>>(None);
const [chartData, setChartData] = useState<Option<any>>(None);
const [period, setPeriod] = useState<PERIOD>(PERIOD.DAYS_7);
const [timeSeries, setTimeSerious] = useState<string>("liquidity");
const [timeSeries, setTimeSeries] = useState<string>(
displayMetrics !== "both" ? displayMetrics : "liquidity"
);
const [chartColor, setColor] = useState<any>("");
const { covalentClient } = useCovalent();

Expand Down Expand Up @@ -64,11 +72,11 @@ export const XYKOverviewLiquidityView: React.FC<
);
setResult(new Some(response.data.items[0]));
})();
}, [pool_data, dex_name, pool_address, chain_name]);
}, [pool_data, dex_name, pool_address, chain_name, displayMetrics]);

useEffect(() => {
handleChartData();
}, [maybeResult, period, timeSeries]);
}, [maybeResult, period, timeSeries, displayMetrics]);

const body = chartData.match({
None: () => {
Expand All @@ -79,6 +87,21 @@ export const XYKOverviewLiquidityView: React.FC<
);
},
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
Expand All @@ -104,54 +127,59 @@ export const XYKOverviewLiquidityView: React.FC<
timeSeries
)} (USD)`}</TypographyH4>
</div>

<div className="flex justify-between">
<div className="flex gap-2">
<Button
disabled={!maybeResult.isDefined}
variant={
timeSeries === "liquidity" ? "accent" : "outline"
}
onClick={() => setTimeSerious("liquidity")}
>
Liquidity
</Button>
<Button
disabled={!maybeResult.isDefined}
variant={timeSeries === "volume" ? "accent" : "outline"}
onClick={() => setTimeSerious("volume")}
>
Volume
</Button>
{/* <Button
disabled={!maybeResult.isDefined}
variant={timeSeries === "price" ? "accent" : "outline"}
onClick={() => setTimeSerious("price")}
>
Price
</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>
{displayMetrics === "both" && (
<div className="flex justify-between">
<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>
{/* <Button
disabled={!maybeResult.isDefined}
variant={timeSeries === "price" ? "accent" : "outline"}
onClick={() => setTimeSeries("price")}
>
Price
</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>
</div>
)}

{body}
</div>
Expand Down
125 changes: 74 additions & 51 deletions src/components/Molecules/XYK/XYKPoolTimeSeriesView/XYKPoolTimeSeriesView.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { type Option, None, Some } from "@/utils/option";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { BarChart } from "@tremor/react";
import { AreaChart, BarChart } from "@tremor/react";
import { rootColor, timestampParser } from "@/utils/functions";
import { TypographyH4 } from "@/components/ui/typography";
import { Skeleton } from "@/components/ui/skeleton";
Expand All @@ -20,11 +20,14 @@ export const XYKPoolTimeSeriesView: React.FC<XYKPoolTimeSeriesViewProps> = ({
dex_name,
pool_address,
pool_data,
displayMetrics = "both",
}) => {
const [maybeResult, setResult] = useState<Option<PoolWithTimeseries>>(None);
const [chartData, setChartData] = useState<Option<any>>(None);
const [period, setPeriod] = useState<PERIOD>(PERIOD.DAYS_7);
const [timeSeries, setTimeSerious] = useState<string>("liquidity");
const [timeSeries, setTimeSeries] = useState<string>(
displayMetrics !== "both" ? displayMetrics : "liquidity"
);
const [chartColor, setColor] = useState<any>("");
const { covalentClient } = useCovalent();

Expand Down Expand Up @@ -66,11 +69,11 @@ export const XYKPoolTimeSeriesView: React.FC<XYKPoolTimeSeriesViewProps> = ({
);
setResult(new Some(response.data.items[0]));
})();
}, [pool_data, dex_name, pool_address, chain_name]);
}, [pool_data, dex_name, pool_address, chain_name, displayMetrics]);

useEffect(() => {
handleChartData();
}, [maybeResult, period, timeSeries]);
}, [maybeResult, period, timeSeries, displayMetrics]);

const body = chartData.match({
None: () => {
Expand All @@ -81,6 +84,21 @@ export const XYKPoolTimeSeriesView: React.FC<XYKPoolTimeSeriesViewProps> = ({
);
},
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
Expand All @@ -106,54 +124,59 @@ export const XYKPoolTimeSeriesView: React.FC<XYKPoolTimeSeriesViewProps> = ({
timeSeries
)} (USD)`}</TypographyH4>
</div>

<div className="flex justify-between">
<div className="flex gap-2">
<Button
disabled={!maybeResult.isDefined}
variant={
timeSeries === "liquidity" ? "accent" : "outline"
}
onClick={() => setTimeSerious("liquidity")}
>
Liquidity
</Button>
<Button
disabled={!maybeResult.isDefined}
variant={timeSeries === "volume" ? "accent" : "outline"}
onClick={() => setTimeSerious("volume")}
>
Volume
</Button>
{/* <Button
disabled={!maybeResult.isDefined}
variant={timeSeries === "price" ? "accent" : "outline"}
onClick={() => setTimeSerious("price")}
>
Price
</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>
{displayMetrics === "both" && (
<div className="flex justify-between">
<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>
{/* <Button
disabled={!maybeResult.isDefined}
variant={timeSeries === "price" ? "accent" : "outline"}
onClick={() => setTimeSeries("price")}
>
Price
</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>
</div>
)}

{body}
</div>
Expand Down
2 changes: 2 additions & 0 deletions src/utils/types/molecules.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export interface XYKPoolTimeSeriesViewProps {
dex_name: string;
pool_address: string;
pool_data?: PoolWithTimeseries;
displayMetrics?: "both" | "liquidity" | "volume";
}

export interface NFTVolumeViewProps {
Expand All @@ -45,4 +46,5 @@ export interface XYKOverviewLiquidityViewProps {
dex_name: string;
pool_address: string;
pool_data?: UniswapLikeEcosystemCharts;
displayMetrics?: "both" | "liquidity" | "volume";
}

0 comments on commit 555f3f0

Please sign in to comment.