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

package/dist/modal/ParaModal.js

@@ -117,7 +117,7 @@ const ParaModal = forwardRef((props, ref) => {
     });
     trackAnalytics();
   }, []);
-  const isOpen = configIsOpen != null ? configIsOpen : storedIsOpen;
+  const isOpen = bareModal || (configIsOpen != null ? configIsOpen : storedIsOpen);
   useImperativeHandle(ref, () => {
     return {
       goBack() {

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

@@ -32,9 +32,9 @@ const Account = () => {
         setGuestAddFundsTab(EnabledFlow.BUY);
         setStep(ModalStep.AUTH_GUEST_SIGNUP);
       }
-    } else {
+    } else if ((onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled) || (onRampConfig == null ? void 0 : onRampConfig.isReceiveEnabled)) {
       setOnRampStep(OnRampStep.SETTINGS);
-      setStep(ModalStep.ADD_FUNDS_BUY);
+      setStep((onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled) ? ModalStep.ADD_FUNDS_BUY : ModalStep.ADD_FUNDS_RECEIVE);
     }
   };
   const handleSellClick = () => {
@@ -76,7 +76,7 @@ const Account = () => {
         )
       ] }),
       /* @__PURE__ */ jsx(ButtonContainer, { children: isOnRampLoaded ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        onRampConfig.isBuyEnabled && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "plusCircle", onClick: handleBuyClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Add Funds" }) }),
+        (onRampConfig.isBuyEnabled || onRampConfig.isReceiveEnabled) && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "plusCircle", onClick: handleBuyClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Add Funds" }) }),
         onRampConfig.isWithdrawEnabled && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "arrowCircleDown", onClick: handleSellClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Withdraw" }) }),
         /* @__PURE__ */ jsx(OptionButton, { icon: "user01", onClick: handleProfileClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: isEnabled ? "Profile" : "Settings" }) })
       ] }) : /* @__PURE__ */ jsx(CpslSpinner, {}) })

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

@@ -9,7 +9,7 @@ import { useEffect, useMemo } from "react";
 import { HeroAccountTypeIcon, HeroSuccessIcon } from "../common.js";
 import { VerificationCode } from "../VerificationCodeStep/VerificationCodeStep.js";
 import { extractAuthInfo } from "@getpara/user-management-client";
-import { FarcasterConnectQR } from "../OAuth/FarcasterOAuthStep.js";
+import { FarcasterLink } from "../OAuth/FarcasterLink.js";
 import { useTelegramLogin } from "../../hooks/useTelegramLogin.js";
 import { TelegramIFrame } from "../OAuth/TelegramOAuthStep.js";
 import { AuthInput } from "../AuthInput/AuthInput.js";
