Skip to content

Commit 498df2c

Browse files
gregfromstlgregfromstl
committed
feat: adds ability to hide tw branding in playground
1 parent ae07298 commit 498df2c

File tree

4 files changed

+77
-53
lines changed

4 files changed

+77
-53
lines changed

‎apps/playground-web/src/app/connect/pay/components/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,7 @@ export type BridgeComponentsPlaygroundOptions = {
2525
transactionData?: string; // Simplified for demo; could be more complex in real implementation
2626

2727
paymentMethods: ("crypto" | "card")[];
28+
29+
showThirdwebBranding: boolean;
2830
};
2931
};

‎apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx‎

Lines changed: 67 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -138,35 +138,35 @@ export function LeftSection(props: {
138138
{(!payOptions.widget ||
139139
payOptions.widget === "buy" ||
140140
payOptions.widget === "checkout") && (
141-
<div className="space-y-4">
142-
{/* Chain selection */}
143-
<div className="flex flex-col gap-2">
144-
<Label>Chain</Label>
145-
<SingleNetworkSelector
146-
chainId={selectedChain}
147-
disableTestnets={true}
148-
onChange={handleChainChange}
149-
placeholder="Select a chain"
150-
/>
151-
</div>
152-
153-
{/* Token selection - only show if chain is selected */}
154-
{selectedChain && (
141+
<div className="space-y-4">
142+
{/* Chain selection */}
155143
<div className="flex flex-col gap-2">
156-
<Label>Token</Label>
157-
<TokenSelector
158-
addNativeTokenIfMissing={true}
144+
<Label>Chain</Label>
145+
<SingleNetworkSelector
159146
chainId={selectedChain}
160-
client={THIRDWEB_CLIENT}
161-
enabled={true}
162-
onChange={handleTokenChange}
163-
placeholder="Select a token"
164-
selectedToken={selectedToken}
147+
disableTestnets={true}
148+
onChange={handleChainChange}
149+
placeholder="Select a chain"
165150
/>
166151
</div>
167-
)}
168-
</div>
169-
)}
152+
153+
{/* Token selection - only show if chain is selected */}
154+
{selectedChain && (
155+
<div className="flex flex-col gap-2">
156+
<Label>Token</Label>
157+
<TokenSelector
158+
addNativeTokenIfMissing={true}
159+
chainId={selectedChain}
160+
client={THIRDWEB_CLIENT}
161+
enabled={true}
162+
onChange={handleTokenChange}
163+
placeholder="Select a token"
164+
selectedToken={selectedToken}
165+
/>
166+
</div>
167+
)}
168+
</div>
169+
)}
170170

