diff options
Diffstat (limited to 'ui/app/components/confirm-page-container')
6 files changed, 98 insertions, 49 deletions
diff --git a/ui/app/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js b/ui/app/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js index f0703dde2..c7262d2a9 100644 --- a/ui/app/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js +++ b/ui/app/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js @@ -1,16 +1,19 @@ import React from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' +import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display' +import { PRIMARY, SECONDARY } from '../../../constants/common' const ConfirmDetailRow = props => { const { label, - fiatText, - ethText, + primaryText, + secondaryText, onHeaderClick, - fiatTextColor, + primaryValueTextColor, headerText, headerTextClassName, + value, } = props return ( @@ -25,28 +28,57 @@ const ConfirmDetailRow = props => { > { headerText } </div> - <div - className="confirm-detail-row__fiat" - style={{ color: fiatTextColor }} - > - { fiatText } - </div> - <div className="confirm-detail-row__eth"> - { ethText } - </div> + { + primaryText + ? ( + <div + className="confirm-detail-row__primary" + style={{ color: primaryValueTextColor }} + > + { primaryText } + </div> + ) : ( + <UserPreferencedCurrencyDisplay + className="confirm-detail-row__primary" + type={PRIMARY} + value={value} + showEthLogo + ethLogoHeight="18" + style={{ color: primaryValueTextColor }} + hideLabel + /> + ) + } + { + secondaryText + ? ( + <div className="confirm-detail-row__secondary"> + { secondaryText } + </div> + ) : ( + <UserPreferencedCurrencyDisplay + className="confirm-detail-row__secondary" + type={SECONDARY} + value={value} + showEthLogo + hideLabel + /> + ) + } </div> </div> ) } ConfirmDetailRow.propTypes = { - label: PropTypes.string, - fiatText: PropTypes.string, - ethText: PropTypes.string, - fiatTextColor: PropTypes.string, - onHeaderClick: PropTypes.func, headerText: PropTypes.string, headerTextClassName: PropTypes.string, + label: PropTypes.string, + onHeaderClick: PropTypes.func, + primaryValueTextColor: PropTypes.string, + primaryText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + secondaryText: PropTypes.string, + value: PropTypes.string, } export default ConfirmDetailRow diff --git a/ui/app/components/confirm-page-container/confirm-detail-row/index.scss b/ui/app/components/confirm-page-container/confirm-detail-row/index.scss index dd6f87c17..580a41fde 100644 --- a/ui/app/components/confirm-page-container/confirm-detail-row/index.scss +++ b/ui/app/components/confirm-page-container/confirm-detail-row/index.scss @@ -18,18 +18,14 @@ min-width: 0; } - &__fiat { + &__primary { font-size: 1.5rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + justify-content: flex-end; } - &__eth { + &__secondary { color: $oslo-gray; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + justify-content: flex-end; } &__header-text { diff --git a/ui/app/components/confirm-page-container/confirm-detail-row/tests/confirm-detail-row.component.test.js b/ui/app/components/confirm-page-container/confirm-detail-row/tests/confirm-detail-row.component.test.js index 6f2489071..c8507985d 100644 --- a/ui/app/components/confirm-page-container/confirm-detail-row/tests/confirm-detail-row.component.test.js +++ b/ui/app/components/confirm-page-container/confirm-detail-row/tests/confirm-detail-row.component.test.js @@ -12,17 +12,19 @@ describe('Confirm Detail Row Component', function () { let wrapper beforeEach(() => { - wrapper = shallow(<ConfirmDetailRow - errorType={'mockErrorType'} - label={'mockLabel'} - showError={false} - fiatText = {'mockFiatText'} - ethText = {'mockEthText'} - fiatTextColor= {'mockColor'} - onHeaderClick= {propsMethodSpies.onHeaderClick} - headerText = {'mockHeaderText'} - headerTextClassName = {'mockHeaderClass'} - />) + wrapper = shallow( + <ConfirmDetailRow + errorType={'mockErrorType'} + label={'mockLabel'} + showError={false} + primaryText = {'mockFiatText'} + secondaryText = {'mockEthText'} + primaryValueTextColor= {'mockColor'} + onHeaderClick= {propsMethodSpies.onHeaderClick} + headerText = {'mockHeaderText'} + headerTextClassName = {'mockHeaderClass'} + /> + ) }) describe('render', () => { @@ -38,16 +40,16 @@ describe('Confirm Detail Row Component', function () { assert.equal(wrapper.find('.confirm-detail-row__details > .confirm-detail-row__header-text').childAt(0).text(), 'mockHeaderText') }) - it('should render the fiatText as a child of the confirm-detail-row__fiat', () => { - assert.equal(wrapper.find('.confirm-detail-row__details > .confirm-detail-row__fiat').childAt(0).text(), 'mockFiatText') + it('should render the primaryText as a child of the confirm-detail-row__primary', () => { + assert.equal(wrapper.find('.confirm-detail-row__details > .confirm-detail-row__primary').childAt(0).text(), 'mockFiatText') }) - it('should render the ethText as a child of the confirm-detail-row__eth', () => { - assert.equal(wrapper.find('.confirm-detail-row__details > .confirm-detail-row__eth').childAt(0).text(), 'mockEthText') + it('should render the ethText as a child of the confirm-detail-row__secondary', () => { + assert.equal(wrapper.find('.confirm-detail-row__details > .confirm-detail-row__secondary').childAt(0).text(), 'mockEthText') }) - it('should set the fiatTextColor on confirm-detail-row__fiat', () => { - assert.equal(wrapper.find('.confirm-detail-row__fiat').props().style.color, 'mockColor') + it('should set the fiatTextColor on confirm-detail-row__primary', () => { + assert.equal(wrapper.find('.confirm-detail-row__primary').props().style.color, 'mockColor') }) it('should assure the confirm-detail-row__header-text classname is correct', () => { @@ -58,7 +60,5 @@ describe('Confirm Detail Row Component', function () { wrapper.find('.confirm-detail-row__header-text').props().onClick() assert.equal(assert.equal(propsMethodSpies.onHeaderClick.callCount, 1)) }) - - }) }) diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js index 74e95ece6..1dca81560 100644 --- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js +++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js @@ -17,9 +17,10 @@ export default class ConfirmPageContainerContent extends Component { nonce: PropTypes.string, assetImage: PropTypes.string, subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + subtitleComponent: PropTypes.node, summaryComponent: PropTypes.node, title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - titleComponent: PropTypes.func, + titleComponent: PropTypes.node, warning: PropTypes.string, } @@ -54,7 +55,9 @@ export default class ConfirmPageContainerContent extends Component { errorKey, errorMessage, title, + titleComponent, subtitle, + subtitleComponent, hideSubtitle, identiconAddress, nonce, @@ -80,7 +83,9 @@ export default class ConfirmPageContainerContent extends Component { })} action={action} title={title} + titleComponent={titleComponent} subtitle={subtitle} + subtitleComponent={subtitleComponent} hideSubtitle={hideSubtitle} identiconAddress={identiconAddress} nonce={nonce} diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js index 38b158fd3..89ceb015f 100644 --- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js +++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js @@ -4,7 +4,18 @@ import classnames from 'classnames' import Identicon from '../../../identicon' const ConfirmPageContainerSummary = props => { - const { action, title, subtitle, hideSubtitle, className, identiconAddress, nonce, assetImage } = props + const { + action, + title, + titleComponent, + subtitle, + subtitleComponent, + hideSubtitle, + className, + identiconAddress, + nonce, + assetImage, + } = props return ( <div className={classnames('confirm-page-container-summary', className)}> @@ -32,12 +43,12 @@ const ConfirmPageContainerSummary = props => { ) } <div className="confirm-page-container-summary__title-text"> - { title } + { titleComponent || title } </div> </div> { hideSubtitle || <div className="confirm-page-container-summary__subtitle"> - { subtitle } + { subtitleComponent || subtitle } </div> } </div> @@ -47,7 +58,9 @@ const ConfirmPageContainerSummary = props => { ConfirmPageContainerSummary.propTypes = { action: PropTypes.string, title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + titleComponent: PropTypes.node, subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + subtitleComponent: PropTypes.node, hideSubtitle: PropTypes.bool, className: PropTypes.string, identiconAddress: PropTypes.string, diff --git a/ui/app/components/confirm-page-container/confirm-page-container.component.js b/ui/app/components/confirm-page-container/confirm-page-container.component.js index 36d5a1f58..8b2e47cbb 100644 --- a/ui/app/components/confirm-page-container/confirm-page-container.component.js +++ b/ui/app/components/confirm-page-container/confirm-page-container.component.js @@ -16,8 +16,9 @@ export default class ConfirmPageContainer extends Component { onEdit: PropTypes.func, showEdit: PropTypes.bool, subtitle: PropTypes.string, + subtitleComponent: PropTypes.node, title: PropTypes.string, - titleComponent: PropTypes.func, + titleComponent: PropTypes.node, // Sender to Recipient fromAddress: PropTypes.string, fromName: PropTypes.string, @@ -65,6 +66,7 @@ export default class ConfirmPageContainer extends Component { title, titleComponent, subtitle, + subtitleComponent, hideSubtitle, summaryComponent, detailsComponent, @@ -101,6 +103,7 @@ export default class ConfirmPageContainer extends Component { title={title} titleComponent={titleComponent} subtitle={subtitle} + subtitleComponent={subtitleComponent} hideSubtitle={hideSubtitle} summaryComponent={summaryComponent} detailsComponent={detailsComponent} |