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

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

@@ -7,11 +7,14 @@ 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,
+  openMobileUrl
+} 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();
@@ -21,7 +24,7 @@ const ChainSwitch = () => {
   const { switchChain, wallet, qrUri, chainIdSwitchingTo, walletDisplayHelpers } = useExternalWallets();
   useEffect(() => {
     if ((wallet == null ? void 0 : wallet.type) === "COSMOS") {
-      routeMobileExternalWallet(qrUri);
+      openMobileUrl(qrUri);
     }
   }, [qrUri, wallet]);
   useEffect(() => {

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

@@ -62,6 +62,7 @@ const CloseButton = safeStyled(HeaderButton)`
 `;
 const BackButton = safeStyled(HeaderButton)`
   transform: rotate(180deg);
+  flex-basis: auto;
 `;
 export {
   Controls

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

@@ -1 +1,5 @@
-export declare const ExternalWalletNetworkSelectStep: () => import("react/jsx-runtime").JSX.Element | null;
+type ExternalWalletNetworkSelectStepType = 'CONNECT' | 'ADD_EXTERNAL' | 'ACCOUNT_LINKING';
+export declare const ExternalWalletNetworkSelectStep: ({ type }: {
+    type?: ExternalWalletNetworkSelectStepType;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/modal/components/ExternalWalletNetworkSelectStep/ExternalWalletNetworkSelectStep.js

@@ -1,5 +1,7 @@
 "use client";
-import "../../../chunk-MMUBH76A.js";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { safeStyled } from "@getpara/react-common";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
@@ -8,35 +10,62 @@ import { ModalStep } from "../../utils/steps.js";
 import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
 import { WALLET_TYPE_CONFIG } from "../../constants/walletTypeConfig.js";
 import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
-const ExternalWalletNetworkSelectStep = () => {
-  var _a, _b;
+const ExternalWalletNetworkSelectStep = ({ type = "CONNECT" }) => {
+  var _a, _b, _c;
   const setStep = useModalStore((state) => state.setStep);
   const selectedExternalWallet = useModalStore((state) => state.selectedExternalWallet);
   const setSelectedExternalWallet = useModalStore((state) => state.setSelectedExternalWallet);
-  const { wallets, connectExternalWallet } = useExternalWallets();
+  const { wallets, connectExternalWallet, addAdditionalExternalWallet } = useExternalWallets();
   const { accountLinkInProgress, linkAccount } = useAccountLinking();
-  const externalWalletProvider = (_b = accountLinkInProgress == null ? void 0 : accountLinkInProgress.pendingWalletProvider) != null ? _b : (_a = accountLinkInProgress == null ? void 0 : accountLinkInProgress.externalWallet) == null ? void 0 : _a.providerId;
-  if (!accountLinkInProgress && !selectedExternalWallet) {
-    setStep(ModalStep.ACCOUNT_MAIN);
+  const externalWalletProvider = (_c = (_b = accountLinkInProgress == null ? void 0 : accountLinkInProgress.pendingWalletProvider) != null ? _b : (_a = accountLinkInProgress == null ? void 0 : accountLinkInProgress.externalWallet) == null ? void 0 : _a.providerId) != null ? _c : selectedExternalWallet == null ? void 0 : selectedExternalWallet.id;
+  if (!externalWalletProvider) {
     return null;
   }
-  const availableWallets = wallets.filter((w) => w.id === (externalWalletProvider != null ? externalWalletProvider : selectedExternalWallet == null ? void 0 : selectedExternalWallet.id));
+  const availableWallets = wallets.filter((w) => w.id === externalWalletProvider);
   const firstWallet = availableWallets[0];
-  const handleWalletClick = (wallet) => () => {
-    if (accountLinkInProgress) {
-      linkAccount({ externalWallet: { provider: wallet.id, type: wallet.type } });
-      return;
+  const handleWalletClick = (wallet) => () => __async(void 0, null, function* () {
+    switch (type) {
+      case "ACCOUNT_LINKING":
+        linkAccount({ externalWallet: { provider: wallet.id, type: wallet.type } });
+        break;
+      case "ADD_EXTERNAL":
+        setSelectedExternalWallet({ id: wallet.id, type: wallet.type });
+        setStep(ModalStep.ADD_EX_WALLET_SELECTED);
+        try {
+          yield addAdditionalExternalWallet(wallet);
+        } catch (error) {
+          console.error("Failed to add additional wallet:", error);
+        }
+        break;
+      case "CONNECT":
+      default:
+        setSelectedExternalWallet({ id: wallet.id, type: wallet.type });
+        setStep(ModalStep.EX_WALLET_SELECTED);
+        if (wallet.installed || wallet.internalId === "FARCASTER") {
+          connectExternalWallet({ wallet });
+        } else if (wallet.isMobile) {
+          connectExternalWallet({ wallet, isMobile: true });
+        }
+        break;
     }
-    setSelectedExternalWallet({ id: wallet.id, type: wallet.type });
-    setStep(ModalStep.EX_WALLET_SELECTED);
-    if (wallet.installed || wallet.internalId === "FARCASTER") {
-      connectExternalWallet(wallet);
-    } else if (wallet.isMobile) {
-      connectExternalWallet(wallet, true);
+  });
+  const getIconSource = () => {
+    var _a2, _b2, _c2;
+    switch (type) {
+      case "ACCOUNT_LINKING":
+        return ((_a2 = accountLinkInProgress == null ? void 0 : accountLinkInProgress.externalWallet) == null ? void 0 : _a2.providerId) ? (_b2 = wallets.find((w) => {
+          var _a3;
+          return w.id === ((_a3 = accountLinkInProgress.externalWallet) == null ? void 0 : _a3.providerId);
+        })) == null ? void 0 : _b2.iconUrl : firstWallet == null ? void 0 : firstWallet.iconUrl;
+      case "ADD_EXTERNAL":
+        return (selectedExternalWallet == null ? void 0 : selectedExternalWallet.id) ? (_c2 = wallets.find((w) => w.id === selectedExternalWallet.id)) == null ? void 0 : _c2.iconUrl : firstWallet == null ? void 0 : firstWallet.iconUrl;
+      case "CONNECT":
+      default:
+        return firstWallet == null ? void 0 : firstWallet.iconUrl;
     }
   };
   return /* @__PURE__ */ jsxs(Container, { children: [
-    /* @__PURE__ */ jsx(Avatar, { slot: "image", src: firstWallet == null ? void 0 : firstWallet.iconUrl }),
+    /* @__PURE__ */ jsx(Avatar, { slot: "image", src: getIconSource() }),
     /* @__PURE__ */ jsx(ButtonContainer, { children: availableWallets.map((wallet) => {
       const config = WALLET_TYPE_CONFIG[wallet.type];
       return /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, variant: "tertiary", onClick: handleWalletClick(wallet), children: /* @__PURE__ */ jsxs(ButtonInnerContainer, { children: [

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

@@ -1,8 +1,11 @@
 import { CommonWallet } from '@getpara/react-common';
-export declare const ExternalWalletMobileConnect: ({ wallet, qrUri: propsQrUri, onConnectWc, isSelfFetching, }: {
+export declare const ExternalWalletMobileConnect: ({ wallet, onConnectWc, onRetryClick, }: {
     wallet: CommonWallet;
     qrUri?: string;
     onConnectWc: (_: CommonWallet) => Promise<void>;
+    onRetryClick?: () => Promise<void>;
     isSelfFetching?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const ExternalWalletStep: () => import("react/jsx-runtime").JSX.Element | null;
+export declare const ExternalWalletStep: ({ isAddingWallets }: {
+    isAddingWallets?: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/modal/components/ExternalWalletStep/ExternalWalletStep.js

@@ -5,49 +5,56 @@ import {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
 import { CenteredText, HeroAccountTypeIcon, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { useModalStore } from "../../stores/index.js";
-import { HeroSpinner, safeStyled } from "@getpara/react-common";
+import { HeroSpinner, openMobileUrl, safeStyled } from "@getpara/react-common";
 import { useCopyToClipboard } from "@getpara/react-common";
 import { ModalStep } from "../../utils/steps.js";
 import { isMobile, isTablet } from "@getpara/web-sdk";
-import { routeMobileExternalWallet } from "../../utils/routeMobileExternalWallet.js";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 import { useStore } from "../../../provider/stores/useStore.js";
+const isSolanaWalletInAppBrowser = (wallet) => {
+  var _a;
+  switch (wallet) {
+    case "PHANTOM":
+      return !!((_a = window == null ? void 0 : window.phantom) == null ? void 0 : _a.solana);
+    case "SOLFLARE":
+      return !!(window == null ? void 0 : window.solflare);
+    case "BACKPACK":
+      return !!(window == null ? void 0 : window.backpack);
+    case "GLOW":
+      return !!(window == null ? void 0 : window.glowSolana);
+    default:
+      break;
+  }
+};
 const ExternalWalletMobileConnect = ({
   wallet,
-  qrUri: propsQrUri,
   onConnectWc,
-  isSelfFetching = false
+  onRetryClick
 }) => {
   var _a, _b;
   const externalWalletError = useModalStore((state) => state.externalWalletError);
   const [isCopied, copy] = useCopyToClipboard();
   const appName = useStore((state) => state.appName);
-  const [qrUri, setQrUri] = useState(isSelfFetching ? void 0 : propsQrUri);
   const isWalletConnect = wallet.id === "WalletConnect";
+  const { qrUri } = useExternalWallets();
   const handleCopy = () => {
     if (qrUri) {
       copy(qrUri);
     }
   };
-  useEffect(() => {
-    const fetchQrUri = () => {
-      var _a2;
-      if (!isSelfFetching) {
-        return;
-      }
-      (_a2 = wallet.getQrUri) == null ? void 0 : _a2.call(wallet).then(setQrUri).catch();
-    };
-    fetchQrUri();
-  }, [wallet, isSelfFetching]);
-  useEffect(() => {
-    setQrUri(propsQrUri);
-  }, [propsQrUri]);
   const isError = !!(externalWalletError == null ? void 0 : externalWalletError[0]);
+  const handleRetryClick = () => __async(void 0, null, function* () {
+    if (isError && onRetryClick) {
+      yield onRetryClick();
+    } else {
+      yield openMobileUrl(qrUri);
+    }
+  });
   if (wallet.type === "SOLANA" || isMobile() && !isTablet()) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      wallet.type === "SOLANA" && qrUri && /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(
+      wallet.type === "SOLANA" && !!qrUri && !isSolanaWalletInAppBrowser(wallet.internalId) && /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(
         HeroSpinner,
         {
           icon: /* @__PURE__ */ jsx(HeroAccountTypeIcon, { accountType: wallet.internalId, src: wallet ? wallet.iconUrl : void 0 }),
@@ -61,12 +68,12 @@ const ExternalWalletMobileConnect = ({
           HeroSpinner,
           {
             icon: /* @__PURE__ */ jsx(HeroAccountTypeIcon, { accountType: wallet.internalId, src: wallet ? wallet.iconUrl : void 0 }),
-            status: isError ? "error" : "pending",
-            text: isError ? externalWalletError[0] : `Confirm connection request in the ${wallet.name} app.`,
+            status: wallet.type === "SOLANA" && !isSolanaWalletInAppBrowser(wallet.internalId) ? "idle" : isError ? "error" : "pending",
+            text: wallet.type === "SOLANA" && (!isSolanaWalletInAppBrowser(wallet.internalId) || wallet.hasIosSafariExtension) ? "" : isError ? externalWalletError[0] : `Confirm connection request in the ${wallet.name} app.`,
             secondaryText: externalWalletError == null ? void 0 : externalWalletError[1]
           }
         ),
-        wallet.type === "SOLANA" && qrUri && !wallet.hasIosSafariExtension || wallet.type !== "SOLANA" ? /* @__PURE__ */ jsx(CpslButton, { onClick: () => routeMobileExternalWallet(qrUri), fullWidth: true, children: "Connect Wallet" }) : /* @__PURE__ */ jsx(Text, { weight: "semiBold", children: wallet.hasIosSafariExtension ? `Please install and use the ${wallet.name} extension for iOS Safari.` : `Please navigate to ${appName} in the ${wallet.name} wallet.` }),
+        wallet.type === "SOLANA" && isSolanaWalletInAppBrowser(wallet.internalId) && !wallet.hasIosSafariExtension || wallet.type !== "SOLANA" ? /* @__PURE__ */ jsx(CpslButton, { onClick: handleRetryClick, fullWidth: true, children: isError ? "Retry" : "Connect Wallet" }) : /* @__PURE__ */ jsx(Text, { weight: "semiBold", children: wallet.hasIosSafariExtension ? `Please install and use the ${wallet.name} extension for iOS Safari.` : `Please navigate to ${appName} in the ${wallet.name} wallet.` }),
         !wallet.hasIosSafariExtension && /* @__PURE__ */ jsx(Link, { href: (_a = wallet.downloadUrl) != null ? _a : "", target: "_blank", children: /* @__PURE__ */ jsxs(ExternalButton, { variant: "secondary", children: [
           `Get ${wallet.name}`,
           /* @__PURE__ */ jsx(ExternalIcon, { icon: "linkExternal" })
@@ -90,16 +97,24 @@ const ExternalWalletMobileConnect = ({
     /* @__PURE__ */ jsx(InnerStepContainer, { children: isWalletConnect ? /* @__PURE__ */ jsx(Fragment, { children: GetWalletButton }) : /* @__PURE__ */ jsx(Link, { href: (_b = wallet.downloadUrl) != null ? _b : "", target: "_blank", children: GetWalletButton }) })
   ] });
 };
-const ExternalWalletStep = () => {
+const ExternalWalletStep = ({ isAddingWallets = false }) => {
   const externalWalletError = useModalStore((state) => state.externalWalletError);
+  const step = useModalStore((state) => state.step);
   const setStep = useModalStore((state) => state.setStep);
-  const { connectExternalWallet, wallet, qrUri, walletDisplayHelpers } = useExternalWallets();
-  useEffect(() => {
-    routeMobileExternalWallet(qrUri);
-  }, [qrUri]);
+  const { connectExternalWallet, addAdditionalExternalWallet, wallet, qrUri, walletDisplayHelpers } = useExternalWallets();
+  const handleConnect = useCallback(
+    (wallet2, isWc = false, isRetryConnection = false) => __async(void 0, null, function* () {
+      if (isAddingWallets) {
+        yield addAdditionalExternalWallet(wallet2);
+      } else {
+        yield isWc ? connectExternalWallet({ wallet: wallet2, isMobile: true, isManualWalletConnect: true }) : connectExternalWallet({ wallet: wallet2, isMobile: wallet2.isMobile, isRetryConnection });
+      }
+    }),
+    [isAddingWallets, addAdditionalExternalWallet, connectExternalWallet]
+  );
   const handleTryAgainClick = () => __async(void 0, null, function* () {
     if (wallet) {
-      yield connectExternalWallet(wallet);
+      yield handleConnect(wallet, false, true);
     }
   });
   const Content = useMemo(() => {
@@ -153,17 +168,32 @@ Please choose another wallet or continue on desktop.` }) });
           wallet,
           qrUri,
           onConnectWc: (w) => __async(void 0, null, function* () {
-            yield connectExternalWallet(w, true, true);
+            yield handleConnect(w, true);
+          }),
+          onRetryClick: () => __async(void 0, null, function* () {
+            yield connectExternalWallet({ wallet, isMobile: true, isRetryConnection: true });
           })
         }
       );
     }
-  }, [wallet, walletDisplayHelpers, externalWalletError, qrUri]);
+  }, [
+    wallet,
+    walletDisplayHelpers,
+    externalWalletError,
+    qrUri,
+    isAddingWallets,
+    addAdditionalExternalWallet,
+    connectExternalWallet
+  ]);
   useEffect(() => {
     if (!wallet) {
-      setStep(ModalStep.AUTH_MAIN);
+      if (step === ModalStep.ADD_EX_WALLET_SELECTED) {
+        setStep(ModalStep.ADD_EX_WALLET_MORE);
+      } else {
+        setStep(ModalStep.AUTH_MAIN);
+      }
     }
-  }, [wallet]);
+  }, [wallet, step]);
   if (!wallet) {
     return null;
   }

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

@@ -1 +1,3 @@
-export declare const ExternalWallets: () => import("react/jsx-runtime").JSX.Element;
+export declare const ExternalWallets: ({ isAddingWallets }: {
+    isAddingWallets?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/modal/components/ExternalWallets/ExternalWallets.js

@@ -12,11 +12,13 @@ import { useState } from "react";
 import { hasEmbeddedAuth } from "../../utils/authLayoutHelpers.js";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 const HAS_MORE_LENGTH = 3;
-const ExternalWallets = () => {
-  const { wallets: allWallets, connectExternalWallet } = useExternalWallets();
+const ExternalWallets = ({ isAddingWallets = false }) => {
+  const { wallets: allWallets, connectExternalWallet, addAdditionalExternalWallet } = useExternalWallets();
   const setSelectedExternalWallet = useModalStore((state) => state.setSelectedExternalWallet);
   const setStep = useModalStore((state) => state.setStep);
-  const showAll = useModalStore((state) => state.step === ModalStep.EX_WALLET_MORE);
+  const showAll = useModalStore(
+    (state) => state.step === ModalStep.EX_WALLET_MORE || state.step === ModalStep.ADD_EX_WALLET_MORE
+  );
   const authLayout = useModalStore((state) => state.authLayout);
   const [search, setSearch] = useState("");
   const dedupedWallets = Array.from(new Set(allWallets.map((wallet) => wallet.id))).map((id) => {
@@ -31,21 +33,29 @@ const ExternalWallets = () => {
   const handleParaClick = () => {
     setStep(ModalStep.AUTH_MORE);
   };
-  const handleWalletClick = (wallet) => () => {
+  const handleWalletClick = (wallet) => () => __async(void 0, null, function* () {
     const shouldShowNetworkSelection = allWallets.filter((w) => w.id === wallet.id).length > 1;
     if (shouldShowNetworkSelection) {
       setSelectedExternalWallet({ id: wallet.id, type: wallet.type });
-      setStep(ModalStep.EX_WALLET_NETWORK_SELECT);
+      setStep(isAddingWallets ? ModalStep.ADD_EX_WALLET_NETWORK_SELECT : ModalStep.EX_WALLET_NETWORK_SELECT);
       return;
     }
     setSelectedExternalWallet({ id: wallet.id, type: wallet.type });
-    setStep(ModalStep.EX_WALLET_SELECTED);
-    if (wallet.installed) {
-      connectExternalWallet(wallet);
-    } else if (wallet.isMobile) {
-      connectExternalWallet(wallet, true);
+    setStep(isAddingWallets ? ModalStep.ADD_EX_WALLET_SELECTED : ModalStep.EX_WALLET_SELECTED);
+    if (isAddingWallets) {
+      try {
+        yield addAdditionalExternalWallet(wallet);
+      } catch (error) {
+        console.error("Failed to add additional wallet:", error);
+      }
+    } else {
+      if (wallet.installed) {
+        connectExternalWallet({ wallet });
+      } else if (wallet.isMobile) {
+        connectExternalWallet({ wallet, isMobile: true });
+      }
     }
-  };
+  });
   return /* @__PURE__ */ jsxs(Container, { $maxHeight: showAll, children: [
     showAll && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(SearchInputWrapper, { children: /* @__PURE__ */ jsx(
@@ -61,7 +71,7 @@ const ExternalWallets = () => {
           children: /* @__PURE__ */ jsx(SearchIcon, { slot: "start", icon: "search" })
         }
       ) }),
-      hasEmbeddedAuth(authLayout != null ? authLayout : []) && /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, variant: "tertiary", onClick: handleParaClick, children: /* @__PURE__ */ jsxs(WalletButtonOuterContainer, { children: [
+      hasEmbeddedAuth(authLayout != null ? authLayout : []) && !isAddingWallets && /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, variant: "tertiary", onClick: handleParaClick, children: /* @__PURE__ */ jsxs(WalletButtonOuterContainer, { children: [
         /* @__PURE__ */ jsxs(WalletButtonInnerContainer, { children: [
           /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "paraIcon" }),
           /* @__PURE__ */ jsx(CpslText, { weight: "medium", children: "Para" })

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

@@ -1,16 +1,15 @@
 "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 { useAccount } from "../../../provider/index.js";
+import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
 const Footer = () => {
-  const { isConnected } = useAccount();
   const currentStep = useModalStore((state) => state.step);
-  const showFooter = !isConnected && [
+  const { accountLinkInProgress } = useAccountLinking();
+  const showFooter = !accountLinkInProgress && [
     ModalStep.AUTH_MAIN,
     ModalStep.AUTH_MORE,
     ModalStep.EX_WALLET_NETWORK_SELECT,

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/Header/hooks/useStepTitle.js

@@ -22,6 +22,7 @@ const useStepTitle = () => {
   const isLogin = useModalStore((state) => state.isLogin());
   const currentStep = useModalStore((state) => state.step);
   const authLayout = useModalStore((state) => state.authLayout) || [];
+  const profileWallet = useModalStore((state) => state.profileWallet);
   const { data: activeWallet } = useWallet();
   const [isAuthFirst, isAuthCondensed, isExternalFirst, isExternalCondensed, isBothCondensed] = [
     (_a = authLayout[0]) == null ? void 0 : _a.includes("AUTH"),
@@ -34,44 +35,58 @@ const useStepTitle = () => {
   const { chainId } = useExternalWallets();
   const { isEnabled: isAccountLinkingEnabled } = useAccountLinking();
   const titles = useMemo(
-    () => ({
-      [ModalStep.AUTH_MAIN]: authStepTitle,
-      [ModalStep.AUTH_MORE]: signUpOrLogInTitle,
-      [ModalStep.AUTH_GUEST_SIGNUP]: "Complete Account Setup",
-      [ModalStep.EX_WALLET_MORE]: connectWalletTitle,
-      [ModalStep.VERIFICATIONS]: "Sign Up",
-      [ModalStep.AWAITING_OAUTH]: signUpOrLogInTitle,
-      [ModalStep.FARCASTER_OAUTH]: signUpOrLogInTitle,
-      [ModalStep.TELEGRAM_OAUTH]: signUpOrLogInTitle,
-      [ModalStep.BIOMETRIC_CREATION]: "Sign Up",
-      [ModalStep.PASSWORD_CREATION]: "Sign Up",
-      [ModalStep.AWAITING_BIOMETRIC_CREATION]: "Sign Up",
-      [ModalStep.AWAITING_WALLET_CREATION]: isLogin ? "Login" : "Sign Up",
-      [ModalStep.AWAITING_PASSWORD_CREATION]: "Sign Up",
-      [ModalStep.WALLET_CREATION_DONE]: hideWallets ? "Account Created" : "Wallet Created",
-      [ModalStep.SECRET]: isLogin ? "Login" : "Sign Up",
-      [ModalStep.BIOMETRIC_LOGIN]: "Login",
-      [ModalStep.EMBEDDED_PASSWORD_LOGIN]: "Login",
-      [ModalStep.AWAITING_PASSWORD_LOGIN]: "Login",
-      [ModalStep.AWAITING_BIOMETRIC_LOGIN]: "Login",
-      [ModalStep.LOGIN_DONE]: "",
-      [ModalStep.SETUP_2FA]: "2FA",
-      [ModalStep.VERIFY_2FA]: "2FA",
-      [ModalStep.TWO_FACTOR_DONE]: "2FA",
-      [ModalStep.ADD_FUNDS_BUY]: "Add Funds",
-      [ModalStep.ADD_FUNDS_RECEIVE]: "Add Funds",
-      [ModalStep.ADD_FUNDS_WITHDRAW]: "Withdraw",
-      [ModalStep.ADD_FUNDS_AWAITING]: "Add Funds",
-      [ModalStep.ADD_FUNDS_SUCCESS]: "Add Funds",
-      [ModalStep.ADD_FUNDS_FAILURE]: "Add Funds",
-      [ModalStep.ACCOUNT_MAIN]: "",
-      [ModalStep.CHAIN_SWITCH]: "",
-      [ModalStep.ACCOUNT_PROFILE]: isAccountLinkingEnabled ? "Profile" : "Settings",
-      [ModalStep.ACCOUNT_PROFILE_LIST]: "Link Account",
-      [ModalStep.ACCOUNT_PROFILE_ADD]: "Link Account",
-      [ModalStep.ACCOUNT_PROFILE_REMOVE]: "Unlink Account",
-      [ModalStep.AWAITING_ACCOUNT]: isLogin ? "Login" : "Sign Up"
-    }),
+    () => {
+      var _a2;
+      return {
+        [ModalStep.AUTH_MAIN]: authStepTitle,
+        [ModalStep.AUTH_MORE]: signUpOrLogInTitle,
+        [ModalStep.AUTH_GUEST_SIGNUP]: "Complete Account Setup",
+        [ModalStep.EX_WALLET_MORE]: connectWalletTitle,
+        [ModalStep.ADD_EX_WALLET_MORE]: "Add Wallet",
+        [ModalStep.VERIFICATIONS]: "Sign Up",
+        [ModalStep.AWAITING_OAUTH]: signUpOrLogInTitle,
+        [ModalStep.FARCASTER_OAUTH]: signUpOrLogInTitle,
+        [ModalStep.TELEGRAM_OAUTH]: signUpOrLogInTitle,
+        [ModalStep.BIOMETRIC_CREATION]: "Sign Up",
+        [ModalStep.PASSWORD_CREATION]: "Sign Up",
+        [ModalStep.AWAITING_BIOMETRIC_CREATION]: "Sign Up",
+        [ModalStep.AWAITING_WALLET_CREATION]: isLogin ? "Login" : "Sign Up",
+        [ModalStep.AWAITING_PASSWORD_CREATION]: "Sign Up",
+        [ModalStep.WALLET_CREATION_DONE]: hideWallets ? "Account Created" : "Wallet Created",
+        [ModalStep.SECRET]: isLogin ? "Login" : "Sign Up",
+        [ModalStep.BIOMETRIC_LOGIN]: "Login",
+        [ModalStep.EMBEDDED_PASSWORD_LOGIN]: "Login",
+        [ModalStep.AWAITING_PASSWORD_LOGIN]: "Login",
+        [ModalStep.AWAITING_BIOMETRIC_LOGIN]: "Login",
+        [ModalStep.LOGIN_DONE]: "",
+        [ModalStep.SETUP_2FA]: "2FA",
+        [ModalStep.VERIFY_2FA]: "2FA",
+        [ModalStep.TWO_FACTOR_DONE]: "2FA",
+        [ModalStep.ADD_FUNDS_BUY]: "Add Funds",
+        [ModalStep.ADD_FUNDS_RECEIVE]: "Add Funds",
+        [ModalStep.ADD_FUNDS_WITHDRAW]: "Withdraw",
+        [ModalStep.ADD_FUNDS_AWAITING]: "Add Funds",
+        [ModalStep.ADD_FUNDS_SUCCESS]: "Add Funds",
+        [ModalStep.ADD_FUNDS_FAILURE]: "Add Funds",
+        [ModalStep.ACCOUNT_MAIN]: "",
+        [ModalStep.CHAIN_SWITCH]: "",
+        [ModalStep.ACCOUNT_PROFILE]: isAccountLinkingEnabled ? "Profile" : "Settings",
+        [ModalStep.ACCOUNT_PROFILE_LIST]: "Link Account",
+        [ModalStep.ACCOUNT_PROFILE_ADD]: "Link Account",
+        [ModalStep.ACCOUNT_PROFILE_REMOVE]: "Unlink Account",
+        [ModalStep.EX_WALLET_SELECTED]: "Connect Wallet",
+        [ModalStep.EX_WALLET_NETWORK_SELECT]: "Select Network",
+        [ModalStep.ADD_EX_WALLET_NETWORK_SELECT]: "Select Network",
+        [ModalStep.LINK_EX_WALLET_NETWORK_SELECT]: "Select Network",
+        [ModalStep.ADD_EX_WALLET_SELECTED]: "Add Wallet",
+        [ModalStep.EXTERNAL_WALLET_VERIFICATION]: "Verify Wallet",
+        [ModalStep.AWAITING_ACCOUNT]: isLogin ? "Login" : "Sign Up",
+        [ModalStep.ACCOUNT_WALLET]: (_a2 = profileWallet == null ? void 0 : profileWallet.displayName) != null ? _a2 : "Wallet Settings",
+        [ModalStep.ACCOUNT_SEND]: "Send",
+        [ModalStep.ACCOUNT_SEND_ASSET]: "Send",
+        [ModalStep.ACCOUNT_SEND_NETWORK]: "Send"
+      };
+    },
     [isLogin, chainId, hideWallets, authStepTitle]
   );
   const title = useMemo(() => {

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,17 +5,17 @@ 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";
+import { validatePortalOrigin } from "../../utils/validatePortalOrigin.js";
 const IFrameStep = () => {
   const iFrameUrl = useModalStore((state) => state.iFrameUrl);
   const setIsReady = useModalStore((state) => state.setIsIFrameReady);
   const isReady = useModalStore((state) => state.isIFrameReady);
   const currentStep = useModalStore((state) => state.step);
+  const refs = useModalStore((state) => state.refs);
   const embeddedModal = useStore((state) => {
     var _a;
     return (_a = state.modalConfig) == null ? void 0 : _a.embeddedModal;
@@ -32,22 +32,23 @@ const IFrameStep = () => {
       if (!iFrameUrl) {
         return;
       }
-      const portalBase = getPortalBaseURL(para.ctx);
-      if (!event.origin.startsWith(portalBase)) {
+      if (!validatePortalOrigin(event, para.ctx)) {
         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);
         }
       }
     };
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
+    typeof window !== "undefined" && window.addEventListener("message", handleMessage);
+    return () => {
+      typeof window !== "undefined" && window.removeEventListener("message", handleMessage);
+    };
   }, [setIsReady, iFrameUrl]);
   return /* @__PURE__ */ jsxs(OuterContainer, { $isVisible: IFrameSteps.includes(currentStep), $embeddedModal: !!embeddedModal, $isReady: !!isReady, children: [
-    /* @__PURE__ */ jsx(Container, { $isReady: !!isReady, $height: height, children: /* @__PURE__ */ jsx("iframe", { src: iFrameUrl }) }),
+    /* @__PURE__ */ jsx(Container, { $isReady: !!isReady, $height: height, children: /* @__PURE__ */ jsx("iframe", { src: iFrameUrl, ref: refs.iFrame }) }),
     !isReady && /* @__PURE__ */ jsx(SpinnerContainer, { style: { width: "100%", height: "100%", flex: 1, position: "absolute" }, children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) })
   ] });
 };
@@ -62,7 +63,7 @@ const OuterContainer = safeStyled.div`
   justify-content: center;
 
   @media (max-width: ${MOBILE_SIZE}px) {
-    padding: ${({ $embeddedModal, $isVisible }) => !$isVisible ? "0px" : $embeddedModal ? "12px 0px 0px" : "72px 16px 0px"};
+    padding: ${({ $embeddedModal, $isVisible }) => !$isVisible ? "0px" : $embeddedModal ? "12px 0px 0px" : "0px"};
   }
 `;
 const Container = safeStyled.div`