diff --git a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js index b7cd74218..98b0f91ab 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js +++ b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js @@ -9,7 +9,7 @@ import ErrorMessage from '../../../ui/error-message'; import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../../helpers/constants/error-keys'; import Typography from '../../../ui/typography'; import { TYPOGRAPHY } from '../../../../helpers/constants/design-system'; -import { TRANSACTION_TYPES } from '../../../../../shared/constants/transaction'; +import DepositPopover from '../../deposit-popover/deposit-popover'; import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from '.'; @@ -50,15 +50,17 @@ export default class ConfirmPageContainerContent extends Component { hideTitle: PropTypes.bool, supportsEIP1559V2: PropTypes.bool, hasTopBorder: PropTypes.bool, - currentTransaction: PropTypes.object, nativeCurrency: PropTypes.string, networkName: PropTypes.string, - showBuyModal: PropTypes.func, toAddress: PropTypes.string, transactionType: PropTypes.string, isBuyableChain: PropTypes.bool, }; + state = { + setShowDepositPopover: false, + }; + renderContent() { const { detailsComponent, dataComponent } = this.props; @@ -153,10 +155,8 @@ export default class ConfirmPageContainerContent extends Component { hideTitle, supportsEIP1559V2, hasTopBorder, - currentTransaction, nativeCurrency, networkName, - showBuyModal, toAddress, transactionType, isBuyableChain, @@ -169,6 +169,8 @@ export default class ConfirmPageContainerContent extends Component { (errorKey || errorMessage) && errorKey === INSUFFICIENT_FUNDS_ERROR_KEY; + const { setShowDepositPopover } = this.state; + return (
{this.renderContent()} - {!supportsEIP1559V2 && - (errorKey || errorMessage) && - currentTransaction.type !== TRANSACTION_TYPES.SIMPLE_SEND && ( -
- -
- )} + {!supportsEIP1559V2 && (errorKey || errorMessage) && ( +
+ +
+ )} {showInsuffienctFundsError && (
+ this.setState({ setShowDepositPopover: true }) + } key={`${nativeCurrency}-buy-button`} > {t('buyAsset', [nativeCurrency])} @@ -241,7 +243,11 @@ export default class ConfirmPageContainerContent extends Component { />
)} - + {setShowDepositPopover && ( + this.setState({ setShowDepositPopover: false })} + /> + )} + this.setState({ setShowDepositPopover: true }) + } key={`${nativeCurrency}-buy-button`} > {t('buyAsset', [nativeCurrency])} @@ -338,6 +341,11 @@ export default class ConfirmPageContainer extends Component { />
)} + {setShowDepositPopover && ( + this.setState({ setShowDepositPopover: false })} + /> + )} {shouldDisplayWarning && errorKey !== INSUFFICIENT_FUNDS_ERROR_KEY && (
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 6323c32cf..8d247971c 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 @@ -8,7 +8,6 @@ import { getMetadataContractName, getAccountName, } from '../../../selectors'; -import { showModal } from '../../../store/actions'; import ConfirmPageContainer from './confirm-page-container.component'; function mapStateToProps(state, ownProps) { @@ -35,13 +34,4 @@ function mapStateToProps(state, ownProps) { }; } -const mapDispatchToProps = (dispatch) => { - return { - showBuyModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER' })), - }; -}; - -export default connect( - mapStateToProps, - mapDispatchToProps, -)(ConfirmPageContainer); +export default connect(mapStateToProps)(ConfirmPageContainer); 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 9672fce6d..01b6070ec 100644 --- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -159,7 +159,6 @@ export default class ConfirmTransactionBase extends Component { hardwareWalletRequiresConnection: PropTypes.bool, isMultiLayerFeeNetwork: PropTypes.bool, eip1559V2Enabled: PropTypes.bool, - showBuyModal: PropTypes.func, isBuyableChain: PropTypes.bool, isApprovalOrRejection: PropTypes.bool, ///: BEGIN:ONLY_INCLUDE_IN(flask) @@ -353,7 +352,6 @@ export default class ConfirmTransactionBase extends Component { supportsEIP1559, isMultiLayerFeeNetwork, nativeCurrency, - showBuyModal, isBuyableChain, } = this.props; const { t } = this.context; @@ -614,7 +612,6 @@ export default class ConfirmTransactionBase extends Component { userAcknowledgedGasMissing={userAcknowledgedGasMissing} nativeCurrency={nativeCurrency} networkName={networkName} - showBuyModal={showBuyModal} type={txData.type} isBuyableChain={isBuyableChain} /> 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 e59ae735f..88e13936d 100644 --- a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js +++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js @@ -289,7 +289,6 @@ export const mapDispatchToProps = (dispatch) => { updateTransactionGasFees: (gasFees) => { dispatch(updateGasFees({ ...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 abd1868be..def97fca4 100644 --- a/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js +++ b/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js @@ -7,28 +7,16 @@ import { submittedPendingTransactionsSelector } from '../../../selectors/transac import { useGasFeeContext } from '../../../contexts/gasFee'; import { useI18nContext } from '../../../hooks/useI18nContext'; import ActionableMessage from '../../../components/ui/actionable-message/actionable-message'; -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 ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; const TransactionAlerts = ({ userAcknowledgedGasMissing, setUserAcknowledgedGasMissing, - isBuyableChain, - nativeCurrency, - networkName, - showBuyModal, - type, }) => { - const { - balanceError, - estimateUsed, - hasSimulationError, - supportsEIP1559V2, - isNetworkBusy, - } = useGasFeeContext(); + const { estimateUsed, hasSimulationError, supportsEIP1559V2, isNetworkBusy } = + useGasFeeContext(); const pendingTransactions = useSelector(submittedPendingTransactionsSelector); const t = useI18nContext(); @@ -89,39 +77,6 @@ const TransactionAlerts = ({ type="warning" /> )} - {balanceError && type === TRANSACTION_TYPES.DEPLOY_CONTRACT ? ( - - {t('insufficientCurrencyBuyOrDeposit', [ - nativeCurrency, - networkName, - , - ])} - - ) : ( - - {t('insufficientCurrencyDeposit', [ - nativeCurrency, - networkName, - ])} - - ) - } - useIcon - iconFillColor="var(--color-error-default)" - type="danger" - /> - ) : null} {estimateUsed === PRIORITY_LEVELS.LOW && ( { }); }); - describe('if balanceError from useGasFeeContext is true', () => { - it('informs the user that they have insufficient funds', () => { - const { getByText } = render({ - useGasFeeContextValue: { - supportsEIP1559V2: true, - balanceError: true, - }, - componentProps: { - nativeCurrency: 'ETH', - networkName: 'Goerli', - showBuyModal: jest.fn(), - chainId: '0x5', - type: TRANSACTION_TYPES.DEPLOY_CONTRACT, - }, - }); - expect( - getByText( - /You do not have enough ETH in your account to pay for transaction fees on Goerli network./u, - ), - ).toBeInTheDocument(); - }); - }); - describe('if balanceError from useGasFeeContext is falsy', () => { it('does not inform the user that they have insufficient funds', () => { const { queryByText } = render({