@getpara/react-sdk-lite 2.0.0-alpha.39 → 2.0.0-alpha.40

package/dist/modal/components/Controls/ChainSelect.js

@@ -0,0 +1,88 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CpslText } from "@getpara/react-components";
+import { getNetworkFromChainId, safeStyled } from "@getpara/react-common";
+import { useEffect, useRef } from "react";
+import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
+import { useWallet } from "../../../provider/index.js";
+import { HeaderSelect, HeaderSelectContainer, HeaderSelectItem, NetworkIcon } from "../common.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+import { getNetworkName } from "../../constants/constants.js";
+const Chain = ({ chainId, slot, isLarge = false }) => {
+  const network = getNetworkFromChainId(chainId);
+  const name = getNetworkName(network);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      slot,
+      style: { display: "flex", alignItems: "center", gap: "4px", padding: isLarge ? "0px" : "4px 0 4px 8px" },
+      children: [
+        /* @__PURE__ */ jsx(NetworkIcon, { network, size: isLarge ? "24px" : "16px" }),
+        /* @__PURE__ */ jsx(ChainName, { variant: isLarge ? "bodyS" : "bodyXS", color: "contrast", children: name })
+      ]
+    }
+  );
+};
+const ChainSelect = () => {
+  var _a;
+  const containerRef = useRef(null);
+  const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
+  const { data: activeWallet } = useWallet();
+  const { switchChain, chainId, chains, chainIdSwitchingTo } = useExternalWallets();
+  useEffect(() => {
+    if (dropdownMaxHeight && chainId) {
+      resize();
+    }
+  }, [chainId, chainIdSwitchingTo, dropdownMaxHeight]);
+  const handleChainChange = (chainId2) => __async(void 0, null, function* () {
+    yield switchChain(chainId2);
+  });
+  if (!activeWallet || !activeWallet.isExternal || activeWallet.type === "SOLANA") {
+    return null;
+  }
+  const chainIdToUse = chainIdSwitchingTo != null ? chainIdSwitchingTo : chainId;
+  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(HeaderSelectContainer, { ref: containerRef, id: "inputContainer", children: /* @__PURE__ */ jsxs(
+    HeaderSelect,
+    {
+      selectedValue: (_a = chainIdToUse == null ? void 0 : chainIdToUse.toString()) != null ? _a : "",
+      onCpslSelectValueChange: (e) => {
+        handleChainChange(e.detail);
+      },
+      showFormattedSelectedItem: true,
+      placeholder: "Choose chain...",
+      anchorElId: "inputContainer",
+      dropdownMaxHeight,
+      $width: dropdownWidth != null ? dropdownWidth : 0,
+      $top: (mobileAnchor != null ? mobileAnchor : 0) + 16 + 1,
+      autoWidth: true,
+      alignCenter: true,
+      selectedItemVariant: "bodyXS",
+      children: [
+        chainIdToUse && /* @__PURE__ */ jsx(Chain, { slot: "selected-item", chainId: chainIdToUse }),
+        chains == null ? void 0 : chains.map((chain) => /* @__PURE__ */ jsx(HeaderSelectItem, { slot: "items", value: chain.id.toString(), children: /* @__PURE__ */ jsx(Chain, { isLarge: true, chainId: chain.id.toString() }) }, chain.id))
+      ]
+    }
+  ) }) });
+};
+const Container = safeStyled.div`
+  flex: 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`;
+const ChainName = safeStyled(CpslText)`
+  max-width: 150px;
+  text-transform: capitalize;
+
+  &::part(text-element) {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+`;
+export {
+  ChainSelect
+};

package/dist/modal/components/Controls/Controls.js

@@ -5,27 +5,18 @@ import { CpslIcon } from "@getpara/react-components";
 import { safeStyled } from "@getpara/react-common";
 import { useModalStore } from "../../stores/index.js";
 import { useGoBack } from "../../hooks/useGoBack.js";
