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 b61bcf79e79c..2fea925af519 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
@@ -156,11 +156,7 @@ export default class SignatureRequestOriginal extends Component {
color={IconColor.infoDefault}
marginRight={2}
/>
-
+
{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
Signature request
Only sign this message if you fully understand the content and trust the requesting site.
@@ -223,7 +224,7 @@ exports[`Signature Request Component render should match snapshot when we are us
tabindex="0"
>
Verify third-party details
@@ -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"
>
Mail
@@ -982,12 +983,13 @@ exports[`Signature Request Component render should match snapshot when we want t
Signature request
Only sign this message if you fully understand the content and trust the requesting site.
@@ -999,7 +1001,7 @@ exports[`Signature Request Component render should match snapshot when we want t
tabindex="0"
>
Verify third-party details
@@ -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"
>
Mail
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 d343a6584696..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
@@ -3,11 +3,10 @@ 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,
+ Display,
+ FlexDirection,
AlignItems,
JustifyContent,
Color,
@@ -15,6 +14,7 @@ import {
BorderColor,
BorderRadius,
TextColor,
+ FontWeight,
} from '../../../../helpers/constants/design-system';
import SignatureRequestData from '../signature-request-data';
@@ -44,14 +44,14 @@ export default function SignatureRequestMessage({
return (
{messageIsScrollable ? (
-
{primaryType}
-
+
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 8b6f1eaff981..4ca3d1126ab6 100644
--- a/ui/components/app/signature-request/signature-request.component.js
+++ b/ui/components/app/signature-request/signature-request.component.js
@@ -14,18 +14,15 @@ 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,
+ TextVariant,
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
IconColor,
- DISPLAY,
- BLOCK_SIZES,
- TextVariant,
+ Display,
+ BlockSize,
BackgroundColor,
///: END:ONLY_INCLUDE_IN
} from '../../../helpers/constants/design-system';
@@ -37,11 +34,15 @@ import ConfirmPageContainerNavigation from '../confirm-page-container/confirm-pa
import SecurityProviderBannerMessage from '../security-provider-banner-message/security-provider-banner-message';
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';
@@ -295,8 +296,8 @@ export default class SignatureRequest extends PureComponent {
this.props.selectedAccount.address === address ? null : (
{this.context.t('mismatchAccount', [
shortenAddress(this.props.selectedAccount.address),
@@ -330,26 +330,25 @@ export default class SignatureRequest extends PureComponent {
/>
-
{this.context.t('sigRequest')}
-
-
+
{this.context.t('signatureRequestGuidance')}
-
+
{verifyingContract ? (
-
{this.context.t('verifyContractDetails')}
-
+
) : null}
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 = (args) => {
);
};
-export const onPressEscKey: StoryFn = (args) => {
+export const OnPressEscKey: StoryFn = (args) => {
const [referenceElement, setReferenceElement] = useState();
const [isOpen, setIsOpen] = useState(false);
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 && (
-
{detailText}
-
+
)}
);
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`] = `
Signature request
Only sign this message if you fully understand the content and trust the requesting site.
@@ -222,7 +223,7 @@ exports[`Signature Request Component render should match snapshot 1`] = `
tabindex="0"
>
Verify third-party details
@@ -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"
>
Mail