@getpara/react-sdk 0.1.0

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

@@ -0,0 +1,214 @@
+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 { CpslButton, CpslIcon, CpslInput, CpslSelect, CpslSelectItem, CpslSpinner, CpslText, } from '@getpara/react-components';
+import { useRef, useState } from 'react';
+import styled from 'styled-components';
+import countryCodes from './countryCodes.js';
+import { useParaStore, useModalStore, useUserInfoStore } from '../../stores/index.js';
+import { EMAIL_REGEX, MOBILE_SIZE } from '../../constants/constants.js';
+import { useDropdownPosition } from './hooks/useDropdownPosition.js';
+import { ModalStep } from '../../utils/steps.js';
+import { defaultPhoneMask, phoneMasks } from './phoneMasks.js';
+import { AuthMethod } from '@getpara/web-sdk';
+const DEFAULT_COUNTRY = { label: 'United States', value: '+1', selectedLabel: 'US', icon: 'US' };
+export const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
+    var _a;
+    const inputRef = useRef(null);
+    const { dropdownMaxHeight, dropdownWidth } = useDropdownPosition(inputRef);
+    const para = useParaStore(state => state.para);
+    const setAuthInfo = useUserInfoStore(state => state.setAuthInfo);
+    const authInfo = useUserInfoStore(state => state.getAuthInfo());
+    const setFlow = useModalStore(state => state.setFlow);
+    const setStep = useModalStore(state => state.setStep);
+    const setSupportedAuthMethods = useModalStore(state => state.setSupportedAuthMethods);
+    const setBiometricLocationHints = useModalStore(state => state.setBiometricLocationHints);
+    const [countryCode, setCountryCode] = useState(((authInfo === null || authInfo === void 0 ? void 0 : authInfo.authType) === 'phone' ? authInfo.auth.countryCode : '+1'));
+    const [identifier, setIdentifier] = useState((() => {
+        if (!authInfo || ['telegramUserId', 'farcasterUsername'].includes(authInfo.authType)) {
+            return '';
+        }
+        if (authInfo.authType !== 'phone') {
+            return authInfo.identifier;
+        }
+        return authInfo.auth.phone;
+    })());
+    const [identifierType, setIdentifierType] = useState(authInfo && (authInfo.authType === 'email' || authInfo.authType === 'phone') ? authInfo.authType : undefined);
+    const [matchedCountryCode, setMatchedCountryCode] = useState(DEFAULT_COUNTRY);
+    const [isLoggingIn, setIsLoggingIn] = useState(false);
+    const [error, setError] = useState('');
+    const [search, setSearch] = useState('');
+    const isEmail = identifierType === 'email';
+    const isPhone = identifierType === 'phone';
+    const isUnknown = !identifierType;
+    const filteredCountryCodes = search
+        ? countryCodes.filter(cc => cc.selectedLabel.toLowerCase().includes(search.toLowerCase()) ||
+            cc.label.toLowerCase().includes(search.toLowerCase()) ||
+            cc.value.toLowerCase().includes(search.toLowerCase()))
+        : countryCodes;
+    const handleSearchInput = (ev) => {
+        setSearch(ev.detail);
+    };
+    const handleIdentifierInput = (ev) => {
+        const newIdentifier = ev.detail.value;
+        let isNewPhone = false, isNewEmail = false;
+        if (!disablePhoneLogin) {
+            const countryCodeInputMatch = countryCodes.find(cc => cc.value === newIdentifier);
+            if (countryCodeInputMatch) {
+                setCountryCode(countryCodeInputMatch.value);
+                setMatchedCountryCode(countryCodeInputMatch);
+                setIdentifierType('phone');
+                setIdentifier('');
+                return;
+            }
+            isNewPhone = !isEmail && isPhone ? /\d+$/.test(newIdentifier) : /\d\d\d+$/.test(newIdentifier);
+        }
+        if (!disableEmailLogin) {
+            isNewEmail = /\D.*$/.test(newIdentifier);
+        }
+        setIdentifierType(isNewEmail ? 'email' : isNewPhone ? 'phone' : undefined);
+        setIdentifier(newIdentifier);
+    };
+    const handleCountryCodeInput = (ev) => {
+        const matchedCountryCode = countryCodes.find(code => code.selectedLabel === ev.detail);
+        setCountryCode(matchedCountryCode.value);
+        setMatchedCountryCode(matchedCountryCode);
+    };
+    const login = () => __awaiter(void 0, void 0, void 0, function* () {
+        setError('');
+        if (isUnknown) {
+            setError('Please enter a valid email or phone number!');
+            return;
+        }
+        let auth;
+        if (isEmail) {
+            if (!EMAIL_REGEX.test(identifier)) {
+                setError('Please enter a valid email!');
+                return;
+            }
+            // Logout to ensure cleared Para state but preserve pregen wallets
+            yield para.logout();
+            auth = { email: identifier };
+            setAuthInfo(auth);
+            const userExists = yield para.checkIfUserExists(identifier);
+            if (userExists) {
+                const supportedAuthMethods = yield para.initiateUserLoginV2(auth);
+                const biometricLocationHints = supportedAuthMethods.has(AuthMethod.PASSKEY)
+                    ? yield para.getUserBiometricLocationHints()
+                    : [];
+                setFlow('login');
+                setStep(ModalStep.BIOMETRIC_LOGIN);
+                setSupportedAuthMethods(supportedAuthMethods);
+                setBiometricLocationHints(biometricLocationHints);
+                return;
+            }
+            yield para.createUser(auth);
+            setFlow('signUp');
+            setStep(ModalStep.VERIFICATIONS);
+            return;
+        }
+        if (isPhone) {
+            yield para.logout();
+            let userExists = false;
+            try {
+                userExists = yield para.checkIfUserExistsByPhone(identifier, countryCode);
+            }
+            catch (error) {
+                setError('Please enter a valid phone number!');
+                return;
+            }
+            auth = { phone: identifier, countryCode };
+            setAuthInfo(auth);
+            if (userExists) {
+                const supportedAuthMethods = yield para.initiateUserLoginV2(auth);
+                const biometricLocationHints = supportedAuthMethods.has(AuthMethod.PASSKEY)
+                    ? yield para.getUserBiometricLocationHints()
+                    : [];
+                setFlow('login');
+                setStep(ModalStep.BIOMETRIC_LOGIN);
+                setSupportedAuthMethods(supportedAuthMethods);
+                setBiometricLocationHints(biometricLocationHints);
+                return;
+            }
+            yield para.createUserByPhone(auth);
+            setFlow('signUp');
+            setStep(ModalStep.VERIFICATIONS);
+            return;
+        }
+    });
+    const handleSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
+        setIsLoggingIn(true);
+        yield login();
+        setIsLoggingIn(false);
+    });
+    if (disableEmailLogin && disablePhoneLogin) {
+        return null;
+    }
+    return (_jsx("form", { onSubmit: (e) => __awaiter(void 0, void 0, void 0, function* () {
+            e.preventDefault();
+            yield handleSubmit();
+        }), children: _jsxs(StyledInput, { ref: inputRef, id: "authInput", placeholder: isEmail || disablePhoneLogin
+                ? 'Enter email'
+                : isPhone || disableEmailLogin
+                    ? 'Enter phone'
+                    : 'Enter email or phone', onCpslInput: handleIdentifierInput, value: identifier, errorText: error, autofocus: true, inputMode: "email", onKeyDown: (e) => __awaiter(void 0, void 0, void 0, function* () { return e.key === 'Enter' && handleSubmit(); }), contrastText: true, isPhone: isPhone, mask: identifierType === 'phone' ? ((_a = phoneMasks[matchedCountryCode.selectedLabel]) !== null && _a !== void 0 ? _a : defaultPhoneMask) : undefined, enterkeyhint: "go", noAutoDisable: true, disabled: isLoggingIn, "data-testid": "auth-input", children: [_jsxs(IconContainer, { slot: "start", children: [!disableEmailLogin && (isUnknown || isEmail) && _jsx(CpslIcon, { "aria-label": "email", icon: "mail" }), !disablePhoneLogin && isUnknown && _jsx(CpslIcon, { "aria-label": "phone", icon: "phone" }), isPhone && (_jsxs(CountryCodeSelect, { selectedValue: matchedCountryCode.selectedLabel, onCpslSelectValueChange: handleCountryCodeInput, showFormattedSelectedItem: true, autoWidth: true, dropdownMaxHeight: dropdownMaxHeight, anchorElId: "authInput", "$width": dropdownWidth, showSearch: true, searchPlaceholder: "Search Countries", onCpslSearchChange: handleSearchInput, "data-testid": "country-code-select", children: [matchedCountryCode && (_jsxs(SelectedItem, { slot: "selected-item", children: [_jsx(CpslText, { children: matchedCountryCode.selectedLabel }), _jsx(CpslText, { children: matchedCountryCode.value })] })), filteredCountryCodes.map(cc => (_jsxs(StyledSelectItem, { slot: "items", value: cc.selectedLabel, children: [_jsx(CpslText, { children: cc.label }), _jsx(CpslText, { children: cc.value })] }, cc.selectedLabel)))] }))] }), identifier && (_jsx(CpslButton, { slot: "end", size: "small", fullWidth: true, disabled: isLoggingIn, onClick: handleSubmit, children: isLoggingIn ? _jsx(CpslSpinner, { size: 16 }) : _jsx(CpslIcon, { icon: "arrowNarrow" }) }))] }, 'email') }));
+};
+const IconContainer = styled.div `
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-right: 12px;
+  border-right: 1px solid var(--cpsl-color-background-16);
+
+  & cpsl-icon {
+    --icon-color: var(--cpsl-color-contrast);
+  }
+`;
+const CountryCodeSelect = styled(CpslSelect) `
+  --container-height: 100%;
+  --container-padding-start: 0px;
+  --container-padding-end: 0px;
+  --container-border-width: 0px;
+  --container-gap: 4px;
+  --container-background-color: transparent;
+  --container-box-shadow: none;
+
+  &::part(dropdown) {
+    width: ${({ $width }) => `${$width - 2}px`};
+  }
+
+  &::part(popover) {
+    @media (max-width: ${MOBILE_SIZE}px) {
+      top: unset !important;
+      bottom: 16px;
+    }
+
+    cpsl-auth-modal.force-mobile-media & {
+      top: unset !important;
+      bottom: 16px;
+    }
+  }
+`;
+const StyledSelectItem = styled(CpslSelectItem) `
+  &::part(inner-container) {
+    justify-content: space-between;
+  }
+`;
+const SelectedItem = styled.div `
+  display: flex;
+  gap: 4px;
+  align-items: center;
+`;
+const StyledInput = styled(CpslInput) `
+  --container-background-color: var(--cpsl-color-background-8);
+  --input-background-color: var(--cpsl-color-background-8);
+  --container-padding-end: 8px;
+`;

