@getpara/react-sdk-lite 2.0.0-alpha.66 → 2.0.0-alpha.68

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

@@ -7,9 +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, NETWORK_NOT_SUPPORTED_ERROR, 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 { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 const ChainSwitch = () => {
   const [isCopied, copy] = useCopyToClipboard();
@@ -19,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/ExternalWalletNetworkSelectStep/ExternalWalletNetworkSelectStep.js

@@ -42,9 +42,9 @@ const ExternalWalletNetworkSelectStep = ({ type = "CONNECT" }) => {
         setSelectedExternalWallet({ id: wallet.id, type: wallet.type });
         setStep(ModalStep.EX_WALLET_SELECTED);
         if (wallet.installed || wallet.internalId === "FARCASTER") {
-          connectExternalWallet(wallet);
+          connectExternalWallet({ wallet });
         } else if (wallet.isMobile) {
-          connectExternalWallet(wallet, true);
+          connectExternalWallet({ wallet, isMobile: true });
         }
         break;
     }

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

@@ -1,8 +1,9 @@
 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: ({ isAddingWallets }: {

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 { useCallback, 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" })
@@ -96,21 +103,18 @@ const ExternalWalletStep = ({ isAddingWallets = false }) => {
   const setStep = useModalStore((state) => state.setStep);
   const { connectExternalWallet, addAdditionalExternalWallet, wallet, qrUri, walletDisplayHelpers } = useExternalWallets();
   const handleConnect = useCallback(
-    (wallet2, isWc = false) => __async(void 0, null, function* () {
+    (wallet2, isWc = false, isRetryConnection = false) => __async(void 0, null, function* () {
       if (isAddingWallets) {
         yield addAdditionalExternalWallet(wallet2);
       } else {
-        yield isWc ? connectExternalWallet(wallet2, true, true) : connectExternalWallet(wallet2);
+        yield isWc ? connectExternalWallet({ wallet: wallet2, isMobile: true, isManualWalletConnect: true }) : connectExternalWallet({ wallet: wallet2, isMobile: wallet2.isMobile, isRetryConnection });
       }
     }),
     [isAddingWallets, addAdditionalExternalWallet, connectExternalWallet]
   );
-  useEffect(() => {
-    routeMobileExternalWallet(qrUri);
-  }, [qrUri]);
   const handleTryAgainClick = () => __async(void 0, null, function* () {
     if (wallet) {
-      yield handleConnect(wallet);
+      yield handleConnect(wallet, false, true);
     }
   });
   const Content = useMemo(() => {
@@ -165,6 +169,9 @@ Please choose another wallet or continue on desktop.` }) });
           qrUri,
           onConnectWc: (w) => __async(void 0, null, function* () {
             yield handleConnect(w, true);
+          }),
+          onRetryClick: () => __async(void 0, null, function* () {
+            yield connectExternalWallet({ wallet, isMobile: true, isRetryConnection: true });
           })
         }
       );

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

@@ -50,9 +50,9 @@ const ExternalWallets = ({ isAddingWallets = false }) => {
       }
     } else {
       if (wallet.installed) {
-        connectExternalWallet(wallet);
+        connectExternalWallet({ wallet });
       } else if (wallet.isMobile) {
-        connectExternalWallet(wallet, true);
+        connectExternalWallet({ wallet, isMobile: true });
       }
     }
   });

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,51 +35,55 @@ 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.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"
-    }),
+    () => {
+      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"
+      };
+    },
     [isLogin, chainId, hideWallets, authStepTitle]
   );
   const title = useMemo(() => {

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

@@ -7,14 +7,15 @@ import { IFrameSteps } from "../../utils/steps.js";
 import { safeStyled } 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 { 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;
@@ -31,8 +32,7 @@ const IFrameStep = () => {
       if (!iFrameUrl) {
         return;
       }
-      const portalBase = getPortalBaseURL(para.ctx);
-      if (!event.origin.startsWith(portalBase)) {
+      if (!validatePortalOrigin(event, para.ctx)) {
         return;
       }
       if (event.data) {
@@ -42,11 +42,13 @@ const IFrameStep = () => {
         }
       }
     };
-    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 }) })
   ] });
 };

package/dist/modal/components/OAuth/FarcasterOAuthStep.js

@@ -5,8 +5,8 @@ import { CpslSpinner } from "@getpara/react-components";
 import { useFarcasterLogin } from "../../hooks/useFarcasterLogin.js";
 import { safeStyled } from "@getpara/react-common";
 import { useEffect, useState } from "react";
-import { getPortalBaseURL } from "@getpara/web-sdk";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { validatePortalOrigin } from "../../utils/validatePortalOrigin.js";
 function FarcasterOAuthStep() {
   const { url, isLoaded, setIsLoaded } = useFarcasterLogin({
     isActive: true
@@ -18,8 +18,7 @@ function FarcasterOAuthStep() {
       if (!url) {
         return;
       }
-      const portalBase = getPortalBaseURL(para.ctx);
-      if (!event.origin.startsWith(portalBase)) {
+      if (!validatePortalOrigin(event, para.ctx)) {
         return;
       }
       if (event.data) {
@@ -28,8 +27,10 @@ function FarcasterOAuthStep() {
         }
       }
     };
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
+    typeof window !== "undefined" && window.addEventListener("message", handleMessage);
+    return () => {
+      typeof window !== "undefined" && window.removeEventListener("message", handleMessage);
+    };
   }, [url]);
   return /* @__PURE__ */ jsxs(Container, { children: [
     url && /* @__PURE__ */ jsx(IFrame, { style: { display: isLoaded ? "block" : "none", height }, src: url, onLoad: () => setIsLoaded(true) }),

package/dist/modal/components/OAuth/TelegramOAuthStep.js

@@ -7,8 +7,8 @@ import { useTelegramLogin } from "../../hooks/useTelegramLogin.js";
 import { useEffect, useState } from "react";
 import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
 import { useModalStore } from "../../stores/index.js";
-import { getPortalBaseURL } from "@getpara/web-sdk";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { validatePortalOrigin } from "../../utils/validatePortalOrigin.js";
 function TelegramOAuthStep() {
   const { verifyTelegramStatus, verifyTelegram } = useAuthActions();
   const { url, isLoaded, setIsLoaded } = useTelegramLogin({
@@ -25,8 +25,7 @@ function TelegramOAuthStep() {
       if (!url) {
         return;
       }
-      const portalBase = getPortalBaseURL(para.ctx, true);
-      if (!event.origin.startsWith(portalBase)) {
+      if (!validatePortalOrigin(event, para.ctx)) {
         return;
       }
       if (event.data) {
@@ -35,8 +34,10 @@ function TelegramOAuthStep() {
         }
       }
     };
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
+    typeof window !== "undefined" && window.addEventListener("message", handleMessage);
+    return () => {
+      typeof window !== "undefined" && window.removeEventListener("message", handleMessage);
+    };
   }, [url]);
   return /* @__PURE__ */ jsxs(Container, { children: [
     url && /* @__PURE__ */ jsx(

package/dist/modal/components/WalletSelectOld/WalletSelectOld.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
-import { safeStyled, useCopyToClipboard, WalletTypeIcon as WalletTypeIconBase } from "@getpara/react-common";
+import { MOBILE_SIZE, safeStyled, useCopyToClipboard, WalletTypeIcon as WalletTypeIconBase } from "@getpara/react-common";
 import { useAccount, useWallet, useWalletState } from "../../../provider/index.js";
 import { CpslButton, CpslIcon, CpslSelect, CpslSelectItem, CpslText } from "@getpara/react-components";
 const getValue = (id, type) => {
@@ -61,7 +61,7 @@ const WalletSelectOld = () => {
   }, [activeWallet, availableWallets, dropdownMaxHeight]);
   return /* @__PURE__ */ jsxs(Container, { children: [
     isMultiWallet && /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "secondary", weight: "semiBold", children: "Select Wallet" }),
-    /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, id: "addressInputContainer", children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, id: "addressInputContainerOld", children: /* @__PURE__ */ jsxs(
       Select,
       {
         selectedValue: getValue(activeWallet == null ? void 0 : activeWallet.id, activeWallet == null ? void 0 : activeWallet.type),
@@ -71,10 +71,10 @@ const WalletSelectOld = () => {
         },
         showFormattedSelectedItem: true,
         placeholder: "Choose wallet...",
-        anchorElId: "addressInputContainer",
+        anchorElId: "addressInputContainerOld",
         dropdownMaxHeight,
         $width: dropdownWidth != null ? dropdownWidth : 0,
-        $top: (mobileAnchor != null ? mobileAnchor : 0) + 16 + 1,
+        $top: (mobileAnchor != null ? mobileAnchor : 0) + 220 + 1,
         selectedItemVariant: "bodyXS",
         icon: isMultiWallet ? "chevronUp" : null,
         disabled: !isMultiWallet,
@@ -114,7 +114,20 @@ const Select = safeStyled(CpslSelect)`
 
   &::part(dropdown) {
     min-width: ${({ $width }) => `${$width - 2}px`};
+  } 
+
+  &::part(popover) {
+      /* Have to adjust the top of the popover here since we're using a transform on the modal which causes fixed position items to not be relative to the viewport */
+      @media (max-width: ${MOBILE_SIZE}px) {
+        top: ${({ $top }) => $top ? `${$top}px` : "0px"};
+        bottom: 16px;
+      }
+      cpsl-auth-modal.force-mobile-media & {
+        top: ${({ $top }) => $top ? `${$top}px` : "0px"};
+        bottom: 16px;
+      }
   }
+  
 
   &::part(icon) {
     --icon-color: var(--cpsl-color-text-primary);

package/dist/modal/hooks/useFarcasterLogin.js

@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
 import { useInternalClient } from "../../provider/hooks/utils/useInternalClient.js";
 import { useModalStore } from "../stores/index.js";
 import { useAuthActions } from "../../provider/providers/AuthProvider.js";
+import { validatePortalOrigin } from "../utils/validatePortalOrigin.js";
 const useFarcasterLogin = ({
   isActive = false
 } = {}) => {
@@ -29,8 +30,12 @@ const useFarcasterLogin = ({
     }
   }, [isActive, url]);
   useEffect(() => {
+    if (typeof window === "undefined") return;
     const updateState = (event) => __async(void 0, null, function* () {
       var _a, _b;
+      if (!validatePortalOrigin(event, para.ctx)) {
+        return;
+      }
       switch (event.data.type) {
         case "FARCASTER_LOGIN":
           setMsgStatus("pending");
@@ -55,7 +60,9 @@ const useFarcasterLogin = ({
       window == null ? void 0 : window.addEventListener("message", updateState, false);
     }
     return () => {
-      window == null ? void 0 : window.removeEventListener("message", updateState, false);
+      if (typeof window !== "undefined") {
+        window.removeEventListener("message", updateState, false);
+      }
     };
   }, [isActive]);
   return {

package/dist/modal/hooks/useTelegramLogin.js

@@ -5,6 +5,7 @@ import {
 import { useEffect, useState } from "react";
 import { useInternalClient } from "../../provider/hooks/utils/useInternalClient.js";
 import { useModalStore } from "../stores/index.js";
+import { validatePortalOrigin } from "../utils/validatePortalOrigin.js";
 const useTelegramLogin = ({
   isActive = false,
   onSubmit,
@@ -34,6 +35,9 @@ const useTelegramLogin = ({
   useEffect(() => {
     const updateState = (event) => __async(void 0, null, function* () {
       var _a, _b;
+      if (!validatePortalOrigin(event, para.ctx)) {
+        return;
+      }
       switch (event.data.type) {
         case "TELEGRAM_LOGIN":
           setMsgStatus("pending");

package/dist/modal/stores/modal/actions.js

@@ -137,7 +137,8 @@ const getActions = (set, get) => ({
   },
   setAuthStepRoute: (authStepRoute) => set({ authStepRoute }),
   setIsPasskeySupported: (isPasskeySupported) => set({ isPasskeySupported }),
-  setAccountLinkOptions: (accountLinkOptions) => set({ accountLinkOptions })
+  setAccountLinkOptions: (accountLinkOptions) => set({ accountLinkOptions }),
+  setProfileWallet: (profileWallet) => set({ profileWallet })
 });
 export {
   getActions

package/dist/modal/stores/modal/useModalStore.d.ts

@@ -1,3 +1,4 @@
+import { AvailableWallet } from '@getpara/core-sdk';
 import { ModalStep } from '../../utils/steps.js';
 import { AuthStateLogin, AuthStateSignup, AuthState, AuthStateVerify, OnRampConfig as OnRampConfigBase, OnRampPurchase, TWalletType, Setup2faResponse, SupportedAccountLinks } from '@getpara/web-sdk';
 import { Tab as AddFundsTabType } from '../../components/AddFunds/AddFundsContext.js';
@@ -55,9 +56,11 @@ interface ModalState {
         telegramIFrame: MutableRefObject<HTMLIFrameElement | null>;
         wasSignedIn: MutableRefObject<boolean | null>;
         initialFarcasterConnected: MutableRefObject<boolean | null>;
+        iFrame: MutableRefObject<HTMLIFrameElement | null>;
     };
     isPasskeySupported: boolean;
     accountLinkOptions: SupportedAccountLinks;
+    profileWallet?: AvailableWallet;
 }
 export interface ModalActions {
     resetState: () => void;
@@ -96,6 +99,7 @@ export interface ModalActions {
     setAuthStepRoute: (_?: ModalStep) => void;
     setIsPasskeySupported: (_: boolean) => void;
     setAccountLinkOptions: (_: SupportedAccountLinks) => void;
+    setProfileWallet: (_?: AvailableWallet) => void;
 }
 export type ModalStore = ModalState & ModalActions;
 export declare const DEFAULT_MODAL_STATE: Omit<ModalState, 'step' | 'onRampConfig'>;

package/dist/modal/stores/modal/useModalStore.js

@@ -44,10 +44,12 @@ const DEFAULT_MODAL_STATE = {
     currentStep: createRef(),
     telegramIFrame: createRef(),
     wasSignedIn: createRef(),
-    initialFarcasterConnected: createRef()
+    initialFarcasterConnected: createRef(),
+    iFrame: createRef()
   },
   isPasskeySupported: true,
-  accountLinkOptions: [...LINKED_ACCOUNT_TYPES]
+  accountLinkOptions: [...LINKED_ACCOUNT_TYPES],
+  profileWallet: void 0
 };
 const useModalStore = create()(
   persist(

package/dist/modal/utils/openPopup.d.ts

@@ -1,6 +1,6 @@
 export declare function openPopup({ url, target, type, current, }: {
     url: string;
     target: string;
-    type: 'OAUTH' | 'LOGIN_PASSKEY' | 'CREATE_PASSKEY' | 'TRANSACTION_REVIEW' | 'CREATE_PASSWORD' | 'LOGIN_PASSWORD' | 'SWITCH_WALLETS' | 'ADD_CREDENTIAL';
+    type: 'OAUTH' | 'LOGIN_PASSKEY' | 'CREATE_PASSKEY' | 'TRANSACTION_REVIEW' | 'CREATE_PASSWORD' | 'LOGIN_PASSWORD' | 'SWITCH_WALLETS' | 'ADD_CREDENTIAL' | 'LOGIN_EXTERNAL_WALLET';
     current?: Window | null;
 }): Window | null;

package/dist/modal/utils/openPopup.js

@@ -1,5 +1,6 @@
 "use client";
 import "../../chunk-MMUBH76A.js";
+import { isMobile } from "@getpara/web-sdk";
 function openPopup({
   url,
   target,
@@ -36,6 +37,7 @@ function openPopup({
     }
     case "OAUTH":
     case "ADD_CREDENTIAL":
+    case "LOGIN_EXTERNAL_WALLET":
     default: {
       popUpHeight = 768;
       break;
@@ -49,7 +51,7 @@ function openPopup({
   const top = (height - popUpHeight) / 2 + dualScreenTop;
   const windowFeatures = `toolbar=no, menubar=no, width=${popUpWidth}, 
     height=${popUpHeight}, top=${top}, left=${left}`;
-  let popupWindow = window.open(url, target, windowFeatures);
+  let popupWindow = window.open(url, isMobile() ? "_blank" : target, windowFeatures);
   if (!popupWindow) {
     setTimeout(() => {
       popupWindow = window.open(url, "_blank");

package/dist/modal/utils/steps.d.ts

@@ -1,4 +1,4 @@
-import { EnabledFlow } from '@getpara/web-sdk';
+import { EnabledFlow } from '@getpara/core-sdk/src/types/config.js';
 export declare enum ModalStep {
     AUTH_MAIN = "AUTH_MAIN",
     AUTH_MORE = "AUTH_MORE",
@@ -39,6 +39,7 @@ export declare enum ModalStep {
     ACCOUNT_PROFILE_ADD = "ACCOUNT_PROFILE_ADD",
     ACCOUNT_PROFILE_LIST = "ACCOUNT_PROFILE_LIST",
     ACCOUNT_PROFILE_REMOVE = "ACCOUNT_PROFILE_REMOVE",
+    ACCOUNT_WALLET = "ACCOUNT_WALLET",
     AWAITING_ACCOUNT = "AWAITING_ACCOUNT",
     SWITCH_WALLETS = "SWITCH_WALLETS",
     SWITCH_WALLETS_IFRAME = "SWITCH_WALLETS_IFRAME",
@@ -65,6 +66,7 @@ declare enum AccountStep {
     ACCOUNT_PROFILE_ADD = "ACCOUNT_PROFILE_ADD",
     ACCOUNT_PROFILE_LIST = "ACCOUNT_PROFILE_LIST",
     ACCOUNT_PROFILE_REMOVE = "ACCOUNT_PROFILE_REMOVE",
+    ACCOUNT_WALLET = "ACCOUNT_WALLET",
     SWITCH_WALLETS = "SWITCH_WALLETS",
     SWITCH_WALLETS_IFRAME = "SWITCH_WALLETS_IFRAME",
     EXTERNAL_WALLET_VERIFICATION = "EXTERNAL_WALLET_VERIFICATION",