Merge branch 'main' into feat/enable-dev-sentry

.depcheckrc.yml

@@ -6,6 +6,7 @@ ignores:
   - '@react-native-community/slider'
   - 'patch-package'
   - '@lavamoat/allow-scripts'
+  - 'babel-plugin-inline-import'
   # This is used on the patch for TokenRatesController of Assets controllers, for we to be able to use the last version of it
   - cockatiel
 

.git-blame-ignore-revs

@@ -2,3 +2,5 @@
 57afe4ca921d85a51a923470239ca977fccbd1ae
 # Standardize prettier configuration https://github.com/MetaMask/metamask-mobile/pull/4182
 bdb7f37c90e4fc923881a07fca38d4e77c73a579
+# Fix mixed tabs and spaces https://github.com/MetaMask/metamask-mobile/pull/1379
+9f9a1121c6899e06d4aeef29017bb479df142adb

.github/CODEOWNERS

@@ -4,7 +4,7 @@
 *                                    @MetaMask/mobile-devs
 
 # Design System Team
-app/component-library/               @MetaMask/design-system-engineers @MetaMask/mobile-platform
+app/component-library/               @MetaMask/design-system-engineers
 
 # Platform Team
 patches/                             @MetaMask/mobile-platform
@@ -94,10 +94,25 @@ app/components/Views/NftDetails @MetaMask/metamask-assets
 app/reducers/collectibles @MetaMask/metamask-assets
 
 # UX Team
-app/components                       @MetaMask/wallet-ux
-app/reducers/experimentalSettings    @MetaMask/wallet-ux
-app/reducers/modals                  @MetaMask/wallet-ux
-app/reducers/navigation              @MetaMask/wallet-ux
-app/reducers/onboarding              @MetaMask/wallet-ux
-app/reducers/privacy                 @MetaMask/wallet-ux
-app/reducers/settings                @MetaMask/wallet-ux
+app/components/Views/AccountActions @MetaMask/wallet-ux
+app/components/Views/AccountSelector @MetaMask/wallet-ux
+app/components/Views/AddressQRCode @MetaMask/wallet-ux
+app/components/Views/EditAccountName @MetaMask/wallet-ux
+app/components/Views/LockScreen @MetaMask/wallet-ux
+app/components/Views/Login @MetaMask/wallet-ux
+app/components/Views/NetworkConnect @MetaMask/wallet-ux
+app/components/Views/NetworkSelector @MetaMask/wallet-ux
+app/components/Views/Onboarding @MetaMask/wallet-ux
+app/components/Views/OnboardingCarousel @MetaMask/wallet-ux
+app/components/Views/OnboardingSuccess @MetaMask/wallet-ux
+app/components/Views/QRAccountDisplay @MetaMask/wallet-ux
+app/components/Views/QRScanner @MetaMask/wallet-ux
+app/components/Views/Settings @MetaMask/wallet-ux
+app/components/Views/TermsAndConditions @MetaMask/wallet-ux
+
+app/reducers/experimentalSettings @MetaMask/wallet-ux
+app/reducers/modals @MetaMask/wallet-ux
+app/reducers/navigation @MetaMask/wallet-ux
+app/reducers/onboarding @MetaMask/wallet-ux
+app/reducers/privacy @MetaMask/wallet-ux
+app/reducers/settings @MetaMask/wallet-ux

.iyarc

@@ -1,7 +1,3 @@
 # ReDoS vulnerability, no impact to this application, and fix not backported yet to the versions we use
 
 GHSA-c2qf-rxjj-qqgw
-
-# Sentry SDK Prototype Pollution gadget in JavaScript SDKs
-
-GHSA-593m-55hh-j8gv

.storybook/storybook.requires.js

@@ -125,6 +125,8 @@ const getStories = () => {
     "./app/component-library/components-temp/KeyValueRow/KeyValueRow.stories.tsx": require("../app/component-library/components-temp/KeyValueRow/KeyValueRow.stories.tsx"),
     "./app/components/Views/confirmations/components/UI/InfoRow/InfoRow.stories.tsx": require("../app/components/Views/confirmations/components/UI/InfoRow/InfoRow.stories.tsx"),
     "./app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.stories.tsx": require("../app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.stories.tsx"),
+    "./app/components/Views/confirmations/components/UI/Tooltip/Tooltip.stories.tsx": require("../app/components/Views/confirmations/components/UI/Tooltip/Tooltip.stories.tsx"),
+    "./app/components/Views/confirmations/components/UI/CopyButton/CopyButton.stories.tsx": require("../app/components/Views/confirmations/components/UI/CopyButton/CopyButton.stories.tsx"),
   };
 };
 

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Current Main Branch
 
