From 3e523e2382faed57ac66848fb88697287e9cb5e0 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Mon, 23 Jan 2023 20:52:12 +0530
Subject: [PATCH] Use PageContainerFooter to render footer on all confirmation
 pages (#17316)

---
 test/e2e/tests/eth-sign.spec.js               |  2 +-
 test/e2e/tests/personal-sign.spec.js          |  2 +-
 .../signature-request-original.test.js.snap   | 35 +++++----
 .../app/signature-request-original/index.scss | 21 ------
 .../signature-request-original.component.js   | 48 +++++-------
 .../signature-request-original.test.js        |  2 +-
 .../signature-request.component.test.js.snap  | 36 ++++-----
 .../app/signature-request/index.scss          |  1 -
 .../signature-request-footer/index.scss       | 24 ------
 .../signature-request-footer.component.js     | 27 +++----
 .../signature-request.container.test.js       |  4 +-
 ui/components/ui/page-container/index.scss    |  1 +
 .../confirm-add-suggested-token.js            | 39 ++++------
 .../confirm-decrypt-message.component.js      | 74 ++++++++-----------
 .../confirm-decrypt-message.scss              | 21 ------
 ...confirm-encryption-public-key.component.js | 74 ++++++++-----------
 .../confirm-encryption-public-key.scss        | 21 ------
 17 files changed, 146 insertions(+), 286 deletions(-)
 delete mode 100644 ui/components/app/signature-request/signature-request-footer/index.scss

diff --git a/test/e2e/tests/eth-sign.spec.js b/test/e2e/tests/eth-sign.spec.js
index 528a55be8..87cab742b 100644
--- a/test/e2e/tests/eth-sign.spec.js
+++ b/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',
         );
diff --git a/test/e2e/tests/personal-sign.spec.js b/test/e2e/tests/personal-sign.spec.js
index 65f669e4c..0622595d3 100644
--- a/test/e2e/tests/personal-sign.spec.js
+++ b/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);
diff --git a/ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap b/ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap
index 38b691b7d..74fc60627 100644
--- a/ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap
+++ b/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"
     >
-      <button
-        class="button btn--rounded btn-secondary btn--large request-signature__footer__cancel-button"
-        role="button"
-        tabindex="0"
-      >
-        Reject
-      </button>
-      <button
-        class="button btn--rounded btn-primary btn--large request-signature__footer__sign-button"
-        data-testid="request-signature__sign"
-        role="button"
-        tabindex="0"
-      >
-        Sign
-      </button>
+      <footer>
+        <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 page-container__footer-button"
+          data-testid="page-container-footer-next"
+          role="button"
+          tabindex="0"
+        >
+          Sign
+        </button>
+      </footer>
     </div>
   </div>
 </div>
diff --git a/ui/components/app/signature-request-original/index.scss b/ui/components/app/signature-request-original/index.scss
index d44b72f71..2d13b79b6 100644
--- a/ui/components/app/signature-request-original/index.scss
+++ b/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;
-    }
-  }
 }
diff --git a/ui/components/app/signature-request-original/signature-request-original.component.js b/ui/components/app/signature-request-original/signature-request-original.component.js
index 10472db12..76aa85106 100644
--- a/ui/components/app/signature-request-original/signature-request-original.component.js
+++ b/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,38 +217,25 @@ export default class SignatureRequestOriginal extends Component {
     const { t } = this.context;
 
     return (
-      <div className="request-signature__footer">
-        <Button
-          type="secondary"
-          large
-          className="request-signature__footer__cancel-button"
-          onClick={async (event) => {
-            await cancel(event);
+      <PageContainerFooter
+        cancelText={t('reject')}
+        submitText={t('sign')}
+        onCancel={async (event) => {
+          await cancel(event);
+          clearConfirmTransaction();
+          history.push(mostRecentOverviewPage);
+        }}
+        onSubmit={async (event) => {
+          if (type === MESSAGE_TYPE.ETH_SIGN) {
+            this.setState({ showSignatureRequestWarning: true });
+          } else {
+            await sign(event);
             clearConfirmTransaction();
             history.push(mostRecentOverviewPage);
-          }}
-        >
-          {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 {
-              await sign(event);
-              clearConfirmTransaction();
-              history.push(mostRecentOverviewPage);
-            }
-          }}
-        >
-          {t('sign')}
-        </Button>
-      </div>
+          }
+        }}
+        disabled={hardwareWalletRequiresConnection}
+      />
     );
   };
 
