@getpara/react-sdk 1.7.0 → 1.8.0

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

@@ -0,0 +1,72 @@
+"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

@@ -0,0 +1,43 @@
+"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/{MoonPayEmbed-Q2HP2BFI.js → modal/components/AddFunds/MoonPayEmbed.js}

@@ -1,7 +1,5 @@
 "use client";
-import "./chunk-MMUBH76A.js";
-
-// src/modal/components/AddFunds/MoonPayEmbed.tsx
+import "../../../chunk-MMUBH76A.js";
 import { MoonPayEmbed } from "@getpara/react-common";
 var MoonPayEmbed_default = MoonPayEmbed;
 export {

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

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

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

@@ -0,0 +1,283 @@
+"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

@@ -0,0 +1,42 @@
+"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

@@ -0,0 +1,33 @@
+"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
+};