From 392a0ad1011f1a636fe8ff445cf8bedbd2353fce Mon Sep 17 00:00:00 2001 From: Yashvardhan Jagnani Date: Tue, 14 May 2024 23:34:42 +0530 Subject: [PATCH] nit --- .../LatestTransactions/LatestTransactions.tsx | 29 ++- .../TransactionReceipt/TransactionReceipt.tsx | 27 +- .../Molecules/XYKTimeseries/XYKTimeseries.tsx | 236 ++++++++++-------- src/utils/types/molecules.types.ts | 4 +- 4 files changed, 163 insertions(+), 133 deletions(-) diff --git a/src/components/Molecules/LatestTransactions/LatestTransactions.tsx b/src/components/Molecules/LatestTransactions/LatestTransactions.tsx index 9f3d5134..40fb7724 100644 --- a/src/components/Molecules/LatestTransactions/LatestTransactions.tsx +++ b/src/components/Molecules/LatestTransactions/LatestTransactions.tsx @@ -3,12 +3,18 @@ import { CardDetail } from "@/components/Shared"; import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; import { Skeleton } from "@/components/ui/skeleton"; -import { GRK_SIZES } from "@/utils/constants/shared.constants"; +import { + GRK_SIZES, + defaultErrorMessage, +} from "@/utils/constants/shared.constants"; import { timestampParser } from "@/utils/functions"; import { None, Some, type Option } from "@/utils/option"; import { useGoldRush } from "@/utils/store"; import { type LatestTransactionsProps } from "@/utils/types/molecules.types"; -import { type CardDetailProps } from "@/utils/types/shared.types"; +import { + type CovalentAPIError, + type CardDetailProps, +} from "@/utils/types/shared.types"; import { type Transaction } from "@covalenthq/client-sdk"; import { ExternalLinkIcon } from "@radix-ui/react-icons"; import { useEffect, useState } from "react"; @@ -20,11 +26,12 @@ export const LatestTransactions: React.FC = ({ }) => { const { covalentClient } = useGoldRush(); const [errorMessage, setErrorMessage] = useState(null); - const [maybeResult, setResult] = useState>(None); + const [maybeResult, setMaybeResult] = + useState>(None); useEffect(() => { (async () => { - setResult(None); + setMaybeResult(None); setErrorMessage(null); try { const { data: blockData, ...blockError } = @@ -55,8 +62,10 @@ export const LatestTransactions: React.FC = ({ setErrorMessage(txError.error_message); throw txError; } - setResult(new Some(txData.items.slice(-limit))); - } catch (error) { + setMaybeResult(new Some(txData.items.slice(-limit))); + } catch (error: CovalentAPIError | any) { + setErrorMessage(error?.error_message ?? defaultErrorMessage); + setMaybeResult(new Some(null)); console.error(error); } })(); @@ -70,11 +79,11 @@ export const LatestTransactions: React.FC = ({ ))} ), - Some: (txs) => + Some: (result) => errorMessage ? (

{errorMessage}

- ) : ( - txs.map((tx) => ( + ) : result ? ( + result.map((tx) => ( = ({ )} )) + ) : ( + <> ), }); }; diff --git a/src/components/Molecules/TransactionReceipt/TransactionReceipt.tsx b/src/components/Molecules/TransactionReceipt/TransactionReceipt.tsx index 1cef4bd1..567bc436 100644 --- a/src/components/Molecules/TransactionReceipt/TransactionReceipt.tsx +++ b/src/components/Molecules/TransactionReceipt/TransactionReceipt.tsx @@ -11,7 +11,11 @@ import { calculatePrettyBalance, type ChainItem } from "@covalenthq/client-sdk"; import { useGoldRush } from "@/utils/store"; import { ClockIcon } from "@radix-ui/react-icons"; import { Skeleton } from "@/components/ui/skeleton"; -import { GRK_SIZES } from "@/utils/constants/shared.constants"; +import { + GRK_SIZES, + defaultErrorMessage, +} from "@/utils/constants/shared.constants"; +import { type CovalentAPIError } from "@/utils/types/shared.types"; export const TransactionReceipt: React.FC = ({ chain_name, @@ -19,10 +23,9 @@ export const TransactionReceipt: React.FC = ({ }) => { const { apikey, chains } = useGoldRush(); - const [maybeResult, setResult] = + const [maybeResult, setMaybeResult] = useState>(None); const [relativeTime, setRelativeTime] = useState(false); - const [errorMessage, setErrorMessage] = useState(null); const CHAIN = useMemo(() => { @@ -32,7 +35,7 @@ export const TransactionReceipt: React.FC = ({ useEffect(() => { (async () => { try { - setResult(None); + setMaybeResult(None); setErrorMessage(null); const response = await fetch( "https://goldrush-decoder.vercel.app/api/v1/tx/decode", @@ -50,13 +53,13 @@ export const TransactionReceipt: React.FC = ({ ); const data = (await response.json()) as DecodedTransactionType; if (!data.success) { - setErrorMessage(data.message as string); - throw Error(data.message); + throw { error_message: data.message }; } - setResult(new Some(data)); - } catch (exception) { - console.error(exception); - setResult(new Some(null)); + setMaybeResult(new Some(data)); + } catch (error: CovalentAPIError | any) { + setErrorMessage(error?.error_message ?? defaultErrorMessage); + setMaybeResult(new Some(null)); + console.error(error); } })(); }, [chain_name, tx_hash]); @@ -139,7 +142,9 @@ export const TransactionReceipt: React.FC = ({ ), Some: (result) => - result?.tx_metadata && result?.events ? ( + errorMessage ? ( +

{errorMessage}

+ ) : result?.tx_metadata && result?.events ? ( <>
diff --git a/src/components/Molecules/XYKTimeseries/XYKTimeseries.tsx b/src/components/Molecules/XYKTimeseries/XYKTimeseries.tsx index 9d7eb2c6..c740281b 100644 --- a/src/components/Molecules/XYKTimeseries/XYKTimeseries.tsx +++ b/src/components/Molecules/XYKTimeseries/XYKTimeseries.tsx @@ -9,6 +9,7 @@ import { CHART_COLORS, GRK_SIZES, PERIOD, + defaultErrorMessage, } from "@/utils/constants/shared.constants"; import { useGoldRush } from "@/utils/store"; import { type XYKTimeseriesProps } from "@/utils/types/molecules.types"; @@ -18,145 +19,115 @@ import { type UniswapLikeEcosystemCharts, } from "@covalenthq/client-sdk"; import { capitalizeFirstLetter } from "@/utils/functions/capitalize"; +import { type CovalentAPIError } from "@/utils/types/shared.types"; export const XYKTimeseries: React.FC = ({ chain_name, dex_name, - overview_data, - displayMetrics = "both", + maybeResult: initialMaybeResult = null, + errorMessage: initialErrorMessage = null, }) => { - const [maybeResult, setResult] = - useState>(None); + const { covalentClient, theme } = useGoldRush(); + const [maybeResult, setMaybeResult] = + useState>(None); const [chartData, setChartData] = useState>(None); const [period, setPeriod] = useState(PERIOD.DAYS_7); - const [timeseries, setTimeseries] = useState( - displayMetrics !== "both" ? displayMetrics : "liquidity" + const [errorMessage, setErrorMessage] = useState(null); + const [activeChart, setActiveChart] = useState<"liquidity" | "volume">( + "liquidity" ); - const { covalentClient, theme } = useGoldRush(); + + useEffect(() => { + if (initialErrorMessage) { + setErrorMessage(initialErrorMessage); + } + }, [initialErrorMessage]); + + useEffect(() => { + if (initialMaybeResult) { + setMaybeResult(initialMaybeResult); + } + }, [initialMaybeResult]); useEffect(() => { maybeResult.match({ None: () => null, Some: (response) => { - const chart_key = `${timeseries}_chart_${period}d`; - const value_key = - timeseries === "price" - ? "price_of_token0_in_token1" - : `${timeseries}_quote`; - const result = ( - response[ - chart_key as keyof typeof response - ] as UniswapLikeEcosystemCharts["liquidity_chart_7d"] - ).map((x) => { - const dt = timestampParser(x.dt, "DD MMM YY"); - return { - date: dt, - [`${capitalizeFirstLetter(timeseries)} (USD)`]: - x[value_key as keyof LiquidityEcosystemChart], - }; - }); - setChartData(new Some(result)); + if (response) { + const chart_key = `${activeChart}_chart_${period}d`; + const value_key = `${activeChart}_quote`; + const result = ( + response[ + chart_key as keyof typeof response + ] as UniswapLikeEcosystemCharts["liquidity_chart_7d"] + ).map((x) => { + const dt = timestampParser(x.dt, "DD MMM YY"); + return { + date: dt, + [`${capitalizeFirstLetter(activeChart)} (USD)`]: + x[value_key as keyof LiquidityEcosystemChart], + }; + }); + setChartData(new Some(result)); + } }, }); - }, [maybeResult, period, timeseries, displayMetrics]); + }, [maybeResult, period, activeChart]); useEffect(() => { - if (overview_data) { - setResult(new Some(overview_data)); - return; - } (async () => { - setResult(None); - const response = - await covalentClient.XykService.getEcosystemChartData( - chain_name, - dex_name - ); - setResult(new Some(response.data.items[0])); - })(); - }, [overview_data, dex_name, chain_name, displayMetrics]); - - useEffect(() => { - if (displayMetrics === "both") return; - setTimeseries(displayMetrics); - }, [displayMetrics]); - - const body = chartData.match({ - None: () => { - return ( -
- -
- ); - }, - Some: (result) => { - if (timeseries === "liquidity") { - return ( - - ); + if (!initialMaybeResult) { + try { + setMaybeResult(None); + setErrorMessage(null); + const response = + await covalentClient.XykService.getEcosystemChartData( + chain_name, + dex_name + ); + setMaybeResult(new Some(response.data.items[0])); + } catch (error: CovalentAPIError | any) { + setErrorMessage( + error?.error_message ?? defaultErrorMessage + ); + setMaybeResult(new Some(null)); + console.error(error); + } } - return ( -
- -
- ); - }, - }); + })(); + }, [initialMaybeResult, dex_name, chain_name]); return (
- {`${capitalizeFirstLetter(timeseries)} (USD)`} + {`${capitalizeFirstLetter(activeChart)} (USD)`}
- {displayMetrics === "both" && ( -
- - -
- )} +
+ + +
+
- {body} + {chartData.match({ + None: () => { + return ( +
+ +
+ ); + }, + Some: (result) => { + if (errorMessage) { + return

{errorMessage}

; + } + + if (activeChart === "liquidity") { + return ( + + ); + } else if (activeChart === "volume") { + return ( + + ); + } + }, + })}
); }; diff --git a/src/utils/types/molecules.types.ts b/src/utils/types/molecules.types.ts index e14f6eba..c13446a0 100644 --- a/src/utils/types/molecules.types.ts +++ b/src/utils/types/molecules.types.ts @@ -199,8 +199,8 @@ export interface XYKTokenPoolListProps { export interface XYKTimeseriesProps { chain_name: Chain; dex_name: string; - overview_data?: UniswapLikeEcosystemCharts; - displayMetrics?: "both" | "liquidity" | "volume"; + maybeResult?: Option | null; + errorMessage?: string | null; } export interface XYKTokenTimeseriesProps {