update

Author: MananTank

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

@@ -40,6 +40,7 @@ import { PaymentSelection } from "./payment-selection/PaymentSelection.js";
 import { SuccessScreen } from "./payment-success/SuccessScreen.js";
 import { QuoteLoader } from "./QuoteLoader.js";
 import { StepRunner } from "./StepRunner.js";
+import type { RequiredParams } from "./types.js";
 import { UnsupportedTokenScreen } from "./UnsupportedTokenScreen.js";
 
 export type BuyOrOnrampPrepareResult = Extract<
@@ -472,10 +473,6 @@ type BuyWidgetScreen =
       preparedQuote: BridgePrepareResult | undefined;
     };
 
-type RequiredParams<T extends object, keys extends keyof T> = T & {
-  [K in keys]-?: T[K];
-};
-
 function BridgeWidgetContent(
   props: RequiredParams<
     BuyWidgetProps,
@@ -670,9 +667,8 @@ function BridgeWidgetContent(
         }}
         onComplete={(completedStatuses) => {
           if (
-            // just a type guard - always true
-            screen.preparedQuote?.type === "buy" ||
-            screen.preparedQuote?.type === "onramp"
+            screen.preparedQuote.type === "buy" ||
+            screen.preparedQuote.type === "onramp"
           ) {
             props.onSuccess?.(screen.preparedQuote);
           }

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

@@ -475,6 +475,9 @@ function CheckoutWidgetContent(
     id: "1:init-ui",
   });
 
+  const mappedFeePayer: "receiver" | "sender" =
+    props.feePayer === "seller" ? "receiver" : "sender";
+
   const handleError = useCallback(
     (error: Error, quote: BridgePrepareResult | undefined) => {
       console.error(error);
@@ -532,7 +535,7 @@ function CheckoutWidgetContent(
       <PaymentSelection
         // from props
         client={props.client}
-        feePayer={props.feePayer === "seller" ? "receiver" : "sender"}
+        feePayer={mappedFeePayer}
         connectLocale={props.connectLocale}
         connectOptions={props.connectOptions}
         paymentMethods={props.paymentMethods}
@@ -568,7 +571,7 @@ function CheckoutWidgetContent(
         paymentLinkId={props.paymentLinkId}
         purchaseData={props.purchaseData}
         client={props.client}
-        feePayer={props.feePayer === "seller" ? "receiver" : "sender"}
+        feePayer={mappedFeePayer}
         // others
         sender={undefined}
         mode="direct_payment"
@@ -630,7 +633,7 @@ function CheckoutWidgetContent(
           mode: "direct_payment",
           paymentInfo: {
             amount: screen.destinationAmount,
-            feePayer: props.feePayer === "seller" ? "receiver" : "sender",
+            feePayer: mappedFeePayer,
             sellerAddress: props.seller,
             token: screen.destinationToken,
           },

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

@@ -23,6 +23,8 @@ type DirectPaymentProps = {
     description: string | undefined;
     image: string | undefined;
   };
+  buttonLabel: string | undefined;
+
   /**
    * ThirdwebClient for blockchain interactions
    */
@@ -39,10 +41,8 @@ type DirectPaymentProps = {
 
   /**
    * Whether to show thirdweb branding in the widget.
-   * @default true
    */
-  showThirdwebBranding?: boolean;
-  buttonLabel: string | undefined;
+  showThirdwebBranding: boolean;
 };
 
 export function DirectPayment({

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

@@ -64,7 +64,7 @@ type StepRunnerProps = {
   /**
    * Called when user clicks the back button
    */
-  onBack: (() => void) | undefined;
+  onBack: () => void;
 
   /**
    * Prepared quote to use

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

@@ -489,13 +489,15 @@ type TransactionWidgetScreen =
       destinationAmount: string;
       destinationToken: TokenWithPrices;
       receiverAddress: Address;
+      transaction: PreparedTransaction;
     }
   | {
       id: "buy:2.load-quote";
       destinationAmount: string;
       destinationToken: TokenWithPrices;
       receiverAddress: Address;
       paymentMethod: PaymentMethod;
+      transaction: PreparedTransaction;
     }
   | {
       id: "buy:3.preview";
@@ -505,6 +507,7 @@ type TransactionWidgetScreen =
       destinationToken: TokenWithPrices;
       paymentMethod: PaymentMethod;
       receiverAddress: Address;
+      transaction: PreparedTransaction;
     }
   | {
       id: "buy:4.execute-buy";
@@ -514,11 +517,13 @@ type TransactionWidgetScreen =
       destinationToken: TokenWithPrices;
       paymentMethod: PaymentMethod;
       receiverAddress: Address;
+      transaction: PreparedTransaction;
     }
   | {
       id: "buy:5.success";
       completedStatuses: CompletedStatusResult[];
       preparedQuote: BridgePrepareResult;
+      transaction: PreparedTransaction;
     }
   | {
       id: "execute-tx";
@@ -567,11 +572,12 @@ function TransactionWidgetContent(
           image: props.image,
         }}
         connectOptions={props.connectOptions}
-        onContinue={(amount, token, receiverAddress) => {
+        onContinue={(destinationAmount, destinationToken, receiverAddress) => {
           setScreen({
             id: "buy:1.methodSelection",
-            destinationAmount: amount,
-            destinationToken: token,
+            destinationAmount,
+            destinationToken,
+            transaction: props.transaction,
             receiverAddress,
           });
         }}
@@ -594,14 +600,14 @@ function TransactionWidgetContent(
       <PaymentSelection
         // from props
         client={props.client}
-        feePayer={props.feePayer === "seller" ? "receiver" : "sender"}
         connectLocale={props.connectLocale}
         connectOptions={props.connectOptions}
         paymentMethods={props.paymentMethods}
         currency={props.currency}
         supportedTokens={props.supportedTokens}
         country={props.country}
         // others
+        feePayer={undefined}
         destinationToken={screen.destinationToken}
         destinationAmount={screen.destinationAmount}
         receiverAddress={screen.receiverAddress}
@@ -630,8 +636,8 @@ function TransactionWidgetContent(
         paymentLinkId={props.paymentLinkId}
         purchaseData={props.purchaseData}
         client={props.client}
-        feePayer={props.feePayer === "seller" ? "receiver" : "sender"}
         // others
+        feePayer={undefined}
         sender={undefined}
         mode="transaction"
         amount={screen.destinationAmount}
@@ -690,7 +696,7 @@ function TransactionWidgetContent(
         preparedQuote={screen.preparedQuote}
         modeInfo={{
           mode: "transaction",
-          transaction: props.transaction,
+          transaction: screen.transaction,
         }}
       />
     );
@@ -716,8 +722,8 @@ function TransactionWidgetContent(
         }}
         onComplete={(completedStatuses) => {
           setScreen({
+            ...screen,
             id: "buy:5.success",
-            preparedQuote: screen.preparedQuote,
             completedStatuses,
           });
         }}
@@ -734,10 +740,10 @@ function TransactionWidgetContent(
         // from props
         client={props.client}
         hasPaymentId={!!props.paymentLinkId}
-        completedStatuses={screen.completedStatuses}
         // others
+        completedStatuses={screen.completedStatuses}
         onDone={() => {
-          setScreen({ id: "execute-tx", transaction: props.transaction });
+          setScreen({ id: "execute-tx", transaction: screen.transaction });
         }}
         preparedQuote={screen.preparedQuote}
         showContinueWithTx={true}

packages/thirdweb/src/react/web/ui/Bridge/types.ts

@@ -20,3 +20,7 @@ export type ModeInfo =
   | {
       mode: "fund_wallet";
     };
+
+export type RequiredParams<T extends object, keys extends keyof T> = T & {
+  [K in keys]-?: T[K];
+};