Skip to content

Commit 9e8d3e6

Browse files
MananTankMananTank
committed
Add props for hiding send, receive and buy buttons on ConnectButton (#4382)
## Problem solved Short description of the bug fixed or feature added <!-- start pr-codex --> --- ## PR-Codex overview This PR enhances the `ConnectButton` component by adding props to hide "Send", "Receive", and "Buy" buttons in the details modal. ### Detailed summary - Added props to hide "Send", "Receive", and "Buy" buttons in the `ConnectButton` component details modal - Updated `ConnectButtonProps` with new boolean props for hiding buttons - Modified `Details.tsx` to conditionally display buttons based on the new props > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent d74e61b commit 9e8d3e6

File tree

6 files changed

+233
-77
lines changed

6 files changed

+233
-77
lines changed

‎.changeset/old-lions-happen.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
"thirdweb": patch
3+
---
4+
5+
Add props for hiding "Send", "Receive" and "Send" buttons in Connect Details Modal UI for `ConnectButton` component. By default, all buttons are visible in the modal.
6+
7+
```tsx
8+
<ConnectButton
9+
detailsModal={{
10+
hideSendFunds: false,
11+
hideReceiveFunds: true,
12+
hideBuyFunds: false,
13+
}}
14+
/>
15+
```

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,27 @@ export type ConnectButton_detailsModalOptions = {
288288
* Use custom avatar URL for the connected wallet image in the `ConnectButton` Details Modal, overriding ENS avatar or Blobbie icon.
289289
*/
290290
connectedAccountAvatarUrl?: string;
291+
292+
/**
293+
* Hide the "Send Funds" button in the `ConnectButton` Details Modal.
294+
*
295+
* By default the "Send Funds" button is shown.
296+
*/
297+
hideSendFunds?: boolean;
298+
299+
/**
300+
* Hide the "Receive Funds" button in the `ConnectButton` Details Modal.
301+
*
302+
* By default the "Receive Funds" button is shown.
303+
*/
304+
hideReceiveFunds?: boolean;
305+
306+
/**
307+
* Hide the "Buy Funds" button in the `ConnectButton` Details Modal.
308+
*
309+
* By default the "Buy Funds" button is shown.
310+
*/
311+
hideBuyFunds?: boolean;
291312
};
292313

293314
/**

‎packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -544,6 +544,9 @@ function ConnectButtonInner(
544544
showAllWallets: props.showAllWallets,
545545
walletConnect: props.walletConnect,
546546
wallets: props.wallets,
547+
hideReceiveFunds: props.detailsModal?.hideReceiveFunds,
548+
hideSendFunds: props.detailsModal?.hideSendFunds,
549+
hideBuyFunds: props.detailsModal?.hideBuyFunds,
547550
}}
548551
/>
549552
);

‎packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

Lines changed: 108 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -373,6 +373,11 @@ function DetailsModal(props: {
373373
const avatarSrc =
374374
props.detailsModal?.connectedAccountAvatarUrl ?? ensAvatarQuery.data;
375375

376+
const { hideSendFunds, hideReceiveFunds, hideBuyFunds } =
377+
props.detailsModal || {};
378+
379+
const hideAllButtons = hideSendFunds && hideReceiveFunds && hideBuyFunds;
380+
376381
const avatarContent = (
377382
<Container
378383
style={{
@@ -438,7 +443,16 @@ function DetailsModal(props: {
438443
let content = (
439444
<div>
440445
<Spacer y="xs" />
441-
<Container p="lg" gap="sm" flex="row" center="y">
446+
<Container
447+
px="lg"
448+
gap="sm"
449+
flex="row"
450+
center="y"
451+
style={{
452+
paddingTop: spacing.lg,
453+
paddingBottom: hideAllButtons ? spacing.md : spacing.lg,
454+
}}
455+
>
442456
{props.detailsModal?.hideSwitchWallet ? (
443457
avatarContent
444458
) : (
@@ -481,81 +495,99 @@ function DetailsModal(props: {
481495
<InAppWalletUserInfo client={client} locale={locale} />
482496
</Container>
483497
</Container>
484-
<Container px="lg">
485-
{/* Send, Receive, Swap */}
486-
<Container
487-
style={{
488-
display: "grid",
489-
gridTemplateColumns: "1fr 1fr 1fr",
490-
gap: spacing.xs,
491-
}}
492-
>
493-
<Button
494-
variant="outline"
495-
style={{
496-
fontSize: fontSize.sm,
497-
display: "flex",
498-
gap: spacing.xs,
499-
alignItems: "center",
500-
padding: spacing.sm,
501-
}}
502-
onClick={() => {
503-
setScreen("send");
504-
}}
505-
>
506-
<Container color="secondaryText" flex="row" center="both">
507-
<PaperPlaneIcon
508-
width={iconSize.sm}
509-
height={iconSize.sm}
510-
style={{
511-
transform: "translateY(-10%) rotate(-45deg) ",
512-
}}
513-
/>
514-
</Container>
515-
516-
{locale.send}
517-
</Button>
518498

