Show account name & full address in send view - issue #12346 (#12415)

* account name & address in send view UI update & fix

* update scss in send modal view

* send account address - refacto func

ui/ducks/send/send.js

@@ -40,6 +40,7 @@ import {
   checkNetworkAndAccountSupports1559,
   getUseTokenDetection,
   getTokenList,
+  getAddressBookEntryOrAccountName,
 } from '../../selectors';
 import {
   disconnectGasFeeEstimatePoller,
@@ -1444,12 +1445,12 @@ export function useMyAccountsForRecipientSearch() {
 export function updateRecipient({ address, nickname }) {
   return async (dispatch, getState) => {
     const state = getState();
-    const nicknameFromAddressBook =
-      getAddressBookEntry(state, address)?.name ?? '';
+    const nicknameFromAddressBookEntryOrAccountName =
+      getAddressBookEntryOrAccountName(state, address) ?? '';
     await dispatch(
       actions.updateRecipient({
         address,
-        nickname: nickname || nicknameFromAddressBook,
+        nickname: nickname || nicknameFromAddressBookEntryOrAccountName,
       }),
     );
     await dispatch(computeEstimatedGasLimit());

ui/ducks/send/send.test.js

@@ -1626,6 +1626,7 @@ describe('Send Slice', () => {
         const updateRecipientState = {
           metamask: {
             addressBook: {},
+            identities: {},
             provider: {
               chainId: '0x1',
             },
@@ -1740,6 +1741,7 @@ describe('Send Slice', () => {
         const tokenState = {
           metamask: {
             addressBook: {},
+            identities: {},
             blockGasLimit: '',
             selectedAddress: '',
             provider: {
@@ -1794,6 +1796,7 @@ describe('Send Slice', () => {
         const updateRecipientState = {
           metamask: {
             addressBook: {},
+            identities: {},
             provider: {
               chainId: '',
             },

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

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { ellipsify } from '../../send.utils';
 import { isValidDomainName } from '../../../../helpers/utils/util';
 import {
   isBurnAddress,
@@ -106,9 +105,9 @@ export default class EnsInput extends Component {
             <>
               <div className="ens-input__wrapper__input ens-input__wrapper__input--selected">
                 <div className="ens-input__selected-input__title">
-                  {selectedName || ellipsify(selectedAddress)}
+                  {selectedName || selectedAddress}
                 </div>
-                {selectedName && (
+                {selectedName !== selectedAddress && (
                   <div className="ens-input__selected-input__subtitle">
                     {selectedAddress}
                   </div>

ui/pages/send/send.scss

@@ -180,17 +180,13 @@
     &__status-icon {
       @extend %bg-contain;
 
-      background-image: url("/images/search-black.svg");
+      background-image: url('/images/search-black.svg');
       width: 1.125rem;
       height: 1.125rem;
       margin: 0.25rem 0.5rem 0.25rem 0.25rem;
 
-      &--error {
-
-      }
-
       &--valid {
-        background-image: url("/images/check-green-solid.svg");
+        background-image: url('/images/check-green-solid.svg');
       }
     }
 
@@ -213,7 +209,7 @@
       cursor: pointer;
 
       &--erase {
-        background-image: url("/images/close-gray.svg");
+        background-image: url('/images/close-gray.svg');
         background-color: unset;
         width: 0.75rem;
         height: 0.75rem;
@@ -221,7 +217,7 @@
       }
 
       &--qrcode {
-        background-image: url("/images/qr-blue.svg");
+        background-image: url('/images/qr-blue.svg');
         background-color: unset;
         width: 1.5rem;
         height: 1.5rem;
@@ -234,7 +230,7 @@
 
       .ens-input__wrapper {
         &__status-icon {
-          background-image: url("/images/check-green-solid.svg");
+          background-image: url('/images/check-green-solid.svg');
         }
 
         &__input {
@@ -253,6 +249,9 @@
       @include H6;
 
       @extend %ellipsify;
+
+      word-wrap: break-word;
+      white-space: inherit !important;
     }
 
     &__subtitle {

ui/pages/settings/settings.container.js

@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-import { getAddressBookEntryName } from '../../selectors';
+import { getAddressBookEntryOrAccountName } from '../../selectors';
 import { ENVIRONMENT_TYPE_POPUP } from '../../../shared/constants/app';
 import { getEnvironmentType } from '../../../app/scripts/lib/util';
 import { getMostRecentOverviewPage } from '../../ducks/history/history';
@@ -72,7 +72,7 @@ const mapStateToProps = (state, ownProps) => {
   let initialBreadCrumbRoute;
   let initialBreadCrumbKey;
 
-  const addressName = getAddressBookEntryName(
+  const addressName = getAddressBookEntryOrAccountName(
     state,
     !isBurnAddress(pathNameTail) &&
       isValidHexAddress(pathNameTail, { mixedCaseUseChecksum: true })

ui/selectors/selectors.js

@@ -303,10 +303,13 @@ export function getAddressBookEntry(state, address) {
   return entry;
 }
 
-export function getAddressBookEntryName(state, address) {
+export function getAddressBookEntryOrAccountName(state, address) {
   const entry =
-    getAddressBookEntry(state, address) || state.metamask.identities[address];
-  return entry && entry.name !== '' ? entry.name : shortenAddress(address);
+    getAddressBookEntry(state, address) ||
+    Object.values(state.metamask.identities).find((identity) =>
+      isEqualCaseInsensitive(identity.address, toChecksumHexAddress(address)),
+    );
+  return entry && entry.name !== '' ? entry.name : address;
 }
 
 export function accountsWithSendEtherInfoSelector(state) {