Merge remote-tracking branch 'origin/main' into convert-ts-index.test…

…-734

.depcheckrc.yml

@@ -4,6 +4,8 @@ ignores:
   - 'webpack-cli'
   - '@react-native-community/datetimepicker'
   - '@react-native-community/slider'
+  - 'patch-package'
+  - '@lavamoat/allow-scripts'
   # This is used on the patch for TokenRatesController of Assets controllers, for we to be able to use the last version of it
   - cockatiel
 

.github/workflows/ci.yml

@@ -5,16 +5,22 @@ on:
   pull_request:
   merge_group:
     types: [checks_requested]
-  
+
 jobs:
-  setup:
-    runs-on: ubuntu-20.04
+  check-diff:
+    runs-on: macos-latest
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
           cache: yarn
+      - uses: ruby/setup-ruby@a6e6f86333f0a2523ece813039b8b4be04560854 #v1
+        with:
+          ruby-version: '3.1.5'
+          bundler-cache: true
+        env:
+          BUNDLE_GEMFILE: ios/Gemfile
       - name: Determine whether the current PR is a draft
         id: set-is-draft
         if: github.event_name == 'pull_request' && github.event.pull_request.number
@@ -27,7 +33,7 @@ jobs:
         run: printf '%s\n\n%s' '@metamask:registry=https://npm.pkg.github.com' "//npm.pkg.github.com/:_authToken=${PACKAGE_READ_TOKEN}" > .npmrc
         env:
           PACKAGE_READ_TOKEN: ${{ secrets.PACKAGE_READ_TOKEN }}
-      - run: yarn setup --node
+      - run: yarn setup
       - name: Require clean working directory
         shell: bash
         run: |
@@ -39,7 +45,6 @@ jobs:
           fi
   dedupe:
     runs-on: ubuntu-20.04
-    needs: setup
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
@@ -58,7 +63,6 @@ jobs:
           fi
   scripts:
     runs-on: ubuntu-20.04
-    needs: setup
     strategy:
       matrix:
         scripts:
@@ -86,7 +90,6 @@ jobs:
           fi
   unit-tests:
     runs-on: ubuntu-20.04
-    needs: setup
     strategy:
       matrix:
         shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
@@ -156,7 +159,6 @@ jobs:
 
   js-bundle-size-check:
     runs-on: ubuntu-20.04
-    needs: setup
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
@@ -220,38 +222,51 @@ jobs:
         uses: actions/checkout@v3
       - name: SonarCloud Quality Gate Status
         id: sonar-status
