@getpara/react-sdk 0.1.0

package/dist/modal/components/AuthInput/phoneMasks.js

@@ -0,0 +1,247 @@
+export const defaultPhoneMask = '#################';
+export const phoneMasks = {
+    AF: '### ### ####',
+    AX: '## ### ####',
+    AL: '(###) ### ###',
+    DZ: '(###) ### ###',
+    AS: '(###) ###-####',
+    AD: '### ###',
+    AO: '(###) ### ###',
+    AI: '(###) ###-####',
+    AG: '(###) ###-####',
+    AR: '(###) ###-####',
+    AM: '## ### ###',
+    AW: '### ####',
+    AU: '# #### ####',
+    AT: '(###) ### ####',
+    AZ: '(###) ### ## ##',
+    BS: '(###) ###-####',
+    BH: '#### ####',
+    BD: '# ### ###',
+    BB: '(###) ###-####',
+    BY: '(##) ###-##-##',
+    BE: '(###) ### ###',
+    BZ: '###-####',
+    BJ: '##-##-####',
+    BM: '(###) ###-####',
+    BT: '# ### ###',
+    BO: '# ### ####',
+    BA: '## ###-###',
+    BW: '## ### ###',
+    BR: '(##) ####-####',
+    IO: '### ####',
+    BN: '### ####',
+    BG: '(###) ### ###',
+    BF: '## ## ####',
+    BI: '## ## ####',
+    KH: '## ### ###',
+    CM: '#### ####',
+    CA: '(###) ###-####',
+    CV: '(###) ## ##',
+    KY: '(###) ###-####',
+    CF: '## ## ####',
+    TD: '## ## ## ##',
+    CL: '# #### ####',
+    CN: '(###) #### ####',
+    CX: '# ## ## ##',
+    CC: '# ## ## ##',
+    CO: '(###) ### ####',
+    KM: '## ## ## ##',
+    CG: '## ### ####',
+    CK: '## ###',
+    CR: '#### ####',
+    HR: '## #### ###',
+    CU: '# ### ####',
+    CY: '## ### ###',
+    CZ: '### ### ###',
+    CD: '### ### ###',
+    DK: '## ## ## ##',
+    DJ: '## ## ## ##',
+    DM: '(###) ###-####',
+    DO: '(###) ###-####',
+    EC: '## ### ####',
+    EG: '# #### ####',
+    SV: '#### ####',
+    GQ: '## ### ####',
+    ER: '# ### ###',
+    EE: '#### ####',
+    SZ: '#### ####',
+    ET: '## ### ####',
+    FK: '#####',
+    FO: '######',
+    FJ: '### ####',
+    FI: '## ### ####',
+    FR: '## ## ## ## ##',
+    GF: '### ## ## ##',
+    PF: '## ## ##',
+    GA: '# ## ## ##',
+    GM: '### ####',
+    GE: '(###) ## ## ##',
+    DE: '(###) ### ####',
+    GH: '## ### ####',
+    GI: '### #####',
+    GR: '(###) ### ####',
+    GL: '## ## ##',
+    GD: '(###) ###-####',
+    GP: '### ## ## ##',
+    GU: '(###) ###-####',
+    GT: '# ### ####',
+    GG: '(####) ### ###',
+    GN: '## ### ###',
+    GW: '# #######',
+    GY: '### ####',
+    HT: '## ## ####',
+    VA: '### ####',
+    HN: '####-####',
+    HK: '#### ####',
+    HU: '(##) ### ####',
+    IS: '### ####',
+    IN: '####### ###',
+    ID: '(###) ###-####',
+    IR: '(###) ### ####',
+    IQ: '(###) ### ####',
+    IE: '(###) ### ###',
+    IM: '(####) ### ###',
+    IL: '#-###-####',
+    IT: '(###) #### ###',
+    CI: '## ## ## ##',
+    JM: '(###) ###-####',
+    JP: '(###) ###-####',
+    JE: '(####) ### ###',
+    JO: '# #### ####',
+    KZ: '(###) ###-##-##',
+    KE: '### ######',
+    KI: '## ###',
+    KP: '###-###-####',
+    KR: '(###) ####-####',
+    XK: '## ### ###',
+    KW: '#### ####',
+    KG: '(###) ###-###',
+    LA: '## ## ####',
+    LV: '## ### ###',
+    LB: '## ### ###',
+    LS: '# ### ####',
+    LR: '## ### ###',
+    LY: '##-#######',
+    LI: '(###) ###-####',
+    LT: '(###) ## ###',
+    LU: '### ### ###',
+    MO: '#### ####',
+    MG: '## ## ### ##',
+    MW: '# #### ####',
+    MY: '(###) ###-###',
+    MV: '###-####',
+    ML: '## ## ####',
+    MT: '#### ####',
+    MH: '###-####',
+    MQ: '### ## ## ##',
+    MR: '## ## ####',
+    MU: '### ####',
+    YT: '### ## ## ##',
+    MX: '(###) ###-####',
+    FM: '### ####',
+    MD: '#### ####',
+    MC: '(###) ###-###',
+    MN: '## ## ####',
+    ME: '## ### ###',
+    MS: '(###) ###-####',
+    MA: '#-####-####',
+    MZ: '## ### ####',
+    MM: '# ### ####',
+    NA: '## ### ####',
+    NR: '### ####',
+    NP: '#-######',
+    NL: '## ### ####',
+    NC: '##.##.##',
+    NZ: '## ### ###',
+    NI: '#### ####',
+    NE: '## ## ## ##',
+    NG: '## ### ####',
+    NU: '####',
+    NF: '### ###',
+    MK: '## ### ###',
+    MP: '(###) ###-####',
+    NO: '### ## ###',
+    OM: '#### ####',
+    PK: '(###) #######',
+    PW: '### ####',
+    PS: '## ### ####',
+    PA: '####-####',
+    PG: '(###) ## ###',
+    PY: '## ### ####',
+    PE: '(###) ### ###',
+    PH: '(###) ###-####',
+    PN: '### ####',
+    PL: '### ### ###',
+    PT: '## ### ####',
+    PR: '(###) ###-####',
+    QA: '#### ####',
+    RE: '##### ####',
+    RO: '## ### ####',
+    RU: '(###) ###-##-##',
+    RW: '(###) ### ###',
+    BL: '### ## ## ##',
+    SH: '####',
+    KN: '(###) ###-####',
+    LC: '(###) ###-####',
+    MF: '### ## ## ##',
+    PM: '## ## ##',
+    VC: '(###) ###-####',
+    WS: '####',
+    SM: '(####) ######',
+    ST: '## ####',
+    SA: '# ### ####',
+    SN: '## ### ####',
+    RS: '## ### ####',
+    SC: '# ### ###',
+    SL: '## ######',
+    SG: '#### ####',
+    SX: '(###) ###-####',
+    SK: '(###) ### ###',
+    SI: '## ### ###',
+    SB: '### ####',
+    SO: '# ### ###',
+    ZA: '## ### ####',
+    GS: '####',
+    SS: '# ### ####',
+    ES: '### ### ###',
+    LK: '## ### ####',
+    SD: '## ### ####',
+    SR: '###-####',
+    SJ: '### ## ###',
+    SE: '## ### ####',
+    CH: '## ### ####',
+    SY: '## #### ###',
+    TW: '#### ####',
+    TJ: '## ### ####',
+    TZ: '## ### ####',
+    TH: '# #### ####',
+    TL: '#### ####',
+    TG: '## ## ## ##',
+    TK: '####',
+    TO: '####',
+    TT: '(###) ###-####',
+    TN: '## ### ###',
+    TR: '(###) ### ####',
+    TM: '# ### ###',
+    TC: '(###) ###-####',
+    TV: '####',
+    UG: '## ### ####',
+    UA: '## ### ####',
+    AE: '# ### ####',
+    GB: '#### ### ###',
+    US: '(###) ###-####',
+    UM: '(###) ###-####',
+    UY: '# ### ## ##',
+    UZ: '## ### ####',
+    VU: '## ####',
+    VE: '###-###-####',
+    VN: '## #### ###',
+    VG: '(###) ###-####',
+    VI: '(###) ###-####',
+    WF: '## ####',
+    EH: '###-###-###',
+    YE: '# ### ###',
+    ZM: '## ### ####',
+    ZW: '# #######',
+};

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

