Merge pull request #24459 from MetaMask/Version-v11.15.4

v11.15.4
MetaMask · May 10, 2024 · 452706c · 452706c
2 parents fbd28c8 + a7e2a71
commit 452706c
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 72 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [11.15.4]
+### Changed
+-  Update UI for the Smart Transactions Opt In modal ([#24441](https://github.com/MetaMask/metamask-extension/pull/24441))
+
 ## [11.15.3]
 ### Changed
 - Smart transaction improvements ([#24340](https://github.com/MetaMask/metamask-extension/pull/24340))
@@ -4688,7 +4692,8 @@ Update styles and spacing on the critical error page  ([#20350](https://github.c
 - Added the ability to restore accounts from seed words.
 
 
-[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v11.15.3...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v11.15.4...HEAD
+[11.15.4]: https://github.com/MetaMask/metamask-extension/compare/v11.15.3...v11.15.4
 [11.15.3]: https://github.com/MetaMask/metamask-extension/compare/v11.15.2...v11.15.3
 [11.15.2]: https://github.com/MetaMask/metamask-extension/compare/v11.15.1...v11.15.2
 [11.15.1]: https://github.com/MetaMask/metamask-extension/compare/v11.15.0...v11.15.1

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/lavamoat/browserify/mmi/policy.json b/lavamoat/browserify/mmi/policy.json
@@ -756,12 +756,6 @@
         "@metamask/obs-store": true
       }
     },
-    "@metamask-institutional/portfolio-dashboard": {
-      "globals": {
-        "console.log": true,
-        "fetch": true
-      }
-    },
     "@metamask-institutional/rpc-allowlist": {
       "globals": {
         "URL": true

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "metamask-crx",
-  "version": "11.15.3",
+  "version": "11.15.4",
   "private": true,
   "repository": {
     "type": "git",
@@ -317,7 +317,7 @@
     "@metamask/scure-bip39": "^2.0.3",
     "@metamask/selected-network-controller": "^9.0.0",
     "@metamask/signature-controller": "^12.0.0",
-    "@metamask/smart-transactions-controller": "^10.0.0",
+    "@metamask/smart-transactions-controller": "^10.0.1",
     "@metamask/snaps-controllers": "^6.0.4",
     "@metamask/snaps-execution-environments": "^5.0.4",
     "@metamask/snaps-rpc-methods": "^7.0.2",

diff --git a/test/e2e/vault-decryption-chrome.spec.js b/test/e2e/vault-decryption-chrome.spec.js
@@ -50,9 +50,9 @@ async function getExtensionStorageFilePath(driver) {
  */
 async function closePopoverIfPresent(driver) {
   const popoverButtonSelector = '[data-testid="popover-close"]';
-  const linkNotRightNow = { text: 'Not right now', tag: 'button' };
+  const linkNoThanks = { text: 'No thanks', tag: 'button' };
   await driver.clickElementSafe(popoverButtonSelector);
-  await driver.clickElementSafe(linkNotRightNow);
+  await driver.clickElementSafe(linkNoThanks);
 }
 
 /**

diff --git a/ui/components/app/smart-transactions/index.scss b/ui/components/app/smart-transactions/index.scss
@@ -3,6 +3,19 @@
     flex: 1;
   }
 
+  &__icon {
+    --size: 40px;
+  }
+
+  &__no-thanks-link {
+    opacity: 75%;
+
+    &:hover {
+      color: var(--color-text-alternative) !important;
+      text-decoration: none !important;
+    }
+  }
+
   .mm-modal-content {
     &__dialog {
       background-image: url('/images/smart-transactions/smart-transactions-opt-in-background.svg');

diff --git a/ui/components/app/smart-transactions/smart-transactions-opt-in-modal.tsx b/ui/components/app/smart-transactions/smart-transactions-opt-in-modal.tsx
@@ -12,6 +12,7 @@ import {
   JustifyContent,
   TextVariant,
   IconColor,
+  FontWeight,
 } from '../../../helpers/constants/design-system';
 import {
   Modal,
@@ -26,7 +27,6 @@ import {
   ButtonLinkSize,
   Icon,
   IconName,
-  IconSize,
 } from '../../component-library';
 import { setSmartTransactionsOptInStatus } from '../../../store/actions';
 import { SMART_TRANSACTIONS_LEARN_MORE_URL } from '../../../../shared/constants/smartTransactions';
@@ -68,26 +68,28 @@ const EnableSmartTransactionsButton = ({
       onClick={handleEnableButtonClick}
       width={BlockSize.Full}
     >
-      {t('enableSmartTransactions')}
+      {t('enable')}
     </Button>
   );
 };
 
-const NotRightNowLink = ({
-  handleNotRightNowLinkClick,
+const NoThanksLink = ({
+  handleNoThanksLinkClick,
 }: {
-  handleNotRightNowLinkClick: () => void;
+  handleNoThanksLinkClick: () => void;
 }) => {
   const t = useI18nContext();
   return (
     <Button
       marginTop={2}
       type="link"
       variant={ButtonVariant.Link}
-      onClick={handleNotRightNowLinkClick}
+      color={TextColor.textAlternative}
+      onClick={handleNoThanksLinkClick}
       width={BlockSize.Full}
+      className="mm-smart-transactions-opt-in-modal__no-thanks-link"
     >
-      {t('notRightNow')}
+      {t('noThanks')}
     </Button>
   );
 };
@@ -100,10 +102,7 @@ const Description = () => {
         {t('smartTransactionsDescription')}
       </Text>
       <Text variant={TextVariant.bodyMd} marginTop={4}>
-        {t('smartTransactionsDescription2')}
-      </Text>
-      <Text variant={TextVariant.bodyMd} marginTop={4}>
-        {t('smartTransactionsDescription3', [<LearnMoreLink />])}
+        {t('smartTransactionsDescription2', [<LearnMoreLink />])}
       </Text>
     </Box>
   );
@@ -121,12 +120,12 @@ const Benefit = ({ text, iconName }: { text: string; iconName: IconName }) => {
     >
       <Icon
         name={iconName}
-        size={IconSize.Xl}
         color={IconColor.primaryDefault}
+        className="mm-smart-transactions-opt-in-modal__icon"
       />
       <Text
-        variant={TextVariant.bodyXs}
-        color={TextColor.textAlternative}
+        variant={TextVariant.bodySm}
+        fontWeight={FontWeight.Medium}
         marginTop={1}
       >
         {text}
@@ -173,7 +172,7 @@ export default function SmartTransactionsOptInModal({
     dispatch(setSmartTransactionsOptInStatus(true));
   }, [dispatch]);
 
-  const handleNotRightNowLinkClick = useCallback(() => {
+  const handleNoThanksLinkClick = useCallback(() => {
     dispatch(setSmartTransactionsOptInStatus(false));
   }, [dispatch]);
 
@@ -201,7 +200,7 @@ export default function SmartTransactionsOptInModal({
           alignItems={AlignItems.center}
           justifyContent={JustifyContent.center}
         >
-          {t('introducingSmartTransactions')}
+          {t('smartTransactionsOptItModalTitle')}
         </ModalHeader>
         <Box
           display={Display.Flex}
@@ -214,9 +213,7 @@ export default function SmartTransactionsOptInModal({
           <EnableSmartTransactionsButton
             handleEnableButtonClick={handleEnableButtonClick}
           />
-          <NotRightNowLink
-            handleNotRightNowLinkClick={handleNotRightNowLinkClick}
-          />
+          <NoThanksLink handleNoThanksLinkClick={handleNoThanksLinkClick} />
         </Box>
       </ModalContent>
     </Modal>