Merge branch 'main' into feat/list-item-accessories

MetaMask · Oct 1, 2024 · e8fe557 · e8fe557
2 parents 7728575 + d49bb50
commit e8fe557
Show file tree

Hide file tree

Showing 49 changed files with 1,370 additions and 977 deletions.
diff --git a/README.md b/README.md
@@ -41,15 +41,20 @@ cd metamask-mobile
 
 **Firebase Messaging Setup**
 
-Before running the app, keep in mind that MetaMask uses FCM (Firebase Cloud Message) to empower communications. Based on this, would be preferable that you provide your own Firebase project config file and update your `google-services.json` file in the `android/app` directory as well your .env files (ios.env, js.env, android.env), adding GOOGLE_SERVICES_B64 variable depending on the environment you are running the app (ios/android).
+Before running the app, keep in mind that MetaMask uses FCM (Firebase Cloud Message) to empower communications. Based on this, as an external contributor you would preferably need to provide your own FREE Firebase project config file with a matching client for package name `io.metamask`, and update your `google-services.json` file in the `android/app` directory as well your `.env` files (`.ios.env`, `.js.env`, `.android.env`), adding `GOOGLE_SERVICES_B64` variable depending on the environment you are running the app (ios/android).
 
-ATTENTION: In case you don't provide your own Firebase project config file, you can make usage of a mock file at `android/app/google-services-example.json`, following the steps below from the root of the project:
+The value you should provide to `GOOGLE_SERVICES_B64` is the base64 encoded version of your Firebase project config file, which can be generated as follows:
 
 ```bash
 base64 -i ./android/app/google-services-example.json
 ```
 
-Copy the result to your clipboard and paste it in the GOOGLE_SERVICES_B64 variable in the .env file you are running the app.
+Copy the result to your clipboard and paste it in the `GOOGLE_SERVICES_B64` variable in the `.env` file you are running the app.
+
+> [!CAUTION]
+> In case you don't provide your own Firebase project config file, you will face the error `No matching client found for package name 'io.metamask'`.
+
+You can make usage of a mock file at `android/app/google-services-example.json`, following the same steps above from the root of the project.
 
 In case of any doubt, please follow the instructions in the link below to get your Firebase project config file.
 

diff --git a/android/app/google-services-example.json b/android/app/google-services-example.json
@@ -7,15 +7,20 @@
   },
   "client": [
     {
+      "api_key": [
+        {
+          "current_key": ""
+        }
+      ],
       "client_info": {
         "mobilesdk_app_id": "1:123456789000:android:f1bf012572b04063",
-        "client_id": "android:com.google.samples.quickstart.admobexample",
+        "client_id": "android:io.metamask",
         "client_type": 1,
         "android_client_info": {
-          "package_name": "com.google.samples.quickstart.admobexample",
+          "package_name": "io.metamask",
           "certificate_hash": []
         }
-      },
+      }
     }
   ],
   "configuration_version": "1"

