Add buttonLabel option to customize action button text in Bridge UI

Co-authored-by: joaquim.verges <[email protected]>

Author: cursoragent

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

@@ -42,6 +42,7 @@ export type UIOptions = Prettify<
       image?: string;
     };
     currency?: SupportedFiatCurrency;
+    buttonLabel?: string;
   } & (
     | {
         mode: "fund_wallet";

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

@@ -180,6 +180,11 @@ export type BuyWidgetProps = {
    * @default "USD"
    */
   currency?: SupportedFiatCurrency;
+
+  /**
+   * Custom label for the main action button.
+   */
+  buttonLabel?: string;
 };
 
 // Enhanced UIOptions to handle unsupported token state
@@ -335,6 +340,7 @@ export function BuyWidget(props: BuyWidgetProps) {
             },
             mode: "fund_wallet",
             currency: props.currency || "USD",
+            buttonLabel: props.buttonLabel,
           },
           type: "success",
         };
@@ -364,6 +370,8 @@ export function BuyWidget(props: BuyWidgetProps) {
             title: props.title,
           },
           mode: "fund_wallet",
+          currency: props.currency || "USD",
+          buttonLabel: props.buttonLabel,
         },
         type: "success",
       };

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

@@ -186,6 +186,11 @@ export type CheckoutWidgetProps = {
    * @default "USD"
    */
   currency?: SupportedFiatCurrency;
+
+  /**
+   * Custom label for the main action button.
+   */
+  buttonLabel?: string;
 };
 
 // Enhanced UIOptions to handle unsupported token state
@@ -310,6 +315,7 @@ export function CheckoutWidget(props: CheckoutWidgetProps) {
           },
           mode: "direct_payment",
           currency: props.currency || "USD",
+          buttonLabel: props.buttonLabel,
           paymentInfo: {
             amount: props.amount,
             feePayer: props.feePayer === "seller" ? "receiver" : "sender",

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

@@ -64,7 +64,11 @@ export function DirectPayment({
     );
   };
 
-  const buyNow = (
+  const buyNow = uiOptions.buttonLabel ? (
+    <Text color="primaryButtonText" size="md">
+      {uiOptions.buttonLabel}
+    </Text>
+  ) : (
     <Container flex="row" gap="3xs">
       <Text color="primaryButtonText" size="md">
         Buy Now ·

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

@@ -336,13 +336,13 @@ export function FundWallet({
           }}
           variant="primary"
         >
-          Buy {amount} {uiOptions.destinationToken.symbol}
+          {uiOptions.buttonLabel || `Buy ${amount} ${uiOptions.destinationToken.symbol}`}
         </Button>
       ) : (
         <ConnectButton
           client={client}
           connectButton={{
-            label: `Buy ${amount} ${uiOptions.destinationToken.symbol}`,
+            label: uiOptions.buttonLabel || `Buy ${amount} ${uiOptions.destinationToken.symbol}`,
           }}
           theme={theme}
           {...connectOptions}

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

@@ -112,7 +112,7 @@ export function TransactionPayment({
     transactionDataQuery.data?.functionInfo?.functionName || "Contract Call";
   const isLoading = transactionDataQuery.isLoading || chainMetadata.isLoading;
 
-  const buttonLabel = `Execute ${functionName}`;
+  const buttonLabel = uiOptions.buttonLabel || `Execute ${functionName}`;
 
   if (isLoading) {
     return (

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

@@ -189,6 +189,11 @@ export type TransactionWidgetProps = {
    * @default "USD"
    */
   currency?: SupportedFiatCurrency;
+
+  /**
+   * Custom label for the main action button.
+   */
+  buttonLabel?: string;
 };
 
 // Enhanced UIOptions to handle unsupported token state
@@ -349,6 +354,7 @@ export function TransactionWidget(props: TransactionWidgetProps) {
       return {
         data: {
           currency: props.currency || "USD",
+          buttonLabel: props.buttonLabel,
           metadata: {
             description: props.description,
             image: props.image,

packages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsx

@@ -223,3 +223,33 @@ export const NoImageLight: Story = {
     },
   },
 };
+
+export const CustomButtonLabel: Story = {
+  args: {
+    theme: "dark",
+    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.customButton,
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        story: "Example showcasing custom button label functionality. The button shows 'Purchase Now' instead of the default 'Buy Now' text.",
+      },
+    },
+  },
+};
+
+export const CustomButtonLabelLight: Story = {
+  args: {
+    theme: "light",
+    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.customButton,
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story: "Light theme version with custom button label 'Purchase Now'.",
+      },
+    },
+  },
+};

packages/thirdweb/src/stories/Bridge/FundWallet.stories.tsx

@@ -194,3 +194,33 @@ export const LargeAmountLight: Story = {
     },
   },
 };
+
+export const CustomButtonLabel: Story = {
+  args: {
+    theme: "dark",
+    uiOptions: FUND_WALLET_UI_OPTIONS.customButton,
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        story: "Example showcasing custom button label functionality. The button shows 'Add Funds Now' instead of the default 'Buy [amount] [symbol]' text.",
+      },
+    },
+  },
+};
+
+export const CustomButtonLabelLight: Story = {
+  args: {
+    theme: "light",
+    uiOptions: FUND_WALLET_UI_OPTIONS.customButton,
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story: "Light theme version with custom button label 'Add Funds Now'.",
+      },
+    },
+  },
+};

packages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsx

@@ -168,3 +168,33 @@ export const ContractInteractionLight: Story = {
     },
   },
 };
+
+export const CustomButtonLabel: Story = {
+  args: {
+    theme: "dark",
+    uiOptions: TRANSACTION_UI_OPTIONS.customButton,
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        story: "Example showcasing custom button label functionality. The button shows 'Execute Now' instead of the default 'Execute [functionName]' text.",
+      },
+    },
+  },
+};
+
+export const CustomButtonLabelLight: Story = {
+  args: {
+    theme: "light",
+    uiOptions: TRANSACTION_UI_OPTIONS.customButton,
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story: "Light theme version with custom button label 'Execute Now'.",
+      },
+    },
+  },
+};