@getpara/react-sdk-lite 2.0.0-alpha.63 → 2.0.0-alpha.65

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,7 +23,6 @@ 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);
@@ -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;

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

@@ -8,7 +8,7 @@ import { truncateAddress } from "@getpara/web-sdk";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { useAssets } from "../../../provider/providers/AssetsProvider.js";
 import { useAccount, useWallet } from "../../../provider/index.js";
-import { WalletSelect } from "../WalletSelect/WalletSelect.js";
+import { AccountWalletSelect } from "./AccountWalletSelect.js";
 const AccountHeader = ({ withBalance = false } = {}) => {
   const para = useInternalClient();
   const { connectionType } = useAccount();
@@ -44,7 +44,7 @@ const AccountHeader = ({ withBalance = false } = {}) => {
         src
       }
     ),
-    connectionType === "both" ? /* @__PURE__ */ jsx(WalletSelect, {}) : /* @__PURE__ */ jsx(CpslText, { variant: "headingXS", weight: "semiBold", color: "contrast", children: name }),
+    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 })
   ] });
 };

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,26 +3,27 @@ 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 { AccountTypeIcon, GradientScroll, StepContainer } from "../common.js";
 import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
 import { useAccount } from "../../../provider/index.js";
 import { useLinkedAccounts } from "../../../provider/hooks/index.js";
-import { getWalletDisplayName } from "../../utils/getWalletDisplayName.js";
 import {
   formatAssetQuantity,
   formatCurrency,
   truncateAddress
 } from "@getpara/web-sdk";
 import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
-import { useMemo } from "react";
-import { ACCOUNT_TYPES, safeStyled, useCopyToClipboard } from "@getpara/react-common";
+import { useEffect, useMemo } from "react";
+import { ACCOUNT_TYPES, safeStyled, useCopyToClipboard, WalletTypeIcon } from "@getpara/react-common";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 import { useStore } from "../../../provider/stores/useStore.js";
 import { useAssets } from "../../../provider/providers/AssetsProvider.js";
