@getpara/react-sdk 1.1.0 → 1.3.0

package/dist/modal/components/AuthMainStep/AuthMainStepContent.js

@@ -1,89 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment, useMemo } from 'react';
-import { CpslButton, CpslDivider, CpslIconGroup } from '@getpara/react-components';
-import styled from 'styled-components';
-import { useExternalWallets } from '../../providers/ExternalWalletContext.js';
-import { ExternalWallets } from '../ExternalWallets/ExternalWallets.js';
-import { useModalStore, useThemeStore } from '../../stores/index.js';
-import { ModalStep } from '../../utils/steps.js';
-import { AuthLayout } from '../../types/modalProps.js';
-import { brandedOAuthLogos, oAuthLogos } from '../../constants/oAuthLogos.js';
-import { AuthOptions } from '../AuthOptions/AuthOptions.js';
-export const AuthMainStepContent = ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }) => {
-    const { wallets } = useExternalWallets();
-    const authLayout = useThemeStore(state => state.authLayout);
-    const setStep = useModalStore(state => state.setStep);
-    const oAuthLogoVariant = useThemeStore(state => state.oAuthLogoVariant);
-    const isDark = useThemeStore(state => state.isDark);
-    const useBrandedLogos = oAuthLogoVariant === 'default';
-    const useDarkLogos = useBrandedLogos ? isDark : oAuthLogoVariant !== 'dark';
-    const handleCondensedAuthClick = () => {
-        setStep(ModalStep.AUTH_MORE);
-    };
-    const handleCondensedExternalClick = () => {
-        setStep(ModalStep.EX_WALLET_MORE);
-    };
-    const Content = useMemo(() => {
-        const methods = [];
-        authLayout.forEach(layout => {
-            switch (layout) {
-                case AuthLayout.AUTH_FULL: {
-                    methods.push([
-                        _jsx(AuthOptions, { oAuthMethods: oAuthMethods, disableEmailLogin: disableEmailLogin, disablePhoneLogin: disablePhoneLogin }, "authFull"),
-                        layout,
-                    ]);
-                    break;
-                }
-                case AuthLayout.AUTH_CONDENSED: {
-                    const icons = [];
-                    oAuthMethods === null || oAuthMethods === void 0 ? void 0 : oAuthMethods.forEach(method => icons.push(useBrandedLogos ? brandedOAuthLogos[method] : oAuthLogos[method]));
-                    methods.push([
-                        _jsxs(CondensedButton, { onClick: handleCondensedAuthClick, variant: "tertiary", fullWidth: true, children: [_jsx(IconGroupSpacer, { slot: "start", icons: [], "$isDark": useDarkLogos }), "Sign Up or Login", _jsx(StyledIconGroup, { slot: "end", icons: icons.splice(0, 3), "$isDark": useDarkLogos })] }, "authCondensed"),
-                        layout,
-                    ]);
-                    break;
-                }
-                case AuthLayout.EXTERNAL_FULL: {
-                    if (!!wallets.length) {
-                        methods.push([_jsx(ExternalWallets, {}, "externalWallets"), layout]);
-                    }
-                    break;
-                }
-                case AuthLayout.EXTERNAL_CONDENSED: {
-                    const icons = [];
-                    wallets === null || wallets === void 0 ? void 0 : wallets.forEach(wallet => icons.push(wallet.iconUrl));
-                    methods.push([
-                        _jsxs(CondensedButton, { onClick: handleCondensedExternalClick, variant: "tertiary", fullWidth: true, children: [_jsx(IconGroupSpacer, { slot: "start", icons: [], "$isDark": useDarkLogos }), "Connect Wallet", _jsx(StyledIconGroup, { slot: "end", icons: icons.splice(0, 3), "$isDark": useDarkLogos })] }, "authCondensed"),
-                        layout,
-                    ]);
-                    break;
-                }
-                default: {
-                    break;
-                }
-            }
-        });
-        return (_jsx(_Fragment, { children: methods.map(([reactNode, key], index) => (_jsxs(Fragment, { children: [reactNode, methods.length > 1 && index < methods.length - 1 && _jsx(CpslDivider, { children: "or" }, "or")] }, key))) }));
-    }, [oAuthMethods, disableEmailLogin, disablePhoneLogin, wallets, authLayout]);
-    return _jsx(Container, { "data-testid": "main-auth-step-content", children: Content });
-};
-const Container = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;
-const StyledIconGroup = styled(CpslIconGroup) `
-  --icon-item-color: ${({ $isDark }) => ($isDark ? 'white' : 'black')};
-  flex: 1;
-  justify-content: flex-end;
-`;
-const IconGroupSpacer = styled(StyledIconGroup) `
-  visibility: hidden;
-`;
-const CondensedButton = styled(CpslButton) `
-  --button-justify-content: space-between;
-
-  &::part(button-native) {
-    max-height: 50px;
-  }
-`;

