fix: defer wallet state until client mount

Author: 0xjojo1

app/auth-layout.tsx

@@ -2,8 +2,19 @@
 
 import { UnauthorizedPanel } from '@/components/UnauthorizedPanel';
 import { useAccount } from 'wagmi';
+import { useEffect, useState } from 'react';
 
 export default function AuthLayout({ children }: { children: React.ReactNode }) {
   const { address } = useAccount();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return <UnauthorizedPanel />;
+  }
+
   return <>{address ? children : <UnauthorizedPanel />}</>;
 }

components/Sidebar/SafeWalletSelect.tsx

@@ -16,12 +16,18 @@ import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui
 import { getNetworkIcon } from '@/components/BlockChainNetworkIcon';
 import { useAccount, useChainId } from 'wagmi';
 import { useSafeAccount } from '@/features/safe-sdk/hooks/use-safe-account';
+import { useEffect, useState } from 'react';
 
 export function SafeWalletSelect() {
   const { safeAccountAddresses, selectedSafeAccountAddress, setSelectedSafeAccountAddress } = useSafeAccount();
   const { address } = useAccount();
   const chainId = useChainId();
   const router = useRouter();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   const handleSafeSelect = (safeAddress: string) => {
     setSelectedSafeAccountAddress(safeAddress);
@@ -78,7 +84,7 @@ export function SafeWalletSelect() {
   };
 
   // Hardware wallet not connected state
-  if (!address) {
+  if (!mounted || !address) {
     return (
       <SidebarMenu>
         <SidebarMenuItem>

features/safe-sdk/providers/safe-sdk-provider.tsx

@@ -20,24 +20,30 @@ export function SafeSdkProvider({ children }: { children: ReactNode }) {
   const { address } = useAccount();
   const { data: walletClient } = useWalletClient();
   const chainId = useChainId();
+  const [mounted, setMounted] = useState(false);
 
-  const isConnected = !!address;
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const isConnected = mounted && !!address;
 
   const safeApiService = useMemo(() => {
-    if (isConnected && chainId) {
+    if (mounted && isConnected && chainId) {
       return new SafeApiService({
         chainId: chainId as number,
         apiKey: process.env.NEXT_PUBLIC_SAFE_GLOBAL_API_KEY || '',
       });
     }
     return null;
-  }, [isConnected, chainId]);
+  }, [mounted, isConnected, chainId]);
 
   const [safeClient, setSafeClient] = useState<SafeClient | null>(null);
   const [safeAccountAddresses, setSafeAccountAddresses] = useState<string[]>([]);
   const [selectedSafeAccountAddress, setSelectedSafeAccountAddress] = useState<string | null>(null);
 
   useEffect(() => {
+    if (!mounted) return;
     if (safeApiService && address) {
       safeApiService.getSafesByOwner(address).then((response) => {
         const safes = response.safes || [];
@@ -51,15 +57,16 @@ export function SafeSdkProvider({ children }: { children: ReactNode }) {
     } else {
       cleanSafeContext();
     }
-  }, [safeApiService, address]);
+  }, [mounted, safeApiService, address]);
 
   useEffect(() => {
+    if (!mounted) return;
     if (selectedSafeAccountAddress) {
       createSafeClientByExistSafeAccount();
     } else {
       setSafeClient(null);
     }
-  }, [selectedSafeAccountAddress]);
+  }, [mounted, selectedSafeAccountAddress]);
 
   const createSafeClientByExistSafeAccount = async () => {
     try {