update

Author: MananTank

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/PayEmbedSection.tsx

@@ -64,6 +64,7 @@ export function BuyTokenEmbed(props: {
           }}
           theme={themeObj}
           tokenAddress={props.tokenAddress as `0x${string}`}
+          paymentMethods={["card"]}
         />
       )}
 

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

@@ -25,6 +25,7 @@ import { Spinner } from "../components/Spinner.js";
 import { Text } from "../components/text.js";
 
 interface StepRunnerProps {
+  title?: string;
   request: BridgePrepareRequest;
 
   /**
@@ -64,6 +65,7 @@ interface StepRunnerProps {
 }
 
 export function StepRunner({
+  title,
   request,
   wallet,
   client,
@@ -248,7 +250,7 @@ export function StepRunner({
 
   return (
     <Container flex="column" fullHeight p="md">
-      <ModalHeader onBack={onBack} title="Processing Payment" />
+      <ModalHeader onBack={onBack} title={title || "Processing Payment"} />
 
       <Spacer y="xl" />
 

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

@@ -21,6 +21,9 @@ import type { UIOptions } from "../BridgeOrchestrator.js";
 import { PaymentOverview } from "./PaymentOverview.js";
 
 export interface PaymentDetailsProps {
+  title?: string;
+  confirmButtonLabel?: string;
+
   /**
    * The UI mode to use
    */
@@ -55,6 +58,8 @@ export interface PaymentDetailsProps {
 }
 
 export function PaymentDetails({
+  title,
+  confirmButtonLabel,
   uiOptions,
   client,
   paymentMethod,
@@ -262,7 +267,7 @@ export function PaymentDetails({
 
   return (
     <Container flex="column" fullHeight p="md">
-      <ModalHeader onBack={onBack} title="Payment Details" />
+      <ModalHeader onBack={onBack} title={title || "Payment Details"} />
 
       <Spacer y="xl" />
 
@@ -427,7 +432,7 @@ export function PaymentDetails({
         {/* Action Buttons */}
         <Container flex="column" gap="sm">
           <Button fullWidth onClick={handleConfirm} variant="accent">
-            Confirm Payment
+            {confirmButtonLabel || "Confirm Payment"}
           </Button>
         </Container>
       </Container>

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx

@@ -352,6 +352,8 @@ function SwapWidgetContent(props: SwapWidgetProps) {
   if (screen.id === "2:preview") {
     return (
       <PaymentDetails
+        title="Review Swap"
+        confirmButtonLabel="Swap"
         client={props.client}
         onBack={() => {
           setScreen({ id: "1:swap-ui" });
@@ -384,6 +386,7 @@ function SwapWidgetContent(props: SwapWidgetProps) {
   if (screen.id === "3:execute") {
     return (
       <StepRunner
+        title="Processing Swap"
         autoStart={true}
         client={props.client}
         onBack={() => {

packages/thirdweb/src/stories/Bridge/Swap/SwapWidget.stories.tsx

@@ -1,10 +1,10 @@
-import type { Meta } from "@storybook/react-vite";
+import type { Meta } from "@storybook/react";
 import { lightTheme } from "../../../react/core/design-system/index.js";
 import { SwapWidget } from "../../../react/web/ui/Bridge/swap-widget/SwapWidget.js";
 import { ConnectButton } from "../../../react/web/ui/ConnectWallet/ConnectButton.js";
 import { storyClient } from "../../utils.js";
 
-const meta = {
+const meta: Meta<typeof SwapWidget> = {
   parameters: {
     layout: "centered",
   },
@@ -27,7 +27,7 @@ const meta = {
       );
     },
   ],
-} satisfies Meta<typeof SwapWidget>;
+};
 export default meta;
 
 export function BasicUsage() {