diff --git a/.changeset/perfect-poems-scream.md b/.changeset/perfect-poems-scream.md
new file mode 100644
index 000000000..a39976b99
--- /dev/null
+++ b/.changeset/perfect-poems-scream.md
@@ -0,0 +1,19 @@
+---
+"thirdweb": patch
+---
+
+Adds the ability to hide certain wallets in the wallet switcher
+
+```tsx
+
+```
diff --git a/apps/playground-web/src/components/account-abstraction/connect-smart-account.tsx b/apps/playground-web/src/components/account-abstraction/connect-smart-account.tsx
index 2795fc588..ba092e310 100644
--- a/apps/playground-web/src/components/account-abstraction/connect-smart-account.tsx
+++ b/apps/playground-web/src/components/account-abstraction/connect-smart-account.tsx
@@ -18,6 +18,10 @@ export function ConnectSmartAccountPreview() {
return (
);
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
index 81afa498f..726869743 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
@@ -19,6 +19,7 @@ import { formatNumber } from "../../../../utils/formatNumber.js";
import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
import type { AppMetadata } from "../../../../wallets/types.js";
+import type { WalletId } from "../../../../wallets/wallet-types.js";
import {
CustomThemeProvider,
parseTheme,
@@ -744,6 +745,7 @@ function DetailsModal(props: {
chain={props.connectOptions?.chain}
chains={props.connectOptions?.chains}
client={client}
+ hiddenWallets={props.connectOptions?.hiddenWallets}
connectLocale={locale}
recommendedWallets={props.connectOptions?.recommendedWallets}
showAllWallets={!!props.connectOptions?.showAllWallets}
@@ -924,6 +926,7 @@ function DetailsModal(props: {
mode: "fund_wallet",
}
}
+ hiddenWallets={props.detailsModal?.hiddenWallets}
theme={typeof props.theme === "string" ? props.theme : props.theme.type}
onDone={closeModal}
connectOptions={undefined}
@@ -1156,6 +1159,7 @@ export type DetailsModalConnectOptions = {
chain?: Chain;
chains?: Chain[];
recommendedWallets?: Wallet[];
+ hiddenWallets?: WalletId[];
showAllWallets?: boolean;
};
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx
index 66d2adb7e..7c4b3fe98 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx
@@ -10,6 +10,7 @@ import type { BuyWithFiatStatus } from "../../../../../../pay/buyWithFiat/getSta
import { isSwapRequiredPostOnramp } from "../../../../../../pay/buyWithFiat/isSwapRequiredPostOnramp.js";
import { formatNumber } from "../../../../../../utils/formatNumber.js";
import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
+import type { WalletId } from "../../../../../../wallets/wallet-types.js";
import {
type Theme,
iconSize,
@@ -91,6 +92,7 @@ export type BuyScreenProps = {
theme: "light" | "dark" | Theme;
onDone: () => void;
connectOptions: PayEmbedConnectOptions | undefined;
+ hiddenWallets?: WalletId[];
isEmbed: boolean;
};
@@ -128,6 +130,7 @@ type BuyScreenContentProps = {
theme: "light" | "dark" | Theme;
payOptions: PayUIOptions;
onDone: () => void;
+ hiddenWallets?: WalletId[];
connectOptions: PayEmbedConnectOptions | undefined;
isEmbed: boolean;
};
@@ -265,6 +268,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
});
}
}}
+ hiddenWallets={props.hiddenWallets}
recommendedWallets={props.connectOptions?.recommendedWallets}
showAllWallets={
props.connectOptions?.showAllWallets === undefined
@@ -541,6 +545,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
{screen.id === "select-wallet" && (
{
const chain = w.getChain();
const account = w.getAccount();
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletSwitcherDrawerContent.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletSwitcherDrawerContent.tsx
index cfabc732f..ddfbe78a9 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletSwitcherDrawerContent.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletSwitcherDrawerContent.tsx
@@ -1,6 +1,7 @@
import { PlusIcon } from "@radix-ui/react-icons";
import type { ThirdwebClient } from "../../../../../../../client/client.js";
import type { Wallet } from "../../../../../../../wallets/interfaces/wallet.js";
+import type { WalletId } from "../../../../../../../wallets/wallet-types.js";
import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
import {
iconSize,
@@ -22,6 +23,7 @@ export function WalletSwitcherDrawerContent(props: {
onBack: () => void;
onConnect: () => void;
selectedAddress: string;
+ hiddenWallets?: WalletId[];
}) {
const theme = useCustomTheme();
const connectedWallets = useConnectedWallets();
@@ -34,23 +36,25 @@ export function WalletSwitcherDrawerContent(props: {
return (
- {connectedWallets.map((w) => {
- const address = w.getAccount()?.address;
- return (
- {
- props.onSelect(w);
- props.onBack();
- }}
- disableChevron
- checked={false}
- />
- );
- })}
+ {connectedWallets
+ .filter((w) => !props.hiddenWallets?.includes(w.id))
+ .map((w) => {
+ const address = w.getAccount()?.address;
+ return (
+ {
+ props.onSelect(w);
+ props.onBack();
+ }}
+ disableChevron
+ checked={false}
+ />
+ );
+ })}
{!hideConnectButton && (
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/WalletSwitcherConnectionScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/WalletSwitcherConnectionScreen.tsx
index 5bad7af9d..5c793937c 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/WalletSwitcherConnectionScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/WalletSwitcherConnectionScreen.tsx
@@ -3,6 +3,7 @@ import type { ThirdwebClient } from "../../../../../client/client.js";
import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js";
import type { AppMetadata } from "../../../../../wallets/types.js";
+import type { WalletId } from "../../../../../wallets/wallet-types.js";
import { useConnectedWallets } from "../../../../core/hooks/wallets/useConnectedWallets.js";
import { getDefaultWallets } from "../../../wallets/defaultWallets.js";
import { ConnectModalContent } from "../Modal/ConnectModalContent.js";
@@ -21,6 +22,7 @@ export type WalletSwitcherConnectionScreenProps = {
onSelect: (wallet: Wallet) => void;
recommendedWallets: Wallet[] | undefined;
showAllWallets: boolean;
+ hiddenWallets?: WalletId[];
walletConnect:
| {
projectId?: string;
diff --git a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx
index c4d460db5..66d2abf89 100644
--- a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx
+++ b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx
@@ -6,6 +6,7 @@ import type { ThirdwebClient } from "../../../client/client.js";
import type { Wallet } from "../../../wallets/interfaces/wallet.js";
import type { SmartWalletOptions } from "../../../wallets/smart/types.js";
import type { AppMetadata } from "../../../wallets/types.js";
+import type { WalletId } from "../../../wallets/wallet-types.js";
import { CustomThemeProvider } from "../../core/design-system/CustomThemeProvider.js";
import type { Theme } from "../../core/design-system/index.js";
import type { SiweAuthOptions } from "../../core/hooks/auth/useSiweAuth.js";
@@ -119,12 +120,17 @@ export type PayEmbedProps = {
theme?: "light" | "dark" | Theme;
/**
- * Customize the options for "Connect" Button showin in the PayEmbed UI when the user is not connected to a wallet.
+ * Customize the options for "Connect" Button showing in the PayEmbed UI when the user is not connected to a wallet.
*
* Refer to the [`PayEmbedConnectOptions`](https://portal.thirdweb.com/references/typescript/v5/PayEmbedConnectOptions) type for more details.
*/
connectOptions?: PayEmbedConnectOptions;
+ /**
+ * All wallet IDs included in this array will be hidden from wallet selection when connected.
+ */
+ hiddenWallets?: WalletId[];
+
style?: React.CSSProperties;
className?: string;
@@ -201,6 +207,7 @@ export function PayEmbed(props: PayEmbedProps) {
theme={theme}
client={props.client}
connectLocale={localeQuery.data}
+ hiddenWallets={props.hiddenWallets}
payOptions={
props.payOptions || {
mode: "fund_wallet",