@web3auth/modal 10.14.1 → 11.0.0-beta.0

package/dist/lib.esm/packages/modal/src/react/context/WalletServicesInnerContext.js

@@ -1,66 +1,13 @@
-import { EVM_PLUGINS, CONNECTED_STATUSES, PLUGIN_EVENTS } from '@web3auth/no-modal';
-import { createContext, useContext, useState, useEffect, useMemo, createElement } from 'react';
+import { useWalletServicesContextValue, WalletServicesContext as WalletServicesContext$1 } from '@web3auth/no-modal/react';
+import { useContext, createElement } from 'react';
 
-const WalletServicesContext = /*#__PURE__*/createContext(null);
+const WalletServicesContext = WalletServicesContext$1;
 function WalletServicesContextProvider({
   children,
   context
 }) {
   const web3AuthContext = useContext(context);
-  const {
-    getPlugin,
-    isInitialized,
-    isConnected
-  } = web3AuthContext;
-  const [ready, setReady] = useState(false);
-  const [connecting, setConnecting] = useState(false);
-  const [walletServicesPlugin, setWalletServicesPlugin] = useState(null);
-  useEffect(() => {
-    if (isInitialized) {
-      const plugin = getPlugin(EVM_PLUGINS.WALLET_SERVICES);
-      setWalletServicesPlugin(plugin);
-    }
-  }, [isInitialized, getPlugin]);
-  useEffect(() => {
-    if (isConnected) {
-      const plugin = getPlugin(EVM_PLUGINS.WALLET_SERVICES);
-      setWalletServicesPlugin(plugin);
-      // when rehydrating, the connectedListener may be registered after the connected event is emitted, we need to check the status here
-      if (CONNECTED_STATUSES.includes(plugin === null || plugin === void 0 ? void 0 : plugin.status)) setReady(true);
-    }
-  }, [isConnected, getPlugin, walletServicesPlugin]);
-  useEffect(() => {
-    const connectedListener = () => {
-      setReady(true);
-      setConnecting(false);
-    };
-    const disconnectedListener = () => {
-      setReady(false);
-      setConnecting(false);
-    };
-    const connectingListener = () => {
-      setConnecting(true);
-    };
-    if (walletServicesPlugin) {
-      walletServicesPlugin.on(PLUGIN_EVENTS.CONNECTED, connectedListener);
-      walletServicesPlugin.on(PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
-      walletServicesPlugin.on(PLUGIN_EVENTS.CONNECTING, connectingListener);
-    }
-    return () => {
-      if (walletServicesPlugin) {
-        walletServicesPlugin.removeListener(PLUGIN_EVENTS.CONNECTED, connectedListener);
-        walletServicesPlugin.removeListener(PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
-        walletServicesPlugin.removeListener(PLUGIN_EVENTS.CONNECTING, connectingListener);
-      }
-    };
-  }, [walletServicesPlugin]);
-  const value = useMemo(() => {
-    return {
-      plugin: walletServicesPlugin,
-      ready,
-      connecting
-    };
-  }, [walletServicesPlugin, ready, connecting]);
+  const value = useWalletServicesContextValue(web3AuthContext);
   return /*#__PURE__*/createElement(WalletServicesContext.Provider, {
     value
   }, children);

package/dist/lib.esm/packages/modal/src/react/context/Web3AuthInnerContext.js

@@ -1,8 +1,8 @@
-import { CONNECTOR_STATUS, WalletInitializationError, CONNECTOR_EVENTS, ANALYTICS_INTEGRATION_TYPE } from '@web3auth/no-modal';
-import { createContext, useState, useMemo, useCallback, useEffect, createElement } from 'react';
+import { useWeb3AuthInnerContextValue, Web3AuthInnerContext } from '@web3auth/no-modal/react';
+export { Web3AuthInnerContext } from '@web3auth/no-modal/react';
+import { createElement } from 'react';
 import { Web3Auth } from '../../modalManager.js';
 
-const Web3AuthInnerContext = /*#__PURE__*/createContext(null);
 function Web3AuthInnerProvider(params) {
   const {
     children,
@@ -12,156 +12,17 @@ function Web3AuthInnerProvider(params) {
   const {
     web3AuthOptions
   } = config;
-  const [chainId, setChainId] = useState(null);
-  const [chainNamespace, setChainNamespace] = useState(null);
-  const [isInitializing, setIsInitializing] = useState(false);
-  const [initError, setInitError] = useState(null);
-  const [provider, setProvider] = useState(null);
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [isMFAEnabled, setIsMFAEnabled] = useState(false);
-  const web3Auth = useMemo(() => {
-    setProvider(null);
-    return new Web3Auth(web3AuthOptions, initialState);
-  }, [web3AuthOptions, initialState]);
-  const [isConnected, setIsConnected] = useState(web3Auth.status === CONNECTOR_STATUS.CONNECTED);
-  const [isAuthorized, setIsAuthorized] = useState(web3Auth.status === CONNECTOR_STATUS.AUTHORIZED);
-  const [status, setStatus] = useState(web3Auth.status);
-  const getPlugin = useCallback(name => {
-    if (!web3Auth) throw WalletInitializationError.notReady();
-    return web3Auth.getPlugin(name);
-  }, [web3Auth]);
-  useEffect(() => {
-    const controller = new AbortController();
-    async function init() {
-      try {
-        var _web3Auth$currentChai;
-        setInitError(null);
-        setIsInitializing(true);
-        web3Auth.setAnalyticsProperties({
-          integration_type: ANALYTICS_INTEGRATION_TYPE.REACT_HOOKS
-        });
-        await web3Auth.init({
-          signal: controller.signal
-        });
-        setChainId(web3Auth.currentChainId);
-        setChainNamespace((_web3Auth$currentChai = web3Auth.currentChain) === null || _web3Auth$currentChai === void 0 ? void 0 : _web3Auth$currentChai.chainNamespace);
-      } catch (error) {
-        setInitError(error);
-      } finally {
-        setIsInitializing(false);
-      }
-    }
-    if (web3Auth) init();
-    return () => {
-      controller.abort();
-    };
-  }, [web3Auth, config]);
-  useEffect(() => {
-    const handleChainChange = async chainId => {
-      var _web3Auth$currentChai2;
-      setChainId(chainId);
-      setChainNamespace(web3Auth === null || web3Auth === void 0 || (_web3Auth$currentChai2 = web3Auth.currentChain) === null || _web3Auth$currentChai2 === void 0 ? void 0 : _web3Auth$currentChai2.chainNamespace);
-    };
-    if (provider) {
-      provider.on("chainChanged", handleChainChange);
-      return () => {
-        if (provider) {
-          provider.removeListener("chainChanged", handleChainChange);
-        }
-      };
-    }
-  }, [web3Auth, provider]);
-  useEffect(() => {
-    const notReadyListener = () => setStatus(web3Auth.status);
-    const readyListener = () => {
-      setStatus(web3Auth.status);
-      setIsInitialized(true);
-    };
-    const connectedListener = data => {
-      setStatus(web3Auth.status);
-      // we do this because of rehydration issues. status connected is fired first but web3auth sdk is not ready yet.
-      if (web3Auth.status === CONNECTOR_STATUS.CONNECTED) {
-        setIsInitialized(true);
-        setIsConnected(true);
-        setProvider(data.provider);
-      }
-    };
-    const authorizedListener = _data => {
-      setStatus(web3Auth.status);
-      if (web3Auth.status === CONNECTOR_STATUS.AUTHORIZED) {
-        setIsConnected(true);
-        setIsAuthorized(true);
-      }
-    };
-    const disconnectedListener = () => {
-      setStatus(web3Auth.status);
-      setIsConnected(false);
-      setIsAuthorized(false);
-      setProvider(null);
-    };
-    const connectingListener = () => {
-      setStatus(web3Auth.status);
-    };
-    const errorListener = () => {
-      setStatus(web3Auth.status);
-    };
-    const rehydrationErrorListener = () => {
-      setStatus(web3Auth.status);
-      setIsConnected(false);
-      setIsAuthorized(false);
-      setProvider(null);
-    };
-    const mfaEnabledListener = isMFAEnabled => {
-      if (typeof isMFAEnabled === "boolean") setIsMFAEnabled(isMFAEnabled);
-    };
-    if (web3Auth) {
-      // web3Auth is initialized here.
-      setStatus(web3Auth.status);
-      web3Auth.on(CONNECTOR_EVENTS.NOT_READY, notReadyListener);
-      web3Auth.on(CONNECTOR_EVENTS.READY, readyListener);
-      web3Auth.on(CONNECTOR_EVENTS.CONNECTED, connectedListener);
-      web3Auth.on(CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
-      web3Auth.on(CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
-      web3Auth.on(CONNECTOR_EVENTS.CONNECTING, connectingListener);
-      web3Auth.on(CONNECTOR_EVENTS.ERRORED, errorListener);
-      web3Auth.on(CONNECTOR_EVENTS.REHYDRATION_ERROR, rehydrationErrorListener);
-      web3Auth.on(CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
-    }
-    return () => {
-      if (web3Auth) {
-        web3Auth.removeListener(CONNECTOR_EVENTS.NOT_READY, notReadyListener);
-        web3Auth.removeListener(CONNECTOR_EVENTS.READY, readyListener);
-        web3Auth.removeListener(CONNECTOR_EVENTS.CONNECTED, connectedListener);
-        web3Auth.removeListener(CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
-        web3Auth.removeListener(CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
-        web3Auth.removeListener(CONNECTOR_EVENTS.CONNECTING, connectingListener);
-        web3Auth.removeListener(CONNECTOR_EVENTS.ERRORED, errorListener);
-        web3Auth.removeListener(CONNECTOR_EVENTS.REHYDRATION_ERROR, rehydrationErrorListener);
-        web3Auth.removeListener(CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
-        web3Auth.cleanup();
-      }
-    };
-  }, [web3Auth]);
-  const value = useMemo(() => {
-    return {
-      web3Auth,
-      isConnected,
-      isAuthorized,
-      isInitialized,
-      provider,
-      status,
-      isInitializing,
-      initError,
-      isMFAEnabled,
-      chainId,
-      chainNamespace,
-      getPlugin,
-      setIsMFAEnabled
-    };
-  }, [web3Auth, isConnected, isAuthorized, isMFAEnabled, setIsMFAEnabled, isInitialized, provider, status, getPlugin, isInitializing, initError, chainId, chainNamespace]);
+  const value = useWeb3AuthInnerContextValue({
+    Web3AuthConstructor: Web3Auth,
+    web3AuthOptions,
+    initialState,
+    notReadyUsesCurrentStatus: true,
+    cleanupOnUnmount: true,
+    initEffectDependency: config
+  });
   return /*#__PURE__*/createElement(Web3AuthInnerContext.Provider, {
     value
   }, children);
 }
 
-export { Web3AuthInnerContext, Web3AuthInnerProvider };
+export { Web3AuthInnerProvider };

package/dist/lib.esm/packages/modal/src/react/hooks/useWeb3Auth.js

@@ -1,28 +1,7 @@
 import { useWeb3AuthInner } from './useWeb3AuthInner.js';
 
 const useWeb3Auth = () => {
-  const {
-    initError,
-    isConnected,
-    isAuthorized,
-    isInitialized,
-    isInitializing,
-    provider,
-    status,
-    web3Auth,
-    getPlugin
-  } = useWeb3AuthInner();
-  return {
-    initError,
-    isConnected,
-    isAuthorized,
-    isInitialized,
-    isInitializing,
-    provider,
-    status,
-    web3Auth,
-    getPlugin
-  };
+  return useWeb3AuthInner();
 };
 
 export { useWeb3Auth };

package/dist/lib.esm/packages/modal/src/react/hooks/useWeb3AuthConnect.js

@@ -1,58 +1,45 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useWeb3AuthConnect as useWeb3AuthConnect$1 } from '@web3auth/no-modal/react';
+import { useState, useCallback } from 'react';
 import { useWeb3AuthInner } from './useWeb3AuthInner.js';
 
 const useWeb3AuthConnect = () => {
   const {
-    web3Auth,
-    isConnected
+    web3Auth
   } = useWeb3AuthInner();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [connectorName, setConnectorName] = useState(null);
-  useEffect(() => {
-    if (!web3Auth) return;
-    if (!isConnected && connectorName) {
-      setConnectorName(null);
-    }
-    if (isConnected && !connectorName) {
-      setConnectorName(web3Auth.connectedConnectorName);
-    }
-  }, [isConnected, connectorName, web3Auth]);
+  const {
+    isConnected,
+    loading: sharedLoading,
+    error: sharedError,
+    connectorName,
+    connect: sharedConnectTo
+  } = useWeb3AuthConnect$1();
+  const [connectLoading, setConnectLoading] = useState(false);
+  const [connectError, setConnectError] = useState(null);
+  const [activeFlow, setActiveFlow] = useState(null);
   const connect = useCallback(async () => {
-    setLoading(true);
-    setError(null);
+    setActiveFlow("connect");
+    setConnectLoading(true);
+    setConnectError(null);
+    let connection = null;
     try {
-      const provider = await web3Auth.connect();
-      if (provider) {
-        setConnectorName(web3Auth.connectedConnectorName);
-      }
-      return provider;
+      connection = await web3Auth.connect();
     } catch (error) {
-      setError(error);
+      setConnectError(error);
     } finally {
-      setLoading(false);
+      setConnectLoading(false);
     }
+    return connection;
   }, [web3Auth]);
   const connectTo = useCallback(async (connector, params) => {
-    setLoading(true);
-    setError(null);
-    try {
-      const provider = await web3Auth.connectTo(connector, params);
-      if (provider) {
-        setConnectorName(web3Auth.connectedConnectorName);
-      }
-      return provider;
-    } catch (error) {
-      setError(error);
-    } finally {
-      setLoading(false);
-    }
-  }, [web3Auth]);
+    setActiveFlow("connectTo");
+    setConnectError(null);
+    return sharedConnectTo(connector, params);
+  }, [sharedConnectTo]);
   return {
     isConnected,
-    loading,
-    error,
-    connectorName,
+    loading: connectLoading || sharedLoading,
+    error: activeFlow === "connect" ? connectError : sharedError,
+    connectorName: connectorName,
     connect,
     connectTo
   };

package/dist/lib.esm/packages/modal/src/react/hooks/useWeb3AuthInner.js

@@ -1,11 +1,15 @@
 import { WalletInitializationError } from '@web3auth/no-modal';
 import { useContext } from 'react';
-import { Web3AuthInnerContext } from '../context/Web3AuthInnerContext.js';
+import { Web3Auth } from '../../modalManager.js';
+import { Web3AuthInnerContext } from '@web3auth/no-modal/react';
 
+function isModalWeb3AuthInnerContext(context) {
+  return !!context && context.web3Auth instanceof Web3Auth;
+}
 const useWeb3AuthInner = () => {
   const context = useContext(Web3AuthInnerContext);
-  if (!context) {
-    throw WalletInitializationError.fromCode(1000, "usage of useWeb3Auth not wrapped in `Web3AuthContextProvider`.");
+  if (!isModalWeb3AuthInnerContext(context)) {
+    throw WalletInitializationError.fromCode(1000, "usage of useWeb3Auth not wrapped in modal `Web3AuthProvider`.");
   }
   return context;
 };

package/dist/lib.esm/packages/modal/src/react/index.js

@@ -1,17 +1,4 @@
-export { useChain } from './hooks/useChain.js';
-export { useCheckout } from './hooks/useCheckout.js';
-export { useEnableMFA } from './hooks/useEnableMFA.js';
-export { useFunding } from './hooks/useFunding.js';
-export { useIdentityToken } from './hooks/useIdentityToken.js';
-export { useManageMFA } from './hooks/useManageMFA.js';
-export { useReceive } from './hooks/useReceive.js';
-export { useSwap } from './hooks/useSwap.js';
-export { useSwitchChain } from './hooks/useSwitchChain.js';
-export { useWalletConnectScanner } from './hooks/useWalletConnectScanner.js';
-export { useWalletServicesPlugin } from './hooks/useWalletServicesPlugin.js';
-export { useWalletUI } from './hooks/useWalletUI.js';
 export { useWeb3Auth } from './hooks/useWeb3Auth.js';
 export { useWeb3AuthConnect } from './hooks/useWeb3AuthConnect.js';
-export { useWeb3AuthDisconnect } from './hooks/useWeb3AuthDisconnect.js';
-export { useWeb3AuthUser } from './hooks/useWeb3AuthUser.js';
+export { useAuthTokenInfo, useChain, useCheckout, useEnableMFA, useFunding, useManageMFA, useReceive, useSwap, useSwitchChain, useWalletConnectScanner, useWalletServicesPlugin, useWalletUI, useWeb3AuthDisconnect, useWeb3AuthUser } from '@web3auth/no-modal/react';
 export { Web3AuthProvider } from './Web3AuthProvider.js';

package/dist/lib.esm/packages/modal/src/react/solana/index.js

@@ -1,4 +1 @@
-export { useSignAndSendTransaction } from './hooks/useSignAndSendTransaction.js';
-export { useSignMessage } from './hooks/useSignMessage.js';
-export { useSignTransaction } from './hooks/useSignTransaction.js';
-export { useSolanaWallet } from './hooks/useSolanaWallet.js';
+export { SolanaProvider, useSignAndSendTransaction, useSignMessage, useSignTransaction, useSolanaWallet } from '@web3auth/no-modal/react/solana';

package/dist/lib.esm/packages/modal/src/react/wagmi/provider.js

@@ -3,8 +3,10 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { CHAIN_NAMESPACES, WalletInitializationError, log } from '@web3auth/no-modal';
 import { useMemo, createElement, useEffect, Fragment } from 'react';
 import { defineChain, webSocket, http } from 'viem';
-import { createConfig, WagmiProvider as WagmiProvider$1, fallback, useConfig, useReconnect, useAccountEffect } from 'wagmi';
+import { createConfig, WagmiProvider as WagmiProvider$1, fallback, useConfig, useReconnect, useConnectionEffect } from 'wagmi';
 import { injected } from 'wagmi/connectors';
+import { useWeb3Auth } from '../hooks/useWeb3Auth.js';
+import { useWeb3AuthDisconnect } from '@web3auth/no-modal/react';
 import '@babel/runtime/helpers/defineProperty';
 import '@web3auth/auth';
 import 'deepmerge';
@@ -19,11 +21,10 @@ import 'tailwind-merge';
 import 'react/jsx-runtime';
 import 'react-i18next';
 import '../../ui/localeImport.js';
+import '../../ui/components/SpinnerLoader/SpinnerLoader.css.js';
 import 'classnames';
 import 'react-qrcode-logo';
-import '../../ui/components/Login/Login.js';
-import { useWeb3Auth } from '../hooks/useWeb3Auth.js';
-import { useWeb3AuthDisconnect } from '../hooks/useWeb3AuthDisconnect.js';
+import '../../ui/containers/Login/Login.js';
 import { defaultWagmiConfig } from './constants.js';
 
 const _excluded = ["children"];
@@ -93,16 +94,16 @@ function Web3AuthWagmiProvider({
 }) {
   const {
     isConnected,
-    provider
+    connection
   } = useWeb3Auth();
   const {
     disconnect
   } = useWeb3AuthDisconnect();
   const wagmiConfig = useConfig();
   const {
-    reconnect
+    mutate: reconnect
   } = useReconnect();
-  useAccountEffect({
+  useConnectionEffect({
     onDisconnect: async () => {
       log.info("Disconnected from wagmi");
       if (isConnected) await disconnect();
@@ -116,8 +117,8 @@ function Web3AuthWagmiProvider({
   });
   useEffect(() => {
     (async () => {
-      if (isConnected && provider) {
-        const connector = await setupConnector(provider, wagmiConfig);
+      if (isConnected && connection !== null && connection !== void 0 && connection.ethereumProvider) {
+        const connector = await setupConnector(connection.ethereumProvider, wagmiConfig);
         if (!connector) {
           log.error("Failed to setup react wagmi connector");
           throw new Error("Failed to setup connector");
@@ -130,7 +131,7 @@ function Web3AuthWagmiProvider({
         }
       }
     })();
-  }, [isConnected, wagmiConfig, provider, reconnect]);
+  }, [isConnected, wagmiConfig, connection, reconnect]);
   return /*#__PURE__*/createElement(Fragment, null, children);
 }
 function WagmiProvider(_ref) {
@@ -214,6 +215,7 @@ function WagmiProvider(_ref) {
       finalConfig.chains = [wagmiChains[0], ...wagmiChains.slice(1)];
     }
     return createConfig(finalConfig);
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
   }, [config, web3Auth, isInitialized]);
   return /*#__PURE__*/createElement(WagmiProvider$1, // typecast to WagmiProviderPropsBase to avoid type error
   // as we are omitting the config prop from WagmiProviderProps

package/dist/lib.esm/packages/modal/src/ui/components/BottomSheet/BottomSheet.js

@@ -9,13 +9,10 @@ function BottomSheet({
   isShown,
   onClose,
   children,
-  uiConfig,
   sheetClassName,
-  showCloseButton = true
+  showCloseButton = true,
+  borderRadiusType = "large"
 }) {
-  const {
-    borderRadiusType = "large"
-  } = uiConfig;
   const handleClose = e => {
     e.stopPropagation();
     if (onClose) onClose();

package/dist/lib.esm/packages/modal/src/ui/components/Button/Button.js

@@ -11,11 +11,11 @@ function Button(props) {
   const SocialButtonProps = buttonProps;
   const WalletButtonProps = buttonProps;
   const {
+    isDark: socialButtonIsDark,
     text,
     showIcon,
     showText,
     method,
-    isDark,
     isPrimaryBtn,
     onClick,
     children,
@@ -23,6 +23,7 @@ function Button(props) {
     buttonRadius
   } = SocialButtonProps;
   const {
+    isDark: walletButtonIsDark,
     label,
     onClick: walletOnClick,
     button,
@@ -36,13 +37,14 @@ function Button(props) {
       showIcon: showIcon,
       showText: showText,
       method: method,
-      isDark: isDark,
+      isDark: socialButtonIsDark,
       isPrimaryBtn: isPrimaryBtn,
       onClick: onClick,
       btnStyle: btnStyle,
       buttonRadius: buttonRadius,
       children: children
     }), type === BUTTON_TYPE.WALLET && /*#__PURE__*/jsx(ButtonWallet, {
+      isDark: walletButtonIsDark,
       label: label,
       walletConnectUri: walletConnectUri,
       onClick: walletOnClick,

package/dist/lib.esm/packages/modal/src/ui/components/Button/ButtonWallet/ButtonWallet.js

@@ -1,7 +1,6 @@
 import cn from 'classnames';
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ThemedContext } from '../../../context/ThemeContext.js';
 import i18nInstance from '../../../localeImport.js';
 import { formatIOSMobile, getIcons } from '../../../utils.js';
 import Image from '../../Image/Image.js';
@@ -12,6 +11,7 @@ function ButtonWallet(props) {
     i18n: i18nInstance
   });
   const {
+    isDark,
     deviceDetails,
     button,
     walletConnectUri,
@@ -19,7 +19,6 @@ function ButtonWallet(props) {
     label,
     buttonRadius
   } = props;
-  const isDark = useContext(ThemedContext);
   const isLink = useMemo(() => deviceDetails.platform !== "desktop" && button.href && button.hasWalletConnect && !button.isInstalled, [deviceDetails, button]);
   const href = useMemo(() => button.href ? formatIOSMobile({
     uri: walletConnectUri,

package/dist/lib.esm/packages/modal/src/ui/components/Image/Image.js

@@ -1,5 +1,5 @@
-import { useContext, useMemo } from 'react';
-import { ThemedContext } from '../../context/ThemeContext.js';
+import { useMemo } from 'react';
+import { useWidget } from '../../context/WidgetContext.js';
 import { cn } from '../../utils.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -24,7 +24,7 @@ function Image(props) {
   } = props;
   const {
     isDark
-  } = useContext(ThemedContext);
+  } = useWidget();
   const imgName = useMemo(() => isDark && darkImageId ? darkImageId : imageId, [isDark, darkImageId, imageId]);
   const hoverImgName = useMemo(() => isDark && darkHoverImageId ? darkHoverImageId : hoverImageId, [isDark, darkHoverImageId, hoverImageId]);
   if (isButton) {