Skip to content

Commit 2a9e984

Browse files
cursoragentgregfromstl
cursoragent
and
gregfromstl
committed
Add option to hide thirdweb branding in widgets with preview controls
Co-authored-by: gregfromstl <gregfromstl@gmail.com>
1 parent ae07298 commit 2a9e984

File tree

6 files changed

+284
-38
lines changed

6 files changed

+284
-38
lines changed

‎apps/playground-web/src/app/connect/pay/commerce/page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ function BuyMerch() {
4949
name="Concert Ticket"
5050
image="https://example.com/concert-ticket.jpg"
5151
description="Concert ticket for the upcoming show"
52+
showThirdwebBranding={false} // Optional: hide thirdweb branding
5253
/>
5354
);
5455
};`}

‎apps/playground-web/src/app/connect/pay/fund-wallet/page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ function App() {
4545
tokenAddress={NATIVE_TOKEN_ADDRESS}
4646
chain={arbitrum}
4747
amount={toWei("0.002")}
48+
showThirdwebBranding={false} // Optional: hide thirdweb branding
4849
/>
4950
);
5051
}`}

‎apps/playground-web/src/app/connect/pay/transactions/page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ function BuyOnchainAsset() {
6363
title={nft?.metadata?.name}
6464
description={nft?.metadata?.description}
6565
image={nft?.metadata?.image}
66+
showThirdwebBranding={false} // Optional: hide thirdweb branding
6667
/>
6768
);
6869
};`}

‎apps/playground-web/src/components/pay/direct-payment.tsx‎

Lines changed: 100 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,109 @@
11
"use client";
2+
import { useState, useId } from "react";
23
import { base } from "thirdweb/chains";
34
import { CheckoutWidget } from "thirdweb/react";
45
import { THIRDWEB_CLIENT } from "../../lib/client";
6+
import { Checkbox } from "@/components/ui/checkbox";
7+
import { Label } from "@/components/ui/label";
8+
import { Input } from "@/components/ui/input";
9+
10+
type CheckoutWidgetOptions = {
11+
amount: string;
12+
name: string;
13+
description: string;
14+
showThirdwebBranding: boolean;
15+
};
516

617
export function BuyMerchPreview() {
18+
const [options, setOptions] = useState<CheckoutWidgetOptions>({
19+
amount: "2",
20+
name: "Concert Ticket",
21+
description: "Get your ticket for The Midnight Live",
22+
showThirdwebBranding: true,
23+
});
24+
25+
const showBrandingId = useId();
26+
const amountId = useId();
27+
const nameId = useId();
28+
const descriptionId = useId();
29+
730
return (
8-
<>
9-
<CheckoutWidget
10-
amount={"2"}
11-
chain={base}
12-
client={THIRDWEB_CLIENT}
13-
description="Get your ticket for The Midnight Live"
14-
feePayer="seller"
15-
image="https://images.unsplash.com/photo-1501281668745-f7f57925c3b4?w=500&h=300&fit=crop"
16-
name="Concert Ticket"
17-
seller="0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675"
18-
theme="light"
19-
tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
20-
/>
21-
</>
31+
<div className="flex flex-col lg:flex-row gap-8">
32+
{/* Controls */}
33+
<div className="lg:w-80 flex flex-col gap-4 p-4 border rounded-lg">
34+
<h3 className="font-semibold text-lg">Widget Options</h3>
35+
36+
{/* Amount */}
37+
<div className="flex flex-col gap-2">
38+
<Label htmlFor={amountId}>Amount (USDC)</Label>
39+
<Input
40+
id={amountId}
41+
value={options.amount}
42+
onChange={(e) =>
43+
setOptions((prev) => ({ ...prev, amount: e.target.value }))
44+
}
45+
placeholder="2"
46+
/>
47+
</div>
48+
49+
{/* Name */}
50+
<div className="flex flex-col gap-2">
51+
<Label htmlFor={nameId}>Product Name</Label>
52+
<Input
53+
id={nameId}
54+
value={options.name}
55+
onChange={(e) =>
56+
setOptions((prev) => ({ ...prev, name: e.target.value }))
57+
}
58+
placeholder="Concert Ticket"
59+
/>
60+
</div>
61+
62+
{/* Description */}
63+
<div className="flex flex-col gap-2">
64+
<Label htmlFor={descriptionId}>Description</Label>
65+
<Input
66+
id={descriptionId}
67+
value={options.description}
68+
onChange={(e) =>
69+
setOptions((prev) => ({ ...prev, description: e.target.value }))
70+
}
71+
placeholder="Get your ticket for The Midnight Live"
72+
/>
73+
</div>
74+
75+
{/* Show Thirdweb Branding */}
76+
<div className="flex items-center gap-2">
77+
<Checkbox
78+
id={showBrandingId}
79+
checked={options.showThirdwebBranding}
80+
onCheckedChange={(checked) =>
81+
setOptions((prev) => ({
82+
...prev,
83+
showThirdwebBranding: checked === true,
84+
}))
85+
}
86+
/>
87+
<Label htmlFor={showBrandingId}>Show thirdweb branding</Label>
88+
</div>
89+
</div>
90+
91+
{/* Widget Preview */}
92+
<div className="flex-1 flex flex-col items-center justify-center">
93+
<CheckoutWidget
94+
amount={options.amount}
95+
chain={base}
96+
client={THIRDWEB_CLIENT}
97+
description={options.description}
98+
feePayer="seller"
99+
image="https://images.unsplash.com/photo-1501281668745-f7f57925c3b4?w=500&h=300&fit=crop"
100+
name={options.name}
101+
seller="0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675"
102+
theme="light"
103+
tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
104+
showThirdwebBranding={options.showThirdwebBranding}
105+
/>
106+
</div>
107+
</div>
22108
);
23109
}

‎apps/playground-web/src/components/pay/transaction-button.tsx‎

Lines changed: 102 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

33
import { useTheme } from "next-themes";
4+
import { useState, useId } from "react";
45
import { getContract, prepareTransaction } from "thirdweb";
56
import { base, baseSepolia, polygon } from "thirdweb/chains";
67
import { transfer } from "thirdweb/extensions/erc20";
@@ -15,6 +16,9 @@ import {
1516
import { toWei } from "thirdweb/utils";
1617
import { THIRDWEB_CLIENT } from "../../lib/client";
1718
import { StyledConnectButton } from "../styled-connect-button";
19+
import { Checkbox } from "@/components/ui/checkbox";
20+
import { Label } from "@/components/ui/label";
21+
import { Input } from "@/components/ui/input";
1822

1923
const nftContract = getContract({
2024
address: "0xf0d0CBf84005Dd4eC81364D1f5D7d896Bd53D1B8",
@@ -31,6 +35,13 @@ const usdcContract = getContract({
3135
client: THIRDWEB_CLIENT,
3236
});
3337

38+
type TransactionWidgetOptions = {
39+
amount: string;
40+
title: string;
41+
description: string;
42+
showThirdwebBranding: boolean;
43+
};
44+
3445
export function PayTransactionPreview() {
3546
const account = useActiveAccount();
3647
const { theme } = useTheme();
@@ -39,21 +50,98 @@ export function PayTransactionPreview() {
3950
tokenId: 2n,
4051
});
4152

53+
const [options, setOptions] = useState<TransactionWidgetOptions>({
54+
amount: "0.001",
55+
title: nft?.metadata?.name || "NFT Claim",
56+
description: nft?.metadata?.description || "Claim your NFT",
57+
showThirdwebBranding: true,
58+
});
59+
60+
const showBrandingId = useId();
61+
const amountId = useId();
62+
const titleId = useId();
63+
const descriptionId = useId();
64+
4265
return (
43-
<TransactionWidget
44-
amount={"0.001"}
45-
client={THIRDWEB_CLIENT}
46-
description={nft?.metadata?.description}
47-
image={nft?.metadata?.image}
48-
theme={theme === "light" ? "light" : "dark"}
49-
title={nft?.metadata?.name}
50-
transaction={claimTo({
51-
contract: nftContract,
52-
quantity: 1n,
53-
to: account?.address || "",
54-
tokenId: 2n,
55-
})}
56-
/>
66+
<div className="flex flex-col lg:flex-row gap-8">
67+
{/* Controls */}
68+
<div className="lg:w-80 flex flex-col gap-4 p-4 border rounded-lg">
69+
<h3 className="font-semibold text-lg">Widget Options</h3>
70+
71+
{/* Amount */}
72+
<div className="flex flex-col gap-2">
73+
<Label htmlFor={amountId}>Amount (ETH)</Label>
74+
<Input
75+
id={amountId}
76+
value={options.amount}
77+
onChange={(e) =>
78+
setOptions((prev) => ({ ...prev, amount: e.target.value }))
79+
}
80+
placeholder="0.001"
81+
/>
82+
</div>
83+
84+
{/* Title */}
85+
<div className="flex flex-col gap-2">
86+
<Label htmlFor={titleId}>Title</Label>
87+
<Input
88+
id={titleId}
89+
value={options.title}
90+
onChange={(e) =>
91+
setOptions((prev) => ({ ...prev, title: e.target.value }))
92+
}
93+
placeholder="NFT Claim"
94+
/>
95+
</div>
96+
97+
{/* Description */}
98+
<div className="flex flex-col gap-2">
99+
<Label htmlFor={descriptionId}>Description</Label>
100+
<Input
101+
id={descriptionId}
102+
value={options.description}
103+
onChange={(e) =>
104+
setOptions((prev) => ({ ...prev, description: e.target.value }))
105+
}
106+
placeholder="Claim your NFT"
107+
/>
108+
</div>
109+
110+
{/* Show Thirdweb Branding */}
111+
<div className="flex items-center gap-2">
112+
<Checkbox
113+
id={showBrandingId}
114+
checked={options.showThirdwebBranding}
115+
onCheckedChange={(checked) =>
116+
setOptions((prev) => ({
117+
...prev,
118+
showThirdwebBranding: checked === true,
119+
}))
120+
}
121+
/>
122+
<Label htmlFor={showBrandingId}>Show thirdweb branding</Label>
123+
</div>
124+
</div>
125+
126+
{/* Widget Preview */}
127+
<div className="flex-1 flex flex-col items-center justify-center">
128+
<TransactionWidget
129+
amount={options.amount}
130+
client={THIRDWEB_CLIENT}
131+
description={options.description}
132+
image={nft?.metadata?.image}
133+
theme={theme === "light" ? "light" : "dark"}
134+
title={options.title}
135+
transaction={claimTo({
136+
contract: nftContract,
137+
quantity: 1n,
138+
to: account?.address || "",
139+
tokenId: 2n,
140+
})}
141+
showThirdwebBranding={options.showThirdwebBranding}
142+
/>
143+
</div>
144+
</div>
57145
);
58146
}
59147

‎apps/playground-web/src/components/universal-bridge/buy.tsx‎

Lines changed: 79 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,94 @@
11
"use client";
22

33
import { useTheme } from "next-themes";
4+
import { useState, useId } from "react";
45
import { NATIVE_TOKEN_ADDRESS } from "thirdweb";
56
import { arbitrum } from "thirdweb/chains";
67
import { BuyWidget } from "thirdweb/react";
78
import { THIRDWEB_CLIENT } from "@/lib/client";
9+
import { Checkbox } from "@/components/ui/checkbox";
10+
import { Label } from "@/components/ui/label";
11+
import { Input } from "@/components/ui/input";
12+
13+
type BuyWidgetOptions = {
14+
amount: string;
15+
title: string;
16+
showThirdwebBranding: boolean;
17+
};
818

919
export function StyledBuyWidgetPreview() {
1020
const { theme } = useTheme();
21+
const [options, setOptions] = useState<BuyWidgetOptions>({
22+
amount: "0.1",
23+
title: "Get Funds",
24+
showThirdwebBranding: true,
25+
});
26+
27+
const showBrandingId = useId();
28+
const amountId = useId();
29+
const titleId = useId();
1130

1231
return (
13-
<div className="flex flex-col items-center justify-center">
14-
<div className="h-10" />
15-
<BuyWidget
16-
amount={"0.1"}
17-
chain={arbitrum}
18-
client={THIRDWEB_CLIENT}
19-
theme={theme === "light" ? "light" : "dark"}
20-
title="Get Funds"
21-
tokenAddress={NATIVE_TOKEN_ADDRESS}
22-
/>
32+
<div className="flex flex-col lg:flex-row gap-8">
33+
{/* Controls */}
34+
<div className="lg:w-80 flex flex-col gap-4 p-4 border rounded-lg">
35+
<h3 className="font-semibold text-lg">Widget Options</h3>
36+
37+
{/* Amount */}
38+
<div className="flex flex-col gap-2">
39+
<Label htmlFor={amountId}>Amount (ETH)</Label>
40+
<Input
41+
id={amountId}
42+
value={options.amount}
43+
onChange={(e) =>
44+
setOptions((prev) => ({ ...prev, amount: e.target.value }))
45+
}
46+
placeholder="0.1"
47+
/>
48+
</div>
49+
50+
{/* Title */}
51+
<div className="flex flex-col gap-2">
52+
<Label htmlFor={titleId}>Title</Label>
53+
<Input
54+
id={titleId}
55+
value={options.title}
56+
onChange={(e) =>
57+
setOptions((prev) => ({ ...prev, title: e.target.value }))
58+
}
59+
placeholder="Get Funds"
60+
/>
61+
</div>
62+
63+
{/* Show Thirdweb Branding */}
64+
<div className="flex items-center gap-2">
65+
<Checkbox
66+
id={showBrandingId}
67+
checked={options.showThirdwebBranding}
68+
onCheckedChange={(checked) =>
69+
setOptions((prev) => ({
70+
...prev,
71+
showThirdwebBranding: checked === true,
72+
}))
73+
}
74+
/>
75+
<Label htmlFor={showBrandingId}>Show thirdweb branding</Label>
76+
</div>
77+
</div>
78+
79+
{/* Widget Preview */}
80+
<div className="flex-1 flex flex-col items-center justify-center">
81+
<div className="h-10" />
82+
<BuyWidget
83+
amount={options.amount}
84+
chain={arbitrum}
85+
client={THIRDWEB_CLIENT}
86+
theme={theme === "light" ? "light" : "dark"}
87+
title={options.title}
88+
tokenAddress={NATIVE_TOKEN_ADDRESS}
89+
showThirdwebBranding={options.showThirdwebBranding}
90+
/>
91+
</div>
2392
</div>
2493
);
2594
}

0 commit comments

Comments
 (0)