TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Warning on a Send transaction request (#16220)

Browse Source
feature/default_network_editable
Adnan Sahovic 2 years ago committed by GitHub
parent 522eb72e49
commit 328626debe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 35 additions and 109 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 26
      ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
  2. 16
      ui/components/app/confirm-page-container/confirm-page-container.component.js
  3. 12
      ui/components/app/confirm-page-container/confirm-page-container.container.js
  4. 3
      ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
  5. 1
      ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
  6. 54
      ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js
  7. 24
      ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.test.js

26
ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
Unescape View File

@ -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 (
<div
className={classnames('confirm-page-container-content', {
@ -198,9 +200,7 @@ export default class ConfirmPageContainerContent extends Component {
transactionType={transactionType}
/>
{this.renderContent()}
{!supportsEIP1559V2 &&
(errorKey || errorMessage) &&
currentTransaction.type !== TRANSACTION_TYPES.SIMPLE_SEND && (
{!supportsEIP1559V2 && (errorKey || errorMessage) && (
<div className="confirm-page-container-content__error-container">
<ErrorMessage errorMessage={errorMessage} errorKey={errorKey} />
</div>
@ -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])}
@ -241,7 +243,11 @@ export default class ConfirmPageContainerContent extends Component {
/>
</div>
)}
{setShowDepositPopover && (
<DepositPopover
onClose={() => this.setState({ setShowDepositPopover: false })}
/>
)}
<PageContainerFooter
onCancel={onCancel}
cancelText={cancelText}

16
ui/components/app/confirm-page-container/confirm-page-container.component.js
Unescape View File

@ -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,
@ -38,6 +39,7 @@ import {
export default class ConfirmPageContainer extends Component {
state = {
showNicknamePopovers: false,
setShowDepositPopover: false,
};
static contextTypes = {
@ -107,7 +109,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,
};
@ -164,7 +165,6 @@ export default class ConfirmPageContainer extends Component {
isOwnedAccount,
supportsEIP1559V2,
nativeCurrency,
showBuyModal,
isBuyableChain,
networkIdentifier,
isApprovalOrRejection,
@ -193,6 +193,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 (
@ -298,7 +300,6 @@ export default class ConfirmPageContainer extends Component {
currentTransaction={currentTransaction}
nativeCurrency={nativeCurrency}
networkName={networkName}
showBuyModal={showBuyModal}
toAddress={toAddress}
transactionType={currentTransaction.type}
isBuyableChain={isBuyableChain}
@ -316,7 +317,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])}
@ -338,6 +341,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} />

12
ui/components/app/confirm-page-container/confirm-page-container.container.js
Unescape View File

@ -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);

3
ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
Unescape View File

@ -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}
/>

1
ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
Unescape View File

@ -289,7 +289,6 @@ export const mapDispatchToProps = (dispatch) => {
updateTransactionGasFees: (gasFees) => {
dispatch(updateGasFees({ ...gasFees, expectHexWei: true }));
},
showBuyModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER' })),
};
};

54
ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js
Unescape View File

@ -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 ? (
<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"
@ -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
ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.test.js
Unescape View File

@ -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';
@ -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({

Write Preview
Loading…
Cancel
Save