@magic-ext/magic-widget 1.0.0-canary.979.20968799405.0 → 1.0.0-canary.979.21048249937.0

package/dist/cjs/types/MagicWidget.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
-export declare function MagicWidget(): React.JSX.Element;
+import { MagicWidgetProps } from './types';
+export declare function MagicWidget({ displayMode, isOpen, onClose, closeOnSuccess, closeOnClickOutside, wallets, onSuccess, onError, }: MagicWidgetProps): React.JSX.Element | null;

package/dist/cjs/types/constants.d.ts

@@ -1,3 +1,3 @@
-import { OAuthProvider, ProviderMetadata, ThirdPartyWallets } from './types';
-export declare const WALLET_METADATA: Record<ThirdPartyWallets, ProviderMetadata>;
+import { OAuthProvider, ProviderMetadata, ThirdPartyWallet } from './types';
+export declare const WALLET_METADATA: Record<ThirdPartyWallet, ProviderMetadata>;
 export declare const OAUTH_METADATA: Record<OAuthProvider, ProviderMetadata>;

package/dist/cjs/types/context/WidgetConfigContext.d.ts

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+import { LoginResult, MagicWidgetProps, ThirdPartyWallet } from '../types';
+interface WidgetConfigContextValue {
+    /** Third-party wallets to display */
+    wallets: ThirdPartyWallet[];
+    /** Call when login succeeds */
+    handleSuccess: (result: LoginResult) => void;
+    /** Call when login fails */
+    handleError: (error: Error) => void;
+    /** Call to close the widget. Undefined if onClose prop wasn't provided. */
+    handleClose?: () => void;
+}
+interface WidgetConfigProviderProps extends MagicWidgetProps {
+    children: ReactNode;
+}
+export declare function WidgetConfigProvider({ children, wallets, onSuccess, onError, onClose, closeOnSuccess, }: WidgetConfigProviderProps): React.JSX.Element;
+/**
+ * Hook to access the widget configuration
+ * @throws Error if used outside of WidgetConfigProvider
+ */
+export declare function useWidgetConfig(): WidgetConfigContextValue;
+export {};

package/dist/cjs/types/context/index.d.ts

@@ -1 +1,2 @@
 export { EmailLoginProvider, useEmailLogin } from './EmailLoginContext';
+export { WidgetConfigProvider, useWidgetConfig } from './WidgetConfigContext';

package/dist/cjs/types/extension.d.ts

@@ -158,6 +158,7 @@ export declare class MagicWidgetExtension extends Extension.Internal<'magicWidge
         "recovery-code-sent-handle": () => void;
         "invalid-recovery-code": () => void;
         "recovery-code-success": () => void;
+        "max-attempts-reached": () => void;
         "Auth/id-token-created": (idToken: string) => void;
         "Wallet/wallet-info-fetched": () => void;
         "verify-email-otp": (otp: string) => void;

package/dist/cjs/types/hooks/useSiweLogin.d.ts

@@ -3,6 +3,6 @@ export interface UseSiweLoginResult {
     isLoading: boolean;
     error: Error | null;
     isSuccess: boolean;
-    publicAddress: string | null;
+    walletAddress: string | null;
 }
 export declare function useSiweLogin(): UseSiweLoginResult;

package/dist/cjs/types/hooks/useWalletConnect.d.ts

