thirdweb 5.99.3 → 5.100.0

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]);
@@ -58,7 +61,6 @@ export function ExecutingTxScreen(props: {
     <Container p="lg">
       <ModalHeader title="Transaction" onBack={props.onBack} />
 
-      <Spacer y="xxl" />
       <Spacer y="xxl" />
 
       <Container flex="row" center="x">
@@ -82,12 +84,9 @@ 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" />
       <Spacer y="xxl" />
 
       {status === "failed" && (

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/utils/any-evm/zksync/constants.ts

@@ -3,6 +3,7 @@ export const ZKSYNC_SINGLETON_FACTORY =
 export const CONTRACT_DEPLOYER_ADDRESS =
   "0x0000000000000000000000000000000000008006" as const;
 export const KNOWN_CODES_STORAGE = "0x0000000000000000000000000000000000008004";
+// biome-ignore lint/nursery/noProcessEnv: Used for testing
 export const PUBLISHED_PRIVATE_KEY = process.env.ZKSYNC_PUBLISHED_PRIVATE_KEY;
 
 export const singletonFactoryAbi = [

package/src/utils/domain.test.ts

@@ -17,6 +17,7 @@ describe("Thirdweb Domains", () => {
     analytics: "c.thirdweb.com",
     insight: "insight.thirdweb.com",
     engineCloud: "engine.thirdweb.com",
+    bridge: "bridge.thirdweb.com",
   };
 
   beforeEach(() => {

package/src/utils/domains.ts

@@ -44,6 +44,11 @@ type DomainOverrides = {
    * @default "engine.thirdweb.com"
    */
   engineCloud?: string;
+  /**
+   * The base URL for the universal bridge service.
+   * @default "bridge.thirdweb.com"
+   */
+  bridge?: string;
 };
 
 export const DEFAULT_RPC_URL = "rpc.thirdweb.com";
@@ -55,6 +60,7 @@ const DEFAULT_BUNDLER_URL = "bundler.thirdweb.com";
 const DEFAULT_ANALYTICS_URL = "c.thirdweb.com";
 const DEFAULT_INSIGHT_URL = "insight.thirdweb.com";
 const DEFAULT_ENGINE_CLOUD_URL = "engine.thirdweb.com";
+const DEFAULT_BRIDGE_URL = "bridge.thirdweb.com";
 
 let domains: { [k in keyof DomainOverrides]-?: string } = {
   rpc: DEFAULT_RPC_URL,
@@ -66,6 +72,7 @@ let domains: { [k in keyof DomainOverrides]-?: string } = {
   analytics: DEFAULT_ANALYTICS_URL,
   insight: DEFAULT_INSIGHT_URL,
   engineCloud: DEFAULT_ENGINE_CLOUD_URL,
+  bridge: DEFAULT_BRIDGE_URL,
 };
 
 export const setThirdwebDomains = (DomainOverrides: DomainOverrides) => {
@@ -79,6 +86,7 @@ export const setThirdwebDomains = (DomainOverrides: DomainOverrides) => {
     analytics: DomainOverrides.analytics ?? DEFAULT_ANALYTICS_URL,
     insight: DomainOverrides.insight ?? DEFAULT_INSIGHT_URL,
     engineCloud: DomainOverrides.engineCloud ?? DEFAULT_ENGINE_CLOUD_URL,
+    bridge: DomainOverrides.bridge ?? DEFAULT_BRIDGE_URL,
   };
 };
 

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.99.3";
+export const version = "5.100.0";

package/dist/cjs/bridge/constants.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNIVERSAL_BRIDGE_URL = void 0;
-exports.UNIVERSAL_BRIDGE_URL = "https://bridge.thirdweb.com/v1";
-//# sourceMappingURL=constants.js.map

package/dist/cjs/bridge/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/bridge/constants.ts"],"names":[],"mappings":";;;AAAa,QAAA,oBAAoB,GAAG,gCAAgC,CAAC"}

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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"}

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

@@ -1,86 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PostOnRampSwap = PostOnRampSwap;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_query_1 = require("@tanstack/react-query");
-const react_1 = require("react");
-const utils_js_1 = require("../../../../../../../chains/utils.js");
-const contract_js_1 = require("../../../../../../../contract/contract.js");
-const allowance_js_1 = require("../../../../../../../extensions/erc20/__generated__/IERC20/read/allowance.js");
-const getPostOnRampQuote_js_1 = require("../../../../../../../pay/buyWithFiat/getPostOnRampQuote.js");
-const index_js_1 = require("../../../../../../core/design-system/index.js");
-const Spacer_js_1 = require("../../../../components/Spacer.js");
-const Spinner_js_1 = require("../../../../components/Spinner.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 AccentFailIcon_js_1 = require("../../../icons/AccentFailIcon.js");
-const SwapFlow_js_1 = require("../swap/SwapFlow.js");
-function PostOnRampSwap(props) {
-    const [lockedOnRampQuote, setLockedOnRampQuote] = (0, react_1.useState)(undefined);
-    const postOnRampQuoteQuery = (0, react_query_1.useQuery)({
-        queryKey: ["getPostOnRampQuote", props.buyWithFiatStatus],
-        queryFn: async () => {
-            return await (0, getPostOnRampQuote_js_1.getPostOnRampQuote)({
-                client: props.client,
-                buyWithFiatStatus: props.buyWithFiatStatus,
-            });
-        },
-        // stop fetching if a quote is already locked
-        enabled: !lockedOnRampQuote,
-        refetchOnWindowFocus: false,
-    });
-    const allowanceQuery = (0, react_query_1.useQuery)({
-        queryKey: [
-            "allowance",
-            props.payer.account.address,
-            postOnRampQuoteQuery.data?.approvalData,
-        ],
-        queryFn: () => {
-            if (!postOnRampQuoteQuery.data?.approvalData) {
-                return null;
-            }
-            return (0, allowance_js_1.allowance)({
-                contract: (0, contract_js_1.getContract)({
-                    client: props.client,
-                    address: postOnRampQuoteQuery.data.swapDetails.fromToken.tokenAddress,
-                    chain: (0, utils_js_1.getCachedChain)(postOnRampQuoteQuery.data.swapDetails.fromToken.chainId),
-                }),
-                spender: postOnRampQuoteQuery.data.approvalData.spenderAddress,
-                owner: props.payer.account.address,
-            });
-        },
-        enabled: !!postOnRampQuoteQuery.data?.approvalData,
-        refetchOnMount: true,
-    });
-    (0, react_1.useEffect)(() => {
-        if (postOnRampQuoteQuery.data &&
-            !lockedOnRampQuote &&
-            !postOnRampQuoteQuery.isRefetching &&
-            !allowanceQuery.isLoading) {
-            setLockedOnRampQuote(postOnRampQuoteQuery.data);
-        }
-    }, [
-        postOnRampQuoteQuery.data,
-        lockedOnRampQuote,
-        postOnRampQuoteQuery.isRefetching,
-        allowanceQuery.isLoading,
-    ]);
-    if (postOnRampQuoteQuery.isError) {
-        return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { fullHeight: true, children: [(0, jsx_runtime_1.jsx)(basic_js_1.Container, { p: "lg", children: (0, jsx_runtime_1.jsx)(basic_js_1.ModalHeader, { title: props.title, onBack: props.onBack }) }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { style: {
-                        minHeight: "300px",
-                    }, flex: "column", center: "both", p: "lg", children: [(0, jsx_runtime_1.jsx)(AccentFailIcon_js_1.AccentFailIcon, { size: index_js_1.iconSize["3xl"] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xl" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { color: "primaryText", children: "Failed to get a price quote" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), (0, jsx_runtime_1.jsx)(buttons_js_1.Button, { fullWidth: true, variant: "primary", onClick: () => {
-                                postOnRampQuoteQuery.refetch();
-                            }, children: "Try Again" })] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xxl" })] }));
-    }
-    if (!lockedOnRampQuote) {
-        return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { fullHeight: true, children: [(0, jsx_runtime_1.jsx)(basic_js_1.Container, { p: "lg", children: (0, jsx_runtime_1.jsx)(basic_js_1.ModalHeader, { title: props.title, onBack: props.onBack }) }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { style: {
-                        minHeight: "300px",
-                    }, flex: "column", center: "both", children: [(0, jsx_runtime_1.jsx)(Spinner_js_1.Spinner, { size: "xxl", color: "accentText" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xl" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { color: "primaryText", children: "Getting price quote" })] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xxl" })] }));
-    }
-    return ((0, jsx_runtime_1.jsx)(SwapFlow_js_1.SwapFlow, { title: props.title, payer: props.payer, buyWithCryptoQuote: lockedOnRampQuote, client: props.client, onBack: props.onBack, isFiatFlow: true, onDone: props.onDone, onTryAgain: () => {
-            setLockedOnRampQuote(undefined);
-            postOnRampQuoteQuery.refetch();
-        }, transactionMode: props.transactionMode, isEmbed: props.isEmbed, onSuccess: props.onSuccess, approvalAmount: allowanceQuery.data ?? undefined }));
-}
-//# sourceMappingURL=PostOnRampSwap.js.map

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

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

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

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PostOnRampSwapFlow = PostOnRampSwapFlow;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const FiatSteps_js_1 = require("./FiatSteps.js");
-const PostOnRampSwap_js_1 = require("./PostOnRampSwap.js");
-// Note: It is necessary to lock in the fiat-status in state and only pass that to <PostOnRampSwap /> so it does not suddenly change during the swap process.
-/**
- * - Show 2 steps UI with step 2 highlighted, on continue button click:
- * - Show swap flow
- */
-function PostOnRampSwapFlow(props) {
-    const [statusForSwap, setStatusForSwap] = (0, react_1.useState)();
-    // step 2 flow
-    if (statusForSwap) {
-        return ((0, jsx_runtime_1.jsx)(PostOnRampSwap_js_1.PostOnRampSwap, { title: props.title, buyWithFiatStatus: statusForSwap, client: props.client, onDone: props.onDone, transactionMode: props.transactionMode, isEmbed: props.isEmbed, payer: props.payer, onSuccess: props.onSuccess }));
-    }
-    // show step 1 and step 2 details
-    return ((0, jsx_runtime_1.jsx)(FiatSteps_js_1.FiatSteps, { title: props.title, client: props.client, onBack: props.onBack, partialQuote: props.quote, step: 2, onContinue: () => {
-            props.onSwapFlowStarted();
-            setStatusForSwap(props.status);
-        }, status: props.status }));
-}
-//# sourceMappingURL=PostOnRampSwapFlow.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"PostOnRampSwapFlow.js","sourceRoot":"","sources":["../../../../../../../../../src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwapFlow.tsx"],"names":[],"mappings":";;AAcA,gDAgDC;;AA9DD,iCAAiC;AAKjC,iDAAyE;AACzE,2DAAqD;AAErD,6JAA6J;AAE7J;;;GAGG;AACH,SAAgB,kBAAkB,CAAC,KAYlC;IACC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,GAE/C,CAAC;IAEJ,cAAc;IACd,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,CACL,uBAAC,kCAAc,IACb,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,iBAAiB,EAAE,aAAa,EAChC,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,eAAe,EAAE,KAAK,CAAC,eAAe,EACtC,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,SAAS,EAAE,KAAK,CAAC,SAAS,GAC1B,CACH,CAAC;IACJ,CAAC;IAED,iCAAiC;IACjC,OAAO,CACL,uBAAC,wBAAS,IACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,YAAY,EAAE,KAAK,CAAC,KAAK,EACzB,IAAI,EAAE,CAAC,EACP,UAAU,EAAE,GAAG,EAAE;YACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC1B,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACjC,CAAC,EACD,MAAM,EAAE,KAAK,CAAC,MAAM,GACpB,CACH,CAAC;AACJ,CAAC"}