@web3auth/modal 10.0.0-beta.1 → 10.0.0-beta.11

package/dist/lib.cjs/packages/modal/src/react/hooks/useWeb3AuthUser.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var react = require('react');
+var useWeb3AuthInner = require('./useWeb3AuthInner.js');
+
+const useWeb3AuthUser = () => {
+  const {
+    web3Auth,
+    isConnected,
+    isMFAEnabled,
+    setIsMFAEnabled
+  } = useWeb3AuthInner.useWeb3AuthInner();
+  const [userInfo, setUserInfo] = react.useState(null);
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const getUserInfo = react.useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const userInfo = await web3Auth.getUserInfo();
+      setUserInfo(userInfo);
+      return userInfo;
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [web3Auth]);
+  react.useEffect(() => {
+    const saveUserInfo = async () => {
+      const userInfo = await getUserInfo();
+      setUserInfo(userInfo);
+      setIsMFAEnabled((userInfo === null || userInfo === void 0 ? void 0 : userInfo.isMfaEnabled) || false);
+    };
+    if (isConnected && !userInfo) saveUserInfo();
+    if (!isConnected && userInfo) {
+      setUserInfo(null);
+      setIsMFAEnabled(false);
+    }
+  }, [isConnected, userInfo, getUserInfo, setIsMFAEnabled]);
+  return {
+    loading,
+    error,
+    userInfo,
+    isMFAEnabled,
+    getUserInfo
+  };
+};
+
+exports.useWeb3AuthUser = useWeb3AuthUser;

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

@@ -1,12 +1,33 @@
 'use strict';
 
-var Web3AuthInnerContext = require('./context/Web3AuthInnerContext.js');
+var useCheckout = require('./hooks/useCheckout.js');
+var useEnableMFA = require('./hooks/useEnableMFA.js');
+var useIdentityToken = require('./hooks/useIdentityToken.js');
+var useManageMFA = require('./hooks/useManageMFA.js');
+var useSwap = require('./hooks/useSwap.js');
+var useSwitchChain = require('./hooks/useSwitchChain.js');
+var useWalletConnectScanner = require('./hooks/useWalletConnectScanner.js');
+var useWalletServicesPlugin = require('./hooks/useWalletServicesPlugin.js');
+var useWalletUI = require('./hooks/useWalletUI.js');
 var useWeb3Auth = require('./hooks/useWeb3Auth.js');
+var useWeb3AuthConnect = require('./hooks/useWeb3AuthConnect.js');
+var useWeb3AuthDisconnect = require('./hooks/useWeb3AuthDisconnect.js');
+var useWeb3AuthUser = require('./hooks/useWeb3AuthUser.js');
 var Web3AuthProvider = require('./Web3AuthProvider.js');
 
 
 
-exports.Web3AuthInnerContext = Web3AuthInnerContext.Web3AuthInnerContext;
-exports.Web3AuthInnerProvider = Web3AuthInnerContext.Web3AuthInnerProvider;
+exports.useCheckout = useCheckout.useCheckout;
+exports.useEnableMFA = useEnableMFA.useEnableMFA;
+exports.useIdentityToken = useIdentityToken.useIdentityToken;
+exports.useManageMFA = useManageMFA.useManageMFA;
+exports.useSwap = useSwap.useSwap;
+exports.useSwitchChain = useSwitchChain.useSwitchChain;
+exports.useWalletConnectScanner = useWalletConnectScanner.useWalletConnectScanner;
+exports.useWalletServicesPlugin = useWalletServicesPlugin.useWalletServicesPlugin;
+exports.useWalletUI = useWalletUI.useWalletUI;
 exports.useWeb3Auth = useWeb3Auth.useWeb3Auth;
+exports.useWeb3AuthConnect = useWeb3AuthConnect.useWeb3AuthConnect;
+exports.useWeb3AuthDisconnect = useWeb3AuthDisconnect.useWeb3AuthDisconnect;
+exports.useWeb3AuthUser = useWeb3AuthUser.useWeb3AuthUser;
 exports.Web3AuthProvider = Web3AuthProvider.Web3AuthProvider;