171171
{/* Mode-specific form fields */}
172172
<div className="my-2">
@@ -207,14 +207,14 @@ export function LeftSection(props: {
207207
...v.payOptions,
208208
paymentMethods: checked
209209
? [
210-
...v.payOptions.paymentMethods.filter(
211-
(m) => m !== "crypto",
212-
),
213-
"crypto",
214-
]
215-
: v.payOptions.paymentMethods.filter(
210+
...v.payOptions.paymentMethods.filter(
216211
(m) => m !== "crypto",
217212
),
213+
"crypto",
214+
]
215+
: v.payOptions.paymentMethods.filter(
216+
(m) => m !== "crypto",
217+
),
218218
},
219219
}));
220220
}}
@@ -232,14 +232,14 @@ export function LeftSection(props: {
232232
...v.payOptions,
233233
paymentMethods: checked
234234
? [
235-
...v.payOptions.paymentMethods.filter(
236-
(m) => m !== "card",
237-
),
238-
"card",
239-
]
240-
: v.payOptions.paymentMethods.filter(
235+
...v.payOptions.paymentMethods.filter(
241236
(m) => m !== "card",
242237
),
238+
"card",
239+
]
240+
: v.payOptions.paymentMethods.filter(
241+
(m) => m !== "card",
242+
),
243243
},
244244
}));
245245
}}
@@ -307,14 +307,14 @@ export function LeftSection(props: {
307307
...v.payOptions,
308308
paymentMethods: checked
309309
? [
310-
...v.payOptions.paymentMethods.filter(
311-
(m) => m !== "crypto",
312-
),
313-
"crypto",
314-
]
315-
: v.payOptions.paymentMethods.filter(
310+
...v.payOptions.paymentMethods.filter(
316311
(m) => m !== "crypto",
317312
),
313+
"crypto",
314+
]
315+
: v.payOptions.paymentMethods.filter(
316+
(m) => m !== "crypto",
317+
),
318318
},
319319
}));
320320
}}
@@ -334,14 +334,14 @@ export function LeftSection(props: {
334334
...v.payOptions,
335335
paymentMethods: checked
336336
? [
337-
...v.payOptions.paymentMethods.filter(
338-
(m) => m !== "card",
339-
),
340-
"card",
341-
]
342-
: v.payOptions.paymentMethods.filter(
337+
...v.payOptions.paymentMethods.filter(
343338
(m) => m !== "card",
344339
),
340+
"card",
341+
]
342+
: v.payOptions.paymentMethods.filter(
343+
(m) => m !== "card",
344+
),
345345
},
346346
}));
347347
}}
@@ -464,6 +464,24 @@ export function LeftSection(props: {
464464
}}
465465
theme={options.theme}
466466
/>
467+
468+
<div className="my-4 flex items-center gap-2">
469+
<Checkbox
470+
checked={payOptions.showThirdwebBranding}
471+
id={"branding"}
472+
onCheckedChange={(checked) => {
473+
setOptions((v) => ({
474+
...v,
475+
payOptions: {
476+
...v.payOptions,
477+
showThirdwebBranding: checked === true,
478+
},
479+
}));
480+
}}
481+
/>
482+
<Label htmlFor={"branding"}>Show Branding</Label>
483+
</div>
484+
467485
</CollapsibleSection>
468486

469487
<CollapsibleSection icon={FuelIcon} title="Sponsor gas fees">

‎apps/playground-web/src/app/connect/pay/embed/RightSection.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,11 @@ export function RightSection(props: {
4545
const themeObj =
4646
props.options.theme.type === "dark"
4747
? darkTheme({
48-
colors: props.options.theme.darkColorOverrides,
49-
})
48+
colors: props.options.theme.darkColorOverrides,
49+
})
5050
: lightTheme({
51-
colors: props.options.theme.lightColorOverrides,
52-
});
51+
colors: props.options.theme.lightColorOverrides,
52+
});
5353

5454
let embed: React.ReactNode;
5555
if (props.options.payOptions.widget === "buy") {
@@ -64,6 +64,7 @@ export function RightSection(props: {
6464
theme={themeObj}
6565
title={props.options.payOptions.title}
6666
tokenAddress={props.options.payOptions.buyTokenAddress}
67+
showThirdwebBranding={props.options.payOptions.showThirdwebBranding}
6768
/>
6869
);
6970
}
@@ -87,6 +88,7 @@ export function RightSection(props: {
8788
seller={props.options.payOptions.sellerAddress}
8889
theme={themeObj}
8990
tokenAddress={props.options.payOptions.buyTokenAddress}
91+
showThirdwebBranding={props.options.payOptions.showThirdwebBranding}
9092
/>
9193
);
9294
}
@@ -106,6 +108,7 @@ export function RightSection(props: {
106108
to: account?.address || "",
107109
tokenId: 2n,
108110
})}
111+
showThirdwebBranding={props.options.payOptions.showThirdwebBranding}
109112
/>
110113
);
111114
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const defaultConnectOptions: BridgeComponentsPlaygroundOptions = {
1818
title: "",
1919
transactionData: "",
2020
widget: "buy",
21+
showThirdwebBranding: true,
2122
},
2223
theme: {
2324
darkColorOverrides: {},

0 commit comments

Comments
 (0)