Skip to content

Commit eea6f06

Browse files
author
dschlabach
committed
remove useEffect
1 parent d6ad283 commit eea6f06

File tree

3 files changed

+113
-13
lines changed

3 files changed

+113
-13
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { IsSponsored } from './form/is-sponsored';
99
import { NFTOptions } from './form/nft-options';
1010
import { SwapConfig } from './form/swap-config';
1111
import { TransactionOptions } from './form/transaction-options';
12-
import { WalletType } from './form/wallet-type';
12+
import { WalletType } from './form/WalletType';
1313

1414
const COMMON_OPTIONS = [
1515
ActiveComponent,
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import { Label } from '@/components/ui/label';
2+
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
3+
import { getSlicedAddress } from '@/lib/utils';
4+
import { useEffect, useState } from 'react';
5+
import { useAccount, useConnect, useConnectors, useDisconnect } from 'wagmi';
6+
import { WalletPreference, getConnector } from './wallet-type';
7+
8+
export function WalletType() {
9+
const { disconnectAsync } = useDisconnect();
10+
const connectors = useConnectors();
11+
const account = useAccount();
12+
const { connect } = useConnect();
13+
14+
const [walletType, setWalletType] = useState<WalletPreference>();
15+
16+
useEffect(() => {
17+
const storedWalletType = localStorage.getItem('walletType');
18+
if (storedWalletType) {
19+
setWalletType(storedWalletType as WalletPreference);
20+
}
21+
}, []);
22+
23+
async function handleConnect(value: WalletPreference) {
24+
setWalletType(value);
25+
connect(
26+
{
27+
connector: getConnector(value as WalletPreference, connectors),
28+
},
29+
{
30+
// Set localStorage ONLY when user has connected
31+
// otherwise, could result in walletType being set to smart wallet when user intended to connect eoa wallet
32+
onSuccess: () => {
33+
localStorage.setItem('walletType', value);
34+
},
35+
},
36+
);
37+
}
38+
39+
async function clearWalletType() {
40+
localStorage.removeItem('walletType');
41+
setWalletType(undefined);
42+
}
43+
44+
async function disconnectAll() {
45+
await disconnectAsync({ connector: connectors[0] });
46+
await disconnectAsync({ connector: connectors[1] });
47+
clearWalletType?.();
48+
}
49+
50+
return (
51+
<div className="grid gap-2">
52+
<Label htmlFor="wallet-type">Wallet Type</Label>
53+
<RadioGroup
54+
id="wallet-type"
55+
value={walletType}
56+
className="flex items-center justify-between"
57+
onValueChange={(value) => {
58+
handleConnect(value as WalletPreference);
59+
}}
60+
>
61+
<div className="flex items-center gap-2">
62+
<Label
63+
htmlFor="wallet-type-smart"
64+
className="flex cursor-pointer items-center gap-2 rounded-md border p-2 [&:has(:checked)]:bg-muted"
65+
>
66+
<RadioGroupItem
67+
id="wallet-type-smart"
68+
value={WalletPreference.SMART_WALLET}
69+
/>
70+
Smart Wallet
71+
</Label>
72+
<Label
73+
htmlFor="wallet-type-eoa"
74+
className="flex cursor-pointer items-center gap-2 rounded-md border p-2 [&:has(:checked)]:bg-muted"
75+
>
76+
<RadioGroupItem id="wallet-type-eoa" value={WalletPreference.EOA} />
77+
EOA
78+
</Label>
79+
</div>
80+
<button
81+
type="button"
82+
className="text-xs hover:underline"
83+
onClick={disconnectAll}
84+
>
85+
Disconnect all
86+
</button>
87+
</RadioGroup>
88+
<div className="text-neutral-500 text-xs">
89+
{account?.address
90+
? `Connected: ${getSlicedAddress(account.address)}`
91+
: 'Click a type to connect'}
92+
</div>
93+
</div>
94+
);
95+
}

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

+17-12
Original file line numberDiff line numberDiff line change
@@ -28,21 +28,29 @@ export function WalletType() {
2828

2929
const [walletType, setWalletType] = useState<WalletPreference>();
3030

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-
3931
useEffect(() => {
4032
const storedWalletType = localStorage.getItem('walletType');
4133
if (storedWalletType) {
4234
setWalletType(storedWalletType as WalletPreference);
4335
}
4436
}, []);
4537

38+
async function handleConnect(value: WalletPreference) {
39+
setWalletType(value);
40+
connect(
41+
{
42+
connector: getConnector(value as WalletPreference, connectors),
43+
},
44+
{
45+
// Set localStorage ONLY when user has connected
46+
// otherwise, could result in walletType being set to smart wallet when user intended to connect eoa wallet
47+
onSuccess: () => {
48+
localStorage.setItem('walletType', value);
49+
},
50+
},
51+
);
52+
}
53+
4654
async function clearWalletType() {
4755
localStorage.removeItem('walletType');
4856
setWalletType(undefined);
@@ -62,10 +70,7 @@ export function WalletType() {
6270
value={walletType}
6371
className="flex items-center justify-between"
6472
onValueChange={(value) => {
65-
setWalletType(value as WalletPreference);
66-
connect({
67-
connector: getConnector(value as WalletPreference, connectors),
68-
});
73+
handleConnect(value as WalletPreference);
6974
}}
7075
>
7176
<div className="flex items-center gap-2">

0 commit comments

Comments
 (0)