diff --git a/.changeset/four-ducks-try.md b/.changeset/four-ducks-try.md new file mode 100644 index 00000000000..f85c7adacf9 --- /dev/null +++ b/.changeset/four-ducks-try.md @@ -0,0 +1,9 @@ +--- +"thirdweb": minor +--- + +Feature: Allows hiding the "Linked Profiles" button in the `ConnectButton` Details Modal + +```tsx + +``` diff --git a/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts b/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts index 2a25abd8191..c723ad6377c 100644 --- a/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts +++ b/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; + }; }; /** diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ManageWalletScreen.test.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ManageWalletScreen.test.tsx new file mode 100644 index 00000000000..291b764848d --- /dev/null +++ b/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(); + expect(screen.getByText(en.manageWallet.title)).toBeInTheDocument(); + }); + + it("should render the linked profiles button if allowLinkingProfiles is true", () => { + render( + , + ); + expect( + screen.getByText(en.manageWallet.linkedProfiles), + ).toBeInTheDocument(); + }); + + it("should not render the linked profiles button if allowLinkingProfiles is false", () => { + render( + , + ); + expect( + screen.queryByText(en.manageWallet.linkedProfiles), + ).not.toBeInTheDocument(); + }); + + it("should default to showing linked profiles button", () => { + render(); + expect( + screen.getByText(en.manageWallet.linkedProfiles), + ).toBeInTheDocument(); + }); + + it("should render the wallet connect receiver button", () => { + render(); + expect(screen.getByText(en.manageWallet.connectAnApp)).toBeInTheDocument(); + }); +}); diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ManageWalletScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ManageWalletScreen.tsx index 4d3a37b91d2..725adb802d7 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ManageWalletScreen.tsx +++ b/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 && ( { props.setScreen("linked-profiles");