package/dist/modal/components/AuthInput/countryCodes.d.ts

@@ -0,0 +1,8 @@
+import { IconType } from '@getpara/core-components';
+declare const countryCodes: {
+    label: string;
+    value: string;
+    selectedLabel: string;
+    icon: IconType;
+}[];
+export default countryCodes;

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

@@ -0,0 +1,40 @@
+import { getCountries, getCountryCallingCode } from 'libphonenumber-js';
+const excludedCountries = [
+    'AC',
+    'CG',
+    'CI',
+    'CV',
+    'GF',
+    'GP',
+    'MF',
+    'NC',
+    'PM',
+    'RE',
+    'SD',
+    'SH',
+    'SJ',
+    'TA',
+    'VA',
+    'WF',
+    'XK',
+    'YT',
+];
+const generateCountryCodes = () => {
+    const countries = getCountries();
+    const countryList = countries
+        .filter(country => !excludedCountries.includes(country))
+        .map(country => {
+        const countryCode = getCountryCallingCode(country);
+        const countryName = new Intl.DisplayNames(['en'], { type: 'region' }).of(country);
+        return {
+            label: countryName,
+            value: `+${countryCode}`,
+            selectedLabel: country,
+            icon: country,
+        };
+    })
+        .sort((a, b) => a.label.localeCompare(b.label));
+    return countryList;
+};
+const countryCodes = generateCountryCodes();
+export default countryCodes;

