@magic-ext/magic-widget 1.0.0-canary.979.21008432451.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/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,4 +1,4 @@
-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' | '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 {
@@ -59,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/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>;

package/dist/es/index.mjs

@@ -13943,14 +13943,17 @@ const ProviderButton = ({ label, Icon, onPress, hideLabel }) => {
             !hideLabel && label && (React__default.createElement(M$8, { fontWeight: "medium", styles: { lineHeight: '1.5rem' } }, label)))));
 };
 
-var ThirdPartyWallets;
-(function (ThirdPartyWallets) {
-    ThirdPartyWallets["METAMASK"] = "metamask";
-    ThirdPartyWallets["WALLETCONNECT"] = "walletconnect";
-    ThirdPartyWallets["COINBASE"] = "coinbase";
-    ThirdPartyWallets["PHANTOM"] = "phantom";
-    ThirdPartyWallets["RABBY"] = "rabby";
-})(ThirdPartyWallets || (ThirdPartyWallets = {}));
+/**
+ * Available third-party wallet providers.
+ * Use these constants or pass string literals directly: 'metamask', 'coinbase', etc.
+ */
+const ThirdPartyWallets = {
+    METAMASK: 'metamask',
+    WALLETCONNECT: 'walletconnect',
+    COINBASE: 'coinbase',
+    PHANTOM: 'phantom',
+    RABBY: 'rabby',
+};
 var RpcErrorMessage;
 (function (RpcErrorMessage) {
     RpcErrorMessage["MalformedEmail"] = "Invalid params: Please provide a valid email address.";
@@ -14355,8 +14358,48 @@ class MagicWidgetExtension extends Extension.Internal {
     }
 }
 
+const WidgetConfigContext = createContext(null);
+function WidgetConfigProvider({ children, wallets = [], onSuccess, onError, onClose, closeOnSuccess = false, }) {
+    const handleSuccess = useCallback((result) => {
+        onSuccess?.(result);
+        if (closeOnSuccess && onClose) {
+            // Delay closing so users can see the success screen
+            setTimeout(() => {
+                onClose();
+            }, 2000);
+        }
+    }, [onSuccess, closeOnSuccess, onClose]);
+    const handleError = useCallback((error) => {
+        onError?.(error);
+    }, [onError]);
+    const handleClose = onClose
+        ? () => {
+            onClose();
+        }
+        : undefined;
+    const value = {
+        wallets,
+        handleSuccess,
+        handleError,
+        handleClose,
+    };
+    return React__default.createElement(WidgetConfigContext.Provider, { value: value }, children);
+}
+/**
+ * Hook to access the widget configuration
+ * @throws Error if used outside of WidgetConfigProvider
+ */
+function useWidgetConfig() {
+    const context = useContext(WidgetConfigContext);
+    if (!context) {
+        throw new Error('useWidgetConfig must be used within a WidgetConfigProvider');
+    }
+    return context;
+}
+
 const EmailLoginContext = createContext(null);
 function EmailLoginProvider({ children, dispatch }) {
+    const { handleSuccess, handleError } = useWidgetConfig();
     // Store the current login handle
     const handleRef = useRef(null);
     const emailRef = useRef(null);
@@ -14435,19 +14478,24 @@ function EmailLoginProvider({ children, dispatch }) {
                 .then(didToken => {
                 if (didToken) {
                     dispatch({ type: 'LOGIN_SUCCESS' });
+                    handleSuccess({ method: 'email', didToken });
                 }
             })
                 .catch(error => {
-                dispatch({ type: 'LOGIN_ERROR', error: error?.message || 'Login failed' });
+                const errorInstance = error instanceof Error ? error : new Error(error?.message || 'Login failed');
+                dispatch({ type: 'LOGIN_ERROR', error: errorInstance.message });
+                handleError(errorInstance);
             });
         }
         catch (error) {
+            const errorInstance = error instanceof Error ? error : new Error('Failed to start login');
             dispatch({
                 type: 'LOGIN_ERROR',
-                error: error instanceof Error ? error.message : 'Failed to start login',
+                error: errorInstance.message,
             });
+            handleError(errorInstance);
         }
-    }, [dispatch]);
+    }, [dispatch, handleSuccess, handleError]);
     /**
      * Submit OTP code for verification
      */
