diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 9c658b2bc..8fce3223d 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1171,6 +1171,9 @@ "insufficientFunds": { "message": "Insufficient funds." }, + "insufficientFundsForGas": { + "message": "Insufficient funds for gas" + }, "insufficientTokens": { "message": "Insufficient tokens." }, diff --git a/ui/helpers/constants/error-keys.js b/ui/helpers/constants/error-keys.js index e51b87736..8372a3f1e 100644 --- a/ui/helpers/constants/error-keys.js +++ b/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'; diff --git a/ui/pages/send/send-content/send-content.component.js b/ui/pages/send/send-content/send-content.component.js index 738e85a85..6ed0cb02a 100644 --- a/ui/pages/send/send-content/send-content.component.js +++ b/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 ( diff --git a/ui/pages/send/send-content/send-content.component.test.js b/ui/pages/send/send-content/send-content.component.test.js index d47c8aa4e..cee97b54b 100644 --- a/ui/pages/send/send-content/send-content.component.test.js +++ b/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', () => { diff --git a/ui/pages/send/send-content/send-content.container.js b/ui/pages/send/send-content/send-content.container.js index 83b38dfeb..16824b0d4 100644 --- a/ui/pages/send/send-content/send-content.container.js +++ b/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), }; }