+        env:
+          REPO: ${{ github.repository }}
+          ISSUE_NUMBER: ${{ github.event.issue.number || github.event.pull_request.number }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           # Skip step if event is a PR
           if [[ "${{ github.event_name }}" != "pull_request" ]]; then
             echo "This job only runs for pull requests."
             exit 0
           fi
 
-          sleep 30
+          # Bypass step if skip-sonar-cloud label is found
+          LABEL=$(curl -s -H "Authorization: token $GITHUB_TOKEN" \
+          "https://api.github.com/repos/$REPO/issues/$ISSUE_NUMBER/labels" | \
+          jq -r '.[] | select(.name=="skip-sonar-cloud") | .name')
 
-          PROJECT_KEY="metamask-mobile"
-          PR_NUMBER="${{ github.event.pull_request.number }}"
-          SONAR_TOKEN="${{ secrets.SONAR_TOKEN }}"
+          if [[ "$LABEL" == "skip-sonar-cloud" ]]; then
+            echo "skip-sonar-cloud label found. Skipping SonarCloud Quality Gate check."
+          else
+            sleep 30
 
-          if [ -z "$PR_NUMBER" ]; then
-            echo "No pull request number found. Failing the check."
-            exit 1
-          fi
+            PROJECT_KEY="metamask-mobile"
+            PR_NUMBER="${{ github.event.pull_request.number }}"
+            SONAR_TOKEN="${{ secrets.SONAR_TOKEN }}"
 
-          RESPONSE=$(curl -s -u "$SONAR_TOKEN:" \
-            "https://sonarcloud.io/api/qualitygates/project_status?projectKey=$PROJECT_KEY&pullRequest=$PR_NUMBER")
-          echo "SonarCloud API Response: $RESPONSE"
+            if [ -z "$PR_NUMBER" ]; then
+              echo "No pull request number found. Failing the check."
+              exit 1
+            fi
 
-          STATUS=$(echo "$RESPONSE" | jq -r '.projectStatus.status')
+            RESPONSE=$(curl -s -u "$SONAR_TOKEN:" \
+              "https://sonarcloud.io/api/qualitygates/project_status?projectKey=$PROJECT_KEY&pullRequest=$PR_NUMBER")
+            echo "SonarCloud API Response: $RESPONSE"
 
-          if [[ "$STATUS" == "ERROR" ]]; then
-            echo "Quality Gate failed."
-            exit 1
-          elif [[ "$STATUS" == "OK" ]]; then
-            echo "Quality Gate passed."
-          else
-            echo "Could not determine Quality Gate status."
-            exit 1
+            STATUS=$(echo "$RESPONSE" | jq -r '.projectStatus.status')
+
+            if [[ "$STATUS" == "ERROR" ]]; then
+              echo "Quality Gate failed."
+              exit 1
+            elif [[ "$STATUS" == "OK" ]]; then
+              echo "Quality Gate passed."
+            else
+              echo "Could not determine Quality Gate status."
+              exit 1
+            fi
           fi
   check-workflows:
     name: Check workflows
@@ -270,12 +285,11 @@ jobs:
     runs-on: ubuntu-20.04
     needs:
       [
-        setup,
+        check-diff,
         dedupe,
         scripts,
         unit-tests,
         check-workflows,
-        sonar-cloud,
         js-bundle-size-check,
         sonar-cloud-quality-gate-status,
       ]

.github/workflows/crowdin_action.yml

@@ -10,8 +10,6 @@ on:
       - main
   schedule:
     - cron: "0 */12 * * *"
-  merge_group:
-    types: [checks_requested]
 
 jobs:
   synchronize-with-crowdin:

.github/workflows/docker.yml

@@ -4,21 +4,20 @@ on:
     branches: main
   pull_request:
 
-
 jobs:
   docker:
     runs-on: ubuntu-latest
     steps:
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@49b3bc8e6bdd4a60e6116a5414239cba5943d3cf  # v3
+        uses: docker/setup-qemu-action@49b3bc8e6bdd4a60e6116a5414239cba5943d3cf # v3
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@988b5a0280414f521da01fcc63a27aeeb4b104db  # v3
+        uses: docker/setup-buildx-action@988b5a0280414f521da01fcc63a27aeeb4b104db # v3
 
       - uses: actions/checkout@v3
 
       - name: Build and load
-        uses: docker/build-push-action@ca052bb54ab0790a636c9b5f226502c73d547a25  # v5
+        uses: docker/build-push-action@ca052bb54ab0790a636c9b5f226502c73d547a25 # v5
         with:
           context: .
           file: scripts/docker/Dockerfile

.js.env.example

@@ -92,3 +92,5 @@ export MM_ENABLE_SETTINGS_PAGE_DEV_OPTIONS="true"
 
 # Multichain Feature flag
 export MULTICHAIN_V1=""
+#Multichain feature flag specific to UI changes
+export MM_MULTICHAIN_V1_ENABLED=""

.storybook/main.js

@@ -3,6 +3,7 @@ module.exports = {
     '../app/component-library/components/**/*.stories.?(ts|tsx|js|jsx)',
     '../app/component-library/base-components/**/*.stories.?(ts|tsx|js|jsx)',
     '../app/component-library/components-temp/TagColored/**/*.stories.?(ts|tsx|js|jsx)',
+    '../app/component-library/components-temp/KeyValueRow/**/*.stories.?(ts|tsx|js|jsx)',
   ],
   addons: ['@storybook/addon-ondevice-controls'],
   framework: '@storybook/react-native',

.storybook/storybook.requires.js

@@ -30,6 +30,13 @@ global.STORIES = [
     importPathMatcher:
       "^\\.[\\\\/](?:app\\/component-library\\/components-temp\\/TagColored(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
   },
+  {
+    titlePrefix: "",
+    directory: "./app/component-library/components-temp/KeyValueRow",
+    files: "**/*.stories.?(ts|tsx|js|jsx)",
+    importPathMatcher:
+      "^\\.[\\\\/](?:app\\/component-library\\/components-temp\\/KeyValueRow(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
+  },
 ];
 
 import "@storybook/addon-ondevice-controls/register";
