Skip to content

Commit

Permalink
[SDK] Feature: Allow hiding the link profiles button (#5799)
Browse files Browse the repository at this point in the history
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a feature to hide the "Linked Profiles" button in the `ConnectButton` Details Modal based on the `allowLinkingProfiles` option. It also includes tests for the `ManageWalletScreen` to ensure the button's visibility behaves as expected.

### Detailed summary
- Added `manageWallet` option in `ConnectButtonProps` to configure wallet management.
- Updated `ManageWalletScreen` to conditionally render the linked profiles button based on `allowLinkingProfiles`.
- Created tests for `ManageWalletScreen` to verify button visibility based on `allowLinkingProfiles` settings.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
  • Loading branch information
gregfromstl committed Dec 19, 2024
1 parent 46a426b commit 90e2b97
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 5 deletions.
9 changes: 9 additions & 0 deletions .changeset/four-ducks-try.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
"thirdweb": minor
---

Feature: Allows hiding the "Linked Profiles" button in the `ConnectButton` Details Modal

```tsx
<ConnectButton detailsModal={{ manageWallet: { allowLinkingProfiles: false } }} />
```
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
};

/**
Expand Down
Original file line number Diff line number Diff line change
@@ -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();
});
});
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -26,6 +26,7 @@ export function ManageWalletScreen(props: {
closeModal: () => void;
locale: ConnectLocale;
client: ThirdwebClient;
manageWallet?: ConnectButton_detailsModalOptions["manageWallet"];
}) {
const activeWallet = useAdminWallet();

Expand Down Expand Up @@ -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");
Expand Down

0 comments on commit 90e2b97

Please sign in to comment.