Skip to content

Commit 13d63ab

Browse files
committed
[SDK] Fix: Hide sign in with wallet button when linking (#5620)
<!-- start pr-codex --> ## PR-Codex overview This PR focuses on improving the `ConnectWalletSocialOptions` component by conditionally rendering the "Sign in with Wallet" button based on the `isLinking` prop, and it adds tests to verify this behavior. ### Detailed summary - Added condition to hide the "Sign in with Wallet" button when `isLinking` is true in `ConnectWalletSocialOptions.tsx`. - Created tests for `ConnectWalletSocialOptions` in `ConnectWalletSocialOptions.test.tsx`: - Tests rendering the button when enabled and not linking. - Tests that the button is not rendered when `isLinking` is true. - Tests that clicking the button calls `handleWalletLogin`. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent 33c23e7 commit 13d63ab

File tree

3 files changed

+93
-1
lines changed

3 files changed

+93
-1
lines changed

.changeset/strong-avocados-argue.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"thirdweb": patch
3+
---
4+
5+
Fix: Hides Sign in with Wallet button when linking a profile
Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { describe, expect, it, vi } from "vitest";
2+
import {
3+
fireEvent,
4+
render,
5+
screen,
6+
} from "../../../../../test/src/react-render.js";
7+
import { TEST_CLIENT } from "../../../../../test/src/test-clients.js";
8+
import { createWallet } from "../../../../wallets/create-wallet.js";
9+
import { ConnectWalletSocialOptions } from "./ConnectWalletSocialOptions.js";
10+
import en from "./locale/en.js";
11+
12+
describe("ConnectWalletSocialOptions", () => {
13+
const mockSelect = vi.fn();
14+
const mockDone = vi.fn();
15+
16+
const defaultProps = {
17+
select: mockSelect,
18+
done: mockDone,
19+
locale: en,
20+
chain: undefined,
21+
client: TEST_CLIENT,
22+
size: "compact" as const,
23+
isLinking: false,
24+
disabled: false,
25+
};
26+
27+
it("renders Sign in with Wallet button when enabled and not linking", () => {
28+
render(
29+
<ConnectWalletSocialOptions
30+
{...defaultProps}
31+
wallet={createWallet("inApp", {
32+
auth: {
33+
options: ["wallet"],
34+
},
35+
})}
36+
/>,
37+
);
38+
39+
const walletButton = screen.getByRole("button", {
40+
name: /sign in with wallet/i,
41+
});
42+
43+
expect(walletButton).toBeInTheDocument();
44+
expect(walletButton).toHaveTextContent("Sign in with Wallet");
45+
});
46+
47+
it("does not render Sign in with Wallet button when isLinking is true", () => {
48+
render(
49+
<ConnectWalletSocialOptions
50+
{...defaultProps}
51+
isLinking={true}
52+
wallet={createWallet("inApp", {
53+
auth: {
54+
options: ["wallet"],
55+
},
56+
})}
57+
/>,
58+
);
59+
60+
const walletButton = screen.queryByRole("button", {
61+
name: /sign in with wallet/i,
62+
});
63+
64+
expect(walletButton).not.toBeInTheDocument();
65+
});
66+
67+
it("calls handleWalletLogin when Sign in with Wallet button is clicked", () => {
68+
render(
69+
<ConnectWalletSocialOptions
70+
{...defaultProps}
71+
wallet={createWallet("inApp", {
72+
auth: {
73+
options: ["wallet"],
74+
},
75+
})}
76+
/>,
77+
);
78+
79+
const walletButton = screen.getByRole("button", {
80+
name: /sign in with wallet/i,
81+
});
82+
83+
fireEvent.click(walletButton);
84+
85+
expect(mockSelect).toHaveBeenCalled();
86+
});
87+
});

packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -474,7 +474,7 @@ export const ConnectWalletSocialOptions = (
474474
)}
475475

476476
{/* SIWE login */}
477-
{siweEnabled && (
477+
{siweEnabled && !props.isLinking && (
478478
<WalletTypeRowButton
479479
client={props.client}
480480
icon={OutlineWalletIcon}

0 commit comments

Comments
 (0)