diff --git a/ui/components/app/signature-request-original/signature-request-original.test.js b/ui/components/app/signature-request-original/signature-request-original.test.js
index d2ab83c9b..bee922f99 100644
--- a/ui/components/app/signature-request-original/signature-request-original.test.js
+++ b/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();
diff --git a/ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap b/ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap
index d020dcb11..c4924455f 100644
--- a/ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap
+++ b/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"
     >
-      <button
-        class="button btn--rounded btn-secondary"
-        data-testid="signature-cancel-button"
-        role="button"
-        tabindex="0"
-      >
-        Reject
-      </button>
-      <button
-        class="button btn--rounded btn-primary"
-        data-testid="signature-sign-button"
-        role="button"
-        tabindex="0"
-      >
-        Sign
-      </button>
+      <footer>
+        <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 page-container__footer-button"
+          data-testid="page-container-footer-next"
+          role="button"
+          tabindex="0"
+        >
+          Sign
+        </button>
+      </footer>
     </div>
   </div>
 </div>
diff --git a/ui/components/app/signature-request/index.scss b/ui/components/app/signature-request/index.scss
index 28a2eb16c..d5c851ef4 100644
--- a/ui/components/app/signature-request/index.scss
+++ b/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';
diff --git a/ui/components/app/signature-request/signature-request-footer/index.scss b/ui/components/app/signature-request/signature-request-footer/index.scss
deleted file mode 100644
index 0caf6a2be..000000000
--- a/ui/components/app/signature-request/signature-request-footer/index.scss
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/ui/components/app/signature-request/signature-request-footer/signature-request-footer.component.js b/ui/components/app/signature-request/signature-request-footer/signature-request-footer.component.js
index fe172b92d..06e99d7f0 100644
--- a/ui/components/app/signature-request/signature-request-footer/signature-request-footer.component.js
+++ b/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">
-        <Button
-          onClick={cancelAction}
-          type="secondary"
-          data-testid="signature-cancel-button"
-        >
-          {this.context.t('reject')}
-        </Button>
-        <Button
-          onClick={signAction}
-          type="primary"
-          data-testid="signature-sign-button"
-          disabled={disabled}
-        >
-          {this.context.t('sign')}
-        </Button>
-      </div>
+      <PageContainerFooter
+        cancelText={this.context.t('reject')}
+        submitText={this.context.t('sign')}
+        onCancel={cancelAction}
+        onSubmit={signAction}
+        disabled={disabled}
+      />
     );
   }
 }
diff --git a/ui/components/app/signature-request/signature-request.container.test.js b/ui/components/app/signature-request/signature-request.container.test.js
index 043fc2a12..a706ca952 100644
--- a/ui/components/app/signature-request/signature-request.container.test.js
+++ b/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);
 
diff --git a/ui/components/ui/page-container/index.scss b/ui/components/ui/page-container/index.scss
index 5967d2547..66a2b0df0 100644
--- a/ui/components/ui/page-container/index.scss
+++ b/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;
diff --git a/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.js b/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.js
index 935168921..979193b09 100644
--- a/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.js
+++ b/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">
-        <footer>
-          <Button
-            type="secondary"
-            large
-            className="page-container__footer-button"
-            onClick={async () => {
-              await Promise.all(
-                suggestedAssets.map(({ id }) => dispatch(rejectWatchAsset(id))),
-              );
-              history.push(mostRecentOverviewPage);
-            }}
-          >
-            {t('cancel')}
-          </Button>
-          <Button
-            type="primary"
-            large
-            className="page-container__footer-button"
-            disabled={suggestedAssets.length === 0}
-            onClick={handleAddTokensClick}
-          >
-            {t('addToken')}
-          </Button>
-        </footer>
-      </div>
+      <PageContainerFooter
+        cancelText={t('cancel')}
+        submitText={t('addToken')}
+        onCancel={async () => {
+          await Promise.all(
+            suggestedAssets.map(({ id }) => dispatch(rejectWatchAsset(id))),
+          );
+          history.push(mostRecentOverviewPage);
+        }}
+        onSubmit={handleAddTokensClick}
+        disabled={suggestedAssets.length === 0}
+      />
     </div>
   );
 };
