init

Author: dschlabach

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<OnchainKitComponent>();
-  const [walletType, setWalletTypeState] = useState<WalletPreference>();
+
   const [chainId, setChainIdState] = useState<number>();
   const [transactionType, setTransactionTypeState] = useState<TransactionTypes>(
     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,31 +127,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 +198,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,36 @@
 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',
   EOA = 'eoaOnly',
 }
 
 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<WalletPreference>();
+
+  // 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] });