From ba29c37f080f04c18fb6f86f3951f984d43c7a7d Mon Sep 17 00:00:00 2001
From: Ujwal Kumar <ujwalkumar95@gmail.com>
Date: Sun, 4 Jun 2023 14:06:50 +0530
Subject: [PATCH 1/6] Replace Typograph with Text component in
 numeric-input-component.js

---
 .../ui/numeric-input/numeric-input.component.js        | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/components/ui/numeric-input/numeric-input.component.js b/ui/components/ui/numeric-input/numeric-input.component.js
index 8d16351a8daa..8eba851be209 100644
--- a/ui/components/ui/numeric-input/numeric-input.component.js
+++ b/ui/components/ui/numeric-input/numeric-input.component.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import Typography from '../typography/typography';
 import {
   TextColor,
-  TypographyVariant,
+  TextVariant,
 } from '../../../helpers/constants/design-system';
 import { DECIMAL_REGEX } from '../../../../shared/constants/tokens';
+import { Text } from '../../component-library';
 
 export default function NumericInput({
   detailText = '',
@@ -52,13 +52,13 @@ export default function NumericInput({
         ref={inputRef}
       />
       {detailText && (
-        <Typography
+        <Text
           color={TextColor.textAlternative}
-          variant={TypographyVariant.H7}
+          variant={TextVariant.bodySm}
           as="span"
         >
           {detailText}
-        </Typography>
+        </Text>
       )}
     </div>
   );

From 9977cfe2cfee8545241f67898c282d4a3168d1cc Mon Sep 17 00:00:00 2001
From: Ujwal Kumar <ujwalkumar95@gmail.com>
Date: Sun, 4 Jun 2023 14:07:24 +0530
Subject: [PATCH 2/6] Replace Typography with Text component in
 signature-request-message.js

---
 .../signature-request-message.js                       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/components/app/signature-request/signature-request-message/signature-request-message.js b/ui/components/app/signature-request/signature-request-message/signature-request-message.js
index d343a6584696..fc9864748f0b 100644
--- a/ui/components/app/signature-request/signature-request-message/signature-request-message.js
+++ b/ui/components/app/signature-request/signature-request-message/signature-request-message.js
@@ -3,10 +3,9 @@ import PropTypes from 'prop-types';
 import { debounce } from 'lodash';
 import { I18nContext } from '../../../../contexts/i18n';
 import Box from '../../../ui/box';
-import Typography from '../../../ui/typography';
+import { Text } from '../../../component-library';
 import {
   DISPLAY,
-  FONT_WEIGHT,
   FLEX_DIRECTION,
   AlignItems,
   JustifyContent,
@@ -15,6 +14,7 @@ import {
   BorderColor,
   BorderRadius,
   TextColor,
+  FontWeight,
 } from '../../../../helpers/constants/design-system';
 import SignatureRequestData from '../signature-request-data';
 
@@ -79,14 +79,14 @@ export default function SignatureRequestMessage({
         className="signature-request-message__root"
         ref={setMessageRootRef}
       >
-        <Typography
-          fontWeight={FONT_WEIGHT.BOLD}
+        <Text
+          fontWeight={FontWeight.Bold}
           color={TextColor.textDefault}
           marginLeft={4}
           className="signature-request-message__title"
         >
           {primaryType}
-        </Typography>
+        </Text>
         <SignatureRequestData data={data.value} />
       </Box>
     </Box>

From e5bfeddd080e57396e5d7d21a432698bb4f3204a Mon Sep 17 00:00:00 2001
From: Ujwal Kumar <ujwalkumar95@gmail.com>
Date: Sun, 4 Jun 2023 14:08:15 +0530
Subject: [PATCH 3/6] Replace Typography with Text component in
 signature-request.component.js

---
 .../signature-request.component.js            | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/ui/components/app/signature-request/signature-request.component.js b/ui/components/app/signature-request/signature-request.component.js
index a1698d55373d..428579d38279 100644
--- a/ui/components/app/signature-request/signature-request.component.js
+++ b/ui/components/app/signature-request/signature-request.component.js
@@ -13,10 +13,8 @@ import {
 import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
 import SiteOrigin from '../../ui/site-origin';
 import Button from '../../ui/button';
-import Typography from '../../ui/typography/typography';
 import ContractDetailsModal from '../modals/contract-details-modal/contract-details-modal';
 import {
-  TypographyVariant,
   FontWeight,
   TextAlign,
   TextColor,
@@ -324,26 +322,26 @@ export default class SignatureRequest extends PureComponent {
             />
           </div>
 
-          <Typography
+          <Text
             className="signature-request__content__title"
-            variant={TypographyVariant.H3}
+            variant={TextVariant.headingMd}
+            as="h3"
             fontWeight={FontWeight.Bold}
-            boxProps={{
-              marginTop: 4,
-            }}
+            marginTop={4}
           >
             {this.context.t('sigRequest')}
-          </Typography>
-          <Typography
+          </Text>
+          <Text
             className="request-signature__content__subtitle"
-            variant={TypographyVariant.H7}
+            variant={TextVariant.bodySm}
+            as="h6"
             color={TextColor.textAlternative}
             align={TextAlign.Center}
             margin={12}
             marginTop={3}
           >
             {this.context.t('signatureRequestGuidance')}
-          </Typography>
+          </Text>
           {verifyingContract ? (
             <div>
               <Button
@@ -352,12 +350,13 @@ export default class SignatureRequest extends PureComponent {
                 className="signature-request-content__verify-contract-details"
                 data-testid="verify-contract-details"
               >
-                <Typography
-                  variant={TypographyVariant.H7}
+                <Text
+                  variant={TextVariant.bodySm}
+                  as="h6"
                   color={TextColor.primaryDefault}
                 >
                   {this.context.t('verifyContractDetails')}
-                </Typography>
+                </Text>
               </Button>
             </div>
           ) : null}

From f5c9cd794bcc2d4fe178a6967fb00812e506e535 Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Mon, 5 Jun 2023 20:15:30 -0700
Subject: [PATCH 4/6] Replacing deprecating constants and fixing some signature
 story warnings

---
 .../signature-request-original.component.js    |  6 +-----
 .../signature-request.component.test.js.snap   | 18 ++++++++++--------
 ui/components/app/signature-request/index.scss |  6 ------
 .../signature-request-message.js               | 11 +++++------
 .../signature-request-message.stories.js       |  1 -
 .../signature-request.component.js             | 11 ++++-------
 .../signature-request.stories.js               |  7 ++++++-
 .../popover/popover.stories.tsx                |  2 +-
 8 files changed, 27 insertions(+), 35 deletions(-)

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 fe20b8adbd97..3a8d06934a33 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
@@ -168,11 +168,7 @@ export default class SignatureRequestOriginal extends Component {
                 color={IconColor.infoDefault}
                 marginRight={2}
               />
-              <Text
-                variant={TextVariant.bodyXs}
-                color={TextColor.textDefault}
-                as="h7"
-              >
+              <Text variant={TextVariant.bodyXs} color={TextColor.textDefault}>
                 {this.context.t('mismatchAccount', [
                   shortenAddress(this.props.selectedAccount.address),
                   shortenAddress(this.props.fromAccount.address),
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 73294848d19e..61c4698d978e 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
@@ -206,12 +206,13 @@ exports[`Signature Request Component render should match snapshot when we are us
         </div>
       </div>
       <h3
-        class="box box--margin-top-4 box--margin-bottom-1 box--flex-direction-row typography signature-request__content__title typography--h3 typography--weight-bold typography--style-normal typography--color-text-default"
+        class="box mm-text signature-request__content__title mm-text--heading-md box--margin-top-4 box--flex-direction-row box--color-text-default"
       >
         Signature request
       </h3>
       <h6
-        class="box box--margin-12 box--margin-top-3 box--margin-bottom-1 box--flex-direction-row typography request-signature__content__subtitle typography--h7 typography--weight-normal typography--style-normal typography--align-center typography--color-text-alternative"
+        align="center"
+        class="box mm-text request-signature__content__subtitle mm-text--body-sm box--margin-12 box--margin-top-3 box--flex-direction-row box--color-text-alternative"
       >
         Only sign this message if you fully understand the content and trust the requesting site.
       </h6>
@@ -223,7 +224,7 @@ exports[`Signature Request Component render should match snapshot when we are us
           tabindex="0"
         >
           <h6
-            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-primary-default"
+            class="box mm-text mm-text--body-sm box--flex-direction-row box--color-primary-default"
           >
             Verify third-party details
           </h6>
@@ -237,7 +238,7 @@ exports[`Signature Request Component render should match snapshot when we are us
         class="box signature-request-message__root box--margin-2 box--padding-top-3 box--padding-right-3 box--padding-bottom-3 box--flex-direction-row box--background-color-background-default box--rounded-xl box--border-color-border-muted box--border-style-solid box--border-width-1"
       >
         <p
-          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-message__title typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+          class="box mm-text mm-text--body-md mm-text--font-weight-bold box--margin-left-4 box--flex-direction-row box--color-text-default"
         >
           Mail
         </p>
@@ -982,12 +983,13 @@ exports[`Signature Request Component render should match snapshot when we want t
         </div>
       </div>
       <h3
-        class="box box--margin-top-4 box--margin-bottom-1 box--flex-direction-row typography signature-request__content__title typography--h3 typography--weight-bold typography--style-normal typography--color-text-default"
+        class="box mm-text signature-request__content__title mm-text--heading-md box--margin-top-4 box--flex-direction-row box--color-text-default"
       >
         Signature request
       </h3>
       <h6
-        class="box box--margin-12 box--margin-top-3 box--margin-bottom-1 box--flex-direction-row typography request-signature__content__subtitle typography--h7 typography--weight-normal typography--style-normal typography--align-center typography--color-text-alternative"
+        align="center"
+        class="box mm-text request-signature__content__subtitle mm-text--body-sm box--margin-12 box--margin-top-3 box--flex-direction-row box--color-text-alternative"
       >
         Only sign this message if you fully understand the content and trust the requesting site.
       </h6>
@@ -999,7 +1001,7 @@ exports[`Signature Request Component render should match snapshot when we want t
           tabindex="0"
         >
           <h6
-            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-primary-default"
+            class="box mm-text mm-text--body-sm box--flex-direction-row box--color-primary-default"
           >
             Verify third-party details
           </h6>
@@ -1013,7 +1015,7 @@ exports[`Signature Request Component render should match snapshot when we want t
         class="box signature-request-message__root box--margin-2 box--padding-top-3 box--padding-right-3 box--padding-bottom-3 box--flex-direction-row box--background-color-background-default box--rounded-xl box--border-color-border-muted box--border-style-solid box--border-width-1"
       >
         <p
-          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-message__title typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+          class="box mm-text mm-text--body-md mm-text--font-weight-bold box--margin-left-4 box--flex-direction-row box--color-text-default"
         >
           Mail
         </p>
diff --git a/ui/components/app/signature-request/index.scss b/ui/components/app/signature-request/index.scss
index a53a9d71c613..5cc2a0981e2e 100644
--- a/ui/components/app/signature-request/index.scss
+++ b/ui/components/app/signature-request/index.scss
@@ -47,12 +47,6 @@
   flex-direction: column;
   min-height: min-content;
 
-  &__title {
-    @include H5;
-
-    font-weight: 500;
-  }
-
   &__info {
     @include H7;
 
diff --git a/ui/components/app/signature-request/signature-request-message/signature-request-message.js b/ui/components/app/signature-request/signature-request-message/signature-request-message.js
index fc9864748f0b..52322d084fd1 100644
--- a/ui/components/app/signature-request/signature-request-message/signature-request-message.js
+++ b/ui/components/app/signature-request/signature-request-message/signature-request-message.js
@@ -5,8 +5,8 @@ import { I18nContext } from '../../../../contexts/i18n';
 import Box from '../../../ui/box';
 import { Text } from '../../../component-library';
 import {
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   AlignItems,
   JustifyContent,
   Color,
@@ -44,14 +44,14 @@ export default function SignatureRequestMessage({
 
   return (
     <Box
-      display={DISPLAY.FLEX}
-      flexDirection={FLEX_DIRECTION.COLUMN}
+      display={Display.Flex}
+      flexDirection={FlexDirection.Column}
       onScroll={debounce(setMessageIsScrolledAtBottom, 25)}
       className="signature-request-message"
     >
       {messageIsScrollable ? (
         <Box
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           alignItems={AlignItems.center}
           justifyContent={JustifyContent.center}
           borderColor={BorderColor.borderDefault}
@@ -83,7 +83,6 @@ export default function SignatureRequestMessage({
           fontWeight={FontWeight.Bold}
           color={TextColor.textDefault}
           marginLeft={4}
-          className="signature-request-message__title"
         >
           {primaryType}
         </Text>
diff --git a/ui/components/app/signature-request/signature-request-message/signature-request-message.stories.js b/ui/components/app/signature-request/signature-request-message/signature-request-message.stories.js
index 9449e33a5189..db848c04ecec 100644
--- a/ui/components/app/signature-request/signature-request-message/signature-request-message.stories.js
+++ b/ui/components/app/signature-request/signature-request-message/signature-request-message.stories.js
@@ -4,7 +4,6 @@ import SignatureRequestMessage from './signature-request-message';
 
 export default {
   title: 'Components/App/SignatureRequestMessage',
-
   component: SignatureRequestMessage,
   argTypes: {
     data: { control: 'object' },
diff --git a/ui/components/app/signature-request/signature-request.component.js b/ui/components/app/signature-request/signature-request.component.js
index 428579d38279..ac1925d3a4c8 100644
--- a/ui/components/app/signature-request/signature-request.component.js
+++ b/ui/components/app/signature-request/signature-request.component.js
@@ -15,13 +15,12 @@ import SiteOrigin from '../../ui/site-origin';
 import Button from '../../ui/button';
 import ContractDetailsModal from '../modals/contract-details-modal/contract-details-modal';
 import {
-  FontWeight,
   TextAlign,
   TextColor,
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
   IconColor,
-  DISPLAY,
-  BLOCK_SIZES,
+  Display,
+  BlockSize,
   TextVariant,
   BackgroundColor,
   ///: END:ONLY_INCLUDE_IN
@@ -287,8 +286,8 @@ export default class SignatureRequest extends PureComponent {
             this.props.selectedAccount.address === address ? null : (
               <Box
                 className="request-signature__mismatch-info"
-                display={DISPLAY.FLEX}
-                width={BLOCK_SIZES.FULL}
+                display={Display.Flex}
+                width={BlockSize.Full}
                 padding={4}
                 marginBottom={4}
                 backgroundColor={BackgroundColor.primaryMuted}
@@ -301,7 +300,6 @@ export default class SignatureRequest extends PureComponent {
                 <Text
                   variant={TextVariant.bodyXs}
                   color={TextColor.textDefault}
-                  as="h7"
                 >
                   {this.context.t('mismatchAccount', [
                     shortenAddress(this.props.selectedAccount.address),
@@ -326,7 +324,6 @@ export default class SignatureRequest extends PureComponent {
             className="signature-request__content__title"
             variant={TextVariant.headingMd}
             as="h3"
-            fontWeight={FontWeight.Bold}
             marginTop={4}
           >
             {this.context.t('sigRequest')}
diff --git a/ui/components/app/signature-request/signature-request.stories.js b/ui/components/app/signature-request/signature-request.stories.js
index fbae8f99cae7..1fc2e555baa1 100644
--- a/ui/components/app/signature-request/signature-request.stories.js
+++ b/ui/components/app/signature-request/signature-request.stories.js
@@ -9,7 +9,6 @@ const [MOCK_PRIMARY_IDENTITY, MOCK_SECONDARY_IDENTITY] = Object.values(
 
 export default {
   title: 'Components/App/SignatureRequest',
-
   component: SignatureRequest,
   parameters: {
     docs: {
@@ -30,6 +29,10 @@ export default {
     clearConfirmTransaction: { action: 'Clean Confirm' },
     cancel: { action: 'Cancel' },
     sign: { action: 'Sign' },
+    showRejectTransactionsConfirmationModal: {
+      action: 'showRejectTransactionsConfirmationModal',
+    },
+    cancelAll: { action: 'cancelAll' },
   },
 };
 
@@ -79,6 +82,8 @@ DefaultStory.args = {
   fromAccount: MOCK_PRIMARY_IDENTITY,
   providerConfig: { name: 'Goerli ETH' },
   selectedAccount: MOCK_PRIMARY_IDENTITY,
+  hardwareWalletRequiresConnection: false,
+  currentCurrency: 'usd',
 };
 
 export const AccountMismatchStory = (args) => {
diff --git a/ui/components/component-library/popover/popover.stories.tsx b/ui/components/component-library/popover/popover.stories.tsx
index ca297daf8a39..bf54ed248301 100644
--- a/ui/components/component-library/popover/popover.stories.tsx
+++ b/ui/components/component-library/popover/popover.stories.tsx
@@ -731,7 +731,7 @@ export const Offset: StoryFn<typeof Popover> = (args) => {
   );
 };
 
-export const onPressEscKey: StoryFn<typeof Popover> = (args) => {
+export const OnPressEscKey: StoryFn<typeof Popover> = (args) => {
   const [referenceElement, setReferenceElement] = useState();
   const [isOpen, setIsOpen] = useState(false);
 

From 1407e86a28d31b7e60f0c8f86f7a6001475a18e4 Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Tue, 6 Jun 2023 13:04:22 -0700
Subject: [PATCH 5/6] Updating snapshot

---
 .../__snapshots__/index.test.js.snap                     | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap b/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap
index 22eaa593dcfb..6ead1567f8eb 100644
--- a/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap
+++ b/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap
@@ -205,12 +205,13 @@ exports[`Signature Request Component render should match snapshot 1`] = `
         </div>
       </div>
       <h3
-        class="box box--margin-top-4 box--margin-bottom-1 box--flex-direction-row typography signature-request__content__title typography--h3 typography--weight-bold typography--style-normal typography--color-text-default"
+        class="box mm-text signature-request__content__title mm-text--heading-md box--margin-top-4 box--flex-direction-row box--color-text-default"
       >
         Signature request
       </h3>
       <h6
-        class="box box--margin-12 box--margin-top-3 box--margin-bottom-1 box--flex-direction-row typography request-signature__content__subtitle typography--h7 typography--weight-normal typography--style-normal typography--align-center typography--color-text-alternative"
+        align="center"
+        class="box mm-text request-signature__content__subtitle mm-text--body-sm box--margin-12 box--margin-top-3 box--flex-direction-row box--color-text-alternative"
       >
         Only sign this message if you fully understand the content and trust the requesting site.
       </h6>
@@ -222,7 +223,7 @@ exports[`Signature Request Component render should match snapshot 1`] = `
           tabindex="0"
         >
           <h6
-            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-primary-default"
+            class="box mm-text mm-text--body-sm box--flex-direction-row box--color-primary-default"
           >
             Verify third-party details
           </h6>
@@ -236,7 +237,7 @@ exports[`Signature Request Component render should match snapshot 1`] = `
         class="box signature-request-message__root box--margin-2 box--padding-top-3 box--padding-right-3 box--padding-bottom-3 box--flex-direction-row box--background-color-background-default box--rounded-xl box--border-color-border-muted box--border-style-solid box--border-width-1"
       >
         <p
-          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-message__title typography--p typography--weight-bold typography--style-normal typography--color-text-default"
+          class="box mm-text mm-text--body-md mm-text--font-weight-bold box--margin-left-4 box--flex-direction-row box--color-text-default"
         >
           Mail
         </p>

From e98dcd416a5c159da12b7dfc42e47d7363ff6123 Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Mon, 19 Jun 2023 11:22:51 -0700
Subject: [PATCH 6/6] Fixing import

---
 .../signature-request.component.js                 | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/ui/components/app/signature-request/signature-request.component.js b/ui/components/app/signature-request/signature-request.component.js
index ac1925d3a4c8..796e2fffe983 100644
--- a/ui/components/app/signature-request/signature-request.component.js
+++ b/ui/components/app/signature-request/signature-request.component.js
@@ -17,11 +17,11 @@ import ContractDetailsModal from '../modals/contract-details-modal/contract-deta
 import {
   TextAlign,
   TextColor,
+  TextVariant,
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
   IconColor,
   Display,
   BlockSize,
-  TextVariant,
   BackgroundColor,
   ///: END:ONLY_INCLUDE_IN
 } from '../../../helpers/constants/design-system';
@@ -33,11 +33,15 @@ import SecurityProviderBannerMessage from '../security-provider-banner-message/s
 import { SECURITY_PROVIDER_MESSAGE_SEVERITIES } from '../security-provider-banner-message/security-provider-banner-message.constants';
 import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
 import { getValueFromWeiHex } from '../../../../shared/modules/conversion.utils';
-///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
-import { Icon, IconName, Text } from '../../component-library';
-import Box from '../../ui/box/box';
-///: END:ONLY_INCLUDE_IN
 
+import {
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  Box,
+  Icon,
+  IconName,
+  ///: END:ONLY_INCLUDE_IN
+  Text,
+} from '../../component-library';
 import Footer from './signature-request-footer';
 import Message from './signature-request-message';