@@ -192,7 +209,7 @@ export default class ConfirmPageContainer extends Component {
className="send__dialog"
onClick={() => this.setState({ showNicknamePopovers: true })}
>
- {this.context.t('newAccountDetectedDialogMessage')}
+ {t('newAccountDetectedDialogMessage')}
{this.state.showNicknamePopovers ? (
)}
- {shouldDisplayWarning && (
+ {shouldDisplayWarning && errorKey === INSUFFICIENT_FUNDS_ERROR_KEY && (
+
+ {currentTransaction.chainId === MAINNET_CHAIN_ID ? (
+
+ {t('insufficientCurrency', [nativeCurrency, networkName])}
+
+
+ {t('orDeposit')}
+
+ }
+ useIcon
+ iconFillColor="#d73a49"
+ type="danger"
+ />
+ ) : (
+
+ {t('insufficientCurrency', [nativeCurrency, networkName])}
+ {t('buyOther', [nativeCurrency])}
+
+ }
+ useIcon
+ iconFillColor="#d73a49"
+ type="danger"
+ />
+ )}
+
+ )}
+ {shouldDisplayWarning && errorKey !== INSUFFICIENT_FUNDS_ERROR_KEY && (
@@ -245,14 +307,14 @@ export default class ConfirmPageContainer extends Component {
{contentComponent && (
{unapprovedTxCount > 1 && (
- {this.context.t('rejectTxsN', [unapprovedTxCount])}
+ {t('rejectTxsN', [unapprovedTxCount])}
)}
diff --git a/ui/components/app/confirm-page-container/confirm-page-container.container.js b/ui/components/app/confirm-page-container/confirm-page-container.container.js
index ec5ba84c0..d0d287aed 100644
--- a/ui/components/app/confirm-page-container/confirm-page-container.container.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container.container.js
@@ -1,5 +1,6 @@
import { connect } from 'react-redux';
import { getAccountsWithLabels, getAddressBookEntry } from '../../../selectors';
+import { showModal } from '../../../store/actions';
import ConfirmPageContainer from './confirm-page-container.component';
function mapStateToProps(state, ownProps) {
@@ -16,4 +17,13 @@ function mapStateToProps(state, ownProps) {
};
}
-export default connect(mapStateToProps)(ConfirmPageContainer);
+const mapDispatchToProps = (dispatch) => {
+ return {
+ showBuyModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER' })),
+ };
+};
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps,
+)(ConfirmPageContainer);
diff --git a/ui/components/app/confirm-page-container/index.scss b/ui/components/app/confirm-page-container/index.scss
index 9723c2d23..20aa1d94f 100644
--- a/ui/components/app/confirm-page-container/index.scss
+++ b/ui/components/app/confirm-page-container/index.scss
@@ -7,4 +7,12 @@
&__content-component-wrapper {
height: 100%;
}
+
+ &__link {
+ background: transparent;
+ border: 0 transparent;
+ display: inline;
+ padding: 0;
+ font-size: $font-size-h7;
+ }
}
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index f7f9774f3..a7202b6ca 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -60,6 +60,7 @@ import {
import Typography from '../../components/ui/typography/typography';
import { MIN_GAS_LIMIT_DEC } from '../send/send.constants';
+import { NETWORK_TO_NAME_MAP } from '../../../shared/constants/network';
import TransactionAlerts from './transaction-alerts';
@@ -144,6 +145,7 @@ export default class ConfirmTransactionBase extends Component {
hardwareWalletRequiresConnection: PropTypes.bool,
isMultiLayerFeeNetwork: PropTypes.bool,
eip1559V2Enabled: PropTypes.bool,
+ showBuyModal: PropTypes.func,
};
state = {
@@ -323,6 +325,7 @@ export default class ConfirmTransactionBase extends Component {
supportsEIP1559,
isMultiLayerFeeNetwork,
nativeCurrency,
+ showBuyModal,
} = this.props;
const { t } = this.context;
const { userAcknowledgedGasMissing } = this.state;
@@ -335,6 +338,7 @@ export default class ConfirmTransactionBase extends Component {
const hasSimulationError = Boolean(txData.simulationFails);
const renderSimulationFailureWarning =
hasSimulationError && !userAcknowledgedGasMissing;
+ const networkName = NETWORK_TO_NAME_MAP[txData.chainId];
const renderTotalMaxAmount = () => {
if (
@@ -582,6 +586,11 @@ export default class ConfirmTransactionBase extends Component {
this.setUserAcknowledgedGasMissing()
}
userAcknowledgedGasMissing={userAcknowledgedGasMissing}
+ chainId={txData.chainId}
+ nativeCurrency={nativeCurrency}
+ networkName={networkName}
+ showBuyModal={showBuyModal}
+ type={txData.type}
/>
this.handleCloseEditGas()}
currentTransaction={txData}
supportsEIP1559V2={this.supportsEIP1559V2}
+ nativeCurrency={nativeCurrency}
/>
);
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
index 8b13a1034..c6a6598ad 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -285,6 +285,7 @@ export const mapDispatchToProps = (dispatch) => {
updateTransactionGasFees: (gasFees) => {
dispatch(updateTransactionGasFees({ ...gasFees, expectHexWei: true }));
},
+ showBuyModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER' })),
};
};
diff --git a/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js b/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js
index ae6b195ad..bbb1883ab 100644
--- a/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js
+++ b/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js
@@ -3,19 +3,25 @@ import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import { PRIORITY_LEVELS } from '../../../../shared/constants/gas';
-import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../helpers/constants/error-keys';
import { submittedPendingTransactionsSelector } from '../../../selectors/transactions';
import { useGasFeeContext } from '../../../contexts/gasFee';
import { useI18nContext } from '../../../hooks/useI18nContext';
import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
-import ErrorMessage from '../../../components/ui/error-message';
import I18nValue from '../../../components/ui/i18n-value';
+import Button from '../../../components/ui/button';
import Typography from '../../../components/ui/typography';
import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
+import { TRANSACTION_TYPES } from '../../../../shared/constants/transaction';
+import { MAINNET_CHAIN_ID } from '../../../../shared/constants/network';
const TransactionAlerts = ({
userAcknowledgedGasMissing,
setUserAcknowledgedGasMissing,
+ chainId,
+ nativeCurrency,
+ networkName,
+ showBuyModal,
+ type,
}) => {
const {
balanceError,
@@ -90,7 +96,45 @@ const TransactionAlerts = ({
type="warning"
/>
)}
- {balanceError && }
+ {balanceError &&
+ chainId === MAINNET_CHAIN_ID &&
+ type === TRANSACTION_TYPES.DEPLOY_CONTRACT ? (
+
+ {t('insufficientCurrency', [nativeCurrency, networkName])}{' '}
+ {' '}
+ {t('orDeposit')}
+
+ }
+ useIcon
+ iconFillColor="#d73a49"
+ type="danger"
+ />
+ ) : null}
+ {balanceError &&
+ chainId !== MAINNET_CHAIN_ID &&
+ type === TRANSACTION_TYPES.DEPLOY_CONTRACT ? (
+
+ {t('insufficientCurrency', [nativeCurrency, networkName])}
+ {t('buyOther', [nativeCurrency])}
+
+ }
+ useIcon
+ iconFillColor="#d73a49"
+ type="danger"
+ />
+ ) : null}
{estimateUsed === PRIORITY_LEVELS.LOW && (
{
supportsEIP1559V2: true,
balanceError: true,
},
+ componentProps: {
+ nativeCurrency: 'ETH',
+ networkName: 'Ropsten',
+ showBuyModal: jest.fn(),
+ chainId: '0x1',
+ type: TRANSACTION_TYPES.DEPLOY_CONTRACT,
+ },
});
- expect(getByText('Insufficient funds.')).toBeInTheDocument();
+ expect(
+ getByText(
+ /You do not have enough ETH in your account to pay for transaction fees on Ropsten network./u,
+ ),
+ ).toBeInTheDocument();
});
});