@getpara/react-sdk-lite 2.0.0-alpha.33

package/dist/modal/hooks/useGoBack.js

@@ -0,0 +1,43 @@
+"use client";
+import "../../chunk-MMUBH76A.js";
+import { useInternalClient } from "../../provider/hooks/utils/useInternalClient.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 para = useInternalClient();
+  const goBack = () => {
+    if (accountAddFundTab && currentStep === ModalStep.ADD_FUNDS_AWAITING) {
+      setStep(getAddFundsStep(accountAddFundTab));
+    } else {
+      decrementStep();
+    }
+    switch (refs.currentStep.current) {
+      case ModalStep.AUTH_MAIN:
+      case ModalStep.AUTH_MORE:
+      case ModalStep.EX_WALLET_SELECTED:
+      case ModalStep.EXTERNAL_WALLET_VERIFICATION: {
+        resetState();
+        if (para.isExternalWalletAuth) {
+          disconnectExternalWallet();
+        }
+        break;
+      }
+      case ModalStep.CHAIN_SWITCH: {
+        setChainIdSwitchingTo();
+        break;
+      }
+    }
+  };
+  return goBack;
+};
+export {
+  useGoBack
+};

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/index.d.ts

@@ -0,0 +1,8 @@
+export * from './ParaModal.js';
+export type { ParaModalProps, ParaModalHandle, ParaModalTheme } from './types/modalProps.js';
+export { ModalStep, type ModalStepProp } from './utils/steps.js';
+export { AuthLayout } from './types/modalProps.js';
+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';

package/dist/modal/index.js

@@ -0,0 +1,29 @@
+"use client";
+import "../chunk-MMUBH76A.js";
+export * from "./ParaModal.js";
+import { ModalStep } from "./utils/steps.js";
+import { AuthLayout } from "./types/modalProps.js";
+export * from "./utils/openPopup.js";
+import {
+  ON_RAMP_PROVIDERS,
+  ON_RAMP_ASSETS,
+  NETWORKS,
+  getAssetIcon,
+  getAssetCode,
+  getNetworkIcon,
+  getNetworkName
+} from "./constants/constants.js";
+import { SaveRecoverySecret } from "./components/RecoverySecretStep/RecoverySecretStep.js";
+export * from "./utils/validateOnRampConfig.js";
+export {
+  AuthLayout,
+  ModalStep,
+  NETWORKS,
+  ON_RAMP_ASSETS,
+  ON_RAMP_PROVIDERS,
+  SaveRecoverySecret,
+  getAssetCode,
+  getAssetIcon,
+  getNetworkIcon,
+  getNetworkName
+};

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

@@ -0,0 +1 @@
+export * from './modal/useModalStore.js';

package/dist/modal/stores/index.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "./modal/useModalStore.js";

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

@@ -0,0 +1,3 @@
+import { StoreApi } from 'zustand';
+import { ModalActions, ModalStore } from './useModalStore.js';
+export declare const getActions: (set: StoreApi<ModalStore>["setState"], get: StoreApi<ModalStore>["getState"]) => ModalActions;

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

@@ -0,0 +1,139 @@
+"use client";
+import {
+  __spreadValues
+} from "../../../chunk-MMUBH76A.js";
+import { DEFAULT_MODAL_STATE } from "./useModalStore.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;
+    const refs = get().refs;
+    set({ step });
+    onModalStepChange == null ? void 0 : onModalStepChange({ previousStep, currentStep: step, canGoBack: get().hasPreviousStep() });
+    if (step === ModalStep.ACCOUNT_MAIN) {
+      refs.wasSignedIn.current = true;
+    }
+  },
+  decrementStep: () => {
+    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;
+    }
+    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;
+    }
+    if (currentStep === ModalStep.EX_WALLET_SELECTED) {
+      set({ selectedExternalWalletId: void 0, isExternalWalletConnecting: false, externalWalletError: void 0 });
+    }
+    if (prevStep) {
+      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 = null;
+  },
+  hasPreviousStep: () => {
+    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 !!getPreviousStep(flow, currentStep);
+  },
+  setFlow: (flow) => set({ flow }),
+  isLogin: () => get().flow === "login",
+  isAccount: () => get().flow === "account",
+  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 }),
+  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 }),
+  setAccountLinkOptions: (accountLinkOptions) => set({ accountLinkOptions })
+});
+export {
+  getActions
+};

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