@@ -0,0 +1,8 @@
+import { OAuthMethod } from '@getpara/web-sdk';
+interface AuthMainStepProps {
+    oAuthMethods?: OAuthMethod[];
+    disableEmailLogin: boolean;
+    disablePhoneLogin: boolean;
+}
+export declare const AuthMainStep: ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }: AuthMainStepProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { useThemeStore } from '../../stores/theme/useThemeStore.js';
+import { AuthMainStepContent } from './AuthMainStepContent.js';
+import { CenteredText } from '../common.js';
+export const AuthMainStep = ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }) => {
+    const logo = useThemeStore(state => state.getLogo());
+    const appName = useThemeStore(state => state.appName);
+    const authLayout = useThemeStore(state => state.authLayout);
+    const embeddedModal = useThemeStore(state => state.embeddedModal);
+    const firstLayoutType = authLayout[0].split(':')[0];
+    const heading = firstLayoutType === 'AUTH' ? 'Sign Up or Login' : 'Connect Wallet';
+    return (_jsxs(_Fragment, { children: [logo && _jsx(Logo, { src: logo, alt: `${appName ? `${appName} -` : ''}logo` }), !embeddedModal && (_jsx(CenteredText, { variant: logo ? 'bodyM' : 'headingS', weight: "semiBold", children: heading })), _jsx(AuthMainStepContent, { disableEmailLogin: disableEmailLogin, disablePhoneLogin: disablePhoneLogin, oAuthMethods: oAuthMethods })] }));
+};
+const Logo = styled.img `
+  height: 100px;
+  max-width: 260px;
+  object-fit: contain;
+  box-sizing: content-box;
+  align-self: center;
+`;

