From 61295e62f0603f4b2fd47442da1a8c28243c6a2f Mon Sep 17 00:00:00 2001
From: Evan Aronson <93671071+evanaronson@users.noreply.github.com>
Date: Wed, 21 Aug 2024 15:08:28 +0200
Subject: [PATCH] fix: Use correct percentage format on
 AssetDataListItemStructure module component (#280)

---
 CHANGELOG.md                                  |  4 ++
 .../assetDataListItemStructure.test.tsx       | 48 +++++--------------
 .../assetDataListItemStructure.tsx            | 11 +++--
 3 files changed, 23 insertions(+), 40 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9c1b271da..ba2cca79d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   Use correct percentage formatting on `<AssetDataListItem />` module component
+
 ## [1.0.44] - 2024-08-20
 
 ### Added
diff --git a/src/modules/components/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.test.tsx b/src/modules/components/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.test.tsx
index cf7f0dff9..ed334d56f 100644
--- a/src/modules/components/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.test.tsx
+++ b/src/modules/components/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.test.tsx
@@ -20,53 +20,31 @@ describe('<AssetDataListItem.Structure /> component', () => {
         );
     };
 
-    it('renders tokenName and symbol', () => {
-        const props = {
-            name: 'Ethereum',
-            symbol: 'ETH',
-            amount: 420.69,
-        };
-
+    it('renders token name and symbol', () => {
+        const props = { name: 'Ethereum', symbol: 'ETH' };
         render(createTestComponent(props));
         expect(screen.getByText(props.name)).toBeInTheDocument();
         expect(screen.getByText(props.symbol)).toBeInTheDocument();
     });
 
-    it('renders amount, fiat price', async () => {
-        const props = {
-            name: 'Ethereum',
-            symbol: 'ETH',
-            amount: 420.69,
-            fiatPrice: 3654.76,
-        };
-
+    it('correctly renders amount, fiat price and price change', () => {
+        const props = { amount: 10, fiatPrice: 1250, priceChange: 25 };
         render(createTestComponent(props));
-        const USDAmount = await screen.findByText(/1.54/);
-        expect(USDAmount).toHaveTextContent('$1.54M');
+        expect(screen.getByText('$12.50K')).toBeInTheDocument();
         expect(screen.getByText(props.amount)).toBeInTheDocument();
+        expect(screen.getByText('+$2.50K')).toBeInTheDocument();
+        expect(screen.getByText('+25.00%')).toBeInTheDocument();
     });
 
-    it('handles not passing fiat price', () => {
-        const props = {
-            name: 'Ethereum',
-            symbol: 'ETH',
-            amount: 0,
-            priceChange: 0,
-        };
-
+    it('renders unknown with fiatPrice is not set', () => {
+        const props = { fiatPrice: undefined };
         render(createTestComponent(props));
-        expect(screen.getByText('Unknown')).toBeInTheDocument(); // Assuming Tag component renders '0%' for zero priceChange
+        expect(screen.getByText('Unknown')).toBeInTheDocument();
     });
 
-    it('handle not passing priceChange', async () => {
-        const props = {
-            name: 'Ethereum',
-            amount: 420.69,
-            symbol: 'ETH',
-            fiatPrice: 3654.76,
-        };
-
+    it('correctly renders price change when fiatPrice is set but priceChange property is undefined', () => {
+        const props = { priceChange: undefined, fiatPrice: 10 };
         render(createTestComponent(props));
-        expect(screen.getByText('0%')).toBeInTheDocument();
+        expect(screen.getByText('0.00%')).toBeInTheDocument();
     });
 });
diff --git a/src/modules/components/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.tsx b/src/modules/components/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.tsx
index 2c81e8915..77fa5fc9f 100644
--- a/src/modules/components/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.tsx
+++ b/src/modules/components/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.tsx
@@ -26,7 +26,7 @@ export interface IAssetDataListItemStructureProps extends IDataListItemProps {
      */
     fiatPrice?: number | string;
     /**
-     * The price change in percentage of the asset (E.g. in last 24h).
+     * The price change in percentage of the asset.
      * @default 0
      */
     priceChange?: number;
@@ -35,7 +35,9 @@ export interface IAssetDataListItemStructureProps extends IDataListItemProps {
 export const AssetDataListItemStructure: React.FC<IAssetDataListItemStructureProps> = (props) => {
     const { logoSrc, name, amount, symbol, fiatPrice, priceChange = 0, ...otherProps } = props;
 
-    const fiatAmount = Number(amount ?? 0) * Number(fiatPrice ?? 0);
+    const { copy } = useOdsModulesContext();
+
+    const fiatAmount = Number(amount) * Number(fiatPrice ?? 0);
 
     const fiatAmountChanged = useMemo(() => {
         if (!fiatPrice || !priceChange) {
@@ -43,11 +45,10 @@ export const AssetDataListItemStructure: React.FC<IAssetDataListItemStructurePro
         }
 
         const oldFiatAmount = (100 / (priceChange + 100)) * fiatAmount;
+
         return fiatAmount - oldFiatAmount;
     }, [fiatAmount, fiatPrice, priceChange]);
 
-    const { copy } = useOdsModulesContext();
-
     const changedAmountClasses = classNames(
         'text-sm font-normal leading-tight md:text-base',
         { 'text-success-800': fiatAmountChanged > 0 },
@@ -73,7 +74,7 @@ export const AssetDataListItemStructure: React.FC<IAssetDataListItemStructurePro
     });
 
     const formattedPriceChangedPercentage = formatterUtils.formatNumber(priceChange / 100, {
-        format: NumberFormat.PERCENTAGE_SHORT,
+        format: NumberFormat.PERCENTAGE_LONG,
         withSign: true,
     });