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

ui/ducks/send/send.js

@@ -1261,6 +1261,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
@@ -1268,8 +1272,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

@@ -1395,6 +1395,7 @@ describe('Send Slice', () => {
 
         const updateRecipientState = {
           metamask: {
+            addressBook: {},
             provider: {
               chainId: '0x1',
             },
@@ -1440,9 +1441,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: {
@@ -1496,6 +1563,7 @@ describe('Send Slice', () => {
       it('should create actions to reset recipient input and ens then validates input', async () => {
         const updateRecipientState = {
           metamask: {
+            addressBook: {},
             provider: {
               chainId: '',
             },