Merge branch 'main' into fix/ramp-amount-decimal-formatting

MetaMask · Oct 8, 2024 · cde58c7 · cde58c7
2 parents 968a82e + 5b1d54a
commit cde58c7
Show file tree

Hide file tree

Showing 161 changed files with 19,618 additions and 26,293 deletions.
diff --git a/.git-blame-ignore-revs b/.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
diff --git a/.iyarc b/.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
diff --git a/.storybook/storybook.requires.js b/.storybook/storybook.requires.js
@@ -125,6 +125,7 @@ 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"),
   };
 };
 

diff --git a/CHANGELOG.md b/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

diff --git a/android/app/build.gradle b/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'

diff --git a/app/component-library/components-temp/KeyValueRow/KeyValueLabel/KeyValueLabel.tsx b/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}
         />
       )}

diff --git a/app/component-library/components-temp/KeyValueRow/KeyValueRow.stories.tsx b/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>
   ),

diff --git a/app/component-library/components-temp/KeyValueRow/KeyValueRow.test.tsx b/app/component-library/components-temp/KeyValueRow/KeyValueRow.test.tsx
@@ -19,8 +19,8 @@ describe('KeyValueRow', () => {
       it('should render when there is only text', () => {
         const { toJSON } = render(
           <KeyValueRow
-            field={{ text: 'Sample Key Text' }}
-            value={{ text: 'Sample Value Text' }}
+            field={{ label: { text: 'Sample Key Text' } }}
+            value={{ label: { text: 'Sample Value Text' } }}
           />,
         );
 
@@ -31,17 +31,17 @@ describe('KeyValueRow', () => {
         const { toJSON } = render(
           <KeyValueRow
             field={{
-              text: 'Key Text',
+              label: { text: 'Key Text' },
               tooltip: {
                 title: 'Sample Tooltip 1',
-                text: 'Tooltip 1 text',
+                content: 'Tooltip 1 text',
               },
             }}
             value={{
-              text: 'Value Text',
+              label: { text: 'Value Text' },
               tooltip: {
                 title: 'Sample Tooltip 2',
-                text: 'Tooltip 2 text',
+                content: 'Tooltip 2 text',
               },
             }}
           />,
@@ -54,13 +54,13 @@ describe('KeyValueRow', () => {
         const { toJSON } = render(
           <KeyValueRow
             field={{
-              text: 'Key Text',
+              label: { text: 'Key Text' },
               icon: {
                 name: IconName.Activity,
               },
             }}
             value={{
-              text: 'Value Text',
+              label: { text: 'Value Text' },
               icon: {
                 name: IconName.Add,
               },
@@ -75,23 +75,23 @@ describe('KeyValueRow', () => {
         const { toJSON } = render(
           <KeyValueRow
             field={{
-              text: 'Key Text',
+              label: { text: 'Key Text' },
               icon: {
                 name: IconName.Activity,
               },
               tooltip: {
                 title: 'Sample Tooltip 2',
-                text: 'Tooltip 2 text',
+                content: 'Tooltip 2 text',
               },
             }}
             value={{
-              text: 'Value Text',
+              label: { text: 'Value Text' },
               icon: {
                 name: IconName.Add,
               },
               tooltip: {
                 title: 'Sample Tooltip 2',
-                text: 'Tooltip 2 text',
+                content: 'Tooltip 2 text',
               },
             }}
           />,

diff --git a/app/component-library/components-temp/KeyValueRow/KeyValueRow.tsx b/app/component-library/components-temp/KeyValueRow/KeyValueRow.tsx
@@ -8,7 +8,6 @@ import {
 } from './KeyValueRow.types';
 import Icon from '../../components/Icons/Icon';
 import { View } from 'react-native';
-import { areKeyValueRowPropsEqual } from './KeyValueRow.utils';
 import KeyValueSection from './KeyValueSection/KeyValueSection';
 import KeyValueRowLabel from './KeyValueLabel/KeyValueLabel';
 import KeyValueRowRoot from './KeyValueRoot/KeyValueRoot';
@@ -45,12 +44,7 @@ const KeyValueRow = React.memo(({ field, value, style }: KeyValueRowProps) => {
             (fieldIcon.side === KeyValueRowFieldIconSides.LEFT ||
               fieldIcon.side === KeyValueRowFieldIconSides.BOTH ||
               !fieldIcon?.side) && <Icon {...fieldIcon} />}
-          <KeyValueRowLabel
-            label={field.text}
-            variant={field.variant}
-            color={field.color}
-            tooltip={field.tooltip}
-          />
+          <KeyValueRowLabel label={field.label} tooltip={field.tooltip} />
           {shouldShowFieldIcon &&
             (fieldIcon?.side === KeyValueRowFieldIconSides.RIGHT ||
               fieldIcon?.side === KeyValueRowFieldIconSides.BOTH) && (
@@ -64,12 +58,7 @@ const KeyValueRow = React.memo(({ field, value, style }: KeyValueRowProps) => {
             (valueIcon?.side === KeyValueRowFieldIconSides.LEFT ||
               valueIcon?.side === KeyValueRowFieldIconSides.BOTH ||
               !valueIcon?.side) && <Icon {...valueIcon} />}
-          <KeyValueRowLabel
-            label={value.text}
-            variant={value.variant}
-            color={value.color}
-            tooltip={value.tooltip}
-          />
+          <KeyValueRowLabel label={value.label} tooltip={value.tooltip} />
           {shouldShowValueIcon &&
             (valueIcon?.side === KeyValueRowFieldIconSides.RIGHT ||
               valueIcon?.side === KeyValueRowFieldIconSides.BOTH) && (
@@ -79,7 +68,7 @@ const KeyValueRow = React.memo(({ field, value, style }: KeyValueRowProps) => {
       </KeyValueSection>
     </KeyValueRowRoot>
   );
-}, areKeyValueRowPropsEqual);
+});
 
 /**
  * Exported sub-components to provide a base for new KeyValueRow variants.