package/dist/lib.cjs/packages/modal/src/react/solana/hooks/useSignAndSendTransaction.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var react = require('react');
+var useSolanaWallet = require('./useSolanaWallet.js');
+
+const useSignAndSendTransaction = () => {
+  const {
+    solanaWallet
+  } = useSolanaWallet.useSolanaWallet();
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [data, setData] = react.useState(null);
+  const signAndSendTransaction = react.useCallback(async transaction => {
+    setLoading(true);
+    setError(null);
+    try {
+      if (!solanaWallet) throw noModal.WalletInitializationError.notReady();
+      const signature = await solanaWallet.signAndSendTransaction(transaction);
+      setData(signature);
+      return signature;
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [solanaWallet]);
+  return {
+    loading,
+    error,
+    data,
+    signAndSendTransaction
+  };
+};
+
+exports.useSignAndSendTransaction = useSignAndSendTransaction;

package/dist/lib.cjs/packages/modal/src/react/solana/hooks/useSignMessage.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var react = require('react');
+var useSolanaWallet = require('./useSolanaWallet.js');
+
+const useSignMessage = () => {
+  const {
+    solanaWallet,
+    accounts
+  } = useSolanaWallet.useSolanaWallet();
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [data, setData] = react.useState(null);
+  const signMessage = react.useCallback(async (message, from) => {
+    setLoading(true);
+    setError(null);
+    try {
+      if (!solanaWallet) throw noModal.WalletInitializationError.notReady();
+      const signature = await solanaWallet.signMessage(message, from !== null && from !== void 0 ? from : accounts === null || accounts === void 0 ? void 0 : accounts[0]);
+      setData(signature);
+      return signature;
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [solanaWallet, accounts]);
+  return {
+    loading,
+    error,
+    data,
+    signMessage
+  };
+};
+
+exports.useSignMessage = useSignMessage;

package/dist/lib.cjs/packages/modal/src/react/solana/hooks/useSignTransaction.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var react = require('react');
+var useSolanaWallet = require('./useSolanaWallet.js');
+
+const useSignTransaction = () => {
+  const {
+    solanaWallet
+  } = useSolanaWallet.useSolanaWallet();
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [data, setData] = react.useState(null);
+  const signTransaction = react.useCallback(async transaction => {
+    setLoading(true);
+    setError(null);
+    try {
+      if (!solanaWallet) throw noModal.WalletInitializationError.notReady();
+      const signedTransaction = await solanaWallet.signTransaction(transaction);
+      setData(signedTransaction);
+      return signedTransaction;
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [solanaWallet]);
+  return {
+    loading,
+    error,
+    data,
+    signTransaction
+  };
+};
+
+exports.useSignTransaction = useSignTransaction;

package/dist/lib.cjs/packages/modal/src/react/solana/hooks/useSolanaWallet.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var web3_js = require('@solana/web3.js');
+var noModal = require('@web3auth/no-modal');
+var react = require('react');
+var useWeb3Auth = require('../../hooks/useWeb3Auth.js');
+
+const useSolanaWallet = () => {
+  const {
+    provider,
+    web3Auth
+  } = useWeb3Auth.useWeb3Auth();
+  const [accounts, setAccounts] = react.useState(null);
+  const solanaWallet = react.useMemo(() => {
+    if (!provider) return null;
+    return new noModal.SolanaWallet(provider);
+  }, [provider]);
+  const connection = react.useMemo(() => {
+    if (!web3Auth || !provider) return null;
+    return new web3_js.Connection(web3Auth.currentChain.rpcTarget);
+  }, [web3Auth, provider]);
+  react.useEffect(() => {
+    const init = async () => {
+      var _web3Auth$currentChai;
+      if (!(web3Auth !== null && web3Auth !== void 0 && (_web3Auth$currentChai = web3Auth.currentChain) !== null && _web3Auth$currentChai !== void 0 && _web3Auth$currentChai.chainNamespace) || web3Auth.currentChain.chainNamespace !== noModal.CHAIN_NAMESPACES.SOLANA) {
+        return;
+      }
+      if (!solanaWallet) return;
+      const accounts = await solanaWallet.requestAccounts();
+      if ((accounts === null || accounts === void 0 ? void 0 : accounts.length) > 0) {
+        setAccounts(accounts);
+      }
+    };
+    if (solanaWallet) init();
+  }, [solanaWallet, web3Auth]);
+  return {
+    solanaWallet,
+    accounts,
+    connection
+  };
+};
+
+exports.useSolanaWallet = useSolanaWallet;

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var useSignAndSendTransaction = require('./hooks/useSignAndSendTransaction.js');
+var useSignMessage = require('./hooks/useSignMessage.js');
+var useSignTransaction = require('./hooks/useSignTransaction.js');
+var useSolanaWallet = require('./hooks/useSolanaWallet.js');
+
+
+
+exports.useSignAndSendTransaction = useSignAndSendTransaction.useSignAndSendTransaction;
+exports.useSignMessage = useSignMessage.useSignMessage;
+exports.useSignTransaction = useSignTransaction.useSignTransaction;
+exports.useSolanaWallet = useSolanaWallet.useSolanaWallet;

package/dist/lib.cjs/packages/modal/src/react/wagmi/constants.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var wagmi = require('wagmi');
+var chains = require('wagmi/chains');
+
+const defaultWagmiConfig = wagmi.createConfig({
+  chains: [chains.mainnet],
+  connectors: [],
+  // or your basic wallets
+  ssr: true,
+  transports: {
+    [chains.mainnet.id]: wagmi.http(chains.mainnet.rpcUrls.default.http[0])
+  }
+});
+
+exports.defaultWagmiConfig = defaultWagmiConfig;

package/dist/lib.cjs/packages/modal/src/react/wagmi/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var provider = require('./provider.js');
+
+
+
+exports.WagmiProvider = provider.WagmiProvider;

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

@@ -0,0 +1,195 @@
+'use strict';
+
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var noModal = require('@web3auth/no-modal');
+var react = require('react');
+var viem = require('viem');
+var wagmi = require('wagmi');
+var connectors = require('wagmi/connectors');
+require('@babel/runtime/helpers/defineProperty');
+require('@web3auth/auth');
+require('deepmerge');
+require('../../config.js');
+require('../../ui/config.js');
+require('../../ui/interfaces.js');
+require('react/jsx-runtime');
+require('../../ui/css/index.css.js');
+require('react-dom/client');
+require('@toruslabs/http-helpers');
+require('clsx');
+require('tailwind-merge');
+require('bowser');
+require('react-i18next');
+require('../../ui/context/RootContext.js');
+require('../../ui/localeImport.js');
+require('classnames');
+require('react-qrcode-logo');
+require('../../ui/components/Login/Login.js');
+var useWeb3Auth = require('../hooks/useWeb3Auth.js');
+var useWeb3AuthDisconnect = require('../hooks/useWeb3AuthDisconnect.js');
+var constants = require('./constants.js');
+
+const _excluded = ["children"];
+const WEB3AUTH_CONNECTOR_ID = "web3auth";
+// Helper to initialize connectors for the given wallets
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+async function setupConnector(provider, config) {
+  let connector = config.connectors.find(c => c.id === WEB3AUTH_CONNECTOR_ID);
+  if (connector) return connector;
+  // Create new connector if not already existing
+  connector = connectors.injected({
+    target: {
+      provider: provider,
+      id: WEB3AUTH_CONNECTOR_ID,
+      name: "Web3Auth"
+    }
+  });
+  const result = config._internal.connectors.setup(connector);
+  config._internal.connectors.setState(current => [...current, result]);
+  return result;
+}
+// Helper to connect a wallet and update wagmi state
+async function connectWeb3AuthWithWagmi(connector, config) {
+  var _config$storage, _config$storage2;
+  await Promise.all([(_config$storage = config.storage) === null || _config$storage === void 0 ? void 0 : _config$storage.removeItem(`${connector.id}.disconnected`), (_config$storage2 = config.storage) === null || _config$storage2 === void 0 ? void 0 : _config$storage2.setItem("recentConnectorId", connector.id)]);
+  let chainId = await connector.getChainId();
+  if (!config.chains.find(c => c.id === chainId)) {
+    chainId = config.chains[0].id;
+  }
+  const accounts = await connector.getAccounts();
+  const connections = new Map([[connector.uid, {
+    accounts: [accounts[0]],
+    chainId,
+    connector
+  }]]);
+  config.setState(state => _objectSpread(_objectSpread({}, state), {}, {
+    chainId,
+    connections,
+    current: connector.uid,
+    status: "connected"
+  }));
+}
+async function disconnectWeb3AuthFromWagmi(config) {
+  config._internal.connectors.setState(prev => prev.filter(c => c.id !== WEB3AUTH_CONNECTOR_ID));
+  config.setState(state => _objectSpread(_objectSpread({}, state), {}, {
+    chainId: state.chainId,
+    connections: new Map(),
+    current: undefined,
+    status: "disconnected"
+  }));
+}
+function Web3AuthWagmiProvider({
+  children
+}) {
+  const {
+    isConnected,
+    provider
+  } = useWeb3Auth.useWeb3Auth();
+  const {
+    disconnect
+  } = useWeb3AuthDisconnect.useWeb3AuthDisconnect();
+  const wagmiConfig = wagmi.useConfig();
+  const {
+    reconnect
+  } = wagmi.useReconnect();
+  wagmi.useAccountEffect({
+    onDisconnect: async () => {
+      noModal.log.info("Disconnected from wagmi");
+      if (isConnected) await disconnect();
+    }
+  });
+  react.useEffect(() => {
+    (async () => {
+      if (isConnected && provider) {
+        const connector = await setupConnector(provider, wagmiConfig);
+        if (!connector) {
+          noModal.log.error("Failed to setup react wagmi connector");
+          throw new Error("Failed to setup connector");
+        }
+        await connectWeb3AuthWithWagmi(connector, wagmiConfig);
+        reconnect();
+      } else if (!isConnected) {
+        if (wagmiConfig.state.status === "connected") {
+          await disconnectWeb3AuthFromWagmi(wagmiConfig);
+        }
+      }
+    })();
+  }, [isConnected, wagmiConfig, provider, reconnect]);
+  return /*#__PURE__*/react.createElement(react.Fragment, null, children);
+}
+function WagmiProvider(_ref) {
+  let {
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    config
+  } = props;
+  const {
+    web3Auth,
+    isInitialized
+  } = useWeb3Auth.useWeb3Auth();
+  const finalConfig = react.useMemo(() => {
+    var _web3Auth$coreOptions;
+    if (!isInitialized) return constants.defaultWagmiConfig;
+    const finalConfig = _objectSpread(_objectSpread({
+      ssr: true
+    }, config), {}, {
+      chains: undefined,
+      connectors: [],
+      transports: {},
+      multiInjectedProviderDiscovery: false,
+      client: undefined
+    });
+    const wagmiChains = [];
+    if (isInitialized && web3Auth !== null && web3Auth !== void 0 && (_web3Auth$coreOptions = web3Auth.coreOptions) !== null && _web3Auth$coreOptions !== void 0 && _web3Auth$coreOptions.chains) {
+      var _web3Auth$currentChai;
+      const defaultChainId = (_web3Auth$currentChai = web3Auth.currentChain) === null || _web3Auth$currentChai === void 0 ? void 0 : _web3Auth$currentChai.chainId;
+      const chains = web3Auth.coreOptions.chains.filter(chain => chain.chainNamespace === noModal.CHAIN_NAMESPACES.EIP155);
+      if (chains.length === 0) throw noModal.WalletInitializationError.invalidParams("No valid chains found in web3auth config for wagmi.");
+      chains.forEach(chain => {
+        const wagmiChain = viem.defineChain({
+          id: Number.parseInt(chain.chainId, 16),
+          // id in number form
+          name: chain.displayName,
+          rpcUrls: {
+            default: {
+              http: [chain.rpcTarget],
+              webSocket: [chain.wsTarget]
+            }
+          },
+          blockExplorers: chain.blockExplorerUrl ? {
+            default: {
+              name: "explorer",
+              // TODO: correct name if chain config has it
+              url: chain.blockExplorerUrl
+            }
+          } : undefined,
+          nativeCurrency: {
+            name: chain.tickerName,
+            symbol: chain.ticker,
+            decimals: chain.decimals || 18
+          }
+        });
+        if (defaultChainId === chain.chainId) {
+          wagmiChains.unshift(wagmiChain);
+        } else {
+          wagmiChains.push(wagmiChain);
+        }
+        finalConfig.transports[wagmiChain.id] = chain.wsTarget ? viem.webSocket(chain.wsTarget) : viem.http(chain.rpcTarget);
+      });
+      finalConfig.chains = [wagmiChains[0], ...wagmiChains.slice(1)];
+    }
+    return wagmi.createConfig(finalConfig);
+  }, [config, web3Auth, isInitialized]);
+  return /*#__PURE__*/react.createElement(wagmi.WagmiProvider, // typecast to WagmiProviderPropsBase to avoid type error
+  // as we are omitting the config prop from WagmiProviderProps
+  // and creating a new config object with the finalConfig
+  _objectSpread(_objectSpread({}, props), {}, {
+    config: finalConfig,
+    reconnectOnMount: false
+  }), /*#__PURE__*/react.createElement(Web3AuthWagmiProvider, null, children));
+}
+
+exports.WagmiProvider = WagmiProvider;

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

@@ -14,7 +14,7 @@ function BottomSheet({
   uiConfig
 }) {
   const {
-    borderRadiusType
+    borderRadiusType = "large"
   } = uiConfig;
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx("div", {
@@ -28,7 +28,7 @@ function BottomSheet({
       role: "button"
     }), jsxRuntime.jsxs("div", {
       className: utils.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--rounded-3xl w3a--border w3a--border-app-gray-100 w3a--bg-app-white w3a--p-4 w3a--shadow-lg w3a--transition-transform w3a--duration-500 
+      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",
@@ -44,7 +44,7 @@ function BottomSheet({
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           onClick: onClose,
-          className: "w3a--text-app-gray-500 dark:w3a--text-app-gray-200",
+          className: "w3a--text-app-gray-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-200 dark:hover:w3a--text-app-white",
           children: jsxRuntime.jsx("path", {
             fillRule: "evenodd",
             clipRule: "evenodd",

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

@@ -6,7 +6,7 @@ var utils = require('../../../utils.js');
 var Image = require('../../Image/Image.js');
 
 function getProviderIcon(method, isDark, isPrimaryBtn) {
-  const imageId = method === auth.AUTH_CONNECTION.TWITTER ? `login-twitter-x${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
+  const imageId = method === auth.AUTH_CONNECTION.TWITTER ? `login-X${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
   const hoverId = method === auth.AUTH_CONNECTION.APPLE || method === auth.AUTH_CONNECTION.GITHUB || method === auth.AUTH_CONNECTION.TWITTER ? imageId : `login-${method}-active`;
   if (isPrimaryBtn) {
     return jsxRuntime.jsx(Image, {

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

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var cn = require('classnames');
 var react = require('react');
 var reactI18next = require('react-i18next');
+var ThemeContext = require('../../../context/ThemeContext.js');
 var localeImport = require('../../../localeImport.js');
 var utils = require('../../../utils.js');
 var Image = require('../../Image/Image.js');
@@ -20,6 +21,7 @@ function ButtonWallet(props) {
     label,
     buttonRadius
   } = props;
+  const isDark = react.useContext(ThemeContext.ThemedContext);
   const isLink = react.useMemo(() => deviceDetails.platform !== "desktop" && button.href && button.hasWalletConnect && !button.hasInjectedWallet, [deviceDetails, button]);
   const href = react.useMemo(() => button.href ? utils.formatIOSMobile({
     uri: walletConnectUri,
@@ -34,7 +36,8 @@ function ButtonWallet(props) {
   };
   return jsxRuntime.jsxs("button", {
     type: "button",
-    className: cn(`w3a--flex w3a--w-full w3a--items-center w3a--justify-between w3a--bg-app-gray-50 w3a--p-3 hover:w3a--bg-app-gray-200 hover:w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:hover:w3a--bg-app-gray-600`, {
+    className: cn(`w3a--group w3a--relative w3a--overflow-hidden w3a--flex w3a--w-full w3a--items-center w3a--justify-between w3a--bg-app-gray-50 w3a--p-3 hover:w3a--bg-app-gray-200 
+        hover:w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:hover:w3a--bg-app-gray-600 active:w3a--scale-95 w3a--transition-all w3a--duration-150`, {
       "w3a--rounded-full": buttonRadius === "pill",
       "w3a--rounded-lg": buttonRadius === "rounded",
       "w3a--rounded-none": buttonRadius === "square"
@@ -43,7 +46,7 @@ function ButtonWallet(props) {
     children: [jsxRuntime.jsxs("div", {
       className: "w3a--flex w3a--items-center w3a--gap-x-2",
       children: [jsxRuntime.jsx("figure", {
-        className: button.icon ? "w3a--size-5" : "w3a--size-5 w3a--rounded-full w3a--bg-app-gray-300",
+        className: "w3a--size-5",
         children: jsxRuntime.jsx(Image, {
           imageData: button.icon,
           imageId: `login-${button.name}`,
@@ -55,12 +58,17 @@ function ButtonWallet(props) {
           extension: button.imgExtension || "webp"
         })
       }), jsxRuntime.jsx("p", {
-        className: "w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white",
+        className: "w3a--max-w-[180px] w3a--truncate w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white",
         children: label
       })]
     }), button.hasInjectedWallet && jsxRuntime.jsx("span", {
-      className: "w3a--inline-flex w3a--items-center w3a--rounded-md w3a--bg-app-primary-100 w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--text-app-primary-800 \n        dark:w3a--border dark:w3a--border-app-primary-400 dark:w3a--bg-transparent dark:w3a--text-app-primary-400",
+      className: "w3a--absolute w3a--right-4 w3a--top-1/2 w3a--flex w3a--w-auto -w3a--translate-y-1/2 w3a--items-center w3a--rounded-md w3a--bg-app-primary-100 w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--text-app-primary-800 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-6 group-hover:w3a--opacity-0 \n        dark:w3a--border dark:w3a--border-app-primary-400 dark:w3a--bg-transparent dark:w3a--text-app-primary-400",
       children: t("modal.external.installed")
+    }), jsxRuntime.jsx("img", {
+      id: "injected-wallet-arrow",
+      className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-10 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300\n          group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
+      src: utils.getIcons(isDark ? "chevron-right-light" : "chevron-right-dark"),
+      alt: "arrow"
     })]
   });
 }