From a2d4cb5909b6df82fd67e0bdfca24cf6927c6aa5 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Wed, 9 Jul 2025 20:19:42 +0000 Subject: [PATCH 1/4] Add option to hide thirdweb branding in bridge widgets Co-authored-by: gregfromstl --- .../web/ui/Bridge/BridgeOrchestrator.tsx | 30 ++++++++++++++++--- .../src/react/web/ui/Bridge/BuyWidget.tsx | 7 +++++ .../react/web/ui/Bridge/CheckoutWidget.tsx | 7 +++++ .../src/react/web/ui/Bridge/DirectPayment.tsx | 9 +++++- .../src/react/web/ui/Bridge/FundWallet.tsx | 9 +++++- .../web/ui/Bridge/TransactionPayment.tsx | 11 +++++-- .../react/web/ui/Bridge/TransactionWidget.tsx | 7 +++++ 7 files changed, 72 insertions(+), 8 deletions(-) diff --git a/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx b/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx index bd8da265144..5577beb3838 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx @@ -120,6 +120,12 @@ export interface BridgeOrchestratorProps { * @default ["crypto", "card"] */ paymentMethods?: ("crypto" | "card")[]; + + /** + * Whether to show thirdweb branding in the widget. + * @default true + */ + showThirdwebBranding?: boolean; } export function BridgeOrchestrator({ @@ -135,6 +141,7 @@ export function BridgeOrchestrator({ paymentLinkId, presetOptions, paymentMethods = ["crypto", "card"], + showThirdwebBranding = true, }: BridgeOrchestratorProps) { // Initialize adapters const adapters = useMemo( @@ -145,6 +152,18 @@ export function BridgeOrchestrator({ [], ); + // Create modified connect options with branding setting + const modifiedConnectOptions = useMemo(() => { + if (!connectOptions) return undefined; + return { + ...connectOptions, + connectModal: { + ...connectOptions.connectModal, + showThirdwebBranding, + }, + }; + }, [connectOptions, showThirdwebBranding]); + // Use the payment machine hook const [state, send] = usePaymentMachine(adapters, uiOptions.mode); @@ -239,10 +258,11 @@ export function BridgeOrchestrator({ {state.value === "init" && uiOptions.mode === "fund_wallet" && ( )} @@ -250,8 +270,9 @@ export function BridgeOrchestrator({ {state.value === "init" && uiOptions.mode === "direct_payment" && ( )} @@ -259,8 +280,9 @@ export function BridgeOrchestrator({ {state.value === "init" && uiOptions.mode === "transaction" && ( )} @@ -272,7 +294,7 @@ export function BridgeOrchestrator({ ); } diff --git a/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx index 6d6be23b94d..6fc43d1a950 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx @@ -98,6 +98,12 @@ export type CheckoutWidgetProps = { className?: string; + /** + * Whether to show thirdweb branding in the widget. + * @default true + */ + showThirdwebBranding?: boolean; + /** * The chain the accepted token is on. */ @@ -353,6 +359,7 @@ export function CheckoutWidget(props: CheckoutWidgetProps) { presetOptions={props.presetOptions} purchaseData={props.purchaseData} receiverAddress={props.seller} + showThirdwebBranding={props.showThirdwebBranding} uiOptions={bridgeDataQuery.data.data} /> ); diff --git a/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx b/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx index 2a89b60fd19..3dd3fa97305 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx @@ -39,6 +39,12 @@ export interface DirectPaymentProps { * Connect options for wallet connection */ connectOptions?: PayEmbedConnectOptions; + + /** + * Whether to show thirdweb branding in the widget. + * @default true + */ + showThirdwebBranding?: boolean; } export function DirectPayment({ @@ -46,6 +52,7 @@ export function DirectPayment({ client, onContinue, connectOptions, + showThirdwebBranding = true, }: DirectPaymentProps) { const activeAccount = useActiveAccount(); const chain = defineChain(uiOptions.paymentInfo.token.chainId); @@ -226,7 +233,7 @@ export function DirectPayment({ - + {showThirdwebBranding && } diff --git a/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx b/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx index 419ad19e72b..3e23ca19bb3 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx @@ -56,6 +56,12 @@ export interface FundWalletProps { * Connect options for wallet connection */ connectOptions?: PayEmbedConnectOptions; + + /** + * Whether to show thirdweb branding in the widget. + * @default true + */ + showThirdwebBranding?: boolean; } export function FundWallet({ @@ -65,6 +71,7 @@ export function FundWallet({ onContinue, presetOptions = [5, 10, 20], connectOptions, + showThirdwebBranding = true, }: FundWalletProps) { const [amount, setAmount] = useState(uiOptions.initialAmount ?? ""); const theme = useCustomTheme(); @@ -337,7 +344,7 @@ export function FundWallet({ - + {showThirdwebBranding && } ); diff --git a/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx b/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx index 6bbb7a93c62..838ad154cf7 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx @@ -48,6 +48,12 @@ export interface TransactionPaymentProps { * Connect options for wallet connection */ connectOptions?: PayEmbedConnectOptions; + + /** + * Whether to show thirdweb branding in the widget. + * @default true + */ + showThirdwebBranding?: boolean; } export function TransactionPayment({ @@ -55,6 +61,7 @@ export function TransactionPayment({ client, onContinue, connectOptions, + showThirdwebBranding = true, }: TransactionPaymentProps) { const theme = useCustomTheme(); const activeAccount = useActiveAccount(); @@ -123,7 +130,7 @@ export function TransactionPayment({ - + {showThirdwebBranding && } ); @@ -344,7 +351,7 @@ export function TransactionPayment({ - + {showThirdwebBranding && } ); diff --git a/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx index a12b111a687..29d2d28ad86 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx @@ -106,6 +106,12 @@ export type TransactionWidgetProps = { className?: string; + /** + * Whether to show thirdweb branding in the widget. + * @default true + */ + showThirdwebBranding?: boolean; + /** * The token address needed to complete this transaction. Leave undefined if no token is required. */ @@ -413,6 +419,7 @@ export function TransactionWidget(props: TransactionWidgetProps) { purchaseData={props.purchaseData} receiverAddress={undefined} uiOptions={bridgeDataQuery.data.data} + showThirdwebBranding={props.showThirdwebBranding} /> ); } From ae072989b14027d0b2b62ceb23d064bef958d80b Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Wed, 9 Jul 2025 20:28:19 +0000 Subject: [PATCH 2/4] Refactor PoweredByThirdweb rendering with conditional wrapper Co-authored-by: gregfromstl --- .../src/react/web/ui/Bridge/DirectPayment.tsx | 9 ++++++--- .../src/react/web/ui/Bridge/FundWallet.tsx | 9 ++++++--- .../web/ui/Bridge/TransactionPayment.tsx | 20 ++++++++++++------- 3 files changed, 25 insertions(+), 13 deletions(-) diff --git a/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx b/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx index 3dd3fa97305..c1405b7bfb1 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx @@ -231,9 +231,12 @@ export function DirectPayment({ /> )} - - - {showThirdwebBranding && } + {showThirdwebBranding ? ( +
+ + +
+ ) : null} diff --git a/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx b/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx index 3e23ca19bb3..a4164394de7 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx @@ -342,9 +342,12 @@ export function FundWallet({ /> )} - - - {showThirdwebBranding && } + {showThirdwebBranding ? ( +
+ + +
+ ) : null} ); diff --git a/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx b/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx index 838ad154cf7..0bc1e1ce47c 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx @@ -128,10 +128,13 @@ export function TransactionPayment({ }} /> - - - {showThirdwebBranding && } - + {showThirdwebBranding ? ( +
+ + + +
+ ) : null} ); } @@ -349,9 +352,12 @@ export function TransactionPayment({ /> )} - - - {showThirdwebBranding && } + {showThirdwebBranding ? ( +
+ + +
+ ) : null} ); From 498df2c63572dbe5b7a1423e91745f94b7c1b139 Mon Sep 17 00:00:00 2001 From: gregfromstl Date: Wed, 9 Jul 2025 14:33:57 -0700 Subject: [PATCH 3/4] feat: adds ability to hide tw branding in playground --- .../src/app/connect/pay/components/types.ts | 2 + .../src/app/connect/pay/embed/LeftSection.tsx | 116 ++++++++++-------- .../app/connect/pay/embed/RightSection.tsx | 11 +- .../src/app/connect/pay/embed/page.tsx | 1 + 4 files changed, 77 insertions(+), 53 deletions(-) diff --git a/apps/playground-web/src/app/connect/pay/components/types.ts b/apps/playground-web/src/app/connect/pay/components/types.ts index 033cb355033..fa4343e2194 100644 --- a/apps/playground-web/src/app/connect/pay/components/types.ts +++ b/apps/playground-web/src/app/connect/pay/components/types.ts @@ -25,5 +25,7 @@ export type BridgeComponentsPlaygroundOptions = { transactionData?: string; // Simplified for demo; could be more complex in real implementation paymentMethods: ("crypto" | "card")[]; + + showThirdwebBranding: boolean; }; }; diff --git a/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx b/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx index 156792ec7e5..a8a0fc54295 100644 --- a/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx +++ b/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx @@ -138,35 +138,35 @@ export function LeftSection(props: { {(!payOptions.widget || payOptions.widget === "buy" || payOptions.widget === "checkout") && ( -
- {/* Chain selection */} -
- - -
- - {/* Token selection - only show if chain is selected */} - {selectedChain && ( +
+ {/* Chain selection */}
- - Chain +
- )} -
- )} + + {/* Token selection - only show if chain is selected */} + {selectedChain && ( +
+ + +
+ )} +
+ )} {/* Mode-specific form fields */}
@@ -207,14 +207,14 @@ export function LeftSection(props: { ...v.payOptions, paymentMethods: checked ? [ - ...v.payOptions.paymentMethods.filter( - (m) => m !== "crypto", - ), - "crypto", - ] - : v.payOptions.paymentMethods.filter( + ...v.payOptions.paymentMethods.filter( (m) => m !== "crypto", ), + "crypto", + ] + : v.payOptions.paymentMethods.filter( + (m) => m !== "crypto", + ), }, })); }} @@ -232,14 +232,14 @@ export function LeftSection(props: { ...v.payOptions, paymentMethods: checked ? [ - ...v.payOptions.paymentMethods.filter( - (m) => m !== "card", - ), - "card", - ] - : v.payOptions.paymentMethods.filter( + ...v.payOptions.paymentMethods.filter( (m) => m !== "card", ), + "card", + ] + : v.payOptions.paymentMethods.filter( + (m) => m !== "card", + ), }, })); }} @@ -307,14 +307,14 @@ export function LeftSection(props: { ...v.payOptions, paymentMethods: checked ? [ - ...v.payOptions.paymentMethods.filter( - (m) => m !== "crypto", - ), - "crypto", - ] - : v.payOptions.paymentMethods.filter( + ...v.payOptions.paymentMethods.filter( (m) => m !== "crypto", ), + "crypto", + ] + : v.payOptions.paymentMethods.filter( + (m) => m !== "crypto", + ), }, })); }} @@ -334,14 +334,14 @@ export function LeftSection(props: { ...v.payOptions, paymentMethods: checked ? [ - ...v.payOptions.paymentMethods.filter( - (m) => m !== "card", - ), - "card", - ] - : v.payOptions.paymentMethods.filter( + ...v.payOptions.paymentMethods.filter( (m) => m !== "card", ), + "card", + ] + : v.payOptions.paymentMethods.filter( + (m) => m !== "card", + ), }, })); }} @@ -464,6 +464,24 @@ export function LeftSection(props: { }} theme={options.theme} /> + +
+ { + setOptions((v) => ({ + ...v, + payOptions: { + ...v.payOptions, + showThirdwebBranding: checked === true, + }, + })); + }} + /> + +
+ diff --git a/apps/playground-web/src/app/connect/pay/embed/RightSection.tsx b/apps/playground-web/src/app/connect/pay/embed/RightSection.tsx index 9419111cbc5..76df7d1f882 100644 --- a/apps/playground-web/src/app/connect/pay/embed/RightSection.tsx +++ b/apps/playground-web/src/app/connect/pay/embed/RightSection.tsx @@ -45,11 +45,11 @@ export function RightSection(props: { const themeObj = props.options.theme.type === "dark" ? darkTheme({ - colors: props.options.theme.darkColorOverrides, - }) + colors: props.options.theme.darkColorOverrides, + }) : lightTheme({ - colors: props.options.theme.lightColorOverrides, - }); + colors: props.options.theme.lightColorOverrides, + }); let embed: React.ReactNode; if (props.options.payOptions.widget === "buy") { @@ -64,6 +64,7 @@ export function RightSection(props: { theme={themeObj} title={props.options.payOptions.title} tokenAddress={props.options.payOptions.buyTokenAddress} + showThirdwebBranding={props.options.payOptions.showThirdwebBranding} /> ); } @@ -87,6 +88,7 @@ export function RightSection(props: { seller={props.options.payOptions.sellerAddress} theme={themeObj} tokenAddress={props.options.payOptions.buyTokenAddress} + showThirdwebBranding={props.options.payOptions.showThirdwebBranding} /> ); } @@ -106,6 +108,7 @@ export function RightSection(props: { to: account?.address || "", tokenId: 2n, })} + showThirdwebBranding={props.options.payOptions.showThirdwebBranding} /> ); } diff --git a/apps/playground-web/src/app/connect/pay/embed/page.tsx b/apps/playground-web/src/app/connect/pay/embed/page.tsx index 67f24686e98..b555db63443 100644 --- a/apps/playground-web/src/app/connect/pay/embed/page.tsx +++ b/apps/playground-web/src/app/connect/pay/embed/page.tsx @@ -18,6 +18,7 @@ const defaultConnectOptions: BridgeComponentsPlaygroundOptions = { title: "", transactionData: "", widget: "buy", + showThirdwebBranding: true, }, theme: { darkColorOverrides: {}, From a94f49946458aa87cff519373ac9f16940fb94a9 Mon Sep 17 00:00:00 2001 From: gregfromstl Date: Wed, 9 Jul 2025 14:35:16 -0700 Subject: [PATCH 4/4] changeset --- .changeset/hip-mammals-sip.md | 5 + .../src/app/connect/pay/embed/LeftSection.tsx | 99 +++++++++---------- .../app/connect/pay/embed/RightSection.tsx | 8 +- 3 files changed, 58 insertions(+), 54 deletions(-) create mode 100644 .changeset/hip-mammals-sip.md diff --git a/.changeset/hip-mammals-sip.md b/.changeset/hip-mammals-sip.md new file mode 100644 index 00000000000..fd80dcb46a6 --- /dev/null +++ b/.changeset/hip-mammals-sip.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Adds the ability to hide thirdweb branding in the payment widgets with showThirdwebBranding diff --git a/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx b/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx index a8a0fc54295..ebeddba572e 100644 --- a/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx +++ b/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx @@ -138,35 +138,35 @@ export function LeftSection(props: { {(!payOptions.widget || payOptions.widget === "buy" || payOptions.widget === "checkout") && ( -
- {/* Chain selection */} +
+ {/* Chain selection */} +
+ + +
+ + {/* Token selection - only show if chain is selected */} + {selectedChain && (
- - Token +
- - {/* Token selection - only show if chain is selected */} - {selectedChain && ( -
- - -
- )} -
- )} + )} +
+ )} {/* Mode-specific form fields */}
@@ -207,14 +207,14 @@ export function LeftSection(props: { ...v.payOptions, paymentMethods: checked ? [ - ...v.payOptions.paymentMethods.filter( + ...v.payOptions.paymentMethods.filter( + (m) => m !== "crypto", + ), + "crypto", + ] + : v.payOptions.paymentMethods.filter( (m) => m !== "crypto", ), - "crypto", - ] - : v.payOptions.paymentMethods.filter( - (m) => m !== "crypto", - ), }, })); }} @@ -232,14 +232,14 @@ export function LeftSection(props: { ...v.payOptions, paymentMethods: checked ? [ - ...v.payOptions.paymentMethods.filter( + ...v.payOptions.paymentMethods.filter( + (m) => m !== "card", + ), + "card", + ] + : v.payOptions.paymentMethods.filter( (m) => m !== "card", ), - "card", - ] - : v.payOptions.paymentMethods.filter( - (m) => m !== "card", - ), }, })); }} @@ -307,14 +307,14 @@ export function LeftSection(props: { ...v.payOptions, paymentMethods: checked ? [ - ...v.payOptions.paymentMethods.filter( + ...v.payOptions.paymentMethods.filter( + (m) => m !== "crypto", + ), + "crypto", + ] + : v.payOptions.paymentMethods.filter( (m) => m !== "crypto", ), - "crypto", - ] - : v.payOptions.paymentMethods.filter( - (m) => m !== "crypto", - ), }, })); }} @@ -334,14 +334,14 @@ export function LeftSection(props: { ...v.payOptions, paymentMethods: checked ? [ - ...v.payOptions.paymentMethods.filter( + ...v.payOptions.paymentMethods.filter( + (m) => m !== "card", + ), + "card", + ] + : v.payOptions.paymentMethods.filter( (m) => m !== "card", ), - "card", - ] - : v.payOptions.paymentMethods.filter( - (m) => m !== "card", - ), }, })); }} @@ -481,7 +481,6 @@ export function LeftSection(props: { />
- diff --git a/apps/playground-web/src/app/connect/pay/embed/RightSection.tsx b/apps/playground-web/src/app/connect/pay/embed/RightSection.tsx index 76df7d1f882..d7726af45a5 100644 --- a/apps/playground-web/src/app/connect/pay/embed/RightSection.tsx +++ b/apps/playground-web/src/app/connect/pay/embed/RightSection.tsx @@ -45,11 +45,11 @@ export function RightSection(props: { const themeObj = props.options.theme.type === "dark" ? darkTheme({ - colors: props.options.theme.darkColorOverrides, - }) + colors: props.options.theme.darkColorOverrides, + }) : lightTheme({ - colors: props.options.theme.lightColorOverrides, - }); + colors: props.options.theme.lightColorOverrides, + }); let embed: React.ReactNode; if (props.options.payOptions.widget === "buy") {