+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";
 const Entry = ({
   identifier,
   icon,
@@ -79,45 +80,70 @@ const AccountProfile = ({
   isDisconnecting,
   onDisconnect
 }) => {
-  var _a;
   const para = useInternalClient();
   const { embedded } = useAccount();
   const { data: linkedAccounts } = useLinkedAccounts();
   const { wallets } = useExternalWallets();
-  const { isEnabled, linkAccount, unlinkAccount } = useAccountLinking();
+  const { isEnabled: isAccountLinkingEnabled, linkAccount, unlinkAccount } = 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;
   });
   const { profileBalance } = useAssets();
+  const { switchWallets, switchWalletsUrl, setSwitchWalletsUrl, isSwitchWalletsPending } = useAuthActions();
   const setStep = useModalStore((state) => state.setStep);
-  if (!para) {
-    return null;
+  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 embeddedWallets = (_a = para == null ? void 0 : para.availableWallets) == null ? void 0 : _a.filter((wallet) => !wallet.isExternal);
   return /* @__PURE__ */ jsxs(StepContainer, { children: [
-    embeddedWallets.length > 0 && /* @__PURE__ */ jsxs(Section, { children: [
-      /* @__PURE__ */ jsxs(Title, { variant: "bodyS", color: "secondary", children: [
-        para.partnerName,
-        " Wallets"
-      ] }),
-      /* @__PURE__ */ jsx(Content, { children: embeddedWallets.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),
-          balance: profileBalance == null ? void 0 : profileBalance.wallets.find((w) => w.address === wallet.address)
-        },
-        wallet.address
-      )) })
+    partnerGroups && partnerGroups.length > 0 && /* @__PURE__ */ jsxs(Section, { children: [
+      partnerGroups.map(({ partner, wallets: wallets2 }) => {
+        return /* @__PURE__ */ jsxs(Section, { children: [
+          /* @__PURE__ */ jsxs(Title, { variant: "bodyS", color: "secondary", children: [
+            partner.displayName,
+            " Wallets"
+          ] }),
+          /* @__PURE__ */ jsx(Content, { children: wallets2.map((wallet) => /* @__PURE__ */ jsx(
+            Entry,
+            {
+              icon: /* @__PURE__ */ jsx(WalletTypeIcon, { walletType: wallet.type, externalWallet: wallet.externalProviderId, size: "24px" }),
+              name: truncateAddress(wallet.address, wallet.type),
+              balance: profileBalance == null ? void 0 : profileBalance.wallets.find((w) => w.address === wallet.address)
+            },
+            `${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: [
-      /* @__PURE__ */ jsx(Title, { variant: "bodyS", color: "secondary", children: "External Wallets" }),
+    !embedded.isGuestMode && /* @__PURE__ */ jsxs(Section, { children: [
+      /* @__PURE__ */ jsx(Title, { variant: "bodyS", color: "secondary", children: "Connected Wallets" }),
       /* @__PURE__ */ jsxs(Content, { children: [
         Object.values((para == null ? void 0 : para.externalWallets) || {}).map((wallet) => {
-          var _a2, _b;
+          var _a, _b;
           const externalWallet = wallets.find((w) => w.name === wallet.name);
           return /* @__PURE__ */ jsx(
             Entry,
@@ -131,7 +157,7 @@ const AccountProfile = ({
                   inset: "0"
                 }
               ),
-              name: (_b = (_a2 = wallet.ensName) != null ? _a2 : wallet.name) != null ? _b : "",
+              name: (_b = (_a = wallet.ensName) != null ? _a : wallet.name) != null ? _b : "",
               address: wallet.address,
               addressShort: wallet.address ? truncateAddress(wallet.address, wallet.type, {
                 prefix: para.cosmosPrefix
@@ -157,18 +183,18 @@ const AccountProfile = ({
         )
       ] })
     ] }),
-    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 }) => {
           return !externalWallet || externalWallet.address !== (embedded == null ? void 0 : embedded.externalWalletAddress);
         }).map((linkedAccount) => {
-          var _a2, _b, _c, _d, _e;
+          var _a, _b, _c, _d, _e;
           const { identifier, displayName, type, isPrimary = false, externalWallet } = linkedAccount;
           const externalWalletConnector = wallets.find(
             (wallet) => {
-              var _a3, _b2;
-              return wallet.id === (externalWallet == null ? void 0 : externalWallet.providerId) || wallet.id.toLowerCase() === ((_a3 = externalWallet == null ? void 0 : externalWallet.providerId) == null ? void 0 : _a3.toLowerCase()) || wallet.name.toLowerCase() === ((_b2 = externalWallet == null ? void 0 : externalWallet.providerId) == null ? void 0 : _b2.toLowerCase());
+              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;
@@ -189,7 +215,7 @@ const AccountProfile = ({
             Entry,
             {
               icon: /* @__PURE__ */ jsx(AccountTypeIcon, { accountType, src, size: "24px" }),
-              name: externalWallet ? (_c = (_b = (_a2 = externalWallet.ensName) != null ? _a2 : externalWalletConnector == null ? void 0 : externalWalletConnector.name) != null ? _b : externalWallet.provider) != null ? _c : "" : displayName != null ? displayName : identifier,
+              name: externalWallet ? (_c = (_b = (_a = externalWallet.ensName) != null ? _a : externalWalletConnector == null ? void 0 : externalWalletConnector.name) != null ? _b : externalWallet.provider) != null ? _c : "" : displayName != null ? displayName : identifier,
               address: (_d = externalWallet == null ? void 0 : externalWallet.addressBech32) != null ? _d : externalWallet == null ? void 0 : externalWallet.address,
               addressShort: externalWallet ? truncateAddress((_e = externalWallet.addressBech32) != null ? _e : externalWallet.address, externalWallet.type, {
                 prefix: para.cosmosPrefix
@@ -203,7 +229,7 @@ const AccountProfile = ({
           );
         }) }),
         /* @__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"
         ] })
       ] })

package/dist/modal/components/{WalletSelect/WalletSelect.d.ts → Account/AccountWalletSelect.d.ts}

@@ -1,4 +1,4 @@
-export declare const WalletSelect: () => import("react/jsx-runtime").JSX.Element;
+export declare const AccountWalletSelect: () => import("react/jsx-runtime").JSX.Element;
 export declare const Select: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
     ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
 }, {

package/dist/modal/components/{WalletSelect/WalletSelect.js → Account/AccountWalletSelect.js}

@@ -62,7 +62,7 @@ const Wallet = ({
     )
   ] });
 };
-const WalletSelect = () => {
+const AccountWalletSelect = () => {
   var _a, _b, _c;
   const containerRef = useRef(null);
   const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
@@ -170,7 +170,8 @@ const SelectContainer = safeStyled.div`
   border-radius: var(--cpsl-border-radius-tile-button);
   background-color: transparent;
 `;
-const WalletIcon = safeStyled(CpslIcon)`  --icon-border: 1px solid var(--cpsl-color-background-8);
+const WalletIcon = safeStyled(CpslIcon)`
+  --icon-border: 1px solid var(--cpsl-color-background-8);
   --icon-background: var(--cpsl-color-background-0);
   --icon-border-radius: 4px;
 `;
@@ -181,8 +182,8 @@ const CopyButton = safeStyled(CpslButton)`
   }
 `;
 export {
+  AccountWalletSelect,
   Select,
   SelectContainer,
-  SelectItem,
-  WalletSelect
+  SelectItem
 };

package/dist/modal/components/AddFunds/AddFundsAsset.js

@@ -7,8 +7,7 @@ import {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as comp from "@getpara/react-components";
 import { formatCurrency, getOnRampNetworks } from "@getpara/web-sdk";
-import { safeStyled } from "@getpara/react-common";
-import { getAssetCode, getAssetName, ON_RAMP_ASSETS } from "../../constants/constants.js";
+import { safeStyled, getAssetCode, getAssetName, ON_RAMP_ASSETS } from "@getpara/react-common";
 import { useModalStore } from "../../stores/index.js";
 import { useState } from "react";
 import { useAddFunds } from "./AddFundsContext.js";

package/dist/modal/components/AddFunds/AddFundsSettings.js

@@ -8,11 +8,10 @@ import { useEffect, useMemo, useState } from "react";
 import { useAddFunds } from "./AddFundsContext.js";
 import { CpslButton, CpslIcon, CpslInput, CpslRow, CpslText } from "@getpara/react-components";
 import { AssetIcon, HeaderSelect, HeaderSelectContainer, HeaderSelectItem, NetworkIcon } from "../common.js";
-import { getAssetCode, getNetworkName } from "../../constants/constants.js";
 import { EnabledFlow, getOnRampNetworks, OnRampPurchaseType } from "@getpara/web-sdk";
 import { OnRampStep, useModalStore } from "../../stores/index.js";
 import { useStore } from "../../../provider/stores/useStore.js";
-import { safeStyled } from "@getpara/react-common";
+import { safeStyled, getAssetCode, getNetworkName } from "@getpara/react-common";
 import { contentMotionProps, NoProviders } from "./common.js";
 import { AnimatePresence, motion, useIsPresent } from "framer-motion";
 import { AddFundsAsset } from "./AddFundsAsset.js";

package/dist/modal/components/AuthInput/AuthInput.js

@@ -13,9 +13,8 @@ import {
   CpslText
 } from "@getpara/react-components";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { safeStyled } from "@getpara/react-common";
+import { safeStyled, MOBILE_SIZE } from "@getpara/react-common";
 import countryCodes from "../../utils/countryCodes.js";
-import { MOBILE_SIZE } from "../../constants/constants.js";
 import { useDropdownPosition } from "./hooks/useDropdownPosition.js";
 import { defaultPhoneMask, phoneMasks } from "./phoneMasks.js";
 import { extractAuthInfo } from "@getpara/user-management-client";

package/dist/modal/components/BiometricLoginStep/BiometricLoginStep.js

@@ -26,7 +26,10 @@ const BiometricLoginStep = () => {
       /* @__PURE__ */ jsx(UserIdentifier, { authInfo: para.authInfo })
     ] }),
     /* @__PURE__ */ jsxs(MainContainer, { children: [
-      (isPassword || isPIN) && /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: () => presentLoginUi(isPIN ? AuthMethod.PIN : AuthMethod.PASSWORD, loginState), children: "Login" }),
+      (isPassword || isPIN) && /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, onClick: () => presentLoginUi(isPIN ? AuthMethod.PIN : AuthMethod.PASSWORD, loginState), children: [
+        /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "passcode" }),
+        isPIN && isPassword ? "Login" : isPIN ? "Login with PIN" : "Login with Password"
+      ] }),
       isPasskey && /* @__PURE__ */ jsxs(Fragment, { children: [
         displayKnownDevices && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(KnownDevices, { hints: biometricHints, link: passkeyKnownDeviceUrl }),
@@ -34,7 +37,7 @@ const BiometricLoginStep = () => {
         ] }),
         /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: () => presentLoginUi(AuthMethod.PASSKEY, loginState), children: isPasskeyUnavailable ? "Continue anyway" : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "key" }),
-          "Login with passkey"
+          "Login with Passkey"
         ] }) })
       ] })
     ] })

