@web3auth/modal 10.16.0 → 11.0.0-beta.1

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 { useState, useMemo, useCallback, useEffect, createElement, createContext } 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 { useAuthTokenInfo, useChain, useCheckout, useEnableMFA, useFunding, useManageMFA, useReceive, useSwap, useSwitchChain, useWalletConnectScanner, useWalletServicesPlugin, useWalletUI, useWallets, useWeb3AuthDisconnect, useWeb3AuthUser } from '@web3auth/no-modal/react';
 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 { 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

@@ -1,10 +1,12 @@
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { CHAIN_NAMESPACES, WalletInitializationError, log } from '@web3auth/no-modal';
-import { useMemo, createElement, useEffect, Fragment } from 'react';
+import { useMemo, createElement, useRef, 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 { useWeb3AuthDisconnect } from '@web3auth/no-modal/react';
+import { useWeb3Auth } from '../hooks/useWeb3Auth.js';
 import '@babel/runtime/helpers/defineProperty';
 import '@web3auth/auth';
 import 'deepmerge';
@@ -19,11 +21,11 @@ import 'tailwind-merge';
 import 'react/jsx-runtime';
 import 'react-i18next';
 import '../../ui/localeImport.js';
+import '../../ui/components/SpinnerLoader/SpinnerLoader.css.js';
+import '../../ui/containers/AccountLinking/AccountLinking.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 +95,20 @@ function Web3AuthWagmiProvider({
 }) {
   const {
     isConnected,
-    provider
+    connection,
+    web3Auth: {
+      primaryConnectorName
+    }
   } = useWeb3Auth();
   const {
     disconnect
   } = useWeb3AuthDisconnect();
   const wagmiConfig = useConfig();
   const {
-    reconnect
+    mutate: reconnect
   } = useReconnect();
-  useAccountEffect({
+  const lastSyncedWeb3AuthConnection = useRef(null);
+  useConnectionEffect({
     onDisconnect: async () => {
       log.info("Disconnected from wagmi");
       if (isConnected) await disconnect();
@@ -115,22 +121,33 @@ function Web3AuthWagmiProvider({
     }
   });
   useEffect(() => {
-    (async () => {
-      if (isConnected && provider) {
-        const connector = await setupConnector(provider, wagmiConfig);
-        if (!connector) {
-          log.error("Failed to setup react wagmi connector");
-          throw new Error("Failed to setup connector");
+    (async _connection$ethereumP => {
+      const newConnection = connection !== null && connection !== void 0 ? connection : null;
+      const newEth = (_connection$ethereumP = connection === null || connection === void 0 ? void 0 : connection.ethereumProvider) !== null && _connection$ethereumP !== void 0 ? _connection$ethereumP : null;
+      if (isConnected && newConnection && newEth && newConnection.connectorName === primaryConnectorName) {
+        // `ethereumProvider` is a stable proxy (`commonJRPCProvider`) across account switches,
+        // so key wagmi resyncs off the Web3Auth connection object instead of provider identity.
+        if (lastSyncedWeb3AuthConnection.current !== newConnection) {
+          if (getWeb3authConnector(wagmiConfig)) {
+            resetConnectorState(wagmiConfig);
+          }
+          lastSyncedWeb3AuthConnection.current = newConnection;
+          const connector = await setupConnector(newEth, wagmiConfig);
+          if (!connector) {
+            log.error("Failed to setup react wagmi connector");
+            throw new Error("Failed to setup connector");
+          }
+          await connectWeb3AuthWithWagmi(connector, wagmiConfig);
+          reconnect();
         }
-        await connectWeb3AuthWithWagmi(connector, wagmiConfig);
-        reconnect();
       } else if (!isConnected) {
+        lastSyncedWeb3AuthConnection.current = null;
         if (wagmiConfig.state.status === "connected") {
           await disconnectWeb3AuthFromWagmi(wagmiConfig);
         }
       }
     })();
-  }, [isConnected, wagmiConfig, provider, reconnect]);
+  }, [isConnected, wagmiConfig, connection, reconnect, primaryConnectorName]);
   return /*#__PURE__*/createElement(Fragment, null, children);
 }
 function WagmiProvider(_ref) {

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

@@ -9,38 +9,35 @@ 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();
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("div", {
-      className: cn("w3a--bottom-sheet-bg w3a--fixed w3a--left-0 w3a--top-0 w3a--size-full w3a--transition-opacity w3a--duration-300", {
-        "w3a--rounded-[30px]": borderRadiusType === "large",
-        "w3a--rounded-2xl": borderRadiusType === "medium",
-        "w3a--rounded-none": borderRadiusType === "small"
+      className: cn("w3a--bottom-sheet-bg wta:fixed wta:left-0 wta:top-0 wta:size-full wta:transition-opacity wta:duration-300", {
+        "wta:rounded-[30px]": borderRadiusType === "large",
+        "wta:rounded-2xl": borderRadiusType === "medium",
+        "wta:rounded-none": borderRadiusType === "small"
       }),
       onClick: handleClose,
       "aria-hidden": "true",
       role: "button"
     }), /*#__PURE__*/jsxs("div", {
-      className: cn(`w3a--fixed w3a--bottom-2 w3a--left-2 w3a--mx-auto w3a--flex w3a--w-[96%] w3a--flex-col
-      w3a--gap-y-2 w3a--border w3a--border-app-gray-100 w3a--bg-app-white w3a--p-4 w3a--shadow-lg w3a--transition-transform w3a--duration-500 
-      w3a--ease-out dark:w3a--border-app-gray-600 dark:w3a--bg-app-dark-surface-main
-      ${isShown ? "w3a--translate-y-0 w3a--delay-700" : "w3a--translate-y-full"}`, {
-        "w3a--rounded-[30px]": borderRadiusType === "large",
-        "w3a--rounded-2xl": borderRadiusType === "medium",
-        "w3a--rounded-none": borderRadiusType === "small"
+      className: cn(`wta:fixed wta:bottom-2 wta:left-2 wta:mx-auto wta:flex wta:w-[96%] wta:flex-col
+      wta:gap-y-2 wta:border wta:border-app-gray-100 wta:bg-app-white wta:p-4 wta:shadow-lg wta:transition-transform wta:duration-500 
+      wta:ease-out wta:dark:border-app-gray-600 wta:dark:bg-app-dark-surface-main
+      ${isShown ? "wta:translate-y-0 wta:delay-700" : "wta:translate-y-full"}`, {
+        "wta:rounded-[30px]": borderRadiusType === "large",
+        "wta:rounded-2xl": borderRadiusType === "medium",
+        "wta:rounded-none": borderRadiusType === "small"
       }, sheetClassName),
       children: [showCloseButton && /*#__PURE__*/jsx("div", {
-        className: "w3a--absolute w3a--right-4 w3a--top-[16px] w3a--z-10 w3a--cursor-pointer",
+        className: "wta:absolute wta:right-4 wta:top-[16px] wta:z-10 wta:cursor-pointer",
         children: /*#__PURE__*/jsx("svg", {
           width: "13",
           height: "13",
@@ -48,7 +45,7 @@ function BottomSheet({
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           onClick: onClose,
-          className: "w3a--text-app-gray-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-200 dark:hover:w3a--text-app-white",
+          className: "wta:text-app-gray-500 wta:hover:text-app-gray-900 wta:dark:text-app-gray-200 wta:dark:hover:text-app-white",
           children: /*#__PURE__*/jsx("path", {
             fillRule: "evenodd",
             clipRule: "evenodd",

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/ButtonSocial/ButtonSocial.js

@@ -37,12 +37,12 @@ function SocialLoginButton(props) {
     type: "button",
     onClick: e => onClick && onClick(e),
     className: cn("w3a--btn", btnStyle, {
-      "w3a--rounded-full": buttonRadius === "pill",
-      "w3a--rounded-lg": buttonRadius === "rounded",
-      "w3a--rounded-none": buttonRadius === "square"
+      "wta:rounded-full": buttonRadius === "pill",
+      "wta:rounded-lg": buttonRadius === "rounded",
+      "wta:rounded-none": buttonRadius === "square"
     }),
     children: [showIcon && getProviderIcon(method, isDark, isPrimaryBtn), children, showText && /*#__PURE__*/jsx("p", {
-      className: "w3a--text-base w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white",
+      className: "wta:text-base wta:font-normal wta:text-app-gray-900 wta:dark:text-app-white",
       children: text
     })]
   });