diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js index e87492832205..0143df6d10aa 100644 --- a/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js +++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js @@ -4,6 +4,8 @@ import classnames from 'classnames' import { Tabs, Tab } from '../../../ui/tabs' import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from '.' import ErrorMessage from '../../../ui/error-message' +import { PageContainerFooter } from '../../../ui/page-container' + export default class ConfirmPageContainerContent extends Component { static propTypes = { @@ -22,6 +24,15 @@ export default class ConfirmPageContainerContent extends Component { title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), titleComponent: PropTypes.node, warning: PropTypes.string, + // Footer + onCancelAll: PropTypes.func, + onCancel: PropTypes.func, + cancelText: PropTypes.string, + onSubmit: PropTypes.func, + submitText: PropTypes.string, + disabled: PropTypes.bool, + unapprovedTxCount: PropTypes.number, + rejectNText: PropTypes.string, } renderContent () { @@ -66,6 +77,14 @@ export default class ConfirmPageContainerContent extends Component { detailsComponent, dataComponent, warning, + onCancelAll, + onCancel, + cancelText, + onSubmit, + submitText, + disabled, + unapprovedTxCount, + rejectNText, } = this.props return ( @@ -104,6 +123,21 @@ export default class ConfirmPageContainerContent extends Component { ) } + + {unapprovedTxCount > 1 && ( + + {rejectNText} + + )} + + ) } diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-content/index.scss b/ui/app/components/app/confirm-page-container/confirm-page-container-content/index.scss index 854327f1214e..cb263ec9cdb9 100644 --- a/ui/app/components/app/confirm-page-container/confirm-page-container-content/index.scss +++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/index.scss @@ -5,6 +5,8 @@ overflow-y: auto; height: 100%; flex: 1; + display: flex; + flex-direction: column; &__error-container { padding: 0 16px 16px 16px; @@ -72,4 +74,8 @@ text-transform: uppercase; margin: 0 8px; } + + .page-container__footer { + margin-top: auto; + } } diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container.component.js index 404e214f4cd9..baf75bbd3ae7 100644 --- a/ui/app/components/app/confirm-page-container/confirm-page-container.component.js +++ b/ui/app/components/app/confirm-page-container/confirm-page-container.component.js @@ -157,23 +157,35 @@ export default class ConfirmPageContainer extends Component { nonce={nonce} assetImage={assetImage} warning={warning} + onCancelAll={onCancelAll} + onCancel={onCancel} + cancelText={this.context.t('reject')} + onSubmit={onSubmit} + submitText={this.context.t('confirm')} + disabled={disabled} + unapprovedTxCount={unapprovedTxCount} + rejectNText={this.context.t('rejectTxsN', [unapprovedTxCount])} /> ) } - onCancel()} - cancelText={this.context.t('reject')} - onSubmit={() => onSubmit()} - submitText={this.context.t('confirm')} - submitButtonType="confirm" - disabled={disabled} - > - {unapprovedTxCount > 1 && ( - onCancelAll()}> - {this.context.t('rejectTxsN', [unapprovedTxCount])} - - )} - + { + contentComponent && ( + + {unapprovedTxCount > 1 && ( + + {this.context.t('rejectTxsN', [unapprovedTxCount])} + + )} + + ) + } ) }