thirdweb 5.100.0-nightly-713ebe0a2d6d8a409e41ce0f0317fc34b1f221bb-20250520000414 → 5.100.1

package/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/SwapDetailsScreen.tsx

@@ -13,50 +13,14 @@ import {
   useChainExplorers,
   useChainName,
 } from "../../../../../../core/hooks/others/useChainQuery.js";
-import { useBuyWithCryptoStatus } from "../../../../../../core/hooks/pay/useBuyWithCryptoStatus.js";
 import { Spacer } from "../../../../components/Spacer.js";
-import { Container, Line, ModalHeader } from "../../../../components/basic.js";
+import { Container, Line } from "../../../../components/basic.js";
 import { ButtonLink } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
 import { WalletRow } from "../swap/WalletRow.js";
 import { TokenInfoRow } from "./TokenInfoRow.js";
 import { type StatusMeta, getBuyWithCryptoStatusMeta } from "./statusMeta.js";
 
-export function SwapDetailsScreen(props: {
-  status: ValidBuyWithCryptoStatus;
-  onBack: () => void;
-  client: ThirdwebClient;
-}) {
-  const { status: initialStatus, client } = props;
-  const statusQuery = useBuyWithCryptoStatus(
-    initialStatus.source?.transactionHash
-      ? {
-          client: client,
-          transactionHash: initialStatus.source.transactionHash,
-          chainId: initialStatus.source.token.chainId,
-        }
-      : undefined,
-  );
-
-  const status: ValidBuyWithCryptoStatus =
-    (statusQuery.data?.status !== "NOT_FOUND" ? statusQuery.data : undefined) ||
-    initialStatus;
-
-  return (
-    <Container>
-      <Container p="lg">
-        <ModalHeader title="Transaction Details" onBack={props.onBack} />
-      </Container>
-
-      <Line />
-
-      <Container p="lg">
-        <SwapTxDetailsTable type="status" status={status} client={client} />
-      </Container>
-    </Container>
-  );
-}
-
 type SwapTxDetailsData = {
   fromToken: {
     chainId: number;

package/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/statusMeta.test.ts

@@ -1,10 +1,6 @@
 import { describe, expect, it } from "vitest";
 import type { BuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
-import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
-import {
-  getBuyWithCryptoStatusMeta,
-  getBuyWithFiatStatusMeta,
-} from "./statusMeta.js";
+import { getBuyWithCryptoStatusMeta } from "./statusMeta.js";
 
 describe("getBuyWithCryptoStatusMeta", () => {
   it('returns "Unknown" for NOT_FOUND status', () => {
@@ -82,93 +78,3 @@ describe("getBuyWithCryptoStatusMeta", () => {
     });
   });
 });
-
-describe("getBuyWithFiatStatusMeta", () => {
-  it('returns "Incomplete" for CRYPTO_SWAP_FALLBACK status', () => {
-    const result = getBuyWithFiatStatusMeta({
-      status: "CRYPTO_SWAP_FALLBACK",
-    } as BuyWithFiatStatus);
-    expect(result).toEqual({
-      status: "Incomplete",
-      color: "danger",
-      step: 2,
-      progressStatus: "partialSuccess",
-    });
-  });
-
-  it('returns "Pending" for CRYPTO_SWAP_IN_PROGRESS status', () => {
-    const result = getBuyWithFiatStatusMeta({
-      status: "CRYPTO_SWAP_IN_PROGRESS",
-    } as BuyWithFiatStatus);
-    expect(result).toEqual({
-      status: "Pending",
-      color: "accentText",
-      loading: true,
-      step: 2,
-      progressStatus: "pending",
-    });
-  });
-
-  it('returns "Pending" for PENDING_ON_RAMP_TRANSFER status', () => {
-    const result = getBuyWithFiatStatusMeta({
-      status: "PENDING_ON_RAMP_TRANSFER",
-    } as BuyWithFiatStatus);
-    expect(result).toEqual({
-      status: "Pending",
-      color: "accentText",
-      loading: true,
-      step: 1,
-      progressStatus: "pending",
-    });
-  });
-
-  it('returns "Completed" for ON_RAMP_TRANSFER_COMPLETED status', () => {
-    const result = getBuyWithFiatStatusMeta({
-      status: "ON_RAMP_TRANSFER_COMPLETED",
-    } as BuyWithFiatStatus);
-    expect(result).toEqual({
-      status: "Completed",
-      color: "success",
-      loading: true,
-      step: 1,
-      progressStatus: "completed",
-    });
-  });
-
-  it('returns "Action Required" for CRYPTO_SWAP_REQUIRED status', () => {
-    const result = getBuyWithFiatStatusMeta({
-      status: "CRYPTO_SWAP_REQUIRED",
-    } as BuyWithFiatStatus);
-    expect(result).toEqual({
-      status: "Action Required",
-      color: "accentText",
-      step: 2,
-      progressStatus: "actionRequired",
-    });
-  });
-
-  it('returns "Failed" for PAYMENT_FAILED status', () => {
-    const result = getBuyWithFiatStatusMeta({
-      status: "PAYMENT_FAILED",
-    } as BuyWithFiatStatus);
-    expect(result).toEqual({
-      status: "Failed",
-      color: "danger",
-      step: 1,
-      progressStatus: "failed",
-    });
-  });
-
-  it('returns "Unknown" for unhandled status', () => {
-    const result = getBuyWithFiatStatusMeta({
-      // @ts-ignore
-      status: "UNKNOWN_STATUS",
-    });
-    expect(result).toEqual({
-      status: "Unknown",
-      color: "secondaryText",
-      step: 1,
-      progressStatus: "unknown",
-    });
-  });
-});

package/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/statusMeta.ts

@@ -1,5 +1,4 @@
 import type { BuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
-import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
 import type { Theme } from "../../../../../../core/design-system/index.js";
 
 export type StatusMeta = {
@@ -74,73 +73,5 @@ export type FiatStatusMeta = {
     | "completed"
     | "failed"
     | "actionRequired"
-    | "partialSuccess"
     | "unknown";
 };
-export function getBuyWithFiatStatusMeta(
-  fiatStatus: BuyWithFiatStatus,
-): FiatStatusMeta {
-  const status = fiatStatus.status;
-
-  switch (status) {
-    case "CRYPTO_SWAP_FALLBACK": {
-      return {
-        status: "Incomplete",
-        color: "danger",
-        step: 2,
-        progressStatus: "partialSuccess",
-      };
-    }
-
-    case "CRYPTO_SWAP_IN_PROGRESS":
-    case "PENDING_ON_RAMP_TRANSFER":
-    case "ON_RAMP_TRANSFER_IN_PROGRESS":
-    case "PENDING_PAYMENT": {
-      return {
-        status: "Pending",
-        color: "accentText",
-        loading: true,
-        step: status === "CRYPTO_SWAP_IN_PROGRESS" ? 2 : 1,
-        progressStatus: "pending",
-      };
-    }
-
-    case "ON_RAMP_TRANSFER_COMPLETED":
-    case "CRYPTO_SWAP_COMPLETED": {
-      return {
-        status: "Completed", // Is this actually completed though?
-        color: "success",
-        loading: true,
-        step: status === "CRYPTO_SWAP_COMPLETED" ? 2 : 1,
-        progressStatus: "completed",
-      };
-    }
-
-    case "CRYPTO_SWAP_FAILED":
-    case "CRYPTO_SWAP_REQUIRED": {
-      return {
-        status: "Action Required",
-        color: "accentText",
-        step: 2,
-        progressStatus: "actionRequired",
-      };
-    }
-
-    case "PAYMENT_FAILED":
-    case "ON_RAMP_TRANSFER_FAILED": {
-      return {
-        status: "Failed",
-        color: "danger",
-        step: 1,
-        progressStatus: "failed",
-      };
-    }
-  }
-
-  return {
-    status: "Unknown",
-    color: "secondaryText",
-    step: 1,
-    progressStatus: "unknown",
-  };
-}

package/src/react/web/ui/TransactionButton/DepositScreen.tsx

@@ -0,0 +1,295 @@
+import { keyframes } from "@emotion/react";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import { shortenAddress } from "../../../../utils/address.js";
+import { formatNumber } from "../../../../utils/formatNumber.js";
+import { toTokens } from "../../../../utils/units.js";
+import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import {
+  fontSize,
+  iconSize,
+  radius,
+  spacing,
+} from "../../../core/design-system/index.js";
+import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
+import { hasSponsoredTransactionsEnabled } from "../../../core/utils/wallet.js";
+import { ErrorState } from "../../wallets/shared/ErrorState.js";
+import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";
+import { CoinsIcon } from "../ConnectWallet/icons/CoinsIcon.js";
+import type { ConnectLocale } from "../ConnectWallet/locale/types.js";
+import { useTransactionCostAndData } from "../ConnectWallet/screens/Buy/main/useBuyTxStates.js";
+import { WalletRow } from "../ConnectWallet/screens/Buy/swap/WalletRow.js";
+import { formatTokenBalance } from "../ConnectWallet/screens/formatTokenBalance.js";
+import { isNativeToken } from "../ConnectWallet/screens/nativeToken.js";
+import { CopyIcon } from "../components/CopyIcon.js";
+import { QRCode } from "../components/QRCode.js";
+import { Skeleton } from "../components/Skeleton.js";
+import { Spacer } from "../components/Spacer.js";
+import { WalletImage } from "../components/WalletImage.js";
+import { Container, ModalHeader } from "../components/basic.js";
+import { Button } from "../components/buttons.js";
+import { Text } from "../components/text.js";
+import { TokenSymbol } from "../components/token/TokenSymbol.js";
+import { StyledButton, StyledDiv } from "../design-system/elements.js";
+import { useClipboard } from "../hooks/useCopyClipboard.js";
+
+const pulseAnimation = keyframes`
+0% {
+  opacity: 1;
+  transform: scale(0.5);
+}
+100% {
+  opacity: 0;
+  transform: scale(1.5);
+}
+`;
+
+const WaitingBadge = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: spacing.sm,
+    backgroundColor: theme.colors.tertiaryBg,
+    border: `1px solid ${theme.colors.borderColor}`,
+    padding: `${spacing.md} ${spacing.sm}`,
+    borderRadius: radius.lg,
+    color: theme.colors.secondaryText,
+    fontSize: fontSize.sm,
+    fontWeight: 500,
+    position: "relative" as const,
+    "&::before": {
+      content: '""',
+      width: "8px",
+      height: "8px",
+      borderRadius: "50%",
+      backgroundColor: theme.colors.accentText,
+      animation: `${pulseAnimation} 1s infinite`,
+    },
+  };
+});
+
+/**
+ *
+ * @internal
+ */
+export function DepositScreen(props: {
+  onBack: (() => void) | undefined;
+  connectLocale: ConnectLocale;
+  client: ThirdwebClient;
+  tx: PreparedTransaction;
+  onDone: () => void;
+}) {
+  const activeWallet = useActiveWallet();
+  const activeAccount = useActiveAccount();
+  const address = activeAccount?.address;
+  const { hasCopied, onCopy } = useClipboard(address || "");
+  const { connectLocale, client } = props;
+  const locale = connectLocale.receiveFundsScreen;
+  const isTestnet = props.tx.chain.testnet === true;
+  const {
+    data: transactionCostAndData,
+    error: transactionCostAndDataError,
+    isFetching: transactionCostAndDataFetching,
+    refetch: transactionCostAndDataRefetch,
+  } = useTransactionCostAndData({
+    transaction: props.tx,
+    account: activeAccount,
+    supportedDestinations: [],
+    refetchIntervalMs: 10_000,
+  });
+  const theme = useCustomTheme();
+  const sponsoredTransactionsEnabled =
+    hasSponsoredTransactionsEnabled(activeWallet);
+
+  if (transactionCostAndDataError) {
+    return (
+      <Container
+        style={{
+          minHeight: "350px",
+        }}
+        fullHeight
+        flex="row"
+        center="both"
+      >
+        <ErrorState
+          title={transactionCostAndDataError?.message || "Something went wrong"}
+          onTryAgain={transactionCostAndDataRefetch}
+        />
+      </Container>
+    );
+  }
+
+  if (!transactionCostAndData) {
+    return <LoadingScreen />;
+  }
+
+  const totalCost =
+    isNativeToken(transactionCostAndData.token) && !sponsoredTransactionsEnabled
+      ? transactionCostAndData.transactionValueWei +
+        transactionCostAndData.gasCostWei
+      : transactionCostAndData.transactionValueWei;
+  const insufficientFunds =
+    transactionCostAndData.walletBalance.value < totalCost;
+  const requiredFunds = transactionCostAndData.walletBalance.value
+    ? totalCost - transactionCostAndData.walletBalance.value
+    : totalCost;
+
+  const openFaucetLink = () => {
+    window.open(
+      `https://thirdweb.com/${props.tx.chain.id}?utm_source=ub_deposit`,
+    );
+  };
+
+  return (
+    <Container p="lg">
+      <ModalHeader title={"Insufficient funds"} onBack={props.onBack} />
+
+      <Spacer y="lg" />
+
+      <Container flex="column" gap="sm">
+        {insufficientFunds && (
+          <div>
+            <Text size="xs" center color="danger" multiline>
+              You need{" "}
+              {formatNumber(
+                Number.parseFloat(
+                  toTokens(requiredFunds, transactionCostAndData.decimals),
+                ),
+                5,
+              )}{" "}
+              {transactionCostAndData.token.symbol} to continue
+            </Text>
+          </div>
+        )}
+        <Container
+          flex="row"
+          style={{
+            justifyContent: "space-between",
+            padding: spacing.sm,
+            marginBottom: spacing.sm,
+            borderRadius: spacing.md,
+            backgroundColor: theme.colors.tertiaryBg,
+            border: `1px solid ${theme.colors.borderColor}`,
+          }}
+        >
+          {activeAccount && (
+            <WalletRow
+              address={activeAccount?.address}
+              iconSize="md"
+              client={client}
+            />
+          )}
+          {transactionCostAndData.walletBalance.value !== undefined &&
+          !transactionCostAndDataFetching ? (
+            <Container flex="row" gap="3xs" center="y">
+              <Text size="xs" color="secondaryText" weight={500}>
+                {formatTokenBalance(
+                  transactionCostAndData.walletBalance,
+                  false,
+                )}
+              </Text>
+              <TokenSymbol
+                token={transactionCostAndData.token}
+                chain={props.tx.chain}
+                size="xs"
+                color="secondaryText"
+              />
+            </Container>
+          ) : (
+            <Container flex="row" gap="3xs" center="y">
+              <Skeleton width="70px" height={fontSize.xs} />
+            </Container>
+          )}
+        </Container>
+      </Container>
+
+      <WalletAddressContainer onClick={onCopy}>
+        <Container flex="column" gap="md" center="both" expand>
+          <Container flex="row" center="x">
+            <QRCode
+              qrCodeUri={address}
+              size={250}
+              QRIcon={
+                activeWallet && (
+                  <WalletImage
+                    id={activeWallet.id}
+                    size={iconSize.xl}
+                    client={client}
+                  />
+                )
+              }
+            />
+          </Container>
+          <Container flex="row" center="x" gap="xs">
+            <Text color="primaryText" size="md">
+              {address ? shortenAddress(address) : ""}
+            </Text>
+            <CopyIcon
+              text={address || ""}
+              tip="Copy address"
+              hasCopied={hasCopied}
+            />
+          </Container>
+        </Container>
+      </WalletAddressContainer>
+
+      <Spacer y="md" />
+
+      <Text
+        multiline
+        center
+        balance
+        size="sm"
+        className="receive_fund_screen_instruction"
+      >
+        {locale.instruction}
+      </Text>
+
+      <Spacer y="md" />
+
+      {insufficientFunds ? (
+        <WaitingBadge>
+          Waiting for funds on {transactionCostAndData.chainMetadata.name}...
+        </WaitingBadge>
+      ) : (
+        <Button variant="accent" onClick={props.onDone} fullWidth>
+          Continue
+        </Button>
+      )}
+      {insufficientFunds && isTestnet && (
+        <>
+          <Spacer y="md" />
+          <Button variant="link" onClick={openFaucetLink} fullWidth>
+            <Container flex="row" center="x" gap="xs" color="accentText">
+              <CoinsIcon size={iconSize.sm} />
+              <Text size="xs" color="accentText" weight={500} center>
+                Get testnet funds
+              </Text>
+            </Container>
+          </Button>
+        </>
+      )}
+    </Container>
+  );
+}
+
+const WalletAddressContainer = /* @__PURE__ */ StyledButton((_) => {
+  const theme = useCustomTheme();
+  return {
+    all: "unset",
+    width: "100%",
+    boxSizing: "border-box",
+    cursor: "pointer",
+    padding: spacing.md,
+    display: "flex",
+    justifyContent: "space-between",
+    border: `1px solid ${theme.colors.borderColor}`,
+    borderRadius: radius.lg,
+    transition: "border-color 200ms ease",
+    "&:hover": {
+      borderColor: theme.colors.accentText,
+    },
+  };
+});

package/src/react/web/ui/TransactionButton/ExecutingScreen.tsx

@@ -24,6 +24,7 @@ export function ExecutingTxScreen(props: {
     payModal: false,
   });
   const [txHash, setTxHash] = useState<Hex | undefined>();
+  const [txError, setTxError] = useState<Error | undefined>();
   const chainExplorers = useChainExplorers(props.tx.chain);
   const [status, setStatus] = useState<"loading" | "failed" | "sent">(
     "loading",
@@ -31,6 +32,7 @@ export function ExecutingTxScreen(props: {
 
   const sendTx = useCallback(async () => {
     setStatus("loading");
+    setTxError(undefined);
     try {
       const txData = await sendTxCore.mutateAsync(props.tx);
       setTxHash(txData.transactionHash);
@@ -40,6 +42,7 @@ export function ExecutingTxScreen(props: {
       // Do not reject the transaction here, because the user may want to try again
       // we only reject on modal close
       console.error(e);
+      setTxError(e as Error);
       setStatus("failed");
     }
   }, [sendTxCore, props.tx, props.onTxSent]);
@@ -81,9 +84,7 @@ export function ExecutingTxScreen(props: {
       </Text>
       <Spacer y="sm" />
       <Text color="danger" center size="sm">
-        {status === "failed" && sendTxCore.error
-          ? sendTxCore.error.message
-          : ""}
+        {status === "failed" && txError ? txError.message || "" : ""}
       </Text>
 
       <Spacer y="xxl" />

package/src/react/web/ui/TransactionButton/TransactionModal.tsx

@@ -16,6 +16,7 @@ import { useConnectLocale } from "../ConnectWallet/locale/getConnectLocale.js";
 import { LazyBuyScreen } from "../ConnectWallet/screens/Buy/LazyBuyScreen.js";
 import { Modal } from "../components/Modal.js";
 import type { LocaleId } from "../types.js";
+import { DepositScreen } from "./DepositScreen.js";
 import { ExecutingTxScreen } from "./ExecutingScreen.js";
 
 type ModalProps = {
@@ -30,6 +31,7 @@ type ModalProps = {
   tx: PreparedTransaction;
   payOptions: PayUIOptions;
   onTxSent: (data: WaitForReceiptOptions) => void;
+  modalMode: "buy" | "deposit";
 };
 
 export function TransactionModal(props: ModalProps) {
@@ -50,7 +52,10 @@ export function TransactionModal(props: ModalProps) {
         toToken: props.tx.erc20Value
           ? (await resolvePromisedValue(props.tx.erc20Value))?.tokenAddress
           : undefined,
-        event: "open_pay_transaction_modal",
+        event:
+          props.modalMode === "buy"
+            ? "open_pay_transaction_modal"
+            : "open_pay_deposit_modal",
       });
 
       return null;
@@ -93,6 +98,20 @@ function TransactionModalContent(props: ModalProps & { onBack?: () => void }) {
     );
   }
 
+  if (props.modalMode === "deposit") {
+    return (
+      <DepositScreen
+        client={props.client}
+        onBack={props.onBack}
+        tx={props.tx}
+        connectLocale={localeQuery.data}
+        onDone={() => {
+          setScreen("execute-tx");
+        }}
+      />
+    );
+  }
+
   return (
     <LazyBuyScreen
       title={props.title}

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.100.0-nightly-713ebe0a2d6d8a409e41ce0f0317fc34b1f221bb-20250520000414";
+export const version = "5.100.1";

package/dist/cjs/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OnRampTxDetailsTable = OnRampTxDetailsTable;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_icons_1 = require("@radix-ui/react-icons");
-const utils_js_1 = require("../../../../../../../chains/utils.js");
-const formatNumber_js_1 = require("../../../../../../../utils/formatNumber.js");
-const url_js_1 = require("../../../../../../../utils/url.js");
-const index_js_1 = require("../../../../../../core/design-system/index.js");
-const useChainQuery_js_1 = require("../../../../../../core/hooks/others/useChainQuery.js");
-const Spacer_js_1 = require("../../../../components/Spacer.js");
-const basic_js_1 = require("../../../../components/basic.js");
-const buttons_js_1 = require("../../../../components/buttons.js");
-const text_js_1 = require("../../../../components/text.js");
-const TokenInfoRow_js_1 = require("../pay-transactions/TokenInfoRow.js");
-const currencies_js_1 = require("./currencies.js");
-/**
- * Show a table with the details of a "OnRamp" transaction step in the "Buy with Fiat" flow.
- * - Show OnRamp token as "Receive"
- * - Show fiat amount as "Pay"
- */
-function OnRampTxDetailsTable(props) {
-    const onRampExplorers = (0, useChainQuery_js_1.useChainExplorers)((0, utils_js_1.getCachedChain)(props.token.chainId));
-    const onrampTxHash = props.statusMeta?.txHash;
-    const currencyMeta = (0, currencies_js_1.getCurrencyMeta)(props.fiat.currencySymbol);
-    const lineSpacer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(basic_js_1.Line, {}), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" })] }));
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", style: {
-                    justifyContent: "space-between",
-                }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", children: "Pay" }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "column", gap: "xxs", style: {
-                            alignItems: "flex-end",
-                        }, children: (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "xs", center: "y", children: [(0, currencies_js_1.getFiatIcon)(currencyMeta, "sm"), (0, jsx_runtime_1.jsxs)(text_js_1.Text, { color: "primaryText", children: [(0, formatNumber_js_1.formatNumber)(Number(props.fiat.amount), 2), " ", props.fiat.currencySymbol] })] }) })] }), lineSpacer, (0, jsx_runtime_1.jsx)(TokenInfoRow_js_1.TokenInfoRow, { chainId: props.token.chainId, client: props.client, label: "Receive", tokenAmount: props.token.amount, tokenSymbol: props.token.symbol, tokenAddress: props.token.address }), props.statusMeta && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [lineSpacer, (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", center: "y", style: {
-                            justifyContent: "space-between",
-                        }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { children: "Status" }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "row", gap: "xs", center: "y", children: (0, jsx_runtime_1.jsx)(text_js_1.Text, { color: props.statusMeta.color, children: props.statusMeta.text }) })] })] })), lineSpacer, onrampTxHash && onRampExplorers.explorers?.[0]?.url && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsxs)(buttons_js_1.ButtonLink, { fullWidth: true, variant: "outline", href: (0, url_js_1.formatExplorerTxUrl)(onRampExplorers.explorers[0]?.url, onrampTxHash), target: "_blank", gap: "xs", style: {
-                            fontSize: index_js_1.fontSize.sm,
-                        }, children: ["View on Explorer", (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkIcon, { width: index_js_1.iconSize.sm, height: index_js_1.iconSize.sm })] })] }))] }));
-}
-//# sourceMappingURL=FiatTxDetailsTable.js.map

package/dist/cjs/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FiatTxDetailsTable.js","sourceRoot":"","sources":["../../../../../../../../../src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx"],"names":[],"mappings":"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"}