feat: add aggregated comp

android/.project

@@ -14,15 +14,4 @@
 	<natures>
 		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
 	</natures>
-	<filteredResources>
-		<filter>
-			<id>1714744032029</id>
-			<name></name>
-			<type>30</type>
-			<matcher>
-				<id>org.eclipse.core.resources.regexFilterMatcher</id>
-				<arguments>node_modules|\.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
-			</matcher>
-		</filter>
-	</filteredResources>
 </projectDescription>

android/.settings/org.eclipse.buildship.core.prefs

@@ -1,13 +1,2 @@
-arguments=
-auto.sync=false
-build.scans.enabled=false
-connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER)
 connection.project.dir=
 eclipse.preferences.version=1
-gradle.user.home=
-java.home=
-jvm.arguments=
-offline.mode=false
-override.workspace.settings=false
-show.console.view=false
-show.executions.view=false

app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import AggregatedPercentage from './AgregatedPercentage';
+import { mockTheme } from '../../../../util/theme';
+import { useSelector } from 'react-redux';
+import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+describe('AggregatedPercentage', () => {
+  beforeEach(() => {
+    (useSelector as jest.Mock).mockImplementation((selector) => {
+      if (selector === selectCurrentCurrency) return 'USD';
+    });
+  });
+  afterEach(() => {
+    (useSelector as jest.Mock).mockClear();
+  });
+  it('should render correctly', () => {
+    const { toJSON } = render(
+      <AggregatedPercentage
+        ethFiat={100}
+        tokenFiat={100}
+        tokenFiat1dAgo={90}
+        ethFiat1dAgo={90}
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders positive percentage change correctly', () => {
+    const { getByText } = render(
+      <AggregatedPercentage
+        ethFiat={200}
+        tokenFiat={300}
+        tokenFiat1dAgo={250}
+        ethFiat1dAgo={150}
+      />,
+    );
+
+    expect(getByText('(+25.00%)')).toBeTruthy();
+    expect(getByText('+100 USD')).toBeTruthy();
+
+    expect(getByText('(+25.00%)').props.style).toMatchObject({
+      color: mockTheme.colors.success.default,
+      textTransform: 'uppercase',
+    });
+  });
+
+  it('renders negative percentage change correctly', () => {
+    const { getByText } = render(
+      <AggregatedPercentage
+        ethFiat={150}
+        tokenFiat={200}
+        tokenFiat1dAgo={300}
+        ethFiat1dAgo={200}
+      />,
+    );
+
+    expect(getByText('(-30.00%)')).toBeTruthy();
+    expect(getByText('-150 USD')).toBeTruthy();
+
+    expect(getByText('(-30.00%)').props.style).toMatchObject({
+      color: mockTheme.colors.error.default,
+      textTransform: 'uppercase',
+    });
+  });
+});

app/component-library/components-temp/Price/AggregatedPercentage/AgregatedPercentage.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { fontStyles } from '../../../../styles/common';
+import Text from '../../../../component-library/components/Texts/Text';
+import { View, StyleSheet } from 'react-native';
+import { useTheme } from '../../../../util/theme';
+import { Colors } from '../../../../util/theme/models';
+import { renderFiat } from '../../../../util/number';
+import { useSelector } from 'react-redux';
+import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
+
+const createStyles = (colors: Colors) =>
+  StyleSheet.create({
+    wrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    balancePositiveStyle: {
+      color: colors.success.default,
+      ...fontStyles.normal,
+      textTransform: 'uppercase',
+    },
+    balanceNegativeStyle: {
+      color: colors.error.default,
+      ...fontStyles.normal,
+      textTransform: 'uppercase',
+    },
+  });
+
+const isValidAmount = (amount: number | null | undefined): boolean =>
+  amount !== null && amount !== undefined && !Number.isNaN(amount);
+
+const AggregatedPercentage = ({
+  ethFiat,
+  tokenFiat,
+  tokenFiat1dAgo,
+  ethFiat1dAgo,
+}: {
+  ethFiat: number;
+  tokenFiat: number;
+  tokenFiat1dAgo: number;
+  ethFiat1dAgo: number;
+}) => {
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
+  const currentCurrency = useSelector(selectCurrentCurrency);
+  const DECIMALS_TO_SHOW = 2;
+
+  const totalBalance = ethFiat + tokenFiat;
+  const totalBalance1dAgo = ethFiat1dAgo + tokenFiat1dAgo;
+
+  const amountChange = totalBalance - totalBalance1dAgo;
+  const percentageChange =
+    ((totalBalance - totalBalance1dAgo) / totalBalance1dAgo) * 100 || 0;
+
+  const percentageStyle =
+    percentageChange >= 0
+      ? styles.balancePositiveStyle
+      : styles.balanceNegativeStyle;
+
+  const formattedPercentage = isValidAmount(percentageChange)
+    ? `(${(percentageChange as number) >= 0 ? '+' : ''}${(
+        percentageChange as number
+      ).toFixed(2)}%)`
+    : '';
+
+  const formattedValuePrice = isValidAmount(amountChange)
+    ? `${(amountChange as number) >= 0 ? '+' : ''}${renderFiat(
+        amountChange,
+        currentCurrency,
+        DECIMALS_TO_SHOW,
+      )} `
+    : '';
+
+  return (
+    <View style={styles.wrapper}>
+      <Text style={percentageStyle}>{formattedValuePrice}</Text>
+      <Text style={percentageStyle}>{formattedPercentage}</Text>
+    </View>
+  );
+};
+
+export default AggregatedPercentage;

app/component-library/components-temp/Price/AggregatedPercentage/__snapshots__/AggregatedPercentage.test.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AggregatedPercentage should render correctly 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+    }
+  }
+>
+  <Text
+    accessibilityRole="text"
+    style={
+      {
+        "color": "#1C8234",
+        "fontFamily": "EuclidCircularB-Regular",
+        "fontSize": 14,
+        "fontWeight": "400",
+        "letterSpacing": 0,
+        "lineHeight": 22,
+        "textTransform": "uppercase",
+      }
+    }
+  >
+    +20 USD 
+  </Text>
+  <Text
+    accessibilityRole="text"
+    style={
+      {
+        "color": "#1C8234",
+        "fontFamily": "EuclidCircularB-Regular",
+        "fontSize": 14,
+        "fontWeight": "400",
+        "letterSpacing": 0,
+        "lineHeight": 22,
+        "textTransform": "uppercase",
+      }
+    }
+  >
+    (+11.11%)
+  </Text>
+</View>
+`;

app/component-library/components-temp/Price/AggregatedPercentage/index.ts

@@ -0,0 +1 @@
+export { default } from './AgregatedPercentage';