Merge branch 'main' into 1883-add-performance-metrics-for-signature-r…

…equests-in-mobile
MetaMask · Oct 1, 2024 · c6109d4 · c6109d4
2 parents 3971aa6 + f2a253c
commit c6109d4
Show file tree

Hide file tree

Showing 49 changed files with 1,380 additions and 986 deletions.
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,
     },

diff --git a/app/components/UI/AssetOverview/Price/Price.tsx b/app/components/UI/AssetOverview/Price/Price.tsx
@@ -11,9 +11,9 @@ import { useStyles } from '../../../../component-library/hooks';
 import { toDateFormat } from '../../../../util/date';
 import { addCurrencySymbol } from '../../../../util/number';
 import Text, {
+  TextColor,
   TextVariant,
 } from '../../../../component-library/components/Texts/Text';
-import Title from '../../../Base/Title';
 import PriceChart from '../PriceChart/PriceChart';
 import { distributeDataPoints } from '../PriceChart/utils';
 import styleSheet from './Price.styles';
@@ -80,14 +80,17 @@ const Price = ({
     <>
       <View style={styles.wrapper}>
         {asset.name ? (
-          <Text variant={TextVariant.HeadingMD} style={styles.name}>
+          <Text
+            variant={TextVariant.BodyMDMedium}
+            color={TextColor.Alternative}
+          >
             {asset.name} ({asset.symbol})
           </Text>
         ) : (
-          <Text variant={TextVariant.BodySM}>{asset.symbol}</Text>
+          <Text variant={TextVariant.BodyMDMedium}>{asset.symbol}</Text>
         )}
         {!isNaN(price) && (
-          <Title style={styles.price} testID={TOKEN_PRICE}>
+          <Text testID={TOKEN_PRICE} variant={TextVariant.HeadingLG}>
             {isLoading ? (
               <View style={styles.loadingPrice}>
                 <SkeletonPlaceholder>
@@ -101,7 +104,7 @@ const Price = ({
             ) : (
               addCurrencySymbol(price, currentCurrency, true)
             )}
-          </Title>
+          </Text>
         )}
         <Text>
           {isLoading ? (
@@ -115,7 +118,7 @@ const Price = ({
               </SkeletonPlaceholder>
             </View>
           ) : distributedPriceData.length > 0 ? (
-            <Text style={styles.priceDiff}>
+            <Text style={styles.priceDiff} variant={TextVariant.BodyMDMedium}>
               {
                 <Icon
                   name={
@@ -132,7 +135,13 @@ const Price = ({
               {addCurrencySymbol(diff, currentCurrency, true)} (
               {diff > 0 ? '+' : ''}
               {diff === 0 ? '0' : ((diff / comparePrice) * 100).toFixed(2)}
-              %) <Text style={styles.priceDiffDateText}>{date}</Text>
+              %){' '}
+              <Text
+                color={TextColor.Alternative}
+                variant={TextVariant.BodyMDMedium}
+              >
+                {date}
+              </Text>
             </Text>
           ) : null}
         </Text>

diff --git a/app/components/UI/AssetOverview/PriceChart/PriceChart.tsx b/app/components/UI/AssetOverview/PriceChart/PriceChart.tsx
@@ -69,9 +69,9 @@ const PriceChart = ({
 
   const chartColor =
     priceDiff > 0
-      ? theme.colors.success.default
+      ? theme.colors.primary.default
       : priceDiff < 0
-      ? theme.colors.error.default
+      ? theme.colors.primary.default
       : theme.colors.text.alternative;
 
   const apx = (size = 0) => {

diff --git a/app/components/UI/AssetOverview/StakingEarnings/StakingEarnings.styles.tsx b/app/components/UI/AssetOverview/StakingEarnings/StakingEarnings.styles.tsx
@@ -3,14 +3,13 @@ import { StyleSheet, TextStyle } from 'react-native';
 
 const styleSheet = (params: { theme: Theme }) => {
   const { theme } = params;
-  const { colors, typography } = theme;
+  const { colors } = theme;
 
   return StyleSheet.create({
     stakingEarningsContainer: {
       paddingTop: 16,
     },
     title: {
-      ...typography.sHeadingSM,
       paddingBottom: 8,
     } as TextStyle,
     keyValueRow: {