package/dist/modal/components/AuthOptions/AuthOptions.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import styled from 'styled-components';
-import { OAuth } from '../OAuth/OAuth.js';
-import { AuthInput } from '../AuthInput/AuthInput.js';
-import { useExternalWallets } from '../../providers/ExternalWalletContext.js';
-import { useModalStore } from '../../stores/index.js';
-import { ModalStep } from '../../utils/steps.js';
-export const AuthOptions = ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }) => {
-    const { wallets } = useExternalWallets();
-    const showAllOAuth = useModalStore(state => state.step === ModalStep.AUTH_MORE);
-    const Content = useMemo(() => {
-        const Methods = [];
-        if (!!(oAuthMethods === null || oAuthMethods === void 0 ? void 0 : oAuthMethods.length)) {
-            Methods.push(_jsx(OAuth, { methods: oAuthMethods }, "oAuth"));
-        }
-        if (!disableEmailLogin || !disablePhoneLogin) {
-            Methods.push(_jsx(AuthInput, { disableEmailLogin: disableEmailLogin, disablePhoneLogin: disablePhoneLogin }, "input"));
-        }
-        return _jsx(_Fragment, { children: Methods });
-    }, [showAllOAuth, oAuthMethods, disableEmailLogin, disablePhoneLogin, wallets]);
-    return _jsx(Container, { children: Content });
-};
-const Container = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;

package/dist/modal/components/AwaitingBiometricsStep/AwaitingBiometricsStep.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useModalStore } from '../../stores/index.js';
-import { Waiting } from '../Waiting/Waiting.js';
-export const AwaitingBiometricsStep = () => {
-    const isLogin = useModalStore(state => state.isLogin());
-    return (_jsx(Waiting, { heading: isLogin ? 'Waiting for Passkey' : 'Creating Passkey', subheading: "Follow the prompts presented by your browser." }));
-};

package/dist/modal/components/AwaitingOAuthStep/AwaitingOAuthStep.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Waiting } from '../Waiting/Waiting.js';
-export const AwaitingOAuthStep = () => {
-    return _jsx(Waiting, { heading: "Complete Login", subheading: "Follow the prompts presented by your browser." });
-};

package/dist/modal/components/AwaitingPasswordStep/AwaitingPasswordStep.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useModalStore } from '../../stores/index.js';
-import { Waiting } from '../Waiting/Waiting.js';
-export const AwaitingPasswordStep = () => {
-    const isLogin = useModalStore(state => state.isLogin());
-    return (_jsx(Waiting, { heading: isLogin ? 'Waiting for Password' : 'Creating Password', subheading: "Follow the prompts presented by your browser." }));
-};

