fix: Use correct percentage format on AssetDataListItemStructure modu…

…le component (#280)
aragon · Aug 21, 2024 · 61295e6 · 61295e6
1 parent b89f082
commit 61295e6
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 40 deletions.
diff --git 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/...ts/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.test.tsx b/...ts/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/...ponents/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.tsx b/...ponents/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,19 +35,20 @@ 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) {
             return 0;
         }
 
         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,
     });