@getpara/react-sdk 1.12.0 → 2.0.0-alpha.11

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

@@ -1,40 +1,48 @@
 "use client";
-import {
-  __spreadValues
-} from "../../../chunk-MMUBH76A.js";
+import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslDivider, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
-import { useModalStore, useThemeStore, useUserInfoStore } from "../../stores/index.js";
+import { useModalStore } from "../../stores/index.js";
 import { InnerStepContainer, StepContainer, Heading, QRContainer } from "../common.js";
 import { useCopyToClipboard, UserIdentifier } from "@getpara/react-common";
-import { useCreateAccount } from "../../hooks/useCreateAccount.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-const BiometricCreationStep = ({ twoFactorAuthEnabled = false }) => {
-  const createAccount = useCreateAccount({ twoFactorAuthEnabled });
+import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
+import { AuthMethod } from "@getpara/web-sdk";
+import { useStore } from "../../../provider/stores/useStore.js";
+const BiometricCreationStep = () => {
   const para = useInternalClient();
-  const appName = useThemeStore((state) => state.appName);
-  const webAuthURLForCreate = useModalStore((state) => state.webAuthURLForCreate);
-  const iFrameUrl = useModalStore((state) => state.iFrameUrl);
+  const authInfo = para.authInfo;
+  const appName = useStore((state) => state.appName);
+  const { presentSignupUi } = useAuthActions();
+  const signupState = useModalStore((state) => state.getSignupState());
+  const authStepRoute = useModalStore((state) => state.authStepRoute);
   const isPasskeySupported = useModalStore((state) => state.isPasskeySupported);
-  const authInfo = useUserInfoStore((state) => state.getAuthInfo());
   const [isCopied, copy] = useCopyToClipboard();
   const handleCopy = () => {
-    copy(webAuthURLForCreate);
+    if (signupState == null ? void 0 : signupState.passkeyUrl) {
+      copy(signupState.passkeyUrl);
+    }
   };
-  const isBoth = !!webAuthURLForCreate && !!iFrameUrl;
+  const onClick = (method) => () => {
+    presentSignupUi(method, signupState);
+  };
+  const isBoth = !!(signupState == null ? void 0 : signupState.passkeyUrl) && !!(signupState == null ? void 0 : signupState.passwordUrl);
+  if (!signupState) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
       /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: para.isExternalWalletAuth ? `Finish setup for your${appName ? ` ${appName}` : ""} wallet` : isBoth ? "Secure Your Account" : "Create Passkey" }),
-      /* @__PURE__ */ jsx(UserIdentifier, __spreadValues({}, authInfo)),
+      /* @__PURE__ */ jsx(UserIdentifier, { authInfo }),
       /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: isBoth ? "Choose a password or set up a passkey" : "Your Passkey keeps your account safe." })
     ] }),
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      isPasskeySupported ? /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, onClick: createAccount.withPasskey, children: [
+      isPasskeySupported ? /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, onClick: onClick(AuthMethod.PASSKEY), children: [
         /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "key" }),
         isBoth ? "Create Passkey" : "Create"
       ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", children: "Scan with your mobile device" }),
-        /* @__PURE__ */ jsx(QRContainer, { children: !webAuthURLForCreate ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: webAuthURLForCreate }) }),
+        /* @__PURE__ */ jsx(QRContainer, { children: !(signupState == null ? void 0 : signupState.passkeyUrl) ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: signupState.passkeyUrl }) }),
         /* @__PURE__ */ jsxs(CpslButton, { size: "small", variant: "ghost", onClick: handleCopy, children: [
           /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: isCopied ? "check" : "copy" }),
           isCopied ? "Copied" : "Copy Link"
@@ -42,7 +50,7 @@ const BiometricCreationStep = ({ twoFactorAuthEnabled = false }) => {
       ] }),
       isBoth && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(CpslDivider, { children: "or" }),
-        /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, onClick: createAccount.withPassword, children: [
+        /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, onClick: onClick(AuthMethod.PASSWORD), disabled: !!authStepRoute, children: [
           /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "passcode" }),
           "Choose Password"
         ] })

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

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

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

@@ -1,87 +1,49 @@
 "use client";
