resolve round 2

aragon · Mar 27, 2024 · 4dd40e1 · 4dd40e1
1 parent 6b41b22
commit 4dd40e1
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 52 deletions.
diff --git a/...asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.stories.tsx b/...asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.stories.tsx
@@ -42,8 +42,9 @@ export const Default: Story = {
  */
 export const Fallback: Story = {
     args: {
-        amount: 0,
-        priceChange: 0,
+        name: 'Ethereum',
+        amount: 420.69,
+        symbol: 'ETH',
     },
     render: (props) => (
         <DataList.Root entityLabel="Assets">

diff --git a/...ts/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.test.tsx b/...ts/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.test.tsx
@@ -3,20 +3,28 @@ import { DataList } from '../../../../../core';
 import { AssetDataListItemStructure, type IAssetDataListItemStructureProps } from './assetDataListItemStructure';
 
 describe('<AssetDataListItem.Structure /> component', () => {
-    const createTestComponent = (props?: Partial<IAssetDataListItemStructureProps>) => {
+    const createTestComponent = (props: Partial<IAssetDataListItemStructureProps> = {}) => {
+        const completeProps: IAssetDataListItemStructureProps = {
+            name: 'Ethereum',
+            symbol: 'ETH',
+            amount: 420.69,
+            ...props,
+        };
+
         return (
             <DataList.Root entityLabel="Assets">
                 <DataList.Container>
-                    <AssetDataListItemStructure {...props} />
+                    <AssetDataListItemStructure {...completeProps} />
                 </DataList.Container>
             </DataList.Root>
         );
     };
 
-    it('renders tokenName, symbol, and the logoSrc', () => {
+    it('renders tokenName and symbol', () => {
         const props = {
             name: 'Ethereum',
             symbol: 'ETH',
+            amount: 420.69,
         };
 
         render(createTestComponent(props));
@@ -26,6 +34,8 @@ describe('<AssetDataListItem.Structure /> component', () => {
 
     it('renders amount, fiat price', async () => {
         const props = {
+            name: 'Ethereum',
+            symbol: 'ETH',
             amount: 420.69,
             fiatPrice: 3654.76,
         };
@@ -36,21 +46,20 @@ describe('<AssetDataListItem.Structure /> component', () => {
         expect(screen.getByText(props.amount)).toBeInTheDocument();
     });
 
-    it('handles zero priceChange as neutral', () => {
+    it('handles not passing fiat price', () => {
         const props = {
+            name: 'Ethereum',
+            symbol: 'ETH',
             amount: 0,
             priceChange: 0,
         };
 
         render(createTestComponent(props));
-        const elements = screen.queryAllByText('$0.00');
-        expect(elements.length).toBeGreaterThan(0); // assuming both asset price and changed price amount are 0.00
-        expect(screen.getByText('0%')).toBeInTheDocument(); // Assuming Tag component renders '0%' for zero priceChange
+        expect(screen.getByText('Unknown')).toBeInTheDocument(); // Assuming Tag component renders '0%' for zero priceChange
     });
 
     it('handle not passing priceChange', async () => {
         const props = {
-            logoSrc: 'https://assets.coingecko.com/coins/images/279/standard/ethereum.png?1696501628',
             name: 'Ethereum',
             amount: 420.69,
             symbol: 'ETH',

diff --git a/...ponents/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.tsx b/...ponents/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.tsx
@@ -4,36 +4,40 @@ import { useMemo } from 'react';
 import { Avatar, DataList, NumberFormat, Tag, formatterUtils, type IDataListItemProps } from '../../../../../core';
 
 export interface IAssetDataListItemStructureProps extends IDataListItemProps {
-    /**
-     * The logo source of the asset
-     */
-    logoSrc?: string;
     /**
      * The name of the asset.
      */
-    name?: string;
+    name: string;
     /**
      * The symbol of the asset.
      */
-    symbol?: string;
+    symbol: string;
     /**
      * The amount of the asset.
      */
-    amount?: number | string;
+    amount: number | string;
+    /**
+     * The logo source of the asset
+     */
+    logoSrc?: string;
     /**
      * The fiat price of the asset.
      */
     fiatPrice?: number | string;
     /**
      * the price change in percentage of the asset (E.g. in last 24h).
+     * @default 0
      */
     priceChange?: number;
 }
 
 export const AssetDataListItemStructure: React.FC<IAssetDataListItemStructureProps> = (props) => {
-    const { logoSrc, name = '-', amount = 0, symbol, fiatPrice = 0, priceChange = 0, ...otherProps } = props;
+    const { logoSrc, name, amount, symbol, fiatPrice, priceChange = 0, ...otherProps } = props;
 
     const usdAmountChanged = useMemo(() => {
+        if (!fiatPrice || !priceChange) {
+            return 0;
+        }
         const usdAmount = (amount ? Number(amount) : 0) * (fiatPrice ? Number(fiatPrice) : 0);
         const oldUsdAmount = (100 / (priceChange + 100)) * usdAmount;
         return usdAmount - oldUsdAmount;
@@ -48,50 +52,61 @@ export const AssetDataListItemStructure: React.FC<IAssetDataListItemStructurePro
         { 'text-critical-800': usdAmountChanged < 0 },
     );
 
+    const formattedAmount = formatterUtils.formatNumber(amount, {
+        format: NumberFormat.TOKEN_AMOUNT_SHORT,
+        fallback: '',
+    });
+
+    const formattedPrice = formatterUtils.formatNumber(
+        (amount ? Number(amount) : 0) * (fiatPrice ? Number(fiatPrice) : 0),
+        {
+            format: NumberFormat.FIAT_TOTAL_SHORT,
+            fallback: '-',
+        },
+    );
+
+    const formattedPriceChanged = formatterUtils.formatNumber(Math.abs(usdAmountChanged), {
+        format: NumberFormat.FIAT_TOTAL_SHORT,
+    });
+
+    const formattedPriceChangedPercentage = formatterUtils.formatNumber(Math.abs(priceChange / 100), {
+        format: NumberFormat.PERCENTAGE_SHORT,
+    });
+
     return (
         <DataList.Item {...otherProps}>
             <div className="flex gap-x-3 py-0 md:py-1.5">
-                <Avatar src={logoSrc} size="md" />
+                <div className="flex items-center">
+                    <Avatar src={logoSrc} responsiveSize={{ md: 'md', sm: 'sm' }} className="block" />
+                </div>
                 <div className=" flex w-full justify-between">
                     <div className="flex flex-col gap-y-0.5">
                         <span className="truncate text-sm leading-tight text-neutral-800 md:text-base">{name}</span>
                         <p className="text-sm leading-tight text-neutral-500 md:text-base">
-                            <span>
-                                {formatterUtils.formatNumber(amount, {
-                                    format: NumberFormat.TOKEN_AMOUNT_SHORT,
-                                    fallback: '',
-                                })}{' '}
-                            </span>
+                            <span>{`${formattedAmount}`} </span>
                             <span className="truncate">{symbol}</span>
                         </p>
                     </div>
-                    <div className="flex flex-col items-end gap-y-0.5">
-                        <span className="text-sm leading-tight text-neutral-800 md:text-base">
-                            {formatterUtils.formatNumber(
-                                (amount ? Number(amount) : 0) * (fiatPrice ? Number(fiatPrice) : 0),
-                                {
-                                    format: NumberFormat.FIAT_TOTAL_SHORT,
-                                    fallback: '-',
-                                },
-                            )}
-                        </span>
-                        <div className="flex items-center gap-x-1">
-                            <span className={changedAmountClasses}>
-                                {sign(usdAmountChanged)}
-                                {formatterUtils.formatNumber(Math.abs(usdAmountChanged), {
-                                    format: NumberFormat.FIAT_TOTAL_SHORT,
-                                })}
-                            </span>
-                            <Tag
-                                label={`${sign(priceChange / 100)}${formatterUtils.formatNumber(
-                                    Math.abs(priceChange / 100),
-                                    {
-                                        format: NumberFormat.PERCENTAGE_SHORT,
-                                    },
-                                )}`}
-                                variant={priceChange > 0 ? 'success' : priceChange < 0 ? 'critical' : 'neutral'}
-                            />
-                        </div>
+                    <div className="flex flex-col items-end justify-center gap-y-0.5">
+                        {fiatPrice ? (
+                            <>
+                                <span className="text-sm leading-tight text-neutral-800 md:text-base">
+                                    {formattedPrice}
+                                </span>
+                                <div className="flex items-center gap-x-1">
+                                    <span className={changedAmountClasses}>
+                                        {sign(usdAmountChanged)}
+                                        {formattedPriceChanged}
+                                    </span>
+                                    <Tag
+                                        label={`${sign(priceChange / 100)}${formattedPriceChangedPercentage}`}
+                                        variant={priceChange > 0 ? 'success' : priceChange < 0 ? 'critical' : 'neutral'}
+                                    />
+                                </div>
+                            </>
+                        ) : (
+                            <span className="text-sm leading-tight text-neutral-800 md:text-base">Unknown</span>
+                        )}
                     </div>
                 </div>
             </div>