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

package/dist/modal/components/Body/AnimatedHeightWrapper.js

@@ -1,29 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-import { jsx } from "react/jsx-runtime";
-import { motion } from "framer-motion";
-import { useEffect, useRef, useState } from "react";
-import styled from "styled-components";
-const AnimatedHeightWrapper = ({ children, className }) => {
-  const containerRef = useRef(null);
-  const [height, setHeight] = useState("auto");
-  useEffect(() => {
-    if (containerRef.current) {
-      const resizeObserver = new ResizeObserver((entries) => {
-        const observedHeight = entries[0].contentRect.height;
-        setHeight(observedHeight);
-      });
-      resizeObserver.observe(containerRef.current);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, []);
-  return /* @__PURE__ */ jsx(Container, { className, style: { height }, animate: { height }, transition: { duration: 0.2 }, children: /* @__PURE__ */ jsx("div", { ref: containerRef, children }) });
-};
-const Container = styled(motion.div)`
-  overflow: hidden;
-`;
-export {
-  AnimatedHeightWrapper
-};

package/dist/modal/components/Body/Body.js

@@ -1,308 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { styled } from "styled-components";
-import { IFrameSteps, ModalStep } from "../../utils/steps.js";
-import { CpslAlert, CpslIcon } from "@getpara/react-components";
-import { VerificationCodeStep } from "../VerificationCodeStep/VerificationCodeStep.js";
-import { ExternalWalletVerificationStep } from "../ExternalWalletVerificationStep/ExternalWalletVerificationStep.js";
-import { useModalStore, useThemeStore } from "../../stores/index.js";
-import { BiometricLoginStep } from "../BiometricLoginStep/BiometricLoginStep.js";
-import { Setup2FAStep } from "../Setup2FAStep/Setup2FAStep.js";
-import { LoginDoneStep } from "../LoginDoneStep/LoginDoneStep.js";
-import { EnabledFlow } from "@getpara/web-sdk";
-import { AwaitingBiometricsStep } from "../AwaitingBiometricsStep/AwaitingBiometricsStep.js";
-import { AwaitingWalletCreationStep } from "../AwaitingWalletCreationStep/AwaitingWalletCreationStep.js";
-import { WalletCreationDoneStep } from "../WalletCreationDoneStep/WalletCreationDoneStep.js";
-import { RecoverySecretStep } from "../RecoverySecretStep/RecoverySecretStep.js";
-import { TwoFactorDoneStep } from "../TwoFactorDoneStep/TwoFactorDoneStep.js";
-import { BiometricCreationStep } from "../BiometricCreationStep/BiometricCreationStep.js";
-import { AwaitingOAuthStep } from "../AwaitingOAuthStep/AwaitingOAuthStep.js";
-import { AddFundsAwaiting, AddFundsDone, AddFunds } from "../AddFunds/index.js";
-import FarcasterOAuthStep from "../OAuth/FarcasterOAuthStep.js";
-import { Header } from "../Header/Header.js";
-import { AuthMainStep } from "../AuthMainStep/AuthMainStep.js";
-import { BODY_MOTION_VARIANTS, BODY_TRANSITION, MOBILE_SIZE } from "../../constants/constants.js";
-import { Account } from "../Account/Account.js";
-import { AuthOptions } from "../AuthOptions/AuthOptions.js";
-import { ExternalWallets } from "../ExternalWallets/ExternalWallets.js";
-import { ExternalWalletStep } from "../ExternalWalletStep/ExternalWalletStep.js";
-import { Hero } from "../Hero/Hero.js";
-import { AnimatedHeightWrapper } from "./AnimatedHeightWrapper.js";
-import { ChainSwitch } from "../ChainSwitch/ChainSwitch.js";
-import { motion, AnimatePresence } from "framer-motion";
-import { Controls } from "../Controls/Controls.js";
-import { useEffect, useState } from "react";
-import { TelegramOAuthStep } from "../OAuth/TelegramOAuthStep.js";
-import { AwaitingPasswordStep } from "../AwaitingPasswordStep/AwaitingPasswordStep.js";
-import { IFrameStep } from "../IFrameStep/IFrameStep.js";
-const MIN_HEIGHT = {
-  [ModalStep.ADD_FUNDS_AWAITING]: "680px"
-};
-const PADDING_TOP = {
-  [ModalStep.TELEGRAM_OAUTH]: "36px"
-};
-const PADDING_BOTTOM = {
-  [ModalStep.TELEGRAM_OAUTH]: "16px"
-};
-const Body = ({ oAuthMethods, twoFactorAuthEnabled, disableEmailLogin, disablePhoneLogin, onClose }) => {
-  const currentStep = useModalStore((state) => state.step);
-  const onRampConfig = useModalStore((state) => state.onRampConfig);
-  const stepDirection = useModalStore((state) => state.stepDirection);
-  const setStepDirection = useModalStore((state) => state.setStepDirection);
-  const accountAddFundTab = useModalStore((state) => state.accountAddFundTab);
-  const setAccountAddFundTab = useModalStore((state) => state.setAccountAddFundTab);
-  const appName = useThemeStore((state) => state.appName);
-  const embeddedModal = useThemeStore((state) => state.embeddedModal);
-  const [isTestModeAlert, setIsTestModeAlert] = useState(onRampConfig == null ? void 0 : onRampConfig.testMode);
-  const Content = () => {
-    switch (currentStep) {
-      case ModalStep.AUTH_MAIN: {
-        return /* @__PURE__ */ jsx(
-          AuthMainStep,
-          {
-            oAuthMethods,
-            disableEmailLogin,
-            disablePhoneLogin
-          }
-        );
-      }
-      case ModalStep.EX_WALLET_MORE: {
-        return /* @__PURE__ */ jsx(ExternalWallets, {});
-      }
-      case ModalStep.AUTH_MORE: {
-        return /* @__PURE__ */ jsx(
-          AuthOptions,
-          {
-            oAuthMethods,
-            disableEmailLogin,
-            disablePhoneLogin
-          }
-        );
-      }
-      case ModalStep.VERIFICATIONS: {
-        return /* @__PURE__ */ jsx(VerificationCodeStep, {});
-      }
-      case ModalStep.EXTERNAL_WALLET_VERIFICATION: {
-        return /* @__PURE__ */ jsx(ExternalWalletVerificationStep, {});
-      }
-      case ModalStep.BIOMETRIC_LOGIN: {
-        return /* @__PURE__ */ jsx(BiometricLoginStep, {});
-      }
-      case ModalStep.SETUP_2FA:
-      case ModalStep.VERIFY_2FA: {
-        return /* @__PURE__ */ jsx(Setup2FAStep, { onClose });
-      }
-      case ModalStep.LOGIN_DONE: {
-        return /* @__PURE__ */ jsx(LoginDoneStep, { onClose });
-      }
-      case ModalStep.AWAITING_BIOMETRIC_LOGIN:
-      case ModalStep.AWAITING_BIOMETRIC_CREATION: {
-        return /* @__PURE__ */ jsx(AwaitingBiometricsStep, {});
-      }
-      case ModalStep.AWAITING_PASSWORD_LOGIN:
-      case ModalStep.AWAITING_PASSWORD_CREATION: {
-        return /* @__PURE__ */ jsx(AwaitingPasswordStep, {});
-      }
-      case ModalStep.AWAITING_WALLET_CREATION: {
-        return /* @__PURE__ */ jsx(AwaitingWalletCreationStep, {});
-      }
-      case ModalStep.WALLET_CREATION_DONE: {
-        return /* @__PURE__ */ jsx(WalletCreationDoneStep, { twoFactorAuthEnabled, onClose });
-      }
-      case ModalStep.SECRET: {
-        return /* @__PURE__ */ jsx(RecoverySecretStep, {});
-      }
-      case ModalStep.TWO_FACTOR_DONE: {
-        return /* @__PURE__ */ jsx(TwoFactorDoneStep, { onClose });
-      }
-      case ModalStep.BIOMETRIC_CREATION: {
-        return /* @__PURE__ */ jsx(BiometricCreationStep, {});
-      }
-      case ModalStep.AWAITING_OAUTH: {
-        return /* @__PURE__ */ jsx(AwaitingOAuthStep, {});
-      }
-      case ModalStep.FARCASTER_OAUTH: {
-        return /* @__PURE__ */ jsx(FarcasterOAuthStep, {});
-      }
-      case ModalStep.TELEGRAM_OAUTH: {
-        return /* @__PURE__ */ jsx(TelegramOAuthStep, {});
-      }
-      case ModalStep.ADD_FUNDS_BUY:
-      case ModalStep.ADD_FUNDS_RECEIVE:
-      case ModalStep.ADD_FUNDS_WITHDRAW: {
-        return /* @__PURE__ */ jsx(AddFunds, {});
-      }
-      case ModalStep.ADD_FUNDS_AWAITING: {
-        return /* @__PURE__ */ jsx(AddFundsAwaiting, {});
-      }
-      case ModalStep.ADD_FUNDS_SUCCESS: {
-        return /* @__PURE__ */ jsx(AddFundsDone, { isSuccess: true, onClose });
-      }
-      case ModalStep.ADD_FUNDS_FAILURE: {
-        return /* @__PURE__ */ jsx(AddFundsDone, { onClose });
-      }
-      case ModalStep.ACCOUNT_MAIN: {
-        return /* @__PURE__ */ jsx(Account, { onClose });
-      }
-      case ModalStep.EX_WALLET_SELECTED: {
-        return /* @__PURE__ */ jsx(ExternalWalletStep, {});
-      }
-      case ModalStep.CHAIN_SWITCH: {
-        return /* @__PURE__ */ jsx(ChainSwitch, {});
-      }
-      default: {
-        if (IFrameSteps.includes(currentStep)) {
-          return null;
-        }
-      }
-    }
-  };
-  useEffect(() => {
-    if (!isTestModeAlert && (onRampConfig == null ? void 0 : onRampConfig.testMode)) {
-      setIsTestModeAlert(true);
-    }
-  }, [onRampConfig == null ? void 0 : onRampConfig.testMode]);
-  useEffect(() => {
-    switch (currentStep) {
-      case ModalStep.ADD_FUNDS_BUY:
-        setAccountAddFundTab(EnabledFlow.BUY);
-        break;
-      case ModalStep.ADD_FUNDS_RECEIVE:
-        setAccountAddFundTab(EnabledFlow.RECEIVE);
-        break;
-      case ModalStep.ADD_FUNDS_WITHDRAW:
-        setAccountAddFundTab(EnabledFlow.WITHDRAW);
-        break;
-      default:
-        break;
-    }
-  }, [currentStep]);
-  return /* @__PURE__ */ jsxs(Container, { slot: "body", "data-testid": "modal-content", children: [
-    !embeddedModal && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Controls, { onClose }),
-      /* @__PURE__ */ jsx(Header, {})
-    ] }),
-    /* @__PURE__ */ jsxs(AnimatedWrapper, { children: [
-      /* @__PURE__ */ jsx(
-        AnimatePresence,
-        {
-          mode: "popLayout",
-          initial: false,
-          onExitComplete: () => {
-            setStepDirection(1);
-          },
-          custom: stepDirection,
-          children: /* @__PURE__ */ jsxs(
-            BodyContainer,
-            {
-              custom: stepDirection,
-              variants: BODY_MOTION_VARIANTS,
-              initial: "enter",
-              animate: "center",
-              exit: "exit",
-              transition: BODY_TRANSITION,
-              children: [
-                /* @__PURE__ */ jsx(Hero, {}),
-                /* @__PURE__ */ jsxs(
-                  InnerContainer,
-                  {
-                    $embeddedModal: embeddedModal,
-                    $step: currentStep,
-                    $isIFrameStep: IFrameSteps.includes(currentStep),
-                    children: [
-                      Content(),
-                      (onRampConfig == null ? void 0 : onRampConfig.testMode) && [
-                        ModalStep.ADD_FUNDS_BUY,
-                        ModalStep.ADD_FUNDS_WITHDRAW,
-                        ModalStep.ADD_FUNDS_AWAITING,
-                        ModalStep.ADD_FUNDS_FAILURE,
-                        ModalStep.ADD_FUNDS_SUCCESS
-                      ].includes(currentStep) && isTestModeAlert && accountAddFundTab !== EnabledFlow.RECEIVE && /* @__PURE__ */ jsx(TestModeAlert, { children: /* @__PURE__ */ jsxs("div", { style: { fontSize: "14px" }, children: [
-                        "This Para Modal is configured to run on-ramp services in ",
-                        /* @__PURE__ */ jsx("b", { children: "test mode" }),
-                        " only, for development purposes. If you are a user of ",
-                        appName,
-                        ", please contact support.",
-                        /* @__PURE__ */ jsx(CloseButton, { onClick: () => setIsTestModeAlert(false), children: /* @__PURE__ */ jsx(CloseX, { icon: "x" }) })
-                      ] }) })
-                    ]
-                  }
-                )
-              ]
-            },
-            ["ADD_FUNDS_BUY", "ADD_FUNDS_RECEIVE", "ADD_FUNDS_WITHDRAW"].includes(currentStep) ? "ADD_FUNDS" : currentStep
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(IFrameStep, {})
-    ] })
-  ] });
-};
-const Container = styled.div`
-  position: relative;
-`;
-const AnimatedWrapper = styled(AnimatedHeightWrapper)`
-  margin-top: -16px;
-`;
-const BodyContainer = styled(motion.div)`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  will-change: auto !important;
-`;
-const InnerContainer = styled.div`
-  z-index: 1;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  gap: 24px;
-  padding: ${({ $embeddedModal, $step, $isIFrameStep }) => {
-  var _a, _b;
-  return $isIFrameStep ? "0px" : $embeddedModal ? "12px 0px 0px" : `${(_a = PADDING_TOP[$step]) != null ? _a : "72px"} 72px ${(_b = PADDING_BOTTOM[$step]) != null ? _b : "32px"}`;
-}};
-  min-height: ${({ $step }) => {
-  var _a;
-  return (_a = MIN_HEIGHT[$step]) != null ? _a : "auto";
-}};
-  height: ${({ $step }) => {
-  var _a;
-  return (_a = MIN_HEIGHT[$step]) != null ? _a : "auto";
-}};
-
-  @media (max-width: ${MOBILE_SIZE}px) {
-    padding: ${({ $embeddedModal, $step, $isIFrameStep }) => {
-  var _a;
-  return $isIFrameStep ? "0px" : $embeddedModal ? "12px 0px 0px" : `${(_a = PADDING_TOP[$step]) != null ? _a : "72px"} 16px 0px`;
-}};
-  }
-
-  cpsl-auth-modal.force-mobile-media & {
-    padding: 72px 16px 0px;
-  }
-`;
-const TestModeAlert = styled(CpslAlert)`
-  --container-padding-end: 40px;
-  position: absolute;
-  bottom: 16px;
-  left: 16px;
-  right: 16px;
-  z-index: 1000;
-`;
-const CloseButton = styled.button`
-  background-color: transparent;
-  border: none;
-  padding: 4px;
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  right: 0;
-`;
-const CloseX = styled(CpslIcon)`
-  --icon-color: var(--cpsl-color-foreground-0);
-`;
-export {
-  Body
-};

package/dist/modal/components/ChainSwitch/ChainSwitch.js

@@ -1,94 +0,0 @@
-"use client";
-import {
-  __async
-} from "../../../chunk-MMUBH76A.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
-import { CenteredText, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
-import { useEffect, useMemo } from "react";
-import { useModalStore } from "../../stores/index.js";
-import styled from "styled-components";
-import { useExternalWallets } from "../../providers/ExternalWalletContext.js";
-import { useCopyToClipboard } from "@getpara/react-common";
-import { ModalStep } from "../../utils/steps.js";
-import { routeMobileExternalWallet } from "../../utils/routeMobileExternalWallet.js";
-import { NETWORK_NOT_SUPPORTED_ERROR } from "../../constants/constants.js";
-import { WalletType } from "@getpara/web-sdk";
-const ChainSwitch = () => {
-  const [isCopied, copy] = useCopyToClipboard();
-  const externalWalletError = useModalStore((state) => state.externalWalletError);
-  const setStep = useModalStore((state) => state.setStep);
-  const setStepDirection = useModalStore((state) => state.setStepDirection);
-  const { switchChain, wallet, qrUri, chainIdSwitchingTo, walletDisplayHelpers } = useExternalWallets();
-  useEffect(() => {
-    if ((wallet == null ? void 0 : wallet.type) === WalletType.COSMOS) {
-      routeMobileExternalWallet(qrUri);
-    }
-  }, [qrUri, wallet]);
-  useEffect(() => {
-    if (!wallet) {
-      setStepDirection(-1);
-      setStep(ModalStep.ACCOUNT_MAIN);
-    }
-  }, [wallet]);
-  const handleTryAgainClick = () => __async(void 0, null, function* () {
-    if (chainIdSwitchingTo) {
-      yield switchChain(chainIdSwitchingTo);
-    }
-  });
-  const handleCopy = () => {
-    copy(qrUri);
-  };
-  const Content = useMemo(() => {
-    var _a;
-    if (!wallet) {
-      return null;
-    }
-    const { isCosmosMobileWallet } = walletDisplayHelpers;
-    if (isCosmosMobileWallet) {
-      return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-        /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", children: "Scan with your mobile device to switch networks" }),
-        /* @__PURE__ */ jsx(QRContainer, { children: !qrUri ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: qrUri, imageSrc: wallet.iconUrl }) }),
-        /* @__PURE__ */ jsxs(CpslButton, { size: "small", variant: "ghost", onClick: handleCopy, children: [
-          /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: isCopied ? "check" : "copy" }),
-          isCopied ? "Copied" : "Copy Link"
-        ] })
-      ] }) });
-    }
-    return /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      !(externalWalletError == null ? void 0 : externalWalletError.length) ? /* @__PURE__ */ jsx(CenteredText, { color: "contrast", weight: "semiBold", children: `Confirm the request to change networks in your ${wallet.name} wallet.` }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs(ErrorContainer, { children: [
-          /* @__PURE__ */ jsx(ErrorIcon, { icon: "alertCircle" }),
-          /* @__PURE__ */ jsx(CenteredText, { weight: "semiBold", color: "error", children: externalWalletError[0] })
-        ] }),
-        externalWalletError[1] && /* @__PURE__ */ jsx(CenteredText, { color: "secondary", weight: "medium", children: externalWalletError[1] })
-      ] }),
-      ((_a = externalWalletError == null ? void 0 : externalWalletError[0]) == null ? void 0 : _a.toLowerCase()) !== NETWORK_NOT_SUPPORTED_ERROR && /* @__PURE__ */ jsxs(CpslButton, { variant: "secondary", onClick: handleTryAgainClick, children: [
-        /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "refresh" }),
-        "Try Again"
-      ] })
-    ] });
-  }, [wallet, walletDisplayHelpers, externalWalletError, qrUri]);
-  if (!wallet) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Container, { children: Content });
-};
-const Container = styled(StepContainer)`
-  flex: 1;
-  justify-content: space-between;
-`;
-const ErrorContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-`;
-const ErrorIcon = styled(CpslIcon)`
-  --height: 16px;
-  --width: 16px;
-  --icon-color: var(--cpsl-color-text-error);
-`;
-export {
-  ChainSwitch
-};

package/dist/modal/components/ChainSwitch/config.js

@@ -1,17 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-var TabValue = /* @__PURE__ */ ((TabValue2) => {
-  TabValue2["extension"] = "extension";
-  TabValue2["mobile"] = "mobile";
-  TabValue2["web"] = "web";
-  return TabValue2;
-})(TabValue || {});
-const TABS = {
-  extension: { label: "Extension", value: "extension" /* extension */, icon: "puzzlePiece" },
-  mobile: { label: "Mobile", value: "mobile" /* mobile */, icon: "phone" },
-  web: { label: "Web", value: "web" /* web */, icon: "globe" }
-};
-export {
-  TABS,
-  TabValue
-};

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

@@ -1,74 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CpslIcon } from "@getpara/react-components";
-import { styled } from "styled-components";
-import { useModalStore } from "../../stores/index.js";
-import { useThemeStore } from "../../stores/theme/useThemeStore.js";
-import { useGoBack } from "../../hooks/useGoBack.js";
-import { AccountSelect, ChainSelect } from "./Selects.js";
-import { ModalStep } from "../../utils/steps.js";
-import { HeaderButton } from "@getpara/react-common";
-const Controls = ({ onClose }) => {
-  const bareModal = useThemeStore((state) => state.bareModal);
-  const hasPreviousStep = useModalStore((state) => state.hasPreviousStep());
-  const step = useModalStore((state) => state.step);
-  const isFullyLoggedIn = useModalStore((state) => state.isFullyLoggedIn);
-  const goBack = useGoBack();
-  const shouldShowSelects = [
-    ModalStep.ACCOUNT_MAIN,
-    ModalStep.CHAIN_SWITCH,
-    ModalStep.ADD_FUNDS_BUY,
-    ModalStep.ADD_FUNDS_RECEIVE,
-    ModalStep.ADD_FUNDS_WITHDRAW
-  ].includes(step);
-  const handleBackClick = () => {
-    goBack();
-  };
-  return /* @__PURE__ */ jsxs(Container, { children: [
-    /* @__PURE__ */ jsx(
-      BackButton,
-      {
-        variant: "ghost",
-        style: {
-          visibility: hasPreviousStep ? "visible" : "hidden"
-        },
-        onClick: handleBackClick,
-        children: /* @__PURE__ */ jsx(CpslIcon, { icon: "arrow" })
-      }
-    ),
-    /* @__PURE__ */ jsx(MiddleContainer, { children: shouldShowSelects && isFullyLoggedIn && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(ChainSelect, {}),
-      /* @__PURE__ */ jsx(AccountSelect, {})
-    ] }) }),
-    /* @__PURE__ */ jsx(CloseButton, { bareModal, variant: "ghost", onClick: onClose, children: /* @__PURE__ */ jsx(CpslIcon, { icon: "close" }) })
-  ] });
-};
-const Container = styled.div`
-  position: absolute;
-  width: 100%;
-  top: 16px;
-
-  z-index: 3;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-`;
-const MiddleContainer = styled.div`
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-`;
-const CloseButton = styled(HeaderButton)`
-  transform: rotate(180deg);
-  visibility: ${({ bareModal }) => bareModal ? "hidden" : "visible"};
-`;
-const BackButton = styled(HeaderButton)`
-  transform: rotate(180deg);
-`;
-export {
-  Controls
-};