feat(APP-3834): Remove 24h price change info from AssetDataListItemSt…

…ructure (#371)
aragon · Dec 18, 2024 · 5831f42 · 5831f42
1 parent 894715a
commit 5831f42
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 80 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Bump `softprops/action-gh-release` from 2.1.0 to 2.2.0
 - Bump `@rollup/plugin-node-resolve` from 15.3.0 to 16.0.0
 - Update minor and patch NPM dependencies
+- Update `AssetDataListItemStructure` module component to remove the `priceChange` property and related logic for
+  calculating percentage change
 
 ## [1.0.59] - 2024-12-11
 

diff --git a/...omponents/asset/assetDataListItem/assetDataListItemSkeleton/assetDataListItemSkeleton.tsx b/...omponents/asset/assetDataListItem/assetDataListItemSkeleton/assetDataListItemSkeleton.tsx
@@ -15,7 +15,7 @@ export const AssetDataListItemSkeleton: React.FC<IAssetDataListItemSkeletonProps
             aria-busy="true"
             aria-label="loading"
             className={classNames(
-                'flex min-h-[70px] w-full items-center gap-x-3 gap-y-4 bg-neutral-0 py-3 md:min-h-[92.5px] md:py-5',
+                'flex min-h-[70px] w-full items-center gap-x-3 gap-y-4 bg-neutral-0 py-3 md:min-h-[88.5px] md:py-5',
                 className,
             )}
             {...otherProps}

diff --git a/...asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.stories.tsx b/...asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.stories.tsx
@@ -24,7 +24,6 @@ export const Default: Story = {
         amount: 420.69,
         symbol: 'ETH',
         fiatPrice: 3654.76,
-        priceChange: 15,
     },
 };
 
@@ -38,14 +37,13 @@ export const LongName: Story = {
         amount: 420.69,
         symbol: 'A_REALLY_LONG_SYMBOL_THAT_SHOULD_TRUNCATE_WHEN_NEEDED',
         fiatPrice: 3654.76,
-        priceChange: 15,
     },
 };
 
 /**
- *  Usage of the AssetDataListItem without changedAmount and changedPercentage.
+ *  Usage of the AssetDataListItem without fiatPrice.
  */
