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

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

@@ -0,0 +1,220 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { ACCOUNT_TYPES, safeStyled, useCopyToClipboard, WalletTypeIcon } from "@getpara/react-common";
+import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
+import {
+  formatAssetQuantity,
+  formatCurrency,
+  truncateAddress
+} from "@getpara/web-sdk";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { useModalStore } from "../../stores/index.js";
+import { useAssets } from "../../../provider/providers/AssetsProvider.js";
+import { ModalStep } from "../../utils/steps.js";
+import { AccountTypeIcon } from "../common.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+const AccountProfileEntry = ({
+  icon,
+  key,
+  text,
+  textSecondary,
+  textTertiary,
+  copyString,
+  accessory,
+  style,
+  className,
+  onSelect
+}) => {
+  const [isCopied, copy] = useCopyToClipboard();
+  const Copy = copyString ? /* @__PURE__ */ jsx(
+    CpslButton,
+    {
+      size: "small",
+      variant: "ghost",
+      onClick: (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        copy(copyString);
+      },
+      children: /* @__PURE__ */ jsx(CopyIcon, { id: "ignore-click", slot: "start", isCopied, icon: isCopied ? "check" : "copy" })
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(EntryContainer, { onClick: onSelect, className, style, children: [
+    icon,
+    /* @__PURE__ */ jsx(EntryDisplayName, { variant: "bodyM", color: "contrast", children: text }),
+    /* @__PURE__ */ jsx(EntryFlex, { children: textSecondary ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "secondary", children: textSecondary }),
+      Copy
+    ] }) : Copy }),
+    textTertiary && /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "contrast", children: textTertiary }),
+    accessory,
+    onSelect && /* @__PURE__ */ jsx(CpslIcon, { color: "var(--cpsl-color-foreground-32)", icon: "chevronRight", size: "16px" })
+  ] }, key);
+};
+const WalletEntry = ({
+  wallet,
+  isSelectable = false,
+  style,
+  className
+}) => {
+  var _a, _b;
+  const { wallets } = useExternalWallets();
+  const { profileBalance } = useAssets();
+  const balancesConfig = useStore((state) => {
+    var _a2;
+    return (_a2 = state.modalConfig) == null ? void 0 : _a2.balances;
+  });
+  const setProfileWallet = useModalStore((state) => state.setProfileWallet);
+  const setStep = useModalStore((state) => state.setStep);
+  const walletBalance = useMemo(() => {
+    return profileBalance == null ? void 0 : profileBalance.wallets.find((w) => w.address === wallet.address);
+  }, [profileBalance, wallet.address]);
+  const externalWallet = useMemo(
+    () => wallets.find((w) => w.id === wallet.externalProviderId),
+    [wallets, wallet.externalProviderId]
+  );
+  const withAddressShort = wallet.ensName || !!wallet.externalProviderId;
+  const balance = useMemo(() => {
+    var _a2;
+    switch (true) {
+      case !balancesConfig:
+      case (balancesConfig == null ? void 0 : balancesConfig.displayType) === "AGGREGATED":
+        return formatCurrency(walletBalance == null ? void 0 : walletBalance.value);
+      default:
+        return formatAssetQuantity({
+          quantity: (_a2 = walletBalance == null ? void 0 : walletBalance.assets.find(
+            ({ metadata }) => !!metadata && metadata.symbol === balancesConfig.asset.symbol
+          )) == null ? void 0 : _a2.quantity,
+          symbol: balancesConfig.asset.symbol
+        });
+    }
+  }, [balancesConfig, walletBalance]);
+  return /* @__PURE__ */ jsx(
+    AccountProfileEntry,
+    {
+      icon: /* @__PURE__ */ jsx(
+        WalletTypeIcon,
+        {
+          walletType: wallet.type,
+          externalWallet: externalWallet != null ? externalWallet : wallet.externalProviderId,
+          size: "24px",
+          inset: "0"
+        }
+      ),
+      text: (_b = (_a = wallet.ensName) != null ? _a : wallet.externalProviderId) != null ? _b : wallet.addressShort,
+      textSecondary: withAddressShort ? wallet.addressShort : void 0,
+      textTertiary: balance,
+      copyString: wallet.address,
+      style,
+      className,
+      onSelect: isSelectable ? () => {
+        setProfileWallet(wallet);
+        setStep(ModalStep.ACCOUNT_WALLET);
+      } : void 0
+    },
+    wallet.address
+  );
+};
+const AccountLinkEntry = ({
+  accountLink,
+  isPrimary = false
+}) => {
+  var _a, _b, _c, _d;
+  const para = useInternalClient();
+  const { wallets } = useExternalWallets();
+  const { unlinkAccount } = useAccountLinking();
+  const { identifier, displayName, type, externalWallet } = accountLink;
+  const externalWalletConnector = wallets.find(
+    (wallet) => {
+      var _a2, _b2;
+      return wallet.id === (externalWallet == null ? void 0 : externalWallet.providerId) || wallet.id.toLowerCase() === ((_a2 = externalWallet == null ? void 0 : externalWallet.providerId) == null ? void 0 : _a2.toLowerCase()) || wallet.name.toLowerCase() === ((_b2 = externalWallet == null ? void 0 : externalWallet.providerId) == null ? void 0 : _b2.toLowerCase());
+    }
+  );
+  let accountType = type;
+  let src = void 0;
+  let address = void 0;
+  let addressShort = void 0;
+  if (externalWallet) {
+    address = (_a = externalWallet.addressBech32) != null ? _a : externalWallet.address;
+    addressShort = truncateAddress(address, externalWallet.type, {
+      prefix: para.cosmosPrefix
+    });
+    if (externalWalletConnector) {
+      accountType = void 0;
+      src = externalWalletConnector.iconUrl;
+    } else if (externalWallet.providerId && ACCOUNT_TYPES[externalWallet.providerId]) {
+      accountType = externalWallet.providerId;
+      src = void 0;
+    } else {
+      accountType = "EXTERNAL_WALLET";
+      src = void 0;
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    AccountProfileEntry,
+    {
+      icon: /* @__PURE__ */ jsx(AccountTypeIcon, { accountType, src, size: "24px" }),
+      text: externalWallet ? (_d = (_c = (_b = externalWallet.ensName) != null ? _b : externalWalletConnector == null ? void 0 : externalWalletConnector.name) != null ? _c : externalWallet.provider) != null ? _d : "" : displayName != null ? displayName : identifier,
+      textSecondary: addressShort,
+      copyString: address,
+      accessory: isPrimary ? void 0 : /* @__PURE__ */ jsx(
+        EntryUnlink,
+        {
+          href: "#",
+          onClick: isPrimary ? void 0 : (e) => {
+            e.preventDefault();
+            unlinkAccount(accountLink);
+          },
+          children: "Unlink"
+        }
+      )
+    },
+    identifier
+  );
+};
+const EntryContainer = safeStyled.div`
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  ${({ onClick }) => onClick ? "cursor: pointer;" : ""}
+`;
+const EntryDisplayName = safeStyled(CpslText)``;
+const EntryFlex = safeStyled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex: 1;
+`;
+const CopyIcon = safeStyled(CpslIcon)`
+  --width: 16px;
+  --height: 16px;
+  --icon-color: ${({ isCopied }) => isCopied ? "var(--cpsl-color-utility-green) !important" : "var(--cpsl-color-text-secondary)"};
+
+  &:hover {
+    --icon-color: var(--cpsl-color-text-contrast);
+  }
+`;
+const EntryUnlink = safeStyled.a`
+  color: var(--cpsl-color-utility-red);
+  position: absolute;
+  right: 0;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: var(--cpsl-font-family);
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+export {
+  AccountLinkEntry,
+  WalletEntry
+};

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

@@ -6,13 +6,15 @@ import { AccountTypeIcon, GradientScroll, StepContainer } from "../common.js";
 import { CpslButton, CpslDivider, CpslText } from "@getpara/react-components";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
+import { useLinkedAccounts } from "../../../provider/hooks/index.js";
 import { useEffect, useMemo } from "react";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { getAccountTypeName, safeStyled } from "@getpara/react-common";
 function AccountProfileLinkOptions() {
   const para = useInternalClient();
   const { accountLinkOptions, linkAccount, isLinkAccountPending, linkAccountError, setLinkAccountError, resetMutations } = useAccountLinking();
-  const { wallet: connectedWallet, wallets } = useExternalWallets();
+  const { wallets } = useExternalWallets();
+  const { data: linkedAccounts } = useLinkedAccounts();
   const [isEmail, isPhone, externalWalletIndex, isOptions] = [
     accountLinkOptions.includes("EMAIL"),
     accountLinkOptions.includes("PHONE"),
@@ -28,8 +30,17 @@ function AccountProfileLinkOptions() {
     return Array.from(
       new Set(
         baseOptions.filter((option) => {
-          if (!wallets.some((wallet) => wallet.id === option) || (connectedWallet == null ? void 0 : connectedWallet.id) !== option && wallets.some(({ type, id, installed, isMobile }) => {
-            return (installed || isMobile) && (para == null ? void 0 : para.supportedWalletTypes.some((obj) => obj.type === type)) && id === option;
+          if (!wallets.some((wallet) => wallet.id === option) || wallets.some(({ type, id, installed, isMobile }) => {
+            if (!(installed || isMobile) || !(para == null ? void 0 : para.supportedWalletTypes.some((obj) => obj.type === type)) || id !== option) {
+              return false;
+            }
+            const isAlreadyLinked = [...(linkedAccounts == null ? void 0 : linkedAccounts.primary) || [], ...(linkedAccounts == null ? void 0 : linkedAccounts.linked) || []].some(
+              (linkedAccount) => {
+                var _a, _b;
+                return ((_a = linkedAccount.externalWallet) == null ? void 0 : _a.providerId) === id && ((_b = linkedAccount.externalWallet) == null ? void 0 : _b.type) === type;
+              }
+            );
+            return !isAlreadyLinked;
           })) {
             return true;
           }
@@ -37,7 +48,7 @@ function AccountProfileLinkOptions() {
         })
       )
     );
-  }, [accountLinkOptions, externalWalletIndex, wallets]);
+  }, [accountLinkOptions, externalWalletIndex, wallets, linkedAccounts, para == null ? void 0 : para.supportedWalletTypes]);
   useEffect(() => {
     resetMutations();
     setLinkAccountError(null);

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;