@getpara/react-sdk 1.4.4-dev.1 → 1.5.0

package/dist/index.js

@@ -4,13 +4,14 @@
 import { CpslAuthModal, defineCustomElements, generateTheme } from "@getpara/react-components";
 
 // src/modal/components/ModalContent/ModalContent.tsx
-import { forwardRef, useEffect as useEffect22, useImperativeHandle, useState as useState17 } from "react";
+import { forwardRef, useEffect as useEffect22, useImperativeHandle, useMemo as useMemo13, useState as useState17 } from "react";
 import {
   entityToWallet,
   OnRampProvider as OnRampProvider4,
   OnRampAsset as OnRampAsset3,
   Network as Network3,
-  EnabledFlow as EnabledFlow3
+  EnabledFlow as EnabledFlow3,
+  isPasskeySupported as isPasskeySupported3
 } from "@getpara/web-sdk";
 
 // src/modal/stores/modal/useModalStore.ts
@@ -1749,7 +1750,7 @@ var LoginDoneStep = ({ onClose }) => {
   return /* @__PURE__ */ jsxs5(StepContainer, { children: [
     /* @__PURE__ */ jsx5(HeroIcon, { icon: "checkCircleFilled" }),
     /* @__PURE__ */ jsx5(Heading, { variant: "headingS", weight: "bold", children: "Connected" }),
-    !hideWallets && /* @__PURE__ */ jsx5(WalletCards, { children: para.isUsingExternalWallet() ? /* @__PURE__ */ jsx5(ExternalWalletCard, { address: para.currentExternalWalletAddresses?.[0] }) : para.currentWalletIdsArray.map(([id, type]) => {
+    !hideWallets && /* @__PURE__ */ jsx5(WalletCards, { children: para.isUsingExternalWallet() ? /* @__PURE__ */ jsx5(ExternalWalletCard, { address: Object.values(para.externalWallets || {})[0]?.address }) : para.currentWalletIdsArray.map(([id, type]) => {
       return /* @__PURE__ */ jsx5(WalletCard, { id, type }, `${id}-${type}`);
     }) })
   ] });
@@ -2075,7 +2076,7 @@ function ExternalWalletProvider({
     }
   }, [wallet]);
   const chains = useMemo2(() => {
-    const walletType = para.externalWallets[para.currentExternalWalletAddresses?.[0] ?? ""]?.type;
+    const walletType = Object.values(para.externalWallets || {})[0]?.type;
     switch (walletType) {
       case WalletType2.COSMOS: {
         return cosmosChains;
@@ -2089,7 +2090,7 @@ function ExternalWalletProvider({
     }
   }, [cosmosChains, evmChains, selectedExternalWalletId]);
   const chainId = useMemo2(() => {
-    const walletType = para.externalWallets[para.currentExternalWalletAddresses?.[0] ?? ""]?.type;
+    const walletType = Object.values(para.externalWallets || {})[0]?.type;
     switch (walletType) {
       case WalletType2.COSMOS: {
         return cosmosChainId;
@@ -2104,7 +2105,7 @@ function ExternalWalletProvider({
   }, [cosmosChains, evmChains, selectedExternalWalletId]);
   const switchChain = useCallback(
     async (chainId2) => {
-      const walletType = para.externalWallets[para.currentExternalWalletAddresses?.[0] ?? ""]?.type;
+      const walletType = Object.values(para.externalWallets || {})[0]?.type;
       if (walletType) {
         let resp;
         setExternalWalletError();
@@ -2183,7 +2184,7 @@ function ExternalWalletProvider({
   };
   const username = useMemo2(() => {
     let username2;
-    const storedExternalWallet = para.externalWallets[para.currentExternalWalletAddresses?.[0] ?? ""];
+    const storedExternalWallet = Object.values(para.externalWallets || {})[0];
     if (storedExternalWallet) {
       const walletType = storedExternalWallet?.type;
       switch (walletType) {
@@ -2200,7 +2201,7 @@ function ExternalWalletProvider({
     return username2;
   }, [evmUsername, wallet]);
   const avatar = useMemo2(() => {
-    const walletType = para.externalWallets[para.currentExternalWalletAddresses?.[0] ?? ""]?.type;
+    const walletType = Object.values(para.externalWallets || {})[0]?.type;
     if (walletType) {
       switch (walletType) {
         case WalletType2.EVM: {
@@ -3749,6 +3750,9 @@ var phoneMasks = {
 import { AuthMethod as AuthMethod5 } from "@getpara/web-sdk";
 import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 var DEFAULT_COUNTRY = { label: "United States", value: "+1", selectedLabel: "US", icon: "US" };
+function isCcMatch(countryCode, option) {
+  return countryCode === "+1" ? option.selectedLabel === "US" : option.value === countryCode;
+}
 var AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
   const inputRef = useRef5(null);
   const { dropdownMaxHeight, dropdownWidth } = useDropdownPosition(inputRef);
@@ -3760,7 +3764,7 @@ var AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
   const setSupportedAuthMethods = useModalStore((state) => state.setSupportedAuthMethods);
   const setBiometricLocationHints = useModalStore((state) => state.setBiometricLocationHints);
   const [countryCode, setCountryCode] = useState11(
-    authInfo?.authType === "phone" ? authInfo.auth.countryCode : "+1"
+    authInfo?.authType === "phone" ? authInfo.auth.countryCode || "+1" : "+1"
   );
   const [identifier, setIdentifier] = useState11(
     (() => {
@@ -3776,7 +3780,9 @@ var AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
   const [identifierType, setIdentifierType] = useState11(
     authInfo && (authInfo.authType === "email" || authInfo.authType === "phone") ? authInfo.authType : void 0
   );
-  const [matchedCountryCode, setMatchedCountryCode] = useState11(DEFAULT_COUNTRY);
+  const [matchedCountryCode, setMatchedCountryCode] = useState11(
+    countryCodes_default.find((option) => isCcMatch(countryCode, option)) ?? DEFAULT_COUNTRY
+  );
   const [isLoggingIn, setIsLoggingIn] = useState11(false);
   const [error, setError] = useState11("");
   const [search, setSearch] = useState11("");
@@ -3793,7 +3799,7 @@ var AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
     const newIdentifier = ev.detail.value;
     let isNewPhone = false, isNewEmail = false;
     if (!disablePhoneLogin) {
-      const countryCodeInputMatch = countryCodes_default.find((cc) => cc.value === newIdentifier);
+      const countryCodeInputMatch = countryCodes_default.find((option) => isCcMatch(newIdentifier, option));
       if (countryCodeInputMatch) {
         setCountryCode(countryCodeInputMatch.value);
         setMatchedCountryCode(countryCodeInputMatch);
@@ -5422,6 +5428,7 @@ var useEmbeddedExternalConnection = () => {
 };
 
 // src/modal/components/ModalContent/ModalContent.tsx
+import { formatBiometricHints as formatBiometricHints2 } from "@getpara/react-common";
 import { Fragment as Fragment21, jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
 function isRampConfig(config) {
   return "hostApiKey" in config;
@@ -5476,6 +5483,10 @@ var ModalContent = forwardRef(
     const isIFrameReady = useModalStore((state) => state.isIFrameReady);
     const goBack = useGoBack();
     const createAccount = useCreateAccount();
+    const biometricLocationHints = useModalStore((state) => state.biometricLocationHints ?? []);
+    const formattedHints = useMemo13(() => formatBiometricHints2(biometricLocationHints), [biometricLocationHints]);
+    const passkeysSupported = isPasskeySupported3();
+    const [hasHints, isOnKnownDevice] = [biometricLocationHints?.length > 0, formattedHints?.isOnKnownDevice ?? false];
     const [walletCreationInProgress, setWalletCreationInProgress] = useState17(false);
     const connectEmbeddedToExternalConnectors = useEmbeddedExternalConnection();
     useEffect22(() => {
@@ -5571,7 +5582,12 @@ var ModalContent = forwardRef(
       genWallet();
     }, [isLogin, currentStep]);
     useEffect22(() => {
-      if (["AWAITING_BIOMETRIC_LOGIN" /* AWAITING_BIOMETRIC_LOGIN */, "AWAITING_PASSWORD_LOGIN" /* AWAITING_PASSWORD_LOGIN */].includes(currentStep) && (webAuthURLForLogin || passwordUrlForLogin)) {
+      const isAwaitingLogin = ["AWAITING_BIOMETRIC_LOGIN" /* AWAITING_BIOMETRIC_LOGIN */, "AWAITING_PASSWORD_LOGIN" /* AWAITING_PASSWORD_LOGIN */].includes(currentStep);
+      const isUnknownDeviceWithHints = hasHints && !isOnKnownDevice;
+      const isPasskeyUnsupported = !passkeysSupported;
+      const hasLoginURLs = webAuthURLForLogin || passwordUrlForLogin;
+      const userNeedsToLogin = isAwaitingLogin || isUnknownDeviceWithHints || isPasskeyUnsupported;
+      if (userNeedsToLogin && hasLoginURLs) {
         if (loginTransitionOverride) {
           async function loginOverride() {
             await loginTransitionOverride(para);
@@ -5691,7 +5707,7 @@ import { ParaEvent as ParaEvent2 } from "@getpara/web-sdk";
 import { useEffect as useEffect23, useState as useState18 } from "react";
 
 // src/modal/providers/EvmExternalWalletContextStub.tsx
-import { createContext as createContext2, useMemo as useMemo13 } from "react";
+import { createContext as createContext2, useMemo as useMemo14 } from "react";
 import { jsx as jsx40 } from "react/jsx-runtime";
 var defaultEvmExternalWallet = {
   wallets: [],
@@ -5714,7 +5730,7 @@ function EvmExternalWalletProvider({ children }) {
   return /* @__PURE__ */ jsx40(
     EvmExternalWalletContext.Provider,
     {
-      value: useMemo13(
+      value: useMemo14(
         () => ({ wallets, chains, chainId, username, avatar, disconnect, switchChain }),
         [wallets, chains, chainId, username, avatar, disconnect, switchChain]
       ),
@@ -5751,7 +5767,7 @@ var ExternalWallet = {
 };
 
 // src/modal/providers/SolanaExternalWalletContextStub.tsx
-import { createContext as createContext3, useMemo as useMemo14 } from "react";
+import { createContext as createContext3, useMemo as useMemo15 } from "react";
 import { jsx as jsx41 } from "react/jsx-runtime";
 var defaultSolanaExternalWallet = {
   wallets: [],
@@ -5761,11 +5777,11 @@ var SolanaExternalWalletContext = createContext3(defaultSolanaExternalWallet);
 function SolanaExternalWalletProvider({ children }) {
   const wallets = [];
   const disconnect = () => Promise.resolve();
-  return /* @__PURE__ */ jsx41(SolanaExternalWalletContext.Provider, { value: useMemo14(() => ({ wallets, disconnect }), [wallets, disconnect]), children });
+  return /* @__PURE__ */ jsx41(SolanaExternalWalletContext.Provider, { value: useMemo15(() => ({ wallets, disconnect }), [wallets, disconnect]), children });
 }
 
 // src/modal/providers/CosmosExternalWalletContextStub.tsx
-import { createContext as createContext4, useMemo as useMemo15 } from "react";
+import { createContext as createContext4, useMemo as useMemo16 } from "react";
 import { jsx as jsx42 } from "react/jsx-runtime";
 var defaultCosmosExternalWallet = {
   wallets: [],
@@ -5784,7 +5800,7 @@ function CosmosExternalWalletProvider({ children }) {
   return /* @__PURE__ */ jsx42(
     CosmosExternalWalletContext.Provider,
     {
-      value: useMemo15(
+      value: useMemo16(
         () => ({ wallets, chains, chainId, disconnect, switchChain }),
         [wallets, chains, chainId, disconnect, switchChain]
       ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpara/react-sdk",
-  "version": "1.4.4-dev.1",
+  "version": "1.5.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,9 +12,9 @@
     "*.css"
   ],
   "dependencies": {
-    "@getpara/react-common": "1.4.3",
-    "@getpara/react-components": "1.4.3",
-    "@getpara/web-sdk": "1.4.3",
+    "@getpara/react-common": "1.5.0",
+    "@getpara/react-components": "1.5.0",
+    "@getpara/web-sdk": "1.5.0",
     "@tanstack/react-query": "^5.0.0",
     "date-fns": "^3.6.0",
     "framer-motion": "11.3.28",
@@ -49,5 +49,5 @@
   "resolutions": {
     "styled-components": "^6"
   },
-  "gitHead": "e6e791d4e4f9afd94f2093d6045d686b85e5a682"
+  "gitHead": "0e3c1401b4f1da60b288cdde7695077c9bcbc48f"
 }