diff --git a/.changeset/hidden-wallets-prop.md b/.changeset/hidden-wallets-prop.md new file mode 100644 index 00000000000..fd91e66d7ee --- /dev/null +++ b/.changeset/hidden-wallets-prop.md @@ -0,0 +1,5 @@ +--- +"thirdweb": minor +--- + +Add a `hiddenWallets` prop to `ConnectEmbed`, `ConnectButton`, and `useConnectModal` to hide specific wallets from the connect list. diff --git a/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts b/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts index 4a44f084e5c..82a5ee57bac 100644 --- a/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts +++ b/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts @@ -981,6 +981,11 @@ export type ConnectButtonProps = { */ showAllWallets?: boolean; + /** + * All wallet IDs included in this array will be hidden from the wallet selection list. + */ + hiddenWallets?: WalletId[]; + /** * Enable SIWE (Sign in with Ethererum) by passing an object of type `SiweAuthOptions` to * enforce the users to sign a message after connecting their wallet to authenticate themselves. diff --git a/packages/thirdweb/src/react/core/hooks/connection/ConnectEmbedProps.ts b/packages/thirdweb/src/react/core/hooks/connection/ConnectEmbedProps.ts index 7756b720b6f..7c2427db14e 100644 --- a/packages/thirdweb/src/react/core/hooks/connection/ConnectEmbedProps.ts +++ b/packages/thirdweb/src/react/core/hooks/connection/ConnectEmbedProps.ts @@ -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 type { WelcomeScreen } from "../../../web/ui/ConnectWallet/screens/types.js"; import type { LocaleId } from "../../../web/ui/types.js"; import type { Theme } from "../../design-system/index.js"; @@ -272,6 +273,11 @@ export type ConnectEmbedProps = { */ showAllWallets?: boolean; + /** + * All wallet IDs included in this array will be hidden from the wallet selection list. + */ + hiddenWallets?: WalletId[]; + /** * ConnectEmbed supports two modal size variants: `compact` and `wide`. * diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx index 442f67abecc..7c8f5467709 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx @@ -300,6 +300,8 @@ export function ConnectButton(props: ConnectButtonProps) { const activeAccount = useActiveAccount(); const activeWallet = useActiveWallet(); const siweAuth = useSiweAuth(activeWallet, activeAccount, props.auth); + const hiddenWallets = + props.hiddenWallets || props.detailsModal?.hiddenWallets; usePreloadWalletProviders({ wallets, @@ -393,6 +395,7 @@ export function ConnectButton(props: ConnectButtonProps) { onConnect={props.onConnect} recommendedWallets={props.recommendedWallets} showAllWallets={props.showAllWallets} + hiddenWallets={hiddenWallets} walletConnect={props.walletConnect} wallets={wallets} /> @@ -557,7 +560,10 @@ function ConnectButtonInner( { @@ -582,7 +588,7 @@ function ConnectButtonInner( showAllWallets: props.showAllWallets, walletConnect: props.walletConnect, wallets: props.wallets, - hiddenWallets: props.detailsModal?.hiddenWallets, + hiddenWallets: hiddenWallets, }} /> diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx index d876f3ac138..67edc2e7ed1 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx @@ -415,7 +415,7 @@ const ConnectEmbedContent = (props: { walletConnect={props.walletConnect} wallets={props.wallets} modalHeader={undefined} - walletIdsToHide={undefined} + walletIdsToHide={props.hiddenWallets} /> ); } diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx index b4b8f82ce73..fff9f2a30b7 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx @@ -4,6 +4,7 @@ import type { Chain } from "../../../../../chains/types.js"; 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 { WalletId } from "../../../../../wallets/wallet-types.js"; import type { SiweAuthOptions } from "../../../../core/hooks/auth/useSiweAuth.js"; import { useActiveAccount } from "../../../../core/hooks/wallets/useActiveAccount.js"; import { @@ -42,6 +43,7 @@ type ConnectModalOptions = { localeId: LocaleId; chain: Chain | undefined; showAllWallets: boolean | undefined; + hiddenWallets: WalletId[] | undefined; chains: Chain[] | undefined; walletConnect: | { @@ -151,7 +153,7 @@ const ConnectModal = (props: ConnectModalOptions) => { chains={props.chains} walletConnect={props.walletConnect} modalHeader={undefined} - walletIdsToHide={undefined} + walletIdsToHide={props.hiddenWallets} /> ); diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/useConnectModal.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/useConnectModal.tsx index e6a59b2ed1a..9214dd56b43 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/useConnectModal.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/useConnectModal.tsx @@ -5,6 +5,7 @@ import { getDefaultWallets } from "../../../../wallets/defaultWallets.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 type { Theme } from "../../../core/design-system/index.js"; import type { SiweAuthOptions } from "../../../core/hooks/auth/useSiweAuth.js"; import { SetRootElementContext } from "../../../core/providers/RootElementContext.js"; @@ -142,6 +143,7 @@ function Modal( onConnect={props.onConnect} recommendedWallets={props.recommendedWallets} showAllWallets={props.showAllWallets} + hiddenWallets={props.hiddenWallets} wallets={wallets} chains={props.chains} walletConnect={props.walletConnect} @@ -364,6 +366,11 @@ export type UseConnectModalOptions = { */ showAllWallets?: boolean; + /** + * All wallet IDs included in this array will be hidden from the wallet selection list. + */ + hiddenWallets?: WalletId[]; + /** * Title to show in Connect Modal *