Merge pull request #23299 from MetaMask/Version-v11.11.1

Version v11.11.1

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [11.11.1]
+### Added
+- Adds a staking button to the mainnet Ethereum token list item  ([#22347](https://github.com/MetaMask/metamask-extension/pull/22347))
+
 ## [11.11.0]
 ### Added
 - Added 'Pet Names' feature, allowing users to see preferred or suggested nicknames in the places of addesses
@@ -4424,7 +4428,8 @@ Update styles and spacing on the critical error page  ([#20350](https://github.c
 ### Uncategorized
 - Added the ability to restore accounts from seed words.
 
-[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v11.11.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v11.11.1...HEAD
+[11.11.1]: https://github.com/MetaMask/metamask-extension/compare/v11.11.0...v11.11.1
 [11.11.0]: https://github.com/MetaMask/metamask-extension/compare/v11.10.1...v11.11.0
 [11.10.1]: https://github.com/MetaMask/metamask-extension/compare/v11.10.0...v11.10.1
 [11.10.0]: https://github.com/MetaMask/metamask-extension/compare/v11.9.5...v11.10.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "metamask-crx",
-  "version": "11.11.0",
+  "version": "11.11.1",
   "private": true,
   "repository": {
     "type": "git",

shared/constants/metametrics.ts

@@ -595,6 +595,7 @@ export enum MetaMetricsEventName {
   SrpViewSrpText = 'Views SRP',
   SrpCopiedToClipboard = 'Copies SRP to clipboard',
   SrpToConfirmBackup = 'SRP Backup Confirm Displayed',
+  StakingEntryPointClicked = 'Stake Button Clicked',
   SupportLinkClicked = 'Support Link Clicked',
   TermsOfUseShown = 'Terms of Use Shown',
   TermsOfUseAccepted = 'Terms of Use Accepted',

shared/notifications/index.js

@@ -9,7 +9,8 @@ export const NOTIFICATION_OPEN_BETA_SNAPS = 26;
 export const NOTIFICATION_BUY_SELL_BUTTON = 27;
 export const NOTIFICATION_U2F_LEDGER_LIVE = 28;
 export const NOTIFICATION_BLOCKAID_DEFAULT = 29;
-export const NOTIFICATION_PETNAMES = 30;
+export const NOTIFICATION_STAKING_PORTFOLIO = 30;
+export const NOTIFICATION_PETNAMES = 31;
 
 export const UI_NOTIFICATIONS = {
   1: {
@@ -178,6 +179,14 @@ export const UI_NOTIFICATIONS = {
     date: null,
   },
   ///: END:ONLY_INCLUDE_IF
+  [NOTIFICATION_STAKING_PORTFOLIO]: {
+    id: Number(NOTIFICATION_STAKING_PORTFOLIO),
+    date: null,
+    image: {
+      src: 'images/portfolio-stake-notification-light-mode.png',
+      width: '100%',
+    },
+  },
   [NOTIFICATION_PETNAMES]: {
     id: Number(NOTIFICATION_PETNAMES),
     date: null,
@@ -477,6 +486,17 @@ export const getTranslatedUINotifications = (
           )
         : '',
     },
+    [NOTIFICATION_STAKING_PORTFOLIO]: {
+      ...UI_NOTIFICATIONS[NOTIFICATION_STAKING_PORTFOLIO],
+      title: t('notificationsStakingPortfolioTitle'),
+      description: [t('notificationsStakingPortfolioDescription')],
+      actionText: t('notificationsStakingPortfolioActionText'),
+      date: UI_NOTIFICATIONS[NOTIFICATION_STAKING_PORTFOLIO].date
+        ? new Intl.DateTimeFormat(formattedLocale).format(
+            new Date(UI_NOTIFICATIONS[NOTIFICATION_STAKING_PORTFOLIO].date),
+          )
+        : '',
+    },
     ///: BEGIN:ONLY_INCLUDE_IF(blockaid)
     [NOTIFICATION_BLOCKAID_DEFAULT]: {
       ...UI_NOTIFICATIONS[NOTIFICATION_BLOCKAID_DEFAULT],

test/e2e/tests/add-hide-token.spec.js

@@ -54,7 +54,7 @@ describe('Add hide token', function () {
 
         await driver.clickElement({ text: 'Tokens', tag: 'button' });
 
-        await driver.clickElement({ text: 'TST', tag: 'p' });
+        await driver.clickElement({ text: 'TST', tag: 'span' });
 
         await driver.clickElement('[data-testid="asset-options__button"]');
 

test/e2e/tests/add-multiple-tokens.spec.js

@@ -99,7 +99,7 @@ describe('Multiple ERC20 Watch Asset', function () {
 
         // Check all three tokens have been added to the token list.
         const addedTokens = await driver.findElements({
-          tag: 'p',
+          tag: 'span',
           text: 'TST',
         });
         assert.equal(addedTokens.length, 3);

ui/components/app/asset-list/asset-list.js

@@ -18,6 +18,7 @@ import {
   ///: END:ONLY_INCLUDE_IF
   getSelectedAccount,
   getPreferences,
+  getIsMainnet,
 } from '../../../selectors';
 import {
   getNativeCurrency,
@@ -62,6 +63,7 @@ const AssetList = ({ onClickAsset }) => {
   const nativeCurrency = useSelector(getNativeCurrency);
   const showFiat = useSelector(getShouldShowFiat);
   const chainId = useSelector(getCurrentChainId);
+  const isMainnet = useSelector(getIsMainnet);
   const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
   const { ticker, type } = useSelector(getProviderConfig);
   const isOriginalNativeSymbol = useIsOriginalNativeTokenSymbol(
@@ -123,6 +125,12 @@ const AssetList = ({ onClickAsset }) => {
   const defaultSwapsToken = useSelector(getSwapsDefaultToken);
   ///: END:ONLY_INCLUDE_IF
 
+  let isStakeable = isMainnet;
+
+  ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
+  isStakeable = false;
+  ///: END:ONLY_INCLUDE_IF
+
   return (
     <>
       {detectedTokens.length > 0 &&
@@ -211,6 +219,7 @@ const AssetList = ({ onClickAsset }) => {
         tokenImage={balanceIsLoading ? null : primaryTokenImage}
         isOriginalTokenSymbol={isOriginalNativeSymbol}
         isNativeCurrency
+        isStakeable={isStakeable}
       />
       <TokenList
         tokens={tokensWithBalances}

ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap

@@ -46,7 +46,7 @@ exports[`Token Cell should match snapshot 1`] = `
           class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--flex-direction-row mm-box--justify-content-space-between"
         >
           <div
-            class="mm-box mm-box--width-1/3"
+            class="mm-box mm-box--display-inline-block mm-box--width-1/3"
           >
             <span
               class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"

ui/components/app/whats-new-popup/whats-new-popup.js

@@ -18,6 +18,7 @@ import {
   NOTIFICATION_PETNAMES,
   NOTIFICATION_U2F_LEDGER_LIVE,
   getTranslatedUINotifications,
+  NOTIFICATION_STAKING_PORTFOLIO,
 } from '../../../../shared/notifications';
 import { I18nContext } from '../../../contexts/i18n';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
@@ -132,6 +133,9 @@ function getActionFunctionById(id, history) {
     [NOTIFICATION_U2F_LEDGER_LIVE]: () => {
       updateViewedNotifications({ [NOTIFICATION_U2F_LEDGER_LIVE]: true });
     },
+    [NOTIFICATION_STAKING_PORTFOLIO]: () => {
+      updateViewedNotifications({ [NOTIFICATION_STAKING_PORTFOLIO]: true });
+    },
     ///: BEGIN:ONLY_INCLUDE_IF(blockaid)
     [NOTIFICATION_BLOCKAID_DEFAULT]: () => {
       updateViewedNotifications({ [NOTIFICATION_BLOCKAID_DEFAULT]: true });
@@ -371,6 +375,7 @@ export default function WhatsNewPopup({ onClose }) {
     [NOTIFICATION_OPEN_BETA_SNAPS]: renderFirstNotification,
     [NOTIFICATION_BUY_SELL_BUTTON]: renderFirstNotification,
     [NOTIFICATION_U2F_LEDGER_LIVE]: renderFirstNotification,
+    [NOTIFICATION_STAKING_PORTFOLIO]: renderFirstNotification,
     ///: BEGIN:ONLY_INCLUDE_IF(blockaid)
     [NOTIFICATION_BLOCKAID_DEFAULT]: renderFirstNotification,
     ///: END:ONLY_INCLUDE_IF

ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap

@@ -41,7 +41,7 @@ exports[`TokenListItem should render correctly 1`] = `
           class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--flex-direction-row mm-box--justify-content-space-between"
         >
           <div
-            class="mm-box mm-box--width-1/3"
+            class="mm-box mm-box--display-inline-block mm-box--width-1/3"
           >
             <span
               class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"

ui/components/multichain/token-list-item/token-list-item.js

@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import classnames from 'classnames';
 import {
+  AlignItems,
   BackgroundColor,
   BlockSize,
   BorderColor,
@@ -24,6 +25,7 @@ import {
   Box,
   ButtonIcon,
   ButtonSecondary,
+  Icon,
   IconName,
   IconSize,
   Modal,
@@ -35,6 +37,7 @@ import { ModalHeader } from '../../component-library/modal-header/deprecated';
 import {
   getCurrentChainId,
   getCurrentNetwork,
+  getMetaMetricsId,
   getNativeCurrencyImage,
   getTestNetworkBackgroundColor,
 } from '../../../selectors';
@@ -52,6 +55,7 @@ import { setSelectedNetworkConfigurationId } from '../../../store/actions';
 import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import { getProviderConfig } from '../../../ducks/metamask/metamask';
+import { getPortfolioUrl } from '../../../helpers/utils/portfolio';
 
 export const TokenListItem = ({
   className,
@@ -63,10 +67,12 @@ export const TokenListItem = ({
   title,
   isOriginalTokenSymbol,
   isNativeCurrency = false,
+  isStakeable = false,
 }) => {
   const t = useI18nContext();
   const primaryTokenImage = useSelector(getNativeCurrencyImage);
   const trackEvent = useContext(MetaMetricsContext);
+  const metaMetricsId = useSelector(getMetaMetricsId);
   const chainId = useSelector(getCurrentChainId);
 
   // Scam warning
@@ -82,7 +88,45 @@ export const TokenListItem = ({
     title === CURRENCY_SYMBOLS.ETH && isOriginalTokenSymbol
       ? t('networkNameEthereum')
       : title;
-
+  const stakeableTitle = (
+    <Box
+      as="button"
+      backgroundColor={BackgroundColor.transparent}
+      data-testid={`staking-entrypoint-${chainId}`}
+      display={Display.InlineFlex}
+      flexDirection={FlexDirection.Row}
+      alignItems={AlignItems.center}
+      gap={1}
+      paddingInline={0}
+      tabIndex="0"
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const url = getPortfolioUrl('stake', 'ext_stake_button', metaMetricsId);
+        global.platform.openTab({ url });
+        trackEvent({
+          event: MetaMetricsEventName.StakingEntryPointClicked,
+          category: MetaMetricsEventCategory.Tokens,
+          properties: {
+            location: 'Token List Item',
+            text: 'Stake',
+            chain_id: chainId,
+            token_symbol: tokenSymbol,
+          },
+        });
+      }}
+    >
+      <Text as="span">•</Text>
+      <Text as="span" color={TextColor.primaryDefault}>
+        {t('stake')}
+      </Text>
+      <Icon
+        name={IconName.Stake}
+        size={IconSize.Sm}
+        color={IconColor.primaryDefault}
+      />
+    </Box>
+  );
   // Used for badge icon
   const currentNetwork = useSelector(getCurrentNetwork);
   const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
@@ -160,7 +204,10 @@ export const TokenListItem = ({
             justifyContent={JustifyContent.spaceBetween}
             gap={1}
           >
-            <Box width={BlockSize.OneThird}>
+            <Box
+              width={isStakeable ? BlockSize.Half : BlockSize.OneThird}
+              display={Display.InlineBlock}
+            >
               {title?.length > 12 ? (
                 <Tooltip
                   position="bottom"
@@ -174,7 +221,13 @@ export const TokenListItem = ({
                     variant={TextVariant.bodyMd}
                     ellipsis
                   >
-                    {tokenSymbol}
+                    {isStakeable ? (
+                      <>
+                        {tokenSymbol} {stakeableTitle}
+                      </>
+                    ) : (
+                      tokenSymbol
+                    )}
                   </Text>
                 </Tooltip>
               ) : (
@@ -184,7 +237,13 @@ export const TokenListItem = ({
                   variant={TextVariant.bodyMd}
                   ellipsis
                 >
-                  {tokenSymbol}
+                  {isStakeable ? (
+                    <Box display={Display.InlineBlock}>
+                      {tokenSymbol} {stakeableTitle}
+                    </Box>
+                  ) : (
+                    tokenSymbol
+                  )}
                 </Text>
               )}
             </Box>
@@ -205,9 +264,10 @@ export const TokenListItem = ({
               <Text
                 fontWeight={FontWeight.Medium}
                 variant={TextVariant.bodyMd}
-                width={BlockSize.TwoThirds}
+                width={isStakeable ? BlockSize.Half : BlockSize.TwoThirds}
                 textAlign={TextAlign.End}
                 data-testid="multichain-token-list-item-secondary-value"
+                ellipsis={isStakeable}
               >
                 {secondary}
               </Text>
@@ -317,4 +377,8 @@ TokenListItem.propTypes = {
    * isNativeCurrency represents if this item is the native currency
    */
   isNativeCurrency: PropTypes.bool,
+  /**
+   * isStakeable represents if this item is stakeable
+   */
+  isStakeable: PropTypes.bool,
 };

ui/components/multichain/token-list-item/token-list-item.stories.js

@@ -64,6 +64,9 @@ DefaultStory.decorators = [
     </Provider>
   ),
 ];
+DefaultStory.args = {
+  isStakeable: true,
+};
 
 export const ChaosStory = (args) => (
   <div