Merge branch 'main' into fix/confirmation-shield-messages

chaitanyapotti · web-flow · commit 8069be41eaf6 · 2025-11-14T20:35:33.000+08:00
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/app/_locales/en_GB/messages.json b/app/_locales/en_GB/messages.json
diff --git a/app/images/transaction-shield-modal.png b/app/images/transaction-shield-modal.png
diff --git a/test/e2e/tests/metrics/errors.spec.ts b/test/e2e/tests/metrics/errors.spec.ts
@@ -211,6 +211,7 @@ describe('Sentry errors', function () {
   async function mockSentryMigratorError(mockServer: Mockttp) {
     return await mockServer
       .forPost(sentryRegEx)
+      .withBodyIncluding('{"type":"event"')
       .withBodyIncluding(migrationError)
       .thenCallback(() => {
         return {
diff --git a/ui/components/app/shield-entry-modal/index.scss b/ui/components/app/shield-entry-modal/index.scss
@@ -4,6 +4,11 @@
   .shield-entry-modal__title {
     line-height: 1em;
     font-size: 2.25rem;
+
+    @include design-system.screen-sm-max {
+      font-size: 2rem;
+      margin-top: 16px;
+    }
   }
 
   .shield-entry-modal__content {
@@ -43,4 +48,13 @@
       width: 100%;
     }
   }
+
+  &-sheild-image {
+    width: 346px;
+    height: 252px;
+
+    @include design-system.screen-sm-max {
+      width: 322px;
+    }
+  }
 }
diff --git a/ui/components/app/shield-entry-modal/shield-entry-modal.tsx b/ui/components/app/shield-entry-modal/shield-entry-modal.tsx
@@ -47,12 +47,12 @@ import {
 } from '../../../../shared/constants/subscriptions';
 import {
   AlignItems,
+  BlockSize,
   Display,
   FlexDirection,
 } from '../../../helpers/constants/design-system';
 import { TRANSACTION_SHIELD_LINK } from '../../../helpers/constants/common';
 import { ThemeType } from '../../../../shared/constants/preferences';
-import ShieldIllustrationAnimation from './shield-illustration-animation';
 
 const ShieldEntryModal = ({
   skipEventSubmission = false,
@@ -197,6 +197,7 @@ const ShieldEntryModal = ({
           flexDirection={FlexDirection.Column}
           gap={3}
           paddingTop={4}
+          height={BlockSize.Full}
         >
           <Text
             fontFamily={FontFamily.Hero}
@@ -216,15 +217,11 @@ const ShieldEntryModal = ({
               ? t('shieldEntryModalSubtitleA', ['$10,000'])
               : t('shieldEntryModalSubtitleB', ['$10,000'])}
           </Text>
-          <Box className="grid place-items-center">
+          <Box className="shield-entry-modal-sheild-image flex-1 flex items-center justify-center">
             <img
-              src="/images/shield-entry-modal-bg.png"
+              src="/images/transaction-shield-modal.png"
               alt="Shield Entry Illustration"
-              className="col-start-1 row-start-1"
-            />
-            <ShieldIllustrationAnimation
-              containerClassName="shield-entry-modal-shield-illustration__container col-start-1 row-start-1"
-              canvasClassName="shield-entry-modal-shield-illustration__canvas"
+              className="mx-auto h-full w-full object-contain"
             />
           </Box>
         </ModalBody>
diff --git a/ui/css/utilities/colors.scss b/ui/css/utilities/colors.scss
@@ -24,4 +24,5 @@ Before adding a color here make sure that there isn't a design token available.
   --color-network-linea-mainnet-default: #121212;
   --color-network-linea-mainnet-inverse: #fcfcfc;
   --welcome-bg-light: #fff2eb;
+  --shield-membership-inactive-light: #dadce5;
 }
diff --git a/ui/pages/confirmations/components/send/amount/amount.test.tsx b/ui/pages/confirmations/components/send/amount/amount.test.tsx
@@ -120,6 +120,7 @@ describe('Amount', () => {
     fireEvent.change(getByRole('textbox'), { target: { value: 100 } });
     expect(getByText('$ 20.00')).toBeInTheDocument();
     fireEvent.click(getByTestId('toggle-fiat-mode'));
+    expect(getByText('$ 20.00 available')).toBeInTheDocument();
     expect(getByRole('textbox')).toHaveValue('20');
     expect(getByText('USD')).toBeInTheDocument();
     fireEvent.change(getByRole('textbox'), { target: { value: 100 } });
diff --git a/ui/pages/confirmations/components/send/amount/amount.tsx b/ui/pages/confirmations/components/send/amount/amount.tsx
@@ -121,6 +121,12 @@ export const Amount = ({
     updateValue,
   ]);
 
+  const balanceDisplayValue = useMemo(() => {
+    return fiatMode
+      ? `${getFiatDisplayValue(String(balance))} ${t('available')}`
+      : `${balance} ${asset?.symbol} ${t('available')}`;
+  }, [fiatMode, getFiatDisplayValue, balance, asset?.symbol, t]);
+
   if (asset?.standard === ERC721) {
     return null;
   }
@@ -173,7 +179,7 @@ export const Amount = ({
         </Text>
         <Box display={Display.Flex}>
           <Text color={TextColor.textAlternative} variant={TextVariant.bodySm}>
-            {balance} {asset?.symbol} {t('available')}
+            {balanceDisplayValue}
           </Text>
           {!isNonEvmNativeSendType && (
             <ButtonLink
diff --git a/ui/pages/settings/index.scss b/ui/pages/settings/index.scss
@@ -397,7 +397,9 @@
 
         &__modules {
           @include design-system.screen-sm-max {
-            display: block;
+            display: flex;
+            flex-flow: column;
+            overflow-y: auto;
           }
         }
       }
@@ -547,7 +549,8 @@
     }
 
     .settings-page__content__modules {
-      display: block;
+      display: flex;
+      flex-flow: column;
     }
   }
 }
diff --git a/ui/pages/settings/transaction-shield-tab/claims-form/claims-form.tsx b/ui/pages/settings/transaction-shield-tab/claims-form/claims-form.tsx
@@ -386,9 +386,8 @@ const ClaimsForm = ({ isView = false }: { isView?: boolean }) => {
 
   return (
     <Box
-      className="submit-claim-page flex flex-col"
+      className="submit-claim-page flex flex-col pt-4 px-4 pb-4"
       data-testid="submit-claim-page"
-      padding={4}
       gap={4}
     >
       {!isView && pendingClaims.length > 0 && (
@@ -430,16 +429,9 @@ const ClaimsForm = ({ isView = false }: { isView?: boolean }) => {
       </Text>
       {/* Personal details */}
       <Box>
-        <Text variant={TextVariant.HeadingSm}>
+        <Text variant={TextVariant.HeadingSm} className="mb-2">
           {t('shieldClaimPersonalDetails')}
         </Text>
-        <Text
-          variant={TextVariant.BodySm}
-          color={TextColor.TextAlternative}
-          className="mb-2"
-        >
-          {t('shieldClaimPersonalDetailsDescription')}
-        </Text>
         <Box
           borderColor={BoxBorderColor.BorderMuted}
           className="w-full h-[1px] border border-b-0"
@@ -495,17 +487,9 @@ const ClaimsForm = ({ isView = false }: { isView?: boolean }) => {
       />
       {/* Incident details */}
       <Box className="mt-4">
-        <Text variant={TextVariant.HeadingSm}>
+        <Text variant={TextVariant.HeadingSm} className="mb-2">
           {t('shieldClaimIncidentDetails')}
         </Text>
-        <Text
-          variant={TextVariant.BodySm}
-          color={TextColor.TextAlternative}
-          className="mb-2"
-        >
-          {t('shieldClaimIncidentDetailsDescription')}
-        </Text>
-
         <Box
           borderColor={BoxBorderColor.BorderMuted}
           className="w-full h-[1px] border border-b-0"
diff --git a/ui/pages/settings/transaction-shield-tab/index.scss b/ui/pages/settings/transaction-shield-tab/index.scss
@@ -36,6 +36,10 @@
     &--inactive {
       background-color: var(--color-background-subsection);
 
+      &-light {
+        background-color: var(--shield-membership-inactive-light);
+      }
+
       .transaction-shield-page__membership-text {
         color: var(--color-text-default);
       }
diff --git a/ui/pages/settings/transaction-shield-tab/transaction-shield.tsx b/ui/pages/settings/transaction-shield-tab/transaction-shield.tsx
@@ -12,6 +12,7 @@ import {
 } from '@metamask/subscription-controller';
 import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { NameType } from '@metamask/name-controller';
+import { useSelector } from 'react-redux';
 import {
   BannerAlert,
   BannerAlertSeverity,
@@ -86,6 +87,7 @@ import {
   ShieldErrorStateViewEnum,
 } from '../../../../shared/constants/subscriptions';
 import { ThemeType } from '../../../../shared/constants/preferences';
+import { getTheme } from '../../../selectors';
 import CancelMembershipModal from './cancel-membership-modal';
 import { isCardPaymentMethod, isCryptoPaymentMethod } from './types';
 
@@ -105,6 +107,8 @@ const TransactionShield = () => {
   }, [search]);
 
   const { formatCurrency } = useFormatters();
+  const theme = useSelector(getTheme);
+  const isLightTheme = theme === ThemeType.light;
 
   const {
     customerId,
@@ -663,7 +667,6 @@ const TransactionShield = () => {
       {membershipErrorBanner}
       <Box className="transaction-shield-page__container" marginBottom={4}>
         <Box
-          data-theme={ThemeType.dark}
           className={classnames(
             'transaction-shield-page__row transaction-shield-page__membership',
             {
@@ -673,6 +676,8 @@ const TransactionShield = () => {
                 isMembershipInactive && !showSkeletonLoader,
               'transaction-shield-page__membership--active':
                 !isMembershipInactive && !showSkeletonLoader,
+              'transaction-shield-page__membership--inactive-light':
+                isLightTheme && isMembershipInactive && !showSkeletonLoader,
             },
           )}
           {...rowsStyleProps}
diff --git a/ui/pages/shield-plan/index.scss b/ui/pages/shield-plan/index.scss
@@ -10,6 +10,15 @@
   .shield-plan-page__plan {
     border: 1px solid transparent;
     position: relative;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    column-gap: 16px;
+
+    @include design-system.screen-sm-max {
+      padding-top: 8px;
+      padding-bottom: 8px;
+      column-gap: 8px;
+    }
 
     .shield-plan-page__radio {
       display: flex;
@@ -32,6 +41,12 @@
       height: 20px;
       background-color: var(--color-primary-default);
     }
+
+    .shield-plan-page__plan-price {
+      @include design-system.screen-sm-max {
+        font-size: 16px;
+      }
+    }
   }
 
   .shield-plan-page__plan--selected {
diff --git a/ui/pages/shield-plan/shield-plan.tsx b/ui/pages/shield-plan/shield-plan.tsx
@@ -342,9 +342,6 @@ const ShieldPlan = () => {
                   key={plan.id}
                   {...rowsStyleProps}
                   borderRadius={BorderRadius.LG}
-                  paddingTop={2}
-                  paddingBottom={2}
-                  gap={4}
                   className={classnames('shield-plan-page__plan', {
                     'shield-plan-page__plan--selected':
                       plan.id === selectedPlan,
@@ -358,7 +355,12 @@ const ShieldPlan = () => {
                     className="shield-plan-page__radio-label"
                   >
                     <Text variant={DSTextVariant.bodySm}>{plan.label}</Text>
-                    <Text variant={DSTextVariant.headingMd}>{plan.price}</Text>
+                    <Text
+                      variant={DSTextVariant.headingMd}
+                      className="shield-plan-page__plan-price"
+                    >
+                      {plan.price}
+                    </Text>
                   </Box>
                   {plan.id === RECURRING_INTERVALS.year && (
                     <Box

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,11 @@`
`4`	`4`	`.shield-entry-modal__title {`
`5`	`5`	`line-height: 1em;`
`6`	`6`	`font-size: 2.25rem;`
	`7`	`+`
	`8`	`+ @include design-system.screen-sm-max {`
	`9`	`+ font-size: 2rem;`
	`10`	`+ margin-top: 16px;`
	`11`	`+ }`
`7`	`12`	`}`
`8`	`13`
`9`	`14`	`.shield-entry-modal__content {`
`@@ -43,4 +48,13 @@`
`43`	`48`	`width: 100%;`
`44`	`49`	`}`
`45`	`50`	`}`
	`51`	`+`
	`52`	`+ &-sheild-image {`
	`53`	`+ width: 346px;`
	`54`	`+ height: 252px;`
	`55`	`+`
	`56`	`+ @include design-system.screen-sm-max {`
	`57`	`+ width: 322px;`
	`58`	`+ }`
	`59`	`+ }`
`46`	`60`	`}`
Original file line number	Diff line number	Diff line change
`@@ -24,4 +24,5 @@ Before adding a color here make sure that there isn't a design token available.`
`24`	`24`	`--color-network-linea-mainnet-default: #121212;`
`25`	`25`	`--color-network-linea-mainnet-inverse: #fcfcfc;`
`26`	`26`	`--welcome-bg-light: #fff2eb;`
	`27`	`+ --shield-membership-inactive-light: #dadce5;`
`27`	`28`	`}`
Original file line number	Diff line number	Diff line change
`@@ -397,7 +397,9 @@`
`397`	`397`
`398`	`398`	`&__modules {`
`399`	`399`	`@include design-system.screen-sm-max {`
`400`		`- display: block;`
	`400`	`+ display: flex;`
	`401`	`+ flex-flow: column;`
	`402`	`+ overflow-y: auto;`
`401`	`403`	`}`
`402`	`404`	`}`
`403`	`405`	`}`
`@@ -547,7 +549,8 @@`
`547`	`549`	`}`
`548`	`550`
`549`	`551`	`.settings-page__content__modules {`
`550`		`- display: block;`
	`552`	`+ display: flex;`
	`553`	`+ flex-flow: column;`
`551`	`554`	`}`
`552`	`555`	`}`
`553`	`556`	`}`