@getpara/react-sdk-lite 2.0.0-alpha.33

package/dist/modal/components/ExternalWallets/ExternalWallets.js

@@ -0,0 +1,182 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { safeStyled } from "@getpara/react-common";
+import { StyledCpslTileButton } from "../common.js";
+import { CpslButton, CpslIcon, CpslInput, CpslText } from "@getpara/react-components";
+import { useModalStore } from "../../stores/index.js";
+import { ModalStep } from "../../utils/steps.js";
+import { useState } from "react";
+import { hasEmbeddedAuth } from "../../utils/authLayoutHelpers.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+const HAS_MORE_LENGTH = 3;
+const ExternalWallets = () => {
+  const { wallets: allWallets, connectExternalWallet } = useExternalWallets();
+  const setSelectedExternalWalletId = useModalStore((state) => state.setSelectedExternalWalletId);
+  const setStep = useModalStore((state) => state.setStep);
+  const showAll = useModalStore((state) => state.step === ModalStep.EX_WALLET_MORE);
+  const authLayout = useModalStore((state) => state.authLayout);
+  const [search, setSearch] = useState("");
+  const dedupedWallets = Array.from(new Set(allWallets.map((wallet) => wallet.id))).map((id) => {
+    return allWallets.find((wallet) => wallet.id === id);
+  }).filter((wallet) => wallet.internalId !== "FARCASTER");
+  const hasMore = dedupedWallets.length > HAS_MORE_LENGTH;
+  const walletsToShow = showAll || !hasMore ? search ? dedupedWallets.filter((w) => w.name.toLowerCase().includes(search.toLowerCase())) : dedupedWallets : dedupedWallets.slice(0, HAS_MORE_LENGTH);
+  const showMoreButton = !showAll && hasMore;
+  const handleShowAll = () => {
+    setStep(ModalStep.EX_WALLET_MORE);
+  };
+  const handleParaClick = () => {
+    setStep(ModalStep.AUTH_MORE);
+  };
+  const handleWalletClick = (wallet) => () => {
+    const shouldShowNetworkSelection = allWallets.filter((w) => w.id === wallet.id).length > 1;
+    if (shouldShowNetworkSelection) {
+      setSelectedExternalWalletId(wallet.internalId);
+      setStep(ModalStep.EX_WALLET_NETWORK_SELECT);
+      return;
+    }
+    setSelectedExternalWalletId(wallet.internalId);
+    setStep(ModalStep.EX_WALLET_SELECTED);
+    if (wallet.installed) {
+      connectExternalWallet(wallet);
+    } else if (wallet.isMobile) {
+      connectExternalWallet(wallet, true);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Container, { $maxHeight: showAll, children: [
+    showAll && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SearchInputWrapper, { children: /* @__PURE__ */ jsx(
+        SearchInput,
+        {
+          placeholder: "Search for your wallet",
+          onCpslInput: (e) => __async(void 0, null, function* () {
+            var _a;
+            setSearch((_a = e.target.value) != null ? _a : "");
+          }),
+          value: search,
+          style: { width: "100%" },
+          children: /* @__PURE__ */ jsx(SearchIcon, { slot: "start", icon: "search" })
+        }
+      ) }),
+      hasEmbeddedAuth(authLayout != null ? authLayout : []) && /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, variant: "tertiary", onClick: handleParaClick, children: /* @__PURE__ */ jsxs(WalletButtonOuterContainer, { children: [
+        /* @__PURE__ */ jsxs(WalletButtonInnerContainer, { children: [
+          /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "paraIcon" }),
+          /* @__PURE__ */ jsx(CpslText, { weight: "medium", children: "Para" })
+        ] }),
+        /* @__PURE__ */ jsx(Badge, { $show: true, $variant: "installed", children: /* @__PURE__ */ jsx(CpslText, { variant: "body2XS", weight: "medium", children: "Available" }) })
+      ] }) })
+    ] }),
+    walletsToShow.map(
+      (wallet) => showAll ? /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, variant: "tertiary", onClick: handleWalletClick(wallet), children: /* @__PURE__ */ jsxs(WalletButtonOuterContainer, { children: [
+        /* @__PURE__ */ jsxs(WalletButtonInnerContainer, { children: [
+          /* @__PURE__ */ jsx(CpslIcon, { slot: "start", src: wallet.iconUrl }),
+          /* @__PURE__ */ jsx(CpslText, { weight: "medium", children: wallet.name })
+        ] }),
+        /* @__PURE__ */ jsx(Badge, { $show: !!wallet.isMobile || !!wallet.installed, $variant: wallet.installed ? "installed" : "mobile", children: /* @__PURE__ */ jsx(CpslText, { variant: "body2XS", weight: "medium", children: wallet.installed ? "Installed" : "Mobile" }) })
+      ] }) }, wallet.id) : /* @__PURE__ */ jsx(WalletTileButton, { src: wallet.iconUrl, onClick: handleWalletClick(wallet), children: /* @__PURE__ */ jsxs(TileButtonInnerContainer, { children: [
+        wallet.installed && /* @__PURE__ */ jsx(InstalledIndicator, {}),
+        /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: wallet.name })
+      ] }) }, wallet.id)
+    ),
+    showMoreButton && /* @__PURE__ */ jsxs(CpslButton, { variant: "tertiary", fullWidth: true, onClick: handleShowAll, children: [
+      /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "wallet" }),
+      "More Wallets"
+    ] }),
+    showAll && /* @__PURE__ */ jsx(BlurContainer, {})
+  ] });
+};
+const Container = safeStyled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
+
+  max-height: ${({ $maxHeight }) => $maxHeight ? "348px" : "none"};
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+`;
+const WalletTileButton = safeStyled(StyledCpslTileButton)`
+  flex: 1;
+`;
+const WalletButtonOuterContainer = safeStyled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: space-between;
+`;
+const WalletButtonInnerContainer = safeStyled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  cpsl-icon {
+    --icon-color: var(--cpsl-color-contrast);
+  }
+  cpsl-text {
+    &::part(text-element) {
+      color: var(--cpsl-color-contrast);
+    }
+  }
+`;
+const Badge = safeStyled.div`
+  visibility: ${({ $show }) => $show ? "visible" : "hidden"};
+  padding: 2px 4px;
+  border-radius: 4px;
+  border: 1px solid;
+  border-color: ${({ $variant }) => $variant === "installed" ? "var(--cpsl-color-utility-green)" : "var(--cpsl-color-text-primary)"};
+  cpsl-text {
+    &::part(text-element) {
+      color: ${({ $variant }) => $variant === "installed" ? "var(--cpsl-color-utility-green)" : "var(--cpsl-color-text-primary)"};
+    }
+  }
+`;
+const InstalledIndicator = safeStyled.span`
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+  background-color: var(--cpsl-color-utility-green);
+`;
+const TileButtonInnerContainer = safeStyled.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+`;
+const SearchIcon = safeStyled(CpslIcon)`
+  --icon-color: var(--cpsl-color-contrast);
+`;
+const SearchInputWrapper = safeStyled.div`
+  width: 100%;
+  background-color: var(--cpsl-color-background-0);
+
+  position: sticky;
+  top: 0;
+  padding-bottom: 4px;
+  margin-bottom: -4px;
+`;
+const SearchInput = safeStyled(CpslInput)`
+  width: 100%;
+  --container-background-color: var(--cpsl-color-background-8);
+  --input-background-color: var(--cpsl-color-background-8);
+`;
+const BlurContainer = safeStyled.div`
+  position: sticky;
+  height: 56px;
+  width: 100%;
+  bottom: 0;
+
+  background: linear-gradient(0deg, var(--cpsl-color-background-0) 0%, rgba(234, 239, 211, 0) 100%);
+  pointer-events: none;
+`;
+export {
+  ExternalWallets
+};

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

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

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