-## 7.32.0 - Sep 19, 2024
+## 7.32.0 - Oct 7, 2024
 
 ### Added
 
@@ -91,6 +91,9 @@
 - [#11193](https://github.com/MetaMask/metamask-mobile/pull/11193): fix: ItemMenu crash using dayjs (#11193)
 - [#11098](https://github.com/MetaMask/metamask-mobile/pull/11098): fix: badge count and ui polishing (#11098)
 
+## 7.31.1 - Oct 4, 2024
+### Fixed
+- [#11631](https://github.com/MetaMask/metamask-mobile/pull/11631): fix: Fixes UI issue in token details (#11631)
 
 ## 7.31.0 - Sep 6, 2024
 ### Added
@@ -361,10 +364,7 @@
 - [#10383](https://github.com/MetaMask/metamask-mobile/pull/10383): fix: race condition issues when doing batch-rpc calls in the DeeplinkProtocolService (#10383)
 - [#10365](https://github.com/MetaMask/metamask-mobile/pull/10365): fix: attribution link (#10365)
 - [#10303](https://github.com/MetaMask/metamask-mobile/pull/10303): fix: page navigation during QR accounts selection (#10303)
-<<<<<<< HEAD
 
-=======
->>>>>>> main
 ## 7.28.1 - Aug 15, 2024
 ### Fixed
 - [#10637](https://github.com/MetaMask/metamask-mobile/pull/10637): fix: swap button blocked by SwapsController polling issue (#10637)

android/app/build.gradle

@@ -173,7 +173,7 @@ android {
         applicationId "io.metamask"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1444
+        versionCode 1450
         versionName "7.32.0"
         testBuildType System.getProperty('testBuildType', 'debug')
         missingDimensionStrategy 'react-native-camera', 'general'

app/actions/security/index.ts

@@ -8,6 +8,7 @@ export enum ActionType {
   SET_AUTOMATIC_SECURITY_CHECKS_MODAL_OPEN = 'SET_AUTOMATIC_SECURITY_CHECKS_MODAL_OPEN',
   SET_DATA_COLLECTION_FOR_MARKETING = 'SET_DATA_COLLECTION_FOR_MARKETING',
   SET_NFT_AUTO_DETECTION_MODAL_OPEN = 'SET_NFT_AUTO_DETECTION_MODAL_OPEN',
+  SET_MULTI_RPC_MIGRATION_MODAL_OPEN = 'SET_MULTI_RPC_MIGRATION_MODAL_OPEN',
 }
 
 export interface AllowLoginWithRememberMeUpdated
@@ -35,6 +36,11 @@ export interface SetNftAutoDetectionModalOpen
   open: boolean;
 }
 
+export interface SetMultiRpcMigrationModalOpen
+  extends ReduxAction<ActionType.SET_MULTI_RPC_MIGRATION_MODAL_OPEN> {
+  open: boolean;
+}
+
 export interface SetDataCollectionForMarketing
   extends ReduxAction<ActionType.SET_DATA_COLLECTION_FOR_MARKETING> {
   enabled: boolean;
@@ -46,7 +52,8 @@ export type Action =
   | UserSelectedAutomaticSecurityChecksOptions
   | SetAutomaticSecurityChecksModalOpen
   | SetDataCollectionForMarketing
-  | SetNftAutoDetectionModalOpen;
+  | SetNftAutoDetectionModalOpen
+  | SetMultiRpcMigrationModalOpen;
 
 export const setAllowLoginWithRememberMe = (
   enabled: boolean,
@@ -82,6 +89,13 @@ export const setNftAutoDetectionModalOpen = (
   open,
 });
 
+export const setMultiRpcMigrationModalOpen = (
+  open: boolean,
+): SetMultiRpcMigrationModalOpen => ({
+  type: ActionType.SET_MULTI_RPC_MIGRATION_MODAL_OPEN,
+  open,
+});
+
 export const setDataCollectionForMarketing = (enabled: boolean) => ({
   type: ActionType.SET_DATA_COLLECTION_FOR_MARKETING,
   enabled,

app/component-library/components-temp/CellSelectWithMenu/CellSelectWithMenu.tsx

@@ -33,6 +33,7 @@ const CellSelectWithMenu = ({
   tagLabel,
   isSelected = false,
   children,
+  withAvatar = true,
   ...props
 }: CellSelectWithMenuProps) => {
   const { styles } = useStyles(styleSheet, { style });
@@ -46,12 +47,15 @@ const CellSelectWithMenu = ({
     >
       <View style={styles.cellBase}>
         {/* DEV Note: Account Avatar should be replaced with Avatar with Badge whenever available */}
-        <Avatar
-          style={styles.avatar}
-          testID={CellModalSelectorsIDs.BASE_AVATAR}
-          size={DEFAULT_CELLBASE_AVATAR_SIZE}
-          {...avatarProps}
-        />
+        {withAvatar ? (
+          <Avatar
+            style={styles.avatar}
+            testID={CellModalSelectorsIDs.BASE_AVATAR}
+            size={DEFAULT_CELLBASE_AVATAR_SIZE}
+            {...avatarProps}
+          />
+        ) : null}
+
         <View style={styles.cellBaseInfo}>
           <Text
             numberOfLines={1}

app/component-library/components-temp/CellSelectWithMenu/__snapshots__/CellSelectWithMenu.test.tsx.snap

@@ -19,7 +19,7 @@ exports[`CellSelectWithMenu should render with default settings correctly 1`] =
         "opacity": 1,
         "padding": 16,
         "position": "relative",
-        "width": "95%",
+        "width": "90%",
         "zIndex": 1,
       }
     }
@@ -287,7 +287,13 @@ exports[`CellSelectWithMenu should render with default settings correctly 1`] =
       </View>
     </View>
   </TouchableOpacity>
-  <View>
+  <View
+    style={
+      {
+        "paddingHorizontal": 20,
+      }
+    }
+  >
     <TouchableOpacity
       accessibilityRole="button"
       accessible={true}

app/component-library/components-temp/KeyValueRow/KeyValueLabel/KeyValueLabel.tsx

@@ -14,46 +14,48 @@ import React from 'react';
 import { View } from 'react-native';
 import { KeyValueRowLabelProps, TooltipSizes } from '../KeyValueRow.types';
 import styleSheet from './KeyValueLabel.styles';
+import { isPreDefinedKeyValueRowLabel } from '../KeyValueRow.utils';
 
 /**
  * A label and tooltip component.
  *
  * @param {Object} props - Component props.
- * @param {TextVariant} [props.variant] - Optional text variant. Defaults to TextVariant.BodyMDMedium.
- * @param {TextVariant} [props.color] - Optional text color. Defaults to TextColor.Default.
- * @param {TextVariant} [props.tooltip] - Optional tooltip to render to the right of the label text.
+ * @param {PreDefinedKeyValueRowLabel | ReactNode} props.label - The label content to display.
+ * @param {KeyValueRowTooltip} [props.tooltip] - Optional tooltip to render to the right of the label.
  *
  * @returns {JSX.Element} The rendered KeyValueRowLabel component.
  */
-const KeyValueRowLabel = ({
-  label,
-  variant = TextVariant.BodyMDMedium,
-  color = TextColor.Default,
-  tooltip,
-}: KeyValueRowLabelProps) => {
+const KeyValueRowLabel = ({ label, tooltip }: KeyValueRowLabelProps) => {
   const { styles } = useStyles(styleSheet, {});
 
   const { openTooltipModal } = useTooltipModal();
 
-  const hasTooltip = tooltip?.title && tooltip?.text;
+  const hasTooltip = tooltip?.title && tooltip?.content;
 
   const onNavigateToTooltipModal = () => {
     if (!hasTooltip) return;
-    openTooltipModal(tooltip.title, tooltip.text);
+    openTooltipModal(tooltip.title, tooltip.content);
   };
 
   return (
     <View style={styles.labelContainer}>
-      <Label variant={variant} color={color}>
-        {label}
-      </Label>
+      {isPreDefinedKeyValueRowLabel(label) ? (
+        <Label
+          variant={label?.variant ?? TextVariant.BodyMDMedium}
+          color={label?.color ?? TextColor.Default}
+        >
+          {label.text}
+        </Label>
+      ) : (
+        label
+      )}
       {hasTooltip && (
         <ButtonIcon
           size={tooltip.size ?? TooltipSizes.Md}
           iconColor={IconColor.Muted}
-          iconName={IconName.Info}
+          iconName={IconName.Question}
           accessibilityRole="button"
-          accessibilityLabel={`${tooltip.title}} tooltip`}
+          accessibilityLabel={`${tooltip.title} tooltip`}
           onPress={onNavigateToTooltipModal}
         />
       )}

app/component-library/components-temp/KeyValueRow/KeyValueRow.stories.tsx

@@ -8,6 +8,7 @@ import KeyValueRowComponent, {
 import Text, { TextColor, TextVariant } from '../../components/Texts/Text';
 import Title from '../../../components/Base/Title';
 import { IconColor, IconName, IconSize } from '../../components/Icons/Icon';
+import Button, { ButtonVariants } from '../../components/Buttons/Button';
 
 const KeyValueRowMeta = {
   title: 'Components Temp / KeyValueRow',
@@ -38,42 +39,56 @@ export const KeyValueRow = {
       <View style={styles.listItem}>
         <KeyValueRowComponent
           field={{
-            text: 'Sample Key Text',
+            label: {
+              text: 'Sample Key Text',
+            },
           }}
-          value={{ text: 'Sample Key Text' }}
+          value={{ label: { text: 'Sample Value Text' } }}
         />
         <KeyValueRowComponent
           field={{
-            text: 'Sample Key Text',
-            variant: TextVariant.BodySM,
-            color: TextColor.Alternative,
+            label: {
+              text: 'Sample Key Text',
+              variant: TextVariant.BodySM,
+              color: TextColor.Alternative,
+            },
           }}
           value={{
-            text: 'Sample Value Text',
-            variant: TextVariant.BodySMBold,
-            color: TextColor.Success,
+            label: {
+              text: 'Sample Value Text',
+              variant: TextVariant.BodySMBold,
+              color: TextColor.Success,
+            },
             tooltip: {
               title: 'Sample Title',
-              text: 'Sample Tooltip',
+              content:
+                'Pariatur nisi pariatur ex veniam ad. Non tempor nostrud sint velit cupidatat aliquip elit ut pariatur reprehenderit enim enim commodo eu.',
               size: TooltipSizes.Sm,
             },
           }}
         />
         <KeyValueRowComponent
           field={{
-            text: 'Sample Key Text',
+            label: {
+              text: 'Sample Key Text',
+            },
             tooltip: {
               title: 'Sample Tooltip',
-              text: 'Pariatur nisi pariatur ex veniam ad. Non tempor nostrud sint velit cupidatat aliquip elit ut pariatur reprehenderit enim enim commodo eu.',
+              content:
+                'Pariatur nisi pariatur ex veniam ad. Non tempor nostrud sint velit cupidatat aliquip elit ut pariatur reprehenderit enim enim commodo eu.',
             },
           }}
           value={{
-            text: 'Sample Value Text',
+            label: {
+              text: 'Sample Value Text',
+            },
           }}
         />
         <KeyValueRowComponent
           field={{
-            text: 'Sample Key Text',
+            label: {
+              text: 'Sample Key Text',
+            },
             icon: {
               name: IconName.Wifi,
               color: IconColor.Primary,
@@ -82,7 +97,9 @@ export const KeyValueRow = {
             },
           }}
           value={{
-            text: 'Sample Value Text',
+            label: {
+              text: 'Sample Value Text',
+            },
             icon: {
               name: IconName.Wifi,
               color: IconColor.Primary,
@@ -91,6 +108,28 @@ export const KeyValueRow = {
             },
           }}
         />
+        {/* Using Custom ReactNode */}
+        <KeyValueRowComponent
+          field={{
+            label: { text: 'Sample Key' },
+            icon: { name: IconName.UserCircleAdd, color: IconColor.Primary },
+            tooltip: {
+              title: 'Sample Tooltip',
+              content:
+                'Pariatur nisi pariatur ex veniam ad. Non tempor nostrud sint velit cupidatat aliquip elit ut pariatur reprehenderit enim enim commodo eu.',
+            },
+          }}
+          value={{
+            label: (
+              <Button
+                variant={ButtonVariants.Link}
+                label="Sample button"
+                // eslint-disable-next-line no-alert
+                onPress={() => alert('test')}
+              />
+            ),
+          }}
+        />
       </View>
     </View>
   ),