Use PageContainerFooter to render footer on all confirmation pages (#17316)

test/e2e/tests/eth-sign.spec.js

@@ -54,7 +54,7 @@ describe('Eth sign', function () {
         const personalMessage = await personalMessageRow.getText();
         assert.equal(personalMessage, expectedPersonalMessage);
 
-        await driver.clickElement('[data-testid="request-signature__sign"]');
+        await driver.clickElement('[data-testid="page-container-footer-next"]');
         await driver.clickElement(
           '.signature-request-warning__footer__sign-button',
         );

test/e2e/tests/personal-sign.spec.js

@@ -44,7 +44,7 @@ describe('Personal sign', function () {
         const personalMessage = await personalMessageRow.getText();
         assert.equal(personalMessage, 'Example `personal_sign` message');
 
-        await driver.clickElement('[data-testid="request-signature__sign"]');
+        await driver.clickElement('[data-testid="page-container-footer-next"]');
 
         // Switch to the Dapp
         await driver.waitUntilXWindowHandles(2);

ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap

@@ -170,23 +170,26 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = `
       </div>
     </div>
     <div
-      class="request-signature__footer"
+      class="page-container__footer"
     >
+      <footer>
         <button
-        class="button btn--rounded btn-secondary btn--large request-signature__footer__cancel-button"
+          class="button btn--rounded btn-secondary page-container__footer-button"
+          data-testid="page-container-footer-cancel"
           role="button"
           tabindex="0"
         >
           Reject
         </button>
         <button
-        class="button btn--rounded btn-primary btn--large request-signature__footer__sign-button"
+          class="button btn--rounded btn-primary page-container__footer-button"
-        data-testid="request-signature__sign"
+          data-testid="page-container-footer-next"
           role="button"
           tabindex="0"
         >
           Sign
         </button>
+      </footer>
     </div>
   </div>
 </div>

ui/components/app/signature-request-original/index.scss

@@ -132,25 +132,4 @@
     color: var(--color-primary-default);
     margin-inline-start: 3px;
   }
-
-  &__footer {
-    @include H3;
-
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    flex: 0 0 auto;
-    border-top: 1px solid var(--color-border-default);
-    padding: 1.6rem;
-
-    button {
-      width: 165px;
-    }
-
-    &__cancel-button {
-      margin-right: 1.2rem;
-    }
-  }
 }

ui/components/app/signature-request-original/signature-request-original.component.js

@@ -12,6 +12,7 @@ import Button from '../../ui/button';
 import SiteOrigin from '../../ui/site-origin';
 import NetworkAccountBalanceHeader from '../network-account-balance-header';
 import Typography from '../../ui/typography/typography';
+import { PageContainerFooter } from '../../ui/page-container';
 import {
   TYPOGRAPHY,
   FONT_WEIGHT,
@@ -216,26 +217,15 @@ export default class SignatureRequestOriginal extends Component {
     const { t } = this.context;
 
     return (
-      <div className="request-signature__footer">
+      <PageContainerFooter
-        <Button
+        cancelText={t('reject')}
-          type="secondary"
+        submitText={t('sign')}
-          large
+        onCancel={async (event) => {
-          className="request-signature__footer__cancel-button"
-          onClick={async (event) => {
           await cancel(event);
           clearConfirmTransaction();
           history.push(mostRecentOverviewPage);
         }}
-        >
+        onSubmit={async (event) => {
-          {t('reject')}
-        </Button>
-        <Button
-          data-testid="request-signature__sign"
-          type="primary"
-          large
-          className="request-signature__footer__sign-button"
-          disabled={hardwareWalletRequiresConnection}
-          onClick={async (event) => {
           if (type === MESSAGE_TYPE.ETH_SIGN) {
             this.setState({ showSignatureRequestWarning: true });
           } else {
@@ -244,10 +234,8 @@ export default class SignatureRequestOriginal extends Component {
             history.push(mostRecentOverviewPage);
           }
         }}
-        >
+        disabled={hardwareWalletRequiresConnection}
-          {t('sign')}
+      />
-        </Button>
-      </div>
     );
   };
 

ui/components/app/signature-request-original/signature-request-original.test.js

@@ -81,7 +81,7 @@ describe('SignatureRequestOriginal', () => {
 
   it('should render warning for eth sign when sign button clicked', () => {
     render();
-    const signButton = screen.getByTestId('request-signature__sign');
+    const signButton = screen.getByTestId('page-container-footer-next');
 
     fireEvent.click(signButton);
     expect(screen.getByText('Your funds may be at risk')).toBeInTheDocument();

ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap

@@ -680,24 +680,26 @@ exports[`Signature Request Component render should match snapshot 1`] = `
       </div>
     </div>
     <div
-      class="signature-request-footer"
+      class="page-container__footer"
     >
+      <footer>
         <button
-        class="button btn--rounded btn-secondary"
+          class="button btn--rounded btn-secondary page-container__footer-button"
-        data-testid="signature-cancel-button"
+          data-testid="page-container-footer-cancel"
           role="button"
           tabindex="0"
         >
           Reject
         </button>
         <button
-        class="button btn--rounded btn-primary"
+          class="button btn--rounded btn-primary page-container__footer-button"
-        data-testid="signature-sign-button"
+          data-testid="page-container-footer-next"
           role="button"
           tabindex="0"
         >
           Sign
         </button>
+      </footer>
     </div>
   </div>
 </div>

ui/components/app/signature-request/index.scss

@@ -1,4 +1,3 @@
-@import 'signature-request-footer/index';
 @import 'signature-request-header/index';
 @import 'signature-request-message/index';
 @import 'signature-request-data/index';

ui/components/app/signature-request/signature-request-footer/index.scss

@@ -1,24 +0,0 @@
-.signature-request-footer {
-  display: flex;
-  box-shadow: inset 0 1px 0 var(--color-border-muted);
-
-  button {
-    text-transform: uppercase;
-    flex: 1;
-    margin: 1rem 0.5rem;
-  }
-
-  button:first-child {
-    flex: 1 1 100%;
-    padding: 0;
-  }
-
-  button:last-child {
-    flex: 1 1 100%;
-    margin-right: 1rem;
-  }
-
-  &__tooltip {
-    display: flex;
-  }
-}

ui/components/app/signature-request/signature-request-footer/signature-request-footer.component.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import Button from '../../../ui/button';
+
+import { PageContainerFooter } from '../../../ui/page-container';
 
 export default class SignatureRequestFooter extends PureComponent {
   static propTypes = {
@@ -16,23 +17,13 @@ export default class SignatureRequestFooter extends PureComponent {
   render() {
     const { cancelAction, signAction, disabled = false } = this.props;
     return (
-      <div className="signature-request-footer">
+      <PageContainerFooter
-        <Button
+        cancelText={this.context.t('reject')}
-          onClick={cancelAction}
+        submitText={this.context.t('sign')}
-          type="secondary"
+        onCancel={cancelAction}
-          data-testid="signature-cancel-button"
+        onSubmit={signAction}
-        >
-          {this.context.t('reject')}
-        </Button>
-        <Button
-          onClick={signAction}
-          type="primary"
-          data-testid="signature-sign-button"
         disabled={disabled}
-        >
+      />
-          {this.context.t('sign')}
-        </Button>
-      </div>
     );
   }
 }

ui/components/app/signature-request/signature-request.container.test.js

@@ -105,7 +105,7 @@ describe('Signature Request', () => {
   });
 
   it('cancel', () => {
-    const cancelButton = screen.getByTestId('signature-cancel-button');
+    const cancelButton = screen.getByTestId('page-container-footer-cancel');
 
     fireEvent.click(cancelButton);
 
@@ -113,7 +113,7 @@ describe('Signature Request', () => {
   });
 
   it('sign', () => {
-    const signButton = screen.getByTestId('signature-sign-button');
+    const signButton = screen.getByTestId('page-container-footer-next');
 
     fireEvent.click(signButton);
 

ui/components/ui/page-container/index.scss

@@ -56,6 +56,7 @@
     justify-content: center;
     border-top: 1px solid var(--color-border-muted);
     flex: 0 0 auto;
+    width: 100%;
 
     footer {
       display: flex;

ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.js

@@ -5,6 +5,7 @@ import ActionableMessage from '../../components/ui/actionable-message/actionable
 import Button from '../../components/ui/button';
 import Identicon from '../../components/ui/identicon';
 import TokenBalance from '../../components/ui/token-balance';
+import { PageContainerFooter } from '../../components/ui/page-container';
 import { I18nContext } from '../../contexts/i18n';
 import { MetaMetricsContext } from '../../contexts/metametrics';
 import { getMostRecentOverviewPage } from '../../ducks/history/history';
@@ -193,32 +194,18 @@ const ConfirmAddSuggestedToken = () => {
           </div>
         </div>
       </div>
-      <div className="page-container__footer">
+      <PageContainerFooter
-        <footer>
+        cancelText={t('cancel')}
-          <Button
+        submitText={t('addToken')}
-            type="secondary"
+        onCancel={async () => {
-            large
-            className="page-container__footer-button"
-            onClick={async () => {
           await Promise.all(
             suggestedAssets.map(({ id }) => dispatch(rejectWatchAsset(id))),
           );
           history.push(mostRecentOverviewPage);
         }}
-          >
+        onSubmit={handleAddTokensClick}
-            {t('cancel')}
-          </Button>
-          <Button
-            type="primary"
-            large
-            className="page-container__footer-button"
         disabled={suggestedAssets.length === 0}
-            onClick={handleAddTokensClick}
+      />
-          >
-            {t('addToken')}
-          </Button>
-        </footer>
-      </div>
     </div>
   );
 };

ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js

@@ -4,10 +4,10 @@ import copyToClipboard from 'copy-to-clipboard';
 import classnames from 'classnames';
 
 import AccountListItem from '../../components/app/account-list-item';
-import Button from '../../components/ui/button';
 import Identicon from '../../components/ui/identicon';
 import Tooltip from '../../components/ui/tooltip';
 import Copy from '../../components/ui/icon/copy-icon.component';
+import { PageContainerFooter } from '../../components/ui/page-container';
 
 import { EVENT } from '../../../shared/constants/metametrics';
 import { SECOND } from '../../../shared/constants/time';
@@ -258,12 +258,10 @@ export default class ConfirmDecryptMessage extends Component {
     const { trackEvent, t } = this.context;
 
     return (
-      <div className="request-decrypt-message__footer">
+      <PageContainerFooter
-        <Button
+        cancelText={t('cancel')}
-          type="secondary"
+        submitText={t('decrypt')}
-          large
+        onCancel={async (event) => {
-          className="request-decrypt-message__footer__cancel-button"
-          onClick={async (event) => {
           await cancelDecryptMessage(txData, event);
           trackEvent({
             category: EVENT.CATEGORIES.MESSAGES,
@@ -276,14 +274,7 @@ export default class ConfirmDecryptMessage extends Component {
           clearConfirmTransaction();
           history.push(mostRecentOverviewPage);
         }}
-        >
+        onSubmit={async (event) => {
-          {t('cancel')}
-        </Button>
-        <Button
-          type="primary"
-          large
-          className="request-decrypt-message__footer__sign-button"
-          onClick={async (event) => {
           await decryptMessage(txData, event);
           trackEvent({
             category: EVENT.CATEGORIES.MESSAGES,
@@ -296,10 +287,7 @@ export default class ConfirmDecryptMessage extends Component {
           clearConfirmTransaction();
           history.push(mostRecentOverviewPage);
         }}
-        >
+      />
-          {t('decrypt')}
-        </Button>
-      </div>
     );
   };
 

ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss

@@ -243,27 +243,6 @@
     }
   }
 
-  &__footer {
-    @include H4;
-
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    flex: 0 0 auto;
-    border-top: 1px solid var(--color-border-default);
-    padding: 1.6rem;
-
-    button {
-      width: 165px;
-    }
-
-    &__cancel-button {
-      margin-right: 1.2rem;
-    }
-  }
-
   &__visual {
     display: flex;
     flex-direction: row;

ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js

@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import AccountListItem from '../../components/app/account-list-item';
-import Button from '../../components/ui/button';
 import Identicon from '../../components/ui/identicon';
+import { PageContainerFooter } from '../../components/ui/page-container';
 
 import { EVENT } from '../../../shared/constants/metametrics';
 import { conversionUtil } from '../../../shared/modules/conversion.utils';
@@ -161,12 +161,10 @@ export default class ConfirmEncryptionPublicKey extends Component {
     const { t, trackEvent } = this.context;
 
     return (
-      <div className="request-encryption-public-key__footer">
+      <PageContainerFooter
-        <Button
+        cancelText={t('cancel')}
-          type="secondary"
+        submitText={t('provide')}
-          large
+        onCancel={async (event) => {
-          className="request-encryption-public-key__footer__cancel-button"
-          onClick={async (event) => {
           await cancelEncryptionPublicKey(txData, event);
           trackEvent({
             category: EVENT.CATEGORIES.MESSAGES,
@@ -179,14 +177,7 @@ export default class ConfirmEncryptionPublicKey extends Component {
           clearConfirmTransaction();
           history.push(mostRecentOverviewPage);
         }}
-        >
+        onSubmit={async (event) => {
-          {this.context.t('cancel')}
-        </Button>
-        <Button
-          type="primary"
-          large
-          className="request-encryption-public-key__footer__sign-button"
-          onClick={async (event) => {
           await encryptionPublicKey(txData, event);
           this.context.trackEvent({
             category: EVENT.CATEGORIES.MESSAGES,
@@ -199,10 +190,7 @@ export default class ConfirmEncryptionPublicKey extends Component {
           clearConfirmTransaction();
           history.push(mostRecentOverviewPage);
         }}
-        >
+      />
-          {t('provide')}
-        </Button>
-      </div>
     );
   };
 

ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss

@@ -165,27 +165,6 @@
     color: var(--color-text-alternative);
   }
 
-  &__footer {
-    @include H3;
-
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    flex: 0 0 auto;
-    border-top: 1px solid var(--color-border-muted);
-    padding: 1.6rem;
-
-    button {
-      width: 165px;
-    }
-
-    &__cancel-button {
-      margin-right: 1.2rem;
-    }
-  }
-
   &__visual {
     display: flex;
     flex-direction: row;