-import {
-  __spreadValues
-} from "../../../chunk-MMUBH76A.js";
+import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslDivider, CpslIcon } from "@getpara/react-components";
-import { useMemo } from "react";
-import { useModalStore, useUserInfoStore } from "../../stores/index.js";
-import { ModalStep } from "../../utils/steps.js";
+import { useModalStore } from "../../stores/index.js";
 import { Heading, StepContainer, InnerStepContainer } from "../common.js";
-import { openPopup } from "../../utils/openPopup.js";
 import styled from "styled-components";
 import { AuthMethod } from "@getpara/web-sdk";
-import { formatBiometricHints, KnownDevices, UserIdentifier } from "@getpara/react-common";
+import { KnownDevices, UserIdentifier } from "@getpara/react-common";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
 const BiometricLoginStep = () => {
-  const refs = useModalStore((state) => state.refs);
-  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 biometricLocationHints = useModalStore((state) => state.biometricLocationHints);
-  const authInfo = useUserInfoStore((state) => state.getAuthInfo());
-  const passkeysSupported = useModalStore((state) => state.isPasskeySupported);
-  const formattedHints = useMemo(() => formatBiometricHints(biometricLocationHints), [biometricLocationHints]);
-  const handlePasskeyClick = () => {
-    refs.popupWindow.current = openPopup({
-      url: webAuthURLForLogin,
-      target: "ParaPasskey",
-      type: "LOGIN_PASSKEY",
-      current: refs.popupWindow.current
-    });
-    setStep(ModalStep.AWAITING_BIOMETRIC_LOGIN);
-  };
-  const handlePasswordClick = () => {
-    refs.popupWindow.current = openPopup({
-      url: passwordUrlForLogin,
-      target: "ParaPassword",
-      type: "LOGIN_PASSWORD",
-      current: refs.popupWindow.current
-    });
-    setStep(ModalStep.AWAITING_PASSWORD_LOGIN);
-  };
-  function shouldShowWelcomeBack() {
-    return !(biometricLocationHints == null ? void 0 : biometricLocationHints.length) || passkeysSupported && formattedHints.isOnKnownDevice || (supportedAuthMethods == null ? void 0 : supportedAuthMethods.has) && supportedAuthMethods.has(AuthMethod.PASSWORD);
+  var _a;
+  const loginState = useModalStore((state) => state.getLoginState());
+  const para = useInternalClient();
+  const { biometricHints, presentLoginUi } = useAuthActions();
+  const isPasskeySupported = useModalStore((state) => state.isPasskeySupported);
+  const [isPasskey, isPassword, hasHints, isPasskeyOnKnownDevice] = [
+    !!(loginState == null ? void 0 : loginState.passkeyUrl),
+    !!(loginState == null ? void 0 : loginState.passwordUrl),
+    (_a = loginState == null ? void 0 : loginState.biometricHints) == null ? void 0 : _a.length,
+    isPasskeySupported && !!(biometricHints == null ? void 0 : biometricHints.isOnKnownDevice)
+  ];
+  const knownDeviceLink = loginState == null ? void 0 : loginState.passkeyKnownDeviceUrl;
+  const isPasskeyUnavailable = hasHints && !(biometricHints == null ? void 0 : biometricHints.isOnKnownDevice) || !isPasskeySupported;
+  const displayWelcomeBack = hasHints || isPasskeyOnKnownDevice || isPassword;
+  if (!loginState) {
+    return null;
   }
   return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      shouldShowWelcomeBack() && /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: "Welcome back," }),