package/dist/modal/components/AuthInput/hooks/useDropdownPosition.d.ts

@@ -0,0 +1,7 @@
+import { MutableRefObject } from 'react';
+export declare const useDropdownPosition: (inputRef: MutableRefObject<HTMLCpslInputElement | HTMLDivElement>) => {
+    dropdownMaxHeight: number;
+    dropdownWidth: number;
+    mobileAnchor: number;
+    resize: () => void;
+};

package/dist/modal/components/AuthInput/hooks/useDropdownPosition.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+export const useDropdownPosition = (inputRef) => {
+    const [dropdownMaxHeight, setDropdownMaxHeight] = useState();
+    const [dropdownWidth, setDropdownWidth] = useState();
+    const [mobileAnchor, setMobileAnchor] = useState();
+    const resize = () => {
+        var _a, _b, _c;
+        const newMaxHeight = Math.max(window.innerHeight - ((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().bottom) - 20, window.innerHeight * 0.25);
+        setDropdownMaxHeight(newMaxHeight);
+        setDropdownWidth((_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width);
+        setMobileAnchor((_c = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().height);
+    };
+    if (inputRef.current && !dropdownMaxHeight) {
+        resize();
+    }
+    useEffect(() => {
+        window.addEventListener('resize', resize);
+        return () => {
+            window.removeEventListener('resize', resize);
+        };
+    }, []);
+    return { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize };
+};

package/dist/modal/components/AuthInput/phoneMasks.d.ts

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