package/dist/modal/components/AwaitingWalletCreationStep/AwaitingWalletCreationStep.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CpslIcon, CpslInfoBox, CpslText } from '@getpara/react-components';
-import { InfoBoxContent, InfoBoxHeader, StepContainer } from '../common.js';
-import { useEffect, useRef, useState } from 'react';
-import { Waiting } from '../Waiting/Waiting.js';
-import { useThemeStore } from '../../stores/index.js';
-export const AwaitingWalletCreationStep = () => {
-    const hideWallets = useThemeStore(state => state.hideWallets);
-    const [showInfoBox, setShowInfoBox] = useState(false);
-    const showInfoBoxTimeout = useRef();
-    useEffect(() => {
-        showInfoBoxTimeout.current = window.setTimeout(() => {
-            setShowInfoBox(true);
-        }, 4000);
-        return () => clearTimeout(showInfoBoxTimeout.current);
-    }, []);
-    return (_jsxs(StepContainer, { "$wide": true, children: [_jsx(Waiting, { heading: hideWallets ? 'Creating Your Account' : 'Creating Your Wallet', subheading: "This should only take a couple of seconds." }), showInfoBox && (_jsx(CpslInfoBox, { children: _jsxs(InfoBoxContent, { children: [_jsxs(InfoBoxHeader, { children: [_jsx(CpslIcon, { icon: "clock" }), _jsx(CpslText, { weight: "medium", children: "Hang on" })] }), _jsxs(CpslText, { variant: "bodyS", weight: "medium", color: "secondary", children: ["Creating your ", hideWallets ? 'account' : 'wallet', " is taking a little longer than expected, but we're working on it!"] })] }) }))] }));
-};

package/dist/modal/components/BiometricCreationStep/BiometricCreationStep.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CpslButton, CpslDivider, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from '@getpara/react-components';
-import { useModalStore, useUserInfoStore } from '../../stores/index.js';
-import { InnerStepContainer, StepContainer, Heading, QRContainer } from '../common.js';
-import { isPasskeySupported } from '../../utils/isPasskeySupported.js';
-import { useCopyToClipboard, UserIdentifier } from '@getpara/react-common';
-export const BiometricCreationStep = ({ handlePasswordClick, handlePasskeyClick, }) => {
-    const webAuthURLForCreate = useModalStore(state => state.webAuthURLForCreate);
-    const iFrameUrl = useModalStore(state => state.iFrameUrl);
-    const authInfo = useUserInfoStore(state => state.getAuthInfo());
-    const [isCopied, copy] = useCopyToClipboard();
-    const handleCopy = () => {
-        copy(webAuthURLForCreate);
-    };
-    const isBoth = !!webAuthURLForCreate && !!iFrameUrl;
-    return (_jsxs(StepContainer, { "$wide": true, children: [_jsxs(InnerStepContainer, { children: [_jsx(Heading, { variant: "headingS", weight: "bold", children: isBoth ? 'Secure Your Account' : 'Create Passkey' }), _jsx(UserIdentifier, Object.assign({}, authInfo)), _jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: isBoth ? 'Choose a password or set up a passkey' : 'Your Passkey keeps your account safe.' })] }), _jsxs(InnerStepContainer, { children: [isPasskeySupported() ? (_jsxs(CpslButton, { fullWidth: true, onClick: handlePasskeyClick, children: [_jsx(CpslIcon, { slot: "start", icon: "key" }), isBoth ? 'Create Passkey' : 'Create'] })) : (_jsxs(_Fragment, { children: [_jsx(CpslText, { weight: "semiBold", children: "Scan with your mobile device" }), _jsx(QRContainer, { children: !webAuthURLForCreate ? _jsx(CpslSpinner, { size: 100 }) : _jsx(CpslQrCode, { url: webAuthURLForCreate }) }), _jsxs(CpslButton, { size: "small", variant: "ghost", onClick: handleCopy, children: [_jsx(CpslIcon, { slot: "start", icon: isCopied ? 'check' : 'copy' }), isCopied ? 'Copied' : 'Copy Link'] })] })), isBoth && (_jsxs(_Fragment, { children: [_jsx(CpslDivider, { children: "or" }), _jsxs(CpslButton, { fullWidth: true, onClick: handlePasswordClick, children: [_jsx(CpslIcon, { slot: "start", icon: "passcode" }), "Choose Password"] })] }))] })] }));
-};

package/dist/modal/components/BiometricLoginStep/BiometricLoginStep.js