-import { AccountSelect, ChainSelect } from "./Selects.js";
-import { ModalStep } from "../../utils/steps.js";
+import { ChainSelect } from "./ChainSelect.js";
 import { HeaderButton } from "@getpara/react-common";
 import { useStore } from "../../../provider/stores/useStore.js";
-import { useAccount } from "../../../provider/index.js";
+import { useStepTitle } from "../Header/hooks/useStepTitle.js";
 const Controls = ({ onClose }) => {
   const bareModal = useStore((state) => {
     var _a;
     return (_a = state.modalConfig) == null ? void 0 : _a.bareModal;
   });
   const hasPreviousStep = useModalStore((state) => state.hasPreviousStep());
-  const step = useModalStore((state) => state.step);
   const goBack = useGoBack();
-  const { isConnected } = useAccount();
-  const shouldShowSelects = [
-    ModalStep.ACCOUNT_MAIN,
-    ModalStep.CHAIN_SWITCH,
-    ModalStep.ADD_FUNDS_BUY,
-    ModalStep.ADD_FUNDS_RECEIVE,
-    ModalStep.ADD_FUNDS_WITHDRAW
-  ].includes(step);
+  const { isControls } = useStepTitle();
   const handleBackClick = () => {
     goBack();
   };
@@ -41,27 +32,26 @@ const Controls = ({ onClose }) => {
         children: /* @__PURE__ */ jsx(CpslIcon, { icon: "arrow" })
       }
     ),
-    /* @__PURE__ */ jsx(MiddleContainer, { children: shouldShowSelects && isConnected && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(ChainSelect, {}),
-      /* @__PURE__ */ jsx(AccountSelect, {})
-    ] }) }),
+    /* @__PURE__ */ jsx(MiddleContainer, { children: isControls && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ChainSelect, {}) }) }),
     /* @__PURE__ */ jsx(CloseButton, { bareModal, variant: "ghost", onClick: onClose, children: /* @__PURE__ */ jsx(CpslIcon, { icon: "close" }) })
   ] });
 };
 const Container = safeStyled.div`
   position: absolute;
-  width: 100%;
-  top: 16px;
-
+  height: 24px;
+  top: 0;
+  left: -24px;
+  right: -24px;
+  margin: 0 16px;
   z-index: 3;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
 `;
 const MiddleContainer = safeStyled.div`
   flex: 1;
   display: flex;
+  width: 100%;
   align-items: center;
   justify-content: center;
   gap: 4px;

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

@@ -4,10 +4,10 @@ import {
 } from "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
-import { CenteredText, ErrorContainer, ErrorIcon, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
+import { CenteredText, HeroAccountTypeIcon, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
 import { useEffect, useMemo, useState } from "react";
 import { useModalStore } from "../../stores/index.js";
-import { safeStyled } from "@getpara/react-common";
+import { HeroSpinner, safeStyled } from "@getpara/react-common";
 import { useCopyToClipboard } from "@getpara/react-common";
 import { ModalStep } from "../../utils/steps.js";
 import { isMobile, isTablet } from "@getpara/web-sdk";
@@ -24,7 +24,7 @@ const ExternalWalletMobileConnect = ({
   const [isCopied, copy] = useCopyToClipboard();
   const appName = useStore((state) => state.appName);
   const [qrUri, setQrUri] = useState(isSelfFetching ? void 0 : propsQrUri);
-  const isWalletConnect = wallet.id === "walletConnect";
+  const isWalletConnect = wallet.id === "WalletConnect";
   const handleCopy = () => {
     if (qrUri) {
       copy(qrUri);
@@ -46,7 +46,7 @@ const ExternalWalletMobileConnect = ({
   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.id !== "walletConnect" && /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      wallet.id !== "WalletConnect" && /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
         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}`,
@@ -55,7 +55,7 @@ const ExternalWalletMobileConnect = ({
       ] })
     ] });
   }
