2021-02-04 19:15:23 +01:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2021-06-23 23:35:25 +02:00
|
|
|
import { isEqual } from 'lodash';
|
2021-02-04 19:15:23 +01:00
|
|
|
import PageContainerFooter from '../../../components/ui/page-container/page-container-footer';
|
2021-09-17 06:37:50 +02:00
|
|
|
import {
|
|
|
|
CONFIRM_TRANSACTION_ROUTE,
|
|
|
|
DEFAULT_ROUTE,
|
|
|
|
} from '../../../helpers/constants/routes';
|
2023-04-03 17:31:04 +02:00
|
|
|
import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
|
2021-09-17 06:37:50 +02:00
|
|
|
import { SEND_STAGES } from '../../../ducks/send';
|
2023-04-18 17:10:32 +02:00
|
|
|
import { INSUFFICIENT_FUNDS_ERROR } from '../send.constants';
|
2018-04-26 18:38:38 +02:00
|
|
|
|
|
|
|
export default class SendFooter extends Component {
|
|
|
|
static propTypes = {
|
2021-06-23 23:35:25 +02:00
|
|
|
resetSendState: PropTypes.func,
|
|
|
|
disabled: PropTypes.bool.isRequired,
|
2018-04-26 18:38:38 +02:00
|
|
|
history: PropTypes.object,
|
2018-04-27 02:38:14 +02:00
|
|
|
sign: PropTypes.func,
|
2021-09-17 06:37:50 +02:00
|
|
|
sendStage: PropTypes.string,
|
2019-03-05 16:45:01 +01:00
|
|
|
sendErrors: PropTypes.object,
|
2020-06-01 19:54:32 +02:00
|
|
|
mostRecentOverviewPage: PropTypes.string.isRequired,
|
2021-09-17 06:37:50 +02:00
|
|
|
cancelTx: PropTypes.func,
|
|
|
|
draftTransactionID: PropTypes.string,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2018-04-26 18:38:38 +02:00
|
|
|
|
2018-07-02 04:09:28 +02:00
|
|
|
static contextTypes = {
|
|
|
|
t: PropTypes.func,
|
2022-03-29 15:46:24 +02:00
|
|
|
trackEvent: PropTypes.func,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2018-07-02 04:09:28 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
onCancel() {
|
2021-09-17 06:37:50 +02:00
|
|
|
const {
|
|
|
|
cancelTx,
|
|
|
|
draftTransactionID,
|
|
|
|
history,
|
|
|
|
mostRecentOverviewPage,
|
|
|
|
resetSendState,
|
|
|
|
sendStage,
|
|
|
|
} = this.props;
|
|
|
|
|
2022-01-06 23:56:51 +01:00
|
|
|
if (draftTransactionID) {
|
|
|
|
cancelTx({ id: draftTransactionID });
|
|
|
|
}
|
2021-06-23 23:35:25 +02:00
|
|
|
resetSendState();
|
2021-09-17 06:37:50 +02:00
|
|
|
|
|
|
|
const nextRoute =
|
|
|
|
sendStage === SEND_STAGES.EDIT ? DEFAULT_ROUTE : mostRecentOverviewPage;
|
|
|
|
history.push(nextRoute);
|
2018-05-07 14:03:20 +02:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
async onSubmit(event) {
|
2021-02-04 19:15:23 +01:00
|
|
|
event.preventDefault();
|
2023-02-09 18:45:52 +01:00
|
|
|
const { sign, history } = this.props;
|
2022-03-29 15:46:24 +02:00
|
|
|
const { trackEvent } = this.context;
|
2018-04-26 18:38:38 +02:00
|
|
|
|
2021-06-23 23:35:25 +02:00
|
|
|
const promise = sign();
|
2018-04-26 18:38:38 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
Promise.resolve(promise).then(() => {
|
2022-03-29 15:46:24 +02:00
|
|
|
trackEvent({
|
2023-04-03 17:31:04 +02:00
|
|
|
category: MetaMetricsEventCategory.Transactions,
|
2022-03-29 15:46:24 +02:00
|
|
|
event: 'Complete',
|
|
|
|
properties: {
|
2020-11-03 00:41:28 +01:00
|
|
|
action: 'Edit Screen',
|
2022-03-29 15:46:24 +02:00
|
|
|
legacy_event: true,
|
2020-11-03 00:41:28 +01:00
|
|
|
},
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
|
|
|
history.push(CONFIRM_TRANSACTION_ROUTE);
|
|
|
|
});
|
2018-04-26 18:38:38 +02:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
componentDidUpdate(prevProps) {
|
2021-06-23 23:35:25 +02:00
|
|
|
const { sendErrors } = this.props;
|
2022-03-29 15:46:24 +02:00
|
|
|
const { trackEvent } = this.context;
|
2021-06-23 23:35:25 +02:00
|
|
|
if (
|
|
|
|
Object.keys(sendErrors).length > 0 &&
|
|
|
|
isEqual(sendErrors, prevProps.sendErrors) === false
|
|
|
|
) {
|
2021-02-04 19:15:23 +01:00
|
|
|
const errorField = Object.keys(sendErrors).find((key) => sendErrors[key]);
|
|
|
|
const errorMessage = sendErrors[errorField];
|
2019-03-05 16:45:01 +01:00
|
|
|
|
2022-03-29 15:46:24 +02:00
|
|
|
trackEvent({
|
2023-04-03 17:31:04 +02:00
|
|
|
category: MetaMetricsEventCategory.Transactions,
|
2022-03-29 15:46:24 +02:00
|
|
|
event: 'Error',
|
|
|
|
properties: {
|
2019-03-05 16:45:01 +01:00
|
|
|
action: 'Edit Screen',
|
2022-03-29 15:46:24 +02:00
|
|
|
legacy_event: true,
|
2019-03-05 16:45:01 +01:00
|
|
|
errorField,
|
|
|
|
errorMessage,
|
|
|
|
},
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
2019-03-05 16:45:01 +01:00
|
|
|
}
|
2018-05-25 02:53:54 +02:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
render() {
|
2021-09-17 06:37:50 +02:00
|
|
|
const { t } = this.context;
|
2023-04-18 17:10:32 +02:00
|
|
|
const { sendStage, sendErrors } = this.props;
|
2018-04-26 18:38:38 +02:00
|
|
|
return (
|
|
|
|
<PageContainerFooter
|
2018-05-07 14:03:20 +02:00
|
|
|
onCancel={() => this.onCancel()}
|
2020-02-15 21:34:12 +01:00
|
|
|
onSubmit={(e) => this.onSubmit(e)}
|
2023-04-18 17:10:32 +02:00
|
|
|
disabled={
|
|
|
|
this.props.disabled && sendErrors.gasFee !== INSUFFICIENT_FUNDS_ERROR
|
|
|
|
}
|
2021-09-17 06:37:50 +02:00
|
|
|
cancelText={sendStage === SEND_STAGES.EDIT ? t('reject') : t('cancel')}
|
2018-04-26 18:38:38 +02:00
|
|
|
/>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2018-04-26 18:38:38 +02:00
|
|
|
}
|
|
|
|
}
|