@magic-ext/magic-widget 1.0.0-canary.979.21008432451.0 → 1.0.0-canary.979.21085311128.0

package/dist/cjs/index.js

@@ -13963,20 +13963,23 @@ const ProviderButton = ({ label, Icon, onPress, hideLabel }) => {
             !hideLabel && label && (React.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.";
     RpcErrorMessage["SanEmail"] = "We are unable to create an account with that email.";
 })(RpcErrorMessage || (RpcErrorMessage = {}));
-var OAuthProvider;
+exports.OAuthProvider = void 0;
 (function (OAuthProvider) {
     OAuthProvider["GOOGLE"] = "google";
     OAuthProvider["APPLE"] = "apple";
@@ -13990,7 +13993,7 @@ var OAuthProvider;
     OAuthProvider["DISCORD"] = "discord";
     OAuthProvider["GITLAB"] = "gitlab";
     OAuthProvider["TELEGRAM"] = "telegram";
-})(OAuthProvider || (OAuthProvider = {}));
+})(exports.OAuthProvider || (exports.OAuthProvider = {}));
 
 const WALLET_METADATA = {
     [ThirdPartyWallets.WALLETCONNECT]: { displayName: 'WalletConnect', Icon: e },
@@ -14000,18 +14003,18 @@ const WALLET_METADATA = {
     [ThirdPartyWallets.RABBY]: { displayName: 'Rabby', Icon: r },
 };
 const OAUTH_METADATA = {
-    [OAuthProvider.GOOGLE]: { displayName: 'Google', Icon: L$2 },
-    [OAuthProvider.APPLE]: { displayName: 'Apple', Icon: d$4 },
-    [OAuthProvider.FACEBOOK]: { displayName: 'Facebook', Icon: a },
-    [OAuthProvider.GITHUB]: { displayName: 'GitHub', Icon: d$2 },
-    [OAuthProvider.TWITTER]: { displayName: 'Twitter', Icon: r$1 },
-    [OAuthProvider.LINKEDIN]: { displayName: 'LinkedIn', Icon: n$1 },
-    [OAuthProvider.MICROSOFT]: { displayName: 'Microsoft', Icon: d$1 },
-    [OAuthProvider.TWITCH]: { displayName: 'Twitch', Icon: H$1 },
-    [OAuthProvider.BITBUCKET]: { displayName: 'Bitbucket', Icon: n$2 },
-    [OAuthProvider.DISCORD]: { displayName: 'Discord', Icon: d$3 },
-    [OAuthProvider.GITLAB]: { displayName: 'GitLab', Icon: e$1 },
-    [OAuthProvider.TELEGRAM]: { displayName: 'Telegram', Icon: r$2 },
+    [exports.OAuthProvider.GOOGLE]: { displayName: 'Google', Icon: L$2 },
+    [exports.OAuthProvider.APPLE]: { displayName: 'Apple', Icon: d$4 },
+    [exports.OAuthProvider.FACEBOOK]: { displayName: 'Facebook', Icon: a },
+    [exports.OAuthProvider.GITHUB]: { displayName: 'GitHub', Icon: d$2 },
+    [exports.OAuthProvider.TWITTER]: { displayName: 'Twitter', Icon: r$1 },
+    [exports.OAuthProvider.LINKEDIN]: { displayName: 'LinkedIn', Icon: n$1 },
+    [exports.OAuthProvider.MICROSOFT]: { displayName: 'Microsoft', Icon: d$1 },
+    [exports.OAuthProvider.TWITCH]: { displayName: 'Twitch', Icon: H$1 },
+    [exports.OAuthProvider.BITBUCKET]: { displayName: 'Bitbucket', Icon: n$2 },
+    [exports.OAuthProvider.DISCORD]: { displayName: 'Discord', Icon: d$3 },
+    [exports.OAuthProvider.GITLAB]: { displayName: 'GitLab', Icon: e$1 },
+    [exports.OAuthProvider.TELEGRAM]: { displayName: 'Telegram', Icon: r$2 },
 };
 
 /**
@@ -14375,8 +14378,48 @@ class MagicWidgetExtension extends provider.Extension.Internal {
     }
 }
 
+const WidgetConfigContext = React.createContext(null);
+function WidgetConfigProvider({ children, wallets = [], onSuccess, onError, onClose, closeOnSuccess = false, }) {
+    const handleSuccess = React.useCallback((result) => {
+        onSuccess?.(result);
+        if (closeOnSuccess && onClose) {
+            // Delay closing so users can see the success screen
+            setTimeout(() => {
+                onClose();
+            }, 2000);
+        }
+    }, [onSuccess, closeOnSuccess, onClose]);
+    const handleError = React.useCallback((error) => {
+        onError?.(error);
+    }, [onError]);
+    const handleClose = onClose
+        ? () => {
+            onClose();
+        }
+        : undefined;
+    const value = {
+        wallets,
+        handleSuccess,
+        handleError,
+        handleClose,
+    };
+    return React.createElement(WidgetConfigContext.Provider, { value: value }, children);
+}
+/**
+ * Hook to access the widget configuration
+ * @throws Error if used outside of WidgetConfigProvider
+ */
+function useWidgetConfig() {
+    const context = React.useContext(WidgetConfigContext);
+    if (!context) {
+        throw new Error('useWidgetConfig must be used within a WidgetConfigProvider');
+    }
+    return context;
+}
+
 const EmailLoginContext = React.createContext(null);
 function EmailLoginProvider({ children, dispatch }) {
+    const { handleSuccess, handleError } = useWidgetConfig();
     // Store the current login handle
     const handleRef = React.useRef(null);
     const emailRef = React.useRef(null);
@@ -14455,19 +14498,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
      */
@@ -14616,10 +14664,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.createElement(u$3, { position: "relative" },
         !!onPressBack && (React.createElement(u$3.LeftAction, null,
             React.createElement(Q$2, { size: "sm", variant: "neutral", onPress: onPressBack },
@@ -14627,19 +14672,19 @@ function WidgetHeader({ showHeaderText = true, onPressBack }) {
                     React.createElement(s$6, null))))),
         showHeaderText && (React.createElement(u$3.Content, null,
             React.createElement(M$8, { size: "sm", fontColor: "text.tertiary" }, "Log in or sign up"))),
-        React.createElement(u$3.RightAction, null,
+        handleClose && (React.createElement(u$3.RightAction, null,
             React.createElement(Q$2, { size: "sm", variant: "neutral", onPress: handleClose },
                 React.createElement(Q$2.TrailingIcon, null,
-                    React.createElement(c$a, null))))));
+                    React.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 });
     };