519-
<Button
520-
variant="outline"
521-
style={{
522-
fontSize: fontSize.sm,
523-
display: "flex",
524-
gap: spacing.xs,
525-
alignItems: "center",
526-
padding: spacing.sm,
527-
}}
528-
onClick={() => {
529-
setScreen("receive");
530-
}}
531-
>
532-
<Container color="secondaryText" flex="row" center="both">
533-
<PinBottomIcon width={iconSize.sm} height={iconSize.sm} />{" "}
499+
{!hideAllButtons && (
500+
<>
501+
<Container px="lg">
502+
{/* Send, Receive, Swap */}
503+
<Container
504+
style={{
505+
display: "flex",
506+
gap: spacing.xs,
507+
}}
508+
>
509+
{!hideSendFunds && (
510+
<Button
511+
variant="outline"
512+
style={{
513+
fontSize: fontSize.sm,
514+
display: "flex",
515+
gap: spacing.xs,
516+
alignItems: "center",
517+
padding: spacing.sm,
518+
flex: 1,
519+
}}
520+
onClick={() => {
521+
setScreen("send");
522+
}}
523+
>
524+
<Container color="secondaryText" flex="row" center="both">
525+
<PaperPlaneIcon
526+
width={iconSize.sm}
527+
height={iconSize.sm}
528+
style={{
529+
transform: "translateY(-10%) rotate(-45deg) ",
530+
}}
531+
/>
532+
</Container>
533+
534+
{locale.send}
535+
</Button>
536+
)}
537+
538+
{!hideReceiveFunds && (
539+
<Button
540+
variant="outline"
541+
style={{
542+
fontSize: fontSize.sm,
543+
display: "flex",
544+
gap: spacing.xs,
545+
alignItems: "center",
546+
padding: spacing.sm,
547+
flex: 1,
548+
}}
549+
onClick={() => {
550+
setScreen("receive");
551+
}}
552+
>
553+
<Container color="secondaryText" flex="row" center="both">
554+
<PinBottomIcon
555+
width={iconSize.sm}
556+
height={iconSize.sm}
557+
/>{" "}
558+
</Container>
559+
{locale.receive}{" "}
560+
</Button>
561+
)}
562+
563+
{!hideBuyFunds && (
564+
<Button
565+
variant="outline"
566+
style={{
567+
fontSize: fontSize.sm,
568+
display: "flex",
569+
gap: spacing.xs,
570+
alignItems: "center",
571+
padding: spacing.sm,
572+
flex: 1,
573+
}}
574+
onClick={() => {
575+
setScreen("buy");
576+
}}
577+
>
578+
<Container color="secondaryText" flex="row" center="both">
579+
<PlusIcon width={iconSize.sm} height={iconSize.sm} />
580+
</Container>
581+
{locale.buy}
582+
</Button>
583+
)}
534584
</Container>
535-
{locale.receive}{" "}
536-
</Button>
585+
</Container>
586+
587+
<Spacer y="md" />
588+
</>
589+
)}
537590

