@getpara/react-sdk-lite 2.10.0 → 2.12.0

package/dist/modal/ParaModal.js

@@ -23,11 +23,13 @@ import { useStore } from "../provider/stores/useStore.js";
 import parsePhoneNumberFromString from "libphonenumber-js";
 import { useAuthActions } from "../provider/providers/AuthProvider.js";
 import { validateInput } from "./utils/authInputHelpers.js";
+import { useTransactionMonitoring } from "./hooks/useTransactionMonitoring.js";
 defineCustomElements();
 const ParaModal = forwardRef((props, ref) => {
   const storedModalConfig = useStore((state) => state.modalConfig);
   const refs = useStore((state) => state.refs);
   const modalContentRef = useRef(null);
+  const modalRef = useRef(null);
   const modalRefs = useModalStore((state) => state.refs);
   const flow = useModalStore((state) => state.flow);
   const currentStep = useModalStore((state) => state.step);
@@ -110,7 +112,7 @@ const ParaModal = forwardRef((props, ref) => {
             onClose,
             defaultAuthIdentifier
           }), rest),
-          reactSdkVersion: "2.10.0"
+          reactSdkVersion: "2.12.0"
         });
       } catch (e) {
       }
@@ -187,6 +189,7 @@ const ParaModal = forwardRef((props, ref) => {
         break;
     }
   });
