@getpara/react-sdk-lite 2.0.0-alpha.53 → 2.0.0-alpha.55

package/dist/modal/ParaModal.js

@@ -27,9 +27,9 @@ import { SDK_VERSION } from "./constants/constants.js";
 defineCustomElements();
 const ParaModal = forwardRef((props, ref) => {
   const storedModalConfig = useStore((state) => state.modalConfig);
-  const openedToStep = useStore((state) => state.openedToStep);
+  const refs = useStore((state) => state.refs);
   const modalContentRef = useRef(null);
-  const refs = useModalStore((state) => state.refs);
+  const modalRefs = useModalStore((state) => state.refs);
   const flow = useModalStore((state) => state.flow);
   const currentStep = useModalStore((state) => state.step);
   const setAuthState = useModalStore((state) => state.setAuthState);
@@ -153,7 +153,7 @@ const ParaModal = forwardRef((props, ref) => {
         break;
       case isAccount:
         setFlow("account");
-        if (!openedToStep.current) {
+        if (!refs.openedToStep.current) {
           setStep(ModalStep.ACCOUNT_MAIN);
         }
         break;
@@ -223,7 +223,7 @@ const ParaModal = forwardRef((props, ref) => {
     updateSelectedWallet();
   }, [para]);
   useEffect(() => {
-    if (bareModal && !isAccountLoading && !isConnected && !["signup", "login"].includes(flow != null ? flow : "") && refs.currentStep.current !== ModalStep.AUTH_MAIN) {
+    if (bareModal && !isAccountLoading && !isConnected && !["signup", "login"].includes(flow != null ? flow : "") && modalRefs.currentStep.current !== ModalStep.AUTH_MAIN) {
       setStep(ModalStep.AUTH_MAIN);
     }
   }, [bareModal, flow, isConnected, isAccountLoading]);
@@ -256,7 +256,7 @@ const ParaModal = forwardRef((props, ref) => {
     setIsModalMounted(true);
   };
   const handleModalExited = () => __async(void 0, null, function* () {
-    openedToStep.current = null;
+    refs.openedToStep.current = null;
     setIsModalMounted(false);
     if (RESET_TO_AUTH_STEPS.includes(currentStep)) {
       resetModalState();

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

@@ -8,9 +8,10 @@ import { OnRampStep, useModalStore } from "../../stores/index.js";
 import { useEffect } from "react";
 import { ModalStep } from "../../utils/steps.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useAccount, useWalletBalance } from "../../../provider/index.js";
+import { useAccount } from "../../../provider/index.js";
 import { EnabledFlow } from "@getpara/web-sdk";
 import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
+import { useAssets } from "../../../provider/providers/AssetsProvider.js";
 import { AccountHeader } from "./AccountHeader.js";
 const Account = () => {
   const onRampConfig = useModalStore((state) => state.onRampConfig);
@@ -19,8 +20,8 @@ const Account = () => {
   const setOnRampStep = useModalStore((state) => state.setOnRampStep);
   const para = useInternalClient();
   const { embedded } = useAccount();
-  const { data: balance } = useWalletBalance();
   const { isEnabled } = useAccountLinking();
+  const { profileBalance } = useAssets();
   const isGuestMode = embedded.isConnected && embedded.isGuestMode;
   const cantBuyAndWithdraw = (para.externalWalletConnectionType === "CONNECTION_ONLY" || para.externalWalletConnectionType === "VERIFICATION") && !para.userId;
   const isOnRampLoaded = !!onRampConfig;
@@ -56,7 +57,7 @@ const Account = () => {
     /* @__PURE__ */ jsx(AccountHeader, { withBalance: true }),
     /* @__PURE__ */ jsxs(LowerContainer, { children: [
       isGuestMode && /* @__PURE__ */ jsxs(Fragment, { children: [
-        balance && parseFloat(balance) > 0 && /* @__PURE__ */ jsxs(Alert, { children: [
+        profileBalance && profileBalance.value && profileBalance.value.value > 0 && /* @__PURE__ */ jsxs(Alert, { children: [
           /* @__PURE__ */ jsx(CpslIcon, { icon: "alertTriangle", size: "24px", style: { color: "var(--cpsl-color-utility-yellow)" } }),
           "You've funded this account - complete account setup to maintain access."
         ] }),

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

@@ -2,32 +2,26 @@
 import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { getExternalWalletIcon, safeStyled } from "@getpara/react-common";
-import { formatBalanceString } from "../../utils/stringFormatters.js";
 import { CpslIcon, CpslText } from "@getpara/react-components";
 import { useMemo } from "react";
 import { truncateAddress } from "@getpara/web-sdk";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useAccount, useWallet, useWalletBalance } from "../../../provider/index.js";
+import { useAssets } from "../../../provider/providers/AssetsProvider.js";
+import { useAccount } from "../../../provider/index.js";
 import { WalletSelect } from "../WalletSelect/WalletSelect.js";
-const Balance = () => {
-  const { data: balance } = useWalletBalance();
-  return /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", weight: "medium", style: { visibility: !!balance ? "visible" : "hidden" }, children: balance ? formatBalanceString(balance) : "0" });
-};
 const AccountHeader = ({ withBalance = false } = {}) => {
   const para = useInternalClient();
   const { connectionType } = useAccount();
-  const { data: activeWallet } = useWallet();
+  const { profileBalance, totalBalance } = useAssets();
+  const externalWallet = Object.keys(para == null ? void 0 : para.externalWallets).length > 0 ? Object.values(para.externalWallets)[0] : void 0;
   const { name, icon, src } = useMemo(() => {
     var _a;
     let name2, icon2, src2;
     switch (true) {
-      case (activeWallet == null ? void 0 : activeWallet.isExternal):
-        {
-          const wallet = Object.values(para.externalWallets)[0];
-          name2 = (_a = wallet.ensName) != null ? _a : truncateAddress(wallet.address, wallet.type, { prefix: para.cosmosPrefix });
-          src2 = wallet.ensAvatar;
-          icon2 = getExternalWalletIcon(wallet.externalProviderId);
-        }
+      case !!externalWallet:
+        name2 = (_a = externalWallet.ensName) != null ? _a : truncateAddress(externalWallet.address, externalWallet.type, { prefix: para.cosmosPrefix });
+        src2 = externalWallet.ensAvatar;
+        icon2 = getExternalWalletIcon(externalWallet.externalProviderId);
         break;
       default:
         name2 = `${para.partnerName} Wallet`;
@@ -36,7 +30,7 @@ const AccountHeader = ({ withBalance = false } = {}) => {
         break;
     }
     return { name: name2, icon: icon2, src: src2 };
-  }, [activeWallet, para.partnerName, para.partnerLogo, para.externalWallets]);
+  }, [para.partnerName, para.partnerLogo, externalWallet]);
   return /* @__PURE__ */ jsxs(AccountContainer, { children: [
     /* @__PURE__ */ jsx(
       CpslIcon,
@@ -51,7 +45,7 @@ const AccountHeader = ({ withBalance = false } = {}) => {
       }
     ),
     connectionType === "both" ? /* @__PURE__ */ jsx(WalletSelect, {}) : /* @__PURE__ */ jsx(CpslText, { variant: "headingXS", weight: "semiBold", color: "contrast", children: name }),
-    withBalance && /* @__PURE__ */ jsx(Balance, {})
+    withBalance && typeof totalBalance === "string" && totalBalance !== "" && /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", weight: "medium", style: { visibility: profileBalance ? "visible" : "hidden" }, children: totalBalance })
   ] });
 };
 const AccountContainer = safeStyled.div`

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

@@ -9,21 +9,47 @@ import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
 import { useAccount, useClient } from "../../../provider/index.js";
 import { useLinkedAccounts } from "../../../provider/hooks/index.js";
 import { getWalletDisplayName } from "../../utils/getWalletDisplayName.js";
-import { truncateAddress } from "@getpara/web-sdk";
+import {
+  formatAssetQuantity,
+  formatCurrency,
+  truncateAddress
+} from "@getpara/web-sdk";
 import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
+import { useMemo } from "react";
 import { ACCOUNT_TYPES, safeStyled, useCopyToClipboard } from "@getpara/react-common";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 import { useStore } from "../../../provider/stores/useStore.js";
 import { AccountHeader } from "./AccountHeader.js";
+import { useAssets } from "../../../provider/providers/AssetsProvider.js";
 const Entry = ({
   identifier,
   icon,
   name,
   address,
   addressShort,
+  balance: walletBalance,
   onUnlink
 }) => {
+  const balancesConfig = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.balances;
+  });
   const [isCopied, copy] = useCopyToClipboard();
+  const balance = useMemo(() => {
+    var _a;
+    switch (true) {
+      case !balancesConfig:
+      case (balancesConfig == null ? void 0 : balancesConfig.displayType) === "AGGREGATED":
+        return formatCurrency(walletBalance == null ? void 0 : walletBalance.value);
+      default:
+        return formatAssetQuantity({
+          quantity: (_a = walletBalance == null ? void 0 : walletBalance.assets.find(
+            ({ metadata }) => !!metadata && metadata.symbol === balancesConfig.asset.symbol
+          )) == null ? void 0 : _a.quantity,
+          symbol: balancesConfig.asset.symbol
+        });
+    }
+  }, [balancesConfig, walletBalance]);
   return /* @__PURE__ */ jsxs(EntryContainer, { children: [
     icon,
     /* @__PURE__ */ jsx(EntryDisplayName, { variant: "bodyM", color: "contrast", children: name }),
@@ -43,6 +69,7 @@ const Entry = ({
         }
       )
     ] }) : null }),
+    typeof balance === "string" && balance !== "" && /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "contrast", children: balance }),
     onUnlink && /* @__PURE__ */ jsx(EntryUnlink, { href: "#", onClick: onUnlink, children: "Unlink" })
   ] }, address != null ? address : identifier);
 };
@@ -60,13 +87,14 @@ const AccountProfile = ({
     var _a2;
     return (_a2 = state.modalConfig) == null ? void 0 : _a2.hideWallets;
   });
+  const { profileBalance } = useAssets();
   if (!para) {
     return null;
   }
   const externalWallet = (_a = para.authInfo) == null ? void 0 : _a.externalWallet;
   return /* @__PURE__ */ jsxs(StepContainer, { children: [
-    /* @__PURE__ */ jsx(AccountHeader, {}),
-    /* @__PURE__ */ jsxs(ParaConnect, { target: "_blank", href: "https://connect.getpara.com", rel: "noreferrer noopener", children: [
+    /* @__PURE__ */ jsx(AccountHeader, { withBalance: true }),
+    connectionType !== "external" && /* @__PURE__ */ jsxs(ParaConnect, { target: "_blank", href: "https://connect.getpara.com", rel: "noreferrer noopener", children: [
       /* @__PURE__ */ jsx(ParaIcon, { icon: "paraIconBrand", size: "40px", inset: "8px", background: "white" }),
       /* @__PURE__ */ jsxs("div", { children: [
         "Do even more with your wallet",
@@ -106,7 +134,8 @@ const AccountProfile = ({
           icon: /* @__PURE__ */ jsx(WalletTypeIcon, { walletType: wallet.type, externalWallet: wallet.externalProviderId, size: "24px" }),
           name: getWalletDisplayName(para, wallet),
           address: wallet.address,
-          addressShort: truncateAddress(wallet.address, wallet.type)
+          addressShort: truncateAddress(wallet.address, wallet.type),
+          balance: profileBalance == null ? void 0 : profileBalance.wallets.find((w) => w.address === wallet.address)
         },
         wallet.address
       )) })

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

@@ -6,7 +6,7 @@ import {
 } from "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as comp from "@getpara/react-components";
-import { getOnRampNetworks } from "@getpara/web-sdk";
+import { formatCurrency, getOnRampNetworks } from "@getpara/web-sdk";
 import { safeStyled } from "@getpara/react-common";
 import { getAssetCode, getAssetName, ON_RAMP_ASSETS } from "../../constants/constants.js";
 import { useModalStore } from "../../stores/index.js";
@@ -16,10 +16,12 @@ import { useWallet } from "../../../provider/hooks/queries/useWallet.js";
 import { AssetIcon, GradientScroll } from "../common.js";
 import { AnimatePresence, motion } from "framer-motion";
 import { contentMotionProps } from "./common.js";
+import { useAssets } from "../../../provider/providers/AssetsProvider.js";
 function AddFundsAsset() {
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const { assets, setAsset, network, setNetwork } = useAddFunds();
   const { data: activeWallet } = useWallet();
+  const { assetMetadata } = useAssets();
   const [searchStr, setSearchStr] = useState("");
   const onSelect = (_asset) => __async(this, null, function* () {
     yield setAsset(_asset);
@@ -59,7 +61,8 @@ function AddFundsAsset() {
           /* @__PURE__ */ jsxs(Info, { children: [
             /* @__PURE__ */ jsx(Code, { color: "contrast", variant: "bodyL", children: ON_RAMP_ASSETS[asset].code }),
             /* @__PURE__ */ jsx(Name, { color: "contrast", variant: "bodyS", children: ON_RAMP_ASSETS[asset].name })
-          ] })
+          ] }),
+          (assetMetadata == null ? void 0 : assetMetadata[asset]) && /* @__PURE__ */ jsx(comp.CpslText, { variant: "bodyM", children: formatCurrency(assetMetadata[asset].price) })
         ] }, asset)
       },
       asset

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";
 import { renderTextWithLinks } from "../../utils/renderTextWithLinks.js";
 const MIN_HEIGHT = {
@@ -192,8 +192,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/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-alpha.53";
+const SDK_VERSION = "2.0.0-alpha.55";
 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;
+};