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])}
+
+ )}
+
+ )
+ }
)
}