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

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

@@ -1,15 +1,15 @@
-import { WalletType } from '@getpara/web-sdk';
-export declare const ExternalWalletCard: ({ address, showAddFunds }: Pick<SharedWalletCardProps, "address" | "showAddFunds">) => import("react/jsx-runtime").JSX.Element;
+import { TWalletType } from '@getpara/web-sdk';
+export declare const ExternalWalletCard: ({ address, showAddFunds }: Pick<SharedWalletCardProps, "address" | "showAddFunds">) => import("react/jsx-runtime").JSX.Element | null;
 interface WalletCardProps {
     id: string;
-    type: WalletType;
+    type: TWalletType;
     showAddFunds?: boolean;
 }
-export declare const WalletCard: ({ id, type, showAddFunds }: WalletCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WalletCard: ({ id, type, showAddFunds }: WalletCardProps) => import("react/jsx-runtime").JSX.Element | null;
 interface SharedWalletCardProps {
     address: string;
     id?: string;
-    type?: WalletType;
+    type?: TWalletType;
     name?: string;
     identiconHash: string;
     showAddFunds?: boolean;

package/dist/modal/components/WalletCard/WalletCard.js

@@ -2,32 +2,33 @@
 import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
-import { useModalStore, useThemeStore } from "../../stores/index.js";
+import { useModalStore } from "../../stores/index.js";
 import { CpslButton, CpslIdenticon, CpslText } from "@getpara/react-components";
 import { truncateAddress } from "@getpara/web-sdk";
 import { ModalStep } from "../../utils/steps.js";
 import { useWalletState } from "../../../provider/index.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useStore } from "../../../provider/stores/useStore.js";
 const ExternalWalletCard = ({ address, showAddFunds }) => {
-  var _a;
+  var _a, _b;
   const para = useInternalClient();
   const wallet = para.externalWallets[address];
-  if (!wallet) {
+  if (!(wallet == null ? void 0 : wallet.address) || !(wallet == null ? void 0 : wallet.type)) {
     return null;
   }
   return /* @__PURE__ */ jsx(
     SharedWalletCard,
     {
       address: (_a = wallet.ensName) != null ? _a : truncateAddress(wallet.address, wallet.type),
-      identiconHash: para.getIdenticonHash(wallet.id, wallet.type),
+      identiconHash: (_b = para.getIdenticonHash(wallet.id, wallet.type)) != null ? _b : "",
       showAddFunds
     }
   );
 };
 const WalletCard = ({ id, type, showAddFunds }) => {
-  var _a, _b;
+  var _a, _b, _c;
   const para = useInternalClient();
-  const appName = useThemeStore((state) => state.appName);
+  const appName = useStore((state) => state.appName);
   const wallet = para.findWallet(id, type);
   if (!wallet) {
     return null;
@@ -40,7 +41,7 @@ const WalletCard = ({ id, type, showAddFunds }) => {
       type: wallet.type,
       address: (_a = wallet.ensName) != null ? _a : truncateAddress(address, type, { prefix: para.cosmosPrefix }),
       name: (_b = wallet.name) != null ? _b : `${appName ? `${appName} ` : ""}Wallet`,
-      identiconHash: para.getIdenticonHash(wallet.id, type),
+      identiconHash: (_c = para.getIdenticonHash(wallet.id, type)) != null ? _c : "",
       showAddFunds
     }
   );

package/dist/modal/components/WalletCreationDoneStep/WalletCreationDoneStep.js

@@ -5,34 +5,55 @@ import {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslText } from "@getpara/react-components";
 import { StepContainer, InnerStepContainer, HeroIcon } from "../common.js";
-import { useModalStore, useThemeStore } from "../../stores/index.js";
+import { useModalStore } from "../../stores/index.js";
 import { ModalStep } from "../../utils/steps.js";
 import { WalletCard, WalletCards } from "../WalletCard/WalletCard.js";
 import styled from "styled-components";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
+import { useEffect, useState } from "react";
 const WalletCreationDoneStep = ({ twoFactorAuthEnabled, onClose }) => {
-  const hideWallets = useThemeStore((state) => state.hideWallets);
+  const { isSetup2faPending } = useAuthActions();
+  const hideWallets = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
+  });
   const setStep = useModalStore((state) => state.setStep);
   const isLogin = useModalStore((state) => state.isLogin());
+  const twoFactorStatus = useModalStore((state) => state.twoFactorStatus);
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const para = useInternalClient();
+  const [isWaiting, setIsWaiting] = useState(false);
   const isOnRampConfigured = (onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled) || (onRampConfig == null ? void 0 : onRampConfig.isReceiveEnabled) || (onRampConfig == null ? void 0 : onRampConfig.isWithdrawEnabled);
-  const handleNext = () => __async(void 0, null, function* () {
+  const onBypass2fa = () => {
     if (isLogin) {
-      if (!twoFactorAuthEnabled) {
-        setStep(ModalStep.LOGIN_DONE);
-        return;
+      setStep(ModalStep.LOGIN_DONE);
+    } else {
+      onClose();
+    }
+  };
+  const handleNext = () => __async(void 0, null, function* () {
+    if (!twoFactorAuthEnabled) {
+      onBypass2fa();
+    }
+    if (!twoFactorStatus) {
+      if (isSetup2faPending) {
+        setIsWaiting(true);
       }
-      const { isSetup: is2faComplete } = yield para.check2FAStatus();
-      setStep(is2faComplete ? ModalStep.LOGIN_DONE : ModalStep.SETUP_2FA);
     } else {
-      if (twoFactorAuthEnabled) {
-        setStep(ModalStep.SETUP_2FA);
+      if (twoFactorStatus.isSetup) {
+        onBypass2fa();
       } else {
-        onClose();
+        setStep(ModalStep.SETUP_2FA);
       }
     }
   });
+  useEffect(() => {
+    if (isWaiting && !!twoFactorStatus) {
+      setStep(ModalStep.SETUP_2FA);
+    }
+  }, [isWaiting, twoFactorStatus]);
   return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
     /* @__PURE__ */ jsx(CardContainer, { children: hideWallets ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(HeroIcon, { icon: "checkCircleFilled" }),
@@ -40,7 +61,7 @@ const WalletCreationDoneStep = ({ twoFactorAuthEnabled, onClose }) => {
     ] }) : /* @__PURE__ */ jsx(WalletCards, { children: para.currentWalletIdsArray.map(([id, type]) => {
       return /* @__PURE__ */ jsx(WalletCard, { id, type, showAddFunds: isOnRampConfigured }, id);
     }) }) }),
-    /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: handleNext, children: twoFactorAuthEnabled ? "Continue" : "Done" }) })
+    /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: handleNext, disabled: isWaiting, children: twoFactorAuthEnabled ? "Continue" : "Done" }) })
   ] });
 };
 const CardContainer = styled(InnerStepContainer)`

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

@@ -9,23 +9,23 @@ export declare const FullWidthFilledDisabledInput: typeof CpslInput;
 export declare const CenteredText: typeof CpslText;
 export declare const InnerStepContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StepContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
-    ref?: import("react").Ref<HTMLDivElement>;
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, {
     $wide?: boolean;
 }>> & string;
 export declare const Heading: typeof CpslText;
 export declare const StyledCpslTileButton: typeof CpslTileButton;
 export declare const HeroIcon: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
-    ref?: import("react").Ref<any>;
+    ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
 }, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
 export declare const HeaderSelect: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
-    ref?: import("react").Ref<any>;
+    ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
 }, {
     $width: number;
     $top?: number;
 }>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
 export declare const HeaderSelectItem: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
-    ref?: import("react").Ref<any>;
+    ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
 }, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
 export declare const HeaderSelectContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare function AssetIcon({ asset, size }: {
@@ -38,5 +38,5 @@ export declare function NetworkIcon({ network, size }: {
 }): import("react/jsx-runtime").JSX.Element;
 export declare const ErrorContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ErrorIcon: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
-    ref?: import("react").Ref<any>;
+    ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
 }, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;

package/dist/modal/components/common.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 import { CpslIcon, CpslInput, CpslSelect, CpslSelectItem, CpslText, CpslTileButton } from "@getpara/react-components";
 import { styled } from "styled-components";
 import { MOBILE_SIZE, NETWORKS, ON_RAMP_ASSETS } from "../constants/constants.js";
-import { useThemeStore } from "../stores/index.js";
+import { useStore } from "../../provider/stores/useStore.js";
 const SpinnerContainer = styled.div`
   display: flex;
   align-items: center;
