@getpara/react-sdk 2.0.0-alpha.3 → 2.0.0-alpha.6

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

@@ -0,0 +1,43 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { styled } from "styled-components";
+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 = styled(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.js

@@ -0,0 +1,54 @@
+"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";
+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 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.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]: ""
+    }),
+    [isLogin, chainId, hideWallets]
+  );
+  return { title: titles[currentStep] };
+};
+export {
+  useStepTitle
+};

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 styled from "styled-components";
+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 = styled.div`
+  display: flex;
+  position: absolute;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+
+  top: ${({ $top }) => `${$top}px`};
+`;
+const Spacer = styled.div`
+  height: ${({ $height }) => `${$height}px`};
+`;
+const WalletLogo = styled(CpslIcon)`
+  --height: 60px;
+  --width: 60px;
+`;
+const Avatar = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`;
+const IconAvatar = styled(CpslIdenticon)`
+  border-radius: 1000px;
+`;
+const StyledHero = styled(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.js

@@ -0,0 +1,59 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useModalStore } from "../../stores/index.js";
+import { IFrameSteps } from "../../utils/steps.js";
+import styled from "styled-components";
+import { SpinnerContainer } from "@getpara/react-common";
+import { CpslSpinner } from "@getpara/react-components";
+import { MOBILE_SIZE } from "../../constants/constants.js";
+import { useStore } from "../../../provider/stores/useStore.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;
+  });
+  return /* @__PURE__ */ jsxs(OuterContainer, { $isVisible: IFrameSteps.includes(currentStep), $embeddedModal: !!embeddedModal, children: [
+    /* @__PURE__ */ jsx(Container, { $isReady: !!isReady, children: /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        src: iFrameUrl,
+        onLoad: () => {
+          setIsReady(true);
+        }
+      }
+    ) }),
+    !isReady && /* @__PURE__ */ jsx(SpinnerContainer, { style: { width: "100%", height: "100%", flex: 1 }, children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) })
+  ] });
+};
+const OuterContainer = styled.div`
+  height: ${({ $isVisible }) => $isVisible ? "100%" : "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 = styled.div`
+  height: 100%;
+  width: 100%;
+  display: ${({ $isReady }) => $isReady ? "block" : "none"};
+
+  & > iframe {
+    height: 360px;
+    width: 100%;
+    border: none;
+  }
+`;
+export {
+  IFrameStep
+};

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

@@ -0,0 +1,31 @@
+"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";
+const LoginDoneStep = ({ onClose }) => {
+  var _a, _b;
+  const para = useInternalClient();
+  const hideWallets = useStore((state) => {
+    var _a2;
+    return (_a2 = state.modalConfig) == null ? void 0 : _a2.hideWallets;
+  });
+  useEffect(() => {
+    setTimeout(() => {
+      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" ? /* @__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.js

@@ -0,0 +1,95 @@
+"use client";
+import {
+  __async,
+  __spreadProps,
+  __spreadValues
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle } from "react";
+import { EnabledFlow } from "@getpara/web-sdk";
+import { useModalStore } from "../../stores/index.js";
+import { ModalStep } from "../../utils/steps.js";
+import { Body } from "../Body/Body.js";
+import { Footer } from "../Footer/Footer.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+const ModalContent = forwardRef(
+  ({
+    twoFactorAuthEnabled = false,
+    oAuthMethods,
+    disableEmailLogin,
+    disablePhoneLogin,
+    isGuestModeEnabled = false,
+    onClose,
+    onRampTestMode
+  }, ref) => {
+    const para = useInternalClient();
+    const refs = useModalStore((state) => state.refs);
+    const onRampConfig = useModalStore((state) => state.onRampConfig);
+    const setOnRampConfig = useModalStore((state) => state.setOnRampConfig);
+    const accountAddFundTab = useModalStore((state) => state.accountAddFundTab);
+    const setAccountAddFundTab = useModalStore((state) => state.setAccountAddFundTab);
+    const { disconnectExternalWallet } = useExternalWallets();
+    useImperativeHandle(ref, () => {
+      return {
+        handleModalClose() {
+          handleClose();
+        }
+      };
+    }, []);
+    const handleClose = () => {
+      onClose == null ? void 0 : onClose();
+      if (refs.currentStep.current === ModalStep.EXTERNAL_WALLET_VERIFICATION && para.isExternalWalletAuth) {
+        disconnectExternalWallet();
+      }
+    };
+    useEffect(() => {
+      if (!onRampConfig) {
+        para.ctx.client.getOnRampConfig().then((res) => {
+          let newOnRampConfig;
+          newOnRampConfig = __spreadProps(__spreadValues({}, res), { testMode: onRampTestMode });
+          setOnRampConfig(newOnRampConfig);
+          if (!accountAddFundTab) {
+            setAccountAddFundTab(
+              newOnRampConfig.isBuyEnabled ? EnabledFlow.BUY : newOnRampConfig.isReceiveEnabled ? EnabledFlow.RECEIVE : newOnRampConfig.isWithdrawEnabled ? EnabledFlow.WITHDRAW : void 0
+            );
+          }
+        }).catch();
+      }
+    }, []);
+    useEffect(() => {
+      if (!!onRampConfig) {
+        setOnRampConfig(__spreadProps(__spreadValues({}, onRampConfig), { testMode: onRampTestMode }));
+      }
+    }, [onRampTestMode]);
+    useEffect(() => {
+      const init = () => __async(void 0, null, function* () {
+        if (!(yield para.isFullyLoggedIn())) {
+          yield disconnectExternalWallet();
+        }
+      });
+      init();
+      return () => {
+        var _a;
+        window.clearTimeout((_a = refs.poll.current) == null ? void 0 : _a.timeout);
+      };
+    }, []);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Body,
+        {
+          oAuthMethods,
+          twoFactorAuthEnabled,
+          disableEmailLogin: !!disableEmailLogin,
+          disablePhoneLogin: !!disablePhoneLogin,
+          isGuestModeEnabled,
+          onClose: handleClose
+        }
+      ),
+      /* @__PURE__ */ jsx(Footer, {})
+    ] });
+  }
+);
+export {
+  ModalContent
+};

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

@@ -0,0 +1,27 @@
+"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";
+const FarcasterOAuthStep = () => {
+  const farcasterConnectUri = useModalStore((state) => state.farcasterConnectUri);
+  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, 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, { variant: "headingS", weight: "bold", 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 }) })
+    ] })
+  ] }) });
+};
+var FarcasterOAuthStep_default = FarcasterOAuthStep;
+export {
+  FarcasterOAuthStep_default as default
+};

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

@@ -1,6 +1,6 @@
-import { OAuthMethod } from '@getpara/web-sdk';
+import { TOAuthMethod } from '@getpara/web-sdk';
 interface OAuthProps {
-    methods: OAuthMethod[];
+    methods: TOAuthMethod[];
 }
 export declare const OAuth: ({ methods }: OAuthProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,79 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import { useModalStore } from "../../stores/index.js";
+import { ModalStep } from "../../utils/steps.js";
+import { getTileButtonFlex } from "../../utils/getTileButtonFlex.js";
+import { StyledCpslTileButton } from "../common.js";
+import { brandedOAuthLogos, oAuthLogos } from "../../constants/oAuthLogos.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
+const HAS_MORE_LENGTH = 3;
+const OAuth = ({ methods }) => {
+  const oAuthLogoVariant = useStore((state) => state.oAuthLogoVariant);
+  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 hasMore = methods.length > HAS_MORE_LENGTH;
+  const methodsToShow = showAll || !hasMore ? methods : methods.slice(0, HAS_MORE_LENGTH - 1);
+  const handleShowAll = () => {
+    setStep(ModalStep.AUTH_MORE);
+  };
+  const handleMethodClick = (method) => () => __async(void 0, null, function* () {
+    switch (method) {
+      case "FARCASTER":
+        verifyFarcaster();
+        break;
+      case "TELEGRAM":
+        setStep(ModalStep.TELEGRAM_OAUTH);
+        break;
+      default:
+        verifyOAuth(method);
+        break;
+    }
+  });
+  const useBrandedLogos = oAuthLogoVariant === "default";
+  const useDarkLogos = useBrandedLogos ? isDark : oAuthLogoVariant !== "dark";
+  const showMoreButton = !showAll && hasMore;
+  return /* @__PURE__ */ jsxs(OAuthContainer, { children: [
+    methodsToShow.map((method, index) => /* @__PURE__ */ jsx(
+      OAuthButton,
+      {
+        $isDark: useDarkLogos,
+        icon: useBrandedLogos ? brandedOAuthLogos[method] : oAuthLogos[method],
+        onClick: handleMethodClick(method),
+        $index: index,
+        $totalItems: showMoreButton ? HAS_MORE_LENGTH : methodsToShow.length
+      },
+      method
+    )),
+    showMoreButton && /* @__PURE__ */ jsx(
+      OAuthButton,
+      {
+        $isDark: useDarkLogos,
+        icon: "moreLoginOptions",
+        onClick: handleShowAll,
+        $index: HAS_MORE_LENGTH - 1,
+        $totalItems: HAS_MORE_LENGTH
+      }
+    )
+  ] });
+};
+const OAuthContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+const OAuthButton = styled(StyledCpslTileButton)`
+  flex: ${({ $index, $totalItems }) => getTileButtonFlex($index, $totalItems)};
+
+  --button-icon-color: ${({ $isDark }) => $isDark ? "white" : "black"};
+`;
+export {
+  OAuth
+};

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

@@ -0,0 +1,90 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { constructUrl, getPortalBaseURL } from "@getpara/web-sdk";
+import styled from "styled-components";
+import { useEffect, useRef, useState } from "react";
+import { HeroSpinner } from "@getpara/react-common";
+import { CpslSpinner } from "@getpara/react-components";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
+function TelegramOAuthStep() {
+  const iframe = useRef();
+  const para = useInternalClient();
+  const { verifyTelegram } = useAuthActions();
+  const [url, setUrl] = useState();
+  const [isWaiting, setIsWaiting] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isError, setIsError] = useState(false);
+  useEffect(() => {
+    if (!url) {
+      setUrl(
+        constructUrl({
+          base: getPortalBaseURL(para.ctx, true),
+          path: "/auth/telegram"
+        })
+      );
+    }
+  }, [url]);
+  useEffect(() => {
+    const updateState = (event) => __async(this, null, function* () {
+      switch (event.data.type) {
+        case "TELEGRAM_LOGIN":
+          setIsWaiting(true);
+          setIsError(false);
+          break;
+        case "TELEGRAM_FAILED":
+          setIsWaiting(false);
+          setIsError(true);
+          break;
+        case "TELEGRAM_SUCCESS":
+          if (!!event.data.payload) {
+            const authObject = event.data.payload;
+            verifyTelegram(authObject);
+          }
+          break;
+      }
+    });
+    window == null ? void 0 : window.addEventListener("message", updateState, false);
+    return () => {
+      window == null ? void 0 : window.removeEventListener("message", updateState, false);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(HeroContainer, { children: /* @__PURE__ */ jsx(
+      HeroSpinner,
+      {
+        icon: "telegramBrand",
+        status: isWaiting ? "loading" : isError ? "error" : "inactive",
+        text: isWaiting ? "Follow the on-screen prompts." : isError ? "Login Failed" : void 0
+      }
+    ) }),
+    url && /* @__PURE__ */ jsx(IFrame, { ref: iframe, style: { display: isLoaded ? "block" : "none" }, src: url, onLoad: () => setIsLoaded(true) }),
+    (!url || !isLoaded) && /* @__PURE__ */ jsx(CpslSpinner, {})
+  ] });
+}
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+`;
+const HeroContainer = styled.div`
+  display: flex;
+  min-height: 276px;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+`;
+const IFrame = styled.iframe`
+  width: 100%;
+  height: 52px;
+  border: none;
+`;
+export {
+  TelegramOAuthStep
+};

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

@@ -0,0 +1,23 @@
+"use client";
+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 { useModalStore } from "../../stores/index.js";
+import { CpslSpinner, CpslText } from "@getpara/react-components";
+const AddingFunds = () => {
+  const onRampPurchase = useModalStore((state) => state.onRampPurchase);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) }),
+    /* @__PURE__ */ jsxs(CpslText, { children: [
+      "Follow the prompts presented by",
+      " ",
+      OnRampPurchaseStatus && (onRampPurchase == null ? void 0 : onRampPurchase.provider) ? ON_RAMP_PROVIDERS[onRampPurchase.provider].name : "the provider",
+      "."
+    ] })
+  ] });
+};
+export {
+  AddingFunds
+};