@getpara/react-sdk-lite 2.0.0-dev.6 → 2.0.0

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
+};

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

@@ -0,0 +1,5 @@
+export declare function AssetNetwork({ size, assetSrc, networkSrc, }: {
+    size?: number;
+    assetSrc?: string;
+    networkSrc?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,36 @@
+"use client";
+import "../../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CpslIcon } from "@getpara/react-components";
+function AssetNetwork({
+  size = 40,
+  assetSrc,
+  networkSrc
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: `${size}px`, height: `${size}px` }, children: [
+    assetSrc ? /* @__PURE__ */ jsx(CpslIcon, { radius: "full", src: assetSrc, size: `${size}px` }) : /* @__PURE__ */ jsx(
+      CpslIcon,
+      {
+        icon: "coins",
+        radius: "full",
+        size: `${size}px`,
+        inset: `${size / 8}px`,
+        color: "var(--cpsl-color-text-contrast)",
+        background: "var(--cpsl-color-accent-64)"
+      }
+    ),
+    networkSrc && /* @__PURE__ */ jsx(
+      CpslIcon,
+      {
+        radius: "full",
+        src: networkSrc,
+        size: `${2 + size * 3 / 8}px`,
+        border: "1px solid var(--cpsl-color-background-4)",
+        style: { position: "absolute", bottom: 0, right: 0 }
+      }
+    )
+  ] });
+}
+export {
+  AssetNetwork
+};

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

@@ -0,0 +1,38 @@
+import { Dispatch, PropsWithChildren, SetStateAction } from 'react';
+import { AssetValue, BroadcastTransactionResult, EstimateTransactionResult, WalletBalance } from '@getpara/shared';
+export type SendStep = 'SEND_FORM' | 'SEND_ASSET' | 'SEND_NETWORK';
+type SendMetadata = {
+    asset: WalletBalance['assets'][number] | null;
+    network: WalletBalance['assets'][number]['networks'][number] | null;
+};
+type OptionsType = 'MULTIPLE' | 'SINGLE_ASSET' | 'SINGLE_NETWORK' | 'NONE';
+type Value = {
+    step: SendStep;
+    sendMetadata: SendMetadata;
+    setSendMetadata: Dispatch<SetStateAction<SendMetadata>>;
+    assetPrice: AssetValue | null;
+    assetValueOnNetwork: AssetValue | null;
+    assetAmountOnNetwork: number;
+    destinationAddress: string;
+    setDestinationAddress: Dispatch<SetStateAction<string>>;
+    transferValue: number;
+    setTransferValue: Dispatch<SetStateAction<number>>;
+    transferAmount: number;
+    setTransferAmount: Dispatch<SetStateAction<number>>;
+    estimate: EstimateTransactionResult | null;
+    isMax: boolean;
+    setIsMax: Dispatch<SetStateAction<boolean>>;
+    estimateIsPending: boolean;
+    estimateIsError: boolean;
+    onSubmit: () => void;
+    broadcast: BroadcastTransactionResult | null;
+    broadcastIsPending: boolean;
+    broadcastIsError: boolean;
+    optionsType: OptionsType;
+};
+export declare const AccountSendContext: import("react").Context<Value>;
+export declare function AccountSendProvider({ children, step }: PropsWithChildren<{
+    step: SendStep;
+}>): import("react/jsx-runtime").JSX.Element;
+export declare const useSend: () => Value;
+export {};