From 85ffe5fac91e1bf7cb4341b6cec6b00dd7a658d8 Mon Sep 17 00:00:00 2001 From: metalboyrick Date: Thu, 24 Apr 2025 16:41:18 +0700 Subject: [PATCH 1/9] feat: add chain tvl historical chart --- .../defi/TvlHistoricalChart.stories.tsx | 54 ++++++++ .../components/defi/tvl-historical-chart.tsx | 127 ++++++++++++++++++ 2 files changed, 181 insertions(+) create mode 100644 apps/storybook/src/stories/defi/TvlHistoricalChart.stories.tsx create mode 100644 packages/ui-react/src/components/defi/tvl-historical-chart.tsx diff --git a/apps/storybook/src/stories/defi/TvlHistoricalChart.stories.tsx b/apps/storybook/src/stories/defi/TvlHistoricalChart.stories.tsx new file mode 100644 index 00000000..af0b7934 --- /dev/null +++ b/apps/storybook/src/stories/defi/TvlHistoricalChart.stories.tsx @@ -0,0 +1,54 @@ +import { TvlHistoricalChart } from "@geist/ui-react/components/defi/tvl-historical-chart"; +import type { Meta, StoryObj } from "@storybook/react"; +import { expect, userEvent } from "@storybook/test"; +import { withQueryClientProvider } from "#stories/decorators/wagmi.tsx"; +import { setupCanvas } from "../utils/test-utils"; + +const meta = { + title: "DeFi/TvlHistoricalChart", + component: TvlHistoricalChart, + parameters: { + layout: "centered", + }, + decorators: [withQueryClientProvider()], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const EthereumMainnet: Story = { + args: { + chainId: "ethereum", + title: "Ethereum TVL", + color: "#5470FF", + }, + play: async ({ canvasElement }) => { + const { canvas } = await setupCanvas(canvasElement, 3000); + + const chart = await canvas.findByTestId("tvl-historical-chart"); + await expect(chart).toBeInTheDocument(); + + const title = await canvas.findByText("Ethereum TVL"); + await expect(title).toBeInTheDocument(); + + await userEvent.keyboard("{Tab}"); + + const tvlText = await canvas.findByText("TVL", undefined, { + timeout: 3000, + }); + await expect(tvlText).toBeInTheDocument(); + + const dateText = await canvas.findByText("Date", undefined, { + timeout: 3000, + }); + await expect(dateText).toBeInTheDocument(); + }, +}; + +export const ArbitrumOne: Story = { + args: { + chainId: "arbitrum", + title: "Arbitrum TVL", + color: "#28A0F0", + }, +}; diff --git a/packages/ui-react/src/components/defi/tvl-historical-chart.tsx b/packages/ui-react/src/components/defi/tvl-historical-chart.tsx new file mode 100644 index 00000000..f22743f5 --- /dev/null +++ b/packages/ui-react/src/components/defi/tvl-historical-chart.tsx @@ -0,0 +1,127 @@ +import { useQuery } from "@tanstack/react-query"; +import { useMemo } from "react"; +import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"; +import { + type ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#components/shadcn/chart"; +import { Skeleton } from "#components/shadcn/skeleton"; + +type TvlHistoricalChartProps = { + chainId: string; + title?: string; + color?: string; +}; + +export type DefiLlamaTvlDataPoint = { + date: number; + tvl: number; +}; + +const chartConfig = {} satisfies ChartConfig; + +async function getTvlHistoricalChartData( + chainId: string, +): Promise { + const response = await fetch( + `https://api.llama.fi/v2/historicalChainTvl/${chainId}`, + ); + + if (!response.ok) { + throw new Error(`Failed to fetch TVL data: ${response.statusText}`); + } + + const data = await response.json(); + return data as DefiLlamaTvlDataPoint[]; +} + +export function TvlHistoricalChart({ + chainId, + title, + color, +}: TvlHistoricalChartProps) { + const { data, isLoading } = useQuery({ + queryKey: ["tvl-historical-chart", chainId], + queryFn: () => getTvlHistoricalChartData(chainId), + }); + + const formatDate = (timestamp: number) => { + return new Date(timestamp * 1000).toLocaleDateString(); + }; + + const formatTvl = (value: number) => { + if (value >= 1e9) { + return `$${(value / 1e9).toFixed(2)}B`; + } else if (value >= 1e6) { + return `$${(value / 1e6).toFixed(2)}M`; + } else if (value >= 1e3) { + return `$${(value / 1e3).toFixed(2)}K`; + } + return `$${value.toFixed(2)}`; + }; + + const formattedTvlData = useMemo(() => { + if (!data) return []; + + return data + .map((dataPoint) => ({ + date: dataPoint.date, + tvl: dataPoint.tvl, + })) + .sort((a, b) => a.date - b.date); + }, [data]); + + if (isLoading) return ; + + return ( +
+ {title &&
{title}
} + + + + + + { + return ( +
+
TVL: {formatTvl(value as number)}
+
Date: {formatDate(props.payload.date)}
+
+ ); + }} + /> + } + /> + + + +
+ ); +} From 6f56a6b3b582d1f4232d9895147acb269524d577 Mon Sep 17 00:00:00 2001 From: metalboyrick Date: Thu, 24 Apr 2025 16:43:50 +0700 Subject: [PATCH 2/9] chore: rename into chain tvl historical chart --- ...ies.tsx => ChainTvlHistoricalChart.stories.tsx} | 12 ++++++------ ...al-chart.tsx => chain-tvl-historical-chart.tsx} | 14 +++++++------- 2 files changed, 13 insertions(+), 13 deletions(-) rename apps/storybook/src/stories/defi/{TvlHistoricalChart.stories.tsx => ChainTvlHistoricalChart.stories.tsx} (75%) rename packages/ui-react/src/components/defi/{tvl-historical-chart.tsx => chain-tvl-historical-chart.tsx} (90%) diff --git a/apps/storybook/src/stories/defi/TvlHistoricalChart.stories.tsx b/apps/storybook/src/stories/defi/ChainTvlHistoricalChart.stories.tsx similarity index 75% rename from apps/storybook/src/stories/defi/TvlHistoricalChart.stories.tsx rename to apps/storybook/src/stories/defi/ChainTvlHistoricalChart.stories.tsx index af0b7934..3abfd0a8 100644 --- a/apps/storybook/src/stories/defi/TvlHistoricalChart.stories.tsx +++ b/apps/storybook/src/stories/defi/ChainTvlHistoricalChart.stories.tsx @@ -1,17 +1,17 @@ -import { TvlHistoricalChart } from "@geist/ui-react/components/defi/tvl-historical-chart"; +import { ChainTvlHistoricalChart } from "@geist/ui-react/components/defi/chain-tvl-historical-chart"; import type { Meta, StoryObj } from "@storybook/react"; import { expect, userEvent } from "@storybook/test"; import { withQueryClientProvider } from "#stories/decorators/wagmi.tsx"; import { setupCanvas } from "../utils/test-utils"; const meta = { - title: "DeFi/TvlHistoricalChart", - component: TvlHistoricalChart, + title: "DeFi/ChainTvlHistoricalChart", + component: ChainTvlHistoricalChart, parameters: { layout: "centered", }, decorators: [withQueryClientProvider()], -} satisfies Meta; +} satisfies Meta; export default meta; type Story = StoryObj; @@ -22,10 +22,10 @@ export const EthereumMainnet: Story = { title: "Ethereum TVL", color: "#5470FF", }, - play: async ({ canvasElement }) => { + play: async ({ canvasElement }: { canvasElement: HTMLElement }) => { const { canvas } = await setupCanvas(canvasElement, 3000); - const chart = await canvas.findByTestId("tvl-historical-chart"); + const chart = await canvas.findByTestId("chain-tvl-historical-chart"); await expect(chart).toBeInTheDocument(); const title = await canvas.findByText("Ethereum TVL"); diff --git a/packages/ui-react/src/components/defi/tvl-historical-chart.tsx b/packages/ui-react/src/components/defi/chain-tvl-historical-chart.tsx similarity index 90% rename from packages/ui-react/src/components/defi/tvl-historical-chart.tsx rename to packages/ui-react/src/components/defi/chain-tvl-historical-chart.tsx index f22743f5..18ac253d 100644 --- a/packages/ui-react/src/components/defi/tvl-historical-chart.tsx +++ b/packages/ui-react/src/components/defi/chain-tvl-historical-chart.tsx @@ -9,7 +9,7 @@ import { } from "#components/shadcn/chart"; import { Skeleton } from "#components/shadcn/skeleton"; -type TvlHistoricalChartProps = { +type ChainTvlHistoricalChartProps = { chainId: string; title?: string; color?: string; @@ -22,7 +22,7 @@ export type DefiLlamaTvlDataPoint = { const chartConfig = {} satisfies ChartConfig; -async function getTvlHistoricalChartData( +async function getChainTvlHistoricalChartData( chainId: string, ): Promise { const response = await fetch( @@ -37,14 +37,14 @@ async function getTvlHistoricalChartData( return data as DefiLlamaTvlDataPoint[]; } -export function TvlHistoricalChart({ +export function ChainTvlHistoricalChart({ chainId, title, color, -}: TvlHistoricalChartProps) { +}: ChainTvlHistoricalChartProps) { const { data, isLoading } = useQuery({ - queryKey: ["tvl-historical-chart", chainId], - queryFn: () => getTvlHistoricalChartData(chainId), + queryKey: ["chain-tvl-historical-chart", chainId], + queryFn: () => getChainTvlHistoricalChartData(chainId), }); const formatDate = (timestamp: number) => { @@ -78,7 +78,7 @@ export function TvlHistoricalChart({ return (
{title &&
{title}
} Date: Thu, 24 Apr 2025 17:03:12 +0700 Subject: [PATCH 3/9] feat: add protocol tvl historical chart --- .../ProtocolTvlHistoricalChart.stories.tsx | 62 +++++++ .../defi/protocol-tvl-historical-chart.tsx | 175 ++++++++++++++++++ 2 files changed, 237 insertions(+) create mode 100644 apps/storybook/src/stories/defi/ProtocolTvlHistoricalChart.stories.tsx create mode 100644 packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx diff --git a/apps/storybook/src/stories/defi/ProtocolTvlHistoricalChart.stories.tsx b/apps/storybook/src/stories/defi/ProtocolTvlHistoricalChart.stories.tsx new file mode 100644 index 00000000..677362c6 --- /dev/null +++ b/apps/storybook/src/stories/defi/ProtocolTvlHistoricalChart.stories.tsx @@ -0,0 +1,62 @@ +import { ProtocolTvlHistoricalChart } from "@geist/ui-react/components/defi/protocol-tvl-historical-chart"; +import type { Meta, StoryObj } from "@storybook/react"; +import { expect, userEvent } from "@storybook/test"; +import { withQueryClientProvider } from "#stories/decorators/wagmi.tsx"; +import { setupCanvas } from "../utils/test-utils"; + +const meta = { + title: "DeFi/ProtocolTvlHistoricalChart", + component: ProtocolTvlHistoricalChart, + parameters: { + layout: "centered", + }, + decorators: [withQueryClientProvider()], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const AaveProtocol: Story = { + args: { + protocol: "aave", + title: "Aave v2 TVL", + color: "#B6509E", + }, + play: async ({ canvasElement }: { canvasElement: HTMLElement }) => { + const { canvas } = await setupCanvas(canvasElement, 3000); + + const chart = await canvas.findByTestId("protocol-tvl-historical-chart"); + await expect(chart).toBeInTheDocument(); + + const title = await canvas.findByText("Aave v2 TVL"); + await expect(title).toBeInTheDocument(); + + await userEvent.keyboard("{Tab}"); + + const tvlText = await canvas.findByText("TVL", undefined, { + timeout: 3000, + }); + await expect(tvlText).toBeInTheDocument(); + + const dateText = await canvas.findByText("Date", undefined, { + timeout: 3000, + }); + await expect(dateText).toBeInTheDocument(); + }, +}; + +export const UniswapProtocol: Story = { + args: { + protocol: "uniswap", + title: "Uniswap v3 TVL", + color: "#FF007A", + }, +}; + +export const MorphoProtocol: Story = { + args: { + protocol: "morpho", + title: "Morpho TVL", + color: "#00D395", + }, +}; diff --git a/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx b/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx new file mode 100644 index 00000000..7e0108da --- /dev/null +++ b/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx @@ -0,0 +1,175 @@ +import { useQuery } from "@tanstack/react-query"; +import { useMemo } from "react"; +import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"; +import { + type ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#components/shadcn/chart"; +import { Skeleton } from "#components/shadcn/skeleton"; + +type ProtocolTvlHistoricalChartProps = { + protocol: string; + title?: string; + color?: string; +}; + +interface ProtocolTvlDataPoint { + date: number; + totalLiquidityUSD: number; +} + +interface ChainTvlData { + [chainId: string]: ProtocolTvlDataPoint[]; +} + +interface ProtocolData { + chainTvls: ChainTvlData; + tvl: ProtocolTvlDataPoint[]; + [key: string]: unknown; +} + +const chartConfig = {} satisfies ChartConfig; + +async function getProtocolTvlHistoricalChartData( + protocolId: string, +): Promise { + const response = await fetch(`https://api.llama.fi/protocol/${protocolId}`); + + if (!response.ok) { + throw new Error( + `Failed to fetch protocol TVL data: ${response.statusText}`, + ); + } + + const data = (await response.json()) as ProtocolData; + + console.log(data); + + // If chainName is specified, only include data for that chain + if (data.tvl) { + const chainData = data.tvl; + const validPoints = chainData.filter( + (point) => + typeof point === "object" && + "date" in point && + "totalLiquidityUSD" in point, + ); + return validPoints.sort((a, b) => a.date - b.date); + } + + // Otherwise combine all valid chain data into a single dataset + const tvlData: ProtocolTvlDataPoint[] = []; + + Object.values(data.chainTvls).forEach((chainData) => { + // Only include data where the required format is present + if (Array.isArray(chainData) && chainData.length > 0) { + const validPoints = chainData.filter( + (point) => + typeof point === "object" && + "date" in point && + "totalLiquidityUSD" in point, + ); + tvlData.push(...validPoints); + } + }); + + // Sort by date + return tvlData.sort((a, b) => a.date - b.date); +} + +export function ProtocolTvlHistoricalChart({ + protocol: protocolId, + chainName, + title, + color, +}: ProtocolTvlHistoricalChartProps) { + const { data, isLoading } = useQuery({ + queryKey: ["protocol-tvl-historical-chart", protocolId, chainName], + queryFn: () => getProtocolTvlHistoricalChartData(protocolId, chainName), + }); + + const formatDate = (timestamp: number) => { + return new Date(timestamp * 1000).toLocaleDateString(); + }; + + const formatTvl = (value: number) => { + if (value >= 1e9) { + return `$${(value / 1e9).toFixed(2)}B`; + } else if (value >= 1e6) { + return `$${(value / 1e6).toFixed(2)}M`; + } else if (value >= 1e3) { + return `$${(value / 1e3).toFixed(2)}K`; + } + return `$${value.toFixed(2)}`; + }; + + const formattedTvlData = useMemo(() => { + if (!data) return []; + + return data.map((dataPoint) => ({ + date: dataPoint.date, + tvl: dataPoint.totalLiquidityUSD, + })); + }, [data]); + + const displayTitle = useMemo(() => { + if (title) return title; + if (chainName) return `${protocolId} (${chainName})`; + return protocolId; + }, [title, protocolId, chainName]); + + if (isLoading) return ; + + return ( +
+ {displayTitle &&
{displayTitle}
} + + + + + + { + return ( +
+
TVL: {formatTvl(value as number)}
+
Date: {formatDate(props.payload.date)}
+
+ ); + }} + /> + } + /> + + + +
+ ); +} From 3fe7622a34c0fd913ba161609d9b8cf8e56967aa Mon Sep 17 00:00:00 2001 From: metalboyrick Date: Mon, 28 Apr 2025 16:02:05 +0700 Subject: [PATCH 4/9] fix: use domain function to format number --- .../defi/chain-tvl-historical-chart.tsx | 19 +++++++------ .../defi/protocol-tvl-historical-chart.tsx | 27 ++++++++++--------- 2 files changed, 25 insertions(+), 21 deletions(-) diff --git a/packages/ui-react/src/components/defi/chain-tvl-historical-chart.tsx b/packages/ui-react/src/components/defi/chain-tvl-historical-chart.tsx index 18ac253d..b9a1b87f 100644 --- a/packages/ui-react/src/components/defi/chain-tvl-historical-chart.tsx +++ b/packages/ui-react/src/components/defi/chain-tvl-historical-chart.tsx @@ -8,6 +8,7 @@ import { ChartTooltipContent, } from "#components/shadcn/chart"; import { Skeleton } from "#components/shadcn/skeleton"; +import { formatNumberWithLocale } from "@geist/domain/amount"; type ChainTvlHistoricalChartProps = { chainId: string; @@ -52,14 +53,16 @@ export function ChainTvlHistoricalChart({ }; const formatTvl = (value: number) => { - if (value >= 1e9) { - return `$${(value / 1e9).toFixed(2)}B`; - } else if (value >= 1e6) { - return `$${(value / 1e6).toFixed(2)}M`; - } else if (value >= 1e3) { - return `$${(value / 1e3).toFixed(2)}K`; - } - return `$${value.toFixed(2)}`; + return formatNumberWithLocale({ + value, + locale: new Intl.Locale("en-US"), + formatOptions: { + style: "currency", + currency: "USD", + notation: "compact", + compactDisplay: "short", + }, + }); }; const formattedTvlData = useMemo(() => { diff --git a/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx b/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx index 7e0108da..1afb417c 100644 --- a/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx +++ b/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx @@ -8,6 +8,7 @@ import { ChartTooltipContent, } from "#components/shadcn/chart"; import { Skeleton } from "#components/shadcn/skeleton"; +import { formatNumberWithLocale } from "@geist/domain/amount"; type ProtocolTvlHistoricalChartProps = { protocol: string; @@ -81,13 +82,12 @@ async function getProtocolTvlHistoricalChartData( export function ProtocolTvlHistoricalChart({ protocol: protocolId, - chainName, title, color, }: ProtocolTvlHistoricalChartProps) { const { data, isLoading } = useQuery({ - queryKey: ["protocol-tvl-historical-chart", protocolId, chainName], - queryFn: () => getProtocolTvlHistoricalChartData(protocolId, chainName), + queryKey: ["protocol-tvl-historical-chart", protocolId], + queryFn: () => getProtocolTvlHistoricalChartData(protocolId), }); const formatDate = (timestamp: number) => { @@ -95,14 +95,16 @@ export function ProtocolTvlHistoricalChart({ }; const formatTvl = (value: number) => { - if (value >= 1e9) { - return `$${(value / 1e9).toFixed(2)}B`; - } else if (value >= 1e6) { - return `$${(value / 1e6).toFixed(2)}M`; - } else if (value >= 1e3) { - return `$${(value / 1e3).toFixed(2)}K`; - } - return `$${value.toFixed(2)}`; + return formatNumberWithLocale({ + value, + locale: new Intl.Locale("en-US"), + formatOptions: { + style: "currency", + currency: "USD", + notation: "compact", + compactDisplay: "short", + }, + }); }; const formattedTvlData = useMemo(() => { @@ -116,9 +118,8 @@ export function ProtocolTvlHistoricalChart({ const displayTitle = useMemo(() => { if (title) return title; - if (chainName) return `${protocolId} (${chainName})`; return protocolId; - }, [title, protocolId, chainName]); + }, [title, protocolId]); if (isLoading) return ; From 3637f838b4652b7f03b866cf5c85a4781ad56dae Mon Sep 17 00:00:00 2001 From: metalboyrick Date: Mon, 28 Apr 2025 16:02:32 +0700 Subject: [PATCH 5/9] chore: remove logging --- .../src/components/defi/protocol-tvl-historical-chart.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx b/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx index 1afb417c..c937e82e 100644 --- a/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx +++ b/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx @@ -46,8 +46,6 @@ async function getProtocolTvlHistoricalChartData( const data = (await response.json()) as ProtocolData; - console.log(data); - // If chainName is specified, only include data for that chain if (data.tvl) { const chainData = data.tvl; From e3f6ad61bfae68795f5af034e471f674cbe8c6d3 Mon Sep 17 00:00:00 2001 From: metalboyrick Date: Mon, 28 Apr 2025 16:04:19 +0700 Subject: [PATCH 6/9] chore: use explicit naming for callbacks instead of using comments --- .../defi/chain-tvl-historical-chart.tsx | 15 +++++++++------ .../defi/protocol-tvl-historical-chart.tsx | 6 ++++-- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/ui-react/src/components/defi/chain-tvl-historical-chart.tsx b/packages/ui-react/src/components/defi/chain-tvl-historical-chart.tsx index b9a1b87f..3991e77c 100644 --- a/packages/ui-react/src/components/defi/chain-tvl-historical-chart.tsx +++ b/packages/ui-react/src/components/defi/chain-tvl-historical-chart.tsx @@ -68,12 +68,15 @@ export function ChainTvlHistoricalChart({ const formattedTvlData = useMemo(() => { if (!data) return []; - return data - .map((dataPoint) => ({ - date: dataPoint.date, - tvl: dataPoint.tvl, - })) - .sort((a, b) => a.date - b.date); + const mapTvlDataPoint = (dataPoint: DefiLlamaTvlDataPoint) => ({ + date: dataPoint.date, + tvl: dataPoint.tvl, + }); + + const sortByDate = (a: DefiLlamaTvlDataPoint, b: DefiLlamaTvlDataPoint) => + a.date - b.date; + + return data.map(mapTvlDataPoint).sort(sortByDate); }, [data]); if (isLoading) return ; diff --git a/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx b/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx index c937e82e..eb04d9f4 100644 --- a/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx +++ b/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx @@ -74,8 +74,10 @@ async function getProtocolTvlHistoricalChartData( } }); - // Sort by date - return tvlData.sort((a, b) => a.date - b.date); + const sortByDate = (a: ProtocolTvlDataPoint, b: ProtocolTvlDataPoint) => + a.date - b.date; + + return tvlData.sort(sortByDate); } export function ProtocolTvlHistoricalChart({ From de9576faa30907dba2c7366deb455768f7a87848 Mon Sep 17 00:00:00 2001 From: metalboyrick Date: Mon, 28 Apr 2025 16:05:02 +0700 Subject: [PATCH 7/9] chore: rename vars --- .../src/components/defi/protocol-tvl-historical-chart.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx b/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx index eb04d9f4..916702c3 100644 --- a/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx +++ b/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx @@ -116,7 +116,7 @@ export function ProtocolTvlHistoricalChart({ })); }, [data]); - const displayTitle = useMemo(() => { + const displayedTitle = useMemo(() => { if (title) return title; return protocolId; }, [title, protocolId]); @@ -128,7 +128,9 @@ export function ProtocolTvlHistoricalChart({ className="flex flex-col gap-2 items-center" data-testid="protocol-tvl-historical-chart" > - {displayTitle &&
{displayTitle}
} + {displayedTitle && ( +
{displayedTitle}
+ )} Date: Mon, 28 Apr 2025 16:05:32 +0700 Subject: [PATCH 8/9] chore: formatting --- .../ui-react/src/components/defi/chain-tvl-historical-chart.tsx | 2 +- .../src/components/defi/protocol-tvl-historical-chart.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-react/src/components/defi/chain-tvl-historical-chart.tsx b/packages/ui-react/src/components/defi/chain-tvl-historical-chart.tsx index 3991e77c..23b7dd87 100644 --- a/packages/ui-react/src/components/defi/chain-tvl-historical-chart.tsx +++ b/packages/ui-react/src/components/defi/chain-tvl-historical-chart.tsx @@ -1,3 +1,4 @@ +import { formatNumberWithLocale } from "@geist/domain/amount"; import { useQuery } from "@tanstack/react-query"; import { useMemo } from "react"; import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"; @@ -8,7 +9,6 @@ import { ChartTooltipContent, } from "#components/shadcn/chart"; import { Skeleton } from "#components/shadcn/skeleton"; -import { formatNumberWithLocale } from "@geist/domain/amount"; type ChainTvlHistoricalChartProps = { chainId: string; diff --git a/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx b/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx index 916702c3..65a688de 100644 --- a/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx +++ b/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx @@ -1,3 +1,4 @@ +import { formatNumberWithLocale } from "@geist/domain/amount"; import { useQuery } from "@tanstack/react-query"; import { useMemo } from "react"; import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"; @@ -8,7 +9,6 @@ import { ChartTooltipContent, } from "#components/shadcn/chart"; import { Skeleton } from "#components/shadcn/skeleton"; -import { formatNumberWithLocale } from "@geist/domain/amount"; type ProtocolTvlHistoricalChartProps = { protocol: string; From fdd9efd30db667130d12320ffec51356fd7b5c46 Mon Sep 17 00:00:00 2001 From: metalboyrick Date: Mon, 28 Apr 2025 16:08:21 +0700 Subject: [PATCH 9/9] chore: use recharts default color for charts as fallback --- .../ui-react/src/components/defi/chain-tvl-historical-chart.tsx | 2 +- .../src/components/defi/protocol-tvl-historical-chart.tsx | 2 +- .../ui-react/src/components/token/yield-historical-chart.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/ui-react/src/components/defi/chain-tvl-historical-chart.tsx b/packages/ui-react/src/components/defi/chain-tvl-historical-chart.tsx index 23b7dd87..73523ad9 100644 --- a/packages/ui-react/src/components/defi/chain-tvl-historical-chart.tsx +++ b/packages/ui-react/src/components/defi/chain-tvl-historical-chart.tsx @@ -123,7 +123,7 @@ export function ChainTvlHistoricalChart({ type="monotone" dataKey="tvl" strokeWidth={2} - stroke={color ?? "#2563eb"} + stroke={color} dot={false} /> diff --git a/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx b/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx index 65a688de..1eba3039 100644 --- a/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx +++ b/packages/ui-react/src/components/defi/protocol-tvl-historical-chart.tsx @@ -168,7 +168,7 @@ export function ProtocolTvlHistoricalChart({ type="monotone" dataKey="tvl" strokeWidth={2} - stroke={color ?? "#2563eb"} + stroke={color} dot={false} /> diff --git a/packages/ui-react/src/components/token/yield-historical-chart.tsx b/packages/ui-react/src/components/token/yield-historical-chart.tsx index 73ed46f8..37a20788 100644 --- a/packages/ui-react/src/components/token/yield-historical-chart.tsx +++ b/packages/ui-react/src/components/token/yield-historical-chart.tsx @@ -109,7 +109,7 @@ export function YieldHistoricalChart({ type="monotone" dataKey="apy" strokeWidth={2} - stroke={color ?? "#2563eb"} + stroke={color} dot={false} />