@@ -35,7 +35,7 @@ function AccountProfileLink() {
     isLoaded,
     setIsLoaded
   } = useTelegramLogin(
-    isTelegram ? { isActive: isTelegram, status: linkAccountStatus, onSubmit: verifyTelegramLink } : { isActive: false }
+    isTelegram ? { isActive: isTelegram, status: linkAccountStatus, onSubmit: verifyTelegramLink, isLinking: true } : { isActive: false, isLinking: true }
   ), status = (accountLinkInProgress == null ? void 0 : accountLinkInProgress.isComplete) ? "success" : isTelegram ? telegramStatus : linkAccountStatus, commonWallet = useMemo(() => {
     const wallet = wallets.find(
       (w) => [w.name, w.internalId, w.id].includes(externalWalletProvider != null ? externalWalletProvider : "") && w.type === externalWalletType
@@ -140,7 +140,7 @@ function AccountProfileLink() {
         break;
       // Farcaster Connect QR
       case (accountLinkType === "FARCASTER" && status !== "success"):
-        lower2 = /* @__PURE__ */ jsx(FarcasterConnectQR, {});
+        lower2 = /* @__PURE__ */ jsx(FarcasterLink, {});
         break;
       // OAuth, External Wallet, Telegram
       default:

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

@@ -30,7 +30,7 @@ const AddFunds = () => {
     ([enabledFlow, key]) => !!(onRampConfig == null ? void 0 : onRampConfig[key]) && (!isGuestMode || enabledFlow === EnabledFlow.RECEIVE)
   );
   const tab = storedTab != null ? storedTab : tabs[0][0];
-  const isMultiFlow = (tab === EnabledFlow.BUY || tab === EnabledFlow.RECEIVE) && tabs.length > 1;
+  const isMultiFlow = (tab === EnabledFlow.BUY || tab === EnabledFlow.RECEIVE) && (onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled) && (onRampConfig == null ? void 0 : onRampConfig.isReceiveEnabled);
   const onSetTab = (event) => {
     setModalStep(getAddFundsStep(event.detail.tab));
   };
@@ -56,12 +56,10 @@ const AddFunds = () => {
     return /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, {}) });
   }
   return /* @__PURE__ */ jsxs(StepContainer, { children: [
-    isMultiFlow && /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslTabs, { selectedTab: tab, onCpslTabsChanged: onSetTab, children: TABS.filter(([enabledFlow]) => enabledFlow === EnabledFlow.BUY || enabledFlow === EnabledFlow.RECEIVE).map(
-      ([tab2, _, icon, title]) => /* @__PURE__ */ jsxs(CpslTab, { tab: tab2, children: [
-        /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon }),
-        title
-      ] }, tab2)
-    ) }) }),
+    isMultiFlow && /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslTabs, { selectedTab: tab, onCpslTabsChanged: onSetTab, children: tabs.filter(([enabledFlow]) => enabledFlow !== EnabledFlow.WITHDRAW).map(([tab2, _, icon, title]) => /* @__PURE__ */ jsxs(CpslTab, { tab: tab2, children: [
+      /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon }),
+      title
+    ] }, tab2)) }) }),
     (step === ModalStep.ADD_FUNDS_RECEIVE || (embedded == null ? void 0 : embedded.wallets) && embedded.wallets.length > 1) && /* @__PURE__ */ jsx(WalletSelectOld, {}),
     /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(AddFundsContextProvider, { "data-testid": "add-funds", tab, children: Content }) })
   ] });

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

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

package/dist/modal/components/AwaitingAccountStep/AwaitingAccountStep.js

@@ -0,0 +1,20 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { useModalStore } from "../../stores/index.js";
+import { Waiting } from "../Waiting/Waiting.js";
+const AwaitingAccountStep = () => {
+  const isLogin = useModalStore((state) => state.isLogin());
+  const verifyState = useModalStore((state) => state.getVerifyState());
+  const isSLOPopup = !!(verifyState == null ? void 0 : verifyState.isWalletSelectionNeeded);
+  return /* @__PURE__ */ jsx(
+    Waiting,
+    {
+      heading: isLogin ? "Logging you in..." : "Creating your account...",
+      subheading: isSLOPopup ? "Follow the prompts presented by your browser." : void 0
+    }
+  );
+};
+export {
+  AwaitingAccountStep
+};

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

@@ -18,7 +18,7 @@ import { TwoFactorDoneStep } from "../TwoFactorDoneStep/TwoFactorDoneStep.js";
 import { BiometricCreationStep } from "../BiometricCreationStep/BiometricCreationStep.js";
 import { AwaitingOAuthStep } from "../AwaitingOAuthStep/AwaitingOAuthStep.js";
 import { AddFundsAwaiting, AddFundsDone, AddFunds } from "../AddFunds/index.js";
-import FarcasterOAuthStep from "../OAuth/FarcasterOAuthStep.js";
+import { FarcasterOAuthStep } from "../OAuth/FarcasterOAuthStep.js";
 import { Header } from "../Header/Header.js";
 import { AuthMainStep } from "../AuthMainStep/AuthMainStep.js";
 import { BODY_MOTION_VARIANTS, BODY_TRANSITION, MOBILE_SIZE } from "../../constants/constants.js";
@@ -42,7 +42,7 @@ import { AccountProfileLinkOptions } from "../Account/AccountProfileLinkOptions.
 import { AccountProfileLink } from "../Account/AccountProfileLink.js";
 import { AccountProfileUnlink } from "../Account/AccountProfileUnlink.js";
 import { ExternalWalletNetworkSelectStep } from "../ExternalWalletNetworkSelectStep/ExternalWalletNetworkSelectStep.js";