@@ -0,0 +1,95 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { safeStyled } from "@getpara/react-common";
+import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
+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 { useAccount } from "../../../provider/index.js";
+const Footer = () => {
+  const { embedded } = 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]);
+  if (!showFooter) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(FooterContainer, { slot: "footer", children: /* @__PURE__ */ jsx(FooterContentContainer, { children: Content }) });
+};
+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;
+`;
+const PoweredByContainer = safeStyled.div`
+  display: flex;
+  gap: 5px;
+  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;
+`;
+const ParaLogo = safeStyled(CpslIcon)`
+  display: inline-block;
+  --icon-color: var(--cpsl-color-text-secondary);
+  --width: 49px;
+  --height: auto;
+`;
+export {
+  Footer
+};

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

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

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

@@ -0,0 +1,43 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { 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";
+const Header = () => {
+  const { title } = 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,
+    {
+      custom: stepDirection,
+      variants: BODY_MOTION_VARIANTS,
+      initial: "enter",
+      animate: "center",
+      exit: "exit",
+      transition: BODY_TRANSITION,
+      slot: "header",
+      id: "header",
+      children: /* @__PURE__ */ jsx(CenteredText, { weight: "semiBold", color: "secondary", children: title })
+    },
+    ["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;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+export {
+  Header
+};

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

@@ -0,0 +1,3 @@
+export declare const useStepTitle: () => {
+    title: any;
+};

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

@@ -0,0 +1,62 @@
+"use client";
+import "../../../../chunk-MMUBH76A.js";
+import { useMemo } from "react";
+import { useModalStore } from "../../../stores/modal/useModalStore.js";
+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";
+const useStepTitle = () => {
+  const hideWallets = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
+  });
+  const isLogin = useModalStore((state) => state.isLogin());
+  const currentStep = useModalStore((state) => state.step);
+  const { chainId } = useExternalWallets();
+  const { isEnabled: isAccountLinkingEnabled } = useAccountLinking();
+  const titles = useMemo(
+    () => ({
+      [ModalStep.AUTH_MAIN]: "",
+      [ModalStep.AUTH_MORE]: "Sign Up or Log In",
+      [ModalStep.AUTH_GUEST_SIGNUP]: "Complete Account Setup",
+      [ModalStep.EX_WALLET_MORE]: "Connect Wallet",
+      [ModalStep.VERIFICATIONS]: "Sign Up",
+      [ModalStep.AWAITING_OAUTH]: isLogin ? "Login" : "Sign Up",
+      [ModalStep.FARCASTER_OAUTH]: isLogin ? "Login" : "Sign Up",
+      [ModalStep.BIOMETRIC_CREATION]: "Sign Up",
+      [ModalStep.PASSWORD_CREATION]: "Sign Up",
+      [ModalStep.AWAITING_BIOMETRIC_CREATION]: "Sign Up",
+      [ModalStep.AWAITING_WALLET_CREATION]: isLogin ? "Login" : "Sign Up",
+      [ModalStep.AWAITING_PASSWORD_CREATION]: "Sign Up",
+      [ModalStep.WALLET_CREATION_DONE]: hideWallets ? "Account Created" : "Wallet Created",
+      [ModalStep.SECRET]: isLogin ? "Login" : "Sign Up",
+      [ModalStep.BIOMETRIC_LOGIN]: "Login",
+      [ModalStep.EMBEDDED_PASSWORD_LOGIN]: "Login",
+      [ModalStep.AWAITING_PASSWORD_LOGIN]: "Login",
+      [ModalStep.AWAITING_BIOMETRIC_LOGIN]: "Login",
+      [ModalStep.LOGIN_DONE]: "",
+      [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.ACCOUNT_MAIN]: "",
+      [ModalStep.CHAIN_SWITCH]: "",
+      [ModalStep.ACCOUNT_PROFILE]: isAccountLinkingEnabled ? "Profile" : "Settings",
+      [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"
+    }),
+    [isLogin, chainId, hideWallets]
+  );
+  return { title: titles[currentStep] };
+};
+export {
+  useStepTitle
+};

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

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

package/dist/modal/components/Hero/Hero.js

@@ -0,0 +1,116 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CpslHero, CpslIcon, CpslIdenticon } from "@getpara/react-components";
+import { safeStyled } from "@getpara/react-common";
+import { ModalStep } from "../../utils/steps.js";
+import { useModalStore } from "../../stores/index.js";
+import { NETWORK_NOT_SUPPORTED_ERROR } from "../../constants/constants.js";
+import { useEffect, useState } from "react";
+import { isMobile } from "@getpara/web-sdk";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+import { useWallet } from "../../../provider/index.js";
+const getStepConfig = ({
+  externalWalletError
+}) => {
+  var _a;
+  return {
+    [ModalStep.EX_WALLET_SELECTED]: {
+      variant: "externalWalletConnection",
+      topOffset: 40,
+      spacerHeight: 158,
+      hideFadeOut: true
+    },
+    [ModalStep.CHAIN_SWITCH]: {
+      variant: ((_a = externalWalletError == null ? void 0 : externalWalletError[0]) == null ? void 0 : _a.toLowerCase()) === NETWORK_NOT_SUPPORTED_ERROR ? "failed" : "externalWalletConnection",
+      topOffset: 20,
+      spacerHeight: 158,
+      hideFadeOut: true
+    },
+    [ModalStep.FARCASTER_OAUTH]: {
+      variant: "externalWalletConnection",
+      topOffset: 40,
+      spacerHeight: 158,
+      hideFadeOut: true
+    }
+  };
+};
+const Hero = () => {
+  const para = useInternalClient();
+  const { wallet: connector, walletDisplayHelpers, avatar } = useExternalWallets();
+  const step = useModalStore((state) => state.step);
+  const externalWalletError = useModalStore((state) => state.externalWalletError);
+  const { data: activeWallet } = useWallet();
+  const [currentStep, setCurrentStep] = useState(step);
+  const stepConfig = getStepConfig({
+    externalWalletError
+  })[currentStep];
+  useEffect(() => {
+    const prevStepConfig = getStepConfig({
+      externalWalletError
+    })[currentStep];
+    const newStepConfig = getStepConfig({
+      externalWalletError
+    })[step];
+    const delay = newStepConfig && prevStepConfig ? 0 : newStepConfig && !prevStepConfig ? 0 : 200;
+    setTimeout(() => {
+      setCurrentStep(step);
+    }, delay);
+  }, [step]);
+  const isExternalStep = currentStep === ModalStep.EX_WALLET_SELECTED;
+  const isChainSwitchStep = currentStep === ModalStep.CHAIN_SWITCH;
+  const isAccountStep = currentStep === ModalStep.ACCOUNT_MAIN;
+  const isFarcasterStep = currentStep === ModalStep.FARCASTER_OAUTH;
+  const { showExtension, isCosmosMobileWallet } = walletDisplayHelpers;
+  const shouldHide = !stepConfig || !isMobile() && isExternalStep && !showExtension || !isMobile() && isChainSwitchStep && isCosmosMobileWallet || !isMobile() && isFarcasterStep;
+  const { variant, topOffset, spacerHeight, hideFadeOut } = stepConfig != null ? stepConfig : {};
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Container, { $top: -45 + (topOffset != null ? topOffset : 0), children: shouldHide ? null : /* @__PURE__ */ jsxs(StyledHero, { $isAccount: isAccountStep, hideFadeOut, variant, height: 480, withDefaultTheme: true, children: [
+      (isExternalStep || isChainSwitchStep) && /* @__PURE__ */ jsx(WalletLogo, { slot: "connectionLeft", src: connector == null ? void 0 : connector.iconUrl }),
+      isFarcasterStep && /* @__PURE__ */ jsx(WalletLogo, { slot: "connectionLeft", icon: "farcasterBrand" }),
+      isAccountStep && (avatar ? /* @__PURE__ */ jsx(Avatar, { slot: "image", src: avatar }) : activeWallet ? /* @__PURE__ */ jsx(IconAvatar, { slot: "image", size: "100%", hash: para.getIdenticonHash(activeWallet.id, activeWallet.type) }) : null)
+    ] }) }),
+    !shouldHide && /* @__PURE__ */ jsx(Spacer, { $height: spacerHeight != null ? spacerHeight : 0 })
+  ] });
+};
+const Container = safeStyled.div`
+  display: flex;
+  position: absolute;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+
+  top: ${({ $top }) => `${$top}px`};
+`;
+const Spacer = safeStyled.div`
+  height: ${({ $height }) => `${$height}px`};
+`;
+const WalletLogo = safeStyled(CpslIcon)`
+  --height: 60px;
+  --width: 60px;
+`;
+const Avatar = safeStyled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`;
+const IconAvatar = safeStyled(CpslIdenticon)`
+  border-radius: 1000px;
+`;
+const StyledHero = safeStyled(CpslHero)`
+  ${({ $isAccount }) => $isAccount && `
+      --ring-3-size: 560px;
+      --ring-2-size: 402px;
+      --ring-1-size: 228px;
+      --ring-0-size: 104px;
+      
+      --default-theme-ring-3-opacity: 0.02;
+      --default-theme-ring-2-opacity: 0.04;
+      --default-theme-ring-1-opacity: 0.06;
+      --default-theme-ring-0-opacity: 0.1;
+  `}
+`;
+export {
+  Hero
+};

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

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

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

