Skip to content

Commit 3e0dcb9

Browse files
author
dschlabach
committed
Merge branch 'dms/playground-wallet-refactor' into dms/linking
2 parents 5c2f5cf + d6ad283 commit 3e0dcb9

File tree

2 files changed

+48
-36
lines changed

2 files changed

+48
-36
lines changed

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

+6-31
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,11 @@ import {
1313
import { OnchainKitProvider } from '@coinbase/onchainkit';
1414
import type React from 'react';
1515
import { createContext, useEffect, useState } from 'react';
16-
import { useConnect, useConnectors } from 'wagmi';
1716
import { base } from 'wagmi/chains';
18-
import { WalletPreference } from './form/wallet-type';
1917

2018
type State = {
2119
activeComponent?: OnchainKitComponent;
2220
setActiveComponent?: (component: OnchainKitComponent) => void;
23-
walletType?: WalletPreference;
24-
setWalletType?: (walletType: WalletPreference) => void;
25-
clearWalletType?: () => void;
2621
chainId?: number;
2722
defaultMaxSlippage?: number;
2823
setDefaultMaxSlippage?: (defaultMaxSlippage: number) => void;
@@ -59,9 +54,6 @@ const defaultState: State = {
5954
export const AppContext = createContext(defaultState);
6055

6156
export const AppProvider = ({ children }: { children: React.ReactNode }) => {
62-
const { connect } = useConnect();
63-
const connectors = useConnectors();
64-
6557
const [activeComponent, setActiveComponent] =
6658
useStateWithStorage<OnchainKitComponent>({
6759
key: 'activeComponent',
@@ -79,12 +71,12 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
7971
defaultValue: defaultState.componentMode,
8072
});
8173

82-
const [walletType, setWalletType] = useStateWithStorage<
83-
WalletPreference | undefined
84-
>({
85-
key: 'walletType',
86-
defaultValue: undefined,
87-
});
74+
// const [walletType, setWalletType] = useStateWithStorage<
75+
// WalletPreference | undefined
76+
// >({
77+
// key: 'walletType',
78+
// defaultValue: undefined,
79+
// });
8880

8981
const [chainId, setChainId] = useStateWithStorage<number>({
9082
key: 'chainId',
@@ -140,20 +132,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
140132
}
141133
}, []);
142134

143-
// Connect to wallet if walletType changes
144-
useEffect(() => {
145-
if (walletType === WalletPreference.SMART_WALLET) {
146-
connect({ connector: connectors[0] });
147-
} else if (walletType === WalletPreference.EOA) {
148-
connect({ connector: connectors[1] });
149-
}
150-
}, [connect, connectors, walletType]);
151-
152-
function clearWalletType() {
153-
localStorage.setItem('walletType', '');
154-
setWalletType(undefined);
155-
}
156-
157135
const setPaymaster = (chainId: number, url: string, enabled: boolean) => {
158136
const newObj = {
159137
...paymasters,
@@ -168,9 +146,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
168146
value={{
169147
activeComponent,
170148
setActiveComponent,
171-
walletType,
172-
setWalletType,
173-
clearWalletType,
174149
chainId,
175150
setChainId,
176151
componentTheme,

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

+42-5
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,52 @@
11
import { Label } from '@/components/ui/label';
22
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
33
import { getSlicedAddress } from '@/lib/utils';
4-
import { useContext } from 'react';
5-
import { useAccount, useConnectors, useDisconnect } from 'wagmi';
6-
import { AppContext } from '../AppProvider';
4+
import { useEffect, useState } from 'react';
5+
import { useAccount, useConnect, useConnectors, useDisconnect } from 'wagmi';
6+
import type { GetConnectorsReturnType } from 'wagmi/actions';
77

88
export enum WalletPreference {
99
SMART_WALLET = 'smartWalletOnly',
1010
EOA = 'eoaOnly',
1111
}
1212

13+
function getConnector(
14+
walletType: WalletPreference,
15+
connectors: GetConnectorsReturnType,
16+
) {
17+
if (walletType === WalletPreference.SMART_WALLET) {
18+
return connectors[0];
19+
}
20+
return connectors[1];
21+
}
22+
1323
export function WalletType() {
14-
const { walletType, setWalletType, clearWalletType } = useContext(AppContext);
1524
const { disconnectAsync } = useDisconnect();
1625
const connectors = useConnectors();
1726
const account = useAccount();
27+
const { connect } = useConnect();
28+
29+
const [walletType, setWalletType] = useState<WalletPreference>();
30+
31+
// Set localStorage ONLY when user has connected
32+
// otherwise, could result in walletType being set to smart wallet when user intended to connect eoa wallet
33+
useEffect(() => {
34+
if (walletType && account.address) {
35+
localStorage.setItem('walletType', walletType);
36+
}
37+
}, [walletType, account.address]);
38+
39+
useEffect(() => {
40+
const storedWalletType = localStorage.getItem('walletType');
41+
if (storedWalletType) {
42+
setWalletType(storedWalletType as WalletPreference);
43+
}
44+
}, []);
45+
46+
async function clearWalletType() {
47+
localStorage.removeItem('walletType');
48+
setWalletType(undefined);
49+
}
1850

1951
async function disconnectAll() {
2052
await disconnectAsync({ connector: connectors[0] });
@@ -29,7 +61,12 @@ export function WalletType() {
2961
id="wallet-type"
3062
value={walletType}
3163
className="flex items-center justify-between"
32-
onValueChange={(value) => setWalletType?.(value as WalletPreference)}
64+
onValueChange={(value) => {
65+
setWalletType(value as WalletPreference);
66+
connect({
67+
connector: getConnector(value as WalletPreference, connectors),
68+
});
69+
}}
3370
>
3471
<div className="flex items-center gap-2">
3572
<Label

0 commit comments

Comments
 (0)