feat: ens-resolver (#143)

* feat: resolve ens name in Impersonated Form

* chore: update placeholder

Author: smbdy

src/ui/utils/texts.ts

@@ -267,7 +267,7 @@ export const texts = {
     needHelpFAQ: 'Read FAQ',
     needHelpDescription:
       'By selecting a wallet from an External Provider, you agree to their Terms and Conditions. Your ability to access the wallet may depend on the External Provider being operational.',
-    impersonatedInputPlaceholder: 'Account address',
+    impersonatedInputPlaceholder: 'Account address or ENS name',
     impersonatedButtonTitle: 'Connect',
     representing: 'Representing',
     representative: 'You are representing',

src/web3/components/wallet/ImpersonatedForm.tsx

@@ -1,25 +1,58 @@
 import { WalletType } from '@bgd-labs/frontend-web3-utils';
 import { Box } from '@mui/system';
-import React from 'react';
+import React, { useState } from 'react';
 import { Field, Form } from 'react-final-form';
+import { isAddress } from 'viem';
 
 import { useStore } from '../../../store/ZustandStoreProvider';
 import { BigButton, Input } from '../../../ui';
 import { texts } from '../../../ui/utils/texts';
 import { appConfig } from '../../../utils/appConfig';
+import { isEnsName } from '../../utils/ensHelpers';
 
 export function ImpersonatedForm() {
   const impersonated = useStore((store) => store.impersonated);
   const setImpersonated = useStore((store) => store.setImpersonated);
   const connectWallet = useStore((store) => store.connectWallet);
+  const fetchAddressByEnsName = useStore(
+    (store) => store.fetchAddressByEnsName,
+  );
+
+  const [isResolving, setIsResolving] = useState(false);
+  const [error, setError] = useState<string | undefined>();
 
   const handleFormSubmit = async ({
     impersonatedAddress,
   }: {
     impersonatedAddress: string;
   }) => {
-    setImpersonated(impersonatedAddress);
-    await connectWallet(WalletType.Impersonated, appConfig.govCoreChainId);
+    setError(undefined);
+    setIsResolving(true);
+
+    try {
+      let resolvedAddress = impersonatedAddress;
+
+      if (isEnsName(impersonatedAddress)) {
+        const resolved = await fetchAddressByEnsName(impersonatedAddress);
+        if (!resolved) {
+          setError('Invalid ENS name or address not found');
+          setIsResolving(false);
+          return;
+        }
+        resolvedAddress = resolved;
+      } else if (!isAddress(impersonatedAddress)) {
+        setError('Invalid address format');
+        setIsResolving(false);
+        return;
+      }
+
+      setImpersonated(resolvedAddress);
+      await connectWallet(WalletType.Impersonated, appConfig.govCoreChainId);
+    } catch (err) {
+      setError('Failed to resolve address');
+    } finally {
+      setIsResolving(false);
+    }
   };
 
   return (
@@ -59,14 +92,32 @@ export function ImpersonatedForm() {
                 )}
               </Field>
 
+              {error && (
+                <Box
+                  sx={{
+                    color: '$error',
+                    fontSize: 12,
+                    mt: 8,
+                    textAlign: 'center',
+                  }}>
+                  {error}
+                </Box>
+              )}
+
               <Box
                 sx={{
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
                 }}>
-                <BigButton alwaysWithBorders type="submit" css={{ mt: 60 }}>
-                  {texts.walletConnect.impersonatedButtonTitle}
+                <BigButton
+                  alwaysWithBorders
+                  type="submit"
+                  css={{ mt: 60 }}
+                  disabled={isResolving}>
+                  {isResolving
+                    ? 'Resolving...'
+                    : texts.walletConnect.impersonatedButtonTitle}
                 </BigButton>
               </Box>
             </Box>