Skip to content

Commit 766712c

Browse files
dschlabachdschlabach
and
dschlabach
authored
fix: prevent smart wallet popup from being blocked in edge case (#1646)
Co-authored-by: dschlabach <daniel.schlabach@coinbase.com>
1 parent 880c6cc commit 766712c

File tree

2 files changed

+47
-39
lines changed

2 files changed

+47
-39
lines changed

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

+1-34
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,11 @@ import {
1212
import { OnchainKitProvider } from '@coinbase/onchainkit';
1313
import type React from 'react';
1414
import { createContext, useEffect, useState } from 'react';
15-
import { useConnect, useConnectors } from 'wagmi';
1615
import { base } from 'wagmi/chains';
17-
import { WalletPreference } from './form/wallet-type';
1816

1917
type State = {
2018
activeComponent?: OnchainKitComponent;
2119
setActiveComponent?: (component: OnchainKitComponent) => void;
22-
walletType?: WalletPreference;
23-
setWalletType?: (walletType: WalletPreference) => void;
24-
clearWalletType?: () => void;
2520
chainId?: number;
2621
defaultMaxSlippage?: number;
2722
setDefaultMaxSlippage?: (defaultMaxSlippage: number) => void;
@@ -58,12 +53,9 @@ const defaultState: State = {
5853
export const AppContext = createContext(defaultState);
5954

6055
export const AppProvider = ({ children }: { children: React.ReactNode }) => {
61-
const { connect } = useConnect();
62-
const connectors = useConnectors();
63-
6456
const [activeComponent, setActiveComponentState] =
6557
useState<OnchainKitComponent>();
66-
const [walletType, setWalletTypeState] = useState<WalletPreference>();
58+
6759
const [chainId, setChainIdState] = useState<number>();
6860
const [transactionType, setTransactionTypeState] = useState<TransactionTypes>(
6961
TransactionTypes.Contracts,
@@ -90,7 +82,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
9082
// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: TODO Refactor this component
9183
useEffect(() => {
9284
const storedActiveComponent = localStorage.getItem('activeComponent');
93-
const storedWalletType = localStorage.getItem('walletType');
9485
const storedChainId = localStorage.getItem('chainId');
9586
const storedPaymasters = localStorage.getItem('paymasters');
9687
const storedTransactionType = localStorage.getItem('transactionType');
@@ -107,9 +98,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
10798
if (storedActiveComponent) {
10899
setActiveComponent(storedActiveComponent as OnchainKitComponent);
109100
}
110-
if (storedWalletType) {
111-
setWalletType(storedWalletType as WalletPreference);
112-
}
113101
if (storedChainId) {
114102
setChainIdState(Number.parseInt(storedChainId));
115103
}
@@ -136,31 +124,13 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
136124
}
137125
}, []);
138126

139-
// Connect to wallet if walletType changes
140-
useEffect(() => {
141-
if (walletType === WalletPreference.SMART_WALLET) {
142-
connect({ connector: connectors[0] });
143-
} else if (walletType === WalletPreference.EOA) {
144-
connect({ connector: connectors[1] });
145-
}
146-
}, [connect, connectors, walletType]);
147127
// Update localStorage whenever the state changes
148128

149129
function setActiveComponent(component: OnchainKitComponent) {
150130
localStorage.setItem('activeComponent', component.toString());
151131
setActiveComponentState(component);
152132
}
153133

154-
function setWalletType(newWalletType: WalletPreference) {
155-
localStorage.setItem('walletType', newWalletType.toString());
156-
setWalletTypeState(newWalletType);
157-
}
158-
159-
function clearWalletType() {
160-
localStorage.setItem('walletType', '');
161-
setWalletTypeState(undefined);
162-
}
163-
164134
const setChainId = (newChainId: number) => {
165135
localStorage.setItem('chainId', newChainId.toString());
166136
setChainIdState(newChainId);
@@ -225,9 +195,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
225195
value={{
226196
activeComponent,
227197
setActiveComponent,
228-
walletType,
229-
setWalletType,
230-
clearWalletType,
231198
chainId,
232199
setChainId,
233200
componentTheme,

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

+46-5
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,61 @@
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+
const 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+
useEffect(() => {
32+
const storedWalletType = localStorage.getItem('walletType');
33+
if (storedWalletType) {
34+
setWalletType(storedWalletType as WalletPreference);
35+
}
36+
}, []);
37+
38+
async function handleConnect(value: WalletPreference) {
39+
console.log('value:', value);
40+
setWalletType(value);
41+
connect(
42+
{
43+
connector: getConnector(value as WalletPreference, connectors),
44+
},
45+
{
46+
// Set localStorage ONLY when user has connected
47+
// otherwise, could result in walletType being set to smart wallet when user intended to connect eoa wallet
48+
onSuccess: () => {
49+
localStorage.setItem('walletType', value);
50+
},
51+
},
52+
);
53+
}
54+
55+
async function clearWalletType() {
56+
localStorage.removeItem('walletType');
57+
setWalletType(undefined);
58+
}
1859

1960
async function disconnectAll() {
2061
await disconnectAsync({ connector: connectors[0] });
@@ -29,7 +70,7 @@ export function WalletType() {
2970
id="wallet-type"
3071
value={walletType}
3172
className="flex items-center justify-between"
32-
onValueChange={(value) => setWalletType?.(value as WalletPreference)}
73+
onValueChange={handleConnect}
3374
>
3475
<div className="flex items-center gap-2">
3576
<Label

0 commit comments

Comments
 (0)