Merge pull request #183 from MeshJS/bug/loading-issue

Bug/loading issue

Author: QSchlegel

src/components/common/button.tsx

@@ -1,18 +1,9 @@
 import { Button as ShadcnButton } from "@/components/ui/button";
 import { Loader } from "lucide-react";
-import { useState } from "react";
+import { useState, forwardRef } from "react";
+import type { ButtonProps as ShadcnButtonProps } from "@/components/ui/button";
 
-export default function Button({
-  children,
-  onClick,
-  disabled = false,
-  loading,
-  className,
-  variant,
-  size,
-  asChild,
-  hold,
-}: {
+export interface ButtonProps {
   children: React.ReactNode;
   onClick?: () => void;
   disabled?: boolean;
@@ -30,12 +21,26 @@ export default function Button({
   size?: "default" | "sm" | "lg" | "icon" | null | undefined;
   asChild?: boolean | undefined;
   hold?: number;
-}) {
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps & ShadcnButtonProps>(function Button({
+  children,
+  onClick,
+  disabled = false,
+  loading,
+  className,
+  variant,
+  size,
+  asChild,
+  hold,
+  ...props
+}, ref) {
   const [holding, setHolding] = useState<boolean>(false);
   const [curTime, setCurTime] = useState<number>(0);
 
   return (
     <ShadcnButton
+      ref={ref}
       variant={variant}
       onClick={hold === undefined ? onClick : undefined}
       disabled={disabled}
@@ -61,6 +66,7 @@ export default function Button({
             }
           : undefined
       }
+      {...props}
     >
       {loading && <Loader className="h-4 w-4 animate-spin mr-2" />}
       {children}
@@ -69,4 +75,6 @@ export default function Button({
         ` (Hold for ${Math.round((hold - (Date.now() - curTime)) / 1000)} secs)`}
     </ShadcnButton>
   );
-}
+});
+
+export default Button;

src/components/common/overall-layout/mobile-wrappers/wallet-data-loader-wrapper.tsx

@@ -173,11 +173,14 @@ export default function WalletDataLoaderWrapper({
       );
       if (!drepInfo) throw new Error(`No dRep for ID ${drepids.cip105} found.`);
       setDrepInfo(drepInfo);
-    } catch (err) {
+    } catch (err: any) {
       // DRep not found (404) is expected if DRep hasn't been registered yet
       // This is normal behavior - the DRep ID exists but isn't registered on-chain
+      const is404 = err?.response?.status === 404 || err?.data?.status_code === 404;
+      if (!is404) {
+        console.error(`Error fetching DRep info:`, err);
+      }
       setDrepInfo(undefined);
-      console.log(`DRep not yet registered on-chain (this is normal before registration)`);
     }
   }
 
@@ -194,15 +197,13 @@ export default function WalletDataLoaderWrapper({
 
         // Fetch all proxy data in parallel using the new batch function
         if (proxies.length > 0) {
-          console.log(`WalletDataLoaderWrapper: Fetching data for ${proxies.length} proxies in parallel`);
           await fetchAllProxyData(
             appWallet.id, 
             proxies, 
             appWallet.scriptCbor, 
             network.toString(),
             false // Use cache to avoid duplicate requests
           );
-          console.log("WalletDataLoaderWrapper: Successfully fetched all proxy data");
         }
       } catch (error) {
         console.error("WalletDataLoaderWrapper: Error fetching proxy data:", error);

src/components/pages/homepage/governance/drep/id/index.tsx

@@ -58,14 +58,21 @@ export default function DrepDetailPage() {
         metadata = await blockchainProvider.get(
           `/governance/dreps/${drepId}/metadata/`,
         );
-      } catch {
-        console.warn(`No metadata found for DRep ${drepId}`);
+      } catch (err: any) {
+        // 404 is expected if metadata doesn't exist - silently ignore
+        const is404 = err?.response?.status === 404 || err?.data?.status_code === 404;
+        if (!is404) {
+          console.warn("No metadata found for DRep %s:", drepId, err);
+        }
       }
 
       setDrepInfo(details || null);
       setDrepMetadata(metadata || null);
-    } catch (error) {
-      console.error(`Failed to fetch DRep ${drepId} details:`, error);
+    } catch (error: any) {
+      const is404 = error?.response?.status === 404 || error?.data?.status_code === 404;
+      if (!is404) {
+        console.error("Failed to fetch DRep %s details:", drepId, error);
+      }
     } finally {
       setLoading(false);
     }

src/components/pages/homepage/governance/drep/index.tsx

@@ -13,7 +13,7 @@ import ScriptIndicator from "./scriptIndicator";
 
 export default function DrepOverviewPage() {
   const [drepList, setDrepList] = useState<
-    Array<{ details: BlockfrostDrepInfo; metadata: BlockfrostDrepMetadata }>
+    Array<{ details: BlockfrostDrepInfo; metadata: BlockfrostDrepMetadata | null }>
   >([]);
   const [loading, setLoading] = useState<boolean>(true);
   const { wallet, connected } = useWallet();
@@ -54,7 +54,7 @@ export default function DrepOverviewPage() {
         if (response) {
           const initialList = response.map((drep: BlockfrostDrepInfo) => ({
             details: { ...drep },
-            metadata: {},
+            metadata: null,
           }));
 
           setDrepList(initialList);
@@ -85,17 +85,30 @@ export default function DrepOverviewPage() {
       const details: BlockfrostDrepInfo = await blockchainProvider.get(
         `/governance/dreps/${drepId}`,
       );
-      const metadata: BlockfrostDrepMetadata = await blockchainProvider.get(
-        `/governance/dreps/${drepId}/metadata/`,
-      );
+      
+      let metadata: BlockfrostDrepMetadata | null = null;
+      try {
+        metadata = await blockchainProvider.get(
+          `/governance/dreps/${drepId}/metadata/`,
+        );
+      } catch (err: any) {
+        // 404 is expected if metadata doesn't exist - silently ignore
+        const is404 = err?.response?.status === 404 || err?.data?.status_code === 404;
+        if (!is404) {
+          console.warn(`Failed to fetch metadata for DRep ${drepId}:`, err);
+        }
+      }
 
       setDrepList((prevList) =>
         prevList.map((drep) =>
-          drep.details.drep_id === drepId ? { details, metadata } : drep,
+          drep.details.drep_id === drepId ? { details, metadata: metadata || null } : drep,
         ),
       );
-    } catch (error) {
-      console.error(`Failed to fetch details for DREP ${drepId}:`, error);
+    } catch (error: any) {
+      const is404 = error?.response?.status === 404 || error?.data?.status_code === 404;
+      if (!is404) {
+        console.error(`Failed to fetch details for DREP ${drepId}:`, error);
+      }
     }
   };
 

src/components/pages/homepage/wallets/index.tsx

@@ -82,10 +82,6 @@ export default function PageWallets() {
               .map((wallet) => {
                 const walletBalance = balances[wallet.id] ?? null;
                 const walletLoadingState = loadingStates[wallet.id] ?? "idle";
-                // Debug log
-                if (process.env.NODE_ENV === "development") {
-                  console.log(`Wallet ${wallet.id}: balance=${walletBalance}, loadingState=${walletLoadingState}`);
-                }
                 return (
                   <CardWallet
                     key={wallet.id}

src/components/pages/wallet/governance/proposal/voteButtton.tsx

@@ -32,7 +32,7 @@ import {
 } from "@/components/ui/dialog";
 import type { BallotType } from "../ballot/ballot";
 import { useBallotModal } from "@/hooks/useBallotModal";
-import { Plus, Info, Lock, FileText, CheckCircle2, ClipboardList } from "lucide-react";
+import { Plus, Info, Lock, FileText, CheckCircle2, Vote } from "lucide-react";
 import { ProposalDetails } from "@/types/governance";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
@@ -343,7 +343,7 @@ export default function VoteButton({
   }
 
   return (
-    <div className="flex w-full max-w-sm flex-col items-stretch justify-center space-y-2 sm:space-y-3">
+    <div className="flex w-full flex-col items-stretch justify-center space-y-2 sm:space-y-3">
       {!isProposalActive ? (
         // Inactive proposal state
         <div className="flex flex-col items-center gap-2">
@@ -429,15 +429,15 @@ export default function VoteButton({
               >
                 {isOnAnyBallot ? (
                   <>
-                    <ClipboardList className="h-4 w-4" />
+                    <Vote className="h-4 w-4" />
                     {ballotCount > 0 && (
                       <span className="absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center text-[10px] font-semibold bg-green-500 dark:bg-green-600 text-white rounded-full border-2 border-white dark:border-gray-800">
                         {ballotCount}
                       </span>
                     )}
                   </>
                 ) : (
-                  <ClipboardList className="h-4 w-4" />
+                  <Vote className="h-4 w-4" />
                 )}
               </Button>
             </TooltipTrigger>