Merge branch 'main' into test-3616-permission-summary-should-contain-…

…expected-content
MetaMask · Jan 15, 2025 · c18715c · c18715c
2 parents 132ad30 + 0157bb7
commit c18715c
Show file tree

Hide file tree

Showing 112 changed files with 1,455 additions and 703 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -77,7 +77,12 @@ module.exports = {
       files: [
         'app/components/UI/Name/**/*.{js,ts,tsx}',
         'app/components/UI/SimulationDetails/**/*.{js,ts,tsx}',
-        'app/components/hooks/DisplayName/**/*.{js,ts,tsx}'
+        'app/components/hooks/DisplayName/**/*.{js,ts,tsx}',
+        'app/components/Views/confirmations/components/Confirm/DataTree/**/*.{js,ts,tsx}',
+        'app/components/Views/confirmations/components/Confirm/Info/**/*.{js,ts,tsx}',
+        'app/components/Views/confirmations/components/PersonalSign/**/*.{js,ts,tsx}',
+        'app/components/Views/confirmations/components/SignatureRequest/**/*.{js,ts,tsx}',
+        'app/components/Views/confirmations/components/TypedSign/**/*.{js,ts,tsx}',
       ],
       rules: {
         'no-restricted-syntax': [
@@ -92,7 +97,7 @@ module.exports = {
               'selectProviderType',
               'selectRpcUrl',
               'selectSelectedNetworkClientId',
-              'selectTicker'
+              'selectTicker',
             ]
               .map((method) => `(${method})`)
               .join('|')}/]`,

diff --git a/app/components/UI/AssetOverview/AssetOverview.tsx b/app/components/UI/AssetOverview/AssetOverview.tsx
@@ -386,7 +386,7 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
     }
   } else {
     mainBalance = `${balance} ${asset.isETH ? asset.ticker : asset.symbol}`;
-    secondaryBalance = exchangeRate ? asset.balanceFiat : '';
+    secondaryBalance = asset.balanceFiat || '';
   }
 
   let currentPrice = 0;

diff --git a/app/components/UI/AssetOverview/Balance/Balance.tsx b/app/components/UI/AssetOverview/Balance/Balance.tsx
@@ -29,7 +29,6 @@ import Text, {
 } from '../../../../component-library/components/Texts/Text';
 import { TokenI } from '../../Tokens/types';
 import { useNavigation } from '@react-navigation/native';
-import { isPooledStakingFeatureEnabled } from '../../Stake/constants';
 import StakingBalance from '../../Stake/components/StakingBalance/StakingBalance';
 import {
   PopularList,
@@ -167,9 +166,7 @@ const Balance = ({ asset, mainBalance, secondaryBalance }: BalanceProps) => {
           {asset.name || asset.symbol}
         </Text>
       </AssetElement>
-      {isPooledStakingFeatureEnabled() && asset?.isETH && (
-        <StakingBalance asset={asset} />
-      )}
+      {asset?.isETH && <StakingBalance asset={asset} />}
     </View>
   );
 };

diff --git a/app/components/UI/AssetOverview/Balance/index.test.tsx b/app/components/UI/AssetOverview/Balance/index.test.tsx
@@ -58,11 +58,21 @@ const mockETH = {
   isNative: true,
 };
 
-const mockInitialState = {
-  engine: {
-    backgroundState,
+jest.mock('../../../../core/Engine', () => ({
+  context: {
+    NetworkController: {
+      getNetworkClientById: () => ({
+        configuration: {
+          chainId: '0x1',
+          rpcUrl: 'https://mainnet.infura.io/v3',
+          ticker: 'ETH',
+          type: 'custom',
+        },
+      }),
+      findNetworkClientIdByChainId: () => 'mainnet',
+    },
   },
-};
+}));
 
 jest.mock('../../../../util/networks', () => ({
   ...jest.requireActual('../../../../util/networks'),
@@ -74,6 +84,48 @@ jest.mock('../../../../util/networks', () => ({
   isPortfolioViewEnabled: jest.fn(),
 }));
 
+jest.mock('../../Stake/hooks/usePooledStakes', () => ({
+  __esModule: true,
+  default: () => ({
+    pooledStakesData: {
+      account: '0xabc',
+      assets: '10000000000000000',
+      exitRequests: [],
+      lifetimeRewards: '100000000000000',
+    },
+    exchangeRate: 1.018,
+    hasStakedPositions: true,
+    hasEthToUnstake: true,
+    isLoadingPooledStakesData: false,
+  }),
+}));
+
+jest.mock('../../Stake/hooks/useVaultData', () => ({
+  __esModule: true,
+  default: () => ({
+    vaultData: {
+      apy: '2.437033146840025387168141592920355',
+      capacity: '1000000000000000000000000000000000000000000000000000000000000',
+      feePercent: 1500,
+      totalAssets: '10000000000000000000000',
+      vaultAddress: '0xdef',
+    },
+  }),
+}));
+
+jest.mock('../../Stake/hooks/useStakingEligibility', () => ({
+  __esModule: true,
+  default: () => ({
+    isEligible: true,
+  }),
+}));
+
+const mockInitialState = {
+  engine: {
+    backgroundState,
+  },
+};
+
 describe('Balance', () => {
   const mockStore = configureMockStore();
   const store = mockStore(mockInitialState);
@@ -131,13 +183,19 @@ describe('Balance', () => {
   });
 
   it('should not fire navigation event for native tokens', () => {
-    const { queryByTestId } = render(
+    const { queryAllByTestId } = render(
       <Provider store={store}>
-        <Balance asset={mockETH} mainBalance="100" secondaryBalance="200" />
+        <Balance asset={mockETH} mainBalance="100" secondaryBalance="200" />,
       </Provider>,
     );
-    const assetElement = queryByTestId('asset-ETH');
-    fireEvent.press(assetElement);
+
+    // Includes native ETH and staked ETH
+    const ethElements = queryAllByTestId('asset-ETH');
+
+    ethElements.forEach((ethElement) => {
+      fireEvent.press(ethElement);
+    });
+
     expect(mockNavigate).toHaveBeenCalledTimes(0);
   });
 

diff --git a/app/components/UI/AssetOverview/TokenDetails/TokenDetails.tsx b/app/components/UI/AssetOverview/TokenDetails/TokenDetails.tsx
@@ -28,7 +28,6 @@ import Logger from '../../../../util/Logger';
 import TokenDetailsList from './TokenDetailsList';
 import MarketDetailsList from './MarketDetailsList';
 import { TokenI } from '../../Tokens/types';
-import { isPooledStakingFeatureEnabled } from '../../Stake/constants';
 import StakingEarnings from '../../Stake/components/StakingEarnings';
 import { isPortfolioViewEnabled } from '../../../../util/networks';
 
@@ -147,7 +146,7 @@ const TokenDetails: React.FC<TokenDetailsProps> = ({ asset }) => {
 
   return (
     <View style={styles.tokenDetailsContainer}>
-      {asset.isETH && isPooledStakingFeatureEnabled() && <StakingEarnings />}
+      {asset.isETH && <StakingEarnings />}
       {(asset.isETH || tokenMetadata) && (
         <TokenDetailsList tokenDetails={tokenDetails} />
       )}

diff --git a/app/components/UI/AssetOverview/__snapshots__/AssetOverview.test.tsx.snap b/app/components/UI/AssetOverview/__snapshots__/AssetOverview.test.tsx.snap
@@ -2237,6 +2237,22 @@ exports[`AssetOverview should render correctly when portfolio view is enabled 1`
             }
           }
         >
+          <Text
+            accessibilityRole="text"
+            style={
+              {
+                "color": "#141618",
+                "fontFamily": "EuclidCircularB-Medium",
+                "fontSize": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 24,
+              }
+            }
+            testID="fiat-balance-test-id"
+          >
+            1500
+          </Text>
           <Text
             accessibilityRole="text"
             style={

diff --git a/app/components/UI/NetworkVerificationInfo/NetworkVerificationInfo.test.tsx b/app/components/UI/NetworkVerificationInfo/NetworkVerificationInfo.test.tsx
@@ -97,4 +97,43 @@ describe('NetworkVerificationInfo', () => {
 
     expect(getByText('10')).toBeTruthy();
   });
+
+  it('should not render Network URL warning banner when the custom rpc url has all ascii characters', () => {
+    (useSelector as jest.Mock).mockReturnValue(true);
+    const { getByText } = render(
+      <NetworkVerificationInfo
+        customNetworkInformation={mockNetworkInfo}
+        onReject={() => undefined}
+        onConfirm={() => undefined}
+      />,
+    );
+
+    expect(() =>
+      getByText(
+        "Attackers sometimes mimic sites by making small changes to the site address. Make sure you're interacting with the intended Network URL before you continue. Punycode version: https://xn--ifura-dig.io/gnosis",
+      ),
+    ).toThrow('Unable to find an element with text');
+  });
+
+  describe('when the custom rpc url has non-ascii characters', () => {
+    it('should render Network URL warning banner and display punycode encoded version', () => {
+      (useSelector as jest.Mock).mockReturnValue(true);
+      const { getByText } = render(
+        <NetworkVerificationInfo
+          customNetworkInformation={{
+            ...mockNetworkInfo,
+            rpcUrl: 'https://iոfura.io/gnosis',
+          }}
+          onReject={() => undefined}
+          onConfirm={() => undefined}
+        />,
+      );
+
+      expect(
+        getByText(
+          "Attackers sometimes mimic sites by making small changes to the site address. Make sure you're interacting with the intended Network URL before you continue. Punycode version: https://xn--ifura-dig.io/gnosis",
+        ),
+      ).toBeTruthy();
+    });
+  });
 });
diff --git a/app/components/UI/NetworkVerificationInfo/NetworkVerificationInfo.tsx b/app/components/UI/NetworkVerificationInfo/NetworkVerificationInfo.tsx
@@ -43,6 +43,7 @@ import { toggleUseSafeChainsListValidation } from '../../../util/networks/engine
 import { NetworkApprovalBottomSheetSelectorsIDs } from '../../../../e2e/selectors/Network/NetworkApprovalBottomSheet.selectors';
 import hideKeyFromUrl from '../../../util/hideKeyFromUrl';
 import { convertHexToDecimal } from '@metamask/controller-utils';
+import { isValidASCIIURL, toPunycodeURL } from '../../../util/url';
 
 interface Alert {
   alertError: string;
@@ -83,6 +84,8 @@ const NetworkVerificationInfo = ({
   const showReviewDefaultRpcUrlChangesModal = () =>
     setShowReviewDefaultRpcUrlChanges(!showReviewDefaultRpcUrlChanges);
 
+  const customRpcUrl = customNetworkInformation.rpcUrl;
+
   const goToLearnMore = () => {
     Linking.openURL(
       'https://support.metamask.io/networks-and-sidechains/managing-networks/verifying-custom-network-information/',
@@ -236,9 +239,7 @@ const NetworkVerificationInfo = ({
             : strings('add_custom_network.network_url')}
         </Text>
       )}
-      <Text style={styles.textSection}>
-        {hideKeyFromUrl(customNetworkInformation.rpcUrl)}
-      </Text>
+      <Text style={styles.textSection}>{hideKeyFromUrl(customRpcUrl)}</Text>
 
       <Accordion
         title={strings('spend_limit_edition.view_details')}
@@ -291,6 +292,27 @@ const NetworkVerificationInfo = ({
     return null;
   };
 
+  const renderBannerNetworkUrlNonAsciiDetected = () => {
+    if (!customRpcUrl || isValidASCIIURL(customRpcUrl)) {
+      return null;
+    }
+    const punycodeUrl = toPunycodeURL(customRpcUrl);
+
+    return (
+      <View style={styles.alertBar}>
+        <Banner
+          severity={BannerAlertSeverity.Warning}
+          variant={BannerVariant.Alert}
+          description={
+            strings('networks.network_rpc_url_warning_punycode') +
+            '\n' +
+            punycodeUrl
+          }
+        />
+      </View>
+    );
+  };
+
   const renderCustomNetworkBanner = () => (
     <View style={styles.alertBar}>
       <Banner
@@ -331,9 +353,7 @@ const NetworkVerificationInfo = ({
           <Text variant={TextVariant.BodyMDBold}>
             {strings('networks.current_label')}
           </Text>
-          <Text style={styles.textSection}>
-            {customNetworkInformation.rpcUrl}
-          </Text>
+          <Text style={styles.textSection}>{customRpcUrl}</Text>
           <Text variant={TextVariant.BodyMDBold}>
             {strings('networks.new_label')}
           </Text>
@@ -442,6 +462,7 @@ const NetworkVerificationInfo = ({
         />
         {renderAlerts()}
         {renderBanner()}
+        {renderBannerNetworkUrlNonAsciiDetected()}
         {isMultichainVersion1Enabled &&
           isCustomNetwork &&
           renderCustomNetworkBanner()}

diff --git a/app/components/UI/Stake/components/StakeButton/StakeButton.test.tsx b/app/components/UI/Stake/components/StakeButton/StakeButton.test.tsx
@@ -21,10 +21,6 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
-jest.mock('../../constants', () => ({
-  isPooledStakingFeatureEnabled: jest.fn().mockReturnValue(true),
-}));
-
 jest.mock('../../../../hooks/useMetrics');
 
 (useMetrics as jest.MockedFn<typeof useMetrics>).mockReturnValue({

diff --git a/app/components/UI/Stake/components/StakeButton/index.tsx b/app/components/UI/Stake/components/StakeButton/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { TokenI, BrowserTab } from '../../../Tokens/types';
 import { useNavigation } from '@react-navigation/native';
-import { isPooledStakingFeatureEnabled } from '../../constants';
 import Routes from '../../../../../constants/navigation/Routes';
 import { useSelector } from 'react-redux';
 import AppConstants from '../../../../../core/AppConstants';
@@ -43,7 +42,7 @@ const StakeButtonContent = ({ asset }: StakeButtonProps) => {
 
   const onStakeButtonPress = async () => {
     const { isEligible } = await refreshPooledStakingEligibility();
-    if (isPooledStakingFeatureEnabled() && isEligible) {
+    if (isEligible) {
       navigation.navigate('StakeScreens', { screen: Routes.STAKING.STAKE });
     } else {
       const existingStakeTab = browserTabs.find((tab: BrowserTab) =>
@@ -88,9 +87,7 @@ const StakeButtonContent = ({ asset }: StakeButtonProps) => {
       <Text variant={TextVariant.BodyLGMedium}>
         {' • '}
         <Text color={TextColor.Primary} variant={TextVariant.BodyLGMedium}>
-          {isPooledStakingFeatureEnabled()
-            ? `${strings('stake.earn')} `
-            : `${strings('stake.stake')} `}
+          {`${strings('stake.earn')} `}
         </Text>
       </Text>
       <Icon

diff --git a/app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx b/app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx
@@ -198,7 +198,7 @@ const StakingBalanceContent = ({ asset }: StakingBalanceProps) => {
 
   return (
     <View>
-      {hasEthToUnstake && (
+      {hasEthToUnstake && !isLoadingPooledStakesData && (
         <AssetElement
           asset={asset}
           mainBalance={stakedBalanceETH}

diff --git a/app/components/UI/Stake/components/StakingEarnings/StakingEarnings.test.tsx b/app/components/UI/Stake/components/StakingEarnings/StakingEarnings.test.tsx
@@ -4,10 +4,6 @@ import renderWithProvider from '../../../../../util/test/renderWithProvider';
 import { strings } from '../../../../../../locales/i18n';
 import { mockNetworkState } from '../../../../../util/test/network';
 
-jest.mock('../../constants', () => ({
-  isPooledStakingFeatureEnabled: jest.fn().mockReturnValue(true),
-}));
-
 const mockNavigate = jest.fn();
 
 const STATE_MOCK = {

diff --git a/app/components/UI/Stake/components/StakingEarnings/index.tsx b/app/components/UI/Stake/components/StakingEarnings/index.tsx
@@ -15,7 +15,6 @@ import ButtonIcon, {
 } from '../../../../../component-library/components/Buttons/ButtonIcon';
 import useTooltipModal from '../../../../../components/hooks/useTooltipModal';
 import { strings } from '../../../../../../locales/i18n';
-import { isPooledStakingFeatureEnabled } from '../../../Stake/constants';
 import useStakingChain from '../../hooks/useStakingChain';
 import { StakeSDKProvider } from '../../sdk/stakeSdkProvider';
 import useStakingEarnings from '../../hooks/useStakingEarnings';
@@ -47,12 +46,7 @@ const StakingEarningsContent = () => {
 
   const { isStakingSupportedChain } = useStakingChain();
 
-  if (
-    !isPooledStakingFeatureEnabled() ||
-    !isStakingSupportedChain ||
-    !hasStakedPositions
-  )
-    return <></>;
+  if (!isStakingSupportedChain || !hasStakedPositions) return <></>;
 
   return (
     <View style={styles.stakingEarningsContainer}>

diff --git a/app/components/UI/Stake/constants/index.ts b/app/components/UI/Stake/constants/index.ts
@@ -1,7 +1,3 @@
-/* eslint-disable import/prefer-default-export */
-export const isPooledStakingFeatureEnabled = () =>
-  process.env.MM_POOLED_STAKING_UI_ENABLED === 'true';
-
 export const isStablecoinLendingFeatureEnabled = () =>
   process.env.MM_STABLECOIN_LENDING_UI_ENABLED === 'true';