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

package/dist/modal/components/AddFunds/AddFundsAwaiting.js

@@ -1,72 +0,0 @@
-"use client";
-import {
-  __spreadValues
-} from "../../../chunk-MMUBH76A.js";
-import { jsx } from "react/jsx-runtime";
-import { StepContainer } from "../common.js";
-import { OnRampProvider } from "@getpara/web-sdk";
-import { useModalStore, useThemeStore } from "../../stores/index.js";
-import { lazy, useEffect, useMemo, useState } from "react";
-import { ModalStep } from "../../utils/steps.js";
-import { RampEmbed, StripeEmbed } from "@getpara/react-common";
-import styled from "styled-components";
-import { useGoBack } from "../../hooks/useGoBack.js";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-const STEPS = {
-  CANCELLED: ModalStep.ADD_FUNDS_FAILURE,
-  FINISHED: ModalStep.ADD_FUNDS_SUCCESS
-};
-const AddFundsAwaiting = () => {
-  const setStep = useModalStore((state) => state.setStep);
-  const goBack = useGoBack();
-  const onRampConfig = useModalStore((state) => state.onRampConfig);
-  const onRampPurchase = useModalStore((state) => state.onRampPurchase);
-  const setOnRampPurchase = useModalStore((state) => state.setOnRampPurchase);
-  const para = useInternalClient();
-  const appName = useThemeStore((state) => state.appName);
-  const isDark = useThemeStore((state) => state.isDark);
-  const [MoonPayEmbed, setMoonPayEmbed] = useState(null);
-  const props = {
-    para,
-    appName,
-    onRampConfig,
-    onRampPurchase,
-    isDark,
-    isEmbedded: true,
-    setOnRampPurchase,
-    onClose: goBack
-  };
-  useEffect(() => {
-    const _MoonPayEmbed = lazy(() => import("./MoonPayEmbed.js"));
-    setMoonPayEmbed(_MoonPayEmbed);
-  }, []);
-  const onRampEmbed = useMemo(() => {
-    if (!onRampPurchase.id) {
-      return null;
-    }
-    switch (onRampPurchase == null ? void 0 : onRampPurchase.provider) {
-      case OnRampProvider.STRIPE:
-        return /* @__PURE__ */ jsx(StripeEmbed, __spreadValues({}, props));
-      case OnRampProvider.MOONPAY:
-        return !MoonPayEmbed || typeof window === "undefined" ? null : /* @__PURE__ */ jsx(MoonPayEmbed, __spreadValues({}, props));
-      case OnRampProvider.RAMP:
-        return /* @__PURE__ */ jsx(RampEmbed, __spreadValues({ apiKey: onRampConfig.rampApiKey }, props));
-    }
-  }, [onRampPurchase == null ? void 0 : onRampPurchase.provider, MoonPayEmbed]);
-  useEffect(() => {
-    let timeoutId;
-    if ((onRampPurchase == null ? void 0 : onRampPurchase.status) && ["CANCELLED", "FINISHED"].includes(onRampPurchase.status)) {
-      timeoutId = setTimeout(() => {
-        setStep(STEPS[onRampPurchase.status]);
-      }, 5e3);
-    }
-    return () => clearTimeout(timeoutId);
-  }, [onRampPurchase == null ? void 0 : onRampPurchase.status]);
-  return /* @__PURE__ */ jsx(Container, { $wide: true, children: onRampEmbed });
-};
-const Container = styled(StepContainer)`
-  flex: 1;
-`;
-export {
-  AddFundsAwaiting
-};

package/dist/modal/components/AddFunds/AddFundsDone.js

