mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-04 23:14:56 +01:00
c2218ad941
* Convert Confirm Page Container test to tlr. Add test ids to associated components. * Convert Welcome component to tlr. * Update ui/pages/first-time-flow/welcome/welcome.test.js Co-authored-by: Ariella Vu <20778143+digiwand@users.noreply.github.com> * Update ui/components/app/confirm-page-container/confirm-page-container-container.test.js Co-authored-by: Ariella Vu <20778143+digiwand@users.noreply.github.com> * Remove unsused, commented out, lines Co-authored-by: Ariella Vu <20778143+digiwand@users.noreply.github.com>
94 lines
2.5 KiB
JavaScript
Executable File
94 lines
2.5 KiB
JavaScript
Executable File
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
const ConfirmPageContainerNavigation = (props) => {
|
|
const {
|
|
onNextTx,
|
|
totalTx,
|
|
positionOfCurrentTx,
|
|
nextTxId,
|
|
prevTxId,
|
|
showNavigation,
|
|
firstTx,
|
|
lastTx,
|
|
ofText,
|
|
requestsWaitingText,
|
|
} = props;
|
|
|
|
return (
|
|
<div
|
|
className="confirm-page-container-navigation"
|
|
style={{
|
|
display: showNavigation ? 'flex' : 'none',
|
|
}}
|
|
>
|
|
<div
|
|
className="confirm-page-container-navigation__container"
|
|
data-testid="navigation-container"
|
|
style={{
|
|
visibility: prevTxId ? 'initial' : 'hidden',
|
|
}}
|
|
>
|
|
<button
|
|
className="confirm-page-container-navigation__arrow"
|
|
data-testid="first-page"
|
|
onClick={() => onNextTx(firstTx)}
|
|
>
|
|
<i className="fa fa-angle-double-left fa-2x" />
|
|
</button>
|
|
<button
|
|
className="confirm-page-container-navigation__arrow"
|
|
data-testid="previous-page"
|
|
onClick={() => onNextTx(prevTxId)}
|
|
>
|
|
<i className="fa fa-angle-left fa-2x" />
|
|
</button>
|
|
</div>
|
|
<div className="confirm-page-container-navigation__textcontainer">
|
|
<div className="confirm-page-container-navigation__navtext">
|
|
{positionOfCurrentTx} {ofText} {totalTx}
|
|
</div>
|
|
<div className="confirm-page-container-navigation__longtext">
|
|
{requestsWaitingText}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="confirm-page-container-navigation__container"
|
|
style={{
|
|
visibility: nextTxId ? 'initial' : 'hidden',
|
|
}}
|
|
>
|
|
<button
|
|
className="confirm-page-container-navigation__arrow"
|
|
data-testid="next-page"
|
|
onClick={() => onNextTx(nextTxId)}
|
|
>
|
|
<i className="fa fa-angle-right fa-2x" />
|
|
</button>
|
|
<button
|
|
className="confirm-page-container-navigation__arrow"
|
|
data-testid="last-page"
|
|
onClick={() => onNextTx(lastTx)}
|
|
>
|
|
<i className="fa fa-angle-double-right fa-2x" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
ConfirmPageContainerNavigation.propTypes = {
|
|
totalTx: PropTypes.number,
|
|
positionOfCurrentTx: PropTypes.number,
|
|
onNextTx: PropTypes.func,
|
|
nextTxId: PropTypes.string,
|
|
prevTxId: PropTypes.string,
|
|
showNavigation: PropTypes.bool,
|
|
firstTx: PropTypes.string,
|
|
lastTx: PropTypes.string,
|
|
ofText: PropTypes.string,
|
|
requestsWaitingText: PropTypes.string,
|
|
};
|
|
|
|
export default ConfirmPageContainerNavigation;
|