Skip to content

Commit 5d3b395

Browse files
committed
[React] Feature: Can hide certain wallets in the wallet switcher (#4582)
Adds the ability to hide certain wallets in the wallet switcher ```tsx <ConnectButton client={client} detailsModal={{ // We hide the in-app wallet so they can't switch to it hiddenWallets: ["inApp"], }} accountAbstraction={{ chain: baseSepolia, sponsorGas: true, }} /> ``` <!-- start pr-codex --> --- ## PR-Codex overview The focus of this PR is to add the ability to hide specific wallets in the wallet switcher UI component. ### Detailed summary - Added `hiddenWallets` prop to `ConnectButton`, `DetailsModal`, `WalletSwitcherConnectionScreen`, `BuyScreen`, and `PayEmbed` components. - Implemented filtering of connected wallets based on `hiddenWallets` in `WalletManagerScreen` and `WalletSwitcherDrawerContent`. - Updated types to include `WalletId` for consistency across components. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent 5301571 commit 5d3b395

File tree

10 files changed

+87
-33
lines changed

10 files changed

+87
-33
lines changed

.changeset/perfect-poems-scream.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
"thirdweb": patch
3+
---
4+
5+
Adds the ability to hide certain wallets in the wallet switcher
6+
7+
```tsx
8+
<ConnectButton
9+
client={client}
10+
detailsModal={{
11+
// We hide the in-app wallet so they can't switch to it
12+
hiddenWallets: ["inApp"],
13+
}}
14+
accountAbstraction={{
15+
chain: baseSepolia,
16+
sponsorGas: true,
17+
}}
18+
/>
19+
```

apps/playground-web/src/components/account-abstraction/connect-smart-account.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ export function ConnectSmartAccountPreview() {
1818
return (
1919
<div className="flex flex-col">
2020
<StyledConnectButton
21+
detailsModal={{
22+
// We hide the in-app wallet so they can't switch to it
23+
hiddenWallets: ["inApp"],
24+
}}
2125
accountAbstraction={{
2226
chain: baseSepolia,
2327
sponsorGas: true,

packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import type { Prettify } from "../../../../utils/type-utils.js";
88
import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
99
import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
1010
import type { AppMetadata } from "../../../../wallets/types.js";
11+
import type { WalletId } from "../../../../wallets/wallet-types.js";
1112
import type { NetworkSelectorProps } from "../../../web/ui/ConnectWallet/NetworkSelector.js";
1213
import type { WelcomeScreen } from "../../../web/ui/ConnectWallet/screens/types.js";
1314
import type { LocaleId } from "../../../web/ui/types.js";
@@ -312,6 +313,11 @@ export type ConnectButton_detailsModalOptions = {
312313
* By default the "Buy Funds" button is shown.
313314
*/
314315
hideBuyFunds?: boolean;
316+
317+
/**
318+
* All wallet IDs included in this array will be hidden from wallet selection when connected.
319+
*/
320+
hiddenWallets?: WalletId[];
315321
};
316322

317323
/**

packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -544,6 +544,7 @@ function ConnectButtonInner(
544544
showAllWallets: props.showAllWallets,
545545
walletConnect: props.walletConnect,
546546
wallets: props.wallets,
547+
hiddenWallets: props.detailsModal?.hiddenWallets,
547548
}}
548549
/>
549550
);

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { formatNumber } from "../../../../utils/formatNumber.js";
1919
import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
2020
import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
2121
import type { AppMetadata } from "../../../../wallets/types.js";
22+
import type { WalletId } from "../../../../wallets/wallet-types.js";
2223
import {
2324
CustomThemeProvider,
2425
parseTheme,
@@ -744,6 +745,7 @@ function DetailsModal(props: {
744745
chain={props.connectOptions?.chain}
745746
chains={props.connectOptions?.chains}
746747
client={client}
748+
hiddenWallets={props.connectOptions?.hiddenWallets}
747749
connectLocale={locale}
748750
recommendedWallets={props.connectOptions?.recommendedWallets}
749751
showAllWallets={!!props.connectOptions?.showAllWallets}
@@ -924,6 +926,7 @@ function DetailsModal(props: {
924926
mode: "fund_wallet",
925927
}
926928
}
929+
hiddenWallets={props.detailsModal?.hiddenWallets}
927930
theme={typeof props.theme === "string" ? props.theme : props.theme.type}
928931
onDone={closeModal}
929932
connectOptions={undefined}
@@ -1156,6 +1159,7 @@ export type DetailsModalConnectOptions = {
11561159
chain?: Chain;
11571160
chains?: Chain[];
11581161
recommendedWallets?: Wallet[];
1162+
hiddenWallets?: WalletId[];
11591163
showAllWallets?: boolean;
11601164
};
11611165

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import type { BuyWithFiatStatus } from "../../../../../../pay/buyWithFiat/getSta
1010
import { isSwapRequiredPostOnramp } from "../../../../../../pay/buyWithFiat/isSwapRequiredPostOnramp.js";
1111
import { formatNumber } from "../../../../../../utils/formatNumber.js";
1212
import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
13+
import type { WalletId } from "../../../../../../wallets/wallet-types.js";
1314
import {
1415
type Theme,
1516
iconSize,
@@ -91,6 +92,7 @@ export type BuyScreenProps = {
9192
theme: "light" | "dark" | Theme;
9293
onDone: () => void;
9394
connectOptions: PayEmbedConnectOptions | undefined;
95+
hiddenWallets?: WalletId[];
9496
isEmbed: boolean;
9597
};
9698

@@ -128,6 +130,7 @@ type BuyScreenContentProps = {
128130
theme: "light" | "dark" | Theme;
129131
payOptions: PayUIOptions;
130132
onDone: () => void;
133+
hiddenWallets?: WalletId[];
131134
connectOptions: PayEmbedConnectOptions | undefined;
132135
isEmbed: boolean;
133136
};
@@ -265,6 +268,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
265268
});
266269
}
267270
}}
271+
hiddenWallets={props.hiddenWallets}
268272
recommendedWallets={props.connectOptions?.recommendedWallets}
269273
showAllWallets={
270274
props.connectOptions?.showAllWallets === undefined
@@ -541,6 +545,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
541545
{screen.id === "select-wallet" && (
542546
<WalletSwitcherDrawerContent
543547
client={client}
548+
hiddenWallets={props.hiddenWallets}
544549
onSelect={(w) => {
545550
const chain = w.getChain();
546551
const account = w.getAccount();

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletSwitcherDrawerContent.tsx

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { PlusIcon } from "@radix-ui/react-icons";
22
import type { ThirdwebClient } from "../../../../../../../client/client.js";
33
import type { Wallet } from "../../../../../../../wallets/interfaces/wallet.js";
4+
import type { WalletId } from "../../../../../../../wallets/wallet-types.js";
45
import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
56
import {
67
iconSize,
@@ -22,6 +23,7 @@ export function WalletSwitcherDrawerContent(props: {
2223
onBack: () => void;
2324
onConnect: () => void;
2425
selectedAddress: string;
26+
hiddenWallets?: WalletId[];
2527
}) {
2628
const theme = useCustomTheme();
2729
const connectedWallets = useConnectedWallets();
@@ -34,23 +36,25 @@ export function WalletSwitcherDrawerContent(props: {
3436
return (
3537
<Container>
3638
<Container flex="column" gap="xs">
37-
{connectedWallets.map((w) => {
38-
const address = w.getAccount()?.address;
39-
return (
40-
<WalletSelectorButton
41-
key={w.id}
42-
walletId={w.id}
43-
client={props.client}
44-
address={address || ""}
45-
onClick={() => {
46-
props.onSelect(w);
47-
props.onBack();
48-
}}
49-
disableChevron
50-
checked={false}
51-
/>
52-
);
53-
})}
39+
{connectedWallets
40+
.filter((w) => !props.hiddenWallets?.includes(w.id))
41+
.map((w) => {
42+
const address = w.getAccount()?.address;
43+
return (
44+
<WalletSelectorButton
45+
key={w.id}
46+
walletId={w.id}
47+
client={props.client}
48+
address={address || ""}
49+
onClick={() => {
50+
props.onSelect(w);
51+
props.onBack();
52+
}}
53+
disableChevron
54+
checked={false}
55+
/>
56+
);
57+
})}
5458
{!hideConnectButton && (
5559
<Button
5660
variant="secondary"

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Details/WalletManagerScreen.tsx

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -80,21 +80,23 @@ export function WalletManagerScreen(
8080
}}
8181
>
8282
<Container flex="column" gap="xs">
83-
{connectedWallets.map((w) => {
84-
return (
85-
<WalletManangerButton
86-
key={w.id}
87-
client={props.client}
88-
// address={address || ""}
89-
onClick={() => {
90-
setActive(w);
91-
props.onBack();
92-
}}
93-
chain={props.activeChain}
94-
wallet={w}
95-
/>
96-
);
97-
})}
83+
{connectedWallets
84+
.filter((w) => !props.hiddenWallets?.includes(w.id))
85+
.map((w) => {
86+
return (
87+
<WalletManangerButton
88+
key={w.id}
89+
client={props.client}
90+
// address={address || ""}
91+
onClick={() => {
92+
setActive(w);
93+
props.onBack();
94+
}}
95+
chain={props.activeChain}
96+
wallet={w}
97+
/>
98+
);
99+
})}
98100
</Container>
99101
</Container>
100102

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/WalletSwitcherConnectionScreen.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { ThirdwebClient } from "../../../../../client/client.js";
33
import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
44
import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js";
55
import type { AppMetadata } from "../../../../../wallets/types.js";
6+
import type { WalletId } from "../../../../../wallets/wallet-types.js";
67
import { useConnectedWallets } from "../../../../core/hooks/wallets/useConnectedWallets.js";
78
import { getDefaultWallets } from "../../../wallets/defaultWallets.js";
89
import { ConnectModalContent } from "../Modal/ConnectModalContent.js";
@@ -21,6 +22,7 @@ export type WalletSwitcherConnectionScreenProps = {
2122
onSelect: (wallet: Wallet) => void;
2223
recommendedWallets: Wallet[] | undefined;
2324
showAllWallets: boolean;
25+
hiddenWallets?: WalletId[];
2426
walletConnect:
2527
| {
2628
projectId?: string;

packages/thirdweb/src/react/web/ui/PayEmbed.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import type { ThirdwebClient } from "../../../client/client.js";
66
import type { Wallet } from "../../../wallets/interfaces/wallet.js";
77
import type { SmartWalletOptions } from "../../../wallets/smart/types.js";
88
import type { AppMetadata } from "../../../wallets/types.js";
9+
import type { WalletId } from "../../../wallets/wallet-types.js";
910
import { CustomThemeProvider } from "../../core/design-system/CustomThemeProvider.js";
1011
import type { Theme } from "../../core/design-system/index.js";
1112
import type { SiweAuthOptions } from "../../core/hooks/auth/useSiweAuth.js";
@@ -119,12 +120,17 @@ export type PayEmbedProps = {
119120
theme?: "light" | "dark" | Theme;
120121

121122
/**
122-
* Customize the options for "Connect" Button showin in the PayEmbed UI when the user is not connected to a wallet.
123+
* Customize the options for "Connect" Button showing in the PayEmbed UI when the user is not connected to a wallet.
123124
*
124125
* Refer to the [`PayEmbedConnectOptions`](https://portal.thirdweb.com/references/typescript/v5/PayEmbedConnectOptions) type for more details.
125126
*/
126127
connectOptions?: PayEmbedConnectOptions;
127128

129+
/**
130+
* All wallet IDs included in this array will be hidden from wallet selection when connected.
131+
*/
132+
hiddenWallets?: WalletId[];
133+
128134
style?: React.CSSProperties;
129135

130136
className?: string;
@@ -201,6 +207,7 @@ export function PayEmbed(props: PayEmbedProps) {
201207
theme={theme}
202208
client={props.client}
203209
connectLocale={localeQuery.data}
210+
hiddenWallets={props.hiddenWallets}
204211
payOptions={
205212
props.payOptions || {
206213
mode: "fund_wallet",

0 commit comments

Comments
 (0)