@@ -1,131 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CpslButton, CpslDivider, CpslIcon } from '@getpara/react-components';
-import { useEffect, useMemo, useState } from 'react';
-import { useModalStore, useUserInfoStore } from '../../stores/index.js';
-import { ModalStep } from '../../utils/steps.js';
-import { Heading, StepContainer, InnerStepContainer } from '../common.js';
-import { openPopup } from '../../utils/openPopup.js';
-import styled from 'styled-components';
-import { AuthMethod, getPublicKeyHex } from '@getpara/web-sdk';
-import { isPasskeySupported } from '../../utils/isPasskeySupported.js';
-import { formatBiometricHints, KnownDevices, UserIdentifier } from '@getpara/react-common';
-import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
-export const BiometricLoginStep = () => {
-    const popupWindow = useModalStore(state => state.popupWindow);
-    const supportedAuthMethods = useModalStore(state => state.supportedAuthMethods);
-    const passwordUrlForLogin = useModalStore(state => state.passwordUrlForLogin);
-    const webAuthURLForLogin = useModalStore(state => state.webAuthURLForLogin);
-    const setStep = useModalStore(state => state.setStep);
-    const setPopupWindow = useModalStore(state => state.setPopupWindow);
-    const biometricLocationHints = useModalStore(state => state.biometricLocationHints);
-    const para = useInternalClient();
-    const authInfo = useUserInfoStore(state => state.getAuthInfo());
-    const setWebAuthURLForLogin = useModalStore(state => state.setWebAuthURLForLogin);
-    const setPasswordUrlForLogin = useModalStore(state => state.setPasswordUrlForLogin);
-    const passkeysSupported = isPasskeySupported();
-    const formattedHints = useMemo(() => formatBiometricHints(biometricLocationHints), [biometricLocationHints]);
-    const setSupportedAuthMethods = useModalStore(state => state.setSupportedAuthMethods);
-    const [webAuthURLForKnownDeviceLogin, setWebAuthURLForKnownDeviceLogin] = useState();
-    useEffect(() => {
-        function setLinks() {
-            return __awaiter(this, void 0, void 0, function* () {
-                if (!(supportedAuthMethods === null || supportedAuthMethods === void 0 ? void 0 : supportedAuthMethods.size) && para.getUserId()) {
-                    const fetchedSupportedAuthMethods = yield para.supportedAuthMethods({ userId: para.getUserId() });
-                    if (fetchedSupportedAuthMethods === null || fetchedSupportedAuthMethods === void 0 ? void 0 : fetchedSupportedAuthMethods.size) {
-                        setSupportedAuthMethods(fetchedSupportedAuthMethods);
-                    }
-                    return;
-                }
-                if (!para.isEmail && !para.isPhone && !para.isFarcaster && !para.isTelegram) {
-                    return;
-                }
-                if (!para.loginEncryptionKeyPair) {
-                    return;
-                }
-                const authType = para.isEmail ? 'email' : para.isPhone ? 'phone' : para.isFarcaster ? 'farcaster' : 'telegram';
-                const res = yield para.touchSession();
-                const webAuthUrlForLogin = (supportedAuthMethods === null || supportedAuthMethods === void 0 ? void 0 : supportedAuthMethods.has) && supportedAuthMethods.has(AuthMethod.PASSKEY)
-                    ? yield para.getWebAuthURLForLogin({
-                        sessionId: res.data.sessionId,
-                        loginEncryptionPublicKey: getPublicKeyHex(para.loginEncryptionKeyPair),
-                        partnerId: res.data.partnerId,
-                        authType,
-                        displayName: authInfo.displayName,
-                        pfpUrl: authInfo.pfpUrl,
-                    })
-                    : undefined;
-                const _webAuthURLForKnownDeviceLogin = (supportedAuthMethods === null || supportedAuthMethods === void 0 ? void 0 : supportedAuthMethods.has) && supportedAuthMethods.has(AuthMethod.PASSKEY)
-                    ? yield para.getWebAuthURLForLogin({
-                        sessionId: res.data.sessionId,
-                        loginEncryptionPublicKey: getPublicKeyHex(para.loginEncryptionKeyPair),
-                        partnerId: res.data.partnerId,
-                        newDeviceSessionId: res.data.sessionLookupId,
-                        newDeviceEncryptionKey: getPublicKeyHex(para.loginEncryptionKeyPair),
-                        authType,
-                        displayName: authInfo.displayName,
-                        pfpUrl: authInfo.pfpUrl,
-                    })
-                    : undefined;
-                const passwordAuthUrlForLogin = (supportedAuthMethods === null || supportedAuthMethods === void 0 ? void 0 : supportedAuthMethods.has) && supportedAuthMethods.has(AuthMethod.PASSWORD)
-                    ? yield para.getPasswordURLForLogin({
-                        sessionId: res.data.sessionId,
-                        loginEncryptionPublicKey: getPublicKeyHex(para.loginEncryptionKeyPair),
-                        partnerId: res.data.partnerId,
-                        authType,
-                        displayName: authInfo.displayName,
-                        pfpUrl: authInfo.pfpUrl,
-                    })
-                    : undefined;
-                const shortWebAuthLoginLink = webAuthUrlForLogin ? yield para.shortenLoginLink(webAuthUrlForLogin) : undefined;
-                const shortWebAuthForKnownDeviceLoginLink = _webAuthURLForKnownDeviceLogin
-                    ? yield para.shortenLoginLink(_webAuthURLForKnownDeviceLogin)
-                    : undefined;
-                setWebAuthURLForKnownDeviceLogin(shortWebAuthForKnownDeviceLoginLink);
-                setWebAuthURLForLogin(shortWebAuthLoginLink);
-                setPasswordUrlForLogin(passwordAuthUrlForLogin);
-            });
-        }
-        setLinks();
-    }, [supportedAuthMethods, para]);
-    const handlePasskeyClick = () => {
-        if (!!popupWindow) {
-            return;
-        }
-        const loginWindow = openPopup(webAuthURLForLogin, 'ParaPasskey', 'LOGIN_PASSKEY');
-        setPopupWindow(loginWindow);
-        setStep(ModalStep.AWAITING_BIOMETRIC_LOGIN);
-    };
-    const handlePasswordClick = () => {
-        const loginWindow = openPopup(passwordUrlForLogin, 'ParaPassword', 'LOGIN_PASSWORD');
-        setPopupWindow(loginWindow);
-        setStep(ModalStep.AWAITING_PASSWORD_LOGIN);
-    };
-    function shouldShowWelcomeBack() {
-        return (!(biometricLocationHints === null || biometricLocationHints === void 0 ? void 0 : biometricLocationHints.length) ||
-            (passkeysSupported && formattedHints.isOnKnownDevice) ||
-            ((supportedAuthMethods === null || supportedAuthMethods === void 0 ? void 0 : supportedAuthMethods.has) && supportedAuthMethods.has(AuthMethod.PASSWORD)));
-    }
-    return (_jsxs(StepContainer, { "$wide": true, children: [_jsxs(InnerStepContainer, { children: [shouldShowWelcomeBack() && (_jsx(Heading, { variant: "headingS", weight: "bold", children: "Welcome back," })), _jsx(UserIdentifier, Object.assign({}, authInfo))] }), _jsxs(MainContainer, { children: [(supportedAuthMethods === null || supportedAuthMethods === void 0 ? void 0 : supportedAuthMethods.has) && supportedAuthMethods.has(AuthMethod.PASSWORD) && passwordUrlForLogin && (_jsx(PasswordOnly, { handlePasswordClick: handlePasswordClick })), (supportedAuthMethods === null || supportedAuthMethods === void 0 ? void 0 : supportedAuthMethods.has) &&
-                        supportedAuthMethods.has(AuthMethod.PASSKEY) &&
-                        webAuthURLForLogin &&
-                        webAuthURLForKnownDeviceLogin && (_jsx(BiometricOnly, { handlePasskeyClick: handlePasskeyClick, formattedHints: formattedHints, shortLoginLink: webAuthURLForKnownDeviceLogin, passkeysSupported: passkeysSupported, biometricLocationHints: biometricLocationHints }))] })] }));
-};
-const PasswordOnly = ({ handlePasswordClick }) => {
-    return (_jsx(CpslButton, { fullWidth: true, onClick: handlePasswordClick, children: "Login" }));
-};
-const BiometricOnly = ({ handlePasskeyClick, formattedHints, shortLoginLink, passkeysSupported, biometricLocationHints = [], }) => {
-    const [hasHints, isOnKnownDevice] = [biometricLocationHints.length > 0, formattedHints.isOnKnownDevice];
-    return (_jsxs(_Fragment, { children: [((hasHints && !isOnKnownDevice) || !passkeysSupported) && (_jsx(KnownDevices, { hints: formattedHints, link: shortLoginLink })), passkeysSupported && (_jsxs(_Fragment, { children: [hasHints && !isOnKnownDevice && _jsx(CpslDivider, { children: "or" }), _jsx(CpslButton, { fullWidth: true, onClick: handlePasskeyClick, children: !hasHints || isOnKnownDevice ? (_jsxs(_Fragment, { children: [_jsx(CpslIcon, { slot: "start", icon: "key" }), "Login with passkey"] })) : ('Continue anyway') })] }))] }));
-};
-const MainContainer = styled(InnerStepContainer) `
-  gap: 16px;
-`;

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

