fix: prevent smart wallet popup from being blocked in edge case (#1646)

Co-authored-by: dschlabach <daniel.schlabach@coinbase.com>

Author: dschlabach

playground/nextjs-app-router/components/AppProvider.tsx

@@ -12,16 +12,11 @@ import {
 import { OnchainKitProvider } from '@coinbase/onchainkit';
 import type React from 'react';
 import { createContext, useEffect, useState } from 'react';
-import { useConnect, useConnectors } from 'wagmi';
 import { base } from 'wagmi/chains';
-import { WalletPreference } from './form/wallet-type';
 
 type State = {
   activeComponent?: OnchainKitComponent;
   setActiveComponent?: (component: OnchainKitComponent) => void;
-  walletType?: WalletPreference;
-  setWalletType?: (walletType: WalletPreference) => void;
-  clearWalletType?: () => void;
   chainId?: number;
   defaultMaxSlippage?: number;
   setDefaultMaxSlippage?: (defaultMaxSlippage: number) => void;
@@ -58,12 +53,9 @@ const defaultState: State = {
 export const AppContext = createContext(defaultState);
 
 export const AppProvider = ({ children }: { children: React.ReactNode }) => {
-  const { connect } = useConnect();
-  const connectors = useConnectors();
-
   const [activeComponent, setActiveComponentState] =
     useState<OnchainKitComponent>();
-  const [walletType, setWalletTypeState] = useState<WalletPreference>();
+
   const [chainId, setChainIdState] = useState<number>();
   const [transactionType, setTransactionTypeState] = useState<TransactionTypes>(
     TransactionTypes.Contracts,
@@ -90,7 +82,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
   // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: TODO Refactor this component
   useEffect(() => {
     const storedActiveComponent = localStorage.getItem('activeComponent');
-    const storedWalletType = localStorage.getItem('walletType');
     const storedChainId = localStorage.getItem('chainId');
     const storedPaymasters = localStorage.getItem('paymasters');
     const storedTransactionType = localStorage.getItem('transactionType');
@@ -107,9 +98,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     if (storedActiveComponent) {
       setActiveComponent(storedActiveComponent as OnchainKitComponent);
     }
-    if (storedWalletType) {
-      setWalletType(storedWalletType as WalletPreference);
-    }
     if (storedChainId) {
       setChainIdState(Number.parseInt(storedChainId));
     }
@@ -136,31 +124,13 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     }
   }, []);
 
-  // Connect to wallet if walletType changes
-  useEffect(() => {
-    if (walletType === WalletPreference.SMART_WALLET) {
-      connect({ connector: connectors[0] });
-    } else if (walletType === WalletPreference.EOA) {
-      connect({ connector: connectors[1] });
-    }
-  }, [connect, connectors, walletType]);
   // Update localStorage whenever the state changes
 
   function setActiveComponent(component: OnchainKitComponent) {
     localStorage.setItem('activeComponent', component.toString());
     setActiveComponentState(component);
   }
 
-  function setWalletType(newWalletType: WalletPreference) {
-    localStorage.setItem('walletType', newWalletType.toString());
-    setWalletTypeState(newWalletType);
-  }
-
-  function clearWalletType() {
-    localStorage.setItem('walletType', '');
-    setWalletTypeState(undefined);
-  }
-
   const setChainId = (newChainId: number) => {
     localStorage.setItem('chainId', newChainId.toString());
     setChainIdState(newChainId);
@@ -225,9 +195,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
       value={{
         activeComponent,
         setActiveComponent,
-        walletType,
-        setWalletType,
-        clearWalletType,
         chainId,
         setChainId,
         componentTheme,

playground/nextjs-app-router/components/form/wallet-type.tsx

@@ -1,20 +1,61 @@
 import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { getSlicedAddress } from '@/lib/utils';
-import { useContext } from 'react';
-import { useAccount, useConnectors, useDisconnect } from 'wagmi';
-import { AppContext } from '../AppProvider';
+import { useEffect, useState } from 'react';
+import { useAccount, useConnect, useConnectors, useDisconnect } from 'wagmi';
+import type { GetConnectorsReturnType } from 'wagmi/actions';
 
 export enum WalletPreference {
   SMART_WALLET = 'smartWalletOnly',
   EOA = 'eoaOnly',
 }
 
+const getConnector = (
+  walletType: WalletPreference,
+  connectors: GetConnectorsReturnType,
+) => {
+  if (walletType === WalletPreference.SMART_WALLET) {
+    return connectors[0];
+  }
+  return connectors[1];
+};
+
 export function WalletType() {
-  const { walletType, setWalletType, clearWalletType } = useContext(AppContext);
   const { disconnectAsync } = useDisconnect();
   const connectors = useConnectors();
   const account = useAccount();
+  const { connect } = useConnect();
+
+  const [walletType, setWalletType] = useState<WalletPreference>();
+
+  useEffect(() => {
+    const storedWalletType = localStorage.getItem('walletType');
+    if (storedWalletType) {
+      setWalletType(storedWalletType as WalletPreference);
+    }
+  }, []);
+
+  async function handleConnect(value: WalletPreference) {
+    console.log('value:', value);
+    setWalletType(value);
+    connect(
+      {
+        connector: getConnector(value as WalletPreference, connectors),
+      },
+      {
+        // Set localStorage ONLY when user has connected
+        // otherwise, could result in walletType being set to smart wallet when user intended to connect eoa wallet
+        onSuccess: () => {
+          localStorage.setItem('walletType', value);
+        },
+      },
+    );
+  }
+
+  async function clearWalletType() {
+    localStorage.removeItem('walletType');
+    setWalletType(undefined);
+  }
 
   async function disconnectAll() {
     await disconnectAsync({ connector: connectors[0] });
@@ -29,7 +70,7 @@ export function WalletType() {
         id="wallet-type"
         value={walletType}
         className="flex items-center justify-between"
-        onValueChange={(value) => setWalletType?.(value as WalletPreference)}
+        onValueChange={handleConnect}
       >
         <div className="flex items-center gap-2">
           <Label