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

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/ParaModal.js

@@ -14,7 +14,7 @@ import { ModalStep, RESET_TO_ACCOUNT_STEPS, RESET_TO_AUTH_STEPS } from "./utils/
 import { AuthLayout } from "./types/modalProps.js";
 import { DEFAULTS } from "./constants/defaults.js";
 import { useGoBack } from "./hooks/useGoBack.js";
-import { safeStyled } from "@getpara/react-common";
+import { safeStyled, SDK_VERSION } from "@getpara/react-common";
 import { hasEmbeddedAuth, hasExternalWallet } from "./utils/authLayoutHelpers.js";
 import { useAccount, useModal, useParaStatus, useWalletState } from "../provider/index.js";
 import { useInternalClient } from "../provider/hooks/utils/useInternalClient.js";
@@ -23,13 +23,12 @@ 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 { SDK_VERSION } from "./constants/constants.js";
 defineCustomElements();
 const ParaModal = forwardRef((props, ref) => {
   const storedModalConfig = useStore((state) => state.modalConfig);
-  const openedToStep = useStore((state) => state.openedToStep);
+  const refs = useStore((state) => state.refs);
   const modalContentRef = useRef(null);
-  const refs = useModalStore((state) => state.refs);
+  const modalRefs = useModalStore((state) => state.refs);
   const flow = useModalStore((state) => state.flow);
   const currentStep = useModalStore((state) => state.step);
   const setAuthState = useModalStore((state) => state.setAuthState);
@@ -57,6 +56,7 @@ const ParaModal = forwardRef((props, ref) => {
   const externalWallets = useStore((state) => state.externalWallets);
   const providerProps = useStore((state) => state.providerProps);
   const setAccountLinkOptions = useModalStore((state) => state.setAccountLinkOptions);
+  const selectedExternalWallet = useModalStore((state) => state.selectedExternalWallet);
   const isInitialized = useRef(false);
   const _a = __spreadValues(__spreadValues({}, storedModalConfig), props), {
     isOpen: configIsOpen,
@@ -112,7 +112,7 @@ const ParaModal = forwardRef((props, ref) => {
           }), rest),
           reactSdkVersion: SDK_VERSION
         });
-      } catch (_) {
+      } catch (e) {
       }
     });
     trackAnalytics();
