Ensure that the send flow state recipient nickname gets set if recipient address is in addressBook (#11610)

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [9.8.3]
 ### Fixed
 - [#11594](https://github.com/MetaMask/metamask-extension/pull/11594): Fixed ERC20 token maximum send
+- [#11610](https://github.com/MetaMask/metamask-extension/pull/11610): Fixed nickname display upon pasting saved address in send flow
 
 ## [9.8.2]
 ### Changed

ui/ducks/send/send.js

@@ -1209,6 +1209,10 @@ export function useMyAccountsForRecipientSearch() {
  * address results in hex data changing because the recipient address is
  * encoded in the data instead of being in the 'to' field. The to field in a
  * token send will always be the token contract address.
+ * If no nickname is provided, the address book state will be checked to see if
+ * a nickname for the passed address has already been saved. This ensures the
+ * (temporary) send state recipient nickname is consistent with the address book
+ * nickname which has already been persisted to state.
  * @param {Object} recipient - Recipient information
  * @param {string} recipient.address - hex address to send the transaction to
  * @param {string} [recipient.nickname] - Alias for the address to display
@@ -1216,8 +1220,16 @@ export function useMyAccountsForRecipientSearch() {
  * @returns {void}
  */
 export function updateRecipient({ address, nickname }) {
-  return async (dispatch) => {
-    await dispatch(actions.updateRecipient({ address, nickname }));
+  return async (dispatch, getState) => {
+    const state = getState();
+    const nicknameFromAddressBook =
+      getAddressBookEntry(state, address)?.name ?? '';
+    await dispatch(
+      actions.updateRecipient({
+        address,
+        nickname: nickname || nicknameFromAddressBook,
+      }),
+    );
     await dispatch(computeEstimatedGasLimit());
   };
 }

ui/ducks/send/send.test.js

@@ -1419,6 +1419,7 @@ describe('Send Slice', () => {
 
         const updateRecipientState = {
           metamask: {
+            addressBook: {},
             provider: {
               chainId: '0x1',
             },
@@ -1464,9 +1465,75 @@ describe('Send Slice', () => {
         );
       });
 
+      it('should update recipient nickname if the passed address exists in the addressBook state but no nickname param is provided', async () => {
+        global.eth = {
+          getCode: sinon.stub(),
+        };
+
+        const TEST_RECIPIENT_ADDRESS =
+          '0x0000000000000000000000000000000000000001';
+        const TEST_RECIPIENT_NAME = 'The 1 address';
+
+        const updateRecipientState = {
+          metamask: {
+            addressBook: {
+              '0x1': [
+                {
+                  address: TEST_RECIPIENT_ADDRESS,
+                  name: TEST_RECIPIENT_NAME,
+                },
+              ],
+            },
+            provider: {
+              chainId: '0x1',
+            },
+          },
+          send: {
+            account: {
+              balance: '',
+            },
+            asset: {
+              type: '',
+            },
+            gas: {
+              gasPrice: '',
+            },
+            recipient: {
+              address: '',
+            },
+            amount: {
+              value: '',
+            },
+            draftTransaction: {
+              userInputHexData: '',
+            },
+          },
+        };
+
+        const store = mockStore(updateRecipientState);
+
+        await store.dispatch(
+          updateRecipient({
+            address: '0x0000000000000000000000000000000000000001',
+            nickname: '',
+          }),
+        );
+
+        const actionResult = store.getActions();
+        expect(actionResult).toHaveLength(4);
+        expect(actionResult[0].type).toStrictEqual('send/updateRecipient');
+        expect(actionResult[0].payload.address).toStrictEqual(
+          TEST_RECIPIENT_ADDRESS,
+        );
+        expect(actionResult[0].payload.nickname).toStrictEqual(
+          TEST_RECIPIENT_NAME,
+        );
+      });
+
       it('should create actions to reset recipient input and ens, calculate gas and then validate input', async () => {
         const tokenState = {
           metamask: {
+            addressBook: {},
             blockGasLimit: '',
             selectedAddress: '',
             provider: {
@@ -1520,6 +1587,7 @@ describe('Send Slice', () => {
       it('should create actions to reset recipient input and ens then validates input', async () => {
         const updateRecipientState = {
           metamask: {
+            addressBook: {},
             provider: {
               chainId: '',
             },