@@ -0,0 +1,105 @@
+import { ModalStep } from '../../utils/steps.js';
+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 { TAuthLayout } from '../../types/modalProps.js';
+import { MutableRefObject } from 'react';
+export type Flow = AuthStateSignup['stage'] | AuthStateLogin['stage'] | 'account' | 'guest';
+type ActiveWallet = [string | undefined, TWalletType | undefined];
+export declare enum OnRampStep {
+    SETTINGS = 0,
+    PROVIDER = 1
+}
+export type OnRampConfig = OnRampConfigBase & {
+    testMode?: boolean;
+};
+export interface OnModalStepChangeValue {
+    previousStep: ModalStep;
+    currentStep: ModalStep;
+    canGoBack: boolean;
+}
+interface ModalState {
+    recoveryShare: string | null;
+    step: ModalStep;
+    stepDirection: 1 | -1;
+    flow: Flow | 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;
+    twoFactorStatus: Setup2faResponse | undefined;
+    iFrameUrl: string | undefined;
+    isIFrameReady: boolean | undefined;
+    authLayout?: TAuthLayout[];
+    authStepRoute: ModalStep | undefined;
+    refs: {
+        popupWindow: MutableRefObject<Window | null>;
+        poll: MutableRefObject<{
+            action: 'login' | 'signup';
+            timeout: number;
+        } | null>;
+        currentStep: MutableRefObject<ModalStep | null>;
+        telegramIFrame: MutableRefObject<HTMLIFrameElement | null>;
+        wasSignedIn: MutableRefObject<boolean | null>;
+        initialFarcasterConnected: MutableRefObject<boolean | null>;
+    };
+    isPasskeySupported: boolean;
+    accountLinkOptions: SupportedAccountLinks;
+}
+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;
+    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;
+    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;
+    setTwoFactorStatus: (twoFactorStatus?: Setup2faResponse) => void;
+    setIFrameUrl: (_?: string) => void;
+    setIsIFrameReady: (_?: boolean) => void;
+    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'>;
+export declare const useModalStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ModalStore>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<ModalStore, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: ModalStore) => void) => () => void;
+        onFinishHydration: (fn: (state: ModalStore) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<ModalStore, unknown>>;
+    };
+}>;
+export {};

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

@@ -0,0 +1,75 @@
+"use client";
+import {
+  __spreadValues
+} from "../../../chunk-MMUBH76A.js";
+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) => {
+  OnRampStep2[OnRampStep2["SETTINGS"] = 0] = "SETTINGS";
+  OnRampStep2[OnRampStep2["PROVIDER"] = 1] = "PROVIDER";
+  return OnRampStep2;
+})(OnRampStep || {});
+const DEFAULT_MODAL_STATE = {
+  recoveryShare: null,
+  flow: void 0,
+  stepDirection: 1,
+  authState: void 0,
+  onModalStepChange: void 0,
+  onRampPurchase: void 0,
+  onRampStep: 0 /* SETTINGS */,
+  isFullyLoggedIn: false,
+  accountAddFundTab: void 0,
+  guestAddFundsTab: void 0,
+  isExternalWalletConnecting: false,
+  externalWalletError: void 0,
+  activeWallet: [void 0, void 0],
+  farcasterConnectUri: void 0,
+  twoFactorStatus: void 0,
+  iFrameUrl: void 0,
+  isIFrameReady: void 0,
+  authLayout: [AuthLayout.AUTH_FULL, AuthLayout.EXTERNAL_FULL],
+  authStepRoute: void 0,
+  refs: {
+    popupWindow: createRef(),
+    poll: createRef(),
+    currentStep: createRef(),
+    telegramIFrame: createRef(),
+    wasSignedIn: createRef(),
+    initialFarcasterConnected: createRef()
+  },
+  isPasskeySupported: true,
+  accountLinkOptions: [...LINKED_ACCOUNT_TYPES]
+};
+const useModalStore = create()(
+  persist(
+    (set, get) => __spreadValues(__spreadValues({
+      step: ModalStep.AUTH_MAIN,
+      onRampConfig: void 0
+    }, DEFAULT_MODAL_STATE), getActions(set, get)),
+    {
+      version: 1,
+      name: "@PARA/modalState",
+      storage: createJSONStorage(() => localStorage),
+      partialize: (state) => ({
+        step: state.step,
+        authState: state.authState,
+        onRampPurchase: state.onRampPurchase,
+        selectedExternalWalletId: state.selectedExternalWalletId,
+        isUsingMobileConnector: state.isUsingMobileConnector,
+        isPasskeySupported: state.isPasskeySupported
+      })
+    }
+  )
+);
+export {
+  DEFAULT_MODAL_STATE,
+  OnRampStep,
+  useModalStore
+};

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

@@ -0,0 +1,6 @@
+import { IconType } from '@getpara/react-components';
+export type Tab<T> = {
+    label: string;
+    value: T;
+    icon: IconType;
+};

package/dist/modal/types/commonTypes.js

@@ -0,0 +1 @@
+"use client";

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