package/dist/modal/components/AuthMainStep/AuthMainStepContent.d.ts

@@ -0,0 +1,8 @@
+import { OAuthMethod } from '@getpara/web-sdk';
+interface AuthMainStepContentProps {
+    oAuthMethods?: OAuthMethod[];
+    disableEmailLogin: boolean;
+    disablePhoneLogin: boolean;
+}
+export declare const AuthMainStepContent: ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }: AuthMainStepContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,89 @@
+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.d.ts

@@ -0,0 +1,8 @@
+import { OAuthMethod } from '@getpara/web-sdk';
+interface AuthOptionsProps {
+    oAuthMethods?: OAuthMethod[];
+    disableEmailLogin: boolean;
+    disablePhoneLogin: boolean;
+}
+export declare const AuthOptions: ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }: AuthOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,28 @@
+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.d.ts

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

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

@@ -0,0 +1,7 @@
+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.d.ts

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

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

@@ -0,0 +1,5 @@
+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.d.ts

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

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

@@ -0,0 +1,7 @@
+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.d.ts

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

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

@@ -0,0 +1,18 @@
+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.d.ts

@@ -0,0 +1,4 @@
+export declare const BiometricCreationStep: ({ handlePasswordClick, handlePasskeyClick, }: {
+    handlePasswordClick: () => Promise<void>;
+    handlePasskeyClick: () => Promise<void>;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+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.d.ts

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

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

@@ -0,0 +1,127 @@
+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 { useParaStore, 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';
+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 = useParaStore(state => state.para);
+    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;
+                }
+                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]);
+    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.d.ts

@@ -0,0 +1,6 @@
+import React, { PropsWithChildren } from 'react';
+interface AnimatedHeightWrapperProps extends PropsWithChildren {
+    className?: string;
+}
+export declare const AnimatedHeightWrapper: React.FC<AnimatedHeightWrapperProps>;
+export {};