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

package/dist/modal/constants/constants.d.ts

@@ -30,7 +30,7 @@ export declare function getNetworkName(str: Network | string): string;
 export declare function getNetworkIcon(str: Network | string): IconType;
 export declare function getAssetCode(str: OnRampAsset | string): string;
 export declare function getAssetName(str: OnRampAsset | string): string;
-export declare function getAssetIcon(str: OnRampAsset | string): "key" | "phone" | "farcaster" | "telegram" | "discord" | "x" | "search" | "para" | "wallet" | "close" | "copy" | "cosmos" | "code" | "menu" | "alertCircle" | "alertTriangle" | "alignVerticalCenter" | "angelListBrand" | "angelList" | "appleBrand" | "apple" | "arbitrumBrand" | "arrowCircleBrokenDownLeft" | "arrowCircleDownFilled" | "arrowNarrow" | "arrow" | "asterisk" | "backupKit" | "bank" | "baseBrand" | "brush" | "celoBrand" | "checkCircleFilled" | "checkCircle" | "checkSquare" | "check" | "chevronDown" | "chevronRight" | "chevronSelectorVertical" | "chevronUp" | "clock" | "clubhouseBrand" | "clubhouse" | "copy07" | "creditCard02" | "creditCard" | "cube03" | "cubeOutline" | "cube" | "currencyDollar" | "decentBrand" | "decent" | "dell" | "discordBrand" | "dot" | "dots" | "downloadCloud" | "download" | "dribbbleBrand" | "dribbble" | "earth" | "edit02" | "emptyCircle" | "ethereum" | "eyeOff" | "eye" | "facebookBrand" | "facebook" | "farcasterBrand" | "figmaBrand" | "figma" | "file" | "folder" | "githubBrand" | "github" | "globe" | "googleBrand" | "google" | "gridDots" | "helpCircle" | "heroAlertCircle" | "heroCheckmarkCapsule" | "heroCheckmark" | "heroEmail" | "heroExternalConnection" | "heroLock" | "heroPasskey" | "heroPhone" | "heroPlusCircleCapsule" | "heroPlusCircle" | "heroWallet" | "home" | "hp" | "image" | "infoCircle" | "instagramBrand" | "instagram" | "laptop" | "lenovo" | "lg" | "lightning01" | "lightning" | "linkExternal" | "linkedinBrand" | "linkedin" | "lockKeyholeCircle" | "logOut" | "mail" | "monitor" | "moonpayBrand" | "moreLoginOptions" | "motorola" | "nobleBrand" | "optimismBrand" | "paraBlackBg" | "paraBrand" | "paraIconBrand" | "paraIconQr" | "paraIcon" | "paraLogo" | "paraRingsDark" | "paraRings" | "passcode" | "pintrestBrand" | "pintrest" | "plusCircle" | "plus" | "polygonBrand" | "polygon" | "puzzlePiece" | "qrCode02" | "qrCode" | "rampNetworkBrand" | "rampNetwork" | "redditBrand" | "reddit" | "refresh" | "samsung" | "send" | "settings" | "share" | "shield" | "signalBrand" | "signal" | "sliders" | "snapchatBrand" | "snapchat" | "solana" | "spacingHeight" | "star04Filled" | "star05" | "stars01Filled" | "stars02" | "stars" | "stopSquare" | "stripeBrand" | "telegramBrand" | "tetherBrand" | "tikTokBrand" | "tikTok" | "trash" | "tumblrBrand" | "tumblr" | "twitterBrand" | "twitter" | "usdcBrand" | "userCircle" | "user" | "youtubeBrand" | "youtube" | "AD" | "AE" | "AF" | "AG" | "AI" | "AL" | "AM" | "AO" | "AR" | "AS" | "AT" | "AU" | "AW" | "AX" | "AZ" | "BA" | "BB" | "BD" | "BE" | "BF" | "BG" | "BH" | "BI" | "BJ" | "BL" | "BM" | "BN" | "BO" | "BQ" | "BQ2" | "BQ3" | "BR" | "BS" | "BT" | "BW" | "BY" | "BZ" | "CA" | "CC" | "CD" | "CD2" | "CF" | "CH" | "CK" | "CL" | "CM" | "CN" | "CO" | "CR" | "CU" | "CW" | "CX" | "CY" | "CZ" | "DE" | "DJ" | "DK" | "DM" | "DO" | "DS" | "DZ" | "EC" | "EE" | "EG" | "EH" | "ER" | "ES" | "ET" | "FI" | "FJ" | "FK" | "FM" | "FO" | "FR" | "GA" | "GB2" | "GB" | "GD" | "GE" | "GG" | "GH" | "GI" | "GL" | "GM" | "GN" | "GQ" | "GR" | "GT" | "GU" | "GW" | "GY" | "HK" | "HN" | "HR" | "HT" | "HU" | "ID" | "IE" | "IL" | "IM" | "IN" | "IO" | "IQ" | "IR" | "IS" | "IT" | "JE" | "JM" | "JO" | "JP" | "KE" | "KG" | "KH" | "KI" | "KM" | "KN" | "KP" | "KR" | "KW" | "KY" | "KZ" | "LA" | "LB" | "LC" | "LI" | "LK" | "LR" | "LS" | "LT" | "LU" | "LV" | "LY" | "MA" | "MC" | "MD" | "ME" | "MG" | "MH" | "MK" | "ML" | "MM" | "MN" | "MO" | "MP" | "MQ" | "MR" | "MS" | "MT" | "MU" | "MV" | "MW" | "MX" | "MY" | "MZ" | "NA" | "NE" | "NF" | "NG" | "NI" | "NL" | "NO" | "NP" | "NR" | "NU" | "NZ" | "OM" | "PA" | "PE" | "PF" | "PG" | "PH" | "PK" | "PL" | "PN" | "PR" | "PS" | "PT" | "PW" | "PY" | "QA" | "RO" | "RS" | "RU" | "RW" | "SA" | "SB" | "SC" | "SE" | "SG" | "SI" | "SK" | "SL" | "SM" | "SN" | "SO" | "SR" | "SS" | "ST" | "SV" | "SX" | "SY" | "SZ" | "TC" | "TD" | "TG" | "TH" | "TJ" | "TK" | "TL" | "TM" | "TN" | "TO" | "TR" | "TT" | "TV" | "TW" | "TZ" | "UA" | "UG" | "US" | "UY" | "UZ" | "VC" | "VE" | "VG" | "VI" | "VN" | "VU" | "WS" | "YE" | "ZA" | "ZM" | "ZW";
+export declare function getAssetIcon(str: OnRampAsset | string): "key" | "phone" | "farcaster" | "telegram" | "discord" | "x" | "search" | "para" | "walletConnect" | "wallet" | "close" | "copy" | "safe" | "cosmos" | "alertCircle" | "alertTriangle" | "alignVerticalCenter" | "angelListBrand" | "angelList" | "appleBrand" | "apple" | "arbitrumBrand" | "arrowCircleBrokenDownLeft" | "arrowCircleDownFilled" | "arrowNarrow" | "arrow" | "asterisk" | "backpack" | "backupKit" | "bank" | "baseBrand" | "brush" | "celoBrand" | "checkCircleFilled" | "checkCircle" | "checkSquare" | "check" | "chevronDown" | "chevronRight" | "chevronSelectorVertical" | "chevronUp" | "clock" | "clubhouseBrand" | "clubhouse" | "code" | "coinbase" | "copy07" | "cosmostation" | "creditCard02" | "creditCard" | "cube03" | "cubeOutline" | "cube" | "currencyDollar" | "decentBrand" | "decent" | "dell" | "discordBrand" | "dot" | "dots" | "downloadCloud" | "download" | "dribbbleBrand" | "dribbble" | "earth" | "edit02" | "emptyCircle" | "ethereum" | "eyeOff" | "eye" | "facebookBrand" | "facebook" | "farcasterBrand" | "figmaBrand" | "figma" | "file" | "folder" | "githubBrand" | "github" | "globe" | "glow" | "googleBrand" | "google" | "gridDots" | "haha" | "helpCircle" | "heroAlertCircle" | "heroCheckmarkCapsule" | "heroCheckmark" | "heroEmail" | "heroExternalConnection" | "heroLock" | "heroPasskey" | "heroPhone" | "heroPlusCircleCapsule" | "heroPlusCircle" | "heroWallet" | "home" | "hp" | "image" | "infoCircle" | "instagramBrand" | "instagram" | "keplr" | "laptop" | "leap" | "lenovo" | "lg" | "lightning01" | "lightning" | "linkExternal" | "linkedinBrand" | "linkedin" | "lockKeyholeCircle" | "logOut" | "mail" | "menu" | "metamask" | "monitor" | "moonpayBrand" | "moreLoginOptions" | "motorola" | "nobleBrand" | "okx" | "optimismBrand" | "paraBlackBg" | "paraBrand" | "paraIconBrand" | "paraIconQr" | "paraIcon" | "paraLogo" | "paraRingsDark" | "paraRings" | "passcode" | "phantom" | "pintrestBrand" | "pintrest" | "plusCircle" | "plus" | "polygonBrand" | "polygon" | "puzzlePiece" | "qrCode02" | "qrCode" | "rabby" | "rainbow" | "rampNetworkBrand" | "rampNetwork" | "redditBrand" | "reddit" | "refresh" | "samsung" | "send" | "settings" | "share" | "shield" | "signalBrand" | "signal" | "sliders" | "snapchatBrand" | "snapchat" | "solana" | "solflare" | "spacingHeight" | "star04Filled" | "star05" | "stars01Filled" | "stars02" | "stars" | "stopSquare" | "stripeBrand" | "telegramBrand" | "tetherBrand" | "tikTokBrand" | "tikTok" | "trash" | "tumblrBrand" | "tumblr" | "twitterBrand" | "twitter" | "usdcBrand" | "userCircle" | "userPlus" | "user" | "youtubeBrand" | "youtube" | "zerion" | "AD" | "AE" | "AF" | "AG" | "AI" | "AL" | "AM" | "AO" | "AR" | "AS" | "AT" | "AU" | "AW" | "AX" | "AZ" | "BA" | "BB" | "BD" | "BE" | "BF" | "BG" | "BH" | "BI" | "BJ" | "BL" | "BM" | "BN" | "BO" | "BQ" | "BQ2" | "BQ3" | "BR" | "BS" | "BT" | "BW" | "BY" | "BZ" | "CA" | "CC" | "CD" | "CD2" | "CF" | "CH" | "CK" | "CL" | "CM" | "CN" | "CO" | "CR" | "CU" | "CW" | "CX" | "CY" | "CZ" | "DE" | "DJ" | "DK" | "DM" | "DO" | "DS" | "DZ" | "EC" | "EE" | "EG" | "EH" | "ER" | "ES" | "ET" | "FI" | "FJ" | "FK" | "FM" | "FO" | "FR" | "GA" | "GB2" | "GB" | "GD" | "GE" | "GG" | "GH" | "GI" | "GL" | "GM" | "GN" | "GQ" | "GR" | "GT" | "GU" | "GW" | "GY" | "HK" | "HN" | "HR" | "HT" | "HU" | "ID" | "IE" | "IL" | "IM" | "IN" | "IO" | "IQ" | "IR" | "IS" | "IT" | "JE" | "JM" | "JO" | "JP" | "KE" | "KG" | "KH" | "KI" | "KM" | "KN" | "KP" | "KR" | "KW" | "KY" | "KZ" | "LA" | "LB" | "LC" | "LI" | "LK" | "LR" | "LS" | "LT" | "LU" | "LV" | "LY" | "MA" | "MC" | "MD" | "ME" | "MG" | "MH" | "MK" | "ML" | "MM" | "MN" | "MO" | "MP" | "MQ" | "MR" | "MS" | "MT" | "MU" | "MV" | "MW" | "MX" | "MY" | "MZ" | "NA" | "NE" | "NF" | "NG" | "NI" | "NL" | "NO" | "NP" | "NR" | "NU" | "NZ" | "OM" | "PA" | "PE" | "PF" | "PG" | "PH" | "PK" | "PL" | "PN" | "PR" | "PS" | "PT" | "PW" | "PY" | "QA" | "RO" | "RS" | "RU" | "RW" | "SA" | "SB" | "SC" | "SE" | "SG" | "SI" | "SK" | "SL" | "SM" | "SN" | "SO" | "SR" | "SS" | "ST" | "SV" | "SX" | "SY" | "SZ" | "TC" | "TD" | "TG" | "TH" | "TJ" | "TK" | "TL" | "TM" | "TN" | "TO" | "TR" | "TT" | "TV" | "TW" | "TZ" | "UA" | "UG" | "US" | "UY" | "UZ" | "VC" | "VE" | "VG" | "VI" | "VN" | "VU" | "WS" | "YE" | "ZA" | "ZM" | "ZW";
 export declare const MOBILE_SIZE = 480;
 export declare const NETWORK_NOT_SUPPORTED_ERROR = "network not supported";
 export declare const EMAIL_REGEX: RegExp;

