diff --git a/playground/nextjs-app-router/components/AppProvider.tsx b/playground/nextjs-app-router/components/AppProvider.tsx index c25383b26e..a25e28f9fb 100644 --- a/playground/nextjs-app-router/components/AppProvider.tsx +++ b/playground/nextjs-app-router/components/AppProvider.tsx @@ -12,16 +12,14 @@ 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; + // walletType?: WalletPreference; + // setWalletType?: (walletType: WalletPreference) => void; + // clearWalletType?: () => void; chainId?: number; defaultMaxSlippage?: number; setDefaultMaxSlippage?: (defaultMaxSlippage: number) => void; @@ -58,12 +56,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(); - const [walletType, setWalletTypeState] = useState(); + const [chainId, setChainIdState] = useState(); const [transactionType, setTransactionTypeState] = useState( TransactionTypes.Contracts, @@ -90,7 +85,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 +101,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,14 +127,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]); // Update localStorage whenever the state changes function setActiveComponent(component: OnchainKitComponent) { @@ -151,16 +134,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => { 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 +198,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => { value={{ activeComponent, setActiveComponent, - walletType, - setWalletType, - clearWalletType, chainId, setChainId, componentTheme, diff --git a/playground/nextjs-app-router/components/form/wallet-type.tsx b/playground/nextjs-app-router/components/form/wallet-type.tsx index 27f4a54151..e9578ef070 100644 --- a/playground/nextjs-app-router/components/form/wallet-type.tsx +++ b/playground/nextjs-app-router/components/form/wallet-type.tsx @@ -1,9 +1,8 @@ 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'; export enum WalletPreference { SMART_WALLET = 'smartWalletOnly', @@ -11,10 +10,27 @@ export enum WalletPreference { } export function WalletType() { - const { walletType, setWalletType, clearWalletType } = useContext(AppContext); + // const { walletType, setWalletType, clearWalletType } = useContext(AppContext); const { disconnectAsync } = useDisconnect(); const connectors = useConnectors(); const account = useAccount(); + const { connect } = useConnect(); + + const [walletType, setWalletType] = useState(); + + // 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]); + + async function clearWalletType() { + localStorage.removeItem('walletType'); + setWalletType?.(undefined); + } async function disconnectAll() { await disconnectAsync({ connector: connectors[0] });