feat: Update Metamask login text to reflect browser-injected wallet

etherisc · Jun 4, 2024 · 0ae31c4 · 0ae31c4
1 parent c9797f2
commit 0ae31c4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -13,8 +13,8 @@
     "switch_network": "Switch to network '{{network}}'",
     "login_walletconnect": "Connect with WalletConnect",
     "login_walletconnect_short": "WalletConnect",
-    "login_metamask": "Connect with Metamask",
-    "login_metamask_short": "Metamask",
+    "login_metamask": "Connect with browser-injected wallet",
+    "login_metamask_short": "Browser-injected wallet",
     "login": "Connect",
     "disconnect": "Disconnect",
     "close": "Close",

diff --git a/src/components/account/login_metamask.tsx b/src/components/account/login_metamask.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from "next-i18next";
 import { useSnackbar } from "notistack";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faRightToBracket } from "@fortawesome/free-solid-svg-icons";
-import { useMediaQuery, useTheme } from "@mui/material";
+import { Typography, useMediaQuery, useTheme } from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function LoginWithMetaMaskButton(props: any) {
@@ -50,10 +50,15 @@ export default function LoginWithMetaMaskButton(props: any) {
 
     if (! isConnected ) {
         button = (
-            <Button variant="contained" color="secondary" onClick={login} sx={{ mr: 1}} fullWidth>
-                <FontAwesomeIcon icon={faRightToBracket} className="fa" />
-                {buttonText}
-            </Button>
+            <div>
+                <Button variant="contained" color="secondary" onClick={login} sx={{ mr: 1}} fullWidth>
+                    <FontAwesomeIcon icon={faRightToBracket} className="fa" />
+                    {buttonText}
+                </Button>
+                <Typography sx={{ textAlign: 'center' }} color="ButtonText">
+                    <small>(MetaMask, Rabby Wallet, Coinbase Wallet, ...)</small>
+                </Typography>
+            </div>
         );
     }