@@ -115,8 +122,7 @@ const getStories = () => {
     "./app/component-library/components/Toast/Toast.stories.tsx": require("../app/component-library/components/Toast/Toast.stories.tsx"),
     "./app/component-library/base-components/TagBase/TagBase.stories.tsx": require("../app/component-library/base-components/TagBase/TagBase.stories.tsx"),
     "./app/component-library/components-temp/TagColored/TagColored.stories.tsx": require("../app/component-library/components-temp/TagColored/TagColored.stories.tsx"),
-    "./app/components/Views/AssetDetails/AssetDetailsActions/AssetDetailsActions.stories.tsx": require("../app/components/Views/AssetDetails/AssetDetailsActions/AssetDetailsActions.stories.tsx"),
-
+    "./app/component-library/components-temp/KeyValueRow/KeyValueRow.stories.tsx": require("../app/component-library/components-temp/KeyValueRow/KeyValueRow.stories.tsx"),
   };
 };
 

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

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+const styleSheet = () =>
+  StyleSheet.create({
+    labelContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+  });
+
+export default styleSheet;

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

@@ -0,0 +1,64 @@
+import ButtonIcon from '../../../../component-library/components/Buttons/ButtonIcon';
+import Label from '../../../../component-library/components/Form/Label';
+import {
+  IconColor,
+  IconName,
+} from '../../../../component-library/components/Icons/Icon';
+import {
+  TextVariant,
+  TextColor,
+} from '../../../../component-library/components/Texts/Text';
+import { useStyles } from '../../../../component-library/hooks';
+import useTooltipModal from '../../../../components/hooks/useTooltipModal';
+import React from 'react';
+import { View } from 'react-native';
+import { KeyValueRowLabelProps, TooltipSizes } from '../KeyValueRow.types';
+import styleSheet from './KeyValueLabel.styles';
+
+/**
+ * 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.
+ *
+ * @returns {JSX.Element} The rendered KeyValueRowLabel component.
+ */
+const KeyValueRowLabel = ({
+  label,
+  variant = TextVariant.BodyMDMedium,
+  color = TextColor.Default,
+  tooltip,
+}: KeyValueRowLabelProps) => {
+  const { styles } = useStyles(styleSheet, {});
+
+  const { openTooltipModal } = useTooltipModal();
+
+  const hasTooltip = tooltip?.title && tooltip?.text;
+
+  const onNavigateToTooltipModal = () => {
+    if (!hasTooltip) return;
+    openTooltipModal(tooltip.title, tooltip.text);
+  };
+
+  return (
+    <View style={styles.labelContainer}>
+      <Label variant={variant} color={color}>
+        {label}
+      </Label>
+      {hasTooltip && (
+        <ButtonIcon
+          size={tooltip.size ?? TooltipSizes.Md}
+          iconColor={IconColor.Muted}
+          iconName={IconName.Info}
+          accessibilityRole="button"
+          accessibilityLabel={`${tooltip.title}} tooltip`}
+          onPress={onNavigateToTooltipModal}
+        />
+      )}
+    </View>
+  );
+};
+
+export default KeyValueRowLabel;

app/component-library/components-temp/KeyValueRow/KeyValueRoot/KeyValueRoot.styles.tsx

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+
+const styleSheet = () =>
+  StyleSheet.create({
+    rootContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      overflow: 'hidden',
+    },
+  });
+
+export default styleSheet;

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

@@ -0,0 +1,37 @@
+import { useStyles } from '../../../hooks';
+import React from 'react';
+import { View } from 'react-native';
+import { KeyValueRowRootProps } from '../KeyValueRow.types';
+import styleSheet from './KeyValueRoot.styles';
+
+/**
+ * The main container for the KeyValueRow component.
+ * When creating custom KeyValueRow components, this must be the outermost component wrapping the two <KeyValueSection/> components.
+ *
+ * e.g.
+ * ```
+ * <KeyValueRowRoot>
+ *  <KeyValueSection></KeyValueSection>
+ *  <KeyValueSection></KeyValueSection>
+ * </KeyValueRowRoot>
+ * ```
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {Array<ReactNode>} props.children - The two <KeyValueSection> children.
+ * @param {ViewProps} [props.style] - Optional styling
+ *
+ * @returns {JSX.Element} The rendered Root component.
+ */
+const KeyValueRowRoot = ({
+  children,
+  style: customStyles,
+}: KeyValueRowRootProps) => {
+  const { styles: defaultStyles } = useStyles(styleSheet, {});
+
+  const styles = [defaultStyles.rootContainer, customStyles];
+
+  return <View style={styles}>{children}</View>;
+};
+
+export default KeyValueRowRoot;