@@ -71,7 +71,7 @@ const HeroIcon = styled(CpslIcon)`
   --icon-color: var(--cpsl-color-text-primary);
 `;
 const HeaderSelect = styled(CpslSelect)`
-  --container-height: auto;
+  --container-height: 26px;
   --container-border-width: 0px;
   --container-padding-end: 0px;
   --container-padding-start: 0px;
@@ -126,12 +126,18 @@ const StyledIcon = styled(CpslIcon)`
   border-radius: 100%;
 `;
 function AssetIcon({ asset, size }) {
-  const isDark = useThemeStore((state) => state.isDark);
+  const isDark = useStore((state) => {
+    var _a, _b;
+    return ((_b = (_a = state.modalConfig) == null ? void 0 : _a.theme) == null ? void 0 : _b.mode) === "dark";
+  });
   const data = ON_RAMP_ASSETS[asset];
   return /* @__PURE__ */ jsx(StyledIcon, { size, icon: data.icon, inset: data.isCircular ? void 0 : "15%", invert: isDark && data.isDark });
 }
 function NetworkIcon({ network, size }) {
-  const isDark = useThemeStore((state) => state.isDark);
+  const isDark = useStore((state) => {
+    var _a, _b;
+    return ((_b = (_a = state.modalConfig) == null ? void 0 : _a.theme) == null ? void 0 : _b.mode) === "dark";
+  });
   const data = NETWORKS[network];
   return /* @__PURE__ */ jsx(StyledIcon, { size, icon: data.icon, inset: data.isCircular ? void 0 : "15%", invert: isDark && data.isDark });
 }

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): "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" | "close" | "clubhouseBrand" | "clubhouse" | "code" | "copy07" | "copy" | "cosmos" | "creditCard02" | "creditCard" | "cube03" | "cubeOutline" | "cube" | "currencyDollar" | "decentBrand" | "decent" | "dell" | "discordBrand" | "discord" | "dot" | "dots" | "downloadCloud" | "download" | "dribbbleBrand" | "dribbble" | "earth" | "edit02" | "emptyCircle" | "ethereum" | "eyeOff" | "eye" | "facebookBrand" | "facebook" | "farcasterBrand" | "farcaster" | "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" | "key" | "laptop" | "lenovo" | "lg" | "lightning01" | "lightning" | "linkExternal" | "linkedinBrand" | "linkedin" | "lockKeyholeCircle" | "logOut" | "mail" | "menu" | "monitor" | "moonpayBrand" | "moreLoginOptions" | "motorola" | "nobleBrand" | "optimismBrand" | "paraBlackBg" | "paraBrand" | "paraIconBrand" | "paraIconQr" | "paraIcon" | "paraLogo" | "paraRingsDark" | "paraRings" | "para" | "passcode" | "phone" | "pintrestBrand" | "pintrest" | "plusCircle" | "plus" | "polygonBrand" | "polygon" | "puzzlePiece" | "qrCode02" | "qrCode" | "rampNetworkBrand" | "rampNetwork" | "redditBrand" | "reddit" | "refresh" | "samsung" | "search" | "send" | "settings" | "share" | "shield" | "signalBrand" | "signal" | "sliders" | "snapchatBrand" | "snapchat" | "solana" | "spacingHeight" | "star04Filled" | "stars01Filled" | "stars" | "stopSquare" | "stripeBrand" | "telegramBrand" | "telegram" | "tetherBrand" | "tikTokBrand" | "tikTok" | "trash" | "tumblrBrand" | "tumblr" | "twitterBrand" | "twitter" | "usdcBrand" | "userCircle" | "user" | "wallet" | "x" | "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" | "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" | "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 const MOBILE_SIZE = 480;
 export declare const NETWORK_NOT_SUPPORTED_ERROR = "network not supported";
 export declare const EMAIL_REGEX: RegExp;

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

@@ -1,8 +1,8 @@
 import { IconType } from '@getpara/react-components';
-import { OAuthMethod } from '@getpara/web-sdk';
+import { TOAuthMethod } from '@getpara/web-sdk';
 export declare const brandedOAuthLogos: {
-    [key in OAuthMethod]: IconType;
+    [key in TOAuthMethod]: IconType;
 };
 export declare const oAuthLogos: {
-    [key in OAuthMethod]: IconType;
+    [key in TOAuthMethod]: IconType;
 };

package/dist/modal/hooks/useGoBack.js

@@ -1,30 +1,31 @@
 "use client";
 import "../../chunk-MMUBH76A.js";
 import { useInternalClient } from "../../provider/hooks/utils/useInternalClient.js";
-import { useExternalWallets } from "../providers/ExternalWalletContext.js";
+import { useExternalWallets } from "../../provider/providers/ExternalWalletProvider.js";
 import { useModalStore } from "../stores/index.js";
 import { getAddFundsStep, ModalStep } from "../utils/steps.js";
 const useGoBack = () => {
   const currentStep = useModalStore((state) => state.step);
+  const refs = useModalStore((state) => state.refs);
   const setStep = useModalStore((state) => state.setStep);
   const accountAddFundTab = useModalStore((state) => state.accountAddFundTab);
   const decrementStep = useModalStore((state) => state.decrementStep);
   const resetState = useModalStore((state) => state.resetState);
   const { setChainIdSwitchingTo, disconnectExternalWallet } = useExternalWallets();
-  const client = useInternalClient();
+  const para = useInternalClient();
   const goBack = () => {
-    if (currentStep === ModalStep.ADD_FUNDS_AWAITING) {
+    if (accountAddFundTab && currentStep === ModalStep.ADD_FUNDS_AWAITING) {
       setStep(getAddFundsStep(accountAddFundTab));
     } else {
       decrementStep();
     }
-    switch (currentStep) {
+    switch (refs.currentStep.current) {
       case ModalStep.AUTH_MAIN:
       case ModalStep.AUTH_MORE:
       case ModalStep.EX_WALLET_SELECTED:
       case ModalStep.EXTERNAL_WALLET_VERIFICATION: {
         resetState();
-        if (client.isExternalWalletAuth) {
+        if (para.isExternalWalletAuth) {
           disconnectExternalWallet();
         }
         break;

package/dist/modal/index.d.ts

@@ -6,6 +6,3 @@ export * from './utils/openPopup.js';
 export { ON_RAMP_PROVIDERS, ON_RAMP_ASSETS, NETWORKS, getAssetIcon, getAssetCode, getNetworkIcon, getNetworkName, } from './constants/constants.js';
 export { SaveRecoverySecret } from './components/RecoverySecretStep/RecoverySecretStep.js';
 export * from './utils/validateOnRampConfig.js';
-export * from './types/externalWallets.js';
-export { useExternalWalletProviderStore } from './stores/externalWalletProvider/useExternalWalletProviderStore.js';
-export * from './types/commonTypes.js';

package/dist/modal/index.js

@@ -15,9 +15,6 @@ import {
 } from "./constants/constants.js";
 import { SaveRecoverySecret } from "./components/RecoverySecretStep/RecoverySecretStep.js";
 export * from "./utils/validateOnRampConfig.js";
-export * from "./types/externalWallets.js";
-import { useExternalWalletProviderStore } from "./stores/externalWalletProvider/useExternalWalletProviderStore.js";
-export * from "./types/commonTypes.js";
 export {
   AuthLayout,
   ModalStep,
@@ -28,6 +25,5 @@ export {
   getAssetCode,
   getAssetIcon,
   getNetworkIcon,
-  getNetworkName,
-  useExternalWalletProviderStore
+  getNetworkName
 };

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

@@ -1,3 +1 @@
 export * from './modal/useModalStore.js';
-export * from './userInfo/useUserInfoStore.js';
-export * from './theme/useThemeStore.js';

package/dist/modal/stores/index.js

@@ -1,4 +1,2 @@
 "use client";
 export * from "./modal/useModalStore.js";
-export * from "./userInfo/useUserInfoStore.js";
-export * from "./theme/useThemeStore.js";

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

@@ -3,10 +3,20 @@ import {
   __spreadValues
 } from "../../../chunk-MMUBH76A.js";
 import { DEFAULT_MODAL_STATE } from "./useModalStore.js";
-import { AccountPreviousStep, LoginPreviousStep, ModalStep, SignUpPreviousStep } from "../../utils/steps.js";
+import {
+  AccountPreviousStep,
+  GuestPreviousStep,
+  LoginPreviousStep,
+  ModalStep,
+  SignUpPreviousStep
+} from "../../utils/steps.js";
+function getPreviousStep(flow, step) {
+  return flow === "account" ? AccountPreviousStep[step] : flow === "login" ? LoginPreviousStep[step] : flow === "guest" ? GuestPreviousStep[step] : SignUpPreviousStep[step];
+}
 const getActions = (set, get) => ({
   resetState: () => set(DEFAULT_MODAL_STATE),
   setOnModalStepChange: (onModalStepChange) => set({ onModalStepChange }),
+  setRecoveryShare: (recoveryShare) => set({ recoveryShare }),
   setStep: (step) => {
     const onModalStepChange = get().onModalStepChange;
     const previousStep = get().step;
@@ -17,61 +27,104 @@ const getActions = (set, get) => ({
     var _a;
     const currentStep = get().step;
     const onRampStep = get().onRampStep;
+    const flow = get().flow;
     if ([ModalStep.ADD_FUNDS_BUY, ModalStep.ADD_FUNDS_WITHDRAW].includes(currentStep) && onRampStep > 0) {
       set({ onRampStep: onRampStep - 1 });
       return;
     }
+    if (!flow) {
+      return;
+    }
     const onModalStepChange = get().onModalStepChange;
-    const isLogin = get().flow === "login";
-    const isAccount = get().flow === "account";
-    const webAuthURLForCreate = get().webAuthURLForCreate;
+    const signupState = get().getSignupState();
     const iFrameUrl = get().iFrameUrl;
     const refs = get().refs;
-    let prevStep = (isAccount ? AccountPreviousStep : isLogin ? LoginPreviousStep : SignUpPreviousStep)[currentStep];
-    if (currentStep === ModalStep.PASSWORD_CREATION && iFrameUrl && !webAuthURLForCreate) {
+    let prevStep = getPreviousStep(flow, currentStep);
+    if (currentStep === ModalStep.PASSWORD_CREATION && iFrameUrl && !(signupState == null ? void 0 : signupState.passkeyUrl)) {
       prevStep = ModalStep.AUTH_MAIN;
     }
     if (currentStep === ModalStep.EX_WALLET_SELECTED) {
       set({ selectedExternalWalletId: void 0, isExternalWalletConnecting: false, externalWalletError: void 0 });
     }
     if (prevStep) {
-      set({ step: prevStep, stepDirection: -1 });
+      set(__spreadValues({
+        authStepRoute: void 0,
+        step: prevStep,
+        stepDirection: -1
+      }, prevStep === ModalStep.AUTH_MAIN && { flow: void 0 }));
       onModalStepChange == null ? void 0 : onModalStepChange({ previousStep: currentStep, currentStep: prevStep, canGoBack: get().hasPreviousStep() });
     }
     (_a = refs.popupWindow.current) == null ? void 0 : _a.close();
-    refs.popupWindow.current = void 0;
+    refs.popupWindow.current = null;
   },
   hasPreviousStep: () => {
-    const isLogin = get().flow === "login";
-    const isAccount = get().flow === "account";
+    const flow = get().flow;
     const currentStep = get().step;
     const onRampStep = get().onRampStep;
     if ([ModalStep.ADD_FUNDS_BUY, ModalStep.ADD_FUNDS_WITHDRAW].includes(currentStep) && onRampStep > 0) {
       return true;
     }
-    return !!(isAccount ? AccountPreviousStep[currentStep] : isLogin ? LoginPreviousStep[currentStep] : SignUpPreviousStep[currentStep]);
+    return !!flow && !!getPreviousStep(flow, currentStep);
   },
   setFlow: (flow) => set({ flow }),
   isLogin: () => get().flow === "login",
   isAccount: () => get().flow === "account",
-  setWebAuthURLForLogin: (url) => set({ webAuthURLForLogin: url }),
-  setWebAuthURLForCreate: (url) => set({ webAuthURLForCreate: url }),
-  setPasswordUrlForLogin: (url) => set({ passwordUrlForLogin: url }),
-  setSupportedAuthMethods: (supportedAuthMethods) => set({ supportedAuthMethods }),
+  setAuthState: (authState) => {
+    let flow = get().flow, newFlow;
+    switch (authState == null ? void 0 : authState.stage) {
+      case "login":
+        newFlow = "login";
+        break;
+      case "signup":
+      case "verify":
+        newFlow = flow === "guest" ? "guest" : "signup";
+        break;
+      default:
+        break;
+    }
+    set(__spreadValues({ authState }, newFlow ? { flow: newFlow } : {}));
+  },
+  getVerifyState: () => {
+    const authState = get().authState;
+    return (authState == null ? void 0 : authState.stage) === "verify" ? authState : void 0;
+  },
+  getLoginState: () => {
+    const authState = get().authState;
+    return (authState == null ? void 0 : authState.stage) === "login" ? authState : void 0;
+  },
+  getSignupState: () => {
+    const authState = get().authState;
+    return (authState == null ? void 0 : authState.stage) === "signup" ? authState : void 0;
+  },
   setOnRampPurchase: (onRampPurchase) => set((state) => ({ onRampPurchase: __spreadValues(__spreadValues({}, state.onRampPurchase || {}), onRampPurchase) })),
   setOnRampConfig: (onRampConfig) => set({ onRampConfig }),
   setOnRampStep: (onRampStep) => set({ onRampStep }),
   setIsFullyLoggedIn: (isFullyLoggedIn) => set({ isFullyLoggedIn }),
   setAccountAddFundTab: (accountAddFundTab) => set({ accountAddFundTab }),
+  setGuestAddFundsTab: (guestAddFundsTab) => set({ guestAddFundsTab }),
   setSelectedExternalWalletId: (selectedExternalWalletId) => set({ selectedExternalWalletId }),
   setIsExternalWalletConnecting: (isExternalWalletConnecting) => set({ isExternalWalletConnecting }),
   setExternalWalletError: (externalWalletError) => set({ externalWalletError }),
   setIsUsingMobileConnector: (isUsingMobileConnector) => set({ isUsingMobileConnector }),
   setStepDirection: (stepDirection) => set({ stepDirection }),
   setFarcasterConnectUri: (farcasterConnectUri) => set({ farcasterConnectUri }),
-  setBiometricLocationHints: (biometricLocationHints) => set({ biometricLocationHints }),
+  setTwoFactorStatus: (twoFactorStatus) => set({ twoFactorStatus }),
   setIFrameUrl: (iFrameUrl) => set({ iFrameUrl }),
   setIsIFrameReady: (isIFrameReady) => set({ isIFrameReady }),
+  setAuthLayout: (authLayout) => {
+    const types = [];
+    const uniqueLayouts = [];
+    authLayout.map((layout) => {
+      const type = layout.split(":")[0];
+      if (!types.includes(type)) {
+        uniqueLayouts.push(layout);
+        types.push(type);
+      } else {
+        console.warn(`${layout} is a duplicate ${type} layout type. Please remove the duplicate type from your config.`);
+      }
+    });
+    set({ authLayout: uniqueLayouts });
+  },
   setAuthStepRoute: (authStepRoute) => set({ authStepRoute }),
   setIsPasskeySupported: (isPasskeySupported) => set({ isPasskeySupported })
 });

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

@@ -1,11 +1,12 @@
 import { ModalStep } from '../../utils/steps.js';
-import { OnRampConfig as OnRampConfigBase, OnRampPurchase, WalletType } from '@getpara/web-sdk';
+import { OnRampConfig as OnRampConfigBase, OnRampPurchase, TWalletType } from '@getpara/web-sdk';
 import { Tab as AddFundsTabType } from '../../components/AddFunds/AddFundsContext.js';
-import { AuthMethod } from '@getpara/core-sdk';
-import { BiometricLocationHint } from '@getpara/user-management-client';
+import { AuthStateLogin, AuthStateSignup, AuthState, AuthStateVerify } from '@getpara/core-sdk';
+import { TAuthLayout } from '../../types/modalProps.js';
 import { MutableRefObject } from 'react';
-type Flow = 'login' | 'signUp' | 'account';
-type ActiveWallet = [string | undefined, WalletType | undefined];
+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 {
     SETTINGS = 0,
     PROVIDER = 1
@@ -19,66 +20,69 @@ export interface OnModalStepChangeValue {
     canGoBack: boolean;
 }
 interface ModalState {
+    recoveryShare: string | null;
     step: ModalStep;
     stepDirection: 1 | -1;
     flow: Flow | undefined;
-    webAuthURLForLogin: string | undefined;
-    webAuthURLForCreate: string | undefined;
-    passwordUrlForLogin: string | undefined;
-    supportedAuthMethods: Set<AuthMethod>;
-    onModalStepChange: (value: OnModalStepChangeValue) => void | undefined;
+    authState: AuthState | undefined;
+    onModalStepChange?: (value: OnModalStepChangeValue) => void | undefined;
     onRampConfig: OnRampConfig | undefined;
     onRampPurchase: Partial<OnRampPurchase> | undefined;
     onRampStep: OnRampStep;
     isFullyLoggedIn: boolean;
     accountAddFundTab?: AddFundsTabType;
+    guestAddFundsTab?: AddFundsTabType;
     selectedExternalWalletId?: string;
     isUsingMobileConnector?: boolean;
     isExternalWalletConnecting?: boolean;
     externalWalletError?: string[];
     activeWallet: ActiveWallet | undefined;
     farcasterConnectUri: string | undefined;
-    biometricLocationHints: BiometricLocationHint[] | undefined;
+    twoFactorStatus: Setup2faResponse | undefined;
     iFrameUrl: string | undefined;
     isIFrameReady: boolean | undefined;
+    authLayout?: TAuthLayout[];
     authStepRoute: ModalStep | undefined;
     refs: {
-        popupWindow: MutableRefObject<Window>;
+        popupWindow: MutableRefObject<Window | null>;
         poll: MutableRefObject<{
-            action: 'login' | 'createPasskey' | 'createPassword';
+            action: 'login' | 'signup';
             timeout: number;
-        }>;
-        currentStep: MutableRefObject<ModalStep>;
+        } | null>;
+        currentStep: MutableRefObject<ModalStep | null>;
     };
     isPasskeySupported: boolean;
 }
 export interface ModalActions {
     resetState: () => void;
+    setRecoveryShare: (recoveryShare: string | null) => void;
     setStep: (step: ModalStep) => void;
+    setGuestAddFundsTab: (tab?: AddFundsTabType | undefined) => void;
     decrementStep: () => void;
     hasPreviousStep: () => boolean;
     setFlow: (flow?: Flow) => void;
+    setAuthState: (authState?: AuthState | undefined) => void;
+    getVerifyState: () => AuthStateVerify | undefined;
+    getSignupState: () => AuthStateSignup | undefined;
+    getLoginState: () => AuthStateLogin | undefined;
     isLogin: () => boolean;
     isAccount: () => boolean;
-    setSupportedAuthMethods: (authMethods: Set<AuthMethod>) => void;
-    setWebAuthURLForLogin: (url?: string) => void;
-    setWebAuthURLForCreate: (url?: string) => void;
-    setPasswordUrlForLogin: (url?: string) => void;
-    setOnModalStepChange: (fn: (value: OnModalStepChangeValue) => void) => void;
+    setOnModalStepChange: (fn?: (value: OnModalStepChangeValue) => void) => void;
     setOnRampConfig: (_: OnRampConfig | undefined) => void;
     setOnRampPurchase: (_: Partial<OnRampPurchase> | undefined) => void;
     setOnRampStep: (_: OnRampStep) => void;
     setIsFullyLoggedIn: (isFullyLoggedIn: boolean) => void;
-    setAccountAddFundTab: (accountAddFundTab: AddFundsTabType) => void;
+    setAccountAddFundTab: (accountAddFundTab?: AddFundsTabType) => void;
     setSelectedExternalWalletId: (id?: string) => void;
     setIsUsingMobileConnector: (isUsingMobileConnector?: boolean) => void;
     setIsExternalWalletConnecting: (isExternalWalletConnecting: boolean) => void;
     setExternalWalletError: (externalWalletError?: string[]) => void;
     setStepDirection: (stepDirection: 1 | -1) => void;
     setFarcasterConnectUri: (_: string | undefined) => void;
-    setBiometricLocationHints: (_?: BiometricLocationHint[]) => void;
+    setTwoFactorStatus: (twoFactorStatus?: Setup2faResponse) => void;
     setIFrameUrl: (_?: string) => void;
     setIsIFrameReady: (_?: boolean) => void;
+    setAuthLayout: (authLayout: TAuthLayout[]) => void;
     setAuthStepRoute: (_?: ModalStep) => void;
     setIsPasskeySupported: (_: boolean) => void;
 }