@@ -0,0 +1,129 @@
+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';
+export type ParaModalHandle = {
+    /**
+     * Move the modal backward
+     */
+    goBack: () => void;
+    /**
+     * Returns if the modal can go back
+     */
+    canGoBack: () => boolean;
+    /**
+     * Returns if the modal is expanded
+     */
+    currentStep: () => ModalStep;
+    /**
+     * Trigger the modal close handler
+     */
+    handleModalClose: () => void;
+};
+export type OAuthLogoVariantType = 'dark' | 'light' | 'default';
+export type ParaModalTheme = Theme & {
+    oAuthLogoVariant?: OAuthLogoVariantType;
+};
+export declare enum AuthLayout {
+    AUTH_FULL = "AUTH:FULL",
+    AUTH_CONDENSED = "AUTH:CONDENSED",
+    EXTERNAL_FULL = "EXTERNAL:FULL",
+    EXTERNAL_CONDENSED = "EXTERNAL:CONDENSED"
+}
+export type TAuthLayout = `${AuthLayout}`;
+export interface ParaModalProps {
+    /**
+     * Your ParaWeb instance.
+     */
+    para?: ParaWeb;
+    /**
+     * Whether or not the modal is open.
+     */
+    isOpen?: boolean;
+    /**
+     * Whether or not to show two-factor authentication steps to users.
+     * Defaults to `false`.
+     */
+    twoFactorAuthEnabled?: boolean;
+    /**
+     * Whether or not to show the wallet recovery to users.
+     * Defaults to `false`
+     */
+    recoverySecretStepEnabled?: boolean;
+    /**
+     * Which OAuth methods (if any) to show.
+     * Defaults to `true`.
+     */
+    oAuthMethods?: TOAuthMethod[];
+    /**
+     * Whether or not to allow for email login. If true, only OAuth login will be available.
+     * Defaults to `false`.
+     */
+    disableEmailLogin?: boolean;
+    /**
+     * Whether or not to allow for phone login. If true, only OAuth login will be available.
+     * Defaults to `false`.
+     */
+    disablePhoneLogin?: boolean;
+    /**
+     * Theming to be used throughout the modal.
+     */
+    theme?: ParaModalTheme;
+    /**
+     * Logo to be shown throughout the modal.
+     */
+    logo?: string;
+    /**
+     * Whether or not to run configured on-ramp providers in test mode.
+     */
+    onRampTestMode?: boolean;
+    /**
+     * Whether to display information about on-chain wallets and use related terminology in the Para Modal.
+     */
+    hideWallets?: boolean;
+    currentStepOverride?: ModalStepProp | undefined;
+    /**
+     * Whether or not to display just the modal without the overlay component.
+     * Useful for rendering the modal inside a custom component
+     * Defaults to `false`
+     */
+    bareModal?: boolean;
+    /**
+     * Whether or not to use the embedded modal styling
+     * This is typically only used internally by Para and may result in unwanted styling!
+     */
+    embeddedModal?: boolean;
+    className?: string;
+    /**
+     * How the modal should order the components on the main auth screen.
+     * Only the first method of each type (auth or external) will be used.
+     * Default to [AuthLayout.AUTH_FULL, AuthLayout.EXTERNAL_FULL]
+     */
+    authLayout?: TAuthLayout[];
+    /**
+     * Default email or phone number (formatted like: +15555555555) to pre-populate the input field.
+     */
+    defaultAuthIdentifier?: string;
+    /**
+     * Called when the modal step changes
+     */
+    onModalStepChange?: (value: OnModalStepChangeValue) => void;
+    /**
+     * Called when the modal is closed
+     */
+    onClose?: () => void;
+    /**
+     * Whether to enable guest login. A guest user will be provisioned embedded wallets that they will then claim upon signing up through your app.
+     */
+    isGuestModeEnabled?: boolean;
+    loginTransitionOverride?: (para: ParaWeb) => Promise<void>;
+    createWalletOverride?: (para: ParaWeb) => Promise<{
+        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/types/modalProps.js

@@ -0,0 +1,12 @@
+"use client";
+import "../../chunk-MMUBH76A.js";
+var AuthLayout = /* @__PURE__ */ ((AuthLayout2) => {
+  AuthLayout2["AUTH_FULL"] = "AUTH:FULL";
+  AuthLayout2["AUTH_CONDENSED"] = "AUTH:CONDENSED";
+  AuthLayout2["EXTERNAL_FULL"] = "EXTERNAL:FULL";
+  AuthLayout2["EXTERNAL_CONDENSED"] = "EXTERNAL:CONDENSED";
+  return AuthLayout2;
+})(AuthLayout || {});
+export {
+  AuthLayout
+};

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

@@ -0,0 +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(auth: Auth<'email' | 'phone'>): Auth<'email' | 'phone'>;
+export declare function validateInput(identifier: string, countryCode?: string, type?: 'email' | 'phone'): Auth<"email" | "phone">;