fix: add patch

MetaMask · May 15, 2024 · 984e7ff · 984e7ff
1 parent 3922c75
commit 984e7ff
Show file tree

Hide file tree

Showing 9 changed files with 866 additions and 331 deletions.
diff --git a/app/component-library/components-temp/Price/PercentageChange/PercentageChange.test.tsx b/app/component-library/components-temp/Price/PercentageChange/PercentageChange.test.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import PercentageChange from './PercentageChange';
+import { mockTheme } from '../../../../util/theme';
+
+describe('PercentageChange', () => {
+  it('should render correctly', () => {
+    const { toJSON } = render(<PercentageChange value={5.5} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('displays a positive value correctly', () => {
+    const { getByText } = render(<PercentageChange value={5.5} />);
+    const positiveText = getByText('+5.50%');
+    expect(positiveText).toBeTruthy();
+    expect(positiveText.props.style).toMatchObject({
+      color: mockTheme.colors.success.default,
+      textTransform: 'uppercase',
+    });
+  });
+
+  it('displays a negative value correctly', () => {
+    const { getByText } = render(<PercentageChange value={-3.25} />);
+    const negativeText = getByText('-3.25%');
+    expect(negativeText).toBeTruthy();
+    expect(negativeText.props.style).toMatchObject({
+      color: mockTheme.colors.error.default,
+      textTransform: 'uppercase',
+    });
+  });
+
+  it('handles null value correctly', () => {
+    const { queryByText } = render(<PercentageChange value={null} />);
+    expect(queryByText(/\+/)).toBeNull();
+    expect(queryByText(/-/)).toBeNull();
+  });
+
+  it('handles undefined value correctly', () => {
+    const { queryByText } = render(<PercentageChange value={undefined} />);
+    expect(queryByText(/\+/)).toBeNull();
+    expect(queryByText(/-/)).toBeNull();
+  });
+});
diff --git a/app/component-library/components-temp/Price/PercentageChange/PercentageChange.tsx b/app/component-library/components-temp/Price/PercentageChange/PercentageChange.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { fontStyles } from '../../../../styles/common';
 import Text from '../../../../component-library/components/Texts/Text';
 import { View, StyleSheet } from 'react-native';
@@ -19,11 +20,12 @@ const createStyles = (colors: Colors) =>
   });
 
 const PercentageChange = ({ value }: { value: number | null | undefined }) => {
-  console.log('im here .......');
   const { colors } = useTheme();
   const styles = createStyles(colors);
   const percentageStyle =
-    value >= 0 ? styles.balancePositiveStyle : styles.balanceNegativeStyle;
+    value && value >= 0
+      ? styles.balancePositiveStyle
+      : styles.balanceNegativeStyle;
 
   const isValidAmount = (amount: number | null | undefined): boolean =>
     amount !== null && amount !== undefined && !Number.isNaN(amount);
@@ -33,9 +35,7 @@ const PercentageChange = ({ value }: { value: number | null | undefined }) => {
     : '';
 
   return (
-    // eslint-disable-next-line react/react-in-jsx-scope
     <View>
-      {/* eslint-disable-next-line react/react-in-jsx-scope */}
       <Text style={percentageStyle}>{formattedValue}</Text>
     </View>
   );

diff --git a/...brary/components-temp/Price/PercentageChange/__snapshots__/PercentageChange.test.tsx.snap b/...brary/components-temp/Price/PercentageChange/__snapshots__/PercentageChange.test.tsx.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PercentageChange should render correctly 1`] = `
+<View>
+  <Text
+    accessibilityRole="text"
+    style={
+      {
+        "color": "#1C8234",
+        "fontFamily": "EuclidCircularB-Regular",
+        "fontSize": 14,
+        "fontWeight": "400",
+        "letterSpacing": 0,
+        "lineHeight": 22,
+        "textTransform": "uppercase",
+      }
+    }
+  >
+    +5.50%
+  </Text>
+</View>
+`;
diff --git a/app/components/UI/AssetElement/__snapshots__/index.test.tsx.snap b/app/components/UI/AssetElement/__snapshots__/index.test.tsx.snap
@@ -14,5 +14,15 @@ exports[`AssetElement should render correctly 1`] = `
     }
   }
   testID="asset-DAI"
-/>
+>
+  <View
+    style={
+      {
+        "alignItems": "flex-end",
+        "alignSelf": "flex-end",
+        "flex": 1,
+      }
+    }
+  />
+</TouchableOpacity>
 `;
diff --git a/app/components/UI/AssetElement/index.tsx b/app/components/UI/AssetElement/index.tsx
@@ -36,6 +36,7 @@ const createStyles = (colors: Colors) =>
     },
     arrow: {
       flex: 1,
+      alignItems: 'flex-end',
       alignSelf: 'flex-end',
     },
     arrowIcon: {
@@ -46,6 +47,7 @@ const createStyles = (colors: Colors) =>
     },
     balanceFiat: {
       color: colors.text.alternative,
+      paddingHorizontal: 0,
       ...fontStyles.normal,
       textTransform: 'uppercase',
     },
@@ -82,7 +84,7 @@ const AssetElement: React.FC<AssetElementProps> = ({
     >
       {children}
 
-      <View>
+      <View style={styles.arrow}>
         {balance && (
           <Text
             variant={