Fix sending maximum of an ERC20 token (#11594)

* Fix sending maximum of an ERC20 token

* Always update gas limit when send amount updates

ui/ducks/send/send.js

@@ -1112,9 +1112,7 @@ export function updateSendAmount(amount) {
     if (state.send.amount.mode === AMOUNT_MODES.MAX) {
       await dispatch(actions.updateAmountMode(AMOUNT_MODES.INPUT));
     }
-    if (state.send.asset.type === ASSET_TYPES.TOKEN) {
+    await dispatch(computeEstimatedGasLimit());
-      await dispatch(computeEstimatedGasLimit());
-    }
   };
 }
 
@@ -1274,6 +1272,7 @@ export function toggleSendMaxMode() {
       await dispatch(actions.updateAmountMode(AMOUNT_MODES.MAX));
       await dispatch(actions.updateAmountToMax());
     }
+    await dispatch(computeEstimatedGasLimit());
   };
 }
 

ui/ducks/send/send.test.js

@@ -1069,7 +1069,34 @@ describe('Send Slice', () => {
       };
 
       it('should create an action to update send amount', async () => {
-        const store = mockStore(defaultSendAmountState);
+        const sendState = {
+          metamask: {
+            blockGasLimit: '',
+            selectedAddress: '',
+            provider: {
+              chainId: '0x1',
+            },
+          },
+          ...defaultSendAmountState.send,
+          send: {
+            asset: {
+              details: {},
+            },
+            gas: {
+              gasPrice: '',
+            },
+            recipient: {
+              address: '',
+            },
+            amount: {
+              value: '',
+            },
+            draftTransaction: {
+              userInputHexData: '',
+            },
+          },
+        };
+        const store = mockStore(sendState);
 
         const newSendAmount = 'aNewSendAmount';
 
@@ -1077,35 +1104,73 @@ describe('Send Slice', () => {
 
         const actionResult = store.getActions();
 
-        const expectedActionResult = [
+        const expectedFirstActionResult = {
-          { type: 'send/updateSendAmount', payload: 'aNewSendAmount' },
+          type: 'send/updateSendAmount',
-        ];
+          payload: 'aNewSendAmount',
+        };
 
-        expect(actionResult).toStrictEqual(expectedActionResult);
+        expect(actionResult[0]).toStrictEqual(expectedFirstActionResult);
+        expect(actionResult[1].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/pending',
+        );
+        expect(actionResult[2].type).toStrictEqual(
+          'metamask/gas/SET_CUSTOM_GAS_LIMIT',
+        );
+        expect(actionResult[3].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/fulfilled',
+        );
       });
 
       it('should create an action to update send amount mode to `INPUT` when mode is `MAX`', async () => {
-        const maxModeSendState = {
+        const sendState = {
+          metamask: {
+            blockGasLimit: '',
+            selectedAddress: '',
+            provider: {
+              chainId: '0x1',
+            },
+          },
+          ...defaultSendAmountState.send,
           send: {
-            ...defaultSendAmountState.send,
+            asset: {
+              details: {},
+            },
+            gas: {
+              gasPrice: '',
+            },
+            recipient: {
+              address: '',
+            },
             amount: {
-              mode: AMOUNT_MODES.MAX,
+              value: '',
+            },
+            draftTransaction: {
+              userInputHexData: '',
             },
           },
         };
 
-        const store = mockStore(maxModeSendState);
+        const store = mockStore(sendState);
 
         await store.dispatch(updateSendAmount());
 
         const actionResult = store.getActions();
 
-        const expectedActionResult = [
+        const expectedFirstActionResult = {
-          { type: 'send/updateSendAmount', payload: undefined },
+          type: 'send/updateSendAmount',
-          { type: 'send/updateAmountMode', payload: AMOUNT_MODES.INPUT },
+          payload: undefined,
-        ];
+        };
 
-        expect(actionResult).toStrictEqual(expectedActionResult);
+        expect(actionResult[0]).toStrictEqual(expectedFirstActionResult);
+        expect(actionResult[1].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/pending',
+        );
+        expect(actionResult[2].type).toStrictEqual(
+          'metamask/gas/SET_CUSTOM_GAS_LIMIT',
+        );
+        expect(actionResult[3].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/fulfilled',
+        );
       });
 
       it('should create an action computeEstimateGasLimit and change states from pending to fulfilled with token asset types', async () => {
@@ -1535,8 +1600,27 @@ describe('Send Slice', () => {
       it('should create actions to toggle update max mode when send amount mode is not max', async () => {
         const sendMaxModeState = {
           send: {
+            asset: {
+              type: ASSET_TYPES.TOKEN,
+              details: {},
+            },
+            gas: {
+              gasPrice: '',
+            },
+            recipient: {
+              address: '',
+            },
             amount: {
               mode: '',
+              value: '',
+            },
+            draftTransaction: {
+              userInputHexData: '',
+            },
+          },
+          metamask: {
+            provider: {
+              chainId: RINKEBY_CHAIN_ID,
             },
           },
         };
@@ -1547,20 +1631,44 @@ describe('Send Slice', () => {
 
         const actionResult = store.getActions();
 
-        const expectedActionReslt = [
+        expect(actionResult).toHaveLength(5);
-          { type: 'send/updateAmountMode', payload: AMOUNT_MODES.MAX },
+        expect(actionResult[0].type).toStrictEqual('send/updateAmountMode');
-          { type: 'send/updateAmountToMax', payload: undefined },
+        expect(actionResult[1].type).toStrictEqual('send/updateAmountToMax');
-        ];
+        expect(actionResult[2].type).toStrictEqual(
-
+          'send/computeEstimatedGasLimit/pending',
-        expect(actionResult).toHaveLength(2);
+        );
-        expect(actionResult).toStrictEqual(expectedActionReslt);
+        expect(actionResult[3].type).toStrictEqual(
+          'metamask/gas/SET_CUSTOM_GAS_LIMIT',
+        );
+        expect(actionResult[4].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/fulfilled',
+        );
       });
 
       it('should create actions to toggle off  max mode when send amount mode is max', async () => {
         const sendMaxModeState = {
           send: {
+            asset: {
+              type: ASSET_TYPES.TOKEN,
+              details: {},
+            },
+            gas: {
+              gasPrice: '',
+            },
+            recipient: {
+              address: '',
+            },
             amount: {
               mode: AMOUNT_MODES.MAX,
+              value: '',
+            },
+            draftTransaction: {
+              userInputHexData: '',
+            },
+          },
+          metamask: {
+            provider: {
+              chainId: RINKEBY_CHAIN_ID,
             },
           },
         };
@@ -1570,13 +1678,18 @@ describe('Send Slice', () => {
 
         const actionResult = store.getActions();
 
-        const expectedActionReslt = [
+        expect(actionResult).toHaveLength(5);
-          { type: 'send/updateAmountMode', payload: AMOUNT_MODES.INPUT },
+        expect(actionResult[0].type).toStrictEqual('send/updateAmountMode');
-          { type: 'send/updateSendAmount', payload: '0x0' },
+        expect(actionResult[1].type).toStrictEqual('send/updateSendAmount');
-        ];
+        expect(actionResult[2].type).toStrictEqual(
-
+          'send/computeEstimatedGasLimit/pending',
-        expect(actionResult).toHaveLength(2);
+        );
-        expect(actionResult).toStrictEqual(expectedActionReslt);
+        expect(actionResult[3].type).toStrictEqual(
+          'metamask/gas/SET_CUSTOM_GAS_LIMIT',
+        );
+        expect(actionResult[4].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/fulfilled',
+        );
       });
     });