Fix ens domain name regression in confirmation after send flow

Author: OGPoyraz

ui/ducks/domains.js

@@ -176,7 +176,7 @@ export async function fetchResolutions({ domain, chainId, state }) {
   return filteredResults;
 }
 
-export function lookupDomainName(domainName) {
+export function lookupDomainName(domainName, chainId) {
   return async (dispatch, getState) => {
     const trimmedDomainName = domainName.trim();
     let state = getState();
@@ -187,8 +187,8 @@ export function lookupDomainName(domainName) {
     state = getState();
     log.info(`Resolvers attempting to resolve name: ${trimmedDomainName}`);
     let error;
-    const chainId = getCurrentChainId(state);
-    const chainIdInt = parseInt(chainId, 16);
+    const finalChainId = chainId || getCurrentChainId(state);
+    const chainIdInt = parseInt(finalChainId, 16);
     const resolutions = await fetchResolutions({
       domain: trimmedDomainName,
       chainId: `eip155:${chainIdInt}`,

ui/pages/confirmations/hooks/send/useNameValidation.test.ts

@@ -2,18 +2,46 @@ import { AddressResolution } from '@metamask/snaps-sdk';
 
 import mockState from '../../../../../test/data/mock-state.json';
 import { renderHookWithProvider } from '../../../../../test/lib/render-helpers';
+import { lookupDomainName } from '../../../../ducks/domains';
 // eslint-disable-next-line import/no-namespace
 import * as SnapNameResolution from '../../../../hooks/snaps/useSnapNameResolution';
 // eslint-disable-next-line import/no-namespace
 import * as SendValidationUtils from '../../utils/sendValidations';
 import { useNameValidation } from './useNameValidation';
+import { useSendType } from './useSendType';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  useDispatch: jest.fn().mockReturnValue((callback: any) => callback?.()),
+}));
 
 jest.mock('@metamask/bridge-controller', () => ({
   ...jest.requireActual('@metamask/bridge-controller'),
   formatChainIdToCaip: jest.fn(),
 }));
 
+jest.mock('../../../../ducks/domains', () => ({
+  lookupDomainName: jest.fn(),
+}));
+
+jest.mock('./useSendType', () => ({
+  useSendType: jest.fn().mockReturnValue({
+    isEvmSendType: false,
+  }),
+}));
+
 describe('useNameValidation', () => {
+  const lookupDomainNameMock = jest.mocked(lookupDomainName);
+  const useSendTypeMock = jest.mocked(useSendType);
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useSendTypeMock.mockReturnValue({
+      isEvmSendType: false,
+    } as unknown as ReturnType<typeof useSendType>);
+  });
+
   it('return function to validate name', () => {
     const { result } = renderHookWithProvider(
       () => useNameValidation(),
@@ -47,6 +75,38 @@ describe('useNameValidation', () => {
     });
   });
 
+  it('dispatch lookupDomainName when name is resolved', async () => {
+    useSendTypeMock.mockReturnValue({
+      isEvmSendType: true,
+    } as unknown as ReturnType<typeof useSendType>);
+    jest.spyOn(SnapNameResolution, 'useSnapNameResolution').mockReturnValue({
+      fetchResolutions: () =>
+        Promise.resolve([
+          {
+            resolvedAddress: 'dummy_address',
+            protocol: 'dummy_protocol',
+          } as unknown as AddressResolution,
+        ]),
+    });
+    const { result } = renderHookWithProvider(
+      () => useNameValidation(),
+      mockState,
+    );
+    expect(
+      await result.current.validateName(
+        '5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
+        'test.eth',
+      ),
+    ).toStrictEqual({
+      protocol: 'dummy_protocol',
+      resolvedLookup: 'dummy_address',
+    });
+    expect(lookupDomainNameMock).toHaveBeenCalledWith(
+      'test.eth',
+      '5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
+    );
+  });
+
   it('return confusable error and warning as name is resolved', async () => {
     jest
       .spyOn(SendValidationUtils, 'findConfusablesInRecipient')

ui/pages/confirmations/hooks/send/useNameValidation.ts

@@ -1,12 +1,17 @@
 import { formatChainIdToCaip } from '@metamask/bridge-controller';
+import { useDispatch } from 'react-redux';
 import { useCallback } from 'react';
 
 import { isValidDomainName } from '../../../../helpers/utils/util';
 import { useSnapNameResolution } from '../../../../hooks/snaps/useSnapNameResolution';
 import { findConfusablesInRecipient } from '../../utils/sendValidations';
+import { lookupDomainName } from '../../../../ducks/domains';
+import { useSendType } from './useSendType';
 
 export const useNameValidation = () => {
   const { fetchResolutions } = useSnapNameResolution();
+  const dispatch = useDispatch();
+  const { isEvmSendType } = useSendType();
 
   const validateName = useCallback(
     async (chainId: string, to: string) => {
@@ -25,6 +30,12 @@ export const useNameValidation = () => {
         const resolvedLookup = resolutions[0]?.resolvedAddress;
         const protocol = resolutions[0]?.protocol;
 
+        // In order to display the ENS name component we need to initiate reverse lookup by calling lookupDomainName
+        // so the domain resolution will be available in the store then Name component will use it in the confirmation
+        if (isEvmSendType) {
+          dispatch(lookupDomainName(to, chainId));
+        }
+
         return {
           resolvedLookup,
           protocol,
@@ -36,7 +47,7 @@ export const useNameValidation = () => {
         error: 'nameResolutionFailedError',
       };
     },
-    [fetchResolutions],
+    [dispatch, fetchResolutions],
   );
 
   return {