-      /* @__PURE__ */ jsx(UserIdentifier, __spreadValues({}, authInfo))
+      displayWelcomeBack && /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: "Welcome back," }),
+      /* @__PURE__ */ jsx(UserIdentifier, { authInfo: para.authInfo })
     ] }),
     /* @__PURE__ */ jsxs(MainContainer, { children: [
-      (supportedAuthMethods == null ? void 0 : supportedAuthMethods.has) && supportedAuthMethods.has(AuthMethod.PASSWORD) && passwordUrlForLogin && /* @__PURE__ */ jsx(PasswordOnly, { handlePasswordClick }),
-      (supportedAuthMethods == null ? void 0 : supportedAuthMethods.has) && supportedAuthMethods.has(AuthMethod.PASSKEY) && webAuthURLForLogin && /* @__PURE__ */ jsx(
-        BiometricOnly,
-        {
-          handlePasskeyClick,
-          formattedHints,
-          shortLoginLink: webAuthURLForLogin,
-          passkeysSupported,
-          biometricLocationHints
-        }
-      )
-    ] })
-  ] });
-};
-const PasswordOnly = ({ handlePasswordClick }) => {
-  return /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: handlePasswordClick, children: "Login" });
-};
-const BiometricOnly = ({
-  handlePasskeyClick,
-  formattedHints,
-  shortLoginLink,
-  passkeysSupported,
-  biometricLocationHints = []
-}) => {
-  const [hasHints, isOnKnownDevice] = [biometricLocationHints.length > 0, formattedHints.isOnKnownDevice];
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    (hasHints && !isOnKnownDevice || !passkeysSupported) && /* @__PURE__ */ jsx(KnownDevices, { hints: formattedHints, link: shortLoginLink }),
-    passkeysSupported && /* @__PURE__ */ jsxs(Fragment, { children: [
-      hasHints && !isOnKnownDevice && /* @__PURE__ */ jsx(CpslDivider, { children: "or" }),
-      /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: handlePasskeyClick, children: !hasHints || isOnKnownDevice ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "key" }),
-        "Login with passkey"
-      ] }) : "Continue anyway" })
+      isPassword && /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: () => presentLoginUi(AuthMethod.PASSWORD, loginState), children: "Login" }),
+      isPasskey && !!knownDeviceLink && /* @__PURE__ */ jsxs(Fragment, { children: [
+        isPasskeyUnavailable && !!biometricHints && /* @__PURE__ */ jsx(KnownDevices, { hints: biometricHints, link: knownDeviceLink }),
+        isPasskeySupported && /* @__PURE__ */ jsxs(Fragment, { children: [
+          isPasskeyUnavailable && /* @__PURE__ */ jsx(CpslDivider, { children: "or" }),
+          /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: () => presentLoginUi(AuthMethod.PASSKEY, loginState), children: isPasskeyUnavailable ? "Continue anyway" : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "key" }),
+            "Login with passkey"
+          ] }) })
+        ] })
+      ] })
     ] })
   ] });
 };

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

@@ -1,10 +1,11 @@
-import { OAuthMethod } from '@getpara/web-sdk';
+import { TOAuthMethod } from '@getpara/web-sdk';
 interface BodyProps {
-    oAuthMethods?: OAuthMethod[];
+    oAuthMethods?: TOAuthMethod[];
     twoFactorAuthEnabled?: boolean;
     disableEmailLogin: boolean;
     disablePhoneLogin: boolean;
+    isGuestModeEnabled?: boolean;
     onClose: () => void;
 }
