feat(sdk): allows hiding the link profiles button

Author: gregfromstl

.changeset/four-ducks-try.md

@@ -0,0 +1,9 @@
+---
+"thirdweb": minor
+---
+
+Feature: Allows hiding the "Linked Profiles" button in the `ConnectButton` Details Modal
+
+```tsx
+<ConnectButton detailsModal={{ manageWallet: { allowLinkingProfiles: false } }} />
+```

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

@@ -327,6 +327,18 @@ export type ConnectButton_detailsModalOptions = {
    * Note: Not all tokens are resolvable to a fiat value. In that case, nothing will be shown.
    */
   showBalanceInFiat?: SupportedFiatCurrency;
+
+  /**
+   * Configure options for managing the connected wallet.
+   */
+  manageWallet?: {
+    /**
+     * Allow linking other profiles to the connected wallet.
+     *
+     * By default it is `true`.
+     */
+    allowLinkingProfiles?: boolean;
+  };
 };
 
 /**

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ManageWalletScreen.test.tsx

@@ -0,0 +1,64 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen } from "../../../../../../test/src/react-render.js";
+import { TEST_CLIENT } from "../../../../../../test/src/test-clients.js";
+import { createWallet } from "../../../../../wallets/create-wallet.js";
+import { useAdminWallet } from "../../../../core/hooks/wallets/useAdminWallet.js";
+import en from "../locale/en.js";
+import { ManageWalletScreen } from "./ManageWalletScreen.js";
+
+vi.mock("../../../../core/hooks/wallets/useAdminWallet");
+
+describe("ManageWalletScreen", () => {
+  const mockProps = {
+    onBack: vi.fn(),
+    setScreen: vi.fn(),
+    closeModal: vi.fn(),
+    locale: en,
+    client: TEST_CLIENT,
+  };
+
+  beforeEach(() => {
+    vi.mocked(useAdminWallet).mockReturnValue(createWallet("inApp"));
+  });
+
+  it("should render the modal header with the correct title", () => {
+    render(<ManageWalletScreen {...mockProps} />);
+    expect(screen.getByText(en.manageWallet.title)).toBeInTheDocument();
+  });
+
+  it("should render the linked profiles button if allowLinkingProfiles is true", () => {
+    render(
+      <ManageWalletScreen
+        {...mockProps}
+        manageWallet={{ allowLinkingProfiles: true }}
+      />,
+    );
+    expect(
+      screen.getByText(en.manageWallet.linkedProfiles),
+    ).toBeInTheDocument();
+  });
+
+  it("should not render the linked profiles button if allowLinkingProfiles is false", () => {
+    render(
+      <ManageWalletScreen
+        {...mockProps}
+        manageWallet={{ allowLinkingProfiles: false }}
+      />,
+    );
+    expect(
+      screen.queryByText(en.manageWallet.linkedProfiles),
+    ).not.toBeInTheDocument();
+  });
+
+  it("should default to showing linked profiles button", () => {
+    render(<ManageWalletScreen {...mockProps} />);
+    expect(
+      screen.getByText(en.manageWallet.linkedProfiles),
+    ).toBeInTheDocument();
+  });
+
+  it("should render the wallet connect receiver button", () => {
+    render(<ManageWalletScreen {...mockProps} />);
+    expect(screen.getByText(en.manageWallet.connectAnApp)).toBeInTheDocument();
+  });
+});

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

@@ -1,10 +1,10 @@
 "use client";
 import { ShuffleIcon } from "@radix-ui/react-icons";
 import type { ThirdwebClient } from "../../../../../client/client.js";
-import { isEcosystemWallet } from "../../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import { isInAppWallet } from "../../../../../wallets/in-app/core/wallet/index.js";
 import { injectedProvider } from "../../../../../wallets/injected/mipdStore.js";
 import { fontSize, iconSize } from "../../../../core/design-system/index.js";
+import type { ConnectButton_detailsModalOptions } from "../../../../core/hooks/connection/ConnectButtonProps.js";
 import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
 import { useAdminWallet } from "../../../../core/hooks/wallets/useAdminWallet.js";
 import { Spacer } from "../../components/Spacer.js";
@@ -26,6 +26,7 @@ export function ManageWalletScreen(props: {
   closeModal: () => void;
   locale: ConnectLocale;
   client: ThirdwebClient;
+  manageWallet?: ConnectButton_detailsModalOptions["manageWallet"];
 }) {
   const activeWallet = useAdminWallet();
 
@@ -57,10 +58,9 @@ export function ManageWalletScreen(props: {
             connectLocale={props.locale}
           />
 
-          {/* Multi-auth */}
-          {activeWallet &&
-            (activeWallet?.id === "inApp" ||
-              isEcosystemWallet(activeWallet)) && (
+          {/* Unified Identity */}
+          {typeof activeWallet !== "undefined" &&
+            props.manageWallet?.allowLinkingProfiles !== false && (
               <MenuButton
                 onClick={() => {
                   props.setScreen("linked-profiles");