-  const GetWalletButton = /* @__PURE__ */ jsxs(ExternalButton, { variant: "secondary", onClick: isWalletConnect ? onConnectWc : void 0, children: [
+  const GetWalletButton = /* @__PURE__ */ jsxs(ExternalButton, { variant: "secondary", onClick: isWalletConnect ? () => onConnectWc(wallet) : void 0, children: [
     `${isWalletConnect ? "Open" : "Get"} ${wallet.name}`,
     /* @__PURE__ */ jsx(ExternalIcon, { icon: "linkExternal" })
   ] });
@@ -88,7 +88,7 @@ const ExternalWalletStep = () => {
     if (!wallet) {
       return null;
     }
-    const isWalletConnect = wallet.id === "walletConnect";
+    const isWalletConnect = wallet.id === "WalletConnect";
     const isMobileWalletConnect = isMobile() && isWalletConnect;
     if (isMobileWalletConnect) {
       /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(Text, { weight: "semiBold", children: "Continue in the WalletConnect modal." }) });
@@ -101,12 +101,17 @@ Please choose another wallet or continue on desktop.` }) });
     }
     if (showExtension) {
       const isInstalled = wallet.installed;
+      const isError = !isInstalled || (externalWalletError == null ? void 0 : externalWalletError.length);
       return /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-        isInstalled && !(externalWalletError == null ? void 0 : externalWalletError.length) ? /* @__PURE__ */ jsx(CenteredText, { color: "contrast", weight: "semiBold", children: `Confirm connection request in the ${wallet.name} browser extension.` }) : /* @__PURE__ */ jsxs(ErrorContainer, { children: [
-          /* @__PURE__ */ jsx(ErrorIcon, { icon: "alertCircle" }),
-          /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", color: "error", children: isInstalled ? externalWalletError == null ? void 0 : externalWalletError[0] : `${wallet.name} not detected` })
-        ] }),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
+          HeroSpinner,
+          {
+            icon: /* @__PURE__ */ jsx(HeroAccountTypeIcon, { accountType: wallet.internalId, src: wallet ? wallet.iconUrl : void 0 }),
+            status: isError ? "error" : "pending",
+            text: isError ? isInstalled ? externalWalletError == null ? void 0 : externalWalletError[0] : `${wallet.name} not detected` : `Confirm connection request in the ${wallet.name} browser extension.`
+          }
+        ),
+        isError && /* @__PURE__ */ jsxs(
           CpslButton,
           {
             as: isInstalled ? "button" : "a",
@@ -115,7 +120,7 @@ Please choose another wallet or continue on desktop.` }) });
             variant: "secondary",
             onClick: handleTryAgainClick,
             children: [
-              /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: isInstalled ? "refresh" : "linkExternal" }),
+              /* @__PURE__ */ jsx(CpslIcon, { fullWidth: true, slot: "start", icon: isInstalled ? "refresh" : "linkExternal" }),
               isInstalled ? "Try Again" : `Get ${wallet.name}`
             ]
           }

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

@@ -20,7 +20,7 @@ const ExternalWalletVerificationStep = () => {
   }, []);
   return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: "Verify Your Wallet" }),