+  useTransactionMonitoring();
   useEffect(() => {
     if (isReady && isOpen && !isAccountLoading && !isInitialized.current) {
       initModal(isOpen);
@@ -271,6 +274,15 @@ const ParaModal = forwardRef((props, ref) => {
       setStep(ModalStep.LOGIN_DONE);
     }
   });
+  useEffect(() => {
+    var _a2;
+    if ((_a2 = modalRef.current) == null ? void 0 : _a2.shadowRoot) {
+      const container = modalRef.current.shadowRoot.getElementById("modal-container");
+      if (container && modalRefs.modalContainer) {
+        modalRefs.modalContainer.current = container;
+      }
+    }
+  }, [isModalMounted]);
   if (!para) {
     console.error("A Para instance is required.");
     return null;
@@ -295,6 +307,7 @@ const ParaModal = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     StyledAuthModal,
     {
+      ref: modalRef,
       enterTransitionDuration: DEFAULTS.ANIMATION_DURATION,
       exitTransitionDuration: DEFAULTS.ANIMATION_DURATION,
       open: isOpen,

package/dist/modal/components/Account/Account.js

@@ -2,10 +2,10 @@
 import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { safeStyled } from "@getpara/react-common";
-import { InnerStepContainer, StepContainer } from "../common.js";
+import { ExplorerLink, InnerStepContainer, StepContainer } from "../common.js";
 import { CpslButton, CpslIcon, CpslSpinner, CpslText, CpslTileButton } from "@getpara/react-components";
-import { OnRampStep, useModalStore } from "../../stores/index.js";
-import { useEffect } from "react";
+import { OnRampStep, useModalStore, useModalSessionStore } from "../../stores/index.js";
+import { useEffect, useMemo } from "react";
 import { ModalStep } from "../../utils/steps.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { useAccount, useWalletState } from "../../../provider/index.js";
@@ -13,17 +13,101 @@ import { EnabledFlow } from "@getpara/web-sdk";
 import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
 import { useAssets } from "../../../provider/providers/AssetsProvider.js";
 import { AccountHeader } from "./AccountHeader.js";
+import { AnimatePresence, motion } from "framer-motion";
 const Account = () => {
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const setStep = useModalStore((state) => state.setStep);
   const setGuestAddFundsTab = useModalStore((state) => state.setGuestAddFundsTab);
   const setOnRampStep = useModalStore((state) => state.setOnRampStep);
-  const sendTx = useModalStore((state) => state.sendTx);
+  const sendTx = useModalSessionStore((state) => state.sendTx);
+  const sendTxStatus = useModalSessionStore((state) => {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = state.sendTx) == null ? void 0 : _a.result) == null ? void 0 : _b.status) == null ? void 0 : _c.status;
+  });
+  const sendTxResult = useModalSessionStore((state) => {
+    var _a;
+    return (_a = state.sendTx) == null ? void 0 : _a.result;
+  });
   const para = useInternalClient();
   const { embedded } = useAccount();
   const { selectedWallet, setSelectedWallet } = useWalletState();
   const { isEnabled } = useAccountLinking();
   const { profileBalance } = useAssets();
+  const transactionMonitorContent = useMemo(() => {
+    var _a, _b, _c, _d;
+    if (!sendTx) return null;
+    if ((_b = (_a = sendTx == null ? void 0 : sendTx.result) == null ? void 0 : _a.status) == null ? void 0 : _b.status) {
+      const status = sendTx.result.status.status;
+      const confirmations = (_c = sendTx.result.status.confirmations) != null ? _c : 0;
+      const isPending = status === "PENDING" || status === "CONFIRMED" && confirmations < 1;
+      const isConfirmed = status === "CONFIRMED" && confirmations >= 1;
+      const isFailed = status === "FAILED";
+      let color, text, icon, key;
+      switch (true) {
+        case isConfirmed:
+          color = "var(--cpsl-color-utility-green)";
+          text = "Transaction confirmed";
+          icon = /* @__PURE__ */ jsx(CpslIcon, { icon: "check", size: "16px", color });
+          key = "confirmed";
+          break;
+        case isFailed:
+          color = "var(--cpsl-color-utility-red)";
+          text = "Transaction failed";
+          icon = /* @__PURE__ */ jsx(CpslIcon, { icon: "alertTriangle", size: "16px", color });
+          key = "failed";
+          break;
+        case isPending:
+        default:
+          color = "var(--cpsl-color-text-secondary)";
+          text = "Transaction in progress";
+          icon = /* @__PURE__ */ jsx(CpslSpinner, { size: "16px", barColor: color });
+          key = "pending";
+          break;
+      }
+      return /* @__PURE__ */ jsx(
+        AnimatedMonitorContainer,
+        {
+          variants: fadeVariants,
+          initial: "enter",
+          animate: "center",
+          exit: "exit",
+          transition: fadeTransition,
+          children: /* @__PURE__ */ jsxs(
+            AnimatedMonitorButton,
+            {
+              onClick: () => {
+                setStep(ModalStep.ACCOUNT_MONITOR_TX);
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "4px", color }, children: [
+                  icon,
+                  /* @__PURE__ */ jsx("span", { children: text })
+                ] }),
+                /* @__PURE__ */ jsx(CpslIcon, { icon: "chevronRight", size: "16px" })
+              ]
+            }
+          )
+        },
+        key
+      );
+    }
+    if ((_d = sendTx == null ? void 0 : sendTx.result) == null ? void 0 : _d.explorerUrl) {
+      return /* @__PURE__ */ jsx(
+        AnimatedMonitorContainer,
+        {
+          variants: fadeVariants,
+          initial: "enter",
+          animate: "center",
+          exit: "exit",
+          transition: fadeTransition,
+          children: /* @__PURE__ */ jsx(ExplorerLink, { href: sendTx.result.explorerUrl, text: "Monitor Transaction" })
+        },
+        "explorer"
+      );
+    }
+    return null;
+  }, [sendTx, sendTxStatus, sendTxResult, setStep]);
+  const transactionMonitor = /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: transactionMonitorContent });
   const isGuestMode = embedded.isConnected && embedded.isGuestMode;
   const cantBuyAndWithdraw = (para.externalWalletConnectionType === "CONNECTION_ONLY" || para.externalWalletConnectionType === "VERIFICATION") && !para.userId;
   const isOnRampLoaded = !!onRampConfig;