@@ -1,43 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Heading, HeroIcon, InnerStepContainer, StepContainer } from "../common.js";
-import { useModalStore, useThemeStore } from "../../stores/index.js";
-import { useMemo } from "react";
-import { CpslButton, CpslText } from "@getpara/react-components";
-import { getAddFundsStep } from "../../utils/steps.js";
-const AddFundsDone = ({ isSuccess, onClose }) => {
-  const hideWallets = useThemeStore((state) => state.hideWallets);
-  const setStep = useModalStore((state) => state.setStep);
-  const onRampPurchase = useModalStore((state) => state.onRampPurchase);
-  const accountAddFundTab = useModalStore((state) => state.accountAddFundTab);
-  const formatter = useMemo(() => {
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: (onRampPurchase == null ? void 0 : onRampPurchase.fiat) || "USD"
-    });
-  }, [onRampPurchase == null ? void 0 : onRampPurchase.fiat]);
-  const heading = isSuccess ? "Transaction Successful" : "Something Went Wrong";
-  const text = isSuccess ? `${formatter.format(parseFloat(onRampPurchase == null ? void 0 : onRampPurchase.fiatQuantity))} is now available in your ${hideWallets ? "account" : "wallet"}.` : `No funds were added to your ${hideWallets ? "account" : "wallet"}.`;
-  const buttonText = isSuccess ? "Done" : "Try Again";
-  return /* @__PURE__ */ jsxs(StepContainer, { children: [
-    /* @__PURE__ */ jsx(HeroIcon, { icon: "checkCircleFilled" }),
-    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: heading }),
-      /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", children: text })
-    ] }),
-    /* @__PURE__ */ jsx(
-      CpslButton,
-      {
-        fullWidth: true,
-        onClick: () => {
-          isSuccess ? onClose() : setStep(getAddFundsStep(accountAddFundTab));
-        },
-        children: buttonText
-      }
-    )
-  ] });
-};
-export {
-  AddFundsDone
-};

package/dist/modal/components/AddFunds/index.js

@@ -1,4 +0,0 @@
-"use client";
-export * from "./AddFunds.js";
-export * from "./AddFundsAwaiting.js";
-export * from "./AddFundsDone.js";

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

