Skip to content

[SDK] add hiddenWallets prop #7181

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

[SDK] add hiddenWallets prop #7181

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/hidden-wallets-prop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"thirdweb": minor
---

Add a `hiddenWallets` prop to `ConnectEmbed`, `ConnectButton`, and `useConnectModal` to hide specific wallets from the connect list.
5 changes: 5 additions & 0 deletions packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
6 changes: 6 additions & 0 deletions packages/thirdweb/src/react/core/hooks/connection/ConnectEmbedProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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`.
*
Expand Down
10 changes: 8 additions & 2 deletions packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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}
/>
Expand Down Expand Up @@ -557,7 +560,10 @@ function ConnectButtonInner(
<ConnectedWalletDetails
theme={theme}
detailsButton={props.detailsButton}
detailsModal={props.detailsModal}
detailsModal={{
...props.detailsModal,
hiddenWallets: hiddenWallets,
}}
supportedTokens={supportedTokens}
supportedNFTs={props.supportedNFTs}
onDisconnect={(info) => {
Expand All @@ -582,7 +588,7 @@ function ConnectButtonInner(
showAllWallets: props.showAllWallets,
walletConnect: props.walletConnect,
wallets: props.wallets,
hiddenWallets: props.detailsModal?.hiddenWallets,
hiddenWallets: hiddenWallets,
}}
/>
</AccountProvider>
Expand Down
2 changes: 1 addition & 1 deletion packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -415,7 +415,7 @@ const ConnectEmbedContent = (props: {
walletConnect={props.walletConnect}
wallets={props.wallets}
modalHeader={undefined}
walletIdsToHide={undefined}
walletIdsToHide={props.hiddenWallets}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix missing hiddenWallets prop in ConnectEmbedContent interface.

The code is accessing props.hiddenWallets but this prop is not defined in the ConnectEmbedContent props interface (lines 310-347) and is not being passed from the parent ConnectEmbed component (lines 278-298).

Apply these fixes:

  1. Add hiddenWallets to the ConnectEmbedContent props interface:
const ConnectEmbedContent = (props: {
  modalSize?: "compact" | "wide";
  className?: string;
  style?: React.CSSProperties;
+ hiddenWallets?: WalletId[];
  // ---
  accountAbstraction: SmartWalletOptions | undefined;
  1. Pass the prop from parent ConnectEmbed component around line 298:
      <WalletUIStatesProvider theme={props.theme} isOpen={true}>
        <ConnectEmbedContent
          auth={props.auth}
          accountAbstraction={props.accountAbstraction}
+         hiddenWallets={props.hiddenWallets}
          chain={preferredChain}
🤖 Prompt for AI Agents 
In packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
around lines 278-298 and 310-347, the prop hiddenWallets is used in
ConnectEmbedContent but is missing from its props interface and not passed from
the parent ConnectEmbed component. Fix this by adding hiddenWallets to the
ConnectEmbedContent props interface definition and then pass hiddenWallets as a
prop from the ConnectEmbed component to ConnectEmbedContent around line 298.

/>
);
}
Expand Down
4 changes: 3 additions & 1 deletion packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -42,6 +43,7 @@ type ConnectModalOptions = {
localeId: LocaleId;
chain: Chain | undefined;
showAllWallets: boolean | undefined;
hiddenWallets: WalletId[] | undefined;
chains: Chain[] | undefined;
walletConnect:
| {
Expand Down Expand Up @@ -151,7 +153,7 @@ const ConnectModal = (props: ConnectModalOptions) => {
chains={props.chains}
walletConnect={props.walletConnect}
modalHeader={undefined}
walletIdsToHide={undefined}
walletIdsToHide={props.hiddenWallets}
/>
</Modal>
);
Expand Down
7 changes: 7 additions & 0 deletions packages/thirdweb/src/react/web/ui/ConnectWallet/useConnectModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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
*
Expand Down
Loading