package/dist/modal/components/Body/Body.js

@@ -1,7 +1,7 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { safeStyled, WarningBanner } from "@getpara/react-common";
+import { safeStyled, WarningBanner, BODY_MOTION_VARIANTS, BODY_TRANSITION, MOBILE_SIZE } from "@getpara/react-common";
 import { IFrameSteps, ModalStep } from "../../utils/steps.js";
 import { CpslAlert, CpslIcon } from "@getpara/react-components";
 import { VerificationCodeStep } from "../VerificationCodeStep/VerificationCodeStep.js";
@@ -21,7 +21,6 @@ import { AddFundsAwaiting, AddFundsDone, AddFunds } from "../AddFunds/index.js";
 import { FarcasterOAuthStep } from "../OAuth/FarcasterOAuthStep.js";
 import { Header } from "../Header/Header.js";
 import { AuthMainStep } from "../AuthMainStep/AuthMainStep.js";
-import { BODY_MOTION_VARIANTS, BODY_TRANSITION, MOBILE_SIZE } from "../../constants/constants.js";
 import { Account } from "../Account/Account.js";
 import { AuthOptions } from "../AuthOptions/AuthOptions.js";
 import { ExternalWallets } from "../ExternalWallets/ExternalWallets.js";
@@ -43,6 +42,7 @@ import { AccountProfileLink } from "../Account/AccountProfileLink.js";
 import { AccountProfileUnlink } from "../Account/AccountProfileUnlink.js";
 import { ExternalWalletNetworkSelectStep } from "../ExternalWalletNetworkSelectStep/ExternalWalletNetworkSelectStep.js";
 import { AwaitingAccountStep } from "../AwaitingAccountStep/AwaitingAccountStep.js";