-export const Fallback: Story = {
+export const UnknownPrice: Story = {
     args: {
         name: 'Ethereum',
         amount: 420.69,

diff --git a/...ts/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.test.tsx b/...ts/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.test.tsx
@@ -20,24 +20,16 @@ describe('<AssetDataListItem.Structure /> component', () => {
         expect(screen.getByText(props.symbol)).toBeInTheDocument();
     });
 
-    it('correctly renders amount, fiat price and price change', () => {
-        const props = { amount: 10, fiatPrice: 1250, priceChange: 25 };
+    it('correctly renders amount and fiat price', () => {
+        const props = { amount: 10, fiatPrice: 1250 };
         render(createTestComponent(props));
         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('renders unknown with fiatPrice is not set', () => {
         const props = { fiatPrice: undefined };
         render(createTestComponent(props));
         expect(screen.getByText('Unknown')).toBeInTheDocument();
     });
-
-    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.00%')).toBeInTheDocument();
-    });
 });
diff --git a/...ponents/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.tsx b/...ponents/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.tsx
@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import type React from 'react';
-import { useMemo } from 'react';
-import { Avatar, DataList, NumberFormat, Tag, formatterUtils, type IDataListItemProps } from '../../../../../core';
+import { Avatar, DataList, NumberFormat, formatterUtils, type IDataListItemProps } from '../../../../../core';
 import { useGukModulesContext } from '../../../gukModulesProvider';
 
 export type IAssetDataListItemStructureProps = IDataListItemProps & {
@@ -25,38 +24,14 @@ export type IAssetDataListItemStructureProps = IDataListItemProps & {
      * The fiat price of the asset.
      */
     fiatPrice?: number | string;
-    /**
-     * The price change in percentage of the asset.
-     * @default 0
-     */
-    priceChange?: number;
 };
 
 export const AssetDataListItemStructure: React.FC<IAssetDataListItemStructureProps> = (props) => {
-    const { logoSrc, name, amount, symbol, fiatPrice, priceChange = 0, className, ...otherProps } = props;
+    const { logoSrc, name, amount, symbol, fiatPrice, className, ...otherProps } = props;
 
     const { copy } = useGukModulesContext();
 
-    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 changedAmountClasses = classNames(
-        'text-sm font-normal leading-tight md:text-base',
-        { 'text-success-800': fiatAmountChanged > 0 },
-        { 'text-neutral-500': fiatAmountChanged === 0 },
-        { 'text-critical-800': fiatAmountChanged < 0 },
-    );
-
-    const tagVariant = priceChange > 0 ? 'success' : priceChange < 0 ? 'critical' : 'neutral';
+    const fiatAmount = Number(amount) * Number(fiatPrice);
 
     const formattedAmount = formatterUtils.formatNumber(amount, {
         format: NumberFormat.TOKEN_AMOUNT_SHORT,
@@ -65,46 +40,25 @@ export const AssetDataListItemStructure: React.FC<IAssetDataListItemStructurePro
 
     const formattedPrice = formatterUtils.formatNumber(fiatAmount, {
         format: NumberFormat.FIAT_TOTAL_SHORT,
-        fallback: '-',
-    });
-
-    const formattedPriceChanged = formatterUtils.formatNumber(fiatAmountChanged, {
-        format: NumberFormat.FIAT_TOTAL_SHORT,
-        withSign: true,
-    });
-
-    const formattedPriceChangedPercentage = formatterUtils.formatNumber(priceChange / 100, {
-        format: NumberFormat.PERCENTAGE_LONG,
-        withSign: true,
+        fallback: copy.assetDataListItemStructure.unknown,
     });
 
     return (
-        <DataList.Item className={classNames('flex items-center gap-x-3 py-3 md:py-5', className)} {...otherProps}>
-            <Avatar src={logoSrc} responsiveSize={{ md: 'md', sm: 'sm' }} className="block" />
-            <div className="flex w-full min-w-0 shrink items-center justify-between gap-3">
-                <div className="flex flex-col gap-y-1 truncate">
-                    <span className="truncate text-base leading-tight text-neutral-800 md:text-lg">{name}</span>
-                    <p className="truncate text-sm leading-tight text-neutral-500 md:text-base">
-                        <span>{formattedAmount} </span>
-                        <span className="truncate">{symbol}</span>
-                    </p>
-                </div>
-                <div className="flex flex-col items-end justify-center gap-y-1">
-                    {fiatPrice ? (
-                        <>
-                            <span className="text-base leading-tight text-neutral-800 md:text-lg">
-                                {formattedPrice}
-                            </span>
-                            <div className="flex items-center gap-x-1">
-                                <span className={changedAmountClasses}>{formattedPriceChanged}</span>
-                                <Tag label={formattedPriceChangedPercentage!} variant={tagVariant} />
-                            </div>
-                        </>
-                    ) : (
-                        <span className="text-sm leading-tight text-neutral-800 md:text-base">
-                            {copy.assetDataListItemStructure.unknown}
-                        </span>
-                    )}
+        <DataList.Item
+            className={classNames('flex items-center justify-between gap-x-3 py-3 md:py-5', className)}
+            {...otherProps}
+        >
+            <div className="flex min-w-0 items-center gap-3">
+                <Avatar src={logoSrc} responsiveSize={{ md: 'md', sm: 'sm' }} className="block shrink-0" />
+                <span className="truncate text-base leading-tight text-neutral-800 md:text-lg">{name}</span>
+            </div>
+            <div className="flex min-w-0 gap-x-2 text-right">
+                <div className="flex min-w-0 flex-col gap-y-1">
+                    <span className="text-base leading-tight text-neutral-800 md:text-lg">{formattedPrice}</span>
+                    <div className="flex items-center gap-1">
+                        <p className="text-sm leading-tight text-neutral-500 md:text-base">{formattedAmount}</p>
+                        <p className="truncate text-sm leading-tight text-neutral-500 md:text-base">{symbol}</p>
+                    </div>
                 </div>
             </div>
         </DataList.Item>