-export declare const Body: ({ oAuthMethods, twoFactorAuthEnabled, disableEmailLogin, disablePhoneLogin, onClose }: BodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Body: ({ oAuthMethods, twoFactorAuthEnabled, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, onClose, }: BodyProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modal/components/Body/Body.js

@@ -5,8 +5,7 @@ import { styled } from "styled-components";
 import { IFrameSteps, ModalStep } from "../../utils/steps.js";
 import { CpslAlert, CpslIcon } from "@getpara/react-components";
 import { VerificationCodeStep } from "../VerificationCodeStep/VerificationCodeStep.js";
-import { ExternalWalletVerificationStep } from "../ExternalWalletVerificationStep/ExternalWalletVerificationStep.js";
-import { useModalStore, useThemeStore } from "../../stores/index.js";
+import { useModalStore } from "../../stores/index.js";
 import { BiometricLoginStep } from "../BiometricLoginStep/BiometricLoginStep.js";
 import { Setup2FAStep } from "../Setup2FAStep/Setup2FAStep.js";
 import { LoginDoneStep } from "../LoginDoneStep/LoginDoneStep.js";
@@ -36,6 +35,8 @@ import { useEffect, useState } from "react";
 import { TelegramOAuthStep } from "../OAuth/TelegramOAuthStep.js";
 import { AwaitingPasswordStep } from "../AwaitingPasswordStep/AwaitingPasswordStep.js";
 import { IFrameStep } from "../IFrameStep/IFrameStep.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { ExternalWalletVerificationStep } from "../ExternalWalletVerificationStep/ExternalWalletVerificationStep.js";
 import { NetworkSpeedBanner } from "@getpara/react-common";
 const MIN_HEIGHT = {
   [ModalStep.ADD_FUNDS_AWAITING]: "680px"
@@ -46,15 +47,25 @@ const PADDING_TOP = {
 const PADDING_BOTTOM = {
   [ModalStep.TELEGRAM_OAUTH]: "16px"
 };
-const Body = ({ oAuthMethods, twoFactorAuthEnabled, disableEmailLogin, disablePhoneLogin, onClose }) => {
+const Body = ({
+  oAuthMethods,
+  twoFactorAuthEnabled,
+  disableEmailLogin,
+  disablePhoneLogin,
+  isGuestModeEnabled = false,
+  onClose
+}) => {
   const currentStep = useModalStore((state) => state.step);
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const stepDirection = useModalStore((state) => state.stepDirection);
   const setStepDirection = useModalStore((state) => state.setStepDirection);
   const accountAddFundTab = useModalStore((state) => state.accountAddFundTab);
   const setAccountAddFundTab = useModalStore((state) => state.setAccountAddFundTab);
-  const appName = useThemeStore((state) => state.appName);
-  const embeddedModal = useThemeStore((state) => state.embeddedModal);
+  const embeddedModal = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.embeddedModal;
+  });
+  const appName = useStore((state) => state.appName);
   const [isTestModeAlert, setIsTestModeAlert] = useState(onRampConfig == null ? void 0 : onRampConfig.testMode);
   const Content = () => {
     switch (currentStep) {
@@ -64,20 +75,26 @@ const Body = ({ oAuthMethods, twoFactorAuthEnabled, disableEmailLogin, disablePh
           {
             oAuthMethods,
             disableEmailLogin,
-            disablePhoneLogin
+            disablePhoneLogin,
+            isGuestModeEnabled
           }
         );
       }
       case ModalStep.EX_WALLET_MORE: {
         return /* @__PURE__ */ jsx(ExternalWallets, {});
       }
-      case ModalStep.AUTH_MORE: {
+      case ModalStep.AWAITING_GUEST_WALLET_CREATION: {
+        return /* @__PURE__ */ jsx(AwaitingWalletCreationStep, { isGuestMode: true });
+      }
+      case ModalStep.AUTH_MORE:
+      case ModalStep.AUTH_GUEST_SIGNUP: {
         return /* @__PURE__ */ jsx(
           AuthOptions,
           {
             oAuthMethods,
             disableEmailLogin,
-            disablePhoneLogin
+            disablePhoneLogin,
+            isGuestModeEnabled
           }
         );
       }
@@ -118,7 +135,7 @@ const Body = ({ oAuthMethods, twoFactorAuthEnabled, disableEmailLogin, disablePh
         return /* @__PURE__ */ jsx(TwoFactorDoneStep, { onClose });
       }
       case ModalStep.BIOMETRIC_CREATION: {
-        return /* @__PURE__ */ jsx(BiometricCreationStep, { twoFactorAuthEnabled });
+        return /* @__PURE__ */ jsx(BiometricCreationStep, {});
       }
       case ModalStep.AWAITING_OAUTH: {
         return /* @__PURE__ */ jsx(AwaitingOAuthStep, {});
@@ -208,7 +225,7 @@ const Body = ({ oAuthMethods, twoFactorAuthEnabled, disableEmailLogin, disablePh
                 /* @__PURE__ */ jsxs(
                   InnerContainer,
                   {
-                    $embeddedModal: embeddedModal,
+                    $embeddedModal: !!embeddedModal,
                     $step: currentStep,
                     $isIFrameStep: IFrameSteps.includes(currentStep),
                     children: [

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

@@ -1 +1 @@
-export declare const ChainSwitch: () => import("react/jsx-runtime").JSX.Element;
+export declare const ChainSwitch: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/modal/components/ChainSwitch/ChainSwitch.js

@@ -8,12 +8,11 @@ import { CenteredText, InnerStepContainer, QRContainer, StepContainer } from "..
 import { useEffect, useMemo } from "react";
 import { useModalStore } from "../../stores/index.js";
 import styled from "styled-components";
-import { useExternalWallets } from "../../providers/ExternalWalletContext.js";
 import { useCopyToClipboard } from "@getpara/react-common";
 import { ModalStep } from "../../utils/steps.js";
 import { routeMobileExternalWallet } from "../../utils/routeMobileExternalWallet.js";
 import { NETWORK_NOT_SUPPORTED_ERROR } from "../../constants/constants.js";
-import { WalletType } from "@getpara/web-sdk";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 const ChainSwitch = () => {
   const [isCopied, copy] = useCopyToClipboard();
   const externalWalletError = useModalStore((state) => state.externalWalletError);
@@ -21,7 +20,7 @@ const ChainSwitch = () => {
   const setStepDirection = useModalStore((state) => state.setStepDirection);
   const { switchChain, wallet, qrUri, chainIdSwitchingTo, walletDisplayHelpers } = useExternalWallets();
   useEffect(() => {
-    if ((wallet == null ? void 0 : wallet.type) === WalletType.COSMOS) {
+    if ((wallet == null ? void 0 : wallet.type) === "COSMOS") {
       routeMobileExternalWallet(qrUri);
     }
   }, [qrUri, wallet]);
@@ -37,7 +36,9 @@ const ChainSwitch = () => {
     }
   });
   const handleCopy = () => {
-    copy(qrUri);
+    if (qrUri) {
+      copy(qrUri);
+    }
   };
   const Content = useMemo(() => {
     var _a;

package/dist/modal/components/Controls/Controls.js

@@ -4,13 +4,16 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslIcon } from "@getpara/react-components";
 import { styled } from "styled-components";
 import { useModalStore } from "../../stores/index.js";
-import { useThemeStore } from "../../stores/theme/useThemeStore.js";
 import { useGoBack } from "../../hooks/useGoBack.js";
 import { AccountSelect, ChainSelect } from "./Selects.js";
 import { ModalStep } from "../../utils/steps.js";
 import { HeaderButton } from "@getpara/react-common";
+import { useStore } from "../../../provider/stores/useStore.js";
 const Controls = ({ onClose }) => {
-  const bareModal = useThemeStore((state) => state.bareModal);
+  const bareModal = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.bareModal;
+  });
   const hasPreviousStep = useModalStore((state) => state.hasPreviousStep());
   const step = useModalStore((state) => state.step);
   const isFullyLoggedIn = useModalStore((state) => state.isFullyLoggedIn);

package/dist/modal/components/Controls/Selects.d.ts

@@ -1,2 +1,2 @@
-export declare const ChainSelect: () => import("react/jsx-runtime").JSX.Element;
+export declare const ChainSelect: () => import("react/jsx-runtime").JSX.Element | null;
 export declare const AccountSelect: () => import("react/jsx-runtime").JSX.Element;

package/dist/modal/components/Controls/Selects.js

@@ -6,30 +6,29 @@ import {
 } from "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslIcon, CpslIdenticon, CpslText } from "@getpara/react-components";
-import { useExternalWallets } from "../../providers/ExternalWalletContext.js";
 import styled from "styled-components";
-import { useThemeStore } from "../../stores/index.js";
-import { truncateAddress, WalletType } from "@getpara/web-sdk";
+import { truncateAddress } from "@getpara/web-sdk";
 import { useEffect, useRef } from "react";
 import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
-import { useActiveWallet } from "../../hooks/useActiveWallet.js";
+import { useAccount, useWallet, useWalletState } from "../../../provider/index.js";
 import { HeaderSelect, HeaderSelectContainer, HeaderSelectItem } from "../common.js";
-import { useWalletState } from "../../../provider/index.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+import { useStore } from "../../../provider/stores/useStore.js";
 import { useCopyToClipboard } from "@getpara/react-common";
 const getValue = (id, type) => {
   return id && type ? `${id}~${type}` : void 0;
 };
 const WALLET_TYPES = {
-  [WalletType.EVM]: "EVM",
-  [WalletType.SOLANA]: "Solana",
-  [WalletType.COSMOS]: "Cosmos"
+  EVM: "EVM",
+  SOLANA: "Solana",
+  COSMOS: "Cosmos"
 };
 const ChainSelect = () => {
   var _a, _b;
   const containerRef = useRef(null);
   const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
-  const activeWallet = useActiveWallet();
+  const { data: activeWallet } = useWallet();
   const { switchChain, chainId, chains, chainIdSwitchingTo } = useExternalWallets();
   useEffect(() => {
     if (dropdownMaxHeight && chainId) {
@@ -39,7 +38,7 @@ const ChainSelect = () => {
   const handleChainChange = (chainId2) => __async(void 0, null, function* () {
     yield switchChain(chainId2);
   });
-  if (!activeWallet || !activeWallet.isExternal || activeWallet.type === WalletType.SOLANA) {
+  if (!activeWallet || !activeWallet.isExternal || activeWallet.type === "SOLANA") {
     return null;
   }
   const chainIdToUse = chainIdSwitchingTo != null ? chainIdSwitchingTo : chainId;
@@ -55,8 +54,8 @@ const ChainSelect = () => {
       placeholder: "Choose chain...",
       anchorElId: "inputContainer",
       dropdownMaxHeight,
-      $width: dropdownWidth,
-      $top: mobileAnchor + 16 + 1,
+      $width: dropdownWidth != null ? dropdownWidth : 0,
+      $top: (mobileAnchor != null ? mobileAnchor : 0) + 16 + 1,
       autoWidth: true,
       selectedItemVariant: "bodyXS",
       children: [
@@ -74,25 +73,31 @@ function getName(para, {
   hideWallets = false
 }) {
   if (para.isMultiWallet) {
-    return name != null ? name : `${isExternal ? "External " : ""}${WALLET_TYPES[type]}${!hideWallets && (isMenu || isExternal) ? " Wallet" : ""}`;
+    return name != null ? name : `${isExternal ? "External " : ""}${type ? WALLET_TYPES[type] : ""}${!hideWallets && (isMenu || isExternal) ? " Wallet" : ""}`;
   }
   return hideWallets ? "My Account" : name || "My Wallet";
 }
 const AccountSelect = () => {
   var _a;
-  const hideWallets = useThemeStore((state) => state.hideWallets);
+  const hideWallets = useStore((state) => {
+    var _a2;
+    return (_a2 = state.modalConfig) == null ? void 0 : _a2.hideWallets;
+  });
   const para = useInternalClient();
   const containerRef = useRef(null);
   const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
   const [isCopied, copy] = useCopyToClipboard();
   const { setSelectedWallet } = useWalletState();
-  const activeWallet = useActiveWallet();
+  const { data: activeWallet } = useWallet();
+  const { data: account } = useAccount();
+  const availableWallets = account == null ? void 0 : account.wallets;
+  const isGuest = para.isGuestMode && (activeWallet == null ? void 0 : activeWallet.pregenIdentifierType) === "GUEST_ID";
   const handleCopy = () => {
-    copy(activeWallet.address ? para.getDisplayAddress(activeWallet.id, { addressType: activeWallet.type }) : "");
+    copy((activeWallet == null ? void 0 : activeWallet.address) ? para.getDisplayAddress(activeWallet.id, { addressType: activeWallet.type }) : "");
   };
-  const ActiveWalletNode = activeWallet ? /* @__PURE__ */ jsxs(FlexRow, { slot: "selected-item", children: [
-    /* @__PURE__ */ jsx(CpslIdenticon, { variant: "avatar", size: "24px", hash: para.getIdenticonHash(activeWallet.id, activeWallet.type) }),
-    /* @__PURE__ */ jsx(WalletName, { variant: "bodyXS", color: "contrast", children: getName(para, __spreadProps(__spreadValues({}, activeWallet), { hideWallets })) }),
+  const ActiveWalletNode = activeWallet ? /* @__PURE__ */ jsxs(FlexRow, { slot: "selected-item", style: { height: "24px" }, children: [
+    !isGuest && /* @__PURE__ */ jsx(CpslIdenticon, { variant: "avatar", size: "24px", hash: para.getIdenticonHash(activeWallet.id, activeWallet.type) }),
+    /* @__PURE__ */ jsx(WalletName, { variant: "bodyXS", color: "contrast", style: { marginLeft: isGuest ? "8px" : "0px" }, children: isGuest ? "Guest" : getName(para, __spreadProps(__spreadValues({}, activeWallet), { hideWallets })) }),
     !hideWallets && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", children: (_a = activeWallet.ensName) != null ? _a : para.getDisplayAddress(activeWallet.id, { truncate: true, addressType: activeWallet.type }) }),
       /* @__PURE__ */ jsx(
@@ -115,8 +120,8 @@ const AccountSelect = () => {
     if (dropdownMaxHeight && (activeWallet == null ? void 0 : activeWallet.address)) {
       resize();
     }
-  }, [activeWallet, para.availableWallets, dropdownMaxHeight]);
-  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(HeaderSelectContainer, { ref: containerRef, id: "addressInputContainer", children: para.availableWallets.length > 1 ? /* @__PURE__ */ jsxs(
+  }, [activeWallet, availableWallets, dropdownMaxHeight]);
+  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(HeaderSelectContainer, { ref: containerRef, id: "addressInputContainer", children: availableWallets && availableWallets.length > 1 ? /* @__PURE__ */ jsxs(
     HeaderSelect,
     {
       selectedValue: getValue(activeWallet == null ? void 0 : activeWallet.id, activeWallet == null ? void 0 : activeWallet.type),
@@ -128,20 +133,20 @@ const AccountSelect = () => {
       placeholder: "Choose wallet...",
       anchorElId: "addressInputContainer",
       dropdownMaxHeight,
-      $width: dropdownWidth,
-      $top: mobileAnchor + 16 + 1,
+      $width: dropdownWidth != null ? dropdownWidth : 0,
+      $top: (mobileAnchor != null ? mobileAnchor : 0) + 16 + 1,
       autoWidth: true,
       selectedItemVariant: "bodyXS",
       children: [
         activeWallet && ActiveWalletNode,
-        para.availableWallets.map(({ address, name: _name, id, type, isExternal }) => {
+        availableWallets.map(({ address, name: _name, id, type, isExternal }) => {
           const key = getValue(id, type);
           const name = _name != null ? _name : getName(para, { type, isExternal, isMenu: true, hideWallets });
           return /* @__PURE__ */ jsx(HeaderSelectItem, { slot: "items", value: key, children: /* @__PURE__ */ jsxs(FlexRow, { children: [
             /* @__PURE__ */ jsx(CpslIdenticon, { size: "40px", hash: para.getIdenticonHash(id, type) }),
             /* @__PURE__ */ jsxs(FlexCol, { children: [
               name && /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "contrast", children: name }),
-              !hideWallets && /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", children: truncateAddress(address, type, { prefix: para.cosmosPrefix }) })
+              !hideWallets && address && type && /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", children: truncateAddress(address, type, { prefix: para.cosmosPrefix }) })
             ] })
           ] }) }, key);
         })

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

@@ -1 +1 @@
-export declare const ExternalWalletStep: () => import("react/jsx-runtime").JSX.Element;
+export declare const ExternalWalletStep: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/modal/components/ExternalWalletStep/ExternalWalletStep.js

@@ -8,11 +8,11 @@ import { CenteredText, ErrorContainer, ErrorIcon, InnerStepContainer, QRContaine
 import { useEffect, useMemo } from "react";
 import { useModalStore } from "../../stores/index.js";
 import styled from "styled-components";
-import { useExternalWallets } from "../../providers/ExternalWalletContext.js";
 import { useCopyToClipboard } from "@getpara/react-common";
 import { ModalStep } from "../../utils/steps.js";
-import { isMobile, isTablet, WalletType } from "@getpara/web-sdk";
+import { isMobile, isTablet } from "@getpara/web-sdk";
 import { routeMobileExternalWallet } from "../../utils/routeMobileExternalWallet.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 const ExternalWalletStep = () => {
   const [isCopied, copy] = useCopyToClipboard();
   const externalWalletError = useModalStore((state) => state.externalWalletError);
@@ -22,10 +22,14 @@ const ExternalWalletStep = () => {
     routeMobileExternalWallet(qrUri);
   }, [qrUri]);
   const handleTryAgainClick = () => __async(void 0, null, function* () {
-    yield connectExternalWallet(wallet);
+    if (wallet) {
+      yield connectExternalWallet(wallet);
+    }
   });
   const handleCopy = () => {
-    copy(qrUri);
+    if (qrUri) {
+      copy(qrUri);
+    }
   };
   const Content = useMemo(() => {
     var _a, _b, _c;
@@ -68,8 +72,8 @@ Please choose another wallet or continue on desktop.`;
       ] });
     }
     if (showMobile) {
-      if (wallet.type === WalletType.SOLANA || isMobile() && !isTablet()) {
-        const isInstalled = wallet.type !== WalletType.SOLANA || wallet.installed;
+      if (wallet.type === "SOLANA" || isMobile() && !isTablet()) {
+        const isInstalled = wallet.type !== "SOLANA" || wallet.installed;
         return /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(InnerStepContainer, { children: !isInstalled && /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", color: "error", children: `${wallet.name} not detected` }) }),
           wallet.id !== "walletConnect" && /* @__PURE__ */ jsxs(InnerStepContainer, { children: [