@@ -90,10 +174,7 @@ const Account = () => {
           }
         )
       ] }),
-      !!(sendTx == null ? void 0 : sendTx.explorerUrl) && /* @__PURE__ */ jsxs(MonitorLink, { target: "_blank", href: sendTx.explorerUrl, rel: "noopener noreferrer", "data-testid": "para-monitor-tx", children: [
-        /* @__PURE__ */ jsx("span", { children: "Monitor Transaction" }),
-        /* @__PURE__ */ jsx(CpslIcon, { icon: "externalLink", size: "16px", style: { marginLeft: "6px" } })
-      ] }),
+      transactionMonitor,
       /* @__PURE__ */ jsx(ButtonContainer, { children: isOnRampLoaded ? /* @__PURE__ */ jsxs(Fragment, { children: [
         (onRampConfig.isBuyEnabled || onRampConfig.isReceiveEnabled) && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "plusCircle", onClick: handleBuyClick, "data-testid": "para-add-funds-tile", children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Add Funds" }) }),
         embedded.authType !== "externalWallet" && /* @__PURE__ */ jsx(
@@ -154,24 +235,35 @@ const LowerContainer = safeStyled.div`
   gap: 16px;
   width: 100%;
 `;
-const MonitorLink = safeStyled.a`
-  font-family: var(--cpsl-font-family);
-  font-size: 14px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+const fadeVariants = {
+  enter: {
+    opacity: 0
+  },
+  center: {
+    opacity: 1
+  },
+  exit: {
+    opacity: 0
+  }
+};
+const fadeTransition = {
+  duration: 0.2
+};
+const AnimatedMonitorContainer = safeStyled(motion.div)`
+  width: 100%;
+`;
+const AnimatedMonitorButton = safeStyled.button`
   width: 100%;
   background: transparent;
   border: none;
   cursor: pointer;
-  color: var(--cpsl-color-text-primary);
-  --icon-color: var(--cpsl-color-text-primary);
-
-  &:hover {
-    color: var(--cpsl-color-text-contrast);
-    --icon-color: var(--cpsl-color-text-contrast);
-  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--cpsl-color-text-secondary);
+  font-family: var(--cpsl-font-family);
+  font-size: 14px;
 `;
 export {
   Account

package/dist/modal/components/Account/AccountMonitorTx.d.ts

@@ -0,0 +1 @@
+export declare const AccountMonitorTx: () => import("react/jsx-runtime").JSX.Element;

package/dist/modal/components/Account/AccountMonitorTx.js

@@ -0,0 +1,256 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useModalStore, useModalSessionStore } from "../../stores/index.js";
+import { ModalStep } from "../../utils/steps.js";
+import { StepContainer, InnerStepContainer, Heading, HeroIcon, SpinnerContainer, ExplorerLink } from "../common.js";
+import { CpslButton, CpslSpinner, CpslText } from "@getpara/react-components";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useSendMutations } from "../../hooks/index.js";
+import { useWalletState } from "../../../provider/index.js";
+import { formatAssetQuantity } from "@getpara/shared";
+import { truncateAddress } from "@getpara/web-sdk";
+import { AnimatePresence, motion } from "framer-motion";
+import { safeStyled } from "@getpara/react-common";
+import { ErrorBoundary } from "../ErrorBoundary.js";
+const ErrorFallback = () => {
+  var _a;
+  const setStep = useModalStore((state) => state.setStep);
+  const sendTx = useModalSessionStore((state) => state.sendTx);
+  return /* @__PURE__ */ jsxs(StepContainer, { children: [
+    /* @__PURE__ */ jsx(HeroIcon, { icon: "alertTriangle" }),
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      /* @__PURE__ */ jsx(Heading, { children: "Something went wrong" }),
+      /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", children: "Unable to display transaction status." }),
+      ((_a = sendTx == null ? void 0 : sendTx.result) == null ? void 0 : _a.explorerUrl) && /* @__PURE__ */ jsx(ExplorerLink, { href: sendTx.result.explorerUrl, text: "View on Explorer" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      CpslButton,
+      {
+        fullWidth: true,
+        onClick: () => {
+          setStep(ModalStep.ACCOUNT_MAIN);
+        },
+        children: "Go Back"
+      }
+    )
+  ] });
+};
+const AccountMonitorTx = () => {
+  return /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(ErrorFallback, {}), children: /* @__PURE__ */ jsx(AccountMonitorTxContent, {}) });
+};
+const AccountMonitorTxContent = () => {
+  var _a, _b, _c, _d, _e, _f;
+  const sendTx = useModalSessionStore((state) => state.sendTx);
+  const setSendTx = useModalSessionStore((state) => state.setSendTx);
+  const setStep = useModalStore((state) => state.setStep);
+  const para = useInternalClient();
+  const { selectedWallet, setSelectedWallet } = useWalletState();
+  const [isRetrying, setIsRetrying] = useState(false);
+  useEffect(() => {
+    if ((sendTx == null ? void 0 : sendTx.walletId) && (selectedWallet == null ? void 0 : selectedWallet.id) !== sendTx.walletId) {
+      const wallet = para.wallets[sendTx.walletId];
+      if (wallet && wallet.type) {
+        setSelectedWallet({ id: sendTx.walletId, type: wallet.type });
+      }
+    }
+  }, [sendTx == null ? void 0 : sendTx.walletId, selectedWallet == null ? void 0 : selectedWallet.id, para.wallets, setSelectedWallet]);
+  useEffect(() => {
+    var _a2;
+    if (!((_a2 = sendTx == null ? void 0 : sendTx.result) == null ? void 0 : _a2.status)) {
+      setStep(ModalStep.ACCOUNT_MAIN);
+    }
+  }, [sendTx, setStep]);
+  const { estimateMutateAsync, broadcastMutateAsync } = useSendMutations({
+    estimateOnSuccess: () => {
+    },
+    estimateOnError: () => {
+    },
+    broadcastOnError: () => {
+    }
+  });
+  const handleRetry = () => __async(void 0, null, function* () {
+    var _a2;
+    if (!(sendTx == null ? void 0 : sendTx.opts) || !(sendTx == null ? void 0 : sendTx.userId) || !(sendTx == null ? void 0 : sendTx.walletId) || !((_a2 = sendTx == null ? void 0 : sendTx.result) == null ? void 0 : _a2.network)) {
+      return;
+    }
+    setIsRetrying(true);
+    try {
+      const estimateResult = yield estimateMutateAsync({
+        userId: sendTx.userId,
+        walletId: sendTx.walletId,
+        opts: sendTx.opts
+      });
+      if (!(estimateResult == null ? void 0 : estimateResult.result)) {
+        setIsRetrying(false);
+        return;
+      }
+      if (!(selectedWallet == null ? void 0 : selectedWallet.id) || !(selectedWallet == null ? void 0 : selectedWallet.address) || !(selectedWallet == null ? void 0 : selectedWallet.type)) {
+        setIsRetrying(false);
+        return;
+      }
+      const walletAddress = selectedWallet.address;
+      const walletType = selectedWallet.type;
+      const network = sendTx.result.network;
+      yield broadcastMutateAsync({
+        userId: sendTx.userId,
+        walletId: sendTx.walletId,
+        walletAddress,
+        walletType,
+        txSerialized: estimateResult.result.txSerialized,
+        message: estimateResult.result.message,
+        evmChainId: network.type === "EVM" ? network.evmChainId : void 0,
+        isDevnet: network.type === "SOLANA" ? network.isDevnet : void 0
+      });
+    } catch (error) {
+      console.error("Retry failed:", error);
+    } finally {
+      setIsRetrying(false);
+    }
+  });
+  const explorerLink = useMemo(() => {
+    var _a2;
+    if ((_a2 = sendTx == null ? void 0 : sendTx.result) == null ? void 0 : _a2.explorerUrl) {
+      return /* @__PURE__ */ jsx(ExplorerLink, { href: sendTx.result.explorerUrl, text: "View Transaction" });
+    }
+    return null;
+  }, [(_a = sendTx == null ? void 0 : sendTx.result) == null ? void 0 : _a.explorerUrl]);
+  const content = useMemo(() => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g, _h;
+    if (!sendTx) {
+      return null;
+    }
+    const status = (_b2 = (_a2 = sendTx.result) == null ? void 0 : _a2.status) == null ? void 0 : _b2.status;
+    const confirmations = (_e2 = (_d2 = (_c2 = sendTx.result) == null ? void 0 : _c2.status) == null ? void 0 : _d2.confirmations) != null ? _e2 : 0;
+    const isPending = status === "PENDING" || status === "CONFIRMED" && confirmations < 1;
+    const isConfirmed = status === "CONFIRMED" && confirmations >= 1;
+    const isFailed = status === "FAILED";
+    switch (true) {
+      case isConfirmed:
+        return /* @__PURE__ */ jsx(
+          AnimatedContainer,
+          {
+            variants: fadeVariants,
+            initial: "enter",
+            animate: "center",
+            exit: "exit",
+            transition: fadeTransition,
+            children: /* @__PURE__ */ jsxs(StepContainer, { children: [
+              /* @__PURE__ */ jsx(HeroIcon, { icon: "checkCircleFilled" }),
+              /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+                /* @__PURE__ */ jsx(Heading, { children: "Success!" }),
+                /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", children: "Your funds have been sent." }),
+                explorerLink
+              ] }),
+              /* @__PURE__ */ jsx(
+                CpslButton,
+                {
+                  fullWidth: true,
+                  onClick: () => {
+                    setSendTx(null);
+                  },
+                  children: "Done"
+                }
+              )
+            ] })
+          },
+          "confirmed"
+        );
+      case isFailed:
+        return /* @__PURE__ */ jsx(
+          AnimatedContainer,
+          {
+            variants: fadeVariants,
+            initial: "enter",
+            animate: "center",
+            exit: "exit",
+            transition: fadeTransition,
+            children: /* @__PURE__ */ jsxs(StepContainer, { children: [
+              /* @__PURE__ */ jsx(HeroIcon, { icon: "alertTriangle" }),
+              /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+                /* @__PURE__ */ jsx(Heading, { children: "Transaction failed" }),
+                /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", children: "Your transaction was not completed." })
+              ] }),
+              /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: handleRetry, disabled: isRetrying, children: isRetrying ? "Retrying..." : "Retry" })
+            ] })
+          },
+          "failed"
+        );
+      case isPending:
+      default:
+        return /* @__PURE__ */ jsx(
+          AnimatedContainer,
+          {
+            variants: fadeVariants,
+            initial: "enter",
+            animate: "center",
+            exit: "exit",
+            transition: fadeTransition,
+            children: /* @__PURE__ */ jsxs(
+              StepContainer,
+              {
+                style: {
+                  fontFamily: "var(--cpsl-font-family)",
+                  color: "var(--cpsl-color-text-primary)"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) }),
+                  explorerLink,
+                  ((_f2 = sendTx.opts) == null ? void 0 : _f2.destinationAddress) && /* @__PURE__ */ jsxs("div", { style: { width: "100%", fontSize: "14px", display: "flex", justifyContent: "space-between" }, children: [
+                    /* @__PURE__ */ jsx("div", { style: { textAlign: "left" }, children: "To" }),
+                    /* @__PURE__ */ jsx("div", { style: { textAlign: "right" }, children: truncateAddress(sendTx.opts.destinationAddress, sendTx.opts.type) })
+                  ] }),
+                  ((_g = sendTx.opts) == null ? void 0 : _g.tokenSymbol) && ((_h = sendTx.opts) == null ? void 0 : _h.transferAmount) && /* @__PURE__ */ jsxs("div", { style: { width: "100%", fontSize: "14px", display: "flex", justifyContent: "space-between" }, children: [
+                    /* @__PURE__ */ jsx("div", { style: { textAlign: "left" }, children: "Amount" }),
+                    /* @__PURE__ */ jsx("div", { style: { textAlign: "right" }, children: formatAssetQuantity({
+                      quantity: sendTx.opts.transferAmount,
+                      symbol: sendTx.opts.tokenSymbol
+                    }) })
+                  ] })
+                ]
+              }
+            )
+          },
+          "pending"
+        );
+    }
+  }, [
+    sendTx,
+    (_c = (_b = sendTx == null ? void 0 : sendTx.result) == null ? void 0 : _b.status) == null ? void 0 : _c.status,
+    (_e = (_d = sendTx == null ? void 0 : sendTx.result) == null ? void 0 : _d.status) == null ? void 0 : _e.confirmations,
+    explorerLink,
+    handleRetry,
+    isRetrying,
+    setSendTx
+  ]);
+  if (!((_f = sendTx == null ? void 0 : sendTx.result) == null ? void 0 : _f.status)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: content });
+};
+const fadeVariants = {
+  enter: {
+    opacity: 0
+  },
+  center: {
+    opacity: 1
+  },
+  exit: {
+    opacity: 0
+  }
+};
+const fadeTransition = {
+  duration: 0.2
+};
+const AnimatedContainer = safeStyled(motion.div)`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+export {
+  AccountMonitorTx
+};

package/dist/modal/components/Account/AccountSend/AccountSendAsset.js

@@ -44,7 +44,7 @@ function AccountSendAsset() {
     return (_b = (_a = profileBalance == null ? void 0 : profileBalance.wallets.find((wallet) => wallet.address === (selectedWallet == null ? void 0 : selectedWallet.address))) == null ? void 0 : _a.assets) != null ? _b : [];
   }, [profileBalance, selectedWallet == null ? void 0 : selectedWallet.address]);
   const transformItem = useCallback((item) => {
-    var _a, _b;
+    var _a, _b, _c;
     const isValued = ((_a = item.value) == null ? void 0 : _a.value) && ((_b = item.value) == null ? void 0 : _b.value) >= 0.01;
     const quantity = formatAssetQuantity({ quantity: item.quantity, symbol: item.metadata.symbol });
     return {
@@ -53,7 +53,7 @@ function AccountSendAsset() {
         AssetNetwork,
         {
           assetSrc: item.metadata.logoUrl,
-          networkSrc: item.networks.length === 1 ? item.networks[0].metadata.logoUrl : void 0,
+          networkSrc: item.networks.length === 1 ? (_c = item.networks[0].metadata) == null ? void 0 : _c.logoUrl : void 0,
           size: 48
         }
       ),

package/dist/modal/components/Account/AccountSend/AccountSendForm.js

@@ -9,14 +9,19 @@ import { useSend } from "./context.js";
 import { useModalStore } from "../../../stores/index.js";
 import { ModalStep } from "../../../utils/steps.js";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { useDebounce } from "../../../hooks/useDebounce.js";
 import { AssetNetwork } from "./AssetNetwork.js";
 import { useWalletState } from "../../../../provider/index.js";
+import { useInternalClient } from "../../../../provider/hooks/utils/useInternalClient.js";
+import { Environment } from "@getpara/web-sdk";
+import { safeStyled } from "@getpara/react-common";
 function AccountSendForm() {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
   const { selectedWallet } = useWalletState();
   const setStep = useModalStore((state) => state.setStep);
   const onRampConfig = useModalStore((state) => state.onRampConfig);
+  const currentStep = useModalStore((state) => state.step);
   const {
     estimate,
     broadcast,
@@ -35,11 +40,16 @@ function AccountSendForm() {
     setIsMax,
     estimateIsPending,
     broadcastIsPending,
-    optionsType
+    optionsType,
+    simulateFailure,
+    setSimulateFailure
   } = useSend();
+  const para = useInternalClient();
+  const isDevOrSandbox = ((_a = para.ctx) == null ? void 0 : _a.env) === Environment.DEV || ((_b = para.ctx) == null ? void 0 : _b.env) === Environment.SANDBOX;
+  const isSendFormStep = currentStep === ModalStep.ACCOUNT_SEND;
   const [inputDestinationAddress, setInputDestinationAddress] = useState(destinationAddress);
   const dbInputDestinationAddress = useDebounce(inputDestinationAddress, 500);
-  const isTestnet = (_b = (_a = sendMetadata == null ? void 0 : sendMetadata.network) == null ? void 0 : _a.metadata) == null ? void 0 : _b.isTestnet;
+  const isTestnet = (_d = (_c = sendMetadata == null ? void 0 : sendMetadata.network) == null ? void 0 : _c.metadata) == null ? void 0 : _d.isTestnet;
   const shouldUseAmountMode = !assetPrice || !!assetPrice && isTestnet;
   const [inputMode, setInputMode] = useState(shouldUseAmountMode ? "AMOUNT" : "VALUE");
   const [inputValue, setInputValue] = useState(
@@ -101,7 +111,7 @@ function AccountSendForm() {
     estimateIsPending,
     broadcastIsPending,
     onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled,
-    (_d = (_c = sendMetadata == null ? void 0 : sendMetadata.network) == null ? void 0 : _c.metadata) == null ? void 0 : _d.nativeTokenSymbol,
+    (_f = (_e = sendMetadata == null ? void 0 : sendMetadata.network) == null ? void 0 : _e.metadata) == null ? void 0 : _f.nativeTokenSymbol,
     estimate == null ? void 0 : estimate.transferAmount
   ]);
   useEffect(() => {
@@ -109,7 +119,7 @@ function AccountSendForm() {
     const isTestnet2 = (_b2 = (_a2 = sendMetadata == null ? void 0 : sendMetadata.network) == null ? void 0 : _a2.metadata) == null ? void 0 : _b2.isTestnet;
     const shouldUseAmountMode2 = !assetPrice || !!assetPrice && isTestnet2;
     setInputMode(shouldUseAmountMode2 ? "AMOUNT" : "VALUE");
-  }, [assetPrice, (_f = (_e = sendMetadata == null ? void 0 : sendMetadata.network) == null ? void 0 : _e.metadata) == null ? void 0 : _f.isTestnet]);
+  }, [assetPrice, (_h = (_g = sendMetadata == null ? void 0 : sendMetadata.network) == null ? void 0 : _g.metadata) == null ? void 0 : _h.isTestnet]);
   useEffect(() => {
     if (inputMode === "AMOUNT") {
       setTransferAmount(Number(dbInputValue));
@@ -195,7 +205,7 @@ function AccountSendForm() {
                 children: [
                   /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "secondary", children: inputMode === "VALUE" ? formatAssetQuantity({
                     quantity: isMax && assetAmountOnNetwork ? assetAmountOnNetwork : transferAmount,
-                    symbol: (_g = sendMetadata.asset.metadata) == null ? void 0 : _g.symbol
+                    symbol: (_i = sendMetadata.asset.metadata) == null ? void 0 : _i.symbol
                   }) : formatCurrency({
                     value: isMax && assetValueOnNetwork ? assetValueOnNetwork.value : Number(transferValue),
                     currency: "USD"
@@ -238,7 +248,7 @@ function AccountSendForm() {
                         AssetNetwork,
                         {
                           assetSrc: sendMetadata.asset.metadata.logoUrl,
-                          networkSrc: sendMetadata.network.metadata.logoUrl,
+                          networkSrc: (_k = (_j = sendMetadata.network) == null ? void 0 : _j.metadata) == null ? void 0 : _k.logoUrl,
                           size: 32
                         }
                       ),
@@ -318,7 +328,7 @@ function AccountSendForm() {
       }
     ),
     /* @__PURE__ */ jsx(
-      CpslInput,
+      RecipientInput,
       {
         placeholder: "Enter recipient address",
         value: inputDestinationAddress,
@@ -330,7 +340,7 @@ function AccountSendForm() {
     ),
     ((estimate == null ? void 0 : estimate.feeValue) || (estimate == null ? void 0 : estimate.feeAmount) || estimateIsPending) && /* @__PURE__ */ jsxs("div", { style: { display: "flex", width: "100%", gap: "4px", alignItems: "center", justifyContent: "space-between" }, children: [
       /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", children: "Network Fee" }),
-      /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "contrast", children: estimateIsPending ? "Estimating..." : (_k = (_j = ((_i = (_h = sendMetadata == null ? void 0 : sendMetadata.network) == null ? void 0 : _h.metadata) == null ? void 0 : _i.isTestnet) ? estimate == null ? void 0 : estimate.feeAmount : estimate == null ? void 0 : estimate.feeValue) != null ? _j : estimate == null ? void 0 : estimate.feeAmount) != null ? _k : "0" })
+      /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "contrast", children: estimateIsPending ? "Estimating..." : (_o = (_n = ((_m = (_l = sendMetadata == null ? void 0 : sendMetadata.network) == null ? void 0 : _l.metadata) == null ? void 0 : _m.isTestnet) ? estimate == null ? void 0 : estimate.feeAmount : estimate == null ? void 0 : estimate.feeValue) != null ? _n : estimate == null ? void 0 : estimate.feeAmount) != null ? _o : "0" })
     ] }),
     error && /* @__PURE__ */ jsx("div", { style: { display: "flex", width: "100%", gap: "4px", alignItems: "center", justifyContent: "space-between" }, children: error }),
     /* @__PURE__ */ jsx(
@@ -339,14 +349,62 @@ function AccountSendForm() {
         variant: "primary",
         fullWidth: true,
         pending: estimateIsPending || broadcastIsPending,
-        disabled: estimateIsPending || broadcastIsPending || !((_l = estimate == null ? void 0 : estimate.result) == null ? void 0 : _l.txSerialized) || !!(estimate == null ? void 0 : estimate.error),
+        disabled: estimateIsPending || broadcastIsPending || !((_p = estimate == null ? void 0 : estimate.result) == null ? void 0 : _p.txSerialized) || !!(estimate == null ? void 0 : estimate.error),
         onClick: onSubmit,
         "data-testid": "para-send-confirm",
         children: "Confirm Send"
       }
+    ),
+    isDevOrSandbox && isSendFormStep && typeof window !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(SimulateFailureContainer, { children: /* @__PURE__ */ jsxs(
+        "label",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            cursor: "pointer",
+            width: "100%",
+            justifyContent: "center"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: simulateFailure,
+                onChange: (e) => setSimulateFailure(e.target.checked),
+                style: { cursor: "pointer" }
+              }
+            ),
+            /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", children: "Simulate failure" })
+          ]
+        }
+      ) }),
+      document.body
     )
   ] });
 }
+const RecipientInput = safeStyled(CpslInput)`
+  --cpsl-color-input-surface-hover: var(--cpsl-color-input-surface-default);
+`;
+const SimulateFailureContainer = safeStyled.div`
+  position: fixed !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  width: 100% !important;
+  z-index: 100001 !important;
+  background: var(--cpsl-color-background-0) !important;
+  border-top: 1px solid var(--cpsl-color-background-16) !important;
+  padding: 16px !important;
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
+  pointer-events: auto !important;
+  isolation: isolate;
+`;
 export {
   AccountSendForm
 };