@@ -1,4 +1,4 @@
-import { ThirdPartyWallets } from '../types';
+import { ThirdPartyWallet } from '../types';
 export interface UseWalletConnectResult {
     connectWallet: () => Promise<void>;
     isPending: boolean;
@@ -9,4 +9,4 @@ export interface UseWalletConnectResult {
     isConnectedToSelectedProvider: boolean;
     disconnect: () => void;
 }
-export declare function useWalletConnect(provider: ThirdPartyWallets): UseWalletConnectResult;
+export declare function useWalletConnect(provider: ThirdPartyWallet): UseWalletConnectResult;

package/dist/cjs/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './MagicWidget';
 export * from './extension';
+export { ThirdPartyWallets, OAuthProvider, type ThirdPartyWallet, type DisplayMode, type MagicWidgetProps, type LoginResult, type EmailLoginResult, type OAuthLoginResult, type WalletLoginResult, type OAuthUserInfo, } from './types';

package/dist/cjs/types/reducer.d.ts

@@ -1,6 +1,6 @@
-import { LoginProvider, OAuthProvider, ThirdPartyWallets } from './types';
+import { LoginProvider, OAuthProvider, ThirdPartyWallet } from './types';
 export type View = 'login' | 'otp' | 'additional_providers' | 'wallet_pending' | 'oauth_pending' | 'email_otp_pending' | 'device_verification' | 'mfa_pending' | 'recovery_code' | 'lost_recovery_code' | 'login_success';
-export type EmailLoginStatus = 'idle' | 'sending' | 'otp_sent' | 'verifying_otp' | 'invalid_otp' | 'expired_otp' | 'device_needs_approval' | 'device_verification_sent' | 'device_verification_expired' | 'device_approved' | 'mfa_required' | 'recovery_code' | 'success' | 'mfa_verifying' | 'mfa_invalid' | 'recovery_code_verifying' | 'lost_recovery_code' | 'error';
+export type EmailLoginStatus = 'idle' | 'sending' | 'otp_sent' | 'verifying_otp' | 'invalid_otp' | 'expired_otp' | 'max_attempts_reached' | 'device_needs_approval' | 'device_verification_sent' | 'device_verification_expired' | 'device_approved' | 'mfa_required' | 'recovery_code' | 'success' | 'mfa_verifying' | 'mfa_invalid' | 'recovery_code_verifying' | 'lost_recovery_code' | 'error';
 export interface WidgetState {
     view: View;
     email?: string;
@@ -19,6 +19,8 @@ export type WidgetAction = {
     type: 'EMAIL_OTP_INVALID';
 } | {
     type: 'EMAIL_OTP_EXPIRED';
+} | {
+    type: 'EMAIL_OTP_MAX_ATTEMPTS_REACHED';
 } | {
     type: 'EMAIL_OTP_VERIFYING';
 } | {
@@ -39,6 +41,8 @@ export type WidgetAction = {
     type: 'LOST_DEVICE';
 } | {
     type: 'RECOVERY_CODE_VERIFYING';
+} | {
+    type: 'RECOVERY_CODE_INVALID';
 } | {
     type: 'LOST_RECOVERY_CODE';
 } | {
@@ -55,7 +59,7 @@ export type WidgetAction = {
     type: 'GO_TO_ADDITIONAL_PROVIDERS';
 } | {
     type: 'SELECT_WALLET';
-    provider: ThirdPartyWallets;
+    provider: ThirdPartyWallet;
 };
 export declare const initialState: WidgetState;
 export declare function widgetReducer(state: WidgetState, action: WidgetAction): WidgetState;

package/dist/cjs/types/types.d.ts

@@ -1,11 +1,17 @@
 import { ComponentType } from 'react';
-export declare enum ThirdPartyWallets {
-    METAMASK = "metamask",
-    WALLETCONNECT = "walletconnect",
-    COINBASE = "coinbase",
-    PHANTOM = "phantom",
-    RABBY = "rabby"
-}
+/**
+ * Available third-party wallet providers.
+ * Use these constants or pass string literals directly: 'metamask', 'coinbase', etc.
+ */
+export declare const ThirdPartyWallets: {
+    readonly METAMASK: "metamask";
+    readonly WALLETCONNECT: "walletconnect";
+    readonly COINBASE: "coinbase";
+    readonly PHANTOM: "phantom";
+    readonly RABBY: "rabby";
+};
+/** Type representing valid third-party wallet values */
+export type ThirdPartyWallet = (typeof ThirdPartyWallets)[keyof typeof ThirdPartyWallets];
 export interface ProviderMetadata {
     displayName: string;
     Icon: ComponentType<{
@@ -32,7 +38,7 @@ export declare enum OAuthProvider {
     GITLAB = "gitlab",
     TELEGRAM = "telegram"
 }
-export type LoginProvider = OAuthProvider | ThirdPartyWallets;
+export type LoginProvider = OAuthProvider | ThirdPartyWallet;
 export interface ProviderConfig {
     title: string;
     description: string;
@@ -42,3 +48,114 @@ export interface ProviderConfig {
         className?: string;
     }>;
 }
+/**
+ * OAuth user information returned from social login
+ */
+export interface OAuthUserInfo {
+    /** The OAuth provider used (e.g., 'google', 'apple') */
+    provider: string;
+    name?: string;
+    email?: string;
+    picture?: string;
+    [key: string]: unknown;
+}
+/**
+ * Result returned on successful email login
+ */
+export interface EmailLoginResult {
+    method: 'email';
+    /** The DID token for authentication */
+    didToken: string;
+}
+/**
+ * Result returned on successful OAuth login
+ */
+export interface OAuthLoginResult {
+    method: 'oauth';
+    /** The DID token for authentication */
+    didToken: string;
+    /** OAuth provider information */
+    oauth: OAuthUserInfo;
+}
+/**
+ * Result returned on successful wallet login
+ */
+export interface WalletLoginResult {
+    method: 'wallet';
+    /** The connected wallet address */
+    walletAddress: string;
+}
+/**
+ * Discriminated union of all login result types.
+ * Check the `method` property to determine which fields are available.
+ *
+ * @example
+ * onSuccess={(result) => {
+ *   if (result.method === 'email' || result.method === 'oauth') {
+ *     sendToBackend(result.didToken);
+ *   } else {
+ *     console.log('Wallet:', result.walletAddress);
+ *   }
+ * }}
+ */
+export type LoginResult = EmailLoginResult | OAuthLoginResult | WalletLoginResult;
+/**
+ * How the widget is displayed on the page.
+ * - 'inline': Rendered in the document flow (default)
+ * - 'modal': Positioned as a modal dialog, slightly above center
+ */
+export type DisplayMode = 'inline' | 'modal';
+export interface MagicWidgetProps {
+    /**
+     * How the widget is displayed on the page. Defaults to 'inline'.
+     * - 'inline': Rendered in the document flow
+     * - 'modal': Positioned as a modal dialog with backdrop
+     * @example displayMode="modal"
+     */
+    displayMode?: DisplayMode;
+    /**
+     * Whether the widget modal is open. Defaults to true.
+     * @example isOpen={showLogin}
+     */
+    isOpen?: boolean;
+    /**
+     * Callback fired when the widget is closed (e.g., user clicks X button).
+     * @example onClose={() => setShowLogin(false)}
+     */
+    onClose?: () => void;
+    /**
+     * Automatically call onClose after successful login (with a 2 second delay to show success screen).
+     * Defaults to false.
+     * @example closeOnSuccess={true}
+     */
+    closeOnSuccess?: boolean;
+    /**
+     * Close the modal when clicking the backdrop. Only applies when displayMode="modal".
+     * Defaults to false.
+     * @example closeOnClickOutside={true}
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Third-party wallets to display. None enabled by default.
+     * Accepts constants or string literals: 'metamask', 'walletconnect', 'coinbase', 'phantom', 'rabby'
+     * @example wallets={['metamask', 'coinbase']}
+     * @example wallets={[ThirdPartyWallets.METAMASK, ThirdPartyWallets.COINBASE]}
+     */
+    wallets?: ThirdPartyWallet[];
+    /**
+     * Callback fired when login succeeds.
+     * The result type varies by login method - check `result.method` to determine the shape.
+     * @example
+     * onSuccess={(result) => {
+     *   if (result.method === 'email' || result.method === 'oauth') {
+     *     authenticate(result.didToken);
+     *   }
+     * }}
+     */
+    onSuccess?: (result: LoginResult) => void;
+    /**
+     * Callback fired when login fails
+     * @example onError={(error) => console.error(error.message)}
+     */
+    onError?: (error: Error) => void;
+}

package/dist/cjs/types/views/LostRecoveryCode.d.ts

@@ -1,2 +1,5 @@
 import React from 'react';
-export declare const LostRecoveryCode: () => React.JSX.Element;
+import { WidgetAction } from 'src/reducer';
+export declare const LostRecoveryCode: ({ dispatch }: {
+    dispatch: React.Dispatch<WidgetAction>;
+}) => React.JSX.Element;

package/dist/cjs/types/views/WalletPendingView.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { WidgetAction } from '../reducer';
-import { ThirdPartyWallets } from '../types';
+import { ThirdPartyWallet } from '../types';
 interface WalletPendingViewProps {
-    provider: ThirdPartyWallets;
+    provider: ThirdPartyWallet;
     dispatch: React.Dispatch<WidgetAction>;
 }
 export declare const WalletPendingView: ({ provider, dispatch }: WalletPendingViewProps) => React.JSX.Element;

package/dist/cjs/types/wagmi/connectors.d.ts

@@ -1,9 +1,9 @@
-import { ThirdPartyWallets } from '../types';
+import { ThirdPartyWallet } from '../types';
 /**
- * Map ThirdPartyWallets enum to wagmi connector IDs
+ * Map wallet types to wagmi connector IDs
  */
-export declare const CONNECTOR_IDS: Record<ThirdPartyWallets, string>;
+export declare const CONNECTOR_IDS: Record<ThirdPartyWallet, string>;
 /**
  * Alternative names to match connectors by name if ID doesn't match
  */
-export declare const CONNECTOR_NAME_PATTERNS: Record<ThirdPartyWallets, string>;
+export declare const CONNECTOR_NAME_PATTERNS: Record<ThirdPartyWallet, string>;