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

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

@@ -5,17 +5,17 @@ import { useEffect, useState } from "react";
 import { useModalStore } from "../../stores/index.js";
 import { IFrameSteps } from "../../utils/steps.js";
 import { safeStyled } from "@getpara/react-common";
-import { SpinnerContainer } 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 { MOBILE_SIZE } from "../../constants/constants.js";
 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;
@@ -32,22 +32,23 @@ const IFrameStep = () => {
       if (!iFrameUrl) {
         return;
       }
-      const portalBase = getPortalBaseURL(para.ctx);
-      if (!event.origin.startsWith(portalBase)) {
+      if (!validatePortalOrigin(event, para.ctx)) {
         return;
       }
       if (event.data) {
-        if (event.data.type === "HEIGHT") {
-          setHeight(event.data.height);
-          setIsReady(true);
+        if (event.data.type === "HEIGHT" && typeof event.data.height === "number") {
+          setHeight(Math.max(event.data.height, 200));
+          setIsReady(event.data.height > 0 ? true : false);
         }
       }
     };
-    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 }) })
   ] });
 };
@@ -62,7 +63,7 @@ const OuterContainer = safeStyled.div`
   justify-content: center;
 
   @media (max-width: ${MOBILE_SIZE}px) {
-    padding: ${({ $embeddedModal, $isVisible }) => !$isVisible ? "0px" : $embeddedModal ? "12px 0px 0px" : "72px 16px 0px"};
+    padding: ${({ $embeddedModal, $isVisible }) => !$isVisible ? "0px" : $embeddedModal ? "12px 0px 0px" : "0px"};
   }
 `;
 const Container = safeStyled.div`

package/dist/modal/components/LoginDoneStep/LoginDoneStep.js

@@ -30,7 +30,7 @@ const LoginDoneStep = ({ onClose }) => {
     return /* @__PURE__ */ jsx(WalletCard, { id, type, showAddFunds: false }, `${id}-${type}`);
   }, [para.externalWalletConnectionType, para.externalWallets, para.wallets]);
   useEffect(() => {
-    setTimeout(() => {
+    const timerId = setTimeout(() => {
       if (bareModal) {
         setFlow("account");
         setStep(ModalStep.ACCOUNT_MAIN);
@@ -38,6 +38,9 @@ const LoginDoneStep = ({ onClose }) => {
         onClose();
       }
     }, 1600);
+    return () => {
+      clearTimeout(timerId);
+    };
   }, []);
   return /* @__PURE__ */ jsxs(StepContainer, { children: [
     /* @__PURE__ */ jsx(HeroIcon, { icon: "checkCircleFilled" }),

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/OnRampComponents/AddingFunds.js

@@ -3,7 +3,7 @@ import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { OnRampPurchaseStatus } from "@getpara/web-sdk";
 import { SpinnerContainer } from "../common.js";
-import { ON_RAMP_PROVIDERS } from "../../constants/constants.js";
+import { ON_RAMP_PROVIDERS } from "@getpara/react-common";
 import { useModalStore } from "../../stores/index.js";
 import { CpslSpinner, CpslText } from "@getpara/react-components";
 const AddingFunds = () => {

package/dist/modal/components/OnRampComponents/OnRampProviderButton.js

@@ -4,8 +4,7 @@ import {
 } from "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { ON_RAMP_PROVIDERS } from "../../constants/constants.js";
-import { safeStyled } from "@getpara/react-common";
+import { safeStyled, ON_RAMP_PROVIDERS } from "@getpara/react-common";
 import { CpslButton, CpslIcon, CpslSpinner, CpslText } from "@getpara/react-components";
 import { motion } from "framer-motion";
 const OnRampProviderButton = ({ config, index, onClick: _onClick }) => {

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

@@ -0,0 +1,9 @@
+export declare function QuantityInput({ value, onChange, onFocus, onBlur, placeholder, size, symbol, }: {
+    value: string | null;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onChange: (_: string | null) => void;
+    placeholder?: string;
+    size?: string;
+    symbol?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/modal/components/QuantityInput.js

@@ -0,0 +1,91 @@
+"use client";
+import "../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { safeStyled } from "@getpara/react-common";
+function QuantityInput({
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  placeholder,
+  size = "72px",
+  symbol
+}) {
+  return /* @__PURE__ */ jsxs(Container, { style: { fontSize: size, position: "relative" }, children: [
+    symbol && /* @__PURE__ */ jsx(CurrencySign, { slot: "start", children: symbol }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: value != null ? value : "",
+        onFocus: (e) => {
+          e.currentTarget.select();
+          onFocus == null ? void 0 : onFocus();
+        },
+        onKeyDown: (e) => {
+          if (!/^(\d|\.)$/.test(e.key) && !["Delete", "Backspace", "Tab", "Shift", "ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) {
+            e.preventDefault();
+          }
+        },
+        onChange: (e) => {
+          const rawValue = e.currentTarget.value;
+          if (rawValue === "") {
+            onChange(null);
+            return;
+          }
+          const numericValue = rawValue.replace(/[^0-9.]/g, "");
+          if (numericValue === "") {
+            onChange(null);
+            return;
+          }
+          const isValidNumberFormat = /^\d*\.?\d*$/.test(numericValue);
+          if (isValidNumberFormat) {
+            onChange(numericValue);
+          } else {
+            onChange(null);
+          }
+        },
+        onBlur: (e) => {
+          const numericValue = (e.currentTarget.value || "").replace(/[^0-9.]/g, "");
+          if (numericValue === "") {
+            onChange(null);
+          } else {
+            const parsed = parseFloat(numericValue);
+            if (!isNaN(parsed)) {
+              onChange(parsed.toString());
+            } else {
+              onChange(null);
+            }
+          }
+          onBlur == null ? void 0 : onBlur();
+        },
+        placeholder: placeholder || "0"
+      }
+    )
+  ] });
+}
+const Container = safeStyled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--cpsl-font-family);
+  color: var(--cpsl-color-text-primary);
+`;
+const CurrencySign = safeStyled.div`
+  position: relative;
+  left: 0px;
+`;
+const Input = safeStyled.input`
+  font-family: var(--cpsl-font-family);
+  font-size: inherit;
+  color: inherit;
+  background-color: transparent;
+  height: auto;
+  border-width: 0;
+  text-align: center;
+  width: 100%;
+  outline: none;
+  field-sizing: content;
+`;
+export {
+  QuantityInput
+};

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

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+type AssetItem = {
+    key: string;
+    icon: ReactNode;
+    text: ReactNode;
+    textSecondary?: ReactNode;
+    endText?: ReactNode;
+    endTextSecondary?: ReactNode;
+};
+export declare const contentMotionProps: {
+    transition: {
+        duration: number;
+    };
+    initial: {
+        opacity: number;
+    };
+    animate: {
+        opacity: number;
+    };
+    exit: {
+        opacity: number;
+    };
+};
+export declare function SearchableButtonList<T>({ items, transformItem, searchFilter, searchPlaceholder, onSelect, }: {
+    items: T[];
+    transformItem: (_: T) => AssetItem;
+    searchFilter?: (_: {
+        item: T;
+        searchStr: string;
+    }) => boolean;
+    searchPlaceholder?: string;
+    onSelect: (_: T) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modal/components/SearchableButtonList.js

@@ -0,0 +1,223 @@
+"use client";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as comp from "@getpara/react-components";
+import { safeStyled } from "@getpara/react-common";
+import { useState, useMemo, useRef, useEffect } from "react";
+import { GradientScroll } from "./common.js";
+import { AnimatePresence, motion } from "framer-motion";
+const contentMotionProps = {
+  transition: { duration: 0.2 },
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 }
+};
+const ESTIMATED_ITEM_HEIGHT = 72;
+const VISIBILITY_BUFFER = 3;
+function SearchableButtonList({
+  items,
+  transformItem,
+  searchFilter,
+  searchPlaceholder = "Search for an asset",
+  onSelect
+}) {
+  const [searchStr, setSearchStr] = useState("");
+  const outerContainerRef = useRef(null);
+  const scrollContainerRef = useRef(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+  const [contentHeight, setContentHeight] = useState(0);
+  const [renderedRange, setRenderedRange] = useState({ start: 0, end: 0 });
+  const transformedAndFiltered = useMemo(() => {
+    return items.filter((item) => !searchFilter || searchFilter({ item, searchStr })).map((item) => ({
+      assetItem: transformItem(item),
+      originalItem: item
+    }));
+  }, [items, searchFilter, searchStr, transformItem]);
+  useEffect(() => {
+    setRenderedRange({ start: 0, end: 0 });
+  }, [items, searchStr]);
+  const desiredRange = useMemo(() => {
+    if (containerHeight === 0) {
+      return { start: 0, end: transformedAndFiltered.length };
+    }
+    const startIndex = Math.max(0, Math.floor(scrollTop / ESTIMATED_ITEM_HEIGHT) - VISIBILITY_BUFFER);
+    const endIndex = Math.min(
+      transformedAndFiltered.length,
+      Math.ceil((scrollTop + containerHeight) / ESTIMATED_ITEM_HEIGHT) + VISIBILITY_BUFFER
+    );
+    return { start: startIndex, end: endIndex };
+  }, [scrollTop, containerHeight, transformedAndFiltered.length]);
+  useEffect(() => {
+    setRenderedRange((prev) => ({
+      start: Math.min(desiredRange.start, prev.start),
+      end: Math.max(desiredRange.end, prev.end)
+    }));
+  }, [desiredRange]);
+  const visibleRange = renderedRange;
+  const visibleItems = useMemo(() => {
+    return transformedAndFiltered.slice(visibleRange.start, visibleRange.end);
+  }, [transformedAndFiltered, visibleRange.start, visibleRange.end]);
+  useEffect(() => {
+    var _a, _b;
+    const container = (_b = (_a = scrollContainerRef.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement;
+    if (!container) return;
+    const updateDimensions = () => {
+      setContainerHeight(container.clientHeight);
+      setContentHeight(container.scrollHeight);
+    };
+    let scrollTimeout;
+    const handleScroll = () => {
+      if (scrollTimeout) {
+        cancelAnimationFrame(scrollTimeout);
+      }
+      scrollTimeout = requestAnimationFrame(() => {
+        setScrollTop(container.scrollTop);
+      });
+    };
+    updateDimensions();
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    const resizeObserver = new ResizeObserver(updateDimensions);
+    resizeObserver.observe(container);
+    const contentDiv = scrollContainerRef.current;
+    if (contentDiv) {
+      const contentResizeObserver = new ResizeObserver(updateDimensions);
+      contentResizeObserver.observe(contentDiv);
+      return () => {
+        if (scrollTimeout) {
+          cancelAnimationFrame(scrollTimeout);
+        }
+        container.removeEventListener("scroll", handleScroll);
+        resizeObserver.disconnect();
+        contentResizeObserver.disconnect();
+      };
+    }
+    return () => {
+      if (scrollTimeout) {
+        cancelAnimationFrame(scrollTimeout);
+      }
+      container.removeEventListener("scroll", handleScroll);
+      resizeObserver.disconnect();
+    };
+  }, []);
+  const paddingTop = visibleRange.start * ESTIMATED_ITEM_HEIGHT;
+  const paddingBottom = Math.max(0, (transformedAndFiltered.length - visibleRange.end) * ESTIMATED_ITEM_HEIGHT);
+  const MAX_CONTAINER_HEIGHT = 480;
+  useEffect(() => {
+    var _a, _b;
+    const container = (_b = (_a = scrollContainerRef.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement;
+    if (container) {
+      requestAnimationFrame(() => {
+        setContentHeight(container.scrollHeight);
+      });
+    }
+  }, [visibleRange.start, visibleRange.end, transformedAndFiltered.length]);
+  const outerContainerHeight = useMemo(() => {
+    if (contentHeight === 0) {
+      return MAX_CONTAINER_HEIGHT;
+    }
+    const searchInputHeight = items.length >= 4 && !!searchFilter ? 56 : 0;
+    const totalNeededHeight = contentHeight + searchInputHeight;
+    if (totalNeededHeight < MAX_CONTAINER_HEIGHT) {
+      return totalNeededHeight + 4;
+    }
+    return MAX_CONTAINER_HEIGHT;
+  }, [contentHeight, items.length, searchFilter]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: outerContainerRef,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: `${outerContainerHeight}px`,
+        maxHeight: `${MAX_CONTAINER_HEIGHT}px`,
+        overflow: "hidden"
+      },
+      children: [
+        items.length >= 4 && !!searchFilter && /* @__PURE__ */ jsx(
+          SearchInput,
+          {
+            placeholder: searchPlaceholder,
+            value: searchStr,
+            onCpslInput: (e) => {
+              setSearchStr(e.detail.value);
+            },
+            style: { marginBottom: "8px" },
+            children: /* @__PURE__ */ jsx(comp.CpslIcon, { icon: "search", slot: "start" })
+          }
+        ),
+        /* @__PURE__ */ jsx(GradientScroll, { height: "100%", gap: "8px", children: /* @__PURE__ */ jsx("div", { ref: scrollContainerRef, children: /* @__PURE__ */ jsx(List, { style: { paddingTop, paddingBottom }, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children: visibleItems.map(({ assetItem, originalItem }) => {
+          const { key, icon, text, textSecondary, endText, endTextSecondary } = assetItem;
+          return /* @__PURE__ */ jsx(motion.li, __spreadProps(__spreadValues({ style: { width: "100%" } }, contentMotionProps), { children: /* @__PURE__ */ jsxs(AssetButton, { fullWidth: true, variant: "secondary", onClick: () => onSelect(originalItem), children: [
+            icon,
+            /* @__PURE__ */ jsxs(Info, { children: [
+              /* @__PURE__ */ jsx(Code, { color: "contrast", variant: "bodyL", children: text }),
+              textSecondary && /* @__PURE__ */ jsx(Name, { color: "contrast", variant: "bodyS", children: textSecondary })
+            ] }),
+            endText && /* @__PURE__ */ jsxs(End, { children: [
+              /* @__PURE__ */ jsx(EndText, { color: "primary", variant: "bodyM", children: endText }),
+              endTextSecondary && /* @__PURE__ */ jsx(EndTextSecondary, { color: "contrast", variant: "bodyS", children: endTextSecondary })
+            ] })
+          ] }) }), key);
+        }) }) }) }) })
+      ]
+    }
+  );
+}
+const List = safeStyled.ul`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 8px;
+  list-style: none;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  margin: 0;
+`;
+const AssetButton = safeStyled(comp.CpslButton)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  --button-secondary-background-color: var(--cpsl-color-background-8);
+  --button-secondary-border-color: var(--cpsl-color-background-8);
+  --button-secondary-hover-background-color: var(--cpsl-color-background-16);
+  --button-secondary-hover-border-color: var(--cpsl-color-background-16);
+`;
+const Info = safeStyled(comp.CpslCol)`
+    text-align: left;
+    min-width: 0;
+  `, Code = comp.CpslText, Name = safeStyled(comp.CpslText)`
+    display: flex;
+    align-items: flex-start;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    height: 20px;
+  `, EndText = safeStyled(comp.CpslText)`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  `, EndTextSecondary = safeStyled(comp.CpslText)`
+    overflow: hidden;
+  `;
+const End = safeStyled(comp.CpslCol)`
+  text-align: right;
+  align-items: flex-end;
+  gap: 4px;
+  min-width: 0;
+`;
+const SearchInput = safeStyled(comp.CpslInput)`
+  --container-background-color: var(--cpsl-color-background-8);
+  --input-background-color: transparent;
+`;
+export {
+  SearchableButtonList,
+  contentMotionProps
+};

package/dist/modal/components/Setup2FAStep/Setup2FAStep.js

@@ -32,10 +32,13 @@ const Setup2FAStep = ({ onClose }) => {
   const params = (twoFactorStatus == null ? void 0 : twoFactorStatus.uri) ? new URL(twoFactorStatus.uri).searchParams : void 0;
   const secret = params == null ? void 0 : params.get("secret");
   useEffect(() => {
-    setTimeout(() => {
+    const timerId = setTimeout(() => {
       var _a, _b, _c, _d;
       (_d = (_c = (_b = (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelectorAll("input")) == null ? void 0 : _c[0]) == null ? void 0 : _d.focus();
     }, 10);
+    return () => {
+      clearTimeout(timerId);
+    };
   }, [isVerifying]);
   useEffect(() => {
     if (code.length === 6) {

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

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

package/dist/modal/components/SwitchWalletsStep/SwitchWalletsStep.js

@@ -0,0 +1,10 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { Waiting } from "../Waiting/Waiting.js";
+const SwitchWalletsStep = () => {
+  return /* @__PURE__ */ jsx(Waiting, { heading: "Switching Wallets", subheading: "Please complete the wallet selection in the popup window." });
+};
+export {
+  SwitchWalletsStep
+};

package/dist/modal/components/VerificationCodeStep/VerificationCodeStep.js

@@ -13,16 +13,20 @@ import { useResendVerificationCode } from "../../../provider/index.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 const VerificationCode = ({ authInfo, onResend, onSubmit, status, error }) => {
   const inputRef = useRef(null);
+  const resendTimerRef = useRef();
   const [code, setCode] = useState("");
   const [isPending, setIsPending] = useState(status === "pending");
   const [codeError, setCodeError] = useState(null);
   const [resendDisabled, setResendDisabled] = useState(false);
   const isEmail = (authInfo == null ? void 0 : authInfo.authType) === "email";
   useEffect(() => {
-    setTimeout(() => {
+    const timerId = setTimeout(() => {
       var _a, _b, _c, _d;
       (_d = (_c = (_b = (_a = inputRef.current) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelectorAll("input")) == null ? void 0 : _c[0]) == null ? void 0 : _d.focus();
     }, 10);
+    return () => {
+      clearTimeout(timerId);
+    };
   }, []);
   useEffect(() => {
     setCodeError(null);
@@ -41,12 +45,19 @@ const VerificationCode = ({ authInfo, onResend, onSubmit, status, error }) => {
       try {
         onResend();
       } finally {
-        setTimeout(() => {
+        resendTimerRef.current = setTimeout(() => {
           setResendDisabled(false);
         }, 3e3);
       }
     }
   });
+  useEffect(() => {
+    return () => {
+      if (resendTimerRef.current) {
+        clearTimeout(resendTimerRef.current);
+      }
+    };
+  }, []);
   const handleCodeInput = (e) => {
     setCode(e.detail.value.trim());
   };

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

@@ -1,5 +1,5 @@
 interface WaitingProps {
-    heading: string;
+    heading?: string;
     subheading?: string;
 }
 export declare const Waiting: ({ heading, subheading }: WaitingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/modal/components/Waiting/Waiting.js

@@ -3,15 +3,20 @@ import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CpslSpinner, CpslText } from "@getpara/react-components";
 import { Heading, SpinnerContainer, StepContainer, InnerStepContainer } from "../common.js";
+import { safeStyled } from "@getpara/react-common";
 const Waiting = ({ heading, subheading }) => {
-  return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
+  return /* @__PURE__ */ jsxs(Container, { $wide: true, children: [
     /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) }),
-    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+    heading && /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
       /* @__PURE__ */ jsx(Heading, { children: heading }),
       subheading && /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: subheading })
     ] })
   ] });
 };
+const Container = safeStyled(StepContainer)`
+  flex: 1;
+  justify-content: space-between;
+`;
 export {
   Waiting
 };

package/dist/modal/components/WalletCard/WalletCard.js

@@ -1,7 +1,7 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { safeStyled } from "@getpara/react-common";
+import { safeStyled, WalletTypeIcon } from "@getpara/react-common";
 import { useModalStore } from "../../stores/index.js";
 import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
 import { truncateAddress } from "@getpara/web-sdk";
@@ -9,7 +9,6 @@ import { ModalStep } from "../../utils/steps.js";
 import { useWalletState } from "../../../provider/index.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { useStore } from "../../../provider/stores/useStore.js";
-import { WalletTypeIcon } from "../common.js";
 const ExternalWalletCard = ({
   address,
   showAddFunds
@@ -129,7 +128,7 @@ const WalletNameContainer = safeStyled.div`
 const Name = safeStyled(CpslText)`
   width: 100%;
   &::part(text-element) {
-    line-height: 100%;
+    line-height: 150%;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;