@getpara/react-sdk 2.0.0-alpha.19 → 2.0.0-alpha.21

package/dist/modal/components/Account/AccountProfileUnlink.js

@@ -0,0 +1,47 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslText } from "@getpara/react-components";
+import { useEffect, useState } from "react";
+import { AccountTypeIcon } from "../common.js";
+import { getAccountTypeName } from "../../constants/oAuthLogos.js";
+import styled from "styled-components";
+import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
+function AccountProfileUnlink() {
+  var _a, _b;
+  const { unlinkingAccount, unlinkAccountConfirm, isUnlinkAccountPending } = useAccountLinking(), [accountType, setAccountType] = useState((_b = (_a = unlinkingAccount == null ? void 0 : unlinkingAccount.externalWallet) == null ? void 0 : _a.providerId) != null ? _b : unlinkingAccount == null ? void 0 : unlinkingAccount.type);
+  useEffect(() => {
+    var _a2, _b2;
+    if (unlinkingAccount) {
+      setAccountType((_b2 = (_a2 = unlinkingAccount == null ? void 0 : unlinkingAccount.externalWallet) == null ? void 0 : _a2.providerId) != null ? _b2 : unlinkingAccount == null ? void 0 : unlinkingAccount.type);
+    }
+  }, [unlinkingAccount]);
+  return /* @__PURE__ */ jsxs(Content, { children: [
+    /* @__PURE__ */ jsxs(Upper, { children: [
+      /* @__PURE__ */ jsx(AccountTypeIcon, { accountType, size: "80px", inset: "5px" }),
+      /* @__PURE__ */ jsxs(Message, { variant: "bodyM", weight: "semiBold", color: "contrast", children: [
+        "Are you sure you want to unlink your ",
+        getAccountTypeName(accountType, { inline: true }),
+        "?"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(CpslButton, { variant: "destructive", fullWidth: true, onClick: unlinkAccountConfirm, disabled: isUnlinkAccountPending, children: "Confirm" })
+  ] });
+}
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 32px;
+`;
+const Upper = styled(Content)`
+  gap: 8px;
+`;
+const Message = styled(CpslText)`
+  text-align: center;
+  max-width: 342px;
+`;
+export {
+  AccountProfileUnlink
+};

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

@@ -1,6 +1,20 @@
-interface AuthInputProps {
+import { ReactNode } from 'react';
+import { Auth } from '@getpara/user-management-client';
+type ChildProps = {
+    isPending: boolean;
+    isSubmitting: boolean;
+    onSubmit: () => void;
+};
+type AuthInputProps = {
+    defaultAuth?: Auth<'email' | 'phone'>;
+    onSubmit: (_: Auth<'email' | 'phone'>) => void;
+    isSubmitting: boolean;
     disableEmailLogin?: boolean;
     disablePhoneLogin?: boolean;
-}
-export declare const AuthInput: ({ disableEmailLogin, disablePhoneLogin }: AuthInputProps) => import("react/jsx-runtime").JSX.Element | null;
+    disableSubmitButton?: boolean;
+    children?: (_: ChildProps) => ReactNode;
+    error?: string | null;
+    sticky?: boolean;
+};
+export declare const AuthInput: ({ defaultAuth, disableEmailLogin, disablePhoneLogin, onSubmit: _onSubmit, isSubmitting, disableSubmitButton, children: Children, error: propsError, sticky, }: AuthInputProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -18,30 +18,35 @@ import countryCodes from "../../utils/countryCodes.js";
 import { MOBILE_SIZE } from "../../constants/constants.js";
 import { useDropdownPosition } from "./hooks/useDropdownPosition.js";
 import { defaultPhoneMask, phoneMasks } from "./phoneMasks.js";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { extractAuthInfo } from "@getpara/user-management-client";
 import parsePhoneNumberFromString from "libphonenumber-js";
-import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
-import { useStore } from "../../../provider/stores/useStore.js";
-import { isCcMatch, validateAuth } from "../../utils/authInputHelpers.js";
+import { isCcMatch, validateInput } from "../../utils/authInputHelpers.js";
 const DEFAULT_COUNTRY = { label: "United States", value: "+1", selectedLabel: "US", icon: "US" };
-const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
+const AuthInput = ({
+  defaultAuth,
+  disableEmailLogin,
+  disablePhoneLogin,
+  onSubmit: _onSubmit,
+  isSubmitting,
+  disableSubmitButton,
+  children: Children,
+  error: propsError,
+  sticky = false
+}) => {
   var _a, _b, _c;
   const inputRef = useRef(null);
   const { dropdownMaxHeight, dropdownWidth } = useDropdownPosition(inputRef);
-  const defaultAuthIdentifier = useStore((state) => {
-    var _a2;
-    return (_a2 = state.modalConfig) == null ? void 0 : _a2.defaultAuthIdentifier;
-  });
-  const para = useInternalClient();
-  const { signUpOrLogIn, isSignUpOrLogInPending } = useAuthActions();
-  const authInfo = para.authInfo;
-  const [storedNationalNumber, storedCountryCode] = useMemo(() => {
-    if ((authInfo == null ? void 0 : authInfo.authType) !== "phone") {
-      return [void 0, void 0];
+  const [authInfo, storedNationalNumber, storedCountryCode] = useMemo(() => {
+    if (!defaultAuth) {
+      return [void 0, void 0, void 0];
     }
-    const parsed = parsePhoneNumberFromString(authInfo.identifier);
-    return [parsed == null ? void 0 : parsed.nationalNumber, parsed == null ? void 0 : parsed.countryCallingCode];
-  }, [authInfo == null ? void 0 : authInfo.authType, authInfo == null ? void 0 : authInfo.identifier]);
+    const authInfo2 = extractAuthInfo(defaultAuth);
+    if (!authInfo2 || (authInfo2 == null ? void 0 : authInfo2.authType) !== "phone") {
+      return [authInfo2, void 0, void 0];
+    }
+    const parsed = parsePhoneNumberFromString(authInfo2.identifier);
+    return [authInfo2, parsed == null ? void 0 : parsed.nationalNumber, parsed == null ? void 0 : parsed.countryCallingCode];
+  }, [defaultAuth]);
   const [countryCode, setCountryCode] = useState(storedCountryCode != null ? storedCountryCode : "+1");
   const [identifier, setIdentifier] = useState(
     (() => {
@@ -60,28 +65,13 @@ const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
   const [matchedCountryCode, setMatchedCountryCode] = useState(
     (_a = countryCodes.find((option) => isCcMatch(countryCode, option))) != null ? _a : DEFAULT_COUNTRY
   );
-  const [error, setError] = useState("");
-  const [isPending, setIsPending] = useState(isSignUpOrLogInPending);
+  const [error, setError] = useState(propsError || void 0);
+  const [isPending, setIsPending] = useState(isSubmitting || false);
   const [search, setSearch] = useState("");
   const setCountryCodes = (countyCodeInput) => {
     setCountryCode(countyCodeInput.value);
     setMatchedCountryCode(countyCodeInput);
   };
-  useEffect(() => {
-    if (defaultAuthIdentifier && !authInfo) {
-      const number = parsePhoneNumberFromString(defaultAuthIdentifier);
-      if (number) {
-        const countryCode2 = `+${number.countryCallingCode}`;
-        const countryCodeInputMatch = countryCodes.find((option) => isCcMatch(countryCode2, option));
-        if (countryCodeInputMatch) {
-          setCountryCodes(countryCodeInputMatch);
-        }
-      }
-      handleIdentifierInput({
-        detail: { value: number ? number.nationalNumber : defaultAuthIdentifier }
-      });
-    }
-  }, [authInfo]);
   const isEmail = identifierType === "email";
   const isPhone = identifierType === "phone";
   const isUnknown = !identifierType;
@@ -93,6 +83,9 @@ const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
   };
   const handleIdentifierInput = (ev) => {
     var _a2;
+    if (!sticky) {
+      setError(void 0);
+    }
     const newIdentifier = (_a2 = ev.detail.value) != null ? _a2 : "";
     let isNewPhone = false, isNewEmail = false;
     if (!disablePhoneLogin) {
@@ -118,90 +111,102 @@ const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
     }
   };
   const onSubmit = () => __async(void 0, null, function* () {
-    setError("");
-    let auth;
+    setError(void 0);
     try {
-      auth = validateAuth(identifier, countryCode, identifierType);
-      signUpOrLogIn(auth);
+      const auth = validateInput(identifier, countryCode, identifierType);
+      _onSubmit(auth);
     } catch (err) {
       setError(err.message);
     }
   });
   useEffect(() => {
-    if (isSignUpOrLogInPending) {
-      setIsPending(true);
+    setIsPending(isSubmitting);
+  }, [isSubmitting]);
+  useEffect(() => {
+    if (propsError === null || propsError === void 0 && !sticky) {
+      setError(void 0);
+    }
+    if (propsError) {
+      setError(propsError);
+      setIsPending(false);
     }
-  }, [isSignUpOrLogInPending]);
+  }, [propsError, sticky]);
   useEffect(() => {
-    setIsPending(false);
+    if (!sticky || isSubmitting) {
+      setIsPending(isSubmitting);
+    }
   }, [error]);
   if (disableEmailLogin && disablePhoneLogin) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "form",
     {
       onSubmit: (e) => __async(void 0, null, function* () {
         e.preventDefault();
         onSubmit();
       }),
-      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" && onSubmit();
-          }),
-          contrastText: true,
-          isPhone,
-          mask: identifierType === "phone" ? (_c = phoneMasks[(_b = matchedCountryCode.selectedLabel) != null ? _b : ""]) != null ? _c : defaultPhoneMask : void 0,
-          enterkeyhint: "go",
-          noAutoDisable: true,
-          disabled: isPending,
-          "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 != null ? dropdownWidth : 0,
-                  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: isPending, onClick: onSubmit, children: isPending ? /* @__PURE__ */ jsx(CpslSpinner, { size: 16 }) : /* @__PURE__ */ jsx(CpslIcon, { icon: "arrowNarrow" }) })
-          ]
-        },
-        "email"
-      )
+      style: { width: "100%" },
+      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" && onSubmit();
+            }),
+            contrastText: true,
+            isPhone,
+            mask: identifierType === "phone" ? (_c = phoneMasks[(_b = matchedCountryCode.selectedLabel) != null ? _b : ""]) != null ? _c : defaultPhoneMask : void 0,
+            enterkeyhint: "go",
+            noAutoDisable: true,
+            disabled: isPending,
+            "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 != null ? dropdownWidth : 0,
+                    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 && !disableSubmitButton && /* @__PURE__ */ jsx(CpslButton, { slot: "end", size: "small", fullWidth: true, disabled: isPending, onClick: onSubmit, children: isPending ? /* @__PURE__ */ jsx(CpslSpinner, { size: 16 }) : /* @__PURE__ */ jsx(CpslIcon, { icon: "arrowNarrow" }) })
+            ]
+          },
+          "email"
+        ),
+        Children && /* @__PURE__ */ jsx(ChildContainer, { children: /* @__PURE__ */ jsx(Children, { onSubmit, isPending, isSubmitting: isPending }) })
+      ]
     }
   );
 };
@@ -256,6 +261,16 @@ const StyledInput = safeStyled(CpslInput)`
   --container-background-color: var(--cpsl-color-background-8);
   --input-background-color: var(--cpsl-color-background-8);
   --container-padding-end: 8px;
+  width: 100%;
+`;
+const ChildContainer = safeStyled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 24px;
+  width: 100%;
 `;
 export {
   AuthInput

package/dist/modal/components/AuthMainStep/AuthMainStepContent.js

@@ -8,7 +8,7 @@ import { ExternalWallets } from "../ExternalWallets/ExternalWallets.js";
 import { useModalStore } from "../../stores/index.js";
 import { ModalStep } from "../../utils/steps.js";
 import { AuthLayout } from "../../types/modalProps.js";
-import { brandedOAuthLogos, oAuthLogos } from "../../constants/oAuthLogos.js";
+import { ACCOUNT_TYPES } from "../../constants/oAuthLogos.js";
 import { AuthOptions } from "../AuthOptions/AuthOptions.js";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 import { useStore } from "../../../provider/stores/useStore.js";
@@ -61,7 +61,7 @@ const AuthMainStepContent = ({
         }
         case AuthLayout.AUTH_CONDENSED: {
           const icons = [];
-          oAuthMethods == null ? void 0 : oAuthMethods.forEach((method) => icons.push(useBrandedLogos ? brandedOAuthLogos[method] : oAuthLogos[method]));
+          oAuthMethods == null ? void 0 : oAuthMethods.forEach((method) => icons.push(ACCOUNT_TYPES[method][useBrandedLogos ? "logoBranded" : "logo"]));
           methods.push([
             /* @__PURE__ */ jsxs(CondensedButton, { onClick: handleCondensedAuthClick, variant: "tertiary", fullWidth: true, children: [
               /* @__PURE__ */ jsx(IconGroupSpacer, { slot: "start", icons: [], $isDark: useDarkLogos }),

package/dist/modal/components/AuthOptions/AuthOptions.js

@@ -8,21 +8,46 @@ import { AuthInput } from "../AuthInput/AuthInput.js";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 import { useModalStore } from "../../stores/index.js";
 import { CpslIcon, CpslText } from "@getpara/react-components";
+import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { isEmail, isPhone } from "@getpara/user-management-client";
 const AuthOptions = ({
   oAuthMethods,
   disableEmailLogin,
   disablePhoneLogin,
   isGuestModeEnabled = false
 }) => {
+  var _a, _b;
+  const para = useInternalClient();
+  const defaultAuthIdentifier = useStore((state) => {
+    var _a2;
+    return (_a2 = state.modalConfig) == null ? void 0 : _a2.defaultAuthIdentifier;
+  });
+  const { signUpOrLogIn, isSignUpOrLogInPending } = useAuthActions();
   const { wallets } = useExternalWallets();
   const guestAddFundsTab = useModalStore((state) => state.guestAddFundsTab);
+  const defaultAuth = defaultAuthIdentifier ? /^\+\d+$/.test(defaultAuthIdentifier) ? { phone: defaultAuthIdentifier } : { email: defaultAuthIdentifier } : para.authInfo && (isEmail((_a = para.authInfo) == null ? void 0 : _a.auth) || isPhone((_b = para.authInfo) == null ? void 0 : _b.auth)) ? para.authInfo.auth : void 0;
   const Content = useMemo(() => {
     const Methods = [];
     if (!!(oAuthMethods == null ? void 0 : oAuthMethods.length)) {
       Methods.push(/* @__PURE__ */ jsx(OAuth, { methods: oAuthMethods }, "oAuth"));
     }
     if (!disableEmailLogin || !disablePhoneLogin) {
-      Methods.push(/* @__PURE__ */ jsx(AuthInput, { disableEmailLogin, disablePhoneLogin }, "input"));
+      Methods.push(
+        /* @__PURE__ */ jsx(
+          AuthInput,
+          {
+            sticky: true,
+            defaultAuth,
+            disableEmailLogin,
+            disablePhoneLogin,
+            onSubmit: signUpOrLogIn,
+            isSubmitting: isSignUpOrLogInPending
+          },
+          "input"
+        )
+      );
     }
     return /* @__PURE__ */ jsx(Fragment, { children: Methods });
   }, [oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, wallets]);

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

@@ -38,6 +38,10 @@ 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";
+import { AccountProfile } from "../Account/AccountProfile.js";
+import { AccountProfileLinkOptions } from "../Account/AccountProfileLinkOptions.js";
+import { AccountProfileLink } from "../Account/AccountProfileLink.js";
+import { AccountProfileUnlink } from "../Account/AccountProfileUnlink.js";
 const MIN_HEIGHT = {
   [ModalStep.ADD_FUNDS_AWAITING]: "680px"
 };
@@ -47,6 +51,9 @@ const PADDING_TOP = {
 const PADDING_BOTTOM = {
   [ModalStep.TELEGRAM_OAUTH]: "16px"
 };
+const PADDING_X = {
+  [ModalStep.ACCOUNT_PROFILE]: "32px"
+};
 const Body = ({
   oAuthMethods,
   twoFactorAuthEnabled,
@@ -163,6 +170,18 @@ const Body = ({
       case ModalStep.ACCOUNT_MAIN: {
         return /* @__PURE__ */ jsx(Account, { onClose });
       }
+      case ModalStep.ACCOUNT_PROFILE: {
+        return /* @__PURE__ */ jsx(AccountProfile, {});
+      }
+      case ModalStep.ACCOUNT_PROFILE_LIST: {
+        return /* @__PURE__ */ jsx(AccountProfileLinkOptions, {});
+      }
+      case ModalStep.ACCOUNT_PROFILE_ADD: {
+        return /* @__PURE__ */ jsx(AccountProfileLink, {});
+      }
+      case ModalStep.ACCOUNT_PROFILE_REMOVE: {
+        return /* @__PURE__ */ jsx(AccountProfileUnlink, {});
+      }
       case ModalStep.EX_WALLET_SELECTED: {
         return /* @__PURE__ */ jsx(ExternalWalletStep, {});
       }
@@ -279,8 +298,8 @@ const InnerContainer = safeStyled.div`
   justify-content: flex-start;
   gap: 24px;
   padding: ${({ $embeddedModal, $step, $isIFrameStep }) => {
-  var _a, _b;
-  return $isIFrameStep ? "0px" : $embeddedModal ? "12px 0px 0px" : `${(_a = PADDING_TOP[$step]) != null ? _a : "72px"} 72px ${(_b = PADDING_BOTTOM[$step]) != null ? _b : "32px"}`;
+  var _a, _b, _c;
+  return $isIFrameStep ? "0px" : $embeddedModal ? "12px 0px 0px" : `${(_a = PADDING_TOP[$step]) != null ? _a : "72px"} ${(_b = PADDING_X[$step]) != null ? _b : "72px"} ${(_c = PADDING_BOTTOM[$step]) != null ? _c : "32px"}`;
 }};
   min-height: ${({ $step }) => {
   var _a;

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

@@ -16,14 +16,10 @@ import { useInternalClient } from "../../../provider/hooks/utils/useInternalClie
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 import { useStore } from "../../../provider/stores/useStore.js";
 import { useCopyToClipboard } from "@getpara/react-common";
+import { getWalletDisplayName } from "../../utils/getWalletDisplayName.js";
 const getValue = (id, type) => {
   return id && type ? `${id}~${type}` : void 0;
 };
-const WALLET_TYPES = {
-  EVM: "EVM",
-  SOLANA: "Solana",
-  COSMOS: "Cosmos"
-};
 const ChainSelect = () => {
   var _a, _b;
   const containerRef = useRef(null);
@@ -65,18 +61,6 @@ const ChainSelect = () => {
     }
   ) }) });
 };
-function getName(para, {
-  type,
-  isExternal,
-  name,
-  isMenu = false,
-  hideWallets = false
-}) {
-  if (para.isMultiWallet) {
-    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 = useStore((state) => {
@@ -97,7 +81,7 @@ const AccountSelect = () => {
   };
   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 })) }),
+    /* @__PURE__ */ jsx(WalletName, { variant: "bodyXS", color: "contrast", style: { marginLeft: isGuest ? "8px" : "0px" }, children: isGuest ? "Guest" : getWalletDisplayName(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(
@@ -141,7 +125,7 @@ const AccountSelect = () => {
         activeWallet && ActiveWalletNode,
         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 });
+          const name = _name != null ? _name : getWalletDisplayName(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: [

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

@@ -1 +1,8 @@
+import { CommonWallet } from '@getpara/react-common';
+export declare const ExternalWalletMobileConnect: ({ wallet, qrUri: propsQrUri, onConnectWc, isSelfFetching, }: {
+    wallet: CommonWallet;
+    qrUri?: string;
+    onConnectWc: (_: CommonWallet) => Promise<void>;
+    isSelfFetching?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const ExternalWalletStep: () => import("react/jsx-runtime").JSX.Element | null;