@@ -1,26 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { motion } from 'framer-motion';
-import { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
-export const AnimatedHeightWrapper = ({ children, className }) => {
-    const containerRef = useRef(null);
-    const [height, setHeight] = useState('auto');
-    useEffect(() => {
-        if (containerRef.current) {
-            const resizeObserver = new ResizeObserver(entries => {
-                // We only have one entry, so we can use entries[0].
-                const observedHeight = entries[0].contentRect.height;
-                setHeight(observedHeight);
-            });
-            resizeObserver.observe(containerRef.current);
-            return () => {
-                // Cleanup the observer when the component is unmounted
-                resizeObserver.disconnect();
-            };
-        }
-    }, []);
-    return (_jsx(Container, { className: className, style: { height }, animate: { height }, transition: { duration: 0.2 }, children: _jsx("div", { ref: containerRef, children: children }) }));
-};
-const Container = styled(motion.div) `
-  overflow: hidden;
-`;

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

@@ -1,232 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _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 { 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',
-};
-export const Body = ({ oAuthMethods, twoFactorAuthEnabled, disableEmailLogin, disablePhoneLogin, onClose, createAccountWithPasskey, createAccountWithPassword, }) => {
-    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 || onRampConfig === void 0 ? void 0 : onRampConfig.testMode);
-    const Content = () => {
-        switch (currentStep) {
-            case ModalStep.AUTH_MAIN: {
-                return (_jsx(AuthMainStep, { oAuthMethods: oAuthMethods, disableEmailLogin: disableEmailLogin, disablePhoneLogin: disablePhoneLogin }));
-            }
-            case ModalStep.EX_WALLET_MORE: {
-                return _jsx(ExternalWallets, {});
-            }
-            case ModalStep.AUTH_MORE: {
-                return (_jsx(AuthOptions, { oAuthMethods: oAuthMethods, disableEmailLogin: disableEmailLogin, disablePhoneLogin: disablePhoneLogin }));
-            }
-            case ModalStep.VERIFICATIONS: {
-                return _jsx(VerificationCodeStep, {});
-            }
-            case ModalStep.BIOMETRIC_LOGIN: {
-                return _jsx(BiometricLoginStep, {});
-            }
-            case ModalStep.SETUP_2FA:
-            case ModalStep.VERIFY_2FA: {
-                return _jsx(Setup2FAStep, { onClose: onClose });
-            }
-            case ModalStep.LOGIN_DONE: {
-                return _jsx(LoginDoneStep, { onClose: onClose });
-            }
-            case ModalStep.AWAITING_BIOMETRIC_LOGIN:
-            case ModalStep.AWAITING_BIOMETRIC_CREATION: {
-                return _jsx(AwaitingBiometricsStep, {});
-            }
-            case ModalStep.AWAITING_PASSWORD_LOGIN:
-            case ModalStep.AWAITING_PASSWORD_CREATION: {
-                return _jsx(AwaitingPasswordStep, {});
-            }
-            case ModalStep.AWAITING_WALLET_CREATION: {
-                return _jsx(AwaitingWalletCreationStep, {});
-            }
-            case ModalStep.WALLET_CREATION_DONE: {
-                return _jsx(WalletCreationDoneStep, { twoFactorAuthEnabled: twoFactorAuthEnabled, onClose: onClose });
-            }
-            case ModalStep.SECRET: {
-                return _jsx(RecoverySecretStep, {});
-            }
-            case ModalStep.TWO_FACTOR_DONE: {
-                return _jsx(TwoFactorDoneStep, { onClose: onClose });
-            }
-            case ModalStep.BIOMETRIC_CREATION: {
-                return (_jsx(BiometricCreationStep, { handlePasswordClick: createAccountWithPassword, handlePasskeyClick: createAccountWithPasskey }));
-            }
-            case ModalStep.AWAITING_OAUTH: {
-                return _jsx(AwaitingOAuthStep, {});
-            }
-            case ModalStep.FARCASTER_OAUTH: {
-                return _jsx(FarcasterOAuthStep, {});
-            }
-            case ModalStep.TELEGRAM_OAUTH: {
-                return _jsx(TelegramOAuthStep, {});
-            }
-            case ModalStep.ADD_FUNDS_BUY:
-            case ModalStep.ADD_FUNDS_RECEIVE:
-            case ModalStep.ADD_FUNDS_WITHDRAW: {
-                return _jsx(AddFunds, {});
-            }
-            case ModalStep.ADD_FUNDS_AWAITING: {
-                return _jsx(AddFundsAwaiting, {});
-            }
-            case ModalStep.ADD_FUNDS_SUCCESS: {
-                return _jsx(AddFundsDone, { isSuccess: true, onClose: onClose });
-            }
-            case ModalStep.ADD_FUNDS_FAILURE: {
-                return _jsx(AddFundsDone, { onClose: onClose });
-            }
-            case ModalStep.ACCOUNT_MAIN: {
-                return _jsx(Account, { onClose: onClose });
-            }
-            case ModalStep.EX_WALLET_SELECTED: {
-                return _jsx(ExternalWalletStep, {});
-            }
-            case ModalStep.CHAIN_SWITCH: {
-                return _jsx(ChainSwitch, {});
-            }
-            default: {
-                if (IFrameSteps.includes(currentStep)) {
-                    return null;
-                }
-            }
-        }
-    };
-    useEffect(() => {
-        if (!isTestModeAlert && (onRampConfig === null || onRampConfig === void 0 ? void 0 : onRampConfig.testMode)) {
-            setIsTestModeAlert(true);
-        }
-    }, [onRampConfig === null || onRampConfig === void 0 ? 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 (_jsxs(Container, { slot: "body", "data-testid": "modal-content", children: [!embeddedModal && (_jsxs(_Fragment, { children: [_jsx(Controls, { onClose: onClose }), _jsx(Header, {})] })), _jsxs(AnimatedWrapper, { children: [_jsx(AnimatePresence, { mode: "popLayout", initial: false, onExitComplete: () => {
-                            setStepDirection(1);
-                        }, custom: stepDirection, children: _jsxs(BodyContainer, { custom: stepDirection, variants: BODY_MOTION_VARIANTS, initial: "enter", animate: "center", exit: "exit", transition: BODY_TRANSITION, children: [_jsx(Hero, {}), _jsxs(InnerContainer, { "$embeddedModal": embeddedModal, "$step": currentStep, "$isIFrameStep": IFrameSteps.includes(currentStep), children: [Content(), (onRampConfig === null || onRampConfig === void 0 ? 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 && (_jsx(TestModeAlert, { children: _jsxs("div", { style: { fontSize: '14px' }, children: ["This Para Modal is configured to run on-ramp services in ", _jsx("b", { children: "test mode" }), " only, for development purposes. If you are a user of ", appName, ", please contact support.", _jsx(CloseButton, { onClick: () => setIsTestModeAlert(false), children: _jsx(CloseX, { icon: "x" }) })] }) }))] })] }, ['ADD_FUNDS_BUY', 'ADD_FUNDS_RECEIVE', 'ADD_FUNDS_WITHDRAW'].includes(currentStep) ? 'ADD_FUNDS' : currentStep) }), _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 !== void 0 ? _a : '72px'} 72px ${(_b = PADDING_BOTTOM[$step]) !== null && _b !== void 0 ? _b : '32px'}`;
-}};
-  min-height: ${({ $step }) => { var _a; return (_a = MIN_HEIGHT[$step]) !== null && _a !== void 0 ? _a : 'auto'; }};
-  height: ${({ $step }) => { var _a; return (_a = MIN_HEIGHT[$step]) !== null && _a !== void 0 ? _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 !== void 0 ? _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);
-`;