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

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

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from "react";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
-import { getExternalWalletIcon, safeStyled, useCopyToClipboard } from "@getpara/react-common";
+import { getExternalWalletIcon, MOBILE_SIZE, safeStyled, useCopyToClipboard } from "@getpara/react-common";
 import { useAccount, useWallet, useWalletState } from "../../../provider/index.js";
 import { CpslButton, CpslIcon, CpslSelect, CpslSelectItem, CpslText } from "@getpara/react-components";
 import { truncateAddress } from "@getpara/web-sdk";
@@ -92,7 +92,7 @@ const AccountWalletSelect = () => {
       anchorElId: "addressInputContainer",
       dropdownMaxHeight,
       $width: dropdownWidth != null ? dropdownWidth : 0,
-      $top: (mobileAnchor != null ? mobileAnchor : 0) + 16 + 1,
+      $top: (mobileAnchor != null ? mobileAnchor : 0) + 184 + 1,
       selectedItemVariant: "bodyXS",
       icon: isMultiWallet ? "chevronUp" : null,
       disabled: !isMultiWallet,
@@ -108,6 +108,7 @@ const AccountWalletSelect = () => {
   ) }) });
 };
 const Container = safeStyled.div`
+  flex: 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -145,6 +146,18 @@ const Select = safeStyled(CpslSelect)`
     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/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/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/useModalStore.d.ts

@@ -56,6 +56,7 @@ interface ModalState {
         telegramIFrame: MutableRefObject<HTMLIFrameElement | null>;
         wasSignedIn: MutableRefObject<boolean | null>;
         initialFarcasterConnected: MutableRefObject<boolean | null>;
+        iFrame: MutableRefObject<HTMLIFrameElement | null>;
     };
     isPasskeySupported: boolean;
     accountLinkOptions: SupportedAccountLinks;

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

@@ -44,7 +44,8 @@ const DEFAULT_MODAL_STATE = {
     currentStep: createRef(),
     telegramIFrame: createRef(),
     wasSignedIn: createRef(),
-    initialFarcasterConnected: createRef()
+    initialFarcasterConnected: createRef(),
+    iFrame: createRef()
   },
   isPasskeySupported: true,
   accountLinkOptions: [...LINKED_ACCOUNT_TYPES],

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

@@ -3,7 +3,16 @@ import "../../chunk-MMUBH76A.js";
 import { getNetworkName } from "@getpara/react-common";
 import { format } from "date-fns";
 const formatNetworkList = (networks) => {
-  return networks.length === 1 ? getNetworkName(networks[0]) : `${networks.map((id) => getNetworkName(id)).slice(0, -1).join(", ")}${networks.length > 2 ? "," : ""} and ${getNetworkName(networks[networks.length - 1])}`;
+  if (networks.length === 0) {
+    return "";
+  }
+  if (networks.length === 1) {
+    return getNetworkName(networks[0]);
+  }
+  const networkNames = networks.map((id) => getNetworkName(id));
+  const allButLast = networkNames.slice(0, -1);
+  const last = networkNames[networkNames.length - 1];
+  return `${allButLast.join(", ")}${networks.length > 2 ? "," : ""} and ${last}`;
 };
 const formatWalletCreatedDate = (date) => `${format(new Date(date), "M/d/y")}`;
 const camelToSnakeCase = (str) => str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);

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

@@ -0,0 +1,2 @@
+import { Ctx } from '@getpara/web-sdk';
+export declare const validatePortalOrigin: (event: MessageEvent, paraCtx: Ctx) => boolean;

package/dist/modal/utils/validatePortalOrigin.js

@@ -0,0 +1,14 @@
+"use client";
+import "../../chunk-MMUBH76A.js";
+import { getPortalBaseURL } from "@getpara/web-sdk";
+const validatePortalOrigin = (event, paraCtx) => {
+  const portalBase = getPortalBaseURL(paraCtx);
+  const portalLocalBase = getPortalBaseURL(paraCtx, true);
+  if (event.origin !== portalBase && event.origin !== portalLocalBase) {
+    return false;
+  }
+  return true;
+};
+export {
+  validatePortalOrigin
+};

package/dist/provider/hooks/mutations/useAddAuthMethod.d.ts

@@ -22,7 +22,7 @@ export declare const useAddAuthMethod: ({ openPopup }?: {
     data: string | undefined;
     isSuccess: boolean;
     variables: void | {
-        authMethod?: Exclude<import("@getpara/web-sdk").TAuthMethod, "BASIC_LOGIN"> | undefined;
+        authMethod?: import("@getpara/web-sdk").TAuthMethod | undefined;
     } | undefined;
     isError: boolean;
     isIdle: boolean;
@@ -34,9 +34,9 @@ export declare const useAddAuthMethod: ({ openPopup }?: {
     isPaused: boolean;
     submittedAt: number;
     addAuthMethod: import("@tanstack/react-query").UseMutateFunction<string, Error, void | {
-        authMethod?: Exclude<import("@getpara/web-sdk").TAuthMethod, "BASIC_LOGIN"> | undefined;
+        authMethod?: import("@getpara/web-sdk").TAuthMethod | undefined;
     }, unknown>;
     addAuthMethodAsync: import("@tanstack/react-query").UseMutateAsyncFunction<string, Error, void | {
-        authMethod?: Exclude<import("@getpara/web-sdk").TAuthMethod, "BASIC_LOGIN"> | undefined;
+        authMethod?: import("@getpara/web-sdk").TAuthMethod | undefined;
     }, unknown>;
 };

package/dist/provider/hooks/mutations/useLoginExternalWallet.d.ts

@@ -23,6 +23,8 @@ export declare const useLoginExternalWallet: () => {
         portalTheme?: import("@getpara/web-sdk").Theme | undefined;
         useShortUrls?: boolean | undefined;
         externalWallet: import("@getpara/web-sdk").ExternalWalletInfo | import("@getpara/web-sdk").ExternalWalletInfo[];
+        chainId?: string | undefined;
+        uri?: string | undefined;
     } | undefined;
     isError: boolean;
     isIdle: boolean;
@@ -37,10 +39,14 @@ export declare const useLoginExternalWallet: () => {
         portalTheme?: import("@getpara/web-sdk").Theme | undefined;
         useShortUrls?: boolean | undefined;
         externalWallet: import("@getpara/web-sdk").ExternalWalletInfo | import("@getpara/web-sdk").ExternalWalletInfo[];
+        chainId?: string | undefined;
+        uri?: string | undefined;
     }, unknown>;
     loginExternalWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Compute<import("@getpara/core-sdk/dist/types/types/methods.js").AuthStateVerifyOrLogin>, Error, {
         portalTheme?: import("@getpara/web-sdk").Theme | undefined;
         useShortUrls?: boolean | undefined;
         externalWallet: import("@getpara/web-sdk").ExternalWalletInfo | import("@getpara/web-sdk").ExternalWalletInfo[];
+        chainId?: string | undefined;
+        uri?: string | undefined;
     }, unknown>;
 };