fix: Fix ens domain name resolution in confirmation after send flow (#37047)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/37047?quickstart=1)

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Fix showing ENS recipient if it's typed in the send
flow

## **Related issues**

Fixes: #36966

## **Manual testing steps**

1. Go to send flow
2. Pick ENS recipient
3. Proceed into confirmation - you should be able to see ENS in the
confirmation now

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [X] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> On EVM sends, dispatch a domain reverse lookup to populate store for
ENS display in confirmation; `lookupDomainName` now accepts an explicit
`chainId` and tests updated accordingly.
> 
> - **Hooks (send confirmations)**:
> - In `useNameValidation`, after a successful name resolution, dispatch
`lookupDomainName(to, chainId)` when `useSendType().isEvmSendType` is
true to populate store for ENS display.
> - Add `useDispatch` and `useSendType` usage; update hook dependencies.
> - **State (domains duck)**:
> - Update `lookupDomainName(domainName, chainId)` to accept optional
`chainId`, defaulting to `getCurrentChainId(state)`; compute
`chainIdInt` from the final value.
> - **Tests**:
> - Mock `useDispatch`, `lookupDomainName`, and `useSendType` in
`useNameValidation.test.ts`.
> - Add test asserting `lookupDomainName` is called with `('test.eth',
chainId)` on EVM send after resolution.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
0478753. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

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();
@@ -186,9 +186,8 @@ export function lookupDomainName(domainName) {
     await dispatch(lookupStart(trimmedDomainName));
     state = getState();
     log.info(`Resolvers attempting to resolve name: ${trimmedDomainName}`);
-
-    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 {