mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 09:57:02 +01:00
Refactor confirm-send-ether into functional component (#18527)
This commit is contained in:
Jyoti Puri
GitHub
parent
00d2d43d45
commit
09d00e1e45
@ -54,7 +54,7 @@ module.exports = {
|
||||
os: false,
|
||||
path: false,
|
||||
stream: require.resolve('stream-browserify'),
|
||||
_stream_transform: false,
|
||||
_stream_transform: require.resolve('readable-stream/lib/_stream_transform.js'),
|
||||
};
|
||||
config.module.strictExportPresence = true;
|
||||
config.module.rules.push({
|
||||
|
||||
@ -0,0 +1,677 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`ConfirmSendEther should render correct information for for confirm send ether 1`] = `
|
||||
[
|
||||
<div
|
||||
class="page-container"
|
||||
data-testid="page-container"
|
||||
>
|
||||
<div
|
||||
class="confirm-page-container-navigation"
|
||||
style="display: flex;"
|
||||
>
|
||||
<div
|
||||
class="confirm-page-container-navigation__container"
|
||||
data-testid="navigation-container"
|
||||
style="visibility: hidden;"
|
||||
>
|
||||
<button
|
||||
class="confirm-page-container-navigation__arrow"
|
||||
data-testid="first-page"
|
||||
>
|
||||
<i
|
||||
class="fa fa-angle-double-left fa-2x"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
class="confirm-page-container-navigation__arrow"
|
||||
data-testid="previous-page"
|
||||
>
|
||||
<i
|
||||
class="fa fa-angle-left fa-2x"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="confirm-page-container-navigation__textcontainer"
|
||||
>
|
||||
<div
|
||||
class="confirm-page-container-navigation__navtext"
|
||||
>
|
||||
0
|
||||
|
||||
of
|
||||
|
||||
2
|
||||
</div>
|
||||
<div
|
||||
class="confirm-page-container-navigation__longtext"
|
||||
>
|
||||
requests waiting to be acknowledged
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="confirm-page-container-navigation__container"
|
||||
style="visibility: initial;"
|
||||
>
|
||||
<button
|
||||
class="confirm-page-container-navigation__arrow"
|
||||
data-testid="next-page"
|
||||
>
|
||||
<i
|
||||
class="fa fa-angle-right fa-2x"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
class="confirm-page-container-navigation__arrow"
|
||||
data-testid="last-page"
|
||||
>
|
||||
<i
|
||||
class="fa fa-angle-double-right fa-2x"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="confirm-page-container-header"
|
||||
data-testid="header-container"
|
||||
>
|
||||
<div
|
||||
class="confirm-page-container-header__row"
|
||||
>
|
||||
<div
|
||||
class="confirm-page-container-header__back-button-container"
|
||||
style="visibility: initial;"
|
||||
>
|
||||
<span
|
||||
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
|
||||
style="mask-image: url('./images/icons/arrow-left.svg');"
|
||||
/>
|
||||
<span
|
||||
class="confirm-page-container-header__back-button"
|
||||
data-testid="confirm-page-back-edit-button"
|
||||
>
|
||||
Edit
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="sender-to-recipient sender-to-recipient--default"
|
||||
data-testid="sender-to-recipient"
|
||||
>
|
||||
<div
|
||||
class="sender-to-recipient__party sender-to-recipient__party--sender"
|
||||
>
|
||||
<div
|
||||
class="sender-to-recipient__sender-icon"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<div
|
||||
class="identicon"
|
||||
style="height: 24px; width: 24px; border-radius: 12px;"
|
||||
>
|
||||
<div
|
||||
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 24px; height: 24px; display: inline-block; background: rgb(250, 58, 0);"
|
||||
>
|
||||
<svg
|
||||
height="24"
|
||||
width="24"
|
||||
x="0"
|
||||
y="0"
|
||||
>
|
||||
<rect
|
||||
fill="#18CDF2"
|
||||
height="24"
|
||||
transform="translate(-0.786295127845455 -2.478213052095374) rotate(328.9 12 12)"
|
||||
width="24"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="#035E56"
|
||||
height="24"
|
||||
transform="translate(-13.723846281624033 7.94434640381145) rotate(176.2 12 12)"
|
||||
width="24"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="#F26602"
|
||||
height="24"
|
||||
transform="translate(12.500881513667943 -10.653854792247811) rotate(468.9 12 12)"
|
||||
width="24"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="sender-to-recipient__tooltip-wrapper"
|
||||
>
|
||||
<div
|
||||
aria-describedby="tippy-tooltip-1"
|
||||
class="sender-to-recipient__tooltip-container"
|
||||
data-original-title="null"
|
||||
data-tooltipped=""
|
||||
style="display: inline;"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="sender-to-recipient__name"
|
||||
>
|
||||
Test Account
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="sender-to-recipient__arrow-container"
|
||||
>
|
||||
<div
|
||||
class="sender-to-recipient__arrow-circle"
|
||||
>
|
||||
<i
|
||||
class="fa fa-arrow-right sender-to-recipient__arrow-circle__icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="sender-to-recipient__party sender-to-recipient__party--recipient sender-to-recipient__party--recipient-with-address"
|
||||
>
|
||||
<div
|
||||
class="sender-to-recipient__sender-icon"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<div
|
||||
class="identicon"
|
||||
style="height: 24px; width: 24px; border-radius: 12px;"
|
||||
>
|
||||
<div
|
||||
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 24px; height: 24px; display: inline-block; background: rgb(3, 73, 94);"
|
||||
>
|
||||
<svg
|
||||
height="24"
|
||||
width="24"
|
||||
x="0"
|
||||
y="0"
|
||||
>
|
||||
<rect
|
||||
fill="#F5D800"
|
||||
height="24"
|
||||
transform="translate(-1.6948137315966292 7.490045892231985) rotate(238.2 12 12)"
|
||||
width="24"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="#1888F2"
|
||||
height="24"
|
||||
transform="translate(2.6987555575750655 10.47254609666851) rotate(211.2 12 12)"
|
||||
width="24"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="#017E8E"
|
||||
height="24"
|
||||
transform="translate(4.1286145552783005 -17.188975454864387) rotate(404.9 12 12)"
|
||||
width="24"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="sender-to-recipient__tooltip-wrapper"
|
||||
>
|
||||
<div
|
||||
class="sender-to-recipient__tooltip-container"
|
||||
style="display: inline;"
|
||||
tabindex="0"
|
||||
title=""
|
||||
>
|
||||
<div
|
||||
class="sender-to-recipient__name"
|
||||
data-testid="sender-to-recipient__name"
|
||||
>
|
||||
0x0c5...AaFb
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="confirm-page-container-content"
|
||||
>
|
||||
|
||||
<div
|
||||
class="confirm-page-container-summary confirm-page-container-summary--border"
|
||||
>
|
||||
<div
|
||||
class="site-origin confirm-page-container-summary__origin"
|
||||
>
|
||||
<bdi
|
||||
dir="ltr"
|
||||
>
|
||||
https://metamask.github.io
|
||||
</bdi>
|
||||
</div>
|
||||
<div
|
||||
class="confirm-page-container-summary__action-row"
|
||||
>
|
||||
<div
|
||||
class="confirm-page-container-summary__action"
|
||||
>
|
||||
<span
|
||||
class="confirm-page-container-summary__action__name"
|
||||
>
|
||||
Sending ETH
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="confirm-page-container-summary__title"
|
||||
>
|
||||
<h3
|
||||
class="box mm-text mm-text--heading-md mm-text--font-weight-normal mm-text--ellipsis box--flex-direction-row box--color-text-default"
|
||||
>
|
||||
<div
|
||||
class="currency-display-component"
|
||||
title="0"
|
||||
>
|
||||
<span
|
||||
class="currency-display-component__prefix"
|
||||
>
|
||||
<i
|
||||
class="fab fa-ethereum"
|
||||
style="font-size: 24px;"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="currency-display-component__text"
|
||||
>
|
||||
0
|
||||
</span>
|
||||
</div>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="confirm-page-container-content__details"
|
||||
>
|
||||
<div
|
||||
class="transaction-alerts"
|
||||
>
|
||||
<div
|
||||
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-warning-muted box--rounded-sm"
|
||||
>
|
||||
<span
|
||||
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-warning-default"
|
||||
style="mask-image: url('./images/icons/warning.svg');"
|
||||
/>
|
||||
<div>
|
||||
<p
|
||||
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
|
||||
>
|
||||
Network is busy. Gas prices are high and estimates are less accurate.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="transaction-detail"
|
||||
>
|
||||
<div
|
||||
class="box box--padding-top-5 box--display-flex box--flex-direction-row box--justify-content-flex-end"
|
||||
>
|
||||
<div
|
||||
class="edit-gas-fee-button"
|
||||
>
|
||||
<button
|
||||
data-testid="edit-gas-fee-button"
|
||||
>
|
||||
<span
|
||||
class="edit-gas-fee-button__icon"
|
||||
>
|
||||
🌐
|
||||
</span>
|
||||
<span
|
||||
class="edit-gas-fee-button__label"
|
||||
>
|
||||
Site suggested
|
||||
</span>
|
||||
<span
|
||||
class="box mm-icon mm-icon--size-xs box--display-inline-block box--flex-direction-row box--color-primary-default"
|
||||
style="mask-image: url('./images/icons/arrow-right.svg');"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
class="info-tooltip"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
aria-describedby="tippy-tooltip-2"
|
||||
class="info-tooltip__tooltip-container"
|
||||
data-original-title="null"
|
||||
data-tooltipped=""
|
||||
style="display: inline;"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 10 10"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
|
||||
fill="var(--color-icon-alternative)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="transaction-detail-rows"
|
||||
>
|
||||
<div
|
||||
class="transaction-detail-item"
|
||||
>
|
||||
<div
|
||||
class="transaction-detail-item__row"
|
||||
>
|
||||
<h6
|
||||
class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
|
||||
>
|
||||
<div
|
||||
class="box box--display-flex box--flex-direction-row"
|
||||
>
|
||||
<div
|
||||
class="box box--margin-right-1 box--flex-direction-row"
|
||||
>
|
||||
Gas
|
||||
</div>
|
||||
<span
|
||||
class="gas-details-item-title__estimate"
|
||||
>
|
||||
(
|
||||
estimated
|
||||
)
|
||||
</span>
|
||||
<div
|
||||
class="info-tooltip"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
aria-describedby="tippy-tooltip-3"
|
||||
class="info-tooltip__tooltip-container"
|
||||
data-original-title="null"
|
||||
data-tooltipped=""
|
||||
style="display: inline;"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 10 10"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
|
||||
fill="var(--color-icon-alternative)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h6>
|
||||
<div
|
||||
class="transaction-detail-item__detail-values"
|
||||
>
|
||||
<h6
|
||||
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
|
||||
>
|
||||
<div
|
||||
class="gas-details-item__currency-container"
|
||||
>
|
||||
<div
|
||||
class="currency-display-component"
|
||||
title="0.00021"
|
||||
>
|
||||
<span
|
||||
class="currency-display-component__prefix"
|
||||
/>
|
||||
<span
|
||||
class="currency-display-component__text"
|
||||
>
|
||||
0.00021
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</h6>
|
||||
<h6
|
||||
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
|
||||
>
|
||||
<div
|
||||
class="gas-details-item__currency-container"
|
||||
>
|
||||
<div
|
||||
class="currency-display-component"
|
||||
title="0.00021 ETH"
|
||||
>
|
||||
<span
|
||||
class="currency-display-component__prefix"
|
||||
/>
|
||||
<span
|
||||
class="currency-display-component__text"
|
||||
>
|
||||
0.00021
|
||||
</span>
|
||||
<span
|
||||
class="currency-display-component__suffix"
|
||||
>
|
||||
ETH
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="transaction-detail-item__row"
|
||||
>
|
||||
<div>
|
||||
<h6
|
||||
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography gas-timing gas-timing--positive typography--h7 typography--weight-normal typography--style-normal typography--color-text-default"
|
||||
>
|
||||
Unknown processing time
|
||||
</h6>
|
||||
</div>
|
||||
<h6
|
||||
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
|
||||
>
|
||||
<div
|
||||
class="box gas-details-item__gasfee-label box--display-inline-flex box--flex-direction-row"
|
||||
>
|
||||
<div
|
||||
class="box box--margin-right-1 box--flex-direction-row"
|
||||
>
|
||||
<strong>
|
||||
Max fee:
|
||||
</strong>
|
||||
</div>
|
||||
<div
|
||||
class="gas-details-item__currency-container"
|
||||
>
|
||||
<div
|
||||
class="currency-display-component"
|
||||
title="0.00021 ETH"
|
||||
>
|
||||
<span
|
||||
class="currency-display-component__prefix"
|
||||
/>
|
||||
<span
|
||||
class="currency-display-component__text"
|
||||
>
|
||||
0.00021
|
||||
</span>
|
||||
<span
|
||||
class="currency-display-component__suffix"
|
||||
>
|
||||
ETH
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="transaction-detail-item"
|
||||
>
|
||||
<div
|
||||
class="transaction-detail-item__row"
|
||||
>
|
||||
<h6
|
||||
class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
|
||||
>
|
||||
Total
|
||||
</h6>
|
||||
<div
|
||||
class="transaction-detail-item__detail-values"
|
||||
>
|
||||
<h6
|
||||
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
|
||||
>
|
||||
<div
|
||||
class="confirm-page-container-content__total-value"
|
||||
>
|
||||
<div
|
||||
class="currency-display-component"
|
||||
title="0.00021"
|
||||
>
|
||||
<span
|
||||
class="currency-display-component__prefix"
|
||||
/>
|
||||
<span
|
||||
class="currency-display-component__text"
|
||||
>
|
||||
0.00021
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</h6>
|
||||
<h6
|
||||
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
|
||||
>
|
||||
<div
|
||||
class="confirm-page-container-content__total-value"
|
||||
>
|
||||
<div
|
||||
class="currency-display-component"
|
||||
title="0.00021 ETH"
|
||||
>
|
||||
<span
|
||||
class="currency-display-component__prefix"
|
||||
/>
|
||||
<span
|
||||
class="currency-display-component__text"
|
||||
>
|
||||
0.00021
|
||||
</span>
|
||||
<span
|
||||
class="currency-display-component__suffix"
|
||||
>
|
||||
ETH
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="transaction-detail-item__row"
|
||||
>
|
||||
<h6
|
||||
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-text-alternative"
|
||||
>
|
||||
Amount + gas fee
|
||||
</h6>
|
||||
<h6
|
||||
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
|
||||
>
|
||||
<div
|
||||
class="confirm-page-container-content__total-amount"
|
||||
>
|
||||
<strong>
|
||||
Max amount:
|
||||
</strong>
|
||||
|
||||
<div
|
||||
class="currency-display-component"
|
||||
title="0.00021 ETH"
|
||||
>
|
||||
<span
|
||||
class="currency-display-component__prefix"
|
||||
/>
|
||||
<span
|
||||
class="currency-display-component__text"
|
||||
>
|
||||
0.00021
|
||||
</span>
|
||||
<span
|
||||
class="currency-display-component__suffix"
|
||||
>
|
||||
ETH
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="page-container__footer"
|
||||
>
|
||||
<footer>
|
||||
<button
|
||||
class="button btn--rounded btn-secondary page-container__footer-button page-container__footer-button__cancel"
|
||||
data-testid="page-container-footer-cancel"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Reject
|
||||
</button>
|
||||
<button
|
||||
class="button btn--rounded btn-primary page-container__footer-button"
|
||||
data-testid="page-container-footer-next"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
</footer>
|
||||
<div
|
||||
class="page-container__footer-secondary"
|
||||
>
|
||||
<a>
|
||||
Reject 2 transactions
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
@ -1,33 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ConfirmTransactionBase from '../confirm-transaction-base';
|
||||
import { SEND_ROUTE } from '../../helpers/constants/routes';
|
||||
|
||||
export default class ConfirmSendEther extends Component {
|
||||
static contextTypes = {
|
||||
t: PropTypes.func,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
editTransaction: PropTypes.func,
|
||||
history: PropTypes.object,
|
||||
};
|
||||
|
||||
handleEdit({ txData }) {
|
||||
const { editTransaction, history } = this.props;
|
||||
editTransaction(txData).then(() => {
|
||||
history.push(SEND_ROUTE);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ConfirmTransactionBase
|
||||
actionKey="confirm"
|
||||
onEdit={(confirmTransactionData) =>
|
||||
this.handleEdit(confirmTransactionData)
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { compose } from 'redux';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { editExistingTransaction } from '../../ducks/send';
|
||||
import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck';
|
||||
import { AssetType } from '../../../shared/constants/transaction';
|
||||
import ConfirmSendEther from './confirm-send-ether.component';
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
editTransaction: async (txData) => {
|
||||
const { id } = txData;
|
||||
await dispatch(editExistingTransaction(AssetType.native, id.toString()));
|
||||
dispatch(clearConfirmTransaction());
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default compose(
|
||||
withRouter,
|
||||
connect(undefined, mapDispatchToProps),
|
||||
)(ConfirmSendEther);
|
||||
35
ui/pages/confirm-send-ether/confirm-send-ether.js
Normal file
35
ui/pages/confirm-send-ether/confirm-send-ether.js
Normal file
@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import { AssetType } from '../../../shared/constants/transaction';
|
||||
import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck';
|
||||
import { editExistingTransaction } from '../../ducks/send';
|
||||
import { SEND_ROUTE } from '../../helpers/constants/routes';
|
||||
import ConfirmTransactionBase from '../confirm-transaction-base';
|
||||
|
||||
const ConfirmSendEther = () => {
|
||||
const dispatch = useDispatch();
|
||||
const history = useHistory();
|
||||
|
||||
const editTransaction = async (txData) => {
|
||||
const { id } = txData;
|
||||
await dispatch(editExistingTransaction(AssetType.native, id.toString()));
|
||||
dispatch(clearConfirmTransaction());
|
||||
};
|
||||
|
||||
const handleEdit = ({ txData }) => {
|
||||
editTransaction(txData).then(() => {
|
||||
history.push(SEND_ROUTE);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<ConfirmTransactionBase
|
||||
actionKey="confirm"
|
||||
onEdit={(confirmTransactionData) => handleEdit(confirmTransactionData)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConfirmSendEther;
|
||||
@ -1,26 +0,0 @@
|
||||
import React from 'react';
|
||||
import ConfirmSendEther from '.';
|
||||
|
||||
// eslint-disable-next-line import/no-anonymous-default-export
|
||||
export default {
|
||||
title: 'Pages/ConfirmSendEther',
|
||||
|
||||
component: ConfirmSendEther,
|
||||
argTypes: {
|
||||
editTransaction: {
|
||||
action: 'editTransaction',
|
||||
},
|
||||
history: {
|
||||
control: 'object',
|
||||
},
|
||||
txParams: {
|
||||
control: 'object',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => {
|
||||
return <ConfirmSendEther {...args} />;
|
||||
};
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
58
ui/pages/confirm-send-ether/confirm-send-ether.stories.js
Normal file
58
ui/pages/confirm-send-ether/confirm-send-ether.stories.js
Normal file
@ -0,0 +1,58 @@
|
||||
import React from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
|
||||
import mockState from '../../../test/data/mock-state.json';
|
||||
import configureStore from '../../store/store';
|
||||
import ConfirmSendEther from './confirm-send-ether';
|
||||
|
||||
const sendEther = {
|
||||
id: 9597986287241458,
|
||||
time: 1681203297082,
|
||||
status: 'unapproved',
|
||||
metamaskNetworkId: '5',
|
||||
originalGasEstimate: '0x5208',
|
||||
userEditedGasLimit: false,
|
||||
chainId: '0x5',
|
||||
loadingDefaults: false,
|
||||
dappSuggestedGasFees: {
|
||||
maxPriorityFeePerGas: '0x3b9aca00',
|
||||
maxFeePerGas: '0x2540be400',
|
||||
},
|
||||
sendFlowHistory: [],
|
||||
txParams: {
|
||||
from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
|
||||
to: '0x0c54fccd2e384b4bb6f2e405bf5cbc15a017aafb',
|
||||
value: '0x0',
|
||||
gas: '0x5208',
|
||||
maxFeePerGas: '0x2540be400',
|
||||
maxPriorityFeePerGas: '0x3b9aca00',
|
||||
},
|
||||
origin: 'https://metamask.github.io',
|
||||
actionId: 1830698773,
|
||||
type: 'simpleSend',
|
||||
securityProviderResponse: null,
|
||||
userFeeLevel: 'dappSuggested',
|
||||
defaultGasEstimates: {
|
||||
estimateType: 'dappSuggested',
|
||||
gas: '0x5208',
|
||||
maxFeePerGas: '0x2540be400',
|
||||
maxPriorityFeePerGas: '0x3b9aca00',
|
||||
},
|
||||
};
|
||||
|
||||
mockState.metamask.unapprovedTxs[sendEther.id] = sendEther;
|
||||
mockState.confirmTransaction = {
|
||||
txData: sendEther,
|
||||
};
|
||||
const store = configureStore(mockState);
|
||||
|
||||
export default {
|
||||
title: 'Pages/ConfirmSendEther',
|
||||
decorators: [(story) => <Provider store={store}>{story()}</Provider>],
|
||||
};
|
||||
|
||||
export const DefaultStory = () => {
|
||||
return <ConfirmSendEther />;
|
||||
};
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
64
ui/pages/confirm-send-ether/confirm-send-ether.test.js
Normal file
64
ui/pages/confirm-send-ether/confirm-send-ether.test.js
Normal file
@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
|
||||
import { renderWithProvider } from '../../../test/lib/render-helpers';
|
||||
import { setBackgroundConnection } from '../../../test/jest';
|
||||
import mockState from '../../../test/data/mock-state.json';
|
||||
import configureStore from '../../store/store';
|
||||
import ConfirmSendEther from './confirm-send-ether';
|
||||
|
||||
setBackgroundConnection({
|
||||
getGasFeeTimeEstimate: jest.fn(),
|
||||
getGasFeeEstimatesAndStartPolling: jest.fn(),
|
||||
promisifiedBackground: jest.fn(),
|
||||
tryReverseResolveAddress: jest.fn(),
|
||||
getNextNonce: jest.fn(),
|
||||
addKnownMethodData: jest.fn(),
|
||||
});
|
||||
|
||||
const sendEther = {
|
||||
id: 9597986287241458,
|
||||
time: 1681203297082,
|
||||
status: 'unapproved',
|
||||
metamaskNetworkId: '5',
|
||||
originalGasEstimate: '0x5208',
|
||||
userEditedGasLimit: false,
|
||||
chainId: '0x5',
|
||||
loadingDefaults: false,
|
||||
dappSuggestedGasFees: {
|
||||
maxPriorityFeePerGas: '0x3b9aca00',
|
||||
maxFeePerGas: '0x2540be400',
|
||||
},
|
||||
sendFlowHistory: [],
|
||||
txParams: {
|
||||
from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
|
||||
to: '0x0c54fccd2e384b4bb6f2e405bf5cbc15a017aafb',
|
||||
value: '0x0',
|
||||
gas: '0x5208',
|
||||
maxFeePerGas: '0x2540be400',
|
||||
maxPriorityFeePerGas: '0x3b9aca00',
|
||||
},
|
||||
origin: 'https://metamask.github.io',
|
||||
actionId: 1830698773,
|
||||
type: 'simpleSend',
|
||||
securityProviderResponse: null,
|
||||
userFeeLevel: 'dappSuggested',
|
||||
defaultGasEstimates: {
|
||||
estimateType: 'dappSuggested',
|
||||
gas: '0x5208',
|
||||
maxFeePerGas: '0x2540be400',
|
||||
maxPriorityFeePerGas: '0x3b9aca00',
|
||||
},
|
||||
};
|
||||
|
||||
mockState.metamask.unapprovedTxs[sendEther.id] = sendEther;
|
||||
mockState.confirmTransaction = {
|
||||
txData: sendEther,
|
||||
};
|
||||
const store = configureStore(mockState);
|
||||
|
||||
describe('ConfirmSendEther', () => {
|
||||
it('should render correct information for for confirm send ether', () => {
|
||||
const { getAllByTestId } = renderWithProvider(<ConfirmSendEther />, store);
|
||||
expect(getAllByTestId('page-container')).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@ -1 +1 @@
|
||||
export { default } from './confirm-send-ether.container';
|
||||
export { default } from './confirm-send-ether';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user