thirdweb 5.100.0-nightly-713ebe0a2d6d8a409e41ce0f0317fc34b1f221bb-20250520000414 → 5.100.0

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

@@ -1,519 +1,15 @@
-import {
-  Cross1Icon,
-  ExternalLinkIcon,
-  TriangleDownIcon,
-} from "@radix-ui/react-icons";
-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 { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
-import { formatNumber } from "../../../../../../../utils/formatNumber.js";
-import { formatExplorerTxUrl } from "../../../../../../../utils/url.js";
+import { Cross1Icon } from "@radix-ui/react-icons";
 import {
   type Theme,
-  fontSize,
   iconSize,
   radius,
   spacing,
 } from "../../../../../../core/design-system/index.js";
-import {
-  useChainExplorers,
-  useChainName,
-} from "../../../../../../core/hooks/others/useChainQuery.js";
-import type { TokenInfo } from "../../../../../../core/utils/defaultTokens.js";
-import { Spacer } from "../../../../components/Spacer.js";
 import { Spinner } from "../../../../components/Spinner.js";
-import { Container, Line, ModalHeader } from "../../../../components/basic.js";
-import { Button, ButtonLink } from "../../../../components/buttons.js";
+import { Container } from "../../../../components/basic.js";
 import { Text } from "../../../../components/text.js";
-import { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
-import { type ERC20OrNativeToken, NATIVE_TOKEN } from "../../nativeToken.js";
-import { PayTokenIcon } from "../PayTokenIcon.js";
 import { StepIcon } from "../Stepper.js";
-import {
-  type FiatStatusMeta,
-  getBuyWithFiatStatusMeta,
-} from "../pay-transactions/statusMeta.js";
-import { getCurrencyMeta, getFiatIcon } from "./currencies.js";
-
-export type BuyWithFiatPartialQuote = {
-  fromCurrencySymbol: string;
-  fromCurrencyAmount: string;
-  onRampTokenAmount: string;
-  toTokenAmount: string;
-  onRampToken: {
-    tokenAddress: string;
-    name?: string;
-    symbol?: string;
-    chainId: number;
-  };
-
-  toToken: {
-    tokenAddress: string;
-    name?: string;
-    symbol?: string;
-    chainId: number;
-  };
-};
-
-export function FiatSteps(props: {
-  title: string;
-  partialQuote: BuyWithFiatPartialQuote;
-  status?: BuyWithFiatStatus;
-  onBack: () => void;
-  client: ThirdwebClient;
-  step: number;
-  onContinue: () => void;
-}) {
-  const statusMeta = props.status
-    ? getBuyWithFiatStatusMeta(props.status)
-    : undefined;
-
-  const {
-    toToken: toTokenMeta,
-    onRampToken: onRampTokenMeta,
-    onRampTokenAmount,
-    fromCurrencySymbol,
-    fromCurrencyAmount,
-    toTokenAmount,
-  } = props.partialQuote;
-
-  const currency = getCurrencyMeta(fromCurrencySymbol);
-  const isPartialSuccess = statusMeta?.progressStatus === "partialSuccess";
-
-  const toChain = useMemo(
-    () => getCachedChain(toTokenMeta.chainId),
-    [toTokenMeta.chainId],
-  );
-
-  const destinationChain = useMemo(() => {
-    if (props.status?.status !== "NOT_FOUND" && props.status?.destination) {
-      return getCachedChain(props.status?.destination.token.chainId);
-    }
-
-    return undefined;
-  }, [props.status]);
-
-  const toToken: ERC20OrNativeToken = useMemo(() => {
-    if (toTokenMeta.tokenAddress === NATIVE_TOKEN_ADDRESS) {
-      return NATIVE_TOKEN;
-    }
-
-    const tokenInfo: TokenInfo = {
-      address: toTokenMeta.tokenAddress,
-      name: toTokenMeta.name || "",
-      symbol: toTokenMeta.symbol || "",
-      // TODO: when icon is available in endpoint
-      // icon: toTokenMeta.icon
-    };
-    return tokenInfo;
-  }, [toTokenMeta]);
-
-  const onRampChain = useMemo(
-    () => getCachedChain(onRampTokenMeta.chainId),
-    [onRampTokenMeta.chainId],
-  );
-
-  const onRampToken: ERC20OrNativeToken = useMemo(() => {
-    if (onRampTokenMeta.tokenAddress === NATIVE_TOKEN_ADDRESS) {
-      return NATIVE_TOKEN;
-    }
-
-    const tokenInfo: TokenInfo = {
-      address: onRampTokenMeta.tokenAddress,
-      name: onRampTokenMeta.name || "",
-      symbol: onRampTokenMeta.symbol || "",
-      // TODO: when icon is available in endpoint
-      // icon: onRampTokenMeta.icon,
-    };
-    return tokenInfo;
-  }, [onRampTokenMeta]);
-
-  const onRampName = useChainName(onRampChain);
-  const onRampExplorers = useChainExplorers(onRampChain);
-  const toChainName = useChainName(toChain);
-  const toChainExplorers = useChainExplorers(toChain);
-  const destinationName = useChainName(destinationChain);
-
-  const onRampTokenInfo = (
-    <div>
-      <Text color="primaryText" size="sm">
-        {formatNumber(Number(onRampTokenAmount), 6)}{" "}
-        <TokenSymbol token={onRampToken} chain={onRampChain} size="sm" inline />
-      </Text>
-    </div>
-  );
-
-  const fiatIcon = getFiatIcon(currency, "sm");
-
-  const onRampTokenIcon = (
-    <PayTokenIcon
-      token={onRampToken}
-      chain={onRampChain}
-      size="sm"
-      client={props.client}
-    />
-  );
-
-  const toTokenIcon = (
-    <PayTokenIcon
-      token={toToken}
-      chain={toChain}
-      size="sm"
-      client={props.client}
-    />
-  );
-
-  const onRampChainInfo = <Text size="xs">{onRampName.name}</Text>;
-
-  const partialSuccessToTokenInfo =
-    props.status?.status === "CRYPTO_SWAP_FALLBACK" &&
-    props.status.destination ? (
-      <div>
-        <Text
-          color="secondaryText"
-          size="sm"
-          inline
-          style={{
-            textDecoration: "line-through",
-          }}
-        >
-          {formatNumber(Number(toTokenAmount), 6)}{" "}
-          <TokenSymbol
-            token={toToken}
-            chain={toChain}
-            size="sm"
-            inline
-            color="secondaryText"
-          />
-        </Text>{" "}
-        <Text color="danger" size="sm" inline>
-          {formatNumber(Number(props.status.destination.amount), 6)}{" "}
-          <TokenSymbol
-            token={{
-              address: props.status.destination.token.tokenAddress,
-              name: props.status.destination.token.name || "",
-              symbol: props.status.destination.token.symbol || "",
-            }}
-            chain={toChain}
-            size="sm"
-            inline
-            color="danger"
-          />
-        </Text>
-      </div>
-    ) : null;
-
-  const toTokenInfo = partialSuccessToTokenInfo || (
-    <Text color="primaryText" size="sm">
-      {formatNumber(Number(toTokenAmount), 6)}{" "}
-      <TokenSymbol token={toToken} chain={toChain} size="sm" inline />
-    </Text>
-  );
-
-  const partialSuccessToChainInfo =
-    props.status?.status === "CRYPTO_SWAP_FALLBACK" &&
-    props.status.destination &&
-    props.status.destination.token.chainId !==
-      props.status.quote.toToken.chainId ? (
-      <div>
-        <Text
-          size="xs"
-          inline
-          style={{
-            textDecoration: "line-through",
-          }}
-        >
-          {toChainName.name}
-        </Text>{" "}
-        <Text size="xs" inline>
-          {destinationName.name}
-        </Text>
-      </div>
-    ) : null;
-
-  const toTokehChainInfo = partialSuccessToChainInfo || (
-    <Text size="xs">{toChainName.name}</Text>
-  );
-
-  const onRampTxHash =
-    props.status?.status !== "NOT_FOUND"
-      ? props.status?.source?.transactionHash
-      : undefined;
-
-  const toTokenTxHash =
-    props.status?.status !== "NOT_FOUND"
-      ? props.status?.destination?.transactionHash
-      : undefined;
-
-  const showContinueBtn =
-    !props.status ||
-    props.status.status === "CRYPTO_SWAP_REQUIRED" ||
-    props.status.status === "CRYPTO_SWAP_FAILED";
-
-  function getStep1State(): FiatStatusMeta["progressStatus"] {
-    if (!statusMeta) {
-      if (props.step === 2) {
-        return "completed";
-      }
-      return "actionRequired";
-    }
-
-    if (statusMeta.step === 2) {
-      return "completed";
-    }
-
-    return statusMeta.progressStatus;
-  }
-
-  function getStep2State(): FiatStatusMeta["progressStatus"] | undefined {
-    if (!statusMeta) {
-      if (props.step === 2) {
-        return "actionRequired";
-      }
-      return undefined;
-    }
-
-    if (statusMeta.step === 2) {
-      return statusMeta.progressStatus;
-    }
-
-    return undefined;
-  }
-
-  return (
-    <Container p="lg">
-      <ModalHeader title={props.title} onBack={props.onBack} />
-      <Spacer y="lg" />
-
-      {/* Step 1 */}
-      <PaymentStep
-        title={
-          <Text color="primaryText" size="md">
-            Get{" "}
-            <TokenSymbol
-              token={onRampToken}
-              chain={onRampChain}
-              size="md"
-              inline
-            />{" "}
-            with {props.partialQuote.fromCurrencySymbol}
-          </Text>
-        }
-        step={1}
-        from={{
-          icon: fiatIcon,
-          primaryText: (
-            <Text color="primaryText" size="sm">
-              {formatNumber(Number(fromCurrencyAmount), 6)} {fromCurrencySymbol}
-            </Text>
-          ),
-        }}
-        to={{
-          icon: onRampTokenIcon,
-          primaryText: onRampTokenInfo,
-          secondaryText: onRampChainInfo,
-        }}
-        state={getStep1State()}
-        explorer={
-          onRampExplorers.explorers[0]?.url && onRampTxHash
-            ? {
-                label: "View on Explorer",
-                url: formatExplorerTxUrl(
-                  onRampExplorers.explorers[0]?.url,
-                  onRampTxHash,
-                ),
-              }
-            : undefined
-        }
-      />
-
-      <Spacer y="md" />
-
-      <PaymentStep
-        title={
-          <Text color="primaryText" size="md">
-            Convert{" "}
-            <TokenSymbol
-              token={onRampToken}
-              chain={onRampChain}
-              size="md"
-              inline
-            />{" "}
-            to <TokenSymbol token={toToken} chain={toChain} size="md" inline />
-          </Text>
-        }
-        step={2}
-        from={{
-          icon: onRampTokenIcon,
-          primaryText: onRampTokenInfo,
-          secondaryText: onRampChainInfo,
-        }}
-        to={{
-          icon: toTokenIcon,
-          primaryText: toTokenInfo,
-          secondaryText: toTokehChainInfo,
-        }}
-        state={getStep2State()}
-        explorer={
-          toChainExplorers.explorers[0]?.url && toTokenTxHash
-            ? {
-                label: "View on Explorer",
-                url: formatExplorerTxUrl(
-                  toChainExplorers.explorers[0]?.url,
-                  toTokenTxHash,
-                ),
-              }
-            : undefined
-        }
-      />
-
-      {isPartialSuccess &&
-        props.status &&
-        props.status.status !== "NOT_FOUND" &&
-        props.status.source &&
-        props.status.destination && (
-          <>
-            <Spacer y="md" />
-            <Text color="danger" size="sm" center>
-              Expected {props.status.source?.token.symbol}, Got{" "}
-              {props.status.destination?.token.symbol} instead
-            </Text>
-            <Spacer y="sm" />
-          </>
-        )}
-
-      {showContinueBtn && (
-        <>
-          <Spacer y="md" />
-          <Button variant="accent" onClick={props.onContinue} fullWidth>
-            Continue
-          </Button>
-        </>
-      )}
-    </Container>
-  );
-}
-
-function PaymentStep(props: {
-  step: number;
-  title: React.ReactNode;
-  state?: FiatStatusMeta["progressStatus"];
-  from: {
-    icon: React.ReactNode;
-    primaryText: React.ReactNode;
-    secondaryText?: React.ReactNode;
-  };
-  to: {
-    icon: React.ReactNode;
-    primaryText: React.ReactNode;
-    secondaryText?: React.ReactNode;
-  };
-  iconText?: string;
-  explorer?: {
-    label: string;
-    url: string;
-  };
-}) {
-  return (
-    <StepContainer state={props.state}>
-      <Text size="sm">Step {props.step}</Text>
-      <Spacer y="sm" />
-      {props.title}
-      <Spacer y="sm" />
-      <Line />
-      <Spacer y="md" />
-
-      <PaymentSubStep {...props.from} />
-
-      <Container
-        color="borderColor"
-        style={{
-          paddingLeft: "18px",
-          position: "relative",
-          marginBlock: "3px",
-        }}
-      >
-        {/* TODO - replace this with SVG  */}
-        <div
-          style={{
-            height: "18px",
-            width: "2px",
-            backgroundColor: "currentColor",
-            transform: "translateX(-50%)",
-          }}
-        />
-        <TriangleDownIcon
-          width={iconSize.sm}
-          height={iconSize.sm}
-          style={{
-            position: "absolute",
-            bottom: "0",
-            transform: "translate(-50%, 50%)",
-          }}
-        />
-      </Container>
-
-      <PaymentSubStep {...props.to} />
-
-      {props.explorer && (
-        <>
-          <Spacer y="md" />
-          <ButtonLink
-            variant="outline"
-            fullWidth
-            href={props.explorer.url}
-            style={{
-              fontSize: fontSize.xs,
-              padding: spacing.xs,
-            }}
-            gap="xxs"
-            target="_blank"
-          >
-            {props.explorer.label}
-            <ExternalLinkIcon width={iconSize.xs} height={iconSize.xs} />
-          </ButtonLink>
-        </>
-      )}
-    </StepContainer>
-  );
-}
-
-function PaymentSubStep(props: {
-  icon: React.ReactNode;
-  primaryText: React.ReactNode;
-  secondaryText?: React.ReactNode;
-}) {
-  return (
-    <Container
-      flex="row"
-      gap="sm"
-      center="y"
-      style={{
-        flexWrap: "nowrap",
-      }}
-    >
-      {/* icon */}
-      <Container
-        p="xs"
-        borderColor="borderColor"
-        flex="row"
-        center="both"
-        style={{
-          borderStyle: "solid",
-          borderWidth: "1.5px",
-          borderRadius: radius.lg,
-        }}
-      >
-        {props.icon}
-      </Container>
-      <Container flex="column" gap="xxs">
-        {props.primaryText} {props.secondaryText}
-      </Container>
-    </Container>
-  );
-}
+import type { FiatStatusMeta } from "../pay-transactions/statusMeta.js";
 
 export function StepContainer(props: {
   state?: FiatStatusMeta["progressStatus"];
@@ -535,9 +31,6 @@ export function StepContainer(props: {
   } else if (props.state === "failed") {
     color = "danger";
     text = "Failed";
-  } else if (props.state === "partialSuccess") {
-    color = "danger";
-    text = "Incomplete";
   }
 
   return (

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

@@ -496,19 +496,12 @@ function useOnRampStatus(props: {
 
   switch (statusQuery.data?.status) {
     case "ON_RAMP_TRANSFER_COMPLETED":
-    case "CRYPTO_SWAP_COMPLETED":
-    case "CRYPTO_SWAP_REQUIRED":
       uiStatus = "completed";
       break;
-    case "CRYPTO_SWAP_FALLBACK":
-      uiStatus = "partialSuccess";
-      break;
-    case "ON_RAMP_TRANSFER_FAILED":
     case "PAYMENT_FAILED":
       uiStatus = "failed";
       break;
     case "PENDING_PAYMENT":
-    case "ON_RAMP_TRANSFER_IN_PROGRESS":
       uiStatus = "pending";
       break;
     default:
@@ -522,10 +515,7 @@ function useOnRampStatus(props: {
       return;
     }
 
-    if (
-      statusQuery.data &&
-      (uiStatus === "completed" || uiStatus === "partialSuccess")
-    ) {
+    if (statusQuery.data && uiStatus === "completed") {
       purchaseCbCalled.current = true;
       props.onSuccess(statusQuery.data);
     }
@@ -537,7 +527,7 @@ function useOnRampStatus(props: {
       return;
     }
 
-    if (uiStatus === "completed" || uiStatus === "partialSuccess") {
+    if (uiStatus === "completed") {
       try {
         if (props.openedWindow && !props.openedWindow.closed) {
           props.openedWindow.close();

package/src/react/web/ui/ConnectWallet/screens/Buy/main/types.ts

@@ -1,3 +1,4 @@
+import type { ChainMetadata } from "../../../../../../../chains/types.js";
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
 import type { BuyWithFiatQuote } from "../../../../../../../pay/buyWithFiat/getQuote.js";
 import type { GetWalletBalanceResult } from "../../../../../../../wallets/utils/getWalletBalance.js";
@@ -9,6 +10,7 @@ export type TransactionCostAndData = {
   walletBalance: GetWalletBalanceResult;
   transactionValueWei: bigint;
   gasCostWei: bigint;
+  chainMetadata: ChainMetadata;
 };
 
 export type SelectedScreen =

package/src/react/web/ui/ConnectWallet/screens/Buy/main/useBuyTxStates.ts

@@ -18,6 +18,7 @@ export function useTransactionCostAndData(args: {
   transaction: PreparedTransaction;
   account: Account | undefined;
   supportedDestinations: SupportedChainAndTokens;
+  refetchIntervalMs?: number;
 }) {
   const { transaction, account, supportedDestinations } = args;
   // Compute query key of the transaction first
@@ -62,22 +63,24 @@ export function useTransactionCostAndData(args: {
 
       const erc20Value = await resolvePromisedValue(transaction.erc20Value);
       if (erc20Value) {
-        const [tokenBalance, tokenMeta, gasCostWei] = await Promise.all([
-          getWalletBalance({
-            address: account.address,
-            chain: transaction.chain,
-            client: transaction.client,
-            tokenAddress: erc20Value.tokenAddress,
-          }),
-          getCurrencyMetadata({
-            contract: getContract({
-              address: erc20Value.tokenAddress,
+        const [tokenBalance, tokenMeta, gasCostWei, chainMetadata] =
+          await Promise.all([
+            getWalletBalance({
+              address: account.address,
               chain: transaction.chain,
               client: transaction.client,
+              tokenAddress: erc20Value.tokenAddress,
             }),
-          }),
-          getTransactionGasCost(transaction, account?.address),
-        ]);
+            getCurrencyMetadata({
+              contract: getContract({
+                address: erc20Value.tokenAddress,
+                chain: transaction.chain,
+                client: transaction.client,
+              }),
+            }),
+            getTransactionGasCost(transaction, account?.address),
+            getChainMetadata(transaction.chain),
+          ]);
         const transactionValueWei = erc20Value.amountWei;
         const walletBalance = tokenBalance;
         const currency = {
@@ -95,6 +98,7 @@ export function useTransactionCostAndData(args: {
         return {
           token: currency,
           decimals: tokenMeta.decimals,
+          chainMetadata,
           walletBalance,
           gasCostWei,
           transactionValueWei,
@@ -121,6 +125,7 @@ export function useTransactionCostAndData(args: {
           symbol: chainMetadata.nativeCurrency.symbol,
           icon: chainMetadata.icon?.url,
         },
+        chainMetadata,
         decimals: 18,
         walletBalance,
         gasCostWei,
@@ -128,12 +133,6 @@ export function useTransactionCostAndData(args: {
       } satisfies TransactionCostAndData;
     },
     enabled: !!transaction && !!txQueryKey,
-    refetchInterval: () => {
-      if (transaction.erc20Value) {
-        // if erc20 value is set, we don't need to poll
-        return undefined;
-      }
-      return 30_000;
-    },
+    refetchInterval: args.refetchIntervalMs || 30_000,
   });
 }