thirdweb 5.108.5 → 5.108.7

package/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx

@@ -1,21 +1,22 @@
 import type { Token } from "../../../../../bridge/index.js";
 import { defineChain } from "../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
+import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
+import type { PreparedTransaction } from "../../../../../transaction/prepare-transaction.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import { radius, spacing } from "../../../../core/design-system/index.js";
 import { useTransactionDetails } from "../../../../core/hooks/useTransactionDetails.js";
-import type { PaymentMethod } from "../../../../core/machines/paymentMachine.js";
 import { getFiatCurrencyIcon } from "../../ConnectWallet/screens/Buy/fiat/currencies.js";
 import { FiatValue } from "../../ConnectWallet/screens/Buy/swap/FiatValue.js";
 import { StepConnectorArrow } from "../../ConnectWallet/screens/Buy/swap/StepConnector.js";
 import { WalletRow } from "../../ConnectWallet/screens/Buy/swap/WalletRow.js";
 import { Container } from "../../components/basic.js";
 import { Text } from "../../components/text.js";
-import type { UIOptions } from "../BridgeOrchestrator.js";
 import { TokenBalanceRow } from "../common/TokenBalanceRow.js";
+import type { ModeInfo, PaymentMethod } from "../types.js";
 
 export function PaymentOverview(props: {
-  uiOptions: UIOptions;
+  currency: SupportedFiatCurrency;
   receiver: string;
   sender?: string;
   client: ThirdwebClient;
@@ -23,6 +24,11 @@ export function PaymentOverview(props: {
   toToken: Token;
   fromAmount: string;
   toAmount: string;
+  metadata: {
+    title: string | undefined;
+    description: string | undefined;
+  };
+  modeInfo: ModeInfo;
 }) {
   const theme = useCustomTheme();
   const sender =
@@ -32,6 +38,7 @@ export function PaymentOverview(props: {
       : undefined);
   const isDifferentRecipient =
     props.receiver.toLowerCase() !== sender?.toLowerCase();
+
   return (
     <Container>
       {/* Sell */}
@@ -63,7 +70,7 @@ export function PaymentOverview(props: {
         )}
         {props.paymentMethod.type === "wallet" && (
           <TokenBalanceRow
-            currency={props.uiOptions.currency}
+            currency={props.currency}
             amount={props.fromAmount}
             client={props.client}
             onClick={() => {}}
@@ -134,7 +141,7 @@ export function PaymentOverview(props: {
             />
           </Container>
         )}
-        {props.uiOptions.mode === "direct_payment" && (
+        {props.modeInfo.mode === "direct_payment" && (
           <Container
             center="y"
             flex="row"
@@ -144,11 +151,11 @@ export function PaymentOverview(props: {
           >
             <Container center="y" flex="column" gap="3xs" style={{ flex: 1 }}>
               <Text color="primaryText" size="sm" style={{ fontWeight: 600 }}>
-                {props.uiOptions.metadata?.title || "Payment"}
+                {props.metadata.title || "Payment"}
               </Text>
-              {props.uiOptions.metadata?.description && (
+              {props.metadata.description && (
                 <Text color="secondaryText" size="xs">
-                  {props.uiOptions.metadata.description}
+                  {props.metadata.description}
                 </Text>
               )}
             </Container>
@@ -159,24 +166,24 @@ export function PaymentOverview(props: {
               style={{ alignItems: "flex-end" }}
             >
               <FiatValue
-                currency={props.uiOptions.currency}
+                currency={props.currency}
                 chain={defineChain(props.toToken.chainId)}
                 client={props.client}
                 color="primaryText"
                 size="sm"
                 token={props.toToken}
-                tokenAmount={props.uiOptions.paymentInfo.amount}
+                tokenAmount={props.modeInfo.paymentInfo.amount}
                 weight={600}
               />
               <Text color="secondaryText" size="xs">
-                {props.uiOptions.paymentInfo.amount} {props.toToken.symbol}
+                {props.modeInfo.paymentInfo.amount} {props.toToken.symbol}
               </Text>
             </Container>
           </Container>
         )}
-        {props.uiOptions.mode === "fund_wallet" && (
+        {props.modeInfo.mode === "fund_wallet" && (
           <TokenBalanceRow
-            currency={props.uiOptions.currency}
+            currency={props.currency}
             amount={props.toAmount}
             client={props.client}
             onClick={() => {}}
@@ -188,11 +195,13 @@ export function PaymentOverview(props: {
             token={props.toToken}
           />
         )}
-        {props.uiOptions.mode === "transaction" && (
+        {props.modeInfo.mode === "transaction" && (
           <TransactionOverViewCompact
             client={props.client}
             paymentMethod={props.paymentMethod}
-            uiOptions={props.uiOptions}
+            currency={props.currency}
+            transaction={props.modeInfo.transaction}
+            metadata={props.metadata}
           />
         )}
       </Container>
@@ -201,16 +210,21 @@ export function PaymentOverview(props: {
 }
 
 const TransactionOverViewCompact = (props: {
-  uiOptions: Extract<UIOptions, { mode: "transaction" }>;
+  transaction: PreparedTransaction;
+  currency: SupportedFiatCurrency;
   paymentMethod: PaymentMethod;
   client: ThirdwebClient;
+  metadata: {
+    title: string | undefined;
+    description: string | undefined;
+  };
 }) => {
   const theme = useCustomTheme();
   const txInfo = useTransactionDetails({
     client: props.client,
-    transaction: props.uiOptions.transaction,
+    transaction: props.transaction,
     wallet: props.paymentMethod.payerWallet,
-    currency: props.uiOptions.currency,
+    currency: props.currency,
   });
 
   if (!txInfo.data) {
@@ -234,7 +248,7 @@ const TransactionOverViewCompact = (props: {
             }}
           />
           {/* Description skeleton - only if metadata exists */}
-          {props.uiOptions.metadata?.description && (
+          {props.metadata.description && (
             <div
               style={{
                 backgroundColor: theme.colors.skeletonBg,
@@ -275,11 +289,11 @@ const TransactionOverViewCompact = (props: {
     >
       <Container center="y" flex="column" gap="3xs" style={{ flex: 1 }}>
         <Text color="primaryText" size="sm" style={{ fontWeight: 600 }}>
-          {props.uiOptions.metadata?.title || "Transaction"}
+          {props.metadata.title || "Transaction"}
         </Text>
-        {props.uiOptions.metadata?.description && (
+        {props.metadata.description && (
           <Text color="secondaryText" size="xs">
-            {props.uiOptions.metadata.description}
+            {props.metadata.description}
           </Text>
         )}
       </Container>

package/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx

@@ -12,18 +12,18 @@ import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import { usePaymentMethods } from "../../../../core/hooks/usePaymentMethods.js";
 import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
 import { useConnectedWallets } from "../../../../core/hooks/wallets/useConnectedWallets.js";
-import type { PaymentMethod } from "../../../../core/machines/paymentMachine.js";
 import type { SupportedTokens } from "../../../../core/utils/defaultTokens.js";
 import type { ConnectLocale } from "../../ConnectWallet/locale/types.js";
 import { WalletSwitcherConnectionScreen } from "../../ConnectWallet/screens/WalletSwitcherConnectionScreen.js";
 import { Container, ModalHeader } from "../../components/basic.js";
 import { Spacer } from "../../components/Spacer.js";
 import type { PayEmbedConnectOptions } from "../../PayEmbed.js";
+import type { PaymentMethod } from "../types.js";
 import { FiatProviderSelection } from "./FiatProviderSelection.js";
 import { TokenSelection } from "./TokenSelection.js";
 import { WalletFiatSelection } from "./WalletFiatSelection.js";
 
-export interface PaymentSelectionProps {
+type PaymentSelectionProps = {
   /**
    * The destination token to bridge to
    */
@@ -37,7 +37,7 @@ export interface PaymentSelectionProps {
   /**
    * The receiver address
    */
-  receiverAddress?: Address;
+  receiverAddress: Address;
 
   /**
    * ThirdwebClient for API calls
@@ -57,47 +57,41 @@ export interface PaymentSelectionProps {
   /**
    * Called when user wants to go back
    */
-  onBack?: () => void;
+  onBack: () => void;
 
   /**
    * Connect options for wallet connection
    */
-  connectOptions?: PayEmbedConnectOptions;
+  connectOptions: PayEmbedConnectOptions | undefined;
 
   /**
    * Locale for connect UI
    */
   connectLocale: ConnectLocale;
 
-  /**
-   * Whether to include the destination token in the payment methods
-   */
-  includeDestinationToken?: boolean;
-
   /**
    * Allowed payment methods
-   * @default ["crypto", "card"]
    */
-  paymentMethods?: ("crypto" | "card")[];
+  paymentMethods: ("crypto" | "card")[];
 
   /**
    * Fee payer
    */
-  feePayer?: "sender" | "receiver";
+  feePayer: "sender" | "receiver" | undefined;
 
   /**
    * The currency to use for the payment.
    * @default "USD"
    */
-  currency?: SupportedFiatCurrency;
+  currency: SupportedFiatCurrency;
 
   /**
    * The user's ISO 3166 alpha-2 country code. This is used to determine onramp provider support.
    */
   country: string | undefined;
 
-  supportedTokens?: SupportedTokens;
-}
+  supportedTokens: SupportedTokens | undefined;
+};
 
 type Step =
   | { type: "walletSelection" }
@@ -115,8 +109,7 @@ export function PaymentSelection({
   onBack,
   connectOptions,
   connectLocale,
-  includeDestinationToken,
-  paymentMethods = ["crypto", "card"],
+  paymentMethods,
   supportedTokens,
   feePayer,
   currency,
@@ -161,10 +154,6 @@ export function PaymentSelection({
     client,
     destinationAmount,
     destinationToken,
-    includeDestinationToken:
-      includeDestinationToken ||
-      receiverAddress?.toLowerCase() !==
-        payerWallet?.getAccount()?.address?.toLowerCase(),
     payerWallet,
     supportedTokens,
   });

package/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx

@@ -4,7 +4,6 @@ import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import { radius, spacing } from "../../../../core/design-system/index.js";
-import type { PaymentMethod } from "../../../../core/machines/paymentMachine.js";
 import {
   formatCurrencyAmount,
   formatTokenAmount,
@@ -15,6 +14,7 @@ import { Skeleton } from "../../components/Skeleton.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Text } from "../../components/text.js";
 import { TokenAndChain } from "../common/TokenAndChain.js";
+import type { PaymentMethod } from "../types.js";
 
 interface TokenSelectionProps {
   paymentMethods: PaymentMethod[];

package/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx

@@ -13,14 +13,13 @@ import { Container, ModalHeader } from "../../components/basic.js";
 import { Button } from "../../components/buttons.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Text } from "../../components/text.js";
-import type { UIOptions } from "../BridgeOrchestrator.js";
 import { PaymentReceipt } from "./PaymentReceipt.js";
 
-export interface SuccessScreenProps {
+type SuccessScreenProps = {
   /**
    * UI options
    */
-  uiOptions: UIOptions;
+  showContinueWithTx: boolean;
   /**
    * Prepared quote from Bridge.prepare
    */
@@ -46,19 +45,19 @@ export interface SuccessScreenProps {
   /**
    * Whether or not this payment is associated with a payment ID. If it does, we show a different message.
    */
-  hasPaymentId?: boolean;
-}
+  hasPaymentId: boolean;
+};
 
 type ViewState = "success" | "detail";
 
 export function SuccessScreen({
-  uiOptions,
   preparedQuote,
   completedStatuses,
   onDone,
   windowAdapter,
   client,
   hasPaymentId = false,
+  showContinueWithTx,
 }: SuccessScreenProps) {
   const theme = useCustomTheme();
   const [viewState, setViewState] = useState<ViewState>("success");
@@ -137,7 +136,7 @@ export function SuccessScreen({
           <Text center color="secondaryText" size="sm">
             {hasPaymentId
               ? "You can now close this page and return to the application."
-              : uiOptions.mode === "transaction"
+              : showContinueWithTx
                 ? "Click continue to execute your transaction."
                 : "Your payment has been completed successfully."}
           </Text>
@@ -158,7 +157,7 @@ export function SuccessScreen({
 
         {!hasPaymentId && (
           <Button fullWidth onClick={onDone} variant="accent">
-            {uiOptions.mode === "transaction" ? "Continue" : "Done"}
+            {showContinueWithTx ? "Continue" : "Done"}
           </Button>
         )}
       </Container>

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

@@ -260,7 +260,7 @@ export function SwapWidget(props: SwapWidgetProps) {
       style={props.style}
       className={props.className}
     >
-      <SwapWidgetContent {...props} />
+      <SwapWidgetContent {...props} currency={props.currency || "USD"} />
     </SwapWidgetContainer>
   );
 }
@@ -314,7 +314,11 @@ type SwapWidgetScreen =
     >
   | { id: "error"; error: Error; preparedQuote: SwapPreparedQuote };
 
-function SwapWidgetContent(props: SwapWidgetProps) {
+function SwapWidgetContent(
+  props: SwapWidgetProps & {
+    currency: SupportedFiatCurrency;
+  },
+) {
   const [screen, setScreen] = useState<SwapWidgetScreen>({ id: "1:swap-ui" });
   const activeWalletInfo = useActiveWalletInfo();
   const isPersistEnabled = props.persistTokenSelections !== false;
@@ -385,7 +389,7 @@ function SwapWidgetContent(props: SwapWidgetProps) {
         client={props.client}
         theme={props.theme || "dark"}
         connectOptions={props.connectOptions}
-        currency={props.currency || "USD"}
+        currency={props.currency}
         activeWalletInfo={activeWalletInfo}
         buyToken={buyToken}
         sellToken={sellToken}
@@ -412,7 +416,10 @@ function SwapWidgetContent(props: SwapWidgetProps) {
   if (screen.id === "2:preview") {
     return (
       <PaymentDetails
-        title="Review Swap"
+        metadata={{
+          title: "Review Swap",
+          description: undefined,
+        }}
         confirmButtonLabel="Swap"
         client={props.client}
         onBack={() => {
@@ -434,10 +441,9 @@ function SwapWidgetContent(props: SwapWidgetProps) {
           action: screen.mode,
         }}
         preparedQuote={screen.preparedQuote}
-        uiOptions={{
-          destinationToken: screen.buyToken,
+        currency={props.currency}
+        modeInfo={{
           mode: "fund_wallet",
-          currency: props.currency,
         }}
       />
     );
@@ -487,11 +493,7 @@ function SwapWidgetContent(props: SwapWidgetProps) {
           });
         }}
         preparedQuote={screen.preparedQuote}
-        uiOptions={{
-          destinationToken: screen.buyToken,
-          mode: "fund_wallet",
-          currency: props.currency,
-        }}
+        showContinueWithTx={false}
         windowAdapter={webWindowAdapter}
         hasPaymentId={false} // TODO Question: Do we need to expose this as prop?
       />