@web3auth/modal 10.0.0-beta.5 → 10.0.0-beta.7

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

@@ -0,0 +1,37 @@
+import { Connection } from '@solana/web3.js';
+import { SolanaWallet } from '@web3auth/no-modal';
+import { useState, useMemo, useEffect } from 'react';
+import { useWeb3Auth } from '../../hooks/useWeb3Auth.js';
+
+const useSolanaWallet = () => {
+  const {
+    provider,
+    web3Auth
+  } = useWeb3Auth();
+  const [accounts, setAccounts] = useState(null);
+  const solanaWallet = useMemo(() => {
+    if (!provider) return null;
+    return new SolanaWallet(provider);
+  }, [provider]);
+  const connection = useMemo(() => {
+    if (!web3Auth || !provider) return null;
+    return new Connection(web3Auth.currentChain.rpcTarget);
+  }, [web3Auth, provider]);
+  useEffect(() => {
+    const init = async () => {
+      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
+  };
+};
+
+export { useSolanaWallet };

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

@@ -0,0 +1,4 @@
+export { useSignAndSendTransaction } from './hooks/useSignAndSendTransaction.js';
+export { useSignMessage } from './hooks/useSignMessage.js';
+export { useSignTransaction } from './hooks/useSignTransaction.js';
+export { useSolanaWallet } from './hooks/useSolanaWallet.js';

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

@@ -6,11 +6,11 @@ import { defineChain, http } from 'viem';
 import { createConfig, WagmiProvider as WagmiProvider$1, useConfig, useAccountEffect } from 'wagmi';
 import { injected } from 'wagmi/connectors';
 import '@babel/runtime/helpers/defineProperty';
+import '@web3auth/auth';
 import 'deepmerge';
 import '../../config.js';
 import '../../ui/config.js';
 import '../../ui/css/index.css.js';
-import '@web3auth/auth';
 import 'react-dom/client';
 import '@toruslabs/http-helpers';
 import 'clsx';
@@ -99,6 +99,7 @@ function Web3AuthWagmiProvider({
       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");
         }
         await connectWeb3AuthWithWagmi(connector, wagmiConfig);

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

@@ -16,6 +16,7 @@ function ConnectWallet(props) {
     isDark,
     config,
     walletConnectUri,
+    metamaskConnectUri,
     walletRegistry,
     allExternalButtons,
     customConnectorButtons,
@@ -29,9 +30,7 @@ function ConnectWallet(props) {
   } = props;
   const {
     bodyState,
-    setBodyState,
-    toast,
-    setToast
+    setBodyState
   } = useContext(RootContext);
   const [currentPage, setCurrentPage] = useState(CONNECT_WALLET_PAGES.CONNECT_WALLET);
   const [selectedWallet, setSelectedWallet] = useState(false);
@@ -66,7 +65,7 @@ function ConnectWallet(props) {
   const defaultButtonKeys = useMemo(() => new Set(Object.keys(walletRegistry.default)), [walletRegistry]);
   const defaultButtons = useMemo(() => {
     // display order: default injected buttons > custom adapter buttons > default non-injected buttons
-    const buttons = [...allExternalButtons.filter(button => button.hasInjectedWallet && defaultButtonKeys.has(button.name)), ...customConnectorButtons, ...allExternalButtons.filter(button => !button.hasInjectedWallet && defaultButtonKeys.has(button.name))];
+    const buttons = [...allExternalButtons.filter(button => button.hasInjectedWallet && defaultButtonKeys.has(button.name)), ...customConnectorButtons, ...allExternalButtons.filter(button => !button.hasInjectedWallet && defaultButtonKeys.has(button.name))].sort((a, _) => a.name === WALLET_CONNECTORS.METAMASK ? -1 : 1);
     const buttonSet = new Set();
     return buttons.filter(button => {
       if (buttonSet.has(button.name)) return false;
@@ -102,7 +101,7 @@ function ConnectWallet(props) {
   };
   const filteredButtons = useMemo(() => {
     if (walletDiscoverySupported) {
-      return [...allUniqueButtons.filter(button => button.hasInjectedWallet), ...allUniqueButtons.filter(button => !button.hasInjectedWallet)].filter(button => selectedChain === "all" || button.chainNamespaces.includes(selectedChain)).filter(button => button.name.toLowerCase().includes(walletSearch.toLowerCase()));
+      return [...allUniqueButtons.filter(button => button.hasInjectedWallet), ...allUniqueButtons.filter(button => !button.hasInjectedWallet)].sort((a, _) => a.name === WALLET_CONNECTORS.METAMASK ? -1 : 1).filter(button => selectedChain === "all" || button.chainNamespaces.includes(selectedChain)).filter(button => button.name.toLowerCase().includes(walletSearch.toLowerCase()));
     }
     return installedWalletButtons;
   }, [walletDiscoverySupported, installedWalletButtons, walletSearch, allUniqueButtons, selectedChain]);
@@ -123,8 +122,10 @@ function ConnectWallet(props) {
     const isChainNamespaceSelectorRequired = button.hasInjectedWallet && ((_button$chainNamespac2 = button.chainNamespaces) === null || _button$chainNamespac2 === void 0 ? void 0 : _button$chainNamespac2.length) > 1;
     if (isChainNamespaceSelectorRequired) {
       setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
-        showMultiChainSelector: true,
-        walletDetails: button
+        multiChainSelector: {
+          show: true,
+          wallet: button
+        }
       }));
       return;
     }
@@ -143,14 +144,23 @@ function ConnectWallet(props) {
       handleWalletDetailsHeight();
     } else {
       setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
-        showWalletDetails: true,
-        walletDetails: button
+        installLinks: {
+          show: true,
+          wallet: button
+        }
       }));
     }
   };
   const handleMoreWallets = () => {
     setIsShowAllWallets(true);
   };
+  const qrCodeValue = useMemo(() => {
+    if (!selectedWallet) return null;
+    if (selectedButton.name === WALLET_CONNECTORS.METAMASK && !selectedButton.hasInjectedWallet) {
+      return metamaskConnectUri;
+    }
+    return walletConnectUri;
+  }, [metamaskConnectUri, selectedButton, selectedWallet, walletConnectUri]);
   return /*#__PURE__*/jsxs("div", {
     className: "w3a--relative w3a--flex w3a--flex-1 w3a--flex-col w3a--gap-y-4",
     children: [/*#__PURE__*/jsx(ConnectWalletHeader, {
@@ -158,15 +168,11 @@ function ConnectWallet(props) {
       currentPage: currentPage,
       selectedButton: selectedButton
     }), selectedWallet ? /*#__PURE__*/jsx(ConnectWalletQrCode, {
-      toast: toast,
-      setToast: setToast,
-      walletConnectUri: walletConnectUri,
+      qrCodeValue: qrCodeValue,
       isDark: isDark,
       selectedButton: selectedButton,
-      bodyState: bodyState,
       primaryColor: (_selectedButton$walle = selectedButton.walletRegistryItem) === null || _selectedButton$walle === void 0 ? void 0 : _selectedButton$walle.primaryColor,
-      logoImage: `https://images.web3auth.io/login-${selectedButton.name}.${selectedButton.imgExtension}`,
-      setBodyState: setBodyState
+      logoImage: `https://images.web3auth.io/login-${selectedButton.name}.${selectedButton.imgExtension}`
     }) : /*#__PURE__*/jsxs("div", {
       className: "w3a--flex w3a--flex-col w3a--gap-y-2",
       children: [/*#__PURE__*/jsx(ConnectWalletChainFilter, {

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

@@ -1,9 +1,10 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import Bowser from 'bowser';
-import { useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { QRCode } from 'react-qrcode-logo';
 import { WALLET_CONNECT_LOGO } from '../../../constants.js';
+import { RootContext } from '../../../context/RootContext.js';
 import i18nInstance from '../../../localeImport.js';
 import Image from '../../Image/Image.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -14,11 +15,13 @@ function ConnectWalletQrCode(props) {
     i18n: i18nInstance
   });
   const {
-    walletConnectUri,
+    bodyState,
+    setBodyState
+  } = useContext(RootContext);
+  const {
+    qrCodeValue,
     isDark,
     selectedButton,
-    setBodyState,
-    bodyState,
     logoImage,
     primaryColor
   } = props;
@@ -33,7 +36,7 @@ function ConnectWalletQrCode(props) {
   const qrColor = primaryColor && primaryColor.toLowerCase() === "#ffffff" ? "#000000" : primaryColor;
   return /*#__PURE__*/jsxs("div", {
     className: "w3a--contents",
-    children: [walletConnectUri ? /*#__PURE__*/jsxs("div", {
+    children: [qrCodeValue ? /*#__PURE__*/jsxs("div", {
       className: "w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4 w3a--rounded-2xl w3a--border w3a--border-app-gray-200 w3a--p-4 dark:w3a--border-app-gray-700",
       children: [/*#__PURE__*/jsx("div", {
         className: "w3a--relative w3a--flex w3a--size-[300px] w3a--items-center w3a--justify-center w3a--rounded-2xl",
@@ -43,7 +46,7 @@ function ConnectWalletQrCode(props) {
           qrStyle: "dots",
           removeQrCodeBehindLogo: true,
           logoImage: logoImage || WALLET_CONNECT_LOGO,
-          value: walletConnectUri,
+          value: qrCodeValue,
           logoHeight: 32,
           logoWidth: 32,
           logoPadding: 10,
@@ -78,8 +81,10 @@ function ConnectWalletQrCode(props) {
         className: "w3a--appearance-none w3a--rounded-full w3a--border w3a--border-app-gray-200 w3a--bg-transparent w3a--px-5 w3a--py-2 w3a--text-base w3a--font-normal w3a--text-app-gray-700 w3a--transition-all w3a--duration-150 hover:w3a--border-transparent hover:w3a--shadow-light active:w3a--scale-95 dark:w3a--border-app-gray-700 dark:w3a--text-app-gray-300 dark:hover:w3a--border-transparent dark:hover:w3a--shadow-dark",
         onClick: () => {
           setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
-            showWalletDetails: true,
-            walletDetails: selectedButton
+            installLinks: {
+              show: true,
+              wallet: selectedButton
+            }
           }));
         },
         children: t("modal.external.get-wallet")

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

@@ -51,6 +51,7 @@ function Login(props) {
     setBodyState
   } = useContext(RootContext);
   const [countryCode, setCountryCode] = useState("");
+  const [countryFlag, setCountryFlag] = useState("");
   const [passwordlessErrorMessage, setPasswordlessErrorMessage] = useState("");
   const [otpErrorMessage, setOtpErrorMessage] = useState("");
   const [expand, setExpand] = useState(false);
@@ -215,8 +216,8 @@ function Login(props) {
     if (isSmsPasswordLessLoginVisible) {
       const number = loginHint.startsWith("+") ? loginHint : `${countryCode}${loginHint}`;
       const result = await validatePhoneNumber(number);
-      if (result) {
-        const finalLoginHint = typeof result === "string" ? result : number;
+      if (result.success) {
+        const finalLoginHint = typeof result.parsed_number === "string" ? result.parsed_number : number;
         const connectorConfig = socialLoginsConfig.loginMethods[AUTH_CONNECTION.SMS_PASSWORDLESS];
         if (connectorConfig.isDefault) {
           return handleSocialLoginClick({
@@ -231,6 +232,7 @@ function Login(props) {
             }
           });
         } else {
+          setCountryFlag(result.country_flag);
           return handleCustomLogin(AUTH_CONNECTION.SMS_PASSWORDLESS, finalLoginHint);
         }
       }
@@ -303,11 +305,24 @@ function Login(props) {
   };
   const handleInstalledWalletClick = wallet => {
     var _wallet$chainNamespac;
+    // for non-injected Metamask, show QR code to connect
+    if (wallet.name === WALLET_CONNECTORS.METAMASK && !wallet.hasInjectedWallet) {
+      setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+        metamaskQrCode: {
+          show: true,
+          wallet: wallet
+        }
+      }));
+      return;
+    }
+
     // when having multiple namespaces, ask user to select one
     if (((_wallet$chainNamespac = wallet.chainNamespaces) === null || _wallet$chainNamespac === void 0 ? void 0 : _wallet$chainNamespac.length) > 1) {
       setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
-        showMultiChainSelector: true,
-        walletDetails: wallet
+        multiChainSelector: {
+          show: true,
+          wallet: wallet
+        }
       }));
     } else {
       handleExternalWalletClick({
@@ -327,7 +342,8 @@ function Login(props) {
       setShowOtpFlow: setShowOtpFlow,
       authConnection: authConnection,
       handleOtpComplete: handleOtpComplete,
-      errorMessage: otpErrorMessage
+      errorMessage: otpErrorMessage,
+      countryFlag: countryFlag
     });
   }
   const socialLoginSection = (otherRow = []) => {
@@ -482,7 +498,7 @@ function Login(props) {
     children: [/*#__PURE__*/jsxs("div", {
       className: cn("w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2 w3a--pt-6", logoAlignment === "center" ? "" : "w3a--w-full"),
       children: [/*#__PURE__*/jsx("figure", {
-        className: cn("w3a--mx-auto w3a--h-12 w3a--w-[200px]", logoAlignment === "center" ? "w3a--flex w3a--justify-center w3a--items-center" : "w3a--ml-0"),
+        className: cn("w3a--mx-auto w3a--h-12 w3a--w-[200px]", logoAlignment === "center" ? "w3a--flex w3a--justify-center w3a--items-center" : "w3a--ml-0 w3a--w-auto"),
         children: /*#__PURE__*/jsx("img", {
           src: headerLogo || getIcons(isDark ? "logo-dark" : "logo-light"),
           alt: "Logo",

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

@@ -18,7 +18,8 @@ function OtpInput(props) {
     authConnection,
     loginHint = "",
     errorMessage,
-    otpLoading
+    otpLoading,
+    countryFlag
   } = props;
   const isMobileOtp = useMemo(() => authConnection === AUTH_CONNECTION.SMS_PASSWORDLESS, [authConnection]);
   const [t] = useTranslation(undefined, {
@@ -28,8 +29,8 @@ function OtpInput(props) {
     if (authConnection === AUTH_CONNECTION.EMAIL_PASSWORDLESS) return loginHint;
     const [countryCode, number] = loginHint.includes("-") ? loginHint.split("-") : ["", loginHint];
     const masked = `${number}`.slice(-Math.floor(number.length / 2)).padStart(`${number}`.length, "*");
-    return `${countryCode} ${masked}`;
-  }, [loginHint, authConnection]);
+    return `${countryFlag} ${countryCode} ${masked}`;
+  }, [loginHint, authConnection, countryFlag]);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("div", {
       className: "w3a--mr-auto w3a--flex w3a--w-full w3a--items-start w3a--justify-start",
@@ -57,17 +58,17 @@ function OtpInput(props) {
         alt: "otp",
         className: "w3a--size-auto"
       }), /*#__PURE__*/jsxs("div", {
-        className: "-w3a--mt-6 w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
+        className: "w3a--mx-auto -w3a--mt-6 w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
         children: [/*#__PURE__*/jsx("p", {
           className: "w3a--text-lg w3a--font-bold w3a--text-app-gray-900 dark:w3a--text-app-white",
           children: isMobileOtp ? t("modal.otp.mobile-title") : t("modal.otp.email-title")
         }), /*#__PURE__*/jsxs("div", {
-          className: "w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-1",
+          className: "w3a--mx-auto w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-1",
           children: [/*#__PURE__*/jsx("p", {
-            className: "w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
+            className: "w3a--text-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
             children: isMobileOtp ? t("modal.otp.mobile-subtext") : t("modal.otp.email-subtext")
           }), /*#__PURE__*/jsx("p", {
-            className: "w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
+            className: "w3a--text-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
             children: isMobileOtp ? parsedLoginHint : t("modal.otp.email-subtext-example", {
               email: parsedLoginHint
             })
@@ -97,7 +98,8 @@ function LoginOtp(props) {
     handleOtpComplete,
     authConnection,
     loginHint,
-    errorMessage
+    errorMessage,
+    countryFlag
   } = props;
   return /*#__PURE__*/jsx("div", {
     className: "w3a--flex w3a--size-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
@@ -107,7 +109,8 @@ function LoginOtp(props) {
       handleOtpComplete: handleOtpComplete,
       authConnection: authConnection,
       loginHint: loginHint,
-      otpLoading: otpLoading
+      otpLoading: otpLoading,
+      countryFlag: countryFlag
     })
   });
 }