feat: Add fuzzy matching for name lookup (#25264)

## **Description**

1. What is the reason for the change? Snaps can't indicate whether
they've exact matched or fuzzy matched without responding with a
`domainName` property that the UI can display.
2. What is the improvement/solution? Changes in the namelookup API are
being integrated and the UI logic was changed to display the
`domainName` returned in the snap response instead of `userInput`.

Demo:



https://github.com/MetaMask/metamask-extension/assets/41640681/709ad071-7cbf-40d9-9d5f-9bca5a901ef8



## **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/develop/.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/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.

ui/components/multichain/pages/send/components/recipient.tsx

@@ -54,6 +54,7 @@ export const SendPageRecipient = () => {
     resolvingSnap?: string;
     protocol: string;
     addressBookEntryName?: string;
+    domainName: string;
   };
 
   const onClick = (
@@ -90,18 +91,23 @@ export const SendPageRecipient = () => {
     );
   } else if (domainResolutions?.length > 0 && !recipient.error) {
     contents = domainResolutions.map((domainResolution: DomainResolution) => {
-      const { resolvedAddress, resolvingSnap, addressBookEntryName, protocol } =
-        domainResolution;
+      const {
+        resolvedAddress,
+        resolvingSnap,
+        addressBookEntryName,
+        protocol,
+        domainName,
+      } = domainResolution;
       return (
         <DomainInputResolutionCell
           key={`${resolvedAddress}${resolvingSnap}${protocol}`}
           domainType={domainType}
           address={resolvedAddress}
-          domainName={addressBookEntryName ?? userInput}
+          domainName={addressBookEntryName ?? domainName}
           onClick={() =>
             onClick(
               resolvedAddress,
-              addressBookEntryName ?? userInput,
+              addressBookEntryName ?? domainName,
               'Domain resolution',
             )
           }

ui/ducks/domains.js

@@ -300,6 +300,7 @@ export function lookupDomainName(domainName) {
             resolvedAddress: address,
             protocol: 'Ethereum Name Service',
             addressBookEntryName: getAddressBookEntry(state, address)?.name,
+            domainName: trimmedDomainName,
           },
         ];
       } else {

ui/pages/confirmations/send/send-content/add-recipient/domain-input.component.js

@@ -182,7 +182,7 @@ export default class DomainInput extends Component {
               <ButtonIcon
                 className="ens-input__wrapper__action-icon-button"
                 onClick={() => {
-                  if (userInput.length > 0) {
+                  if (userInput?.length > 0) {
                     this.props.onReset();
                   } else {
                     this.props.scanQrCode();

ui/pages/settings/contact-list-tab/add-contact/add-contact.component.js

@@ -138,16 +138,16 @@ export default class AddContact extends PureComponent {
                   resolvingSnap,
                   addressBookEntryName,
                   protocol,
+                  domainName,
                 } = resolution;
-                const domainName = addressBookEntryName || this.state.input;
                 return (
                   <DomainInputResolutionCell
                     key={`${resolvedAddress}${resolvingSnap}${protocol}`}
                     domainType={
                       protocol === 'Ethereum Name Service' ? 'ENS' : 'Other'
                     }
                     address={resolvedAddress}
-                    domainName={domainName}
+                    domainName={addressBookEntryName ?? domainName}
                     onClick={() => {
                       this.setState({
                         selectedAddress: resolvedAddress,