@@ -153,7 +153,7 @@ const ParaModal = forwardRef((props, ref) => {
         break;
       case isAccount:
         setFlow("account");
-        if (!openedToStep.current) {
+        if (!refs.openedToStep.current) {
           setStep(ModalStep.ACCOUNT_MAIN);
         }
         break;
@@ -168,7 +168,6 @@ const ParaModal = forwardRef((props, ref) => {
           yield disconnectExternalWallet();
           setSelectedWallet({ id: void 0, type: void 0 });
         }
-        yield para.logout();
         if (shouldAutoLogin) {
           if (defaultAuthIdentifier && ((_a2 = para.authInfo) == null ? void 0 : _a2.identifier) !== defaultAuthIdentifier) {
             const number = parsePhoneNumberFromString(defaultAuthIdentifier);
@@ -193,12 +192,18 @@ const ParaModal = forwardRef((props, ref) => {
       initModal(isOpen);
       isInitialized.current = true;
     }
+    let timerId;
     if (!bareModal && isReady && !isOpen && isInitialized.current) {
-      setTimeout(() => {
+      timerId = setTimeout(() => {
         initModal();
         isInitialized.current = false;
       }, 250);
     }
+    return () => {
+      if (timerId) {
+        clearTimeout(timerId);
+      }
+    };
   }, [bareModal, isReady, isOpen, isAccountLoading]);
   useEffect(() => {
     let _authLayout = authLayout;
@@ -224,10 +229,10 @@ const ParaModal = forwardRef((props, ref) => {
     updateSelectedWallet();
   }, [para]);
   useEffect(() => {
-    if (bareModal && !isAccountLoading && !isConnected && !["signup", "login"].includes(flow != null ? flow : "") && refs.currentStep.current !== ModalStep.AUTH_MAIN) {
+    if (bareModal && !selectedExternalWallet && !isAccountLoading && !isConnected && !["signup", "login"].includes(flow != null ? flow : "") && modalRefs.currentStep.current !== ModalStep.AUTH_MAIN) {
       setStep(ModalStep.AUTH_MAIN);
     }
-  }, [bareModal, flow, isConnected, isAccountLoading]);
+  }, [bareModal, flow, isConnected, isAccountLoading, selectedExternalWallet]);
   useEffect(() => {
     setAccountLinkOptions(propsSupportedAccountLinks != null ? propsSupportedAccountLinks : para == null ? void 0 : para.supportedAccountLinks);
   }, [propsSupportedAccountLinks, para == null ? void 0 : para.supportedAccountLinks]);
@@ -257,7 +262,7 @@ const ParaModal = forwardRef((props, ref) => {
     setIsModalMounted(true);
   };
   const handleModalExited = () => __async(void 0, null, function* () {
-    openedToStep.current = null;
+    refs.openedToStep.current = null;
     setIsModalMounted(false);
     if (RESET_TO_AUTH_STEPS.includes(currentStep)) {
       resetModalState();

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

@@ -8,22 +8,36 @@ 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, useWalletBalance } 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";
 import { AccountHeader } from "./AccountHeader.js";
 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 para = useInternalClient();
   const { embedded } = useAccount();
-  const { data: balance } = useWalletBalance();
+  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) {
@@ -56,7 +70,7 @@ const Account = () => {
     /* @__PURE__ */ jsx(AccountHeader, { withBalance: true }),
     /* @__PURE__ */ jsxs(LowerContainer, { children: [
       isGuestMode && /* @__PURE__ */ jsxs(Fragment, { children: [
-        balance && parseFloat(balance) > 0 && /* @__PURE__ */ jsxs(Alert, { children: [
+        profileBalance && profileBalance.value && profileBalance.value.value > 0 && /* @__PURE__ */ jsxs(Alert, { children: [
           /* @__PURE__ */ jsx(CpslIcon, { icon: "alertTriangle", size: "24px", style: { color: "var(--cpsl-color-utility-yellow)" } }),
           "You've funded this account - complete account setup to maintain access."
         ] }),
@@ -75,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, {}) })
@@ -122,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/AccountHeader.js

@@ -2,32 +2,26 @@
 import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { getExternalWalletIcon, safeStyled } from "@getpara/react-common";
-import { formatBalanceString } from "../../utils/stringFormatters.js";
 import { CpslIcon, CpslText } from "@getpara/react-components";
 import { useMemo } from "react";
 import { truncateAddress } from "@getpara/web-sdk";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useAccount, useWallet, useWalletBalance } from "../../../provider/index.js";
-import { WalletSelect } from "../WalletSelect/WalletSelect.js";
-const Balance = () => {
-  const { data: balance } = useWalletBalance();
-  return /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", weight: "medium", style: { visibility: !!balance ? "visible" : "hidden" }, children: balance ? formatBalanceString(balance) : "0" });
-};
+import { useAssets } from "../../../provider/providers/AssetsProvider.js";
+import { useAccount, useWallet } from "../../../provider/index.js";
+import { AccountWalletSelect } from "./AccountWalletSelect.js";
 const AccountHeader = ({ withBalance = false } = {}) => {
   const para = useInternalClient();
   const { connectionType } = useAccount();
+  const { profileBalance, totalBalance } = useAssets();
   const { data: activeWallet } = useWallet();
   const { name, icon, src } = useMemo(() => {
     var _a;
     let name2, icon2, src2;
     switch (true) {
       case (activeWallet == null ? void 0 : activeWallet.isExternal):
-        {
-          const wallet = Object.values(para.externalWallets)[0];
-          name2 = (_a = wallet.ensName) != null ? _a : truncateAddress(wallet.address, wallet.type, { prefix: para.cosmosPrefix });
-          src2 = wallet.ensAvatar;
-          icon2 = getExternalWalletIcon(wallet.externalProviderId);
-        }
+        name2 = (_a = activeWallet.ensName) != null ? _a : truncateAddress(activeWallet.address, activeWallet.type, { prefix: para.cosmosPrefix });
+        src2 = activeWallet.ensAvatar;
+        icon2 = getExternalWalletIcon(activeWallet.externalProviderId);
         break;
       default:
         name2 = `${para.partnerName} Wallet`;
@@ -36,7 +30,7 @@ const AccountHeader = ({ withBalance = false } = {}) => {
         break;
     }
     return { name: name2, icon: icon2, src: src2 };
-  }, [activeWallet, para.partnerName, para.partnerLogo, para.externalWallets]);
+  }, [para.partnerName, para.partnerLogo, activeWallet]);
   return /* @__PURE__ */ jsxs(AccountContainer, { children: [
     /* @__PURE__ */ jsx(
       CpslIcon,
@@ -50,8 +44,8 @@ const AccountHeader = ({ withBalance = false } = {}) => {
         src
       }
     ),
-    connectionType === "both" ? /* @__PURE__ */ jsx(WalletSelect, {}) : /* @__PURE__ */ jsx(CpslText, { variant: "headingXS", weight: "semiBold", color: "contrast", children: name }),
-    withBalance && /* @__PURE__ */ jsx(Balance, {})
+    connectionType === "both" ? /* @__PURE__ */ jsx(AccountWalletSelect, {}) : /* @__PURE__ */ jsx(CpslText, { variant: "headingXS", weight: "semiBold", color: "contrast", children: name }),
+    withBalance && typeof totalBalance === "string" && totalBalance !== "" && /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", weight: "medium", style: { visibility: profileBalance ? "visible" : "hidden" }, children: totalBalance })
   ] });
 };
 const AccountContainer = safeStyled.div`

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

@@ -1,4 +1,4 @@
 export declare const AccountProfile: ({ isDisconnecting, onDisconnect, }: {
     isDisconnecting: boolean;
     onDisconnect: () => void;
-}) => import("react/jsx-runtime").JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,156 +3,113 @@ import {
   __spreadProps,
   __spreadValues
 } from "../../../chunk-MMUBH76A.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { AccountTypeIcon, GradientScroll, StepContainer, WalletTypeIcon } from "../common.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { GradientScroll, StepContainer } from "../common.js";
 import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
-import { useAccount, useClient } from "../../../provider/index.js";
+import { useAccount } from "../../../provider/index.js";
 import { useLinkedAccounts } from "../../../provider/hooks/index.js";
-import { getWalletDisplayName } from "../../utils/getWalletDisplayName.js";
-import { truncateAddress } from "@getpara/web-sdk";
 import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
-import { ACCOUNT_TYPES, safeStyled, useCopyToClipboard } from "@getpara/react-common";
-import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+import { useEffect, useMemo } from "react";
+import { safeStyled } from "@getpara/react-common";
 import { useStore } from "../../../provider/stores/useStore.js";
-import { AccountHeader } from "./AccountHeader.js";
-const Entry = ({
-  identifier,
-  icon,
-  name,
-  address,
-  addressShort,
-  onUnlink
-}) => {
-  const [isCopied, copy] = useCopyToClipboard();
-  return /* @__PURE__ */ jsxs(EntryContainer, { children: [
-    icon,
-    /* @__PURE__ */ jsx(EntryDisplayName, { variant: "bodyM", color: "contrast", children: name }),
-    /* @__PURE__ */ jsx(EntryFlex, { children: address ? /* @__PURE__ */ jsxs(EntryAddress, { children: [
-      /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "secondary", children: addressShort != null ? addressShort : address }),
-      /* @__PURE__ */ jsx(
-        CpslButton,
-        {
-          size: "small",
-          variant: "ghost",
-          onClick: (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            copy(address);
-          },
-          children: /* @__PURE__ */ jsx(CopyIcon, { id: "ignore-click", slot: "start", isCopied, icon: isCopied ? "check" : "copy" })
-        }
-      )
-    ] }) : null }),
-    onUnlink && /* @__PURE__ */ jsx(EntryUnlink, { href: "#", onClick: onUnlink, children: "Unlink" })
-  ] }, address != null ? address : identifier);
-};
+import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
+import { useModalStore } from "../../stores/index.js";
+import { ModalStep } from "../../utils/steps.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { Waiting } from "../Waiting/Waiting.js";
+import { AccountLinkEntry, WalletEntry } from "./AccountProfileEntry.js";
 const AccountProfile = ({
   isDisconnecting,
   onDisconnect
 }) => {
-  var _a, _b, _c, _d, _e, _f;
-  const para = useClient();
-  const { connectionType, embedded } = useAccount();
+  const para = useInternalClient();
+  const { embedded } = useAccount();
   const { data: linkedAccounts } = useLinkedAccounts();
-  const { wallets } = useExternalWallets();
-  const { isEnabled, linkAccount, unlinkAccount } = useAccountLinking();
+  const { isEnabled: isAccountLinkingEnabled, linkAccount } = useAccountLinking();
   const hideWallets = useStore((state) => {
-    var _a2;
-    return (_a2 = state.modalConfig) == null ? void 0 : _a2.hideWallets;
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
   });
-  if (!para) {
-    return null;
+  const { switchWallets, switchWalletsUrl, setSwitchWalletsUrl, isSwitchWalletsPending } = useAuthActions();
+  const setStep = useModalStore((state) => state.setStep);
+  const partnerGroups = useMemo(() => {
+    var _a;
+    return (_a = embedded == null ? void 0 : embedded.wallets) == null ? void 0 : _a.reduce((acc, wallet) => {
+      if (!wallet.partner || !wallet.partner.id || !wallet.partner.displayName) return acc;
+      const partnerGroup = acc.find((group) => {
+        var _a2;
+        return group.partner.id === ((_a2 = wallet.partner) == null ? void 0 : _a2.id);
+      });
+      return !!partnerGroup ? acc.map(
+        (group) => group.partner.id === wallet.partner.id ? __spreadProps(__spreadValues({}, group), { wallets: [...group.wallets, wallet] }) : group
+      ) : [...acc, { partner: wallet.partner, wallets: [wallet] }];
+    }, []);
+  }, [embedded == null ? void 0 : embedded.wallets]);
+  useEffect(() => {
+    if (para) {
+      para.getSwitchWalletsUrl().then((url) => {
+        setSwitchWalletsUrl(url);
+      });
+    }
+  }, []);
+  if (!para || !switchWalletsUrl) {
+    return /* @__PURE__ */ jsx(Waiting, {});
   }
-  const externalWallet = (_a = para.authInfo) == null ? void 0 : _a.externalWallet;
   return /* @__PURE__ */ jsxs(StepContainer, { children: [
-    /* @__PURE__ */ jsx(AccountHeader, {}),
-    /* @__PURE__ */ jsxs(ParaConnect, { target: "_blank", href: "https://connect.getpara.com", rel: "noreferrer noopener", children: [
-      /* @__PURE__ */ jsx(ParaIcon, { icon: "paraIconBrand", size: "40px", inset: "8px", background: "white" }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        "Do even more with your wallet",
-        /* @__PURE__ */ jsx("br", {}),
-        "at ",
-        /* @__PURE__ */ jsx("span", { style: { fontWeight: "600" }, children: "Para Connect" })
-      ] }),
-      /* @__PURE__ */ jsxs(Dots, { children: [
-        new Array(6).fill(0).map((_, index) => /* @__PURE__ */ jsx(DotsIcon, { index, icon: "dotsSquare", size: "27.5px" }, index)),
-        /* @__PURE__ */ jsx(ParaArrow, { icon: "paraArrow", size: "31px", color: "white" })
-      ] })
+    partnerGroups && partnerGroups.length > 0 && /* @__PURE__ */ jsxs(Section, { children: [
+      partnerGroups.map(({ partner, wallets }) => {
+        return /* @__PURE__ */ jsxs(Section, { children: [
+          /* @__PURE__ */ jsxs(Title, { variant: "bodyS", color: "secondary", children: [
+            partner.displayName,
+            " Wallets"
+          ] }),
+          /* @__PURE__ */ jsx(Content, { children: wallets.map((wallet) => /* @__PURE__ */ jsx(WalletEntry, { wallet, isSelectable: true }, `${wallet.address}-${wallet.type}`)) })
+        ] }, partner.id);
+      }),
+      !embedded.isGuestMode && /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, variant: "tertiary", onClick: switchWallets, disabled: isSwitchWalletsPending, children: isSwitchWalletsPending ? "Please Wait..." : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(CpslIcon, { icon: "shuffle", slot: "start", size: "16px" }),
+        para.isMultiWallet ? "Switch Wallets" : "Switch Wallet"
+      ] }) })
     ] }),
-    /* @__PURE__ */ jsxs(Section, { children: [
+    !embedded.isGuestMode && /* @__PURE__ */ jsxs(Section, { children: [
       /* @__PURE__ */ jsx(Title, { variant: "bodyS", color: "secondary", children: "Connected Wallets" }),
-      /* @__PURE__ */ jsx(Content, { children: externalWallet && connectionType === "external" ? /* @__PURE__ */ jsx(
-        Entry,
-        {
-          icon: /* @__PURE__ */ jsx(
-            WalletTypeIcon,
-            {
-              walletType: externalWallet.type,
-              externalWallet: externalWallet.providerId,
-              size: "24px",
-              inset: "0"
-            }
-          ),
-          name: (_c = (_b = externalWallet.ensName) != null ? _b : externalWallet.provider) != null ? _c : "",
-          address: (_d = externalWallet.addressBech32) != null ? _d : externalWallet.address,
-          addressShort: truncateAddress((_e = externalWallet.addressBech32) != null ? _e : externalWallet.address, externalWallet.type, {
-            prefix: para.cosmosPrefix
-          })
-        },
-        externalWallet.address
-      ) : (_f = para == null ? void 0 : para.availableWallets) == null ? void 0 : _f.map((wallet) => /* @__PURE__ */ jsx(
-        Entry,
-        {
-          icon: /* @__PURE__ */ jsx(WalletTypeIcon, { walletType: wallet.type, externalWallet: wallet.externalProviderId, size: "24px" }),
-          name: getWalletDisplayName(para, wallet),
-          address: wallet.address,
-          addressShort: truncateAddress(wallet.address, wallet.type)
-        },
-        wallet.address
-      )) })
+      /* @__PURE__ */ jsxs(Content, { children: [
+        para.availableWallets.filter(({ isExternal }) => isExternal).map((wallet) => {
+          return /* @__PURE__ */ jsx(WalletEntry, { wallet, isSelectable: true }, wallet.address);
+        }),
+        /* @__PURE__ */ jsxs(
+          CpslButton,
+          {
+            fullWidth: true,
+            variant: "tertiary",
+            onClick: () => {
+              setStep(ModalStep.ADD_EX_WALLET_MORE);
+            },
+            children: [
+              /* @__PURE__ */ jsx(CpslIcon, { icon: "plus", slot: "start" }),
+              "Add Wallet"
+            ]
+          }
+        )
+      ] })
     ] }),
-    isEnabled && /* @__PURE__ */ jsxs(Section, { children: [
+    isAccountLinkingEnabled && /* @__PURE__ */ jsxs(Section, { children: [
       /* @__PURE__ */ jsx(Title, { variant: "bodyS", color: "secondary", children: "Linked Accounts" }),
       /* @__PURE__ */ jsxs(Content, { children: [
-        /* @__PURE__ */ jsx(GradientScroll, { gap: "12px", height: "360px", children: [...((linkedAccounts == null ? void 0 : linkedAccounts.primary) || []).map((p) => __spreadProps(__spreadValues({}, p), { isPrimary: true })), ...(linkedAccounts == null ? void 0 : linkedAccounts.linked) || []].filter(({ externalWallet: externalWallet2 }) => {
-          return !externalWallet2 || externalWallet2.address !== (embedded == null ? void 0 : embedded.externalWalletAddress);
+        /* @__PURE__ */ jsx(GradientScroll, { gap: "12px", height: "360px", children: [...((linkedAccounts == null ? void 0 : linkedAccounts.primary) || []).map((p) => __spreadProps(__spreadValues({}, p), { isPrimary: true })), ...(linkedAccounts == null ? void 0 : linkedAccounts.linked) || []].filter(({ externalWallet }) => {
+          return !externalWallet || externalWallet.address !== (embedded == null ? void 0 : embedded.externalWalletAddress);
         }).map((linkedAccount) => {
-          var _a2, _b2, _c2, _d2, _e2;
-          const { identifier, displayName, type, isPrimary = false, externalWallet: externalWallet2 } = linkedAccount;
-          const externalWalletConnector = wallets.find((wallet) => wallet.id === (externalWallet2 == null ? void 0 : externalWallet2.providerId));
-          let accountType = type;
-          let src = void 0;
-          if (externalWallet2) {
-            if (externalWalletConnector) {
-              accountType = void 0;
-              src = externalWalletConnector.iconUrl;
-            } else if (externalWallet2.providerId && ACCOUNT_TYPES[externalWallet2.providerId]) {
-              accountType = externalWallet2.providerId;
-              src = void 0;
-            } else {
-              accountType = "EXTERNAL_WALLET";
-              src = void 0;
-            }
-          }
           return /* @__PURE__ */ jsx(
-            Entry,
+            AccountLinkEntry,
             {
-              icon: /* @__PURE__ */ jsx(AccountTypeIcon, { accountType, src, size: "24px" }),
-              name: externalWallet2 ? (_c2 = (_b2 = (_a2 = externalWallet2.ensName) != null ? _a2 : externalWalletConnector == null ? void 0 : externalWalletConnector.name) != null ? _b2 : externalWallet2.provider) != null ? _c2 : "" : displayName != null ? displayName : identifier,
-              address: (_d2 = externalWallet2 == null ? void 0 : externalWallet2.addressBech32) != null ? _d2 : externalWallet2 == null ? void 0 : externalWallet2.address,
-              addressShort: externalWallet2 ? truncateAddress((_e2 = externalWallet2.addressBech32) != null ? _e2 : externalWallet2.address, externalWallet2.type, {
-                prefix: para.cosmosPrefix
-              }) : void 0,
-              onUnlink: isPrimary ? void 0 : (e) => {
-                e.preventDefault();
-                unlinkAccount(linkedAccount);
-              }
+              accountLink: linkedAccount,
+              isPrimary: linkedAccount.isPrimary
             },
-            identifier
+            linkedAccount.id
           );
         }) }),
         /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, variant: "tertiary", onClick: () => linkAccount(void 0), children: [
-          /* @__PURE__ */ jsx(CpslIcon, { icon: "userPlus", slot: "start" }),
+          /* @__PURE__ */ jsx(CpslIcon, { icon: "userPlus", slot: "start", size: "16px" }),
           "Link an account"
         ] })
       ] })
@@ -177,95 +134,10 @@ const Content = safeStyled(Section)`
 const Title = safeStyled(CpslText)`
   font-weight: 600;
 `;
-const EntryContainer = safeStyled.div`
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-  display: flex;
-  gap: 8px;
-  align-items: center;
-`;
-const EntryDisplayName = safeStyled(CpslText)``;
-const EntryFlex = safeStyled.div`
-  flex: 1;
-`;
-const EntryAddress = safeStyled.div`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-`;
-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;
-  }
-`;
 const DisconnectButton = safeStyled(CpslButton)`
   --button-border-width: 0px;
   --button-destructive-hover-background-color: rgba(255, 0, 0, 0.2);
   --button-destructive-active-background-color: rgba(255, 0, 0, 0.1);
-
-`;
-const ParaConnect = safeStyled.a`
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  text-decoration: none;
-  color: white !important;
-  font-family: 'PP Mori', sans-serif;
-  font-weight: 500;
-  font-size: 15px;
-  padding: 16px;
-  height: 69px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-  border-radius: 8px;
-  border: 1px solid #FF4E00;
-  background: #FF4E00;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05), 0 0 20px 8px rgba(251, 188, 4, 0.20) inset;
-
-  &:hover, &:active {
-    background: #FF6A2B;
-    border: 1px solid #FF6A2B;
-  }
-
-`;
-const ParaIcon = safeStyled(CpslIcon)`
-  --icon-border-radius: 4px;
-`;
-const Dots = safeStyled.div`
-  width: 75px;
-  position: absolute;
-  right: 14px;
-  top: 7px;
-`;
-const DotsIcon = safeStyled(CpslIcon)`
-  position: absolute;
-  left: ${({ index }) => `${index % 3 * 27.5}px`};
-  top: ${({ index }) => `${Math.floor(index / 3) * 27.5}px`};
-`;
-const ParaArrow = safeStyled(CpslIcon)`
-  position: absolute;
-  top: 12px;
-  right: 4px;
 `;
 export {
   AccountProfile

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

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+import { AvailableWallet, LinkedAccount } from '@getpara/web-sdk';
+export declare const WalletEntry: ({ wallet, isSelectable, style, className, }: {
+    wallet: AvailableWallet;
+    isSelectable?: boolean;
+    style?: CSSProperties;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const AccountLinkEntry: ({ accountLink, isPrimary, }: {
+    accountLink: LinkedAccount;
+    isPrimary?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;