538-
<Button
539-
variant="outline"
540-
style={{
541-
fontSize: fontSize.sm,
542-
display: "flex",
543-
gap: spacing.xs,
544-
alignItems: "center",
545-
padding: spacing.sm,
546-
}}
547-
onClick={() => {
548-
setScreen("buy");
549-
}}
550-
>
551-
<Container color="secondaryText" flex="row" center="both">
552-
<PlusIcon width={iconSize.sm} height={iconSize.sm} />
553-
</Container>
554-
{locale.buy}
555-
</Button>
556-
</Container>
557-
</Container>
558-
<Spacer y="md" />
559591
<Container px="md">
560592
<Container
561593
flex="column"
@@ -1122,6 +1154,9 @@ export type DetailsModalConnectOptions = {
11221154
chains?: Chain[];
11231155
recommendedWallets?: Wallet[];
11241156
showAllWallets?: boolean;
1157+
hideSendFunds?: boolean;
1158+
hideReceiveFunds?: boolean;
1159+
hideBuyFunds?: boolean;
11251160
};
11261161

11271162
export type UseWalletDetailsModalOptions = {

‎packages/thirdweb/src/stories/ConnectButton/hideButtons.stories.tsx

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { ConnectButton } from "../../react/web/ui/ConnectWallet/ConnectButton.js";
3+
import { storyClient } from "../utils.js";
4+
5+
const meta = {
6+
title: "Connect/ConnectButton/hide buttons",
7+
component: ConnectButton,
8+
parameters: {
9+
layout: "centered",
10+
},
11+
args: {
12+
client: storyClient,
13+
},
14+
} satisfies Meta<typeof ConnectButton>;
15+
16+
type Story = StoryObj<typeof meta>;
17+
18+
export const Default: Story = {
19+
args: {},
20+
};
21+
22+
export const HideSend: Story = {
23+
args: {
24+
detailsModal: {
25+
hideSendFunds: true,
26+
},
27+
},
28+
};
29+
30+
export const HideReceive: Story = {
31+
args: {
32+
detailsModal: {
33+
hideReceiveFunds: true,
34+
},
35+
},
36+
};
37+
38+
export const HideBuy: Story = {
39+
args: {
40+
detailsModal: {
41+
hideBuyFunds: true,
42+
},
43+
},
44+
};
45+
46+
export const HideSendReceive: Story = {
47+
args: {
48+
detailsModal: {
49+
hideSendFunds: true,
50+
hideReceiveFunds: true,
51+
},
52+
},
53+
};
54+
55+
export const HideSendBuy: Story = {
56+
args: {
57+
detailsModal: {
58+
hideSendFunds: true,
59+
hideBuyFunds: true,
60+
},
61+
},
62+
};
63+
64+
export const HideReceiveBuy: Story = {
65+
args: {
66+
detailsModal: {
67+
hideReceiveFunds: true,
68+
hideBuyFunds: true,
69+
},
70+
},
71+
};
72+
73+
export const HideSendReceiveBuy: Story = {
74+
args: {
75+
detailsModal: {
76+
hideSendFunds: true,
77+
hideReceiveFunds: true,
78+
hideBuyFunds: true,
79+
},
80+
},
81+
};
82+
83+
export default meta;

‎packages/thirdweb/src/stories/ConnectButton.stories.ts renamed to ‎packages/thirdweb/src/stories/ConnectButton/themes.stories.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import type { Meta, StoryObj } from "@storybook/react";
2-
import { ConnectButton } from "../react/web/ui/ConnectWallet/ConnectButton.js";
3-
import { storyClient } from "./utils.js";
2+
import { ConnectButton } from "../../react/web/ui/ConnectWallet/ConnectButton.js";
3+
import { storyClient } from "../utils.js";
44

55
const meta = {
6-
title: "Connect/ConnectButton",
6+
title: "Connect/ConnectButton/themes",
77
component: ConnectButton,
88
parameters: {
99
layout: "centered",
1010
},
11-
tags: ["autodocs"],
1211
args: {
1312
client: storyClient,
1413
},

0 commit comments

Comments
 (0)