From 6399d114e7dbbb2fcedbc435c39e0c62457e4bde Mon Sep 17 00:00:00 2001
From: Baophan00 <109447498+Baophan00@users.noreply.github.com>
Date: Mon, 14 Sep 2026 13:11:36 +0700
Subject: [PATCH] fix(AccountBlobs): add error handling and loading state for
 blob fetching
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The async getAccountBlobs call had no error handling — if the API
failed, the promise rejection was unhandled and the user saw no
feedback. This adds:
- try/catch around the API call with error state
- Loading state while fetching
- Cleanup on unmount to avoid state updates after cancellation
- Proper error message display in the UI

Co-Authored-By: Hermes Agent <noreply@nousresearch.com>
---
 .../components/AccountBlobs.tsx               | 49 +++++++++++++++----
 1 file changed, 39 insertions(+), 10 deletions(-)

diff --git a/apps/cross-chain-accounts/components/AccountBlobs.tsx b/apps/cross-chain-accounts/components/AccountBlobs.tsx
index 6baa24d..6a6c041 100644
--- a/apps/cross-chain-accounts/components/AccountBlobs.tsx
+++ b/apps/cross-chain-accounts/components/AccountBlobs.tsx
@@ -11,23 +11,42 @@ interface AccountBlobsProps {
 export const AccountBlobs = ({ refreshTrigger }: AccountBlobsProps) => {
   const { account } = useWallet();
   const [blobs, setBlobs] = useState<BlobMetadata[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     if (!account) {
       setBlobs([]);
+      setError(null);
       return;
     }
-    const getBlobs = async (): Promise<BlobMetadata[]> => {
-      const blobs = await getShelbyClient().coordination.getAccountBlobs({
-        account: account.address,
-      });
-      return blobs;
+
+    let cancelled = false;
+    const getBlobs = async (): Promise<void> => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const fetched = await getShelbyClient().coordination.getAccountBlobs({
+          account: account.address,
+        });
+        if (!cancelled) setBlobs(fetched);
+      } catch (err) {
+        if (!cancelled) {
+          const message =
+            err instanceof Error ? err.message : "Failed to fetch blobs";
+          setError(message);
+          setBlobs([]);
+        }
+      } finally {
+        if (!cancelled) setIsLoading(false);
+      }
     };
 
-    getBlobs().then((blobs) => {
-      setBlobs(blobs);
-      refreshTrigger;
-    });
+    getBlobs();
+
+    return () => {
+      cancelled = true;
+    };
   }, [account, refreshTrigger]);
 
   const extractFileName = (blobName: string): string => {
@@ -49,7 +68,17 @@ export const AccountBlobs = ({ refreshTrigger }: AccountBlobsProps) => {
           </p>
         </div>
       )}
-      {account && blobs.length === 0 && (
+      {account && isLoading && (
+        <div className="text-center py-8">
+          <p className="text-gray-500 dark:text-gray-400">Loading blobs...</p>
+        </div>
+      )}
+      {account && error && !isLoading && (
+        <div className="text-center py-8">
+          <p className="text-red-500 dark:text-red-400">{error}</p>
+        </div>
+      )}
+      {account && !isLoading && !error && blobs.length === 0 && (
         <div className="text-center py-8">
           <p className="text-gray-500 dark:text-gray-400">
             No blobs found for this account. Upload a file to get started!