ENS support for Faucet (#1667)

ENS support for Faucet (#1667)

Author: Vlad Lobachov

docusaurus.config.js

@@ -38,6 +38,7 @@ const config = {
     DASHBOARD_URL: process.env.DASHBOARD_URL || 'http://localhost:3000',
     SENTRY_KEY: process.env.SENTRY_KEY,
     GF_SURVEY_KEY: process.env.GF_SURVEY_KEY,
+    LINEA_ENS_URL: process.env.LINEA_ENS_URL,
   },
 
   trailingSlash: true,

src/components/AuthLogin/AuthModal.tsx

@@ -12,9 +12,11 @@ import {
   AUTH_WALLET_PROJECTS,
   saveTokenString,
   getUserIdFromJwtToken,
-  AUTH_WALLET_USER_PLAN,
 } from "../../lib/siwsrp/auth";
-import { REQUEST_PARAMS } from "@site/src/lib/constants";
+import {
+  REQUEST_PARAMS,
+  AUTH_WALLET_USER_PLAN,
+} from "@site/src/lib/constants";
 import { MetamaskProviderContext } from "@site/src/theme/Root";
 
 Modal.setAppElement("#__docusaurus");
@@ -154,6 +156,7 @@ const AuthModal = ({
     setProjects,
     setMetaMaskAccount,
     setMetaMaskProvider,
+    fetchLineaEns,
   } = useContext(MetamaskProviderContext);
   const location = useLocation();
   const { pathname } = location;
@@ -167,9 +170,10 @@ const AuthModal = ({
 
       // Try to connect wallet first
       const accounts = await sdk.connect();
-      setMetaMaskAccount(accounts);
+
       if (accounts && accounts.length > 0) {
         setMetaMaskAccount(accounts[0]);
+        fetchLineaEns(accounts[0]);
         const provider = sdk.getProvider();
         setMetaMaskProvider(provider);
       }

src/components/Faucet/Hero.tsx

@@ -121,7 +121,7 @@ export default function Hero({
               label="Wallet address"
               disabled={isLoading}
               value={inputValue}
-              placeholder="ex. 0x"
+              placeholder="ex. 0x or ENS"
               onChange={handleOnInputChange}
             />
             {isLimitedUserPlan && (

src/components/NavbarWallet/index.tsx

@@ -16,6 +16,9 @@ interface INavbarWalletComponent {
 
 const LOGIN_FF = "mm-unified-login";
 
+const reformatMetamaskAccount = (account) =>
+  account ? `${account.slice(0, 7)}...${account.slice(-5)}` : null;
+
 const NavbarWalletComponent: FC = ({
   includeUrl = [],
 }: INavbarWalletComponent) => {
@@ -27,6 +30,7 @@ const NavbarWalletComponent: FC = ({
   const COPIED_TEXT = "Copied!";
   const {
     metaMaskAccount,
+    metaMaskAccountEns,
     sdk,
     metaMaskWalletIdConnectHandler,
     metaMaskDisconnect,
@@ -36,6 +40,9 @@ const NavbarWalletComponent: FC = ({
   const isExtensionActive = sdk.isExtensionActive();
   const dialogRef = useRef<HTMLUListElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
+  const [userAccount, setUserAccount] = useState(
+    metaMaskAccountEns || metaMaskAccount,
+  );
 
   const toggleDropdown = () => {
     setDropdownOpen((value) => !value);
@@ -50,7 +57,7 @@ const NavbarWalletComponent: FC = ({
   };
 
   const handleCopy = () => {
-    navigator.clipboard.writeText(metaMaskAccount);
+    navigator.clipboard.writeText(userAccount);
     setCopyMessage(COPIED_TEXT);
     trackClickForSegment({
       eventName: "Copy wallet address",
@@ -110,7 +117,17 @@ const NavbarWalletComponent: FC = ({
     metaMaskWalletIdConnectHandler();
   };
 
-  return !metaMaskAccount ? (
+  useEffect(() => {
+    if (metaMaskAccountEns) {
+      setUserAccount(metaMaskAccountEns);
+    } else if (metaMaskAccount) {
+      setUserAccount(metaMaskAccount);
+    } else {
+      setUserAccount(null);
+    }
+  }, [metaMaskAccount, metaMaskAccountEns]);
+
+  return !userAccount ? (
     <Button
       testId={
         !isExtensionActive
@@ -145,9 +162,9 @@ const NavbarWalletComponent: FC = ({
               className={styles.avatar}
               alt="avatar"
             />{" "}
-            <span
-              className={styles.walletId}
-            >{`${metaMaskAccount.slice(0, 7)}...${metaMaskAccount.slice(-5)}`}</span>
+            <span className={styles.walletId}>
+              {metaMaskAccountEns || reformatMetamaskAccount(userAccount)}
+            </span>
             <button
               data-testid="navbar-account-copy"
               className={styles.copyButton}

src/lib/constants.js src/lib/constants.tssrc/lib/constants.js renamed to src/lib/constants.ts

@@ -450,9 +450,9 @@ export const REF_WALLET_PATH = "/wallet/reference/";
 export const REF_FAUCET_PATH = "/developer-tools/faucet/";
 
 export const REF_ALLOW_LOGIN_PATH = [
-    REF_SERVICES_PATH,
-    REF_WALLET_PATH,
-    REF_FAUCET_PATH,
+  REF_SERVICES_PATH,
+  REF_WALLET_PATH,
+  REF_FAUCET_PATH,
 ];
 
 export const REQUEST_PARAMS = (method = "POST", headers = {}) => ({
@@ -467,9 +467,17 @@ export const REQUEST_PARAMS = (method = "POST", headers = {}) => ({
   },
 });
 
-export const AUTH_WALLET_SESSION_NAME = "auth.wallet.session";
-export const AUTH_WALLET_TOKEN = "auth.wallet.token";
-export const AUTH_WALLET_PROJECTS = "auth.wallet.projects";
-export const LINEA_DEV_URL = "https://linea-mainnet.dev.infura.org";
 export const LINEA_PROD_URL = "https://linea-mainnet.infura.io";
+export const LINEA_DEV_URL = "https://linea-mainnet.dev.infura.org";
 export const LINEA_REQUEST_URL = LINEA_PROD_URL;
+export const AUTH_WALLET_ENS = "auth.wallet.ens";
+export const AUTH_WALLET_PROJECTS = "auth.wallet.projects";
+export const AUTH_WALLET_USER_PLAN = "auth.wallet.uksTier";
+
+export const getWalletEns = () => {
+  return sessionStorage.getItem(AUTH_WALLET_ENS);
+};
+
+export const getUksTier = (): string => {
+  return sessionStorage.getItem(AUTH_WALLET_USER_PLAN);
+};

src/lib/siwsrp/auth.ts

@@ -14,7 +14,6 @@ export const AUTH_WALLET_PAIRING = 'auth.wallet.pairing'
 export const AUTH_WALLET_SESSION_NAME = 'auth.wallet.session'
 export const AUTH_WALLET_TOKEN = 'auth.wallet.token'
 export const AUTH_WALLET_PROJECTS = 'auth.wallet.projects'
-export const AUTH_WALLET_USER_PLAN = 'auth.wallet.uksTier'
 
 const getHydraEnv = (env: string): HydraEnv => {
   const platform = Platform.INFURA;
@@ -80,10 +79,6 @@ export const getTokenString = (): string => {
   return sessionStorage.getItem(AUTH_WALLET_TOKEN)
 }
 
-export const getUksTier = (): string => {
-  return sessionStorage.getItem(AUTH_WALLET_USER_PLAN)
-}
-
 export const getUserIdFromJwtToken = () => {
   const token = sessionStorage.getItem(AUTH_WALLET_TOKEN);
   const decoded = jwt.decode(token as string, { complete: true }) as jwt.Jwt;
@@ -93,8 +88,6 @@ export const getUserIdFromJwtToken = () => {
 
 export const clearStorage = () => {
   sessionStorage.clear();
-  localStorage.removeItem(AUTH_WALLET_PAIRING);
   localStorage.removeItem(AUTH_WALLET_SESSION_NAME);
-  localStorage.removeItem(AUTH_WALLET_TOKEN);
-  localStorage.removeItem(AUTH_WALLET_PROJECTS);
+  localStorage.removeItem(AUTH_WALLET_PAIRING);
 };

src/pages/developer-tools/faucet.tsx

@@ -15,8 +15,7 @@ import {
   AlertPastActivity,
 } from "@site/src/components/Faucet";
 import { useAlert } from "react-alert";
-import {MetamaskProviderContext} from "@site/src/theme/Root";
-
+import { MetamaskProviderContext } from "@site/src/theme/Root";
 import styles from "./faucet.module.scss";
 import { REQUEST_PARAMS } from "@site/src/lib/constants";
 import { AlertBalanceTooLow } from "@site/src/components/Faucet/Alerts";
@@ -35,7 +34,8 @@ export const LINEA_URL = "https://sepolia.lineascan.build/tx/";
 
 export default function Faucet() {
   const { siteConfig } = useDocusaurusContext();
-  const { userId, token, uksTier, metaMaskAccount } = useContext(MetamaskProviderContext);
+  const { userId, token, uksTier, metaMaskAccount, metaMaskAccountEns } =
+    useContext(MetamaskProviderContext);
   const alert = useAlert();
   const [transactions, setTransactions] = useState(DEFAULT_TRANSACTIONS_LIST);
   const [isLoading, setIsLoading] = useState(false);
@@ -175,10 +175,12 @@ export default function Faucet() {
   }, [userId, token]);
 
   useEffect(() => {
-    if (metaMaskAccount && !walletAddress) {
+    if (metaMaskAccountEns) {
+      setWalletAddress(metaMaskAccountEns);
+    } else if (metaMaskAccount) {
       setWalletAddress(metaMaskAccount);
     }
-  }, [metaMaskAccount]);
+  }, [metaMaskAccount, metaMaskAccountEns]);
 
   const tabItemContent = (network: "linea" | "sepolia") => {
     return (