nit

covalenthq · May 14, 2024 · 392a0ad · 392a0ad
1 parent fa4c8b0
commit 392a0ad
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 133 deletions.
diff --git 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<LatestTransactionsProps> = ({
 }) => {
     const { covalentClient } = useGoldRush();
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
-    const [maybeResult, setResult] = useState<Option<Transaction[]>>(None);
+    const [maybeResult, setMaybeResult] =
+        useState<Option<Transaction[] | null>>(None);
 
     useEffect(() => {
         (async () => {
-            setResult(None);
+            setMaybeResult(None);
             setErrorMessage(null);
             try {
                 const { data: blockData, ...blockError } =
@@ -55,8 +62,10 @@ export const LatestTransactions: React.FC<LatestTransactionsProps> = ({
                     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<LatestTransactionsProps> = ({
                 ))}
             </>
         ),
-        Some: (txs) =>
+        Some: (result) =>
             errorMessage ? (
                 <p className="col-span-5">{errorMessage}</p>
-            ) : (
-                txs.map((tx) => (
+            ) : result ? (
+                result.map((tx) => (
                     <Card
                         key={tx.tx_hash}
                         className="flex w-full flex-col rounded border border-secondary-light p-2 dark:border-secondary-dark dark:bg-background-dark dark:text-white"
@@ -135,6 +144,8 @@ export const LatestTransactions: React.FC<LatestTransactionsProps> = ({
                         )}
                     </Card>
                 ))
+            ) : (
+                <></>
             ),
     });
 };
diff --git a/src/components/Molecules/TransactionReceipt/TransactionReceipt.tsx b/src/components/Molecules/TransactionReceipt/TransactionReceipt.tsx
@@ -11,18 +11,21 @@ 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<TransactionReceiptProps> = ({
     chain_name,
     tx_hash,
 }) => {
     const { apikey, chains } = useGoldRush();
 
-    const [maybeResult, setResult] =
+    const [maybeResult, setMaybeResult] =
         useState<Option<DecodedTransactionType | null>>(None);
     const [relativeTime, setRelativeTime] = useState<boolean>(false);
-
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
     const CHAIN = useMemo<ChainItem | null>(() => {
@@ -32,7 +35,7 @@ export const TransactionReceipt: React.FC<TransactionReceiptProps> = ({
     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<TransactionReceiptProps> = ({
                 );
                 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<TransactionReceiptProps> = ({
                         </>
                     ),
                     Some: (result) =>
-                        result?.tx_metadata && result?.events ? (
+                        errorMessage ? (
+                            <p>{errorMessage}</p>
+                        ) : result?.tx_metadata && result?.events ? (
                             <>
                                 <div className="flex flex-col gap-y-1">
                                     <CardDescription>