diff --git a/app/actions/onboarding/index.js b/app/actions/onboarding/index.js
diff --git a/app/actions/onboarding/index.ts b/app/actions/onboarding/index.ts
@@ -0,0 +1,28 @@
+import { IMetaMetricsEvent } from '../../core/Analytics';
+
+export const SAVE_EVENT = 'SAVE_EVENT';
+export const CLEAR_EVENTS = 'CLEAR_EVENTS';
+
+interface SaveEventAction {
+  type: typeof SAVE_EVENT;
+  event: [IMetaMetricsEvent];
+}
+
+interface ClearEventsAction {
+  type: typeof CLEAR_EVENTS;
+}
+
+export type OnboardingActionTypes = SaveEventAction | ClearEventsAction;
+
+export function saveOnboardingEvent(eventArgs: [IMetaMetricsEvent]): SaveEventAction {
+  return {
+    type: SAVE_EVENT,
+    event: eventArgs,
+  };
+}
+
+export function clearOnboardingEvents(): ClearEventsAction {
+  return {
+    type: CLEAR_EVENTS,
+  };
+}
diff --git a/app/components/UI/AssetOverview/Balance/Balance.styles.tsx b/app/components/UI/AssetOverview/Balance/Balance.styles.tsx
@@ -24,9 +24,7 @@ const styleSheet = (params: { theme: Theme }) => {
       overflow: 'hidden',
     },
     title: {
-      ...typography.sHeadingSM,
-      marginVertical: 0,
-      paddingVertical: 8,
+      paddingVertical: 4,
       paddingHorizontal: 15,
     } as TextStyle,
     text: {

diff --git a/app/components/UI/AssetOverview/Balance/Balance.tsx b/app/components/UI/AssetOverview/Balance/Balance.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
 import { strings } from '../../../../../locales/i18n';
-import Title from '../../../Base/Title';
 import { useStyles } from '../../../../component-library/hooks';
 import styleSheet from './Balance.styles';
 import AssetElement from '../../AssetElement';
@@ -56,9 +55,9 @@ const Balance = ({ asset, mainBalance, secondaryBalance }: BalanceProps) => {
 
   return (
     <View style={styles.wrapper}>
-      <Title style={styles.title}>
+      <Text variant={TextVariant.HeadingMD} style={styles.title}>
         {strings('asset_overview.your_balance')}
-      </Title>
+      </Text>
       <AssetElement
         asset={asset}
         mainBalance={mainBalance}

diff --git a/app/components/UI/AssetOverview/Balance/__snapshots__/index.test.tsx.snap b/app/components/UI/AssetOverview/Balance/__snapshots__/index.test.tsx.snap
@@ -9,60 +9,18 @@ exports[`Balance should render correctly with a fiat balance 1`] = `
   }
 >
   <Text
+    accessibilityRole="text"
     style={
-      [
-        {
-          "color": "#141618",
-          "fontFamily": "EuclidCircularB-Regular",
-          "fontSize": 30,
-          "fontWeight": "400",
-          "marginVertical": 2,
-        },
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        [
-          {
-            "color": "#141618",
-            "fontFamily": "EuclidCircularB-Bold",
-            "fontSize": 18,
-            "fontWeight": "600",
-            "marginVertical": 3,
-          },
-          undefined,
-          undefined,
-          {
-            "fontFamily": "Euclid Circular B",
-            "fontSize": 16,
-            "fontWeight": "700",
-            "letterSpacing": 0,
-            "lineHeight": 24,
-            "marginVertical": 0,
-            "paddingHorizontal": 15,
-            "paddingVertical": 8,
-          },
-        ],
-      ]
+      {
+        "color": "#141618",
+        "fontFamily": "EuclidCircularB-Bold",
+        "fontSize": 18,
+        "fontWeight": "700",
+        "letterSpacing": 0,
+        "lineHeight": 24,
+        "paddingHorizontal": 15,
+        "paddingVertical": 4,
+      }
     }
   >
     Your balance
@@ -279,60 +237,18 @@ exports[`Balance should render correctly without a fiat balance 1`] = `
   }
 >
   <Text
+    accessibilityRole="text"
     style={
-      [
-        {
-          "color": "#141618",
-          "fontFamily": "EuclidCircularB-Regular",
-          "fontSize": 30,
-          "fontWeight": "400",
-          "marginVertical": 2,
-        },
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        [
-          {
-            "color": "#141618",
-            "fontFamily": "EuclidCircularB-Bold",
-            "fontSize": 18,
-            "fontWeight": "600",
-            "marginVertical": 3,
-          },
-          undefined,
-          undefined,
-          {
-            "fontFamily": "Euclid Circular B",
-            "fontSize": 16,
-            "fontWeight": "700",
-            "letterSpacing": 0,
-            "lineHeight": 24,
-            "marginVertical": 0,
-            "paddingHorizontal": 15,
-            "paddingVertical": 8,
-          },
-        ],
-      ]
+      {
+        "color": "#141618",
+        "fontFamily": "EuclidCircularB-Bold",
+        "fontSize": 18,
+        "fontWeight": "700",
+        "letterSpacing": 0,
+        "lineHeight": 24,
+        "paddingHorizontal": 15,
+        "paddingVertical": 4,
+      }
     }
   >
     Your balance

diff --git a/app/components/UI/AssetOverview/ChartNavigationButton/ChartNavigationButton.styles.tsx b/app/components/UI/AssetOverview/ChartNavigationButton/ChartNavigationButton.styles.tsx
@@ -15,7 +15,7 @@ const styleSheet = (params: {
   return StyleSheet.create({
     button: {
       backgroundColor: selected
-        ? colors.primary.default
+        ? colors.background.pressed
         : colors.background.default,
       borderRadius: 40,
       paddingVertical: 2,
@@ -27,7 +27,6 @@ const styleSheet = (params: {
     },
     label: {
       letterSpacing: 3,
-      color: selected ? colors.background.default : colors.primary.default,
       textAlign: 'center',
     } as TextStyle,
   });

diff --git a/app/components/UI/AssetOverview/ChartNavigationButton/ChartNavigationButton.tsx b/app/components/UI/AssetOverview/ChartNavigationButton/ChartNavigationButton.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import { useStyles } from '../../../../component-library/hooks';
 import Text, {
+  TextColor,
   TextVariant,
 } from '../../../../component-library/components/Texts/Text';
 import styleSheet from './ChartNavigationButton.styles';
@@ -20,7 +21,11 @@ const ChartNavigationButton = ({
   const { styles } = useStyles(styleSheet, { selected });
   return (
     <TouchableOpacity style={styles.button} onPress={onPress}>
-      <Text variant={TextVariant.BodySM} style={styles.label}>
+      <Text
+        variant={TextVariant.BodySM}
+        style={styles.label}
+        color={selected ? TextColor.Default : TextColor.Alternative}
+      >
         {label}
       </Text>
     </TouchableOpacity>

diff --git a/app/components/UI/AssetOverview/Price/Price.styles.tsx b/app/components/UI/AssetOverview/Price/Price.styles.tsx
@@ -11,33 +11,22 @@ const styleSheet = (params: {
     theme,
     vars: { priceDiff },
   } = params;
-  const { colors, typography } = theme;
+  const { colors } = theme;
   return StyleSheet.create({
     wrapper: {
       paddingHorizontal: 16,
     },
-    name: {
-      fontWeight: '500',
-    } as TextStyle,
-    price: {
-      ...typography.lHeadingLG,
-    } as TextStyle,
     priceDiff: {
-      ...typography.lBodyMDMedium,
       color:
         priceDiff > 0
           ? colors.success.default
           : priceDiff < 0
           ? colors.error.default
           : colors.text.alternative,
-      lineHeight: 22,
     } as TextStyle,
     priceDiffIcon: {
       marginTop: 10,
     },
-    priceDiffDateText: {
-      ...typography.lBodyMDMedium,
-    } as TextStyle,
     loadingPrice: {
       paddingTop: 8,
     },