Merge branch 'dms/playground-wallet-refactor' into dms/linking

Author: dschlabach

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

@@ -13,16 +13,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;
@@ -59,9 +54,6 @@ const defaultState: State = {
 export const AppContext = createContext(defaultState);
 
 export const AppProvider = ({ children }: { children: React.ReactNode }) => {
-  const { connect } = useConnect();
-  const connectors = useConnectors();
-
   const [activeComponent, setActiveComponent] =
     useStateWithStorage<OnchainKitComponent>({
       key: 'activeComponent',
@@ -79,12 +71,12 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     defaultValue: defaultState.componentMode,
   });
 
-  const [walletType, setWalletType] = useStateWithStorage<
-    WalletPreference | undefined
-  >({
-    key: 'walletType',
-    defaultValue: undefined,
-  });
+  // const [walletType, setWalletType] = useStateWithStorage<
+  //   WalletPreference | undefined
+  // >({
+  //   key: 'walletType',
+  //   defaultValue: undefined,
+  // });
 
   const [chainId, setChainId] = useStateWithStorage<number>({
     key: 'chainId',
@@ -140,20 +132,6 @@ 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]);
-
-  function clearWalletType() {
-    localStorage.setItem('walletType', '');
-    setWalletType(undefined);
-  }
-
   const setPaymaster = (chainId: number, url: string, enabled: boolean) => {
     const newObj = {
       ...paymasters,
@@ -168,9 +146,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,52 @@
 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',
 }
 
+function 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>();
+
+  // Set localStorage ONLY when user has connected
+  // otherwise, could result in walletType being set to smart wallet when user intended to connect eoa wallet
+  useEffect(() => {
+    if (walletType && account.address) {
+      localStorage.setItem('walletType', walletType);
+    }
+  }, [walletType, account.address]);
+
+  useEffect(() => {
+    const storedWalletType = localStorage.getItem('walletType');
+    if (storedWalletType) {
+      setWalletType(storedWalletType as WalletPreference);
+    }
+  }, []);
+
+  async function clearWalletType() {
+    localStorage.removeItem('walletType');
+    setWalletType(undefined);
+  }
 
   async function disconnectAll() {
     await disconnectAsync({ connector: connectors[0] });
@@ -29,7 +61,12 @@ export function WalletType() {
         id="wallet-type"
         value={walletType}
         className="flex items-center justify-between"
-        onValueChange={(value) => setWalletType?.(value as WalletPreference)}
+        onValueChange={(value) => {
+          setWalletType(value as WalletPreference);
+          connect({
+            connector: getConnector(value as WalletPreference, connectors),
+          });
+        }}
       >
         <div className="flex items-center gap-2">
           <Label