package/dist/modal/constants/constants.js

@@ -119,7 +119,7 @@ const BODY_MOTION_VARIANTS = {
 const BODY_TRANSITION = {
   duration: 0.2
 };
-const SDK_VERSION = "2.0.0-alpha.20";
+const SDK_VERSION = "2.0.0-alpha.21";
 export {
   BODY_MOTION_VARIANTS,
   BODY_TRANSITION,

package/dist/modal/constants/oAuthLogos.d.ts

@@ -1,8 +1,17 @@
+import { TExternalWallet } from '@getpara/web-sdk';
 import { IconType } from '@getpara/react-components';
-import { TOAuthMethod } from '@getpara/web-sdk';
-export declare const brandedOAuthLogos: {
-    [key in TOAuthMethod]: IconType;
-};
-export declare const oAuthLogos: {
-    [key in TOAuthMethod]: IconType;
+import { TLinkedAccountType } from '@getpara/web-sdk';
+export declare const ACCOUNT_TYPES: {
+    [key in TLinkedAccountType | TExternalWallet]: {
+        logo: IconType;
+        logoBranded?: IconType;
+        name: string;
+        isDark?: boolean;
+        inline?: string;
+        isExternalWallet?: boolean;
+    };
 };
+export declare function getAccountTypeName(type: TLinkedAccountType | TExternalWallet | undefined, { inline }?: {
+    inline?: boolean;
+}): string | undefined;
+export declare function getAccountTypeLogo(type: TLinkedAccountType | undefined): IconType | undefined;

package/dist/modal/constants/oAuthLogos.js

@@ -1,24 +1,153 @@
 "use client";
 import "../../chunk-MMUBH76A.js";
-const brandedOAuthLogos = {
-  GOOGLE: "googleBrand",
-  TWITTER: "twitter",
-  APPLE: "apple",
-  DISCORD: "discordBrand",
-  FACEBOOK: "facebookBrand",
-  FARCASTER: "farcasterBrand",
-  TELEGRAM: "telegramBrand"
-};
-const oAuthLogos = {
-  GOOGLE: "google",
-  TWITTER: "twitter",
-  APPLE: "apple",
-  DISCORD: "discord",
-  FACEBOOK: "facebook",
-  FARCASTER: "farcaster",
-  TELEGRAM: "telegram"
+const ACCOUNT_TYPES = {
+  EMAIL: {
+    logo: "mail",
+    name: "Email",
+    inline: "email address",
+    isDark: true
+  },
+  PHONE: {
+    logo: "phone",
+    name: "Phone",
+    inline: "phone number",
+    isDark: true
+  },
+  EXTERNAL_WALLET: {
+    logo: "wallet",
+    name: "External Wallet",
+    inline: "external wallet",
+    isDark: true
+  },
+  GOOGLE: {
+    logo: "google",
+    logoBranded: "googleBrand",
+    name: "Google"
+  },
+  TWITTER: {
+    logo: "twitter",
+    logoBranded: "twitterBrand",
+    name: "X / Twitter",
+    inline: "X account",
+    isDark: true
+  },
+  APPLE: {
+    logo: "apple",
+    logoBranded: "appleBrand",
+    name: "Apple",
+    isDark: true
+  },
+  DISCORD: {
+    logo: "discord",
+    logoBranded: "discordBrand",
+    name: "Discord"
+  },
+  FACEBOOK: {
+    logo: "facebook",
+    logoBranded: "facebookBrand",
+    name: "Facebook"
+  },
+  FARCASTER: {
+    logo: "farcaster",
+    logoBranded: "farcasterBrand",
+    name: "Farcaster"
+  },
+  TELEGRAM: {
+    logo: "telegram",
+    logoBranded: "telegramBrand",
+    name: "Telegram"
+  },
+  METAMASK: {
+    logo: "metamask",
+    name: "MetaMask",
+    isExternalWallet: true
+  },
+  RAINBOW: {
+    logo: "rainbow",
+    name: "Rainbow",
+    isExternalWallet: true
+  },
+  COINBASE: {
+    logo: "coinbase",
+    name: "Coinbase Wallet",
+    isExternalWallet: true
+  },
+  WALLETCONNECT: {
+    logo: "walletConnect",
+    name: "WalletConnect",
+    isExternalWallet: true
+  },
+  ZERION: {
+    logo: "zerion",
+    name: "Zerion",
+    isExternalWallet: true
+  },
+  SAFE: {
+    logo: "safe",
+    name: "Safe",
+    isExternalWallet: true
+  },
+  RABBY: {
+    logo: "rabby",
+    name: "Rabby",
+    isExternalWallet: true
+  },
+  OKX: {
+    logo: "okx",
+    name: "OKX",
+    isExternalWallet: true
+  },
+  PHANTOM: {
+    logo: "phantom",
+    name: "Phantom",
+    isExternalWallet: true
+  },
+  GLOW: {
+    logo: "glow",
+    name: "Glow",
+    isExternalWallet: true
+  },
+  BACKPACK: {
+    logo: "backpack",
+    name: "Backpack",
+    isExternalWallet: true
+  },
+  KEPLR: {
+    logo: "keplr",
+    name: "Keplr",
+    isExternalWallet: true
+  },
+  LEAP: {
+    logo: "leap",
+    name: "Leap",
+    isExternalWallet: true
+  },
+  HAHA: {
+    logo: "haha",
+    name: "HaHa",
+    isExternalWallet: true
+  },
+  COSMOSTATION: {
+    logo: "cosmostation",
+    name: "Cosmostation",
+    isExternalWallet: true
+  },
+  SOLFLARE: {
+    logo: "solflare",
+    name: "Solflare",
+    isExternalWallet: true
+  }
 };
+function getAccountTypeName(type, { inline = false } = {}) {
+  var _a;
+  const data = type ? ACCOUNT_TYPES[type] : void 0;
+  return data ? inline ? (_a = data.inline) != null ? _a : `${data.name} ${data.isExternalWallet ? "wallet" : "account"}` : data.name : void 0;
+}
+function getAccountTypeLogo(type) {
+  return type ? ACCOUNT_TYPES[type].logoBranded || ACCOUNT_TYPES[type].logo : void 0;
+}
 export {
-  brandedOAuthLogos,
-  oAuthLogos
+  ACCOUNT_TYPES,
+  getAccountTypeLogo,
+  getAccountTypeName
 };

package/dist/modal/hooks/useTelegramLogin.d.ts

@@ -0,0 +1,12 @@
+import { TelegramAuthResponse } from '@getpara/user-management-client';
+import { MutationStatus } from '@tanstack/react-query';
+export declare const useTelegramLogin: ({ isActive, onSubmit, status: propsStatus, }?: {
+    isActive?: boolean;
+    onSubmit?: (_: TelegramAuthResponse) => void;
+    status?: MutationStatus;
+}) => {
+    url: string | undefined;
+    isLoaded: boolean;
+    setIsLoaded: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    status: MutationStatus | undefined;
+};

package/dist/modal/hooks/useTelegramLogin.js

@@ -0,0 +1,65 @@
+"use client";
+import {
+  __async
+} from "../../chunk-MMUBH76A.js";
+import { useEffect, useState } from "react";
+import { useInternalClient } from "../../provider/hooks/utils/useInternalClient.js";
+import { useModalStore } from "../stores/index.js";
+const useTelegramLogin = ({
+  isActive = false,
+  onSubmit,
+  status: propsStatus
+} = {}) => {
+  const para = useInternalClient();
+  const refs = useModalStore((state) => state.refs);
+  const [url, setUrl] = useState();
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [msgStatus, setMsgStatus] = useState("idle");
+  const status = msgStatus === "success" ? propsStatus : msgStatus;
+  useEffect(() => {
+    if (isActive) {
+      if (!url) {
+        para.constructPortalUrl("telegramLogin").then(setUrl);
+      }
+    }
+  }, [isActive, url]);
+  useEffect(() => {
+    const updateState = (event) => __async(void 0, null, function* () {
+      var _a, _b;
+      switch (event.data.type) {
+        case "TELEGRAM_LOGIN":
+          setMsgStatus("pending");
+          break;
+        case "TELEGRAM_FAILED":
+          setMsgStatus("error");
+          break;
+        case "TELEGRAM_SUCCESS":
+          setMsgStatus("success");
+          if (!!event.data.payload) {
+            const authObject = event.data.payload;
+            try {
+              yield onSubmit == null ? void 0 : onSubmit(authObject);
+            } catch (e) {
+              (_b = (_a = refs.telegramIFrame.current) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.postMessage({ type: "TELEGRAM_RETRY" }, "*");
+            }
+          }
+          break;
+      }
+    });
+    if (isActive) {
+      window == null ? void 0 : window.addEventListener("message", updateState, false);
+    }
+    return () => {
+      window == null ? void 0 : window.removeEventListener("message", updateState, false);
+    };
+  }, [isActive, onSubmit]);
+  return {
+    url,
+    isLoaded,
+    setIsLoaded,
+    status
+  };
+};
+export {
+  useTelegramLogin
+};

package/dist/modal/stores/modal/actions.js

@@ -33,10 +33,14 @@ const getActions = (set, get) => ({
       return;
     }
     const onModalStepChange = get().onModalStepChange;
+    const accountLinkOptions = get().accountLinkOptions || [];
     const signupState = get().getSignupState();
     const iFrameUrl = get().iFrameUrl;
     const refs = get().refs;
     let prevStep = getPreviousStep(flow, currentStep);
+    if (currentStep === ModalStep.ACCOUNT_PROFILE_ADD && accountLinkOptions.length < 2) {
+      prevStep = ModalStep.ACCOUNT_PROFILE;
+    }
     if (currentStep === ModalStep.PASSWORD_CREATION && iFrameUrl && !(signupState == null ? void 0 : signupState.passkeyUrl)) {
       prevStep = ModalStep.AUTH_MAIN;
     }
@@ -123,7 +127,8 @@ const getActions = (set, get) => ({
     set({ authLayout: uniqueLayouts });
   },
   setAuthStepRoute: (authStepRoute) => set({ authStepRoute }),
-  setIsPasskeySupported: (isPasskeySupported) => set({ isPasskeySupported })
+  setIsPasskeySupported: (isPasskeySupported) => set({ isPasskeySupported }),
+  setAccountLinkOptions: (accountLinkOptions) => set({ accountLinkOptions })
 });
 export {
   getActions

package/dist/modal/stores/modal/useModalStore.d.ts

@@ -1,10 +1,8 @@
 import { ModalStep } from '../../utils/steps.js';
-import { OnRampConfig as OnRampConfigBase, OnRampPurchase, TWalletType } from '@getpara/web-sdk';
+import { AuthStateLogin, AuthStateSignup, AuthState, AuthStateVerify, OnRampConfig as OnRampConfigBase, OnRampPurchase, TWalletType, Setup2faResponse, SupportedAccountLinks } from '@getpara/web-sdk';
 import { Tab as AddFundsTabType } from '../../components/AddFunds/AddFundsContext.js';
-import { AuthStateLogin, AuthStateSignup, AuthState, AuthStateVerify } from '@getpara/core-sdk';
 import { TAuthLayout } from '../../types/modalProps.js';
 import { MutableRefObject } from 'react';
-import { Setup2faResponse } from '@getpara/user-management-client';
 export type Flow = AuthStateSignup['stage'] | AuthStateLogin['stage'] | 'account' | 'guest';
 type ActiveWallet = [string | undefined, TWalletType | undefined];
 export declare enum OnRampStep {
@@ -50,8 +48,10 @@ interface ModalState {
             timeout: number;
         } | null>;
         currentStep: MutableRefObject<ModalStep | null>;
+        telegramIFrame: MutableRefObject<HTMLIFrameElement | null>;
     };
     isPasskeySupported: boolean;
+    accountLinkOptions: SupportedAccountLinks;
 }
 export interface ModalActions {
     resetState: () => void;
@@ -85,6 +85,7 @@ export interface ModalActions {
     setAuthLayout: (authLayout: TAuthLayout[]) => void;
     setAuthStepRoute: (_?: ModalStep) => void;
     setIsPasskeySupported: (_: boolean) => void;
+    setAccountLinkOptions: (_: SupportedAccountLinks) => void;
 }
 export type ModalStore = ModalState & ModalActions;
 export declare const DEFAULT_MODAL_STATE: Omit<ModalState, 'step' | 'onRampConfig'>;

package/dist/modal/stores/modal/useModalStore.js

@@ -6,6 +6,9 @@ import { create } from "zustand";
 import { persist, createJSONStorage } from "zustand/middleware";
 import { ModalStep } from "../../utils/steps.js";
 import { getActions } from "./actions.js";
+import {
+  LINKED_ACCOUNT_TYPES
+} from "@getpara/web-sdk";
 import { AuthLayout } from "../../types/modalProps.js";
 import { createRef } from "react";
 var OnRampStep = /* @__PURE__ */ ((OnRampStep2) => {
@@ -36,9 +39,11 @@ const DEFAULT_MODAL_STATE = {
   refs: {
     popupWindow: createRef(),
     poll: createRef(),
-    currentStep: createRef()
+    currentStep: createRef(),
+    telegramIFrame: createRef()
   },
-  isPasskeySupported: true
+  isPasskeySupported: true,
+  accountLinkOptions: [...LINKED_ACCOUNT_TYPES]
 };
 const useModalStore = create()(
   persist(

package/dist/modal/types/modalProps.d.ts

@@ -1,4 +1,4 @@
-import ParaWeb, { CurrentWalletIds, TOAuthMethod } from '@getpara/web-sdk';
+import ParaWeb, { CurrentWalletIds, SupportedAccountLinks, TOAuthMethod } from '@getpara/web-sdk';
 import { Theme } from '@getpara/react-components';
 import { OnModalStepChangeValue } from '../stores/index.js';
 import { ModalStep, ModalStepProp } from '../utils/steps.js';
@@ -121,4 +121,9 @@ export interface ParaModalProps {
         recoverySecret?: string;
         walletIds: CurrentWalletIds;
     }>;
+    /**
+     * Which external accounts or wallets to allow your users to link to their accounts. The accounts will be displayed in this order in the modal account screen.
+     * If not provided, will default to your Developer Portal configuration or to all available account types.
+     */
+    supportedAccountLinks?: SupportedAccountLinks;
 }

package/dist/modal/utils/authInputHelpers.d.ts

@@ -1,7 +1,5 @@
+import { Auth } from '@getpara/user-management-client';
 import countryCodes from './countryCodes.js';
 export declare function isCcMatch(countryCode: string, option: (typeof countryCodes)[number]): boolean;
-export declare function validateAuth(identifier: string, countryCode?: string, type?: 'email' | 'phone'): {
-    email: string;
-} | {
-    phone: import("@getpara/user-management-client").AuthIdentifier<"phone">;
-};
+export declare function validateAuth(auth: Auth<'email' | 'phone'>): Auth<'email' | 'phone'>;
+export declare function validateInput(identifier: string, countryCode?: string, type?: 'email' | 'phone'): Auth<"email" | "phone">;

package/dist/modal/utils/authInputHelpers.js

@@ -5,34 +5,37 @@ import { formatPhoneNumber } from "@getpara/web-sdk";
 function isCcMatch(countryCode, option) {
   return countryCode === "+1" ? option.selectedLabel === "US" : option.value === countryCode;
 }
-function validateAuth(identifier, countryCode, type) {
-  const isEmail = type === "email";
-  const isPhone = type === "phone";
-  let auth;
+function validateAuth(auth) {
   switch (true) {
-    case isEmail:
-      if (!EMAIL_REGEX.test(identifier)) {
-        throw new Error("Please enter a valid email!");
+    case "email" in auth:
+      if (!EMAIL_REGEX.test(auth.email)) {
+        throw new Error("Please enter a valid email address!");
       }
-      auth = { email: identifier };
       break;
-    case isPhone:
-      if (countryCode === "+1" && identifier.slice(3, 6) === "555") {
-        auth = { phone: `${countryCode}${identifier}` };
-        break;
+    case "phone" in auth:
+      {
+        if (!/^\+1\d{3}555\d{4}$/.test(auth.phone)) {
+          const formatted = formatPhoneNumber(auth.phone);
+          if (!formatted) {
+            throw new Error("Please enter a valid phone number!");
+          }
+        }
       }
-      const validatedPhone = formatPhoneNumber(identifier, countryCode);
-      if (!validatedPhone) {
-        throw new Error("Please enter a valid phone number!");
-      }
-      auth = { phone: validatedPhone };
       break;
-    default:
-      throw new Error("Please enter a valid email or phone number!");
   }
   return auth;
 }
+function validateInput(identifier, countryCode, type) {
+  const isEmail = type === "email";
+  const isPhone = type === "phone";
+  const auth = isEmail ? { email: identifier } : isPhone ? { phone: `${countryCode}${identifier}` } : void 0;
+  if (!auth) {
+    throw new Error("Please enter a valid email or phone number!");
+  }
+  return validateAuth(auth);
+}
 export {
   isCcMatch,
-  validateAuth
+  validateAuth,
+  validateInput
 };

package/dist/modal/utils/getWalletDisplayName.d.ts

@@ -0,0 +1,5 @@
+import ParaWeb from '@getpara/web-sdk';
+export declare function getWalletDisplayName(para: ParaWeb, { type, isExternal, name, isMenu, hideWallets, }: Partial<Pick<(typeof para.availableWallets)[0], 'type' | 'isExternal' | 'name'> & {
+    isMenu?: boolean;
+    hideWallets?: boolean;
+}>): string;

package/dist/modal/utils/getWalletDisplayName.js

@@ -0,0 +1,22 @@
+"use client";
+import "../../chunk-MMUBH76A.js";
+const WALLET_TYPES = {
+  EVM: "EVM",
+  SOLANA: "Solana",
+  COSMOS: "Cosmos"
+};
+function getWalletDisplayName(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";
+}
+export {
+  getWalletDisplayName
+};

package/dist/modal/utils/steps.d.ts

@@ -33,7 +33,11 @@ export declare enum ModalStep {
     ADD_FUNDS_SUCCESS = "ADD_FUNDS_SUCCESS",
     ADD_FUNDS_FAILURE = "ADD_FUNDS_FAILURE",
     ACCOUNT_MAIN = "ACCOUNT_MAIN",
-    CHAIN_SWITCH = "CHAIN_SWITCH"
+    CHAIN_SWITCH = "CHAIN_SWITCH",
+    ACCOUNT_PROFILE = "ACCOUNT_PROFILE",
+    ACCOUNT_PROFILE_ADD = "ACCOUNT_PROFILE_ADD",
+    ACCOUNT_PROFILE_LIST = "ACCOUNT_PROFILE_LIST",
+    ACCOUNT_PROFILE_REMOVE = "ACCOUNT_PROFILE_REMOVE"
 }
 export type ModalStepPropU = keyof typeof ModalStep | ModalStep;
 export type ModalStepPropL = Lowercase<ModalStepPropU>;
@@ -47,7 +51,11 @@ declare enum AccountStep {
     ADD_FUNDS_AWAITING = "ADD_FUNDS_AWAITING",
     ADD_FUNDS_SUCCESS = "ADD_FUNDS_SUCCESS",
     ADD_FUNDS_FAILURE = "ADD_FUNDS_FAILURE",
-    CHAIN_SWITCH = "CHAIN_SWITCH"
+    CHAIN_SWITCH = "CHAIN_SWITCH",
+    ACCOUNT_PROFILE = "ACCOUNT_PROFILE",
+    ACCOUNT_PROFILE_ADD = "ACCOUNT_PROFILE_ADD",
+    ACCOUNT_PROFILE_LIST = "ACCOUNT_PROFILE_LIST",
+    ACCOUNT_PROFILE_REMOVE = "ACCOUNT_PROFILE_REMOVE"
 }
 export declare const RESET_TO_AUTH_STEPS: ModalStep[];
 export declare const RESET_TO_ACCOUNT_STEPS: ModalStep[];

package/dist/modal/utils/steps.js

@@ -35,6 +35,10 @@ var ModalStep = /* @__PURE__ */ ((ModalStep2) => {
   ModalStep2["ADD_FUNDS_FAILURE"] = "ADD_FUNDS_FAILURE";
   ModalStep2["ACCOUNT_MAIN"] = "ACCOUNT_MAIN";
   ModalStep2["CHAIN_SWITCH"] = "CHAIN_SWITCH";
+  ModalStep2["ACCOUNT_PROFILE"] = "ACCOUNT_PROFILE";
+  ModalStep2["ACCOUNT_PROFILE_ADD"] = "ACCOUNT_PROFILE_ADD";
+  ModalStep2["ACCOUNT_PROFILE_LIST"] = "ACCOUNT_PROFILE_LIST";
+  ModalStep2["ACCOUNT_PROFILE_REMOVE"] = "ACCOUNT_PROFILE_REMOVE";
   return ModalStep2;
 })(ModalStep || {});
 var AccountStep = /* @__PURE__ */ ((AccountStep2) => {
@@ -47,6 +51,10 @@ var AccountStep = /* @__PURE__ */ ((AccountStep2) => {
   AccountStep2["ADD_FUNDS_SUCCESS"] = "ADD_FUNDS_SUCCESS";
   AccountStep2["ADD_FUNDS_FAILURE"] = "ADD_FUNDS_FAILURE";
   AccountStep2["CHAIN_SWITCH"] = "CHAIN_SWITCH";
+  AccountStep2["ACCOUNT_PROFILE"] = "ACCOUNT_PROFILE";
+  AccountStep2["ACCOUNT_PROFILE_ADD"] = "ACCOUNT_PROFILE_ADD";
+  AccountStep2["ACCOUNT_PROFILE_LIST"] = "ACCOUNT_PROFILE_LIST";
+  AccountStep2["ACCOUNT_PROFILE_REMOVE"] = "ACCOUNT_PROFILE_REMOVE";
   return AccountStep2;
 })(AccountStep || {});
 const RESET_TO_AUTH_STEPS = [
@@ -81,7 +89,11 @@ const RESET_TO_ACCOUNT_STEPS = [
   "ADD_FUNDS_AWAITING" /* ADD_FUNDS_AWAITING */,
   "ADD_FUNDS_SUCCESS" /* ADD_FUNDS_SUCCESS */,
   "ADD_FUNDS_FAILURE" /* ADD_FUNDS_FAILURE */,
-  "CHAIN_SWITCH" /* CHAIN_SWITCH */
+  "CHAIN_SWITCH" /* CHAIN_SWITCH */,
+  "ACCOUNT_PROFILE" /* ACCOUNT_PROFILE */,
+  "ACCOUNT_PROFILE_ADD" /* ACCOUNT_PROFILE_ADD */,
+  "ACCOUNT_PROFILE_LIST" /* ACCOUNT_PROFILE_LIST */,
+  "ACCOUNT_PROFILE_REMOVE" /* ACCOUNT_PROFILE_REMOVE */
 ];
 const AccountPreviousStep = {
   ["ACCOUNT_MAIN" /* ACCOUNT_MAIN */]: void 0,
@@ -92,7 +104,11 @@ const AccountPreviousStep = {
   ["ADD_FUNDS_AWAITING" /* ADD_FUNDS_AWAITING */]: "ADD_FUNDS_BUY" /* ADD_FUNDS_BUY */,
   ["ADD_FUNDS_SUCCESS" /* ADD_FUNDS_SUCCESS */]: "ACCOUNT_MAIN" /* ACCOUNT_MAIN */,
   ["ADD_FUNDS_FAILURE" /* ADD_FUNDS_FAILURE */]: "ACCOUNT_MAIN" /* ACCOUNT_MAIN */,
-  ["CHAIN_SWITCH" /* CHAIN_SWITCH */]: "ACCOUNT_MAIN" /* ACCOUNT_MAIN */
+  ["CHAIN_SWITCH" /* CHAIN_SWITCH */]: "ACCOUNT_MAIN" /* ACCOUNT_MAIN */,
+  ["ACCOUNT_PROFILE" /* ACCOUNT_PROFILE */]: "ACCOUNT_MAIN" /* ACCOUNT_MAIN */,
+  ["ACCOUNT_PROFILE_LIST" /* ACCOUNT_PROFILE_LIST */]: "ACCOUNT_PROFILE" /* ACCOUNT_PROFILE */,
+  ["ACCOUNT_PROFILE_ADD" /* ACCOUNT_PROFILE_ADD */]: "ACCOUNT_PROFILE_LIST" /* ACCOUNT_PROFILE_LIST */,
+  ["ACCOUNT_PROFILE_REMOVE" /* ACCOUNT_PROFILE_REMOVE */]: "ACCOUNT_PROFILE" /* ACCOUNT_PROFILE */
 };
 var SignUpModalStep = /* @__PURE__ */ ((SignUpModalStep2) => {
   SignUpModalStep2["AUTH_MAIN"] = "AUTH_MAIN";

package/dist/provider/ParaProvider.js

@@ -12,8 +12,9 @@ import { ExternalWalletWrapper } from "./components/ExternalWalletWrapper.js";
 import { ParaModal } from "../modal/ParaModal.js";
 import { isConfigType, isParaWeb } from "./utils/paraConfigTypeGuards.js";
 import ParaWeb from "@getpara/web-sdk";
-import { ExternalWallet } from "@getpara/react-common";
+import { EXTERNAL_WALLET_TYPES } from "@getpara/web-sdk";
 import { AuthProvider } from "./providers/AuthProvider.js";
+import { AccountLinkProvider } from "./providers/AccountLinkProvider.js";
 const ParaProvider = forwardRef(({ children, paraClientConfig, callbacks, config, externalWalletConfig, paraModalConfig }, ref) => {
   useEventListeners(callbacks);
   useAutoSessionKeepAlive({ disabled: config.disableAutoSessionKeepAlive });
@@ -69,7 +70,7 @@ const ParaProvider = forwardRef(({ children, paraClientConfig, callbacks, config
   useEffect(() => {
     var _a;
     if (externalWallets !== (externalWalletConfig == null ? void 0 : externalWalletConfig.wallets)) {
-      setExternalWallets((_a = externalWalletConfig == null ? void 0 : externalWalletConfig.wallets) != null ? _a : Object.values(ExternalWallet));
+      setExternalWallets((_a = externalWalletConfig == null ? void 0 : externalWalletConfig.wallets) != null ? _a : [...EXTERNAL_WALLET_TYPES]);
     }
   }, [externalWalletConfig == null ? void 0 : externalWalletConfig.wallets]);
   useEffect(() => {
@@ -80,7 +81,7 @@ const ParaProvider = forwardRef(({ children, paraClientConfig, callbacks, config
         setExternalWalletsWithFullAuth([]);
       } else {
         setExternalWalletsWithFullAuth(
-          (externalWalletConfig == null ? void 0 : externalWalletConfig.createLinkedEmbeddedForExternalWallets) === "ALL" ? Object.values(ExternalWallet) : (_b = externalWalletConfig == null ? void 0 : externalWalletConfig.createLinkedEmbeddedForExternalWallets) != null ? _b : []
+          (externalWalletConfig == null ? void 0 : externalWalletConfig.createLinkedEmbeddedForExternalWallets) === "ALL" ? [...EXTERNAL_WALLET_TYPES] : (_b = externalWalletConfig == null ? void 0 : externalWalletConfig.createLinkedEmbeddedForExternalWallets) != null ? _b : []
         );
       }
     }
@@ -104,10 +105,10 @@ const ParaProvider = forwardRef(({ children, paraClientConfig, callbacks, config
         login: paraModalConfig == null ? void 0 : paraModalConfig.loginTransitionOverride,
         createWallets: paraModalConfig == null ? void 0 : paraModalConfig.createWalletOverride
       },
-      children: /* @__PURE__ */ jsxs(ExternalWalletWrapper, { config: externalWalletConfig, children: [
+      children: /* @__PURE__ */ jsx(ExternalWalletWrapper, { config: externalWalletConfig, children: /* @__PURE__ */ jsxs(AccountLinkProvider, { children: [
         children,
         !config.disableEmbeddedModal && /* @__PURE__ */ jsx(ParaModal, { ref })
-      ] })
+      ] }) })
     }
   );
 });