@getpara/react-sdk 1.2.0 → 1.3.0

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

@@ -1,125 +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 } from "react/jsx-runtime";
-import { AuthMethod, OAuthMethod } from '@getpara/web-sdk';
-import { styled } from 'styled-components';
-import { useModalStore, useUserInfoStore } from '../../stores/index.js';
-import { ModalStep } from '../../utils/steps.js';
-import { openPopup } from '../../utils/openPopup.js';
-import { useThemeStore } from '../../stores/theme/useThemeStore.js';
-import { getTileButtonFlex } from '../../utils/getTileButtonFlex.js';
-import { StyledCpslTileButton } from '../common.js';
-import { brandedOAuthLogos, oAuthLogos } from '../../constants/oAuthLogos.js';
-import { useEffect } from 'react';
-import { routeMobileExternalWallet } from '../../utils/routeMobileExternalWallet.js';
-import { useGoBack } from '../../hooks/useGoBack.js';
-import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
-const HAS_MORE_LENGTH = 3;
-export const OAuth = ({ methods }) => {
-    const goBack = useGoBack();
-    const oAuthLogoVariant = useThemeStore(state => state.oAuthLogoVariant);
-    const isDark = useThemeStore(state => state.isDark);
-    const para = useInternalClient();
-    const popupWindow = useModalStore(state => state.popupWindow);
-    const setFlow = useModalStore(state => state.setFlow);
-    const setStep = useModalStore(state => state.setStep);
-    const setPopupWindow = useModalStore(state => state.setPopupWindow);
-    const setAuthInfo = useUserInfoStore(state => state.setAuthInfo);
-    const setSupportedAuthMethods = useModalStore(state => state.setSupportedAuthMethods);
-    const setBiometricLocationHints = useModalStore(state => state.setBiometricLocationHints);
-    const setFarcasterConnectUri = useModalStore(state => state.setFarcasterConnectUri);
-    const farcasterConnectUri = useModalStore(state => state.farcasterConnectUri);
-    const showAll = useModalStore(state => state.step === ModalStep.AUTH_MORE);
-    useEffect(() => {
-        const initializeFarcaster = () => __awaiter(void 0, void 0, void 0, function* () {
-            if (!methods.includes(OAuthMethod.FARCASTER)) {
-                return;
-            }
-            const connectUri = yield para.getFarcasterConnectURL();
-            setFarcasterConnectUri(connectUri);
-        });
-        initializeFarcaster();
-    }, []);
-    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) => () => __awaiter(void 0, void 0, void 0, function* () {
-        if (!!popupWindow) {
-            return;
-        }
-        switch (method) {
-            case OAuthMethod.FARCASTER:
-                if (!farcasterConnectUri) {
-                    return;
-                }
-                routeMobileExternalWallet(farcasterConnectUri);
-                setStep(ModalStep.FARCASTER_OAUTH);
-                return;
-            case OAuthMethod.TELEGRAM:
-                setStep(ModalStep.TELEGRAM_OAUTH);
-                break;
-            default: {
-                setStep(ModalStep.AWAITING_OAUTH);
-                const oAuthURL = yield para.getOAuthURL({ method });
-                const oAuthWindow = openPopup(oAuthURL, `${method}AuthPopup`, 'OAUTH');
-                setPopupWindow(oAuthWindow);
-                const { email, isError, userExists } = yield para.waitForOAuth({ popupWindow: oAuthWindow });
-                setPopupWindow(undefined);
-                if (isError) {
-                    goBack();
-                    return;
-                }
-                if (!email) {
-                    setStep(ModalStep.AUTH_MAIN);
-                    throw new Error('email is required');
-                }
-                setAuthInfo({ email });
-                if (userExists) {
-                    const supportedAuthMethods = yield para.initiateUserLoginV2({ email });
-                    if (supportedAuthMethods.size === 0) {
-                        setFlow('signUp');
-                        setStep(ModalStep.BIOMETRIC_CREATION);
-                    }
-                    else {
-                        const biometricLocationHints = supportedAuthMethods.has(AuthMethod.PASSKEY)
-                            ? yield para.getUserBiometricLocationHints()
-                            : [];
-                        setFlow('login');
-                        setStep(ModalStep.BIOMETRIC_LOGIN);
-                        setSupportedAuthMethods(supportedAuthMethods);
-                        setBiometricLocationHints(biometricLocationHints);
-                        return;
-                    }
-                }
-                yield para.createUser({ email });
-                setFlow('signUp');
-                setStep(ModalStep.VERIFICATIONS);
-                return;
-            }
-        }
-    });
-    const useBrandedLogos = oAuthLogoVariant === 'default';
-    const useDarkLogos = useBrandedLogos ? isDark : oAuthLogoVariant !== 'dark';
-    const showMoreButton = !showAll && hasMore;
-    return (_jsxs(OAuthContainer, { children: [methodsToShow.map((method, index) => (_jsx(OAuthButton, { "$isDark": useDarkLogos, icon: useBrandedLogos ? brandedOAuthLogos[method] : oAuthLogos[method], onClick: handleMethodClick(method), "$index": index, "$totalItems": showMoreButton ? HAS_MORE_LENGTH : methodsToShow.length }, method))), showMoreButton && (_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')};
-`;

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

@@ -1,133 +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 } from "react/jsx-runtime";
-import { AuthMethod, OAuthMethod } from '@getpara/web-sdk';
-import { useModalStore, useThemeStore, useUserInfoStore } from '../../stores/index.js';
-import styled from 'styled-components';
-import { useEffect, useRef, useState } from 'react';
-import { HeroSpinner } from '@getpara/react-common';
-import { ModalStep } from '../../utils/steps.js';
-import { CpslSpinner } from '@getpara/react-components';
-import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
-export function TelegramOAuthStep() {
-    const iframe = useRef();
-    const para = useInternalClient();
-    const setFlow = useModalStore(state => state.setFlow);
-    const setStep = useModalStore(state => state.setStep);
-    const setAuthInfo = useUserInfoStore(state => state.setAuthInfo);
-    const setBiometricLocationHints = useModalStore(state => state.setBiometricLocationHints);
-    const setSupportedAuthMethods = useModalStore(state => state.setSupportedAuthMethods);
-    const setIFrameUrl = useModalStore(state => state.setIFrameUrl);
-    const setIsIFrameReady = useModalStore(state => state.setIsIFrameReady);
-    const isIFrameReady = useModalStore(state => state.isIFrameReady);
-    const setWebAuthURLForCreate = useModalStore(state => state.setWebAuthURLForCreate);
-    const theme = useThemeStore(state => state.theme);
-    const [url, setUrl] = useState(undefined);
-    const [isWaiting, setIsWaiting] = useState(false);
-    const [isLoaded, setIsLoaded] = useState(false);
-    const [isError, setIsError] = useState(false);
-    const [shouldRouteToStep, setShouldRouteToStep] = useState();
-    useEffect(() => {
-        if (!!shouldRouteToStep && isIFrameReady) {
-            // Using a small timeout here to fully ensure the iframe is loaded before triggering any animation
-            setTimeout(() => {
-                setStep(shouldRouteToStep);
-            }, 200);
-        }
-    }, [shouldRouteToStep, isIFrameReady]);
-    useEffect(() => {
-        if (!url) {
-            para.getOAuthURL({ method: OAuthMethod.TELEGRAM }).then(url => {
-                setUrl(url);
-            });
-        }
-    }, [url]);
-    useEffect(() => {
-        const updateState = (event) => __awaiter(this, void 0, void 0, 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;
-                        const result = yield para.verifyTelegram(authObject);
-                        if (!result.isValid) {
-                            setIsWaiting(false);
-                            setIsError(true);
-                            iframe.current && iframe.current.contentWindow.postMessage({ type: 'TELEGRAM_FAILED' }, '*');
-                            return;
-                        }
-                        const { telegramUserId, isNewUser, supportedAuthMethods, biometricHints } = result;
-                        setAuthInfo({
-                            telegramUserId,
-                            pfpUrl: authObject.photo_url,
-                            displayName: authObject.username
-                                ? `@${authObject.username}`
-                                : authObject.first_name
-                                    ? `${authObject.first_name}${authObject.last_name ? ` ${authObject.last_name}` : ''}`
-                                    : `Telegram User @${telegramUserId}`,
-                        });
-                        if (isNewUser) {
-                            const supportedCreateAuthMethods = yield para.getSupportedCreateAuthMethods();
-                            setIsIFrameReady(false);
-                            setFlow('signUp');
-                            const supportsPasskey = supportedCreateAuthMethods.has(AuthMethod.PASSKEY);
-                            if (supportsPasskey) {
-                                setWebAuthURLForCreate(yield para.shortenLoginLink(yield para.getSetUpBiometricsURL({ authType: 'telegram' })));
-                                setStep(ModalStep.BIOMETRIC_CREATION);
-                            }
-                            if (supportedCreateAuthMethods.has(AuthMethod.PASSWORD)) {
-                                setIFrameUrl(yield para.shortenLoginLink(yield para.getSetupPasswordURL({ authType: 'telegram', theme })));
-                                setShouldRouteToStep(supportsPasskey ? ModalStep.BIOMETRIC_CREATION : ModalStep.PASSWORD_CREATION);
-                            }
-                        }
-                        else {
-                            setFlow('login');
-                            supportedAuthMethods && setSupportedAuthMethods(new Set(supportedAuthMethods));
-                            biometricHints && setBiometricLocationHints(biometricHints);
-                            setStep(ModalStep.BIOMETRIC_LOGIN);
-                        }
-                    }
-                    break;
-            }
-        });
-        window === null || window === void 0 ? void 0 : window.addEventListener('message', updateState, false);
-        return () => {
-            window === null || window === void 0 ? void 0 : window.removeEventListener('message', updateState, false);
-        };
-    }, []);
-    return (_jsxs(Container, { children: [_jsx(HeroContainer, { children: _jsx(HeroSpinner, { icon: "telegramBrand", status: isWaiting ? 'loading' : isError ? 'error' : 'inactive', text: isWaiting ? 'Follow the on-screen prompts.' : isError ? 'Login Failed' : undefined }) }), url && (_jsx(IFrame, { ref: iframe, style: { display: isLoaded ? 'block' : 'none' }, src: url, onLoad: () => setIsLoaded(true) })), (!url || !isLoaded) && _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;
-`;

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

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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';
-export const AddingFunds = () => {
-    const onRampPurchase = useModalStore(state => state.onRampPurchase);
-    return (_jsxs(_Fragment, { children: [_jsx(SpinnerContainer, { children: _jsx(CpslSpinner, { size: 100 }) }), _jsxs(CpslText, { children: ["Follow the prompts presented by", ' ', OnRampPurchaseStatus ? ON_RAMP_PROVIDERS[onRampPurchase.provider].name : 'the provider', "."] })] }));
-};

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

@@ -1,72 +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 } from "react/jsx-runtime";
-import { useState } from 'react';
-import { ON_RAMP_PROVIDERS } from '../../constants/constants.js';
-import styled from 'styled-components';
-import { CpslButton, CpslIcon, CpslSpinner, CpslText } from '@getpara/react-components';
-import { motion } from 'framer-motion';
-export const OnRampProviderButton = ({ config, index, onClick: _onClick }) => {
-    const [isLoading, setIsLoading] = useState(false);
-    const provider = config.providers[index];
-    const { feeLower, feeUpper, name, icon, backgroundColors } = ON_RAMP_PROVIDERS[provider];
-    const feeString = `Fee ${feeLower}% - ${feeUpper}%`;
-    const onClick = () => __awaiter(void 0, void 0, void 0, function* () {
-        setIsLoading(true);
-        yield _onClick();
-        setIsLoading(false);
-    });
-    return (_jsx(StyledButton, { "$gradientColors": backgroundColors, fullWidth: true, onClick: onClick, children: _jsxs(Container, { "$backgroundColor": backgroundColors[1], children: [_jsx(IconContainer, { children: _jsx(CpslIcon, { icon: icon }) }), _jsxs(ProviderInfoContainer, { children: [_jsx(Text, { variant: "bodyL", weight: "medium", children: name }), _jsx(ProviderInfoInnerContainer, { children: _jsx(Text, { variant: "bodyXS", weight: "medium", children: feeString }) })] }), isLoading ? _jsx(CpslSpinner, { size: 16 }) : _jsx(Chevron, { icon: "chevronUp" })] }) }));
-};
-const StyledButton = styled(CpslButton) `
-  width: 100%;
-  --button-primary-background-color: ${({ $gradientColors }) => `linear-gradient(90deg, ${$gradientColors[0]} 0%, ${$gradientColors[1]} 100%)`};
-  --button-primary-hover-background-color: ${({ $gradientColors }) => `linear-gradient(90deg, ${$gradientColors[0]} 0%, ${$gradientColors[0]} 100%)`};
-  --button-primary-active-background-color: ${({ $gradientColors }) => `linear-gradient(90deg, ${$gradientColors[0]} 0%, ${$gradientColors[0]} 100%)`};
-`;
-const Container = styled(motion.div) `
-  display: flex;
-  gap: 8px;
-  flex: 1;
-  align-items: center;
-
-  & cpsl-spinner {
-    --background-color: ${({ $backgroundColor }) => `${$backgroundColor}`};
-  }
-`;
-const ProviderInfoContainer = styled.div `
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  gap: 2px;
-`;
-const ProviderInfoInnerContainer = styled.div `
-  display: flex;
-  gap: 16px;
-`;
-const IconContainer = styled.span `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #fff;
-  border-radius: 100%;
-  height: 48px;
-  width: 48px;
-`;
-const Text = styled(CpslText) `
-  &::part(text-element) {
-    color: #fff;
-  }
-`;
-const Chevron = styled(CpslIcon) `
-  transform: rotate(90deg);
-  --icon-color: #fff;
-`;

package/dist/modal/components/RecoverySecretStep/RecoverySecretStep.js

@@ -1,67 +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, CpslText } from '@getpara/react-components';
-import { useModalStore, useThemeStore, useUserInfoStore } from '../../stores/index.js';
-import { ModalStep } from '../../utils/steps.js';
-import { Heading, InnerStepContainer, StepContainer, StyledCpslTileButton } from '../common.js';
-import { styled } from 'styled-components';
-import { useCopyToClipboard } from '@getpara/react-common';
-import { getMailtoLink } from '../../utils/getMailtoLink.js';
-import { useState } from 'react';
-export const SaveRecoverySecret = ({ email, value, onComplete, }) => {
-    const [isSecretSaved, setIsSecretSaved] = useState(false);
-    const [isCopied, copy] = useCopyToClipboard();
-    const onCopy = () => {
-        copy(value);
-        setIsSecretSaved(true);
-    };
-    const onDownload = () => {
-        const element = document.createElement('a');
-        const file = new Blob([value], { type: 'text/plain' });
-        element.href = URL.createObjectURL(file);
-        element.download = 'recovery.txt';
-        document.body.appendChild(element); // Required for this to work in FireFox
-        element.click();
-        setIsSecretSaved(true);
-    };
-    const onEmail = () => {
-        window.open(getMailtoLink(email, value), '_self');
-        setIsSecretSaved(true);
-    };
-    return (_jsxs(_Fragment, { children: [_jsxs(InnerStepContainer, { children: [_jsx(Heading, { variant: "headingXS", weight: "semiBold", children: "Save your Recovery Secret" }), _jsxs(ButtonContainer, { children: [_jsx(ActionButton, { icon: "download", onClick: onDownload, children: _jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Download" }) }), _jsx(ActionButton, { icon: isCopied ? 'check' : 'copy', onClick: onCopy, children: _jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: isCopied ? 'Copied!' : 'Copy' }) }), _jsx(ActionButton, { icon: "send", onClick: onEmail, children: _jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Email" }) })] })] }), _jsx(InnerStepContainer, { children: _jsx(CpslButton, { fullWidth: true, onClick: onComplete, disabled: !isSecretSaved, children: !isSecretSaved ? 'Choose an option above to continue' : 'I’ve saved my recovery secret' }) })] }));
-};
-export const RecoverySecretStep = () => {
-    const hideWallets = useThemeStore(state => state.hideWallets);
-    const setStep = useModalStore(state => state.setStep);
-    const authInfo = useUserInfoStore(state => state.getAuthInfo());
-    const recoveryShare = useUserInfoStore(state => state.recoveryShare);
-    const backupDecryptionKey = JSON.parse(recoveryShare || '{}').backupDecryptionKey;
-    const onComplete = () => __awaiter(void 0, void 0, void 0, function* () {
-        setStep(ModalStep.WALLET_CREATION_DONE);
-    });
-    return (_jsxs(StepContainer, { children: [_jsxs(InnerStepContainer, { children: [_jsx(Heading, { variant: "headingS", weight: "bold", children: hideWallets ? "Don't lose access" : "Don't lose your wallet" }), _jsxs(InlineText, { variant: "bodyS", color: "secondary", weight: "medium", children: ["Your", ' ', _jsx(InlineText, { variant: "bodyS", weight: "medium", children: "Recovery Secret" }), ' ', "ensures you will be able to regain access to your ", hideWallets ? 'account' : 'wallet', " if you lose your Passkey or Password."] })] }), _jsx(SaveRecoverySecret, { email: (authInfo === null || authInfo === void 0 ? void 0 : authInfo.authType) === 'email' ? authInfo.identifier : undefined, value: backupDecryptionKey, onComplete: onComplete })] }));
-};
-const ActionButton = styled(StyledCpslTileButton) `
-  flex: 1;
-
-  --button-icon-color: var(--cpsl-color-text-primary);
-`;
-const ButtonContainer = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-`;
-const InlineText = styled(CpslText) `
-  text-align: center;
-  display: inline-block;
-`;

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

@@ -1,105 +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, CpslCodeInput, CpslDivider, CpslIcon, CpslQrCode, CpslSpinner, CpslText, } from '@getpara/react-components';
-import { useEffect, useRef, useState } from 'react';
-import { useModalStore } from '../../stores/index.js';
-import { Heading, QRContainer, FilledDisabledInput, StepContainer, InnerStepContainer } from '../common.js';
-import { ModalStep } from '../../utils/steps.js';
-import { styled } from 'styled-components';
-import { useCopyToClipboard } from '@getpara/react-common';
-import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
-export const Setup2FAStep = ({ onClose }) => {
-    const isLogin = useModalStore(state => state.isLogin());
-    const setStep = useModalStore(state => state.setStep);
-    const para = useInternalClient();
-    const isVerifying = useModalStore(state => state.step === ModalStep.VERIFY_2FA);
-    const [copied, copy] = useCopyToClipboard();
-    const inputRef = useRef(null);
-    const [qrCodeValue, setQrCodeValue] = useState(null);
-    const [code, setCode] = useState('');
-    const [codeError, setCodeError] = useState('');
-    const [isVerifyingCode, setIsVerifyingCode] = useState(false);
-    const params = qrCodeValue ? new URL(qrCodeValue).searchParams : undefined;
-    const secret = params === null || params === void 0 ? void 0 : params.get('secret');
-    useEffect(() => {
-        function fetchOtpAuthUrl() {
-            return __awaiter(this, void 0, void 0, function* () {
-                try {
-                    const { uri } = yield para.setup2FA();
-                    setQrCodeValue(uri);
-                }
-                catch (error) {
-                    console.error('Error fetching OTPAuth URL:', error);
-                }
-            });
-        }
-        fetchOtpAuthUrl();
-    }, []);
-    useEffect(() => {
-        // Using a small timeout here to ensure the input is mounted before attempting focus
-        setTimeout(() => {
-            var _a, _b, _c;
-            (_c = (_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelectorAll('input')) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.focus();
-        }, 10);
-    }, [isVerifying]);
-    useEffect(() => {
-        if (code.length === 6) {
-            handleSubmitCode();
-        }
-    }, [code]);
-    const handleNext = () => {
-        setStep(ModalStep.VERIFY_2FA);
-    };
-    const handleSkip = () => {
-        if (isLogin) {
-            setStep(ModalStep.LOGIN_DONE);
-        }
-        else {
-            onClose();
-        }
-    };
-    const handleCodeInput = (e) => {
-        if (codeError) {
-            setCodeError('');
-        }
-        setCode(e.detail.value.trim());
-    };
-    const handleSubmitCode = () => __awaiter(void 0, void 0, void 0, function* () {
-        setIsVerifyingCode(true);
-        if (code.length === 6 && /^\d+$/.test(code)) {
-            try {
-                yield para.enable2FA({ verificationCode: code });
-                setStep(ModalStep.TWO_FACTOR_DONE);
-            }
-            catch (e) {
-                setCodeError('Incorrect Code');
-            }
-        }
-        else {
-            setCodeError('Incorrect Code');
-        }
-        setIsVerifyingCode(false);
-    });
-    const handleCopy = () => {
-        copy(secret);
-    };
-    return (_jsxs(StepContainer, { children: [_jsxs(InnerStepContainer, { children: [_jsx(Heading, { variant: "headingS", weight: "bold", children: "Turn on Two-Factor authentication" }), isVerifying && (_jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Please enter the code from your authenticator app." }))] }), _jsx(InnerStepContainer, { children: isVerifying ? (_jsx(_Fragment, { children: isVerifyingCode ? (_jsx(CpslSpinner, {})) : (_jsx("form", { onSubmit: (e) => __awaiter(void 0, void 0, void 0, function* () {
-                            e.preventDefault();
-                            yield handleSubmitCode();
-                        }), children: _jsx(StyledCodeInput, { ref: inputRef, code: code, onCpslInput: handleCodeInput, errorText: codeError, length: 6, onKeyDown: (e) => __awaiter(void 0, void 0, void 0, function* () { return e.key === 'Enter' && (yield handleSubmitCode()); }) }) })) })) : (_jsxs(_Fragment, { children: [_jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Scan with your preferred authenticator app." }), _jsx(QRContainer, { children: !qrCodeValue ? _jsx(CpslSpinner, { size: 100 }) : _jsx(CpslQrCode, { url: qrCodeValue }) })] })) }), !isVerifying && (_jsxs(_Fragment, { children: [_jsx(InnerStepContainer, { children: _jsx(CpslDivider, { children: "or enter the code manually" }) }), _jsx(InnerStepContainer, { children: _jsx(FilledDisabledInput, { disabled: true, value: secret, noAutoDisable: true, children: _jsx(CpslButton, { slot: "end", variant: "ghost", onClick: handleCopy, children: _jsx(CpslIcon, { icon: copied ? 'check' : 'copy' }) }) }) }), _jsxs(InnerStepContainer, { children: [_jsx(CpslButton, { fullWidth: true, onClick: handleNext, children: "Continue" }), _jsx(SkipButton, { variant: "ghost", onClick: handleSkip, children: "Skip" })] })] }))] }));
-};
-const StyledCodeInput = styled(CpslCodeInput) `
-  align-self: center;
-`;
-const SkipButton = styled(CpslButton) `
-  margin-top: 8px;
-  text-decoration: underline;
-`;

package/dist/modal/components/StripeComponents/StripeComponents.js

@@ -1,78 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-export const STRIPE_PUBLISHABLE_KEY = 'pk_live_51MvquNGrzDeP5yP9EgVSMBPQbrbg0oHDjPIIXypePd0jzOFjbadyfO7wBKLHhUtbKIUiEUVC3YYcTJyAmJ8xA7JE00T2UDfYKz';
-export const STRIPE_PUBLISHABLE_KEY_TEST = 'pk_test_51MvquNGrzDeP5yP98WgPaAUgQ50I3OpfPhVfiLO47FBHepJnZRPO62IzZY2uxT5ovhSS10RwcTcnaVil1mcJOzIi00dHapODdS';
-const CryptoElementsContext = React.createContext(null);
-CryptoElementsContext.displayName = 'CryptoElementsContext';
-export const CryptoElements = ({ stripeOnramp, children }) => {
-    const [ctx, setContext] = React.useState(() => ({
-        onramp: null,
-    }));
-    React.useEffect(() => {
-        let isMounted = true;
-        Promise.resolve(stripeOnramp).then(onramp => {
-            if (onramp && isMounted) {
-                setContext(ctx => (ctx.onramp ? ctx : { onramp }));
-            }
-        });
-        return () => {
-            isMounted = false;
-        };
-    }, [stripeOnramp]);
-    return _jsx(CryptoElementsContext.Provider, { value: ctx, children: children });
-};
-// React hook to get StripeOnramp from context
-export const useStripeOnramp = () => {
-    const context = React.useContext(CryptoElementsContext);
-    return context === null || context === void 0 ? void 0 : context.onramp;
-};
-// React element to render Onramp UI
-const useOnrampSessionListener = (type, session, callback) => {
-    React.useEffect(() => {
-        if (session && callback) {
-            const listener = e => callback(e.payload);
-            session.addEventListener(type, listener);
-            return () => {
-                session.removeEventListener(type, listener);
-            };
-        }
-        return () => { };
-    }, [session, callback, type]);
-};
-export const OnrampElement = (_a) => {
-    var { clientSecret, appearance, onReady = () => { }, onSessionChange } = _a, props = __rest(_a, ["clientSecret", "appearance", "onReady", "onSessionChange"]);
-    const stripeOnramp = useStripeOnramp();
-    const onrampElementRef = React.useRef(null);
-    const [session, setSession] = React.useState();
-    const appearanceJSON = JSON.stringify(appearance);
-    React.useEffect(() => {
-        const containerRef = onrampElementRef.current;
-        if (containerRef) {
-            // NB: ideally we want to be able to hot swap/update onramp iframe
-            // This currently results a flash if one needs to mint a new session when they need to udpate fixed transaction details
-            containerRef.innerHTML = '';
-            if (clientSecret && stripeOnramp) {
-                setSession(stripeOnramp
-                    .createSession({
-                    clientSecret,
-                    appearance: { theme: appearance },
-                })
-                    .mount(containerRef));
-            }
-        }
-    }, [appearanceJSON, clientSecret, stripeOnramp]);
-    useOnrampSessionListener('onramp_ui_loaded', session, onReady);
-    useOnrampSessionListener('onramp_session_updated', session, onSessionChange);
-    return _jsx("div", Object.assign({}, props, { ref: onrampElementRef }));
-};

package/dist/modal/components/TwoFactorDoneStep/TwoFactorDoneStep.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CpslButton, CpslText } from '@getpara/react-components';
-import { Heading, StepContainer, InnerStepContainer, HeroIcon } from '../common.js';
-import { useThemeStore } from '../../stores/index.js';
-export const TwoFactorDoneStep = ({ onClose }) => {
-    const hideWallets = useThemeStore(state => state.hideWallets);
-    return (_jsxs(StepContainer, { children: [_jsx(HeroIcon, { icon: "checkCircleFilled" }), _jsxs(InnerStepContainer, { children: [_jsx(Heading, { variant: "headingXS", weight: "semiBold", children: "Success" }), _jsxs(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: ["Your ", hideWallets ? 'account' : 'wallet', " is now protected by 2FA"] })] }), _jsx(CpslButton, { fullWidth: true, onClick: onClose, children: "Done" })] }));
-};