@@ -0,0 +1,70 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } 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 { 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";
+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 embeddedModal = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.embeddedModal;
+  });
+  const para = useInternalClient();
+  useEffect(() => {
+    const handleMessage = (event) => {
+      const portalBase = getPortalBaseURL(para.ctx);
+      if (!event.origin.startsWith(portalBase)) {
+        return;
+      }
+      if (event.data && event.data.type === "LOADED") {
+        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 }) }),
+    !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"};
+  width: ${({ $isVisible }) => $isVisible ? "100%" : "0px"};
+  flex: ${({ $isVisible }) => $isVisible ? 1 : "auto"};
+  padding: ${({ $embeddedModal, $isVisible }) => !$isVisible ? "0px" : $embeddedModal ? "12px 0px 0px" : "72px 72px 32px"};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @media (max-width: ${MOBILE_SIZE}px) {
+    padding: ${({ $embeddedModal, $isVisible }) => !$isVisible ? "0px" : $embeddedModal ? "12px 0px 0px" : "72px 16px 0px"};
+  }
+`;
+const Container = safeStyled.div`
+  height: 360px;
+  width: 100%;
+  opacity: ${({ $isReady }) => $isReady ? 1 : 0};
+
+  & > iframe {
+    height: 360px;
+    width: 100%;
+    border: none;
+    background: transparent;
+  }
+`;
+export {
+  IFrameStep
+};

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

@@ -0,0 +1,5 @@
+interface LoginDoneStep {
+    onClose: () => void;
+}
+export declare const LoginDoneStep: ({ onClose }: LoginDoneStep) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,44 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { Heading, HeroIcon, StepContainer } from "../common.js";
+import { ExternalWalletCard, WalletCard, WalletCards } from "../WalletCard/WalletCard.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { useModalStore } from "../../stores/index.js";
+import { ModalStep } from "../../utils/steps.js";
+const LoginDoneStep = ({ onClose }) => {
+  var _a, _b;
+  const para = useInternalClient();
+  const bareModal = useStore((state) => {
+    var _a2;
+    return (_a2 = state.modalConfig) == null ? void 0 : _a2.bareModal;
+  });
+  const setStep = useModalStore((state) => state.setStep);
+  const setFlow = useModalStore((state) => state.setFlow);
+  const hideWallets = useStore((state) => {
+    var _a2;
+    return (_a2 = state.modalConfig) == null ? void 0 : _a2.hideWallets;
+  });
+  useEffect(() => {
+    setTimeout(() => {
+      if (bareModal) {
+        setFlow("account");
+        setStep(ModalStep.ACCOUNT_MAIN);
+      } else {
+        onClose();
+      }
+    }, 1600);
+  }, []);
+  return /* @__PURE__ */ jsxs(StepContainer, { children: [
+    /* @__PURE__ */ jsx(HeroIcon, { icon: "checkCircleFilled" }),
+    /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: "Connected" }),
+    !hideWallets && /* @__PURE__ */ jsx(WalletCards, { children: para.externalWalletConnectionType === "CONNECTION_ONLY" || para.externalWalletConnectionType === "VERIFICATION" ? /* @__PURE__ */ jsx(ExternalWalletCard, { address: (_b = (_a = Object.values(para.externalWallets || {})[0]) == null ? void 0 : _a.address) != null ? _b : "" }) : para.currentWalletIdsArray.map(([id, type]) => {
+      return /* @__PURE__ */ jsx(WalletCard, { id, type }, `${id}-${type}`);
+    }) })
+  ] });
+};
+export {
+  LoginDoneStep
+};

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

@@ -0,0 +1,10 @@
+import { ParaModalProps } from '../../types/modalProps.js';
+type ModalContentProps = Omit<ParaModalProps, 'para' | 'isOpen' | 'theme' | 'branding' | 'onModalStepChange' | 'onExpandModalChange'>;
+export type ModalContentHandle = {
+    /**
+     * Trigger the modal close handler
+     */
+    handleModalClose: () => void;
+};
+export declare const ModalContent: import("react").ForwardRefExoticComponent<ModalContentProps & import("react").RefAttributes<ModalContentHandle>>;
+export {};