-import { AwaitingIFrameStep } from "../AwaitingIFrameStep/AwaitingIFrameStep.js";
+import { AwaitingAccountStep } from "../AwaitingAccountStep/AwaitingAccountStep.js";
 import { Footer } from "../Footer/Footer.js";
 const MIN_HEIGHT = {
   [ModalStep.ADD_FUNDS_AWAITING]: "680px"
@@ -189,8 +189,8 @@ const Body = ({
       case ModalStep.EX_WALLET_NETWORK_SELECT: {
         return /* @__PURE__ */ jsx(ExternalWalletNetworkSelectStep, {});
       }
-      case ModalStep.AWAITING_IFRAME: {
-        return /* @__PURE__ */ jsx(AwaitingIFrameStep, {});
+      case ModalStep.AWAITING_ACCOUNT: {
+        return /* @__PURE__ */ jsx(AwaitingAccountStep, {});
       }
       default: {
         if (IFrameSteps.includes(currentStep)) {

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

@@ -21,6 +21,7 @@ const ExternalWalletMobileConnect = ({
   isSelfFetching = false
 }) => {
   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);
@@ -43,10 +44,28 @@ const ExternalWalletMobileConnect = ({
   useEffect(() => {
     setQrUri(propsQrUri);
   }, [propsQrUri]);
+  const isError = !!(externalWalletError == null ? void 0 : externalWalletError[0]);
   if (wallet.type === "SOLANA" || isMobile() && !isTablet()) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      wallet.type === "SOLANA" && qrUri && /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", color: "error", children: `Continue in the ${wallet.name} mobile app.` }) }),
+      wallet.type === "SOLANA" && qrUri && /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(
+        HeroSpinner,
+        {
+          icon: /* @__PURE__ */ jsx(HeroAccountTypeIcon, { accountType: wallet.internalId, src: wallet ? wallet.iconUrl : void 0 }),
+          status: isError ? "error" : "pending",
+          text: isError ? externalWalletError[0] : `Continue in the ${wallet.name} mobile app.`,
+          secondaryText: externalWalletError == null ? void 0 : externalWalletError[1]
+        }
+      ) }),
       wallet.id !== "WalletConnect" && /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+        /* @__PURE__ */ jsx(
+          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.`,
+            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.hasIosSafariExtension && /* @__PURE__ */ jsx(Link, { href: (_a = wallet.downloadUrl) != null ? _a : "", target: "_blank", children: /* @__PURE__ */ jsxs(ExternalButton, { variant: "secondary", children: [
           `Get ${wallet.name}`,

package/dist/modal/components/ExternalWalletVerificationStep/ExternalWalletVerificationStep.js

@@ -9,7 +9,7 @@ import { useExternalWallets } from "../../../provider/providers/ExternalWalletPr
 import { useEffect, useRef } from "react";
 const ExternalWalletVerificationStep = () => {
   const effectRan = useRef(false);
-  const { verifyWalletSignature } = useExternalWallets();
+  const { verifyWalletSignature, verificationStage } = useExternalWallets();
   const externalWalletError = useModalStore((state) => state.externalWalletError);
   useEffect(() => {
     const hasRun = effectRan.current;
@@ -18,10 +18,13 @@ const ExternalWalletVerificationStep = () => {
       effectRan.current = true;
     }
   }, []);
+  const isVerifying = verificationStage === "verifying";
+  const header = isVerifying ? "Verifying Your Wallet" : "Switching Network";
+  const subheader = isVerifying ? "Sign the message with your wallet to complete sign up." : "Confirm the request to switch the network in your wallet.";
   return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      /* @__PURE__ */ jsx(Heading, { children: "Verify Your Wallet" }),
-      /* @__PURE__ */ jsx(InlineText, { variant: "bodyS", color: "secondary", children: "Sign the message with your wallet to complete sign up." }),
+      /* @__PURE__ */ jsx(Heading, { children: header }),
+      /* @__PURE__ */ jsx(InlineText, { variant: "bodyS", color: "secondary", children: subheader }),
       !!(externalWalletError == null ? void 0 : externalWalletError[0]) && /* @__PURE__ */ jsxs(ErrorContainer, { children: [
         /* @__PURE__ */ jsx(ErrorIcon, { icon: "alertCircle" }),
         /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", color: "error", children: externalWalletError == null ? void 0 : externalWalletError[0] })

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

@@ -42,6 +42,7 @@ const useStepTitle = () => {
       [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",
@@ -69,7 +70,7 @@ const useStepTitle = () => {
       [ModalStep.ACCOUNT_PROFILE_LIST]: "Link Account",
       [ModalStep.ACCOUNT_PROFILE_ADD]: "Link Account",
       [ModalStep.ACCOUNT_PROFILE_REMOVE]: "Unlink Account",
-      [ModalStep.AWAITING_IFRAME]: isLogin ? "Login" : "Sign Up"
+      [ModalStep.AWAITING_ACCOUNT]: isLogin ? "Login" : "Sign Up"
     }),
     [isLogin, chainId, hideWallets, authStepTitle]
   );

package/dist/modal/components/OAuth/FarcasterLink.d.ts

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

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

@@ -0,0 +1,30 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
+import { CenteredText, Heading, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
+import { useModalStore } from "../../stores/index.js";
+import { isMobile } from "@getpara/web-sdk";
+function FarcasterConnectQR() {
+  const farcasterConnectUri = useModalStore((state) => state.farcasterConnectUri);
+  return /* @__PURE__ */ jsx(Fragment, { children: isMobile() ? /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+    /* @__PURE__ */ jsx(CpslText, { weight: "medium", color: "secondary", children: `Don\u2019t have Farcaster` }),
+    /* @__PURE__ */ jsxs(CpslButton, { as: "a", href: "https://link.warpcast.com/download-qr", target: "_blank", variant: "secondary", children: [
+      /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "linkExternal" }),
+      `Get Farcaster`
+    ] })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Heading, { children: "Sign in using Farcaster" }),
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      /* @__PURE__ */ jsx(CenteredText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Scan the QR code with your phone's camera to proceed." }),
+      /* @__PURE__ */ jsx(QRContainer, { children: !farcasterConnectUri ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: farcasterConnectUri }) })
+    ] })
+  ] }) });
+}
+const FarcasterLink = () => {
+  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: /* @__PURE__ */ jsx(FarcasterConnectQR, {}) });
+};
+export {
+  FarcasterConnectQR,
+  FarcasterLink
+};

package/dist/modal/components/OAuth/FarcasterOAuthStep.d.ts

@@ -1,3 +1 @@
-export declare function FarcasterConnectQR(): import("react/jsx-runtime").JSX.Element;
-declare const FarcasterOAuthStep: () => import("react/jsx-runtime").JSX.Element;
-export default FarcasterOAuthStep;
+export declare function FarcasterOAuthStep(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,31 +1,52 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
-import { CenteredText, Heading, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
-import { useModalStore } from "../../stores/index.js";
-import { isMobile } from "@getpara/web-sdk";
-function FarcasterConnectQR() {
-  const farcasterConnectUri = useModalStore((state) => state.farcasterConnectUri);
-  return /* @__PURE__ */ jsx(Fragment, { children: isMobile() ? /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-    /* @__PURE__ */ jsx(CpslText, { weight: "medium", color: "secondary", children: `Don\u2019t have Farcaster` }),
-    /* @__PURE__ */ jsxs(CpslButton, { as: "a", href: "https://link.warpcast.com/download-qr", target: "_blank", variant: "secondary", children: [
-      /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "linkExternal" }),
-      `Get Farcaster`
-    ] })
-  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Heading, { children: "Sign in using Farcaster" }),
-    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      /* @__PURE__ */ jsx(CenteredText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Scan the QR code with your phone's camera to proceed." }),
-      /* @__PURE__ */ jsx(QRContainer, { children: !farcasterConnectUri ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: farcasterConnectUri }) })
-    ] })
-  ] }) });
+import { jsx, jsxs } from "react/jsx-runtime";
+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";
+function FarcasterOAuthStep() {
+  const { url, isLoaded, setIsLoaded } = useFarcasterLogin({
+    isActive: true
+  });
+  const para = useInternalClient();
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    const handleMessage = (event) => {
+      if (!url) {
+        return;
+      }
+      const portalBase = getPortalBaseURL(para.ctx);
+      if (!event.origin.startsWith(portalBase)) {
+        return;
+      }
+      if (event.data) {
+        if (event.data.type === "HEIGHT") {
+          setHeight(event.data.height);
+        }
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => 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) }),
+    (!url || !isLoaded) && /* @__PURE__ */ jsx(CpslSpinner, {})
+  ] });
 }
-const FarcasterOAuthStep = () => {
-  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: /* @__PURE__ */ jsx(FarcasterConnectQR, {}) });
-};
-var FarcasterOAuthStep_default = FarcasterOAuthStep;
+const Container = safeStyled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+`;
+const IFrame = safeStyled.iframe`
+  width: 100%;
+  border: none;
+`;
 export {
-  FarcasterConnectQR,
-  FarcasterOAuthStep_default as default
+  FarcasterOAuthStep
 };

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

@@ -16,7 +16,7 @@ const OAuth = ({ methods }) => {
   const isDark = useStore((state) => state.isDarkTheme);
   const setStep = useModalStore((state) => state.setStep);
   const showAll = useModalStore((state) => state.step === ModalStep.AUTH_MORE || state.step === ModalStep.AUTH_GUEST_SIGNUP);
-  const { verifyFarcaster, verifyOAuth } = useAuthActions();
+  const { verifyOAuth } = useAuthActions();
   const hasMore = methods.length > HAS_MORE_LENGTH;
   const methodsToShow = showAll || !hasMore ? methods : methods.slice(0, HAS_MORE_LENGTH - 1);
   const handleShowAll = () => {
@@ -25,7 +25,7 @@ const OAuth = ({ methods }) => {
   const handleMethodClick = (method) => () => __async(void 0, null, function* () {
     switch (method) {
       case "FARCASTER":
-        verifyFarcaster();
+        setStep(ModalStep.FARCASTER_OAUTH);
         break;
       case "TELEGRAM":
         setStep(ModalStep.TELEGRAM_OAUTH);

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

@@ -2,30 +2,53 @@
 import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { safeStyled } from "@getpara/react-common";
-import { HeroSpinner } from "@getpara/react-common";
 import { CpslSpinner } from "@getpara/react-components";
 import { useTelegramLogin } from "../../hooks/useTelegramLogin.js";
+import { useEffect, useState } from "react";
 import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
-import { AccountTypeIcon } from "../common.js";
 import { useModalStore } from "../../stores/index.js";
+import { getPortalBaseURL } from "@getpara/web-sdk";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 function TelegramOAuthStep() {
   const { verifyTelegramStatus, verifyTelegram } = useAuthActions();
-  const { url, status, isLoaded, setIsLoaded } = useTelegramLogin({
+  const { url, isLoaded, setIsLoaded } = useTelegramLogin({
     isActive: true,
     status: verifyTelegramStatus,
-    onSubmit: verifyTelegram
+    onSubmit: verifyTelegram,
+    isLinking: false
   });
-  const isError = status === "error", isPending = status === "pending";
+  const refs = useModalStore((state) => state.refs);
+  const para = useInternalClient();
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    const handleMessage = (event) => {
+      if (!url) {
+        return;
+      }
+      const portalBase = getPortalBaseURL(para.ctx, true);
+      if (!event.origin.startsWith(portalBase)) {
+        return;
+      }
+      if (event.data) {
+        if (event.data.type === "HEIGHT") {
+          setHeight(event.data.height);
+        }
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [url]);
   return /* @__PURE__ */ jsxs(Container, { children: [
-    /* @__PURE__ */ jsx(HeroContainer, { children: /* @__PURE__ */ jsx(
-      HeroSpinner,
+    url && /* @__PURE__ */ jsx(
+      IFrame,
       {
-        icon: /* @__PURE__ */ jsx(AccountTypeIcon, { accountType: "TELEGRAM", size: "48px" }),
-        status: isPending ? "pending" : isError ? "error" : "idle",
-        text: isPending ? "Follow the on-screen prompts." : isError ? "Login Failed" : void 0
+        ref: refs.telegramIFrame,
+        style: { display: isLoaded ? "block" : "none", height },
+        src: url,
+        onLoad: () => setIsLoaded(true)
       }
-    ) }),
-    /* @__PURE__ */ jsx(TelegramIFrame, { url, isLoaded, setIsLoaded, isVisible: isLoaded })
+    ),
+    (!url || !isLoaded) && /* @__PURE__ */ jsx(CpslSpinner, {})
   ] });
 }
 function TelegramIFrame({
@@ -56,13 +79,6 @@ const Container = safeStyled.div`
   justify-content: center;
   width: 100%;
 `;
-const HeroContainer = safeStyled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  flex: 1;
-`;
 const IFrame = safeStyled.iframe`
   width: 100%;
   height: 52px;

package/dist/modal/constants/constants.js

@@ -126,7 +126,7 @@ const BODY_MOTION_VARIANTS = {
 const BODY_TRANSITION = {
   duration: 0.2
 };
-const SDK_VERSION = "2.0.0-dev.5";
+const SDK_VERSION = "2.0.0-alpha.50";
 export {
   BODY_MOTION_VARIANTS,
   BODY_TRANSITION,

package/dist/modal/hooks/useFarcasterLogin.d.ts

@@ -0,0 +1,9 @@
+import { MutationStatus } from '@tanstack/react-query';
+export declare const useFarcasterLogin: ({ isActive, }?: {
+    isActive?: boolean;
+}) => {
+    url: string | undefined;
+    isLoaded: boolean;
+    setIsLoaded: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    status: MutationStatus;
+};

package/dist/modal/hooks/useFarcasterLogin.js

@@ -0,0 +1,70 @@
+"use client";
+import {
+  __async
+} from "../../chunk-MMUBH76A.js";
+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";
+const useFarcasterLogin = ({
+  isActive = false
+} = {}) => {
+  const para = useInternalClient();
+  const refs = useModalStore((state) => state.refs);
+  const { verifyFarcasterStatus, verifyFarcaster } = useAuthActions();
+  const [url, setUrl] = useState();
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [msgStatus, setMsgStatus] = useState("idle");
+  const status = msgStatus === "success" ? verifyFarcasterStatus : msgStatus;
+  useEffect(() => {
+    const setup = () => __async(void 0, null, function* () {
+      if (!url) {
+        yield para.logout();
+        yield para.touchSession(true);
+        para.constructPortalUrl("loginFarcaster").then(setUrl);
+      }
+    });
+    if (isActive) {
+      setup();
+    }
+  }, [isActive, url]);
+  useEffect(() => {
+    const updateState = (event) => __async(void 0, null, function* () {
+      var _a, _b;
+      switch (event.data.type) {
+        case "FARCASTER_LOGIN":
+          setMsgStatus("pending");
+          break;
+        case "FARCASTER_FAILED":
+          setMsgStatus("error");
+          break;
+        case "FARCASTER_SUCCESS":
+          setMsgStatus("success");
+          if (!!event.data.payload) {
+            const authObject = event.data.payload;
+            try {
+              yield verifyFarcaster(authObject);
+            } catch (e) {
+              (_b = (_a = refs.telegramIFrame.current) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.postMessage({ type: "FARCASTER_RETRY" }, "*");
+            }
+          }
+          break;
+      }
+    });
+    if (isActive) {
+      window == null ? void 0 : window.addEventListener("message", updateState, false);
+    }
+    return () => {
+      window == null ? void 0 : window.removeEventListener("message", updateState, false);
+    };
+  }, [isActive]);
+  return {
+    url,
+    isLoaded,
+    setIsLoaded,
+    status
+  };
+};
+export {
+  useFarcasterLogin
+};

package/dist/modal/hooks/useTelegramLogin.d.ts

@@ -1,9 +1,10 @@
-import { TelegramAuthResponse } from '@getpara/user-management-client';
+import { TelegramAuthResponse, VerifyThirdPartyAuth } from '@getpara/user-management-client';
 import { MutationStatus } from '@tanstack/react-query';
-export declare const useTelegramLogin: ({ isActive, onSubmit, status: propsStatus, }?: {
+export declare const useTelegramLogin: ({ isActive, onSubmit, status: propsStatus, isLinking, }?: {
     isActive?: boolean;
-    onSubmit?: (_: TelegramAuthResponse) => void;
+    onSubmit?: (_: VerifyThirdPartyAuth | TelegramAuthResponse) => void;
     status?: MutationStatus;
+    isLinking?: boolean;
 }) => {
     url: string | undefined;
     isLoaded: boolean;

package/dist/modal/hooks/useTelegramLogin.js

@@ -8,7 +8,8 @@ import { useModalStore } from "../stores/index.js";
 const useTelegramLogin = ({
   isActive = false,
   onSubmit,
-  status: propsStatus
+  status: propsStatus,
+  isLinking
 } = {}) => {
   const para = useInternalClient();
   const refs = useModalStore((state) => state.refs);
@@ -17,10 +18,17 @@ const useTelegramLogin = ({
   const [msgStatus, setMsgStatus] = useState("idle");
   const status = msgStatus === "success" ? propsStatus : msgStatus;
   useEffect(() => {
-    if (isActive) {
+    const setup = () => __async(void 0, null, function* () {
       if (!url) {
-        para.constructPortalUrl("telegramLogin").then(setUrl);
+        if (!isLinking) {
+          yield para.logout();
+          yield para.touchSession(true);
+        }
+        para.constructPortalUrl(!isLinking ? "telegramLoginVerify" : "telegramLogin").then(setUrl);
       }
+    });
+    if (isActive) {
+      setup();
     }
   }, [isActive, url]);
   useEffect(() => {

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

@@ -4,6 +4,7 @@ import {
 } from "../../../chunk-MMUBH76A.js";
 import { create } from "zustand";
 import { persist, createJSONStorage } from "zustand/middleware";
+import { PARA_STORAGE_PREFIX } from "@getpara/core-sdk";
 import { ModalStep } from "../../utils/steps.js";
 import { getActions } from "./actions.js";
 import {
@@ -55,7 +56,7 @@ const useModalStore = create()(
     }, DEFAULT_MODAL_STATE), getActions(set, get)),
     {
       version: 1,
-      name: "@PARA/modalState",
+      name: `${PARA_STORAGE_PREFIX}modalState`,
       storage: createJSONStorage(() => localStorage),
       partialize: (state) => ({
         step: state.step,

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

@@ -39,7 +39,8 @@ export declare enum ModalStep {
     ACCOUNT_PROFILE_ADD = "ACCOUNT_PROFILE_ADD",
     ACCOUNT_PROFILE_LIST = "ACCOUNT_PROFILE_LIST",
     ACCOUNT_PROFILE_REMOVE = "ACCOUNT_PROFILE_REMOVE",
-    AWAITING_IFRAME = "AWAITING_IFRAME"
+    AWAITING_ACCOUNT = "AWAITING_ACCOUNT",
+    OTP = "OTP"
 }
 export type ModalStepPropU = keyof typeof ModalStep | ModalStep;
 export type ModalStepPropL = Lowercase<ModalStepPropU>;
@@ -91,7 +92,8 @@ declare enum SignUpModalStep {
     ADD_FUNDS_AWAITING = "ADD_FUNDS_AWAITING",
     ADD_FUNDS_SUCCESS = "ADD_FUNDS_SUCCESS",
     ADD_FUNDS_FAILURE = "ADD_FUNDS_FAILURE",
-    AWAITING_IFRAME = "AWAITING_IFRAME"
+    AWAITING_ACCOUNT = "AWAITING_ACCOUNT",
+    OTP = "OTP"
 }
 export declare const SignUpPreviousStep: {
     [key in SignUpModalStep]: ModalStep | undefined;
@@ -125,7 +127,8 @@ declare enum LoginModalStep {
     ADD_FUNDS_AWAITING = "ADD_FUNDS_AWAITING",
     ADD_FUNDS_SUCCESS = "ADD_FUNDS_SUCCESS",
     ADD_FUNDS_FAILURE = "ADD_FUNDS_FAILURE",
-    AWAITING_IFRAME = "AWAITING_IFRAME"
+    AWAITING_ACCOUNT = "AWAITING_ACCOUNT",
+    OTP = "OTP"
 }
 export declare const LoginPreviousStep: {
     [key in LoginModalStep]: ModalStep | undefined;