@@ -14596,10 +14644,7 @@ const SocialProviders = ({ providers, onPress, dispatch }) => {
 };
 
 function WidgetHeader({ showHeaderText = true, onPressBack }) {
-    const handleClose = () => {
-        // TODO: Need to determine what this behavior should be/if it should exist at all
-        console.log('Close widget');
-    };
+    const { handleClose } = useWidgetConfig();
     return (React__default.createElement(u$3, { position: "relative" },
         !!onPressBack && (React__default.createElement(u$3.LeftAction, null,
             React__default.createElement(Q$2, { size: "sm", variant: "neutral", onPress: onPressBack },
@@ -14607,19 +14652,19 @@ function WidgetHeader({ showHeaderText = true, onPressBack }) {
                     React__default.createElement(s$6, null))))),
         showHeaderText && (React__default.createElement(u$3.Content, null,
             React__default.createElement(M$8, { size: "sm", fontColor: "text.tertiary" }, "Log in or sign up"))),
-        React__default.createElement(u$3.RightAction, null,
+        handleClose && (React__default.createElement(u$3.RightAction, null,
             React__default.createElement(Q$2, { size: "sm", variant: "neutral", onPress: handleClose },
                 React__default.createElement(Q$2.TrailingIcon, null,
-                    React__default.createElement(c$a, null))))));
+                    React__default.createElement(c$a, null)))))));
 }
 
 const LoginView = ({ dispatch }) => {
     const config = getExtensionInstance().getConfig();
+    const { wallets } = useWidgetConfig();
     const { primary, social } = config?.authProviders ?? {};
     const hasEmailProvider = primary?.includes('email');
     const socialProviders = social?.map(provider => provider) ?? [];
-    const enabledWalletProviders = Object.values(ThirdPartyWallets).filter(provider => provider !== ThirdPartyWallets.WALLETCONNECT);
-    const showDivider = socialProviders.length > 0 && enabledWalletProviders.length > 0;
+    const showDivider = (hasEmailProvider || socialProviders.length > 0) && wallets.length > 0;
     const handleProviderSelect = (provider) => {
         dispatch({ type: 'SELECT_WALLET', provider });
     };
@@ -14637,7 +14682,7 @@ const LoginView = ({ dispatch }) => {
                     React__default.createElement(Divider, { color: "surface.quaternary" }),
                     React__default.createElement(M$8, { "aria-label": "or", fontColor: "text.tertiary" }, "or"),
                     React__default.createElement(Divider, { color: "surface.quaternary" }))),
-                enabledWalletProviders.length > 0 && (React__default.createElement(HStack, { gap: 2, w: "full" }, enabledWalletProviders.map(provider => (React__default.createElement(ProviderButton, { key: provider, hideLabel: enabledWalletProviders.length > 1, label: WALLET_METADATA[provider].displayName, Icon: WALLET_METADATA[provider].Icon, onPress: () => handleProviderSelect(provider) })))))))));
+                wallets.length > 0 && (React__default.createElement(Flex, { gap: 2, w: "full", direction: showDivider ? 'row' : 'column', justify: "center" }, wallets.map(provider => (React__default.createElement(ProviderButton, { key: provider, hideLabel: wallets.length > 1 && showDivider, label: WALLET_METADATA[provider].displayName, Icon: WALLET_METADATA[provider].Icon, onPress: () => handleProviderSelect(provider) })))))))));
 };
 
 function getProviderConfig(provider) {
@@ -14659,7 +14704,7 @@ function getProviderConfig(provider) {
 }
 
 /**
- * Map ThirdPartyWallets enum to wagmi connector IDs
+ * Map wallet types to wagmi connector IDs
  */
 const CONNECTOR_IDS = {
     [ThirdPartyWallets.METAMASK]: 'metaMaskSDK',
@@ -14747,15 +14792,16 @@ function useWalletConnect(provider) {
 function useSiweLogin() {
     const { signMessageAsync } = useSignMessage();
     const connectedChainId = useChainId();
+    const { handleSuccess, handleError } = useWidgetConfig();
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const [isSuccess, setIsSuccess] = useState(false);
-    const [publicAddress, setPublicAddress] = useState(null);
+    const [walletAddress, setWalletAddress] = useState(null);
     const performSiweLogin = useCallback(async (address, chainId) => {
         setIsLoading(true);
         setError(null);
         setIsSuccess(false);
-        setPublicAddress(null);
+        setWalletAddress(null);
         try {
             const extension = getExtensionInstance();
             const effectiveChainId = chainId || connectedChainId || 1;
@@ -14767,28 +14813,30 @@ function useSiweLogin() {
             // Step 2: Sign the message with the connected wallet
             const signature = await signMessageAsync({ message });
             // Step 3: Send the signed message to Magic backend for verification
-            const publicAddress = await extension.login({ message, signature });
+            await extension.login({ message, signature });
             // Step 4: Set up the connected state for 3rd party wallet RPC routing
             // This enables signing requests to be routed through the connected wallet
             extension.setConnectedState(address, effectiveChainId);
             setIsSuccess(true);
-            setPublicAddress(publicAddress);
+            setWalletAddress(address);
             setIsLoading(false);
-            return publicAddress;
+            handleSuccess({ method: 'wallet', walletAddress: address });
+            return address;
         }
         catch (err) {
             const errorInstance = err instanceof Error ? err : new Error('SIWE login failed');
             setError(errorInstance);
             setIsLoading(false);
+            handleError(errorInstance);
             throw errorInstance;
         }
-    }, [signMessageAsync, connectedChainId]);
+    }, [signMessageAsync, connectedChainId, handleSuccess, handleError]);
     return {
         performSiweLogin,
         isLoading,
         error,
         isSuccess,
-        publicAddress,
+        walletAddress,
     };
 }
 
@@ -14800,7 +14848,7 @@ const centeredIconClass = css({
 });
 const Pending = ({ onPressBack, title, description, Icon, isPending, errorMessage }) => {
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(WidgetHeader, { onPressBack: onPressBack, showHeaderText: false }),
+        React__default.createElement(WidgetHeader, { onPressBack: isPending ? onPressBack : undefined, showHeaderText: false }),
         React__default.createElement(VStack, { gap: 6, pt: 4 },
             React__default.createElement(Box, { position: "relative", h: 20, w: 20 },
                 isPending && React__default.createElement(d$m, { size: 80, strokeWidth: 8, neutral: true, progress: 40 }),
@@ -15043,6 +15091,7 @@ function widgetReducer(state, action) {
 }
 
 function useOAuthLogin() {
+    const { handleSuccess, handleError } = useWidgetConfig();
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const [isSuccess, setIsSuccess] = useState(false);
@@ -15058,15 +15107,26 @@ function useOAuthLogin() {
             setIsSuccess(true);
             setResult(oauthResult);
             setIsLoading(false);
+            handleSuccess({
+                method: 'oauth',
+                didToken: oauthResult.magic.idToken,
+                oauth: {
+                    provider: oauthResult.oauth.provider,
+                    name: oauthResult.oauth.userInfo.name,
+                    email: oauthResult.oauth.userInfo.email,
+                    picture: oauthResult.oauth.userInfo.picture,
+                },
+            });
             return oauthResult;
         }
         catch (err) {
             const errorInstance = err instanceof Error ? err : new Error('OAuth login failed');
             setError(errorInstance);
             setIsLoading(false);
+            handleError(errorInstance);
             throw errorInstance;
         }
-    }, []);
+    }, [handleSuccess, handleError]);
     return {
         performOAuthLogin,
         isLoading,
@@ -15351,30 +15411,82 @@ function WidgetContent({ state, dispatch }) {
                 renderView(),
                 React__default.createElement(c$5, null)))));
 }
-// Main widget component - no props needed, everything is internal
-function MagicWidget() {
+// Styles for modal mode
+const modalBackdropStyles = {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backdropFilter: 'blur(0.375rem)',
+    WebkitBackdropFilter: 'blur(0.375rem)', // Safari support
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    paddingTop: '15vh', // Slightly above center
+    zIndex: 9999,
+};
+const modalContentStyles = {
+    position: 'relative',
+};
+// Main widget component
+function MagicWidget({ displayMode = 'inline', isOpen = true, onClose, closeOnSuccess = false, closeOnClickOutside = false, wallets = [], onSuccess, onError, }) {
     const [state, dispatch] = useReducer(widgetReducer, initialState);
-    const [isConfigLoading, setIsConfigLoading] = useState(true);
+    // Check if config is already cached to avoid unnecessary loading state
+    const [isConfigLoading, setIsConfigLoading] = useState(() => {
+        return getExtensionInstance().getConfig() === null;
+    });
     useEffect(() => {
         injectCSS();
-        getExtensionInstance()
-            .fetchConfig()
-            .then(() => setIsConfigLoading(false))
-            .catch(err => {
-            console.error('Failed to fetch config:', err);
-            setIsConfigLoading(false); // Still show widget on error
-        });
-    }, []);
+        // Only fetch if not already cached
+        if (isConfigLoading) {
+            getExtensionInstance()
+                .fetchConfig()
+                .then(() => setIsConfigLoading(false))
+                .catch(err => {
+                console.error('Failed to fetch config:', err);
+                setIsConfigLoading(false); // Still show widget on error
+            });
+        }
+    }, [isConfigLoading]);
+    // Reset to login view when modal is opened
+    useEffect(() => {
+        if (isOpen) {
+            dispatch({ type: 'GO_TO_LOGIN' });
+        }
+    }, [isOpen]);
+    if (!isOpen) {
+        return null;
+    }
+    const isModal = displayMode === 'modal';
+    // Handle backdrop click for closeOnClickOutside
+    const handleBackdropClick = (e) => {
+        // Only close if clicking the backdrop itself, not the content
+        if (closeOnClickOutside && e.target === e.currentTarget && onClose) {
+            onClose();
+        }
+    };
     if (isConfigLoading) {
-        return (React__default.createElement(r$3, null,
+        const loadingContent = (React__default.createElement(r$3, null,
             React__default.createElement(VStack, { alignItems: "center", justifyContent: "center", height: "300px" },
                 React__default.createElement(d$m, null))));
+        if (isModal) {
+            return (React__default.createElement("div", { style: modalBackdropStyles, onClick: handleBackdropClick },
+                React__default.createElement("div", { style: modalContentStyles }, loadingContent)));
+        }
+        return loadingContent;
+    }
+    const widgetContent = (React__default.createElement(WidgetConfigProvider, { wallets: wallets, onSuccess: onSuccess, onError: onError, onClose: onClose, closeOnSuccess: closeOnSuccess },
+        React__default.createElement(WagmiProvider, { config: wagmiConfig },
+            React__default.createElement(QueryClientProvider, { client: queryClient },
+                React__default.createElement("div", { id: "magic-widget-container" },
+                    React__default.createElement(WidgetContent, { state: state, dispatch: dispatch }))))));
+    if (isModal) {
+        return (React__default.createElement("div", { style: modalBackdropStyles, onClick: handleBackdropClick },
+            React__default.createElement("div", { style: modalContentStyles }, widgetContent)));
     }
-    return (React__default.createElement(WagmiProvider, { config: wagmiConfig },
-        React__default.createElement(QueryClientProvider, { client: queryClient },
-            React__default.createElement("div", { id: "magic-widget-container" },
-                React__default.createElement(WidgetContent, { state: state, dispatch: dispatch })))));
+    return widgetContent;
 }
 
-export { MAGIC_WIDGET_PROVIDER, MagicWidget, MagicWidgetExtension, getExtensionInstance };
+export { MAGIC_WIDGET_PROVIDER, MagicWidget, MagicWidgetExtension, OAuthProvider, ThirdPartyWallets, getExtensionInstance };
 //# sourceMappingURL=index.mjs.map