+      /* @__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." }),
       !!(externalWalletError == null ? void 0 : externalWalletError[0]) && /* @__PURE__ */ jsxs(ErrorContainer, { children: [
         /* @__PURE__ */ jsx(ErrorIcon, { icon: "alertCircle" }),

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

@@ -1,58 +1,40 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { safeStyled } from "@getpara/react-common";
-import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
+import { CpslIcon, CpslText } from "@getpara/react-components";
+import { PARA_TERMS_AND_CONDITIONS } from "../../constants/constants.js";
 import { useModalStore } from "../../stores/index.js";
-import { PARA_CONNECT, PARA_TERMS_AND_CONDITIONS } from "../../constants/constants.js";
-import { useMemo } from "react";
-import { getStepHasFooter } from "../../utils/steps.js";
+import { ModalStep } from "../../utils/steps.js";
 import { useAccount } from "../../../provider/index.js";
 const Footer = () => {
-  const { embedded } = useAccount();
+  const { isConnected } = useAccount();
   const currentStep = useModalStore((state) => state.step);
-  const accountFooter = (embedded == null ? void 0 : embedded.isConnected) && !embedded.isGuestMode;
-  const showFooter = accountFooter || getStepHasFooter(currentStep);
-  const Content = useMemo(() => {
-    if (accountFooter) {
-      return /* @__PURE__ */ jsxs(ConnectContainer, { children: [
-        /* @__PURE__ */ jsxs(ConnectText, { variant: "bodyS", color: "secondary", weight: "medium", children: [
-          "Access all your wallet\u2019s features at",
-          " ",
-          /* @__PURE__ */ jsx("a", { href: PARA_CONNECT, target: "blank", children: /* @__PURE__ */ jsx(ClickableText, { variant: "bodyS", weight: "medium", children: "Para Connect" }) })
-        ] }),
-        /* @__PURE__ */ jsx(CpslButton, { as: "a", href: PARA_CONNECT, target: "blank", variant: "ghost", children: /* @__PURE__ */ jsx(RightChevron, { icon: "chevronUp" }) })
-      ] });
-    }
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(InlineText, { variant: "body2XS", color: "secondary", weight: "medium", children: [
-        "By logging in you agree to our",
-        " ",
-        /* @__PURE__ */ jsx("a", { href: PARA_TERMS_AND_CONDITIONS, target: "blank", children: /* @__PURE__ */ jsx(ClickableText, { variant: "body2XS", weight: "medium", children: "Terms & Conditions" }) })
-      ] }),
-      /* @__PURE__ */ jsxs(PoweredByContainer, { children: [
-        /* @__PURE__ */ jsx(InlineText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Powered by" }),
-        /* @__PURE__ */ jsx(ParaLogo, { icon: "para" })
-      ] })
-    ] });
-  }, [embedded]);
+  const showFooter = !isConnected && [
+    ModalStep.AUTH_MAIN,
+    ModalStep.AUTH_MORE,
+    ModalStep.EX_WALLET_NETWORK_SELECT,
+    ModalStep.EX_WALLET_MORE,
+    ModalStep.EX_WALLET_SELECTED
+  ].includes(currentStep);
   if (!showFooter) {
     return null;
   }
-  return /* @__PURE__ */ jsx(FooterContainer, { slot: "footer", children: /* @__PURE__ */ jsx(FooterContentContainer, { children: Content }) });
+  return /* @__PURE__ */ jsxs(FooterContainer, { children: [
+    /* @__PURE__ */ jsxs(InlineText, { variant: "body2XS", color: "secondary", weight: "medium", children: [
+      "By logging in you agree to our",
+      " ",
+      /* @__PURE__ */ jsx("a", { href: PARA_TERMS_AND_CONDITIONS, target: "blank", children: /* @__PURE__ */ jsx(ClickableText, { variant: "body2XS", weight: "medium", children: "Terms & Conditions" }) })
+    ] }),
+    /* @__PURE__ */ jsx(PoweredByContainer, { children: /* @__PURE__ */ jsx(ParaLogo, { icon: "para" }) })
+  ] });
 };
 const FooterContainer = safeStyled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  padding: 8px 0px;
-`;
-const FooterContentContainer = safeStyled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
+  margin-top: 16px;
 `;
 const PoweredByContainer = safeStyled.div`
   display: flex;
@@ -60,34 +42,21 @@ const PoweredByContainer = safeStyled.div`
   align-items: center;
   justify-content: center;
 `;
-const ConnectContainer = safeStyled.div`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  justify-content: center;
-`;
-const RightChevron = safeStyled(CpslIcon)`
-  transform: rotate(90deg);
-
-  /* --icon-color: var(--cpsl-color-text-tertiary); */
-  --height: 24px;
-  --width: 24px;
-`;
 const InlineText = safeStyled(CpslText)`
   text-align: center;
   display: inline-block;
 `;
-const ConnectText = safeStyled(InlineText)`
-  line-height: 20px;
-`;
 const ClickableText = safeStyled(InlineText)`
   cursor: pointer;
   display: inline-block;
+
+  &:hover {
+    text-decoration: underline;}
 `;
 const ParaLogo = safeStyled(CpslIcon)`
   display: inline-block;
-  --icon-color: var(--cpsl-color-text-secondary);
-  --width: 49px;
+  --icon-color: var(--cpsl-color-text-contrast);
+  --width: 46px;
   --height: auto;
 `;
 export {

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

@@ -1,19 +1,45 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
-import { jsx } from "react/jsx-runtime";
-import { safeStyled } from "@getpara/react-common";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getAuthDisplay, safeStyled } from "@getpara/react-common";
 import { useStepTitle } from "./hooks/useStepTitle.js";
 import { CenteredText } from "../common.js";
 import { AnimatePresence, motion } from "framer-motion";
 import { useModalStore } from "../../stores/index.js";
 import { BODY_MOTION_VARIANTS, BODY_TRANSITION } from "../../constants/constants.js";
+import { useAccount } from "../../../provider/index.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { CpslIcon, CpslText } from "@getpara/react-components";
+import { ModalStep } from "../../utils/steps.js";
+import { useMemo } from "react";
+const StepTitle = () => {
+  const para = useInternalClient();
+  const currentStep = useModalStore((state) => state.step);
+  const { title, isTitleDisplayed } = useStepTitle();
+  const { isConnected, connectionType } = useAccount();
+  const content = useMemo(() => {
+    if (!isTitleDisplayed) {
+      return null;
+    }
+    if ((para == null ? void 0 : para.authInfo) && connectionType !== "external" && currentStep === ModalStep.ACCOUNT_MAIN) {
+      const { name, icon, src } = getAuthDisplay(para.authInfo);
+      return /* @__PURE__ */ jsxs(AuthDisplay, { children: [
+        /* @__PURE__ */ jsx(CpslIcon, { src, icon, size: "14px", rounded: !!src }),
+        /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "contrast", weight: "medium", children: name })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(CenteredText, { weight: "semiBold", color: "secondary", children: title });
+  }, [isTitleDisplayed, para, currentStep, isConnected, connectionType, title]);
+  return /* @__PURE__ */ jsx("div", { style: { height: "100%", width: "100%" }, children: content });
+};
 const Header = () => {
-  const { title } = useStepTitle();
+  const { isControls } = useStepTitle();
   const stepDirection = useModalStore((state) => state.stepDirection);
   const currentStep = useModalStore((state) => state.step);
   return /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: stepDirection, children: /* @__PURE__ */ jsx(
     Container,
     {
+      isVisible: !isControls,
       custom: stepDirection,
       variants: BODY_MOTION_VARIANTS,
       initial: "enter",
@@ -22,21 +48,33 @@ const Header = () => {
       transition: BODY_TRANSITION,
       slot: "header",
       id: "header",
-      children: /* @__PURE__ */ jsx(CenteredText, { weight: "semiBold", color: "secondary", children: title })
+      children: /* @__PURE__ */ jsx(StepTitle, {})
     },
     ["ADD_FUNDS_BUY", "ADD_FUNDS_RECEIVE", "ADD_FUNDS_WITHDRAW"].includes(currentStep) ? "ADD_FUNDS" : currentStep
   ) });
 };
 const Container = safeStyled(motion.div)`
-  position: absolute;
-  top: 16px;
-  width: 100%;
-  z-index: 2;
+  margin: 0 16px;
+  z-index: 4;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   flex-wrap: wrap;
+  height: 24px;
+  visibility: ${({ isVisible }) => isVisible ? "visible" : "hidden"};
+`;
+const AuthDisplay = safeStyled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  height: 100%;
+
+  cpsl-icon {
+    --icon-color: var(--cpsl-color-text-contrast);
+  }
 `;
 export {
   Header

package/dist/modal/components/Header/hooks/useStepTitle.d.ts

@@ -1,3 +1,7 @@
+export declare const signUpOrLogInTitle = "Sign Up or Login";
+export declare const connectWalletTitle = "Connect Wallet";
 export declare const useStepTitle: () => {
     title: any;
+    isTitleDisplayed: boolean;
+    isControls: boolean;
 };

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

@@ -6,24 +6,42 @@ import { ModalStep } from "../../../utils/steps.js";
 import { useExternalWallets } from "../../../../provider/providers/ExternalWalletProvider.js";
 import { useStore } from "../../../../provider/stores/useStore.js";
 import { useAccountLinking } from "../../../../provider/providers/AccountLinkProvider.js";
+import { useAccount } from "../../../../provider/index.js";
+const signUpOrLogInTitle = "Sign Up or Login";
+const connectWalletTitle = "Connect Wallet";
 const useStepTitle = () => {
+  var _a, _b;
+  const logo = useStore((state) => {
+    var _a2;
+    return (_a2 = state.modalConfig) == null ? void 0 : _a2.logo;
+  });
   const hideWallets = useStore((state) => {
-    var _a;
-    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
+    var _a2;
+    return (_a2 = state.modalConfig) == null ? void 0 : _a2.hideWallets;
   });
   const isLogin = useModalStore((state) => state.isLogin());
   const currentStep = useModalStore((state) => state.step);
+  const authLayout = useModalStore((state) => state.authLayout) || [];
+  const { connectionType } = useAccount();
+  const [isAuthFirst, isAuthCondensed, isExternalFirst, isExternalCondensed, isBothCondensed] = [
+    (_a = authLayout[0]) == null ? void 0 : _a.includes("AUTH"),
+    authLayout.includes("AUTH:CONDENSED"),
+    (_b = authLayout[0]) == null ? void 0 : _b.includes("EXTERNAL"),
+    authLayout.includes("EXTERNAL:CONDENSED"),
+    authLayout.includes("AUTH:CONDENSED") && authLayout.includes("EXTERNAL:CONDENSED")
+  ];
+  const authStepTitle = isBothCondensed ? null : isAuthFirst && !isAuthCondensed ? signUpOrLogInTitle : isExternalFirst && !isExternalCondensed ? connectWalletTitle : "";
   const { chainId } = useExternalWallets();
   const { isEnabled: isAccountLinkingEnabled } = useAccountLinking();
   const titles = useMemo(
     () => ({
-      [ModalStep.AUTH_MAIN]: "",
-      [ModalStep.AUTH_MORE]: "Sign Up or Log In",
+      [ModalStep.AUTH_MAIN]: authStepTitle,
+      [ModalStep.AUTH_MORE]: signUpOrLogInTitle,
       [ModalStep.AUTH_GUEST_SIGNUP]: "Complete Account Setup",
-      [ModalStep.EX_WALLET_MORE]: "Connect Wallet",
+      [ModalStep.EX_WALLET_MORE]: connectWalletTitle,
       [ModalStep.VERIFICATIONS]: "Sign Up",
-      [ModalStep.AWAITING_OAUTH]: isLogin ? "Login" : "Sign Up",
-      [ModalStep.FARCASTER_OAUTH]: isLogin ? "Login" : "Sign Up",
+      [ModalStep.AWAITING_OAUTH]: signUpOrLogInTitle,
+      [ModalStep.FARCASTER_OAUTH]: signUpOrLogInTitle,
       [ModalStep.BIOMETRIC_CREATION]: "Sign Up",
       [ModalStep.PASSWORD_CREATION]: "Sign Up",
       [ModalStep.AWAITING_BIOMETRIC_CREATION]: "Sign Up",
@@ -39,12 +57,12 @@ const useStepTitle = () => {
       [ModalStep.SETUP_2FA]: "2FA",
       [ModalStep.VERIFY_2FA]: "2FA",
       [ModalStep.TWO_FACTOR_DONE]: "2FA",
-      [ModalStep.ADD_FUNDS_BUY]: "",
-      [ModalStep.ADD_FUNDS_RECEIVE]: "",
-      [ModalStep.ADD_FUNDS_WITHDRAW]: "",
-      [ModalStep.ADD_FUNDS_AWAITING]: "",
-      [ModalStep.ADD_FUNDS_SUCCESS]: "",
-      [ModalStep.ADD_FUNDS_FAILURE]: "",
+      [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",
@@ -53,10 +71,25 @@ const useStepTitle = () => {
       [ModalStep.ACCOUNT_PROFILE_REMOVE]: "Unlink Account",
       [ModalStep.AWAITING_IFRAME]: isLogin ? "Login" : "Sign Up"
     }),
-    [isLogin, chainId, hideWallets]
+    [isLogin, chainId, hideWallets, authStepTitle]
   );
-  return { title: titles[currentStep] };
+  const title = useMemo(() => {
+    var _a2;
+    if (((_a2 = titles[currentStep]) == null ? void 0 : _a2.length) > 0) {
+      return titles[currentStep];
+    }
+    return null;
+  }, [currentStep, titles]);
+  const isControls = useMemo(() => {
+    return connectionType === "external" && [ModalStep.ACCOUNT_MAIN, ModalStep.CHAIN_SWITCH].includes(currentStep);
+  }, [connectionType, currentStep]);
+  const isTitleDisplayed = useMemo(() => {
+    return !isControls && (currentStep !== ModalStep.AUTH_MAIN || !logo);
+  }, [isControls, currentStep, logo]);
+  return { title, isTitleDisplayed, isControls };
 };
 export {
+  connectWalletTitle,
+  signUpOrLogInTitle,
   useStepTitle
 };

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

@@ -1,7 +1,7 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useModalStore } from "../../stores/index.js";
 import { IFrameSteps } from "../../utils/steps.js";
 import { safeStyled } from "@getpara/react-common";
@@ -21,30 +21,42 @@ const IFrameStep = () => {
     return (_a = state.modalConfig) == null ? void 0 : _a.embeddedModal;
   });
   const para = useInternalClient();
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    if (!IFrameSteps.includes(currentStep)) {
+      setHeight(0);
+    }
+  }, [currentStep]);
   useEffect(() => {
     const handleMessage = (event) => {
+      if (!iFrameUrl) {
+        return;
+      }
       const portalBase = getPortalBaseURL(para.ctx);
       if (!event.origin.startsWith(portalBase)) {
         return;
       }
-      if (event.data && event.data.type === "LOADED") {
-        setIsReady(true);
+      if (event.data) {
+        if (event.data.type === "HEIGHT") {
+          setHeight(event.data.height);
+          setIsReady(true);
+        }
       }
     };
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
-  }, [setIsReady]);
-  return /* @__PURE__ */ jsxs(OuterContainer, { $isVisible: IFrameSteps.includes(currentStep), $embeddedModal: !!embeddedModal, children: [
-    /* @__PURE__ */ jsx(Container, { $isReady: !!isReady, children: /* @__PURE__ */ jsx("iframe", { src: iFrameUrl }) }),
+  }, [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 }) }),
     !isReady && /* @__PURE__ */ jsx(SpinnerContainer, { style: { width: "100%", height: "100%", flex: 1, position: "absolute" }, children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) })
   ] });
 };
 const OuterContainer = safeStyled.div`
   position: relative;
-  height: ${({ $isVisible }) => $isVisible ? "528px" : "0px"};
+  height: ${({ $isVisible, $isReady }) => $isVisible ? $isReady ? "auto" : "200px" : "0px"};
   width: ${({ $isVisible }) => $isVisible ? "100%" : "0px"};
   flex: ${({ $isVisible }) => $isVisible ? 1 : "auto"};
-  padding: ${({ $embeddedModal, $isVisible }) => !$isVisible ? "0px" : $embeddedModal ? "12px 0px 0px" : "72px 72px 32px"};
+  padding: 0px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -54,12 +66,12 @@ const OuterContainer = safeStyled.div`
   }
 `;
 const Container = safeStyled.div`
-  height: 360px;
+  height: ${({ $height }) => $height}px;
   width: 100%;
   opacity: ${({ $isReady }) => $isReady ? 1 : 0};
 
   & > iframe {
-    height: 360px;
+    height: ${({ $height }) => $height}px;
     width: 100%;
     border: none;
     background: transparent;