+import { SwitchWalletsStep } from "../SwitchWalletsStep/SwitchWalletsStep.js";
 import { Footer } from "../Footer/Footer.js";
 import { renderTextWithLinks } from "../../utils/renderTextWithLinks.js";
 const MIN_HEIGHT = {
@@ -210,6 +210,9 @@ const Body = ({
       case ModalStep.AWAITING_ACCOUNT: {
         return /* @__PURE__ */ jsx(AwaitingAccountStep, {});
       }
+      case ModalStep.SWITCH_WALLETS: {
+        return /* @__PURE__ */ jsx(SwitchWalletsStep, {});
+      }
       default: {
         if (IFrameSteps.includes(currentStep)) {
           return null;

package/dist/modal/components/ChainSwitch/ChainSwitch.js

@@ -7,11 +7,9 @@ import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpar
 import { HeroAccountTypeIcon, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
 import { useEffect, useMemo } from "react";
 import { useModalStore } from "../../stores/index.js";
-import { HeroSpinner, safeStyled } from "@getpara/react-common";
-import { useCopyToClipboard } from "@getpara/react-common";
+import { HeroSpinner, safeStyled, NETWORK_NOT_SUPPORTED_ERROR, useCopyToClipboard } from "@getpara/react-common";
 import { ModalStep } from "../../utils/steps.js";
 import { routeMobileExternalWallet } from "../../utils/routeMobileExternalWallet.js";
-import { NETWORK_NOT_SUPPORTED_ERROR } from "../../constants/constants.js";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 const ChainSwitch = () => {
   const [isCopied, copy] = useCopyToClipboard();

package/dist/modal/components/Controls/ChainSelect.js

@@ -4,13 +4,12 @@ import {
 } from "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CpslText } from "@getpara/react-components";
-import { getNetworkFromChainId, safeStyled } from "@getpara/react-common";
+import { getNetworkFromChainId, getNetworkName, safeStyled } from "@getpara/react-common";
 import { useEffect, useRef } from "react";
 import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
 import { useWallet } from "../../../provider/index.js";
 import { HeaderSelect, HeaderSelectContainer, HeaderSelectItem, NetworkIcon } from "../common.js";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
-import { getNetworkName } from "../../constants/constants.js";
 const Chain = ({
   chain: { id, name },
   slot,

package/dist/modal/components/Footer/Footer.js

@@ -1,9 +1,8 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { safeStyled } from "@getpara/react-common";
+import { safeStyled, PARA_TERMS_AND_CONDITIONS } from "@getpara/react-common";
 import { CpslIcon, CpslText } from "@getpara/react-components";
-import { PARA_TERMS_AND_CONDITIONS } from "../../constants/constants.js";
 import { useModalStore } from "../../stores/index.js";
 import { ModalStep } from "../../utils/steps.js";
 import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";

package/dist/modal/components/Header/Header.js

@@ -1,12 +1,11 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { getAuthDisplay, safeStyled } from "@getpara/react-common";
+import { getAuthDisplay, safeStyled, BODY_MOTION_VARIANTS, BODY_TRANSITION } from "@getpara/react-common";
 import { useStepTitle } from "./hooks/useStepTitle.js";
 import { CenteredText } from "../common.js";
 import { AnimatePresence, motion } from "framer-motion";
 import { useModalStore } from "../../stores/index.js";
-import { BODY_MOTION_VARIANTS, BODY_TRANSITION } from "../../constants/constants.js";
 import { useAccount } from "../../../provider/index.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { CpslIcon, CpslText } from "@getpara/react-components";

package/dist/modal/components/Hero/Hero.js

@@ -2,10 +2,9 @@
 import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslHero, CpslIcon, CpslIdenticon } from "@getpara/react-components";
-import { safeStyled } from "@getpara/react-common";
+import { safeStyled, NETWORK_NOT_SUPPORTED_ERROR } from "@getpara/react-common";
 import { ModalStep } from "../../utils/steps.js";
 import { useModalStore } from "../../stores/index.js";
-import { NETWORK_NOT_SUPPORTED_ERROR } from "../../constants/constants.js";
 import { useEffect, useState } from "react";
 import { isMobile } from "@getpara/web-sdk";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
@@ -54,9 +53,12 @@ const Hero = () => {
       externalWalletError
     })[step];
     const delay = newStepConfig && prevStepConfig ? 0 : newStepConfig && !prevStepConfig ? 0 : 200;
-    setTimeout(() => {
+    const timerId = setTimeout(() => {
       setCurrentStep(step);
     }, delay);
+    return () => {
+      clearTimeout(timerId);
+    };
   }, [step]);
   const isExternalStep = currentStep === ModalStep.EX_WALLET_SELECTED;
   const isChainSwitchStep = currentStep === ModalStep.CHAIN_SWITCH;

package/dist/modal/components/IFrameStep/IFrameStep.js

@@ -5,10 +5,9 @@ import { useEffect, useState } from "react";
 import { useModalStore } from "../../stores/index.js";
 import { IFrameSteps } from "../../utils/steps.js";
 import { safeStyled } from "@getpara/react-common";
-import { SpinnerContainer } from "@getpara/react-common";
+import { SpinnerContainer, MOBILE_SIZE } from "@getpara/react-common";
 import { CpslSpinner } from "@getpara/react-components";
 import { getPortalBaseURL } from "@getpara/web-sdk";
-import { MOBILE_SIZE } from "../../constants/constants.js";
 import { useStore } from "../../../provider/stores/useStore.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 const IFrameStep = () => {
@@ -37,9 +36,9 @@ const IFrameStep = () => {
         return;
       }
       if (event.data) {
-        if (event.data.type === "HEIGHT") {
-          setHeight(event.data.height);
-          setIsReady(true);
+        if (event.data.type === "HEIGHT" && typeof event.data.height === "number") {
+          setHeight(Math.max(event.data.height, 200));
+          setIsReady(event.data.height > 0 ? true : false);
         }
       }
     };

package/dist/modal/components/LoginDoneStep/LoginDoneStep.js

@@ -30,7 +30,7 @@ const LoginDoneStep = ({ onClose }) => {
     return /* @__PURE__ */ jsx(WalletCard, { id, type, showAddFunds: false }, `${id}-${type}`);
   }, [para.externalWalletConnectionType, para.externalWallets, para.wallets]);
   useEffect(() => {
-    setTimeout(() => {
+    const timerId = setTimeout(() => {
       if (bareModal) {
         setFlow("account");
         setStep(ModalStep.ACCOUNT_MAIN);
@@ -38,6 +38,9 @@ const LoginDoneStep = ({ onClose }) => {
         onClose();
       }
     }, 1600);
+    return () => {
+      clearTimeout(timerId);
+    };
   }, []);
   return /* @__PURE__ */ jsxs(StepContainer, { children: [
     /* @__PURE__ */ jsx(HeroIcon, { icon: "checkCircleFilled" }),

package/dist/modal/components/OnRampComponents/AddingFunds.js

@@ -3,7 +3,7 @@ import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { OnRampPurchaseStatus } from "@getpara/web-sdk";
 import { SpinnerContainer } from "../common.js";
-import { ON_RAMP_PROVIDERS } from "../../constants/constants.js";
+import { ON_RAMP_PROVIDERS } from "@getpara/react-common";
 import { useModalStore } from "../../stores/index.js";
 import { CpslSpinner, CpslText } from "@getpara/react-components";
 const AddingFunds = () => {

package/dist/modal/components/OnRampComponents/OnRampProviderButton.js

@@ -4,8 +4,7 @@ import {
 } from "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { ON_RAMP_PROVIDERS } from "../../constants/constants.js";
-import { safeStyled } from "@getpara/react-common";
+import { safeStyled, ON_RAMP_PROVIDERS } from "@getpara/react-common";
 import { CpslButton, CpslIcon, CpslSpinner, CpslText } from "@getpara/react-components";
 import { motion } from "framer-motion";
 const OnRampProviderButton = ({ config, index, onClick: _onClick }) => {

package/dist/modal/components/Setup2FAStep/Setup2FAStep.js

@@ -32,10 +32,13 @@ const Setup2FAStep = ({ onClose }) => {
   const params = (twoFactorStatus == null ? void 0 : twoFactorStatus.uri) ? new URL(twoFactorStatus.uri).searchParams : void 0;
   const secret = params == null ? void 0 : params.get("secret");
   useEffect(() => {
-    setTimeout(() => {
+    const timerId = setTimeout(() => {
       var _a, _b, _c, _d;
       (_d = (_c = (_b = (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelectorAll("input")) == null ? void 0 : _c[0]) == null ? void 0 : _d.focus();
     }, 10);
+    return () => {
+      clearTimeout(timerId);
+    };
   }, [isVerifying]);
   useEffect(() => {
     if (code.length === 6) {

package/dist/modal/components/SwitchWalletsStep/SwitchWalletsStep.d.ts

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

package/dist/modal/components/SwitchWalletsStep/SwitchWalletsStep.js

@@ -0,0 +1,10 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { Waiting } from "../Waiting/Waiting.js";
+const SwitchWalletsStep = () => {
+  return /* @__PURE__ */ jsx(Waiting, { heading: "Switching Wallets", subheading: "Please complete the wallet selection in the popup window." });
+};
+export {
+  SwitchWalletsStep
+};

package/dist/modal/components/VerificationCodeStep/VerificationCodeStep.js

@@ -13,16 +13,20 @@ import { useResendVerificationCode } from "../../../provider/index.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 const VerificationCode = ({ authInfo, onResend, onSubmit, status, error }) => {
   const inputRef = useRef(null);
+  const resendTimerRef = useRef();
   const [code, setCode] = useState("");
   const [isPending, setIsPending] = useState(status === "pending");
   const [codeError, setCodeError] = useState(null);
   const [resendDisabled, setResendDisabled] = useState(false);
   const isEmail = (authInfo == null ? void 0 : authInfo.authType) === "email";
   useEffect(() => {
-    setTimeout(() => {
+    const timerId = setTimeout(() => {
       var _a, _b, _c, _d;
       (_d = (_c = (_b = (_a = inputRef.current) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelectorAll("input")) == null ? void 0 : _c[0]) == null ? void 0 : _d.focus();
     }, 10);
+    return () => {
+      clearTimeout(timerId);
+    };
   }, []);
   useEffect(() => {
     setCodeError(null);
@@ -41,12 +45,19 @@ const VerificationCode = ({ authInfo, onResend, onSubmit, status, error }) => {
       try {
         onResend();
       } finally {
-        setTimeout(() => {
+        resendTimerRef.current = setTimeout(() => {
           setResendDisabled(false);
         }, 3e3);
       }
     }
   });
+  useEffect(() => {
+    return () => {
+      if (resendTimerRef.current) {
+        clearTimeout(resendTimerRef.current);
+      }
+    };
+  }, []);
   const handleCodeInput = (e) => {
     setCode(e.detail.value.trim());
   };

package/dist/modal/components/Waiting/Waiting.d.ts

@@ -1,5 +1,5 @@
 interface WaitingProps {
-    heading: string;
+    heading?: string;
     subheading?: string;
 }
 export declare const Waiting: ({ heading, subheading }: WaitingProps) => import("react/jsx-runtime").JSX.Element;