@getpara/react-sdk-lite 2.0.0-alpha.72 → 2.0.0-alpha.73

package/dist/cli/cli.mjs

@@ -14,7 +14,32 @@ const PACKAGES_TO_STUB = [
 ];
 
 const checkForPackages = async () => {
-  const pathToNodeModules = path.resolve('node_modules');
+  let pathToNodeModules = path.resolve('node_modules');
+
+  // Check if pnpm-lock.yaml actually exists
+  const pnpmLockPath = path.resolve(process.cwd(), 'pnpm-lock.yaml');
+  let isPNPM = false;
+
+  try {
+    await fs.access(pnpmLockPath);
+    isPNPM = true;
+  } catch {
+    isPNPM = false;
+  }
+
+  // If it's a PNPM project, adjust the node_modules path accordingly to account for virtual store
+  // NODE_PATH is set by PNPM to include the correct paths
+  if (isPNPM && process.env.NODE_PATH) {
+    const endingNodePathString = '@getpara/node_modules';
+    const nodePathSplit = process.env.NODE_PATH.split(path.delimiter);
+    const fullPath = nodePathSplit.find(p => p.endsWith(endingNodePathString));
+    if (fullPath) {
+      const newPath = fullPath.replace(endingNodePathString, '');
+      if (newPath) {
+        pathToNodeModules = newPath;
+      }
+    }
+  }
 
   for (let i = 0; i < PACKAGES_TO_STUB.length; i++) {
     const packageName = PACKAGES_TO_STUB[i];

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

@@ -8,7 +8,7 @@ import { OnRampStep, useModalStore } from "../../stores/index.js";
 import { useEffect } from "react";
 import { ModalStep } from "../../utils/steps.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useAccount } from "../../../provider/index.js";
+import { useAccount, useWalletState } from "../../../provider/index.js";
 import { EnabledFlow } from "@getpara/web-sdk";
 import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
 import { useAssets } from "../../../provider/providers/AssetsProvider.js";
@@ -18,13 +18,26 @@ const Account = () => {
   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 para = useInternalClient();
   const { embedded } = useAccount();
+  const { selectedWallet, setSelectedWallet } = useWalletState();
   const { isEnabled } = useAccountLinking();
   const { profileBalance } = useAssets();
   const isGuestMode = embedded.isConnected && embedded.isGuestMode;
   const cantBuyAndWithdraw = (para.externalWalletConnectionType === "CONNECTION_ONLY" || para.externalWalletConnectionType === "VERIFICATION") && !para.userId;
   const isOnRampLoaded = !!onRampConfig;
+  const handleSendClick = () => {
+    var _a, _b;
+    if ((selectedWallet == null ? void 0 : selectedWallet.type) === "COSMOS" || ((_a = embedded.wallets) == null ? void 0 : _a.some((w) => w.id === (selectedWallet == null ? void 0 : selectedWallet.id) && w.isExternal))) {
+      const validWallet = (_b = embedded.wallets) == null ? void 0 : _b.find(({ type, isExternal }) => type !== "COSMOS" && !isExternal);
+      if (!validWallet) {
+        return;
+      }
+      setSelectedWallet({ id: validWallet.id, type: validWallet.type });
+    }
+    setStep(ModalStep.ACCOUNT_SEND);
+  };
   const handleBuyClick = () => {
     if (isGuestMode) {
       if (onRampConfig == null ? void 0 : onRampConfig.isReceiveEnabled) {
@@ -76,8 +89,13 @@ const Account = () => {
           }
         )
       ] }),
+      !!(sendTx == null ? void 0 : sendTx.explorerUrl) && /* @__PURE__ */ jsxs(MonitorLink, { target: "_blank", href: sendTx.explorerUrl, rel: "noopener noreferrer", children: [
+        /* @__PURE__ */ jsx("span", { children: "Monitor Transaction" }),
+        /* @__PURE__ */ jsx(CpslIcon, { icon: "externalLink", size: "16px", style: { marginLeft: "6px" } })
+      ] }),
       /* @__PURE__ */ jsx(ButtonContainer, { children: isOnRampLoaded ? /* @__PURE__ */ jsxs(Fragment, { children: [
         (onRampConfig.isBuyEnabled || onRampConfig.isReceiveEnabled) && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "plusCircle", onClick: handleBuyClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Add Funds" }) }),
+        /* @__PURE__ */ jsx(OptionButton, { icon: "send", onClick: handleSendClick, disabled: !profileBalance, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Send" }) }),
         onRampConfig.isWithdrawEnabled && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "arrowCircleDown", onClick: handleSellClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Withdraw" }) }),
         /* @__PURE__ */ jsx(OptionButton, { icon: "user01", onClick: handleProfileClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: isEnabled ? "Profile" : "Settings" }) })
       ] }) : /* @__PURE__ */ jsx(CpslSpinner, {}) })
@@ -123,8 +141,27 @@ const Alert = safeStyled.div`
 const LowerContainer = safeStyled.div`
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  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;
   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);
+  }
 `;
 export {
   Account

package/dist/modal/components/Account/AccountSend/AccountSendAsset.d.ts

@@ -0,0 +1 @@
+export declare function AccountSendAsset(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,94 @@
+"use client";
+import "../../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useCallback, memo } from "react";
+import { useWalletState } from "../../../../provider/index.js";
+import { useAssets } from "../../../../provider/providers/AssetsProvider.js";
+import { SearchableButtonList } from "../../SearchableButtonList.js";
+import { useSend } from "./context.js";
+import { CpslIcon } from "@getpara/react-components";
+import { formatAssetQuantity, formatCurrency } from "@getpara/web-sdk";
+import { ModalStep } from "../../../utils/steps.js";
+import { useModalStore } from "../../../stores/index.js";
+import { AssetNetwork } from "./AssetNetwork.js";
+const NetworkIcons = memo(({ networks }) => {
+  return /* @__PURE__ */ jsx("div", { style: { position: "relative", height: "12px" }, children: networks.slice(0, 3).map((network, index) => {
+    var _a;
+    return /* @__PURE__ */ jsx(
+      CpslIcon,
+      {
+        src: network.metadata.logoUrl,
+        size: "16px",
+        radius: "full",
+        style: {
+          borderRadius: "1000px",
+          backgroundColor: "var(--cpsl-color-primary)",
+          position: "absolute",
+          top: 0,
+          left: `${index * 8}px`,
+          zIndex: 3 - index
+        }
+      },
+      ((_a = network.metadata) == null ? void 0 : _a.logoUrl) || index
+    );
+  }) });
+});
+NetworkIcons.displayName = "NetworkIcons";
+function AccountSendAsset() {
+  const setStep = useModalStore((state) => state.setStep);
+  const { profileBalance } = useAssets();
+  const { selectedWallet } = useWalletState();
+  const { setSendMetadata, setTransferAmount } = useSend();
+  const walletAssets = useMemo(() => {
+    var _a, _b;
+    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;
+    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 {
+      key: item.metadata.zerionId,
+      icon: /* @__PURE__ */ jsx(
+        AssetNetwork,
+        {
+          assetSrc: item.metadata.logoUrl,
+          networkSrc: item.networks.length === 1 ? item.networks[0].metadata.logoUrl : void 0,
+          size: 48
+        }
+      ),
+      text: item.metadata.symbol,
+      textSecondary: item.networks.length > 0 ? item.networks.length === 1 ? item.networks[0].metadata.name : /* @__PURE__ */ jsx(NetworkIcons, { networks: item.networks }) : void 0,
+      endText: isValued ? formatCurrency(item.value) : quantity,
+      endTextSecondary: isValued ? quantity : void 0
+    };
+  }, []);
+  const searchFilter = useCallback(({ item, searchStr }) => {
+    if (!item.metadata) return false;
+    const lowerSearchStr = searchStr.toLowerCase();
+    return item.metadata.symbol.toLowerCase().includes(lowerSearchStr) || item.metadata.name.toLowerCase().includes(lowerSearchStr);
+  }, []);
+  const onSelect = useCallback(
+    (item) => {
+      setTransferAmount(0);
+      setSendMetadata({
+        asset: item,
+        network: item.networks[0]
+      });
+      setStep(item.networks.length > 1 ? ModalStep.ACCOUNT_SEND_NETWORK : ModalStep.ACCOUNT_SEND);
+    },
+    [setTransferAmount, setSendMetadata, setStep]
+  );
+  return /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsx(
+    SearchableButtonList,
+    {
+      items: walletAssets,
+      transformItem,
+      searchFilter,
+      onSelect
+    }
+  ) });
+}
+export {
+  AccountSendAsset
+};

package/dist/modal/components/Account/AccountSend/AccountSendForm.d.ts

@@ -0,0 +1 @@
+export declare function AccountSendForm(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,343 @@
+"use client";
+import "../../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslIcon, CpslInput, CpslText } from "@getpara/react-components";
+import { QuantityInput } from "../../QuantityInput.js";
+import { formatAssetQuantity, formatCurrency } from "@getpara/shared";
+import { WalletTypeIcon } from "@getpara/react-common";
+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 { useDebounce } from "../../../hooks/useDebounce.js";
+import { AssetNetwork } from "./AssetNetwork.js";
+import { useWalletState } from "../../../../provider/index.js";
+function AccountSendForm() {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const { selectedWallet } = useWalletState();
+  const setStep = useModalStore((state) => state.setStep);
+  const onRampConfig = useModalStore((state) => state.onRampConfig);
+  const {
+    estimate,
+    broadcast,
+    onSubmit,
+    sendMetadata,
+    destinationAddress,
+    setDestinationAddress,
+    transferValue,
+    setTransferValue,
+    transferAmount,
+    setTransferAmount,
+    assetPrice,
+    assetValueOnNetwork,
+    assetAmountOnNetwork,
+    isMax,
+    setIsMax,
+    estimateIsPending,
+    broadcastIsPending,
+    optionsType
+  } = useSend();
+  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 shouldUseAmountMode = !assetPrice || !!assetPrice && isTestnet;
+  const [inputMode, setInputMode] = useState(shouldUseAmountMode ? "AMOUNT" : "VALUE");
+  const [inputValue, setInputValue] = useState(
+    inputMode === "VALUE" ? transferValue.toFixed(2) : formatAssetQuantity({ quantity: transferAmount, symbol: "" })
+  );
+  const dbInputValue = useDebounce(inputValue, 500);
+  const isEditing = useRef(false);
+  const error = useMemo(() => {
+    var _a2;
+    const errorRef = (estimate == null ? void 0 : estimate.error) || (broadcast == null ? void 0 : broadcast.error);
+    if (!errorRef || estimateIsPending || broadcastIsPending) {
+      return null;
+    }
+    switch (errorRef == null ? void 0 : errorRef.code) {
+      case "INSUFFICIENT_NATIVE_BALANCE": {
+        const nativeSymbol = (selectedWallet == null ? void 0 : selectedWallet.type) === "EVM" ? "ETH" : "SOL";
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(CpslText, { variant: "bodyXS", color: "error", style: { textAlign: (onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled) ? "left" : "center" }, children: [
+            "You need ",
+            (_a2 = estimate == null ? void 0 : estimate.transferAmount) != null ? _a2 : nativeSymbol,
+            " to conduct this transaction"
+          ] }),
+          (onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled) && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              style: {
+                background: "transparent",
+                border: "none",
+                cursor: "pointer",
+                color: "var(--cpsl-color-text-contrast)",
+                fontSize: "12px",
+                fontWeight: "500",
+                display: "flex",
+                alignItems: "center",
+                gap: "4px",
+                paddingRight: 0
+              },
+              onClick: () => setStep(ModalStep.ADD_FUNDS_BUY),
+              children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "Buy ",
+                  nativeSymbol
+                ] }),
+                /* @__PURE__ */ jsx(CpslIcon, { icon: "chevronRight", size: "12px", color: "var(--cpsl-color-text-contrast)" })
+              ]
+            }
+          )
+        ] });
+      }
+      default: {
+        return /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "error", style: { textAlign: "center", width: "100%" }, children: errorRef == null ? void 0 : errorRef.message });
+      }
+    }
+  }, [
+    broadcast == null ? void 0 : broadcast.error,
+    estimate == null ? void 0 : estimate.error,
+    selectedWallet == null ? void 0 : selectedWallet.type,
+    estimateIsPending,
+    broadcastIsPending,
+    onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled
+  ]);
+  useEffect(() => {
+    var _a2, _b2;
+    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, (_d = (_c = sendMetadata == null ? void 0 : sendMetadata.network) == null ? void 0 : _c.metadata) == null ? void 0 : _d.isTestnet]);
+  useEffect(() => {
+    if (inputMode === "AMOUNT") {
+      setTransferAmount(Number(dbInputValue));
+    } else {
+      setTransferValue(Number(dbInputValue));
+    }
+  }, [dbInputValue]);
+  useEffect(() => {
+    setDestinationAddress(dbInputDestinationAddress);
+  }, [dbInputDestinationAddress]);
+  useEffect(() => {
+    if (inputMode === "VALUE" && !isEditing.current) {
+      const numValue = parseFloat(inputValue || "0");
+      const formattedValue = transferValue.toFixed(2);
+      if (Math.abs(numValue - transferValue) > 1e-3 || inputValue !== formattedValue) {
+        setInputValue(formattedValue);
+      }
+    }
+  }, [transferValue, inputMode, inputValue]);
+  useEffect(() => {
+    if (inputMode === "AMOUNT" && !isEditing.current && Number(inputValue) !== transferAmount) {
+      setInputValue(formatAssetQuantity({ quantity: transferAmount, symbol: "" }));
+    }
+  }, [transferAmount]);
+  useEffect(() => {
+    setInputDestinationAddress(destinationAddress);
+  }, [destinationAddress]);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", width: "100%", flexDirection: "column", gap: "16px", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          width: "100%",
+          background: "var(--cpsl-color-background-4)",
+          borderRadius: "var(--cpsl-border-radius-input)",
+          padding: "32px 16px 16px",
+          flexDirection: "column",
+          gap: "32px",
+          alignItems: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", width: "100%", flexDirection: "column", gap: "4px", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx(
+              QuantityInput,
+              {
+                value: inputMode === "VALUE" ? isMax && !!assetValueOnNetwork ? assetValueOnNetwork.value.toFixed(2) : inputValue : isMax && !!assetAmountOnNetwork ? formatAssetQuantity({ quantity: assetAmountOnNetwork, symbol: "" }) : inputValue,
+                onChange: (value) => {
+                  setIsMax(false);
+                  setInputValue(value != null ? value : "");
+                },
+                onFocus: () => isEditing.current = true,
+                onBlur: () => {
+                  isEditing.current = false;
+                  if (inputMode === "VALUE" && inputValue) {
+                    const numValue = parseFloat(inputValue);
+                    if (!isNaN(numValue)) {
+                      const formatted = numValue.toFixed(2);
+                      if (inputValue !== formatted) {
+                        setInputValue(formatted);
+                      }
+                    }
+                  }
+                },
+                symbol: inputMode === "VALUE" ? "$" : void 0,
+                size: "56px"
+              }
+            ),
+            !!assetPrice && assetPrice.value > 0 && !isTestnet && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  background: "transparent",
+                  border: "none",
+                  cursor: "pointer"
+                },
+                onClick: () => setInputMode((prev) => prev === "VALUE" ? "AMOUNT" : "VALUE"),
+                children: [
+                  /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "secondary", children: inputMode === "VALUE" ? formatAssetQuantity({
+                    quantity: isMax && assetAmountOnNetwork ? assetAmountOnNetwork : transferAmount,
+                    symbol: (_e = sendMetadata.asset.metadata) == null ? void 0 : _e.symbol
+                  }) : formatCurrency({
+                    value: isMax && assetValueOnNetwork ? assetValueOnNetwork.value : Number(transferValue),
+                    currency: "USD"
+                  }) }),
+                  /* @__PURE__ */ jsx(CpslIcon, { icon: "arrowUpDown", size: "16px", color: "var(--cpsl-color-text-secondary)" })
+                ]
+              }
+            )
+          ] }),
+          (sendMetadata == null ? void 0 : sendMetadata.asset) && (sendMetadata == null ? void 0 : sendMetadata.network) && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => !["SINGLE_NETWORK", "NONE"].includes(optionsType) ? setStep(optionsType === "SINGLE_ASSET" ? ModalStep.ACCOUNT_SEND_NETWORK : ModalStep.ACCOUNT_SEND_ASSET) : void 0,
+              style: {
+                cursor: "pointer",
+                background: "transparent",
+                border: "none",
+                padding: 0,
+                display: "flex",
+                width: "100%",
+                height: "32px",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "flex-start",
+                      justifyContent: "center",
+                      gap: "8px",
+                      flexGrow: 1,
+                      height: "100%"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        AssetNetwork,
+                        {
+                          assetSrc: sendMetadata.asset.metadata.logoUrl,
+                          networkSrc: sendMetadata.network.metadata.logoUrl,
+                          size: 32
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "flex-start",
+                            justifyContent: "space-between",
+                            flexGrow: 1,
+                            position: "relative",
+                            height: "100%"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              CpslText,
+                              {
+                                variant: "bodyM",
+                                color: "contrast",
+                                style: { position: "absolute", height: "16px", top: "-4px", left: 0 },
+                                children: sendMetadata.asset.metadata.symbol
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs(
+                              CpslText,
+                              {
+                                variant: "bodyS",
+                                color: "secondary",
+                                style: { position: "absolute", height: "14px", bottom: 0, left: 0 },
+                                children: [
+                                  "Balance:",
+                                  " ",
+                                  formatAssetQuantity({
+                                    quantity: assetAmountOnNetwork,
+                                    symbol: ""
+                                  }),
+                                  !!assetValueOnNetwork && /* @__PURE__ */ jsxs("span", { style: { color: "var(--cpsl-color-text-tertiary) !important" }, children: [
+                                    " (",
+                                    formatCurrency(assetValueOnNetwork),
+                                    ")"
+                                  ] })
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                !isMax && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    style: {
+                      background: "transparent",
+                      cursor: "pointer",
+                      border: "1px solid var(--cpsl-color-background-16)",
+                      color: "var(--cpsl-color-text-primary)",
+                      borderRadius: "4px",
+                      padding: "4px"
+                    },
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setIsMax(true);
+                    },
+                    children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "primary", children: "Max" })
+                  }
+                ),
+                optionsType !== "SINGLE_NETWORK" && /* @__PURE__ */ jsx(CpslIcon, { icon: "chevronRight", size: "24px", color: "var(--cpsl-color-text-contrast)" })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CpslInput,
+      {
+        placeholder: "Enter recipient address",
+        value: inputDestinationAddress,
+        onCpslInput: (e) => setInputDestinationAddress(e.detail.value),
+        style: { width: "100%" },
+        children: /* @__PURE__ */ jsx(WalletTypeIcon, { walletType: selectedWallet.type, size: "24px", slot: "start" })
+      }
+    ),
+    ((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..." : (_i = (_h = ((_g = (_f = sendMetadata == null ? void 0 : sendMetadata.network) == null ? void 0 : _f.metadata) == null ? void 0 : _g.isTestnet) ? estimate == null ? void 0 : estimate.feeAmount : estimate == null ? void 0 : estimate.feeValue) != null ? _h : estimate == null ? void 0 : estimate.feeAmount) != null ? _i : "0" })
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { style: { display: "flex", width: "100%", gap: "4px", alignItems: "center", justifyContent: "space-between" }, children: error }),
+    /* @__PURE__ */ jsx(
+      CpslButton,
+      {
+        variant: "primary",
+        fullWidth: true,
+        pending: estimateIsPending || broadcastIsPending,
+        disabled: estimateIsPending || broadcastIsPending || !((_j = estimate == null ? void 0 : estimate.result) == null ? void 0 : _j.txSerialized) || !!(estimate == null ? void 0 : estimate.error),
+        onClick: onSubmit,
+        children: "Confirm Send"
+      }
+    )
+  ] });
+}
+export {
+  AccountSendForm
+};

package/dist/modal/components/Account/AccountSend/AccountSendNetwork.d.ts

@@ -0,0 +1 @@
+export declare function AccountSendNetwork(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,53 @@
+"use client";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useAssets } from "../../../../provider/providers/AssetsProvider.js";
+import { SearchableButtonList } from "../../SearchableButtonList.js";
+import { useSend } from "./context.js";
+import { formatAssetQuantity, formatCurrency } from "@getpara/web-sdk";
+import { ModalStep } from "../../../utils/steps.js";
+import { useModalStore } from "../../../stores/index.js";
+import { AssetNetwork } from "./AssetNetwork.js";
+function AccountSendNetwork() {
+  const setStep = useModalStore((state) => state.setStep);
+  const { profileBalance } = useAssets();
+  const { sendMetadata, setSendMetadata } = useSend();
+  const assetNetworks = useMemo(() => {
+    var _a, _b;
+    return (_b = (_a = sendMetadata.asset) == null ? void 0 : _a.networks) != null ? _b : [];
+  }, [profileBalance, sendMetadata.asset]);
+  return /* @__PURE__ */ jsx("div", { style: { width: "100%", maxHeight: "480px" }, children: /* @__PURE__ */ jsx(
+    SearchableButtonList,
+    {
+      items: assetNetworks,
+      transformItem: (item) => {
+        return {
+          key: item.metadata.zerionId,
+          icon: /* @__PURE__ */ jsx(AssetNetwork, { assetSrc: sendMetadata.asset.metadata.logoUrl, networkSrc: item.metadata.logoUrl, size: 48 }),
+          text: sendMetadata.asset.metadata.symbol,
+          textSecondary: item.metadata.name,
+          endText: formatAssetQuantity({ quantity: item.quantity, symbol: sendMetadata.asset.metadata.symbol }),
+          endTextSecondary: formatCurrency(item.value)
+        };
+      },
+      searchPlaceholder: "Search for a network",
+      searchFilter: ({ item, searchStr }) => {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = item.metadata) == null ? void 0 : _a.name) == null ? void 0 : _b.toLowerCase().includes(searchStr.toLowerCase())) != null ? _c : false;
+      },
+      onSelect: (item) => {
+        setSendMetadata((prev) => __spreadProps(__spreadValues({}, prev), {
+          network: item
+        }));
+        setStep(ModalStep.ACCOUNT_SEND);
+      }
+    }
+  ) });
+}
+export {
+  AccountSendNetwork
+};

package/dist/modal/components/Account/AccountSend/AccountSendNoAssets.d.ts

@@ -0,0 +1 @@
+export declare function AccountSendNoAssets(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,56 @@
+"use client";
+import "../../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslText } from "@getpara/react-components";
+import { useModalStore } from "../../../stores/index.js";
+import { ModalStep } from "../../../utils/steps.js";
+function AccountSendNoAssets() {
+  const onRampConfig = useModalStore((state) => state.onRampConfig);
+  const setStep = useModalStore((state) => state.setStep);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "308px",
+        textAlign: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "4px",
+              flexGrow: 1
+            },
+            children: [
+              /* @__PURE__ */ jsx(CpslText, { variant: "bodyL", color: "primary", weight: "semiBold", children: "No Funds Available" }),
+              /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", children: "Switch to a wallet with funds or buy crypto with this wallet." })
+            ]
+          }
+        ),
+        (onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled) && /* @__PURE__ */ jsx(
+          CpslButton,
+          {
+            fullWidth: true,
+            variant: "primary",
+            onClick: () => {
+              setStep(ModalStep.ADD_FUNDS_BUY);
+            },
+            children: "Buy"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AccountSendNoAssets
+};