Show error if user have insufficient gas. (#12531)

app/_locales/en/messages.json

@@ -1171,6 +1171,9 @@
   "insufficientFunds": {
     "message": "Insufficient funds."
   },
+  "insufficientFundsForGas": {
+    "message": "Insufficient funds for gas"
+  },
   "insufficientTokens": {
     "message": "Insufficient tokens."
   },

ui/helpers/constants/error-keys.js

@@ -6,3 +6,4 @@ export const ETH_GAS_PRICE_FETCH_WARNING_KEY = 'ethGasPriceFetchWarning';
 export const GAS_PRICE_FETCH_FAILURE_ERROR_KEY = 'gasPriceFetchFailed';
 export const GAS_PRICE_EXCESSIVE_ERROR_KEY = 'gasPriceExcessive';
 export const UNSENDABLE_ASSET_ERROR_KEY = 'unsendableAsset';
+export const INSUFFICIENT_FUNDS_FOR_GAS_ERROR_KEY = 'insufficientFundsForGas';

ui/pages/send/send-content/send-content.component.js

@@ -7,6 +7,7 @@ import {
   GAS_PRICE_FETCH_FAILURE_ERROR_KEY,
   GAS_PRICE_EXCESSIVE_ERROR_KEY,
   UNSENDABLE_ASSET_ERROR_KEY,
+  INSUFFICIENT_FUNDS_FOR_GAS_ERROR_KEY,
 } from '../../../helpers/constants/error-keys';
 import SendAmountRow from './send-amount-row';
 import SendHexDataRow from './send-hex-data-row';
@@ -30,6 +31,7 @@ export default class SendContent extends Component {
     isEthGasPrice: PropTypes.bool,
     noGasPrice: PropTypes.bool,
     networkOrAccountNotSupports1559: PropTypes.bool,
+    getIsBalanceInsufficient: PropTypes.bool,
   };
 
   render() {
@@ -41,11 +43,14 @@ export default class SendContent extends Component {
       noGasPrice,
       isAssetSendable,
       networkOrAccountNotSupports1559,
+      getIsBalanceInsufficient,
     } = this.props;
 
     let gasError;
     if (gasIsExcessive) gasError = GAS_PRICE_EXCESSIVE_ERROR_KEY;
     else if (noGasPrice) gasError = GAS_PRICE_FETCH_FAILURE_ERROR_KEY;
+    else if (getIsBalanceInsufficient)
+      gasError = INSUFFICIENT_FUNDS_FOR_GAS_ERROR_KEY;
 
     return (
       <PageContainerContent>

ui/pages/send/send-content/send-content.component.test.js

@@ -106,6 +106,21 @@ describe('SendContent Component', () => {
       ).toStrictEqual(true);
       expect(wrapper.find(Dialog)).toHaveLength(0);
     });
+
+    it('should render insufficient gas dialog', () => {
+      wrapper.setProps({
+        showHexData: false,
+        getIsBalanceInsufficient: true,
+      });
+      const PageContainerContentChild = wrapper
+        .find(PageContainerContent)
+        .children();
+      const errorDialogProps = PageContainerContentChild.childAt(0).props();
+      expect(errorDialogProps.className).toStrictEqual('send__error-dialog');
+      expect(errorDialogProps.children).toStrictEqual(
+        'insufficientFundsForGas_t',
+      );
+    });
   });
 
   it('should not render the asset dropdown if token length is 0', () => {

ui/pages/send/send-content/send-content.container.js

@@ -6,7 +6,11 @@ import {
   getNoGasPriceFetched,
   checkNetworkOrAccountNotSupports1559,
 } from '../../../selectors';
-import { getIsAssetSendable, getSendTo } from '../../../ducks/send';
+import {
+  getIsAssetSendable,
+  getIsBalanceInsufficient,
+  getSendTo,
+} from '../../../ducks/send';
 
 import * as actions from '../../../store/actions';
 import SendContent from './send-content.component';
@@ -28,6 +32,7 @@ function mapStateToProps(state) {
     networkOrAccountNotSupports1559: checkNetworkOrAccountNotSupports1559(
       state,
     ),
+    getIsBalanceInsufficient: getIsBalanceInsufficient(state),
   };
 }