thirdweb 5.88.7 → 5.88.8-nightly-1fa36c1d56758788a8f9053f8929497bacb2b115-20250224233959

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatScreenContent.tsx

@@ -3,7 +3,6 @@ import { useState } from "react";
 import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
-import { isSwapRequiredPostOnramp } from "../../../../../../../pay/buyWithFiat/isSwapRequiredPostOnramp.js";
 import type { FiatProvider } from "../../../../../../../pay/utils/commonTypes.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import {
@@ -33,9 +32,7 @@ import { type ERC20OrNativeToken, isNativeToken } from "../../nativeToken.js";
 import { EstimatedTimeAndFees } from "../EstimatedTimeAndFees.js";
 import { PayWithCreditCard } from "../PayWIthCreditCard.js";
 import type { SelectedScreen } from "../main/types.js";
-import { openOnrampPopup } from "../openOnRamppopup.js";
 import { FiatFees } from "../swap/Fees.js";
-import { addPendingTx } from "../swap/pendingSwapTx.js";
 import type { PayerInfo } from "../types.js";
 import { Providers } from "./Providers.js";
 import type { CurrencyMeta } from "./currencies.js";
@@ -113,25 +110,9 @@ export function FiatScreenContent(props: {
       return;
     }
 
-    const hasTwoSteps = isSwapRequiredPostOnramp(fiatQuoteQuery.data);
-    let openedWindow: Window | null = null;
-
-    if (!hasTwoSteps) {
-      openedWindow = openOnrampPopup(
-        fiatQuoteQuery.data.onRampLink,
-        typeof props.theme === "string" ? props.theme : props.theme.type,
-      );
-
-      addPendingTx({
-        type: "fiat",
-        intentId: fiatQuoteQuery.data.intentId,
-      });
-    }
-
     setScreen({
       id: "fiat-flow",
       quote: fiatQuoteQuery.data,
-      openedWindow,
     });
   }
 

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx

@@ -7,7 +7,6 @@ import { useMemo } from "react";
 import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
-import type { BuyWithFiatQuote } from "../../../../../../../pay/buyWithFiat/getQuote.js";
 import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import { formatExplorerTxUrl } from "../../../../../../../utils/url.js";
@@ -36,7 +35,7 @@ import {
   type FiatStatusMeta,
   getBuyWithFiatStatusMeta,
 } from "../pay-transactions/statusMeta.js";
-import { getCurrencyMeta } from "./currencies.js";
+import { getCurrencyMeta, getFiatIcon } from "./currencies.js";
 
 export type BuyWithFiatPartialQuote = {
   fromCurrencySymbol: string;
@@ -58,31 +57,6 @@ export type BuyWithFiatPartialQuote = {
   };
 };
 
-export function fiatQuoteToPartialQuote(
-  quote: BuyWithFiatQuote,
-): BuyWithFiatPartialQuote {
-  const data: BuyWithFiatPartialQuote = {
-    fromCurrencyAmount: quote.fromCurrencyWithFees.amount,
-    fromCurrencySymbol: quote.fromCurrencyWithFees.currencySymbol,
-    onRampTokenAmount: quote.onRampToken.amount,
-    toTokenAmount: quote.estimatedToAmountMin,
-    onRampToken: {
-      chainId: quote.onRampToken.token.chainId,
-      tokenAddress: quote.onRampToken.token.tokenAddress,
-      name: quote.onRampToken.token.name,
-      symbol: quote.onRampToken.token.symbol,
-    },
-    toToken: {
-      chainId: quote.toToken.chainId,
-      tokenAddress: quote.toToken.tokenAddress,
-      name: quote.toToken.name,
-      symbol: quote.toToken.symbol,
-    },
-  };
-
-  return data;
-}
-
 export function FiatSteps(props: {
   title: string;
   partialQuote: BuyWithFiatPartialQuote;
@@ -171,7 +145,7 @@ export function FiatSteps(props: {
     </div>
   );
 
-  const fiatIcon = <currency.icon size={iconSize.sm} />;
+  const fiatIcon = getFiatIcon(currency, "sm");
 
   const onRampTokenIcon = (
     <PayTokenIcon
@@ -541,9 +515,11 @@ function PaymentSubStep(props: {
   );
 }
 
-function StepContainer(props: {
+export function StepContainer(props: {
   state?: FiatStatusMeta["progressStatus"];
   children: React.ReactNode;
+  style?: React.CSSProperties;
+  index?: number;
 }) {
   let color: keyof Theme["colors"] = "borderColor";
   let text: string | undefined;
@@ -576,21 +552,22 @@ function StepContainer(props: {
         borderWidth: "1px",
         borderStyle: "solid",
         position: "relative",
+        ...props.style,
       }}
     >
       {props.children}
       <div
         style={{
           position: "absolute",
-          right: spacing.sm,
-          top: spacing.sm,
+          right: spacing.xs,
+          top: spacing.xs,
           display: "flex",
           gap: spacing.xs,
           alignItems: "center",
         }}
       >
         {props.state && text && (
-          <Text size="sm" color={color}>
+          <Text size="xs" color={color}>
             {text}
           </Text>
         )}

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx

@@ -14,7 +14,7 @@ import { ButtonLink } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
 import { TokenInfoRow } from "../pay-transactions/TokenInfoRow.js";
 import type { FiatStatusMeta } from "../pay-transactions/statusMeta.js";
-import { getCurrencyMeta } from "./currencies.js";
+import { getCurrencyMeta, getFiatIcon } from "./currencies.js";
 
 /**
  * Show a table with the details of a "OnRamp" transaction step in the "Buy with Fiat" flow.
@@ -71,7 +71,7 @@ export function OnRampTxDetailsTable(props: {
           }}
         >
           <Container flex="row" gap="xs" center="y">
-            <currencyMeta.icon size={iconSize.sm} />
+            {getFiatIcon(currencyMeta, "sm")}
             <Text color="primaryText">
               {formatNumber(Number(props.fiat.amount), 2)}{" "}
               {props.fiat.currencySymbol}