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/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..ebeddba572e 100644 --- a/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx +++ b/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx @@ -464,6 +464,23 @@ 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..d7726af45a5 100644 --- a/apps/playground-web/src/app/connect/pay/embed/RightSection.tsx +++ b/apps/playground-web/src/app/connect/pay/embed/RightSection.tsx @@ -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: {}, 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..c1405b7bfb1 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); @@ -224,9 +231,12 @@ export function DirectPayment({ /> )} - - - + {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 419ad19e72b..a4164394de7 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(); @@ -335,9 +342,12 @@ export function FundWallet({ /> )} - - - + {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 6bbb7a93c62..0bc1e1ce47c 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(); @@ -121,10 +128,13 @@ export function TransactionPayment({ }} /> - - - - + {showThirdwebBranding ? ( +
+ + + +
+ ) : null} ); } @@ -342,9 +352,12 @@ export function TransactionPayment({ /> )} - - - + {showThirdwebBranding ? ( +
+ + +
+ ) : null} ); 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} /> ); }