Add option to hide thirdweb branding in bridge widgets

Co-authored-by: gregfromstl <[email protected]>

Author: cursoragent

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,28 +258,31 @@ export function BridgeOrchestrator({
       {state.value === "init" && uiOptions.mode === "fund_wallet" && (
         <FundWallet
           client={client}
-          connectOptions={connectOptions}
+          connectOptions={modifiedConnectOptions}
           onContinue={handleRequirementsResolved}
           presetOptions={presetOptions}
           receiverAddress={receiverAddress}
+          showThirdwebBranding={showThirdwebBranding}
           uiOptions={uiOptions}
         />
       )}
 
       {state.value === "init" && uiOptions.mode === "direct_payment" && (
         <DirectPayment
           client={client}
-          connectOptions={connectOptions}
+          connectOptions={modifiedConnectOptions}
           onContinue={handleRequirementsResolved}
+          showThirdwebBranding={showThirdwebBranding}
           uiOptions={uiOptions}
         />
       )}
 
       {state.value === "init" && uiOptions.mode === "transaction" && (
         <TransactionPayment
           client={client}
-          connectOptions={connectOptions}
+          connectOptions={modifiedConnectOptions}
           onContinue={handleRequirementsResolved}
+          showThirdwebBranding={showThirdwebBranding}
           uiOptions={uiOptions}
         />
       )}
@@ -272,7 +294,7 @@ export function BridgeOrchestrator({
           <PaymentSelection
             client={client}
             connectLocale={connectLocale || en}
-            connectOptions={connectOptions}
+            connectOptions={modifiedConnectOptions}
             destinationAmount={state.context.destinationAmount}
             destinationToken={state.context.destinationToken}
             feePayer={

packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx

@@ -102,6 +102,12 @@ export type BuyWidgetProps = {
 
   className?: string;
 
+  /**
+   * Whether to show thirdweb branding in the widget.
+   * @default true
+   */
+  showThirdwebBranding?: boolean;
+
   /**
    * The chain the accepted token is on.
    */
@@ -391,6 +397,7 @@ export function BuyWidget(props: BuyWidgetProps) {
         purchaseData={props.purchaseData}
         receiverAddress={undefined}
         uiOptions={bridgeDataQuery.data.data}
+        showThirdwebBranding={props.showThirdwebBranding}
       />
     );
   }

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}
       />
     );

packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx

@@ -39,13 +39,20 @@ 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({
   uiOptions,
   client,
   onContinue,
   connectOptions,
+  showThirdwebBranding = true,
 }: DirectPaymentProps) {
   const activeAccount = useActiveAccount();
   const chain = defineChain(uiOptions.paymentInfo.token.chainId);
@@ -226,7 +233,7 @@ export function DirectPayment({
 
         <Spacer y="md" />
 
-        <PoweredByThirdweb />
+        {showThirdwebBranding && <PoweredByThirdweb />}
         <Spacer y="lg" />
       </Container>
     </WithHeader>

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({
 
       <Spacer y="md" />
 
-      <PoweredByThirdweb />
+      {showThirdwebBranding && <PoweredByThirdweb />}
       <Spacer y="lg" />
     </WithHeader>
   );

packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx

@@ -48,13 +48,20 @@ 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({
   uiOptions,
   client,
   onContinue,
   connectOptions,
+  showThirdwebBranding = true,
 }: TransactionPaymentProps) {
   const theme = useCustomTheme();
   const activeAccount = useActiveAccount();
@@ -123,7 +130,7 @@ export function TransactionPayment({
 
         <Spacer y="md" />
 
-        <PoweredByThirdweb />
+        {showThirdwebBranding && <PoweredByThirdweb />}
         <Spacer y="md" />
       </WithHeader>
     );
@@ -344,7 +351,7 @@ export function TransactionPayment({
 
       <Spacer y="md" />
 
-      <PoweredByThirdweb />
+      {showThirdwebBranding && <PoweredByThirdweb />}
       <Spacer y="lg" />
     </WithHeader>
   );

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}
       />
     );
   }