@@ -1,283 +0,0 @@
-"use client";
-import {
-  __async
-} from "../../../chunk-MMUBH76A.js";
-import { jsx, 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 { 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";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useSetLoginURLs } from "../../hooks/useSetLoginURLs.js";
-const DEFAULT_COUNTRY = { label: "United States", value: "+1", selectedLabel: "US", icon: "US" };
-function isCcMatch(countryCode, option) {
-  return countryCode === "+1" ? option.selectedLabel === "US" : option.value === countryCode;
-}
-const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
-  var _a, _b;
-  const inputRef = useRef(null);
-  const { dropdownMaxHeight, dropdownWidth } = useDropdownPosition(inputRef);
-  const para = useInternalClient();
-  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 setBiometricLocationHints = useModalStore((state) => state.setBiometricLocationHints);
-  const setLoginURLs = useSetLoginURLs();
-  const [countryCode, setCountryCode] = useState(
-    (authInfo == null ? void 0 : authInfo.authType) === "phone" ? authInfo.auth.countryCode || "+1" : "+1"
-  );
-  const [identifier, setIdentifier] = useState(
-    (() => {
-      if (!authInfo || ["telegram", "farcaster"].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 : void 0
-  );
-  const [matchedCountryCode, setMatchedCountryCode] = useState(
-    (_a = countryCodes.find((option) => isCcMatch(countryCode, option))) != null ? _a : 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((option) => isCcMatch(newIdentifier, option));
-      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" : void 0);
-    setIdentifier(newIdentifier);
-  };
-  const handleCountryCodeInput = (ev) => {
-    const matchedCountryCode2 = countryCodes.find((code) => code.selectedLabel === ev.detail);
-    setCountryCode(matchedCountryCode2.value);
-    setMatchedCountryCode(matchedCountryCode2);
-  };
-  const login = () => __async(void 0, null, 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;
-      }
-      yield para.logout();
-      auth = { email: identifier };
-      setAuthInfo(auth);
-      const userExists = yield para.checkIfUserExists({ email: identifier });
-      if (userExists) {
-        const supportedAuthMethods = yield para.initiateUserLoginV2(auth);
-        const biometricLocationHints = supportedAuthMethods.has(AuthMethod.PASSKEY) ? yield para.getUserBiometricLocationHints() : [];
-        yield setLoginURLs({ supportedAuthMethods, authType: "email" });
-        setFlow("login");
-        setStep(ModalStep.BIOMETRIC_LOGIN);
-        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({ phone: identifier, countryCode });
-      } catch (error2) {
-        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() : [];
-        yield setLoginURLs({ supportedAuthMethods, authType: "phone" });
-        setFlow("login");
-        setStep(ModalStep.BIOMETRIC_LOGIN);
-        setBiometricLocationHints(biometricLocationHints);
-        return;
-      }
-      yield para.createUserByPhone(auth);
-      setFlow("signUp");
-      setStep(ModalStep.VERIFICATIONS);
-      return;
-    }
-  });
-  const handleSubmit = () => __async(void 0, null, function* () {
-    setIsLoggingIn(true);
-    yield login();
-    setIsLoggingIn(false);
-  });
-  if (disableEmailLogin && disablePhoneLogin) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "form",
-    {
-      onSubmit: (e) => __async(void 0, null, function* () {
-        e.preventDefault();
-        yield handleSubmit();
-      }),
-      children: /* @__PURE__ */ 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) => __async(void 0, null, function* () {
-            return e.key === "Enter" && handleSubmit();
-          }),
-          contrastText: true,
-          isPhone,
-          mask: identifierType === "phone" ? (_b = phoneMasks[matchedCountryCode.selectedLabel]) != null ? _b : defaultPhoneMask : void 0,
-          enterkeyhint: "go",
-          noAutoDisable: true,
-          disabled: isLoggingIn,
-          "data-testid": "auth-input",
-          children: [
-            /* @__PURE__ */ jsxs(IconContainer, { slot: "start", children: [
-              !disableEmailLogin && (isUnknown || isEmail) && /* @__PURE__ */ jsx(CpslIcon, { "aria-label": "email", icon: "mail" }),
-              !disablePhoneLogin && isUnknown && /* @__PURE__ */ jsx(CpslIcon, { "aria-label": "phone", icon: "phone" }),
-              isPhone && /* @__PURE__ */ jsxs(
-                CountryCodeSelect,
-                {
-                  selectedValue: matchedCountryCode.selectedLabel,
-                  onCpslSelectValueChange: handleCountryCodeInput,
-                  showFormattedSelectedItem: true,
-                  autoWidth: true,
-                  dropdownMaxHeight,
-                  anchorElId: "authInput",
-                  $width: dropdownWidth,
-                  showSearch: true,
-                  searchPlaceholder: "Search Countries",
-                  onCpslSearchChange: handleSearchInput,
-                  "data-testid": "country-code-select",
-                  children: [
-                    matchedCountryCode && /* @__PURE__ */ jsxs(SelectedItem, { slot: "selected-item", children: [
-                      /* @__PURE__ */ jsx(CpslText, { children: matchedCountryCode.selectedLabel }),
-                      /* @__PURE__ */ jsx(CpslText, { children: matchedCountryCode.value })
-                    ] }),
-                    filteredCountryCodes.map((cc) => /* @__PURE__ */ jsxs(StyledSelectItem, { slot: "items", value: cc.selectedLabel, children: [
-                      /* @__PURE__ */ jsx(CpslText, { children: cc.label }),
-                      /* @__PURE__ */ jsx(CpslText, { children: cc.value })
-                    ] }, cc.selectedLabel))
-                  ]
-                }
-              )
-            ] }),
-            identifier && /* @__PURE__ */ jsx(CpslButton, { slot: "end", size: "small", fullWidth: true, disabled: isLoggingIn, onClick: handleSubmit, children: isLoggingIn ? /* @__PURE__ */ jsx(CpslSpinner, { size: 16 }) : /* @__PURE__ */ 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;
-`;
-export {
-  AuthInput
-};

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

@@ -1,42 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-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();
-var countryCodes_default = countryCodes;
-export {
-  countryCodes_default as default
-};

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

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