diff --git a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
index 71c158572..f30576674 100644
--- a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
+++ b/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,48 +258,36 @@ export default class ConfirmDecryptMessage extends Component {
     const { trackEvent, t } = this.context;
 
     return (
-      <div className="request-decrypt-message__footer">
-        <Button
-          type="secondary"
-          large
-          className="request-decrypt-message__footer__cancel-button"
-          onClick={async (event) => {
-            await cancelDecryptMessage(txData, event);
-            trackEvent({
-              category: EVENT.CATEGORIES.MESSAGES,
-              event: 'Cancel',
-              properties: {
-                action: 'Decrypt Message Request',
-                legacy_event: true,
-              },
-            });
-            clearConfirmTransaction();
-            history.push(mostRecentOverviewPage);
-          }}
-        >
-          {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,
-              event: 'Confirm',
-              properties: {
-                action: 'Decrypt Message Request',
-                legacy_event: true,
-              },
-            });
-            clearConfirmTransaction();
-            history.push(mostRecentOverviewPage);
-          }}
-        >
-          {t('decrypt')}
-        </Button>
-      </div>
+      <PageContainerFooter
+        cancelText={t('cancel')}
+        submitText={t('decrypt')}
+        onCancel={async (event) => {
+          await cancelDecryptMessage(txData, event);
+          trackEvent({
+            category: EVENT.CATEGORIES.MESSAGES,
+            event: 'Cancel',
+            properties: {
+              action: 'Decrypt Message Request',
+              legacy_event: true,
+            },
+          });
+          clearConfirmTransaction();
+          history.push(mostRecentOverviewPage);
+        }}
+        onSubmit={async (event) => {
+          await decryptMessage(txData, event);
+          trackEvent({
+            category: EVENT.CATEGORIES.MESSAGES,
+            event: 'Confirm',
+            properties: {
+              action: 'Decrypt Message Request',
+              legacy_event: true,
+            },
+          });
+          clearConfirmTransaction();
+          history.push(mostRecentOverviewPage);
+        }}
+      />
     );
   };
 
diff --git a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss
index 82b6f3e83..2e0c068b4 100644
--- a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss
+++ b/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;
diff --git a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js
index 92cbf9dae..acf4328b3 100644
--- a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js
+++ b/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,48 +161,36 @@ export default class ConfirmEncryptionPublicKey extends Component {
     const { t, trackEvent } = this.context;
 
     return (
-      <div className="request-encryption-public-key__footer">
-        <Button
-          type="secondary"
-          large
-          className="request-encryption-public-key__footer__cancel-button"
-          onClick={async (event) => {
-            await cancelEncryptionPublicKey(txData, event);
-            trackEvent({
-              category: EVENT.CATEGORIES.MESSAGES,
-              event: 'Cancel',
-              properties: {
-                action: 'Encryption public key Request',
-                legacy_event: true,
-              },
-            });
-            clearConfirmTransaction();
-            history.push(mostRecentOverviewPage);
-          }}
-        >
-          {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,
-              event: 'Confirm',
-              properties: {
-                action: 'Encryption public key Request',
-                legacy_event: true,
-              },
-            });
-            clearConfirmTransaction();
-            history.push(mostRecentOverviewPage);
-          }}
-        >
-          {t('provide')}
-        </Button>
-      </div>
+      <PageContainerFooter
+        cancelText={t('cancel')}
+        submitText={t('provide')}
+        onCancel={async (event) => {
+          await cancelEncryptionPublicKey(txData, event);
+          trackEvent({
+            category: EVENT.CATEGORIES.MESSAGES,
+            event: 'Cancel',
+            properties: {
+              action: 'Encryption public key Request',
+              legacy_event: true,
+            },
+          });
+          clearConfirmTransaction();
+          history.push(mostRecentOverviewPage);
+        }}
+        onSubmit={async (event) => {
+          await encryptionPublicKey(txData, event);
+          this.context.trackEvent({
+            category: EVENT.CATEGORIES.MESSAGES,
+            event: 'Confirm',
+            properties: {
+              action: 'Encryption public key Request',
+              legacy_event: true,
+            },
+          });
+          clearConfirmTransaction();
+          history.push(mostRecentOverviewPage);
+        }}
+      />
     );
   };
 
diff --git a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss
index 7e1120255..5377e1ec3 100644
--- a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss
+++ b/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;