Skip to content

Commit

Permalink
Warning on a Send transaction request (#16220)
Browse files Browse the repository at this point in the history
  • Loading branch information
@adnansahovic @seaona
adnansahovic authored and seaona committed Nov 10, 2022
1 parent 1db38ad commit 568683d
Show file tree
Hide file tree
Showing 7 changed files with 35 additions and 109 deletions.
34 changes: 20 additions & 14 deletions ...page-container/confirm-page-container-content/confirm-page-container-content.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 '.';

Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -153,10 +155,8 @@ export default class ConfirmPageContainerContent extends Component {
hideTitle,
supportsEIP1559V2,
hasTopBorder,
currentTransaction,
nativeCurrency,
networkName,
showBuyModal,
toAddress,
transactionType,
isBuyableChain,
Expand All @@ -169,6 +169,8 @@ export default class ConfirmPageContainerContent extends Component {
(errorKey || errorMessage) &&
errorKey === INSUFFICIENT_FUNDS_ERROR_KEY;

const { setShowDepositPopover } = this.state;

return (
<div
className={classnames('confirm-page-container-content', {
Expand Down Expand Up @@ -198,13 +200,11 @@ export default class ConfirmPageContainerContent extends Component {
transactionType={transactionType}
/>
{this.renderContent()}
{!supportsEIP1559V2 &&
(errorKey || errorMessage) &&
currentTransaction.type !== TRANSACTION_TYPES.SIMPLE_SEND && (
<div className="confirm-page-container-content__error-container">
<ErrorMessage errorMessage={errorMessage} errorKey={errorKey} />
</div>
)}
{!supportsEIP1559V2 && (errorKey || errorMessage) && (
<div className="confirm-page-container-content__error-container">
<ErrorMessage errorMessage={errorMessage} errorKey={errorKey} />
</div>
)}
{showInsuffienctFundsError && (
<div className="confirm-page-container-content__error-container">
<ActionableMessage
Expand All @@ -219,7 +219,9 @@ export default class ConfirmPageContainerContent extends Component {
<Button
type="inline"
className="confirm-page-container-content__link"
onClick={showBuyModal}
onClick={() =>
this.setState({ setShowDepositPopover: true })
}
key={`${nativeCurrency}-buy-button`}
>
{t('buyAsset', [nativeCurrency])}
Expand All @@ -241,7 +243,11 @@ export default class ConfirmPageContainerContent extends Component {
/>
</div>
)}

{setShowDepositPopover && (
<DepositPopover
onClose={() => this.setState({ setShowDepositPopover: false })}
/>
)}
<PageContainerFooter
onCancel={onCancel}
cancelText={cancelText}
Expand Down
16 changes: 12 additions & 4 deletions ui/components/app/confirm-page-container/confirm-page-container.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import Typography from '../../ui/typography';
import { TYPOGRAPHY } from '../../../helpers/constants/design-system';

import NetworkAccountBalanceHeader from '../network-account-balance-header/network-account-balance-header';
import DepositPopover from '../deposit-popover/deposit-popover';
import EnableEIP1559V2Notice from './enableEIP1559V2-notice';
import {
ConfirmPageContainerHeader,
Expand All @@ -38,6 +39,7 @@ import {
export default class ConfirmPageContainer extends Component {
state = {
showNicknamePopovers: false,
setShowDepositPopover: false,
};

static contextTypes = {
Expand Down Expand Up @@ -106,7 +108,6 @@ export default class ConfirmPageContainer extends Component {
isOwnedAccount: PropTypes.bool,
supportsEIP1559V2: PropTypes.bool,
nativeCurrency: PropTypes.string,
showBuyModal: PropTypes.func,
isBuyableChain: PropTypes.bool,
isApprovalOrRejection: PropTypes.bool,
};
Expand Down Expand Up @@ -162,7 +163,6 @@ export default class ConfirmPageContainer extends Component {
isOwnedAccount,
supportsEIP1559V2,
nativeCurrency,
showBuyModal,
isBuyableChain,
networkIdentifier,
isApprovalOrRejection,
Expand Down Expand Up @@ -191,6 +191,8 @@ export default class ConfirmPageContainer extends Component {
currentTransaction.type ===
TRANSACTION_TYPES.TOKEN_METHOD_SET_APPROVAL_FOR_ALL;

const { setShowDepositPopover } = this.state;

const { t } = this.context;

return (
Expand Down Expand Up @@ -295,7 +297,6 @@ export default class ConfirmPageContainer extends Component {
currentTransaction={currentTransaction}
nativeCurrency={nativeCurrency}
networkName={networkName}
showBuyModal={showBuyModal}
toAddress={toAddress}
transactionType={currentTransaction.type}
isBuyableChain={isBuyableChain}
Expand All @@ -313,7 +314,9 @@ export default class ConfirmPageContainer extends Component {
<Button
type="inline"
className="confirm-page-container-content__link"
onClick={showBuyModal}
onClick={() =>
this.setState({ setShowDepositPopover: true })
}
key={`${nativeCurrency}-buy-button`}
>
{t('buyAsset', [nativeCurrency])}
Expand All @@ -335,6 +338,11 @@ export default class ConfirmPageContainer extends Component {
/>
</div>
)}
{setShowDepositPopover && (
<DepositPopover
onClose={() => this.setState({ setShowDepositPopover: false })}
/>
)}
{shouldDisplayWarning && errorKey !== INSUFFICIENT_FUNDS_ERROR_KEY && (
<div className="confirm-approve-content__warning">
<ErrorMessage errorKey={errorKey} />
Expand Down
12 changes: 1 addition & 11 deletions ui/components/app/confirm-page-container/confirm-page-container.container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
getNetworkIdentifier,
getSwapsDefaultToken,
} from '../../../selectors';
import { showModal } from '../../../store/actions';
import ConfirmPageContainer from './confirm-page-container.component';

function mapStateToProps(state, ownProps) {
Expand All @@ -30,13 +29,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);
3 changes: 0 additions & 3 deletions ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -353,7 +352,6 @@ export default class ConfirmTransactionBase extends Component {
supportsEIP1559,
isMultiLayerFeeNetwork,
nativeCurrency,
showBuyModal,
isBuyableChain,
} = this.props;
const { t } = this.context;
Expand Down Expand Up @@ -614,7 +612,6 @@ export default class ConfirmTransactionBase extends Component {
userAcknowledgedGasMissing={userAcknowledgedGasMissing}
nativeCurrency={nativeCurrency}
networkName={networkName}
showBuyModal={showBuyModal}
type={txData.type}
isBuyableChain={isBuyableChain}
/>
Expand Down
1 change: 0 additions & 1 deletion ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,6 @@ export const mapDispatchToProps = (dispatch) => {
updateTransactionGasFees: (gasFees) => {
dispatch(updateGasFees({ ...gasFees, expectHexWei: true }));
},
showBuyModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER' })),
};
};

Expand Down
54 changes: 2 additions & 52 deletions ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -89,39 +77,6 @@ const TransactionAlerts = ({
type="warning"
/>
)}
{balanceError && type === TRANSACTION_TYPES.DEPLOY_CONTRACT ? (
<ActionableMessage
className="actionable-message--warning"
message={
isBuyableChain ? (
<Typography variant={TYPOGRAPHY.H7} align="left">
{t('insufficientCurrencyBuyOrDeposit', [
nativeCurrency,
networkName,
<Button
type="inline"
className="confirm-page-container-content__link"
onClick={showBuyModal}
key={`${nativeCurrency}-buy-button`}
>
{t('buyAsset', [nativeCurrency])}
</Button>,
])}
</Typography>
) : (
<Typography variant={TYPOGRAPHY.H7} align="left">
{t('insufficientCurrencyDeposit', [
nativeCurrency,
networkName,
])}
</Typography>
)
}
useIcon
iconFillColor="var(--color-error-default)"
type="danger"
/>
) : null}
{estimateUsed === PRIORITY_LEVELS.LOW && (
<ActionableMessage
dataTestId="low-gas-fee-alert"
Expand Down Expand Up @@ -164,11 +119,6 @@ const TransactionAlerts = ({
TransactionAlerts.propTypes = {
userAcknowledgedGasMissing: PropTypes.bool,
setUserAcknowledgedGasMissing: PropTypes.func,
nativeCurrency: PropTypes.string,
networkName: PropTypes.string,
showBuyModal: PropTypes.func,
type: PropTypes.string,
isBuyableChain: PropTypes.bool,
};

export default TransactionAlerts;
24 changes: 0 additions & 24 deletions ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React from 'react';
import { fireEvent } from '@testing-library/react';
import { renderWithProvider } from '../../../../test/jest';
import { submittedPendingTransactionsSelector } from '../../../selectors/transactions';
import { TRANSACTION_TYPES } from '../../../../shared/constants/transaction';
import { useGasFeeContext } from '../../../contexts/gasFee';
import configureStore from '../../../store/store';
import TransactionAlerts from './transaction-alerts';
Expand Down Expand Up @@ -142,29 +141,6 @@ describe('TransactionAlerts', () => {
});
});

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({
Expand Down

0 comments on commit 568683d

Please sign in to comment.