corrected error if wallet connection is skipped

Author: ehsan6sha

apps/box/src/components/WalletNotification.tsx

@@ -4,6 +4,7 @@ import { useWalletConnection } from '../hooks/useWalletConnection';
 import { useWalletNetwork } from '../hooks/useWalletNetwork';
 import { useContractIntegration } from '../hooks/useContractIntegration';
 import { useSDK } from '@metamask/sdk-react';
+import { useUserProfileStore } from '../stores/useUserProfileStore';
 
 export type WalletNotificationType = 'connect' | 'network' | 'hidden';
 
@@ -30,13 +31,17 @@ export const WalletNotification: React.FC<WalletNotificationProps> = ({
   } = useWalletNetwork();
   const { initializeContracts, isInitializing } = useContractIntegration();
   const { account } = useSDK();
+  const manualSignatureWalletAddress = useUserProfileStore((state) => state.manualSignatureWalletAddress);
   const [isLoading, setIsLoading] = useState(false);
   const [showAfterDelay, setShowAfterDelay] = useState(false);
   const [postLoadingDelay, setPostLoadingDelay] = useState(false);
 
+  // Determine if we have any account (MetaMask or manual signature)
+  const hasAnyAccount = connected && account || manualSignatureWalletAddress;
+
   // Add delay before showing connect wallet notification to prevent flicker
   useEffect(() => {
-    if (!connected || !account) {
+    if (!hasAnyAccount) {
       // Start timer to show connect notification after delay
       const timer = setTimeout(() => {
         setShowAfterDelay(true);
@@ -47,7 +52,7 @@ export const WalletNotification: React.FC<WalletNotificationProps> = ({
       // Wallet is connected, show immediately
       setShowAfterDelay(true);
     }
-  }, [connected, account]);
+  }, [hasAnyAccount]);
 
   // Don't show notification during contract initialization to prevent flicker
   const isContractInitializing = isInitializing || false;
@@ -73,14 +78,22 @@ export const WalletNotification: React.FC<WalletNotificationProps> = ({
 
   // Determine what type of notification to show
   const getNotificationType = (): WalletNotificationType => {
-    if (!connected || !account) {
-      // Only show connect notification after delay
-      return showAfterDelay ? 'connect' : 'hidden';
+    // If MetaMask is connected, check network
+    if (connected && account) {
+      if (!isOnCorrectNetwork) {
+        return 'network';
+      }
+      return 'hidden';
     }
-    if (!isOnCorrectNetwork) {
-      return 'network';
+    
+    // If MetaMask is not connected but we have a stored wallet address, don't show connect notification
+    // (user is using manual signature, so MetaMask connection is optional)
+    if (manualSignatureWalletAddress) {
+      return 'hidden';
     }
-    return 'hidden';
+    
+    // No account at all, show connect notification after delay
+    return showAfterDelay ? 'connect' : 'hidden';
   };
 
   const notificationType = getNotificationType();

apps/box/src/hooks/useAccountWithFallback.ts

@@ -0,0 +1,28 @@
+import { useSDK } from '@metamask/sdk-react';
+import { useUserProfileStore } from '../stores/useUserProfileStore';
+
+/**
+ * Hook that provides account with fallback logic:
+ * 1. If MetaMask is connected, use the MetaMask account
+ * 2. If MetaMask is not connected but user signed manually, use the stored wallet address
+ * 3. Otherwise, return null
+ */
+export const useAccountWithFallback = () => {
+  const { account: metamaskAccount, connected } = useSDK();
+  const manualSignatureWalletAddress = useUserProfileStore(
+    (state) => state.manualSignatureWalletAddress
+  );
+
+  // Return MetaMask account if connected
+  if (connected && metamaskAccount) {
+    return metamaskAccount;
+  }
+
+  // Fallback to manually signed wallet address if available
+  if (manualSignatureWalletAddress) {
+    return manualSignatureWalletAddress;
+  }
+
+  // No account available
+  return null;
+};

apps/box/src/hooks/useContractIntegration.ts

@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 import { useSDK } from '@metamask/sdk-react';
 import { useToast } from '@functionland/component-library';
 import { useSettingsStore } from '../stores/useSettingsStore';
+import { useUserProfileStore } from '../stores/useUserProfileStore';
 import { useWalletNetwork } from './useWalletNetwork';
 import { getContractService, ContractService, resetContractService } from '../contracts/contractService';
 import { SupportedChain } from '../contracts/types';
@@ -57,8 +58,12 @@ export const useContractIntegration = (options?: { showConnectedNotification?: b
   const { isOnCorrectNetwork } = useWalletNetwork();
   const selectedChain = useSettingsStore((state) => state.selectedChain);
   const setSelectedChain = useSettingsStore((state) => state.setSelectedChain);
+  const manualSignatureWalletAddress = useUserProfileStore((state) => state.manualSignatureWalletAddress);
   const initializedChainRef = useRef<SupportedChain | null>(null);
   const showConnectedNotification = options?.showConnectedNotification ?? false;
+  
+  // Use MetaMask account if available, otherwise fallback to manually signed wallet address
+  const effectiveAccount = account || manualSignatureWalletAddress;
 
   const [state, setState] = useState<ContractIntegrationState>({
     isInitialized: false,
@@ -75,10 +80,10 @@ export const useContractIntegration = (options?: { showConnectedNotification?: b
   const lastInitAttemptRef = useRef<number>(0);
 
   const initializeContracts = useCallback(async (chain: SupportedChain, options: { allowNetworkSwitch?: boolean } = {}) => {
-    console.log('initializeContracts called for chain:', chain, 'provider:', !!provider, 'account:', account);
+    console.log('initializeContracts called for chain:', chain, 'provider:', !!provider, 'account:', account, 'effectiveAccount:', effectiveAccount);
 
-    if (!provider || !account) {
-      console.log('Missing provider or account, cannot initialize contracts');
+    if (!provider || !effectiveAccount) {
+      console.log('Missing provider or effective account, cannot initialize contracts');
       setState(prev => ({
         ...prev,
         isInitialized: false,
@@ -339,15 +344,16 @@ export const useContractIntegration = (options?: { showConnectedNotification?: b
   useEffect(() => {
     console.log('Contract integration useEffect triggered:', {
       account: !!account,
+      effectiveAccount: !!effectiveAccount,
       provider: !!provider,
       selectedChain,
       isInitialized: state.isInitialized,
       isInitializing: state.isInitializing
     });
 
-    // Clear state when wallet disconnects
-    if (!account || !provider) {
-      console.log('Clearing contract state - no account or provider');
+    // Clear state when wallet disconnects (both MetaMask and manual signature)
+    if (!effectiveAccount || !provider) {
+      console.log('Clearing contract state - no effective account or provider');
       setState({
         isInitialized: false,
         isInitializing: false,
@@ -383,6 +389,7 @@ export const useContractIntegration = (options?: { showConnectedNotification?: b
     }
 
     // Check if we should show the switch button (same logic as WalletNotification)
+    // Only check if MetaMask is connected (not for manual signature fallback)
     const shouldShowSwitchButton = account && provider && selectedChain && !isOnCorrectNetwork;
 
     // If switch button should be shown, DO NOT perform any contract operations
@@ -407,7 +414,7 @@ export const useContractIntegration = (options?: { showConnectedNotification?: b
     }
 
     // Only attempt initialization when wallet is connected AND on correct network
-    const needsInitialization = account && provider && selectedChain && isOnCorrectNetwork && !state.isInitializing && !state.isInitialized && initializedChainRef.current !== selectedChain;
+    const needsInitialization = effectiveAccount && provider && selectedChain && isOnCorrectNetwork && !state.isInitializing && !state.isInitialized && initializedChainRef.current !== selectedChain;
 
     if (needsInitialization) {
       console.log('Wallet is connected and on correct network - attempting automatic contract initialization for chain:', selectedChain);
@@ -454,7 +461,7 @@ export const useContractIntegration = (options?: { showConnectedNotification?: b
           });
       }, 1500); // 1500ms debounce to allow network state sync
     }
-  }, [account, provider, selectedChain, isOnCorrectNetwork, state.isInitialized, state.isInitializing]);
+  }, [account, effectiveAccount, provider, selectedChain, isOnCorrectNetwork, state.isInitialized, state.isInitializing]);
 
   // Cleanup timeout on unmount
   useEffect(() => {

apps/box/src/hooks/useWalletNetwork.ts

@@ -58,10 +58,11 @@ export const useWalletNetwork = () => {
       return isCorrect;
     } catch (error: any) {
       console.error('Network check failed:', error);
+      const errorMessage = error?.message || (typeof error === 'string' ? error : 'Network check failed');
       setState(prev => ({
         ...prev,
         isCheckingNetwork: false,
-        networkError: error.message,
+        networkError: errorMessage,
         lastNetworkCheck: Date.now(),
       }));
       return false;

apps/box/src/stores/useUserProfileStore.ts

@@ -474,7 +474,8 @@ getEarnings: async (account?: string) => {
                   throw new Error('Internet is not connected.');
                 }
               } catch (error) {
-                console.error('Network check failed:', error.message);
+                const errorMessage = error instanceof Error ? error.message : (typeof error === 'string' ? error : 'Network check failed');
+                console.error('Network check failed:', errorMessage);
                 set({ bloxConnectionStatus: 'NO INTERNET' });
                 return false;
               }