@@ -14657,11 +14702,11 @@ const LoginView = ({ dispatch }) => {
                     React.createElement(Divider, { color: "surface.quaternary" }),
                     React.createElement(M$8, { "aria-label": "or", fontColor: "text.tertiary" }, "or"),
                     React.createElement(Divider, { color: "surface.quaternary" }))),
-                enabledWalletProviders.length > 0 && (React.createElement(HStack, { gap: 2, w: "full" }, enabledWalletProviders.map(provider => (React.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.createElement(Flex, { gap: 2, w: "full", direction: showDivider ? 'row' : 'column', justify: "center" }, wallets.map(provider => (React.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) {
-    const isOAuth = Object.values(OAuthProvider).includes(provider);
+    const isOAuth = Object.values(exports.OAuthProvider).includes(provider);
     const metadata = isOAuth ? OAUTH_METADATA[provider] : WALLET_METADATA[provider];
     const { displayName, Icon } = metadata;
     if (isOAuth) {
@@ -14679,7 +14724,7 @@ function getProviderConfig(provider) {
 }
 
 /**
- * Map ThirdPartyWallets enum to wagmi connector IDs
+ * Map wallet types to wagmi connector IDs
  */
 const CONNECTOR_IDS = {
     [ThirdPartyWallets.METAMASK]: 'metaMaskSDK',
@@ -14767,15 +14812,16 @@ function useWalletConnect(provider) {
 function useSiweLogin() {
     const { signMessageAsync } = wagmi.useSignMessage();
     const connectedChainId = wagmi.useChainId();
+    const { handleSuccess, handleError } = useWidgetConfig();
     const [isLoading, setIsLoading] = React.useState(false);
     const [error, setError] = React.useState(null);
     const [isSuccess, setIsSuccess] = React.useState(false);
-    const [publicAddress, setPublicAddress] = React.useState(null);
+    const [walletAddress, setWalletAddress] = React.useState(null);
     const performSiweLogin = React.useCallback(async (address, chainId) => {
         setIsLoading(true);
         setError(null);
         setIsSuccess(false);
-        setPublicAddress(null);
+        setWalletAddress(null);
         try {
             const extension = getExtensionInstance();
             const effectiveChainId = chainId || connectedChainId || 1;
@@ -14787,28 +14833,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,
     };
 }
 
@@ -14820,7 +14868,7 @@ const centeredIconClass = css({
 });
 const Pending = ({ onPressBack, title, description, Icon, isPending, errorMessage }) => {
     return (React.createElement(React.Fragment, null,
-        React.createElement(WidgetHeader, { onPressBack: onPressBack, showHeaderText: false }),
+        React.createElement(WidgetHeader, { onPressBack: isPending ? onPressBack : undefined, showHeaderText: false }),
         React.createElement(VStack, { gap: 6, pt: 4 },
             React.createElement(Box, { position: "relative", h: 20, w: 20 },
                 isPending && React.createElement(d$m, { size: 80, strokeWidth: 8, neutral: true, progress: 40 }),
@@ -15063,6 +15111,7 @@ function widgetReducer(state, action) {
 }
 
 function useOAuthLogin() {
+    const { handleSuccess, handleError } = useWidgetConfig();
     const [isLoading, setIsLoading] = React.useState(false);
     const [error, setError] = React.useState(null);
     const [isSuccess, setIsSuccess] = React.useState(false);
@@ -15078,15 +15127,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,
@@ -15371,33 +15431,86 @@ function WidgetContent({ state, dispatch }) {
                 renderView(),
                 React.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] = React.useReducer(widgetReducer, initialState);
-    const [isConfigLoading, setIsConfigLoading] = React.useState(true);
+    // Check if config is already cached to avoid unnecessary loading state
+    const [isConfigLoading, setIsConfigLoading] = React.useState(() => {
+        return getExtensionInstance().getConfig() === null;
+    });
     React.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
+    React.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.createElement(r$3, null,
+        const loadingContent = (React.createElement(r$3, null,
             React.createElement(VStack, { alignItems: "center", justifyContent: "center", height: "300px" },
                 React.createElement(d$m, null))));
+        if (isModal) {
+            return (React.createElement("div", { style: modalBackdropStyles, onClick: handleBackdropClick },
+                React.createElement("div", { style: modalContentStyles }, loadingContent)));
+        }
+        return loadingContent;
+    }
+    const widgetContent = (React.createElement(WidgetConfigProvider, { wallets: wallets, onSuccess: onSuccess, onError: onError, onClose: onClose, closeOnSuccess: closeOnSuccess },
+        React.createElement(wagmi.WagmiProvider, { config: wagmiConfig },
+            React.createElement(reactQuery.QueryClientProvider, { client: queryClient },
+                React.createElement("div", { id: "magic-widget-container" },
+                    React.createElement(WidgetContent, { state: state, dispatch: dispatch }))))));
+    if (isModal) {
+        return (React.createElement("div", { style: modalBackdropStyles, onClick: handleBackdropClick },
+            React.createElement("div", { style: modalContentStyles }, widgetContent)));
     }
-    return (React.createElement(wagmi.WagmiProvider, { config: wagmiConfig },
-        React.createElement(reactQuery.QueryClientProvider, { client: queryClient },
-            React.createElement("div", { id: "magic-widget-container" },
-                React.createElement(WidgetContent, { state: state, dispatch: dispatch })))));
+    return widgetContent;
 }
 
 exports.MAGIC_WIDGET_PROVIDER = MAGIC_WIDGET_PROVIDER;
 exports.MagicWidget = MagicWidget;
 exports.MagicWidgetExtension = MagicWidgetExtension;
+exports.ThirdPartyWallets = ThirdPartyWallets;
 exports.getExtensionInstance = getExtensionInstance;
 //# sourceMappingURL=index.js.map