[SDK] fix hiddenWallets prop (#7183)

Author: joaquim-verges

.changeset/hidden-wallets-prop.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Add a `hiddenWallets` prop to `ConnectEmbed`, `ConnectButton`, and `useConnectModal` to hide specific wallets from the connect list.

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.

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`.
    *

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}
       />
@@ -410,6 +413,8 @@ function ConnectButtonInner(
   const siweAuth = props.siweAuth;
   const activeAccount = useActiveAccount();
   const [showSignatureModal, setShowSignatureModal] = useState(false);
+  const hiddenWallets =
+    props.hiddenWallets || props.detailsModal?.hiddenWallets;
 
   // if wallet gets disconnected suddently, close the signature modal if it's open
   useEffect(() => {
@@ -557,7 +562,10 @@ function ConnectButtonInner(
       <ConnectedWalletDetails
         theme={theme}
         detailsButton={props.detailsButton}
-        detailsModal={props.detailsModal}
+        detailsModal={{
+          ...props.detailsModal,
+          hiddenWallets: hiddenWallets,
+        }}
         supportedTokens={supportedTokens}
         supportedNFTs={props.supportedNFTs}
         onDisconnect={(info) => {
@@ -582,7 +590,7 @@ function ConnectButtonInner(
           showAllWallets: props.showAllWallets,
           walletConnect: props.walletConnect,
           wallets: props.wallets,
-          hiddenWallets: props.detailsModal?.hiddenWallets,
+          hiddenWallets: hiddenWallets,
         }}
       />
     </AccountProvider>

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -5,6 +5,7 @@ import type { ThirdwebClient } from "../../../../../client/client.js";
 import { getDefaultWallets } from "../../../../../wallets/defaultWallets.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 {
   CustomThemeProvider,
   useCustomTheme,
@@ -295,6 +296,7 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
           modalSize={modalSize}
           style={props.style}
           welcomeScreen={props.welcomeScreen}
+          hiddenWallets={props.hiddenWallets}
         />
         {autoConnectComp}
       </WalletUIStatesProvider>
@@ -337,6 +339,7 @@ const ConnectEmbedContent = (props: {
   onConnect: ((wallet: Wallet) => void) | undefined;
   recommendedWallets: Wallet[] | undefined;
   showAllWallets: boolean | undefined;
+  hiddenWallets: WalletId[] | undefined;
   walletConnect:
     | {
         projectId?: string;
@@ -415,7 +418,7 @@ const ConnectEmbedContent = (props: {
         walletConnect={props.walletConnect}
         wallets={props.wallets}
         modalHeader={undefined}
-        walletIdsToHide={undefined}
+        walletIdsToHide={props.hiddenWallets}
       />
     );
   }

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}
       />
     </Modal>
   );

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
    *