feat: APP-2795 - Implement AssetDataListItemStructure module component

CHANGELOG.md

@@ -9,7 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
--   Implement `DaoDataListItem`, `ProposalDataListItem.Structure`, and `MemberDataListItem.Structure` module components
+-   Implement `DaoDataListItem`, `ProposalDataListItem.Structure`, `AssetDataListItem` and `MemberDataListItem.Structure` module components
 -   Implement `StatePingAnimation` core component
 
 ### Changed

src/modules/components/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DataList } from '../../../../../core/components/dataList';
+import { AssetDataListItemStructure } from './assetDataListItemStructure';
+
+const meta: Meta<typeof AssetDataListItemStructure> = {
+    title: 'Modules/Components/asset/AssetDataListItem/AssetDataListItem.Structure',
+    component: AssetDataListItemStructure,
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/P0GeJKqILL7UXvaqu5Jj7V/v1.1.0?type=design&node-id=3259-11363&mode=dev',
+        },
+    },
+};
+
+type Story = StoryObj<typeof AssetDataListItemStructure>;
+
+/**
+ * Default usage example of the AssetDataListItem component.
+ */
+export const Default: Story = {
+    args: {
+        logoSrc: 'https://assets.coingecko.com/coins/images/279/standard/ethereum.png?1696501628',
+        tokenName: 'Ethereum',
+        amount: 420.69,
+        symbol: 'ETH',
+        USDAmount: 1230000,
+        changedAmount: 420.69,
+        changedPercentage: 0.05,
+    },
+    render: (props) => (
+        <DataList.Root entityLabel="Assets">
+            <DataList.Container>
+                <AssetDataListItemStructure {...props} />
+            </DataList.Container>
+        </DataList.Root>
+    ),
+};
+
+/**
+ *  Usage of the AssetDataListItem without changedAmount and changedPercentage.
+ */
+export const Fallback: Story = {
+    args: {
+        logoSrc: 'https://assets.coingecko.com/coins/images/279/standard/ethereum.png?1696501628',
+        tokenName: 'Ethereum',
+        amount: 420.69,
+        symbol: 'ETH',
+        USDAmount: 1230000,
+    },
+    render: (props) => (
+        <DataList.Root entityLabel="Assets">
+            <DataList.Container>
+                <AssetDataListItemStructure {...props} />
+            </DataList.Container>
+        </DataList.Root>
+    ),
+};
+
+export default meta;

src/modules/components/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.test.tsx

@@ -0,0 +1,78 @@
+import { render, screen } from '@testing-library/react';
+import { DataList } from '../../../../../core';
+import { AssetDataListItemStructure, type IAssetDataListItemStructureProps } from './assetDataListItemStructure';
+
+describe('<AssetDataListItemStructure /> component', () => {
+    const createTestComponent = (props?: Partial<IAssetDataListItemStructureProps>) => {
+        return (
+            <DataList.Root entityLabel="Assets">
+                <DataList.Container>
+                    <AssetDataListItemStructure {...props} />
+                </DataList.Container>
+            </DataList.Root>
+        );
+    };
+
+    it('renders tokenName, symbol, and the logoSrc', () => {
+        const props = {
+            logoSrc: 'https://assets.coingecko.com/coins/images/279/standard/ethereum.png?1696501628',
+            tokenName: 'Ethereum',
+            amount: 420.69,
+            symbol: 'ETH',
+            USDAmount: 1230000,
+            changedAmount: 420.69,
+            changedPercentage: 0.05,
+        };
+
+        render(createTestComponent(props));
+        expect(screen.getByText(props.tokenName)).toBeInTheDocument();
+        expect(screen.getByText(props.symbol)).toBeInTheDocument();
+    });
+
+    it('handles zero changedAmount and changedPercentage as neutral', () => {
+        const props = {
+            logoSrc: 'https://assets.coingecko.com/coins/images/279/standard/ethereum.png?1696501628',
+            tokenName: 'Ethereum',
+            amount: 420.69,
+            symbol: 'ETH',
+            USDAmount: 1230000,
+            changedAmount: 0,
+            changedPercentage: 0,
+        };
+
+        render(createTestComponent(props));
+        expect(screen.getByText('$0.00')).toBeInTheDocument(); // Assuming component shows '0' for zero changedAmount
+        expect(screen.getByText('0%')).toBeInTheDocument(); // Assuming Tag component renders '0%' for zero changedPercentage
+    });
+
+    it('handle not passing changedAmount and changedPercentage', async () => {
+        const props = {
+            logoSrc: 'https://assets.coingecko.com/coins/images/279/standard/ethereum.png?1696501628',
+            tokenName: 'Ethereum',
+            amount: 420.69,
+            symbol: 'ETH',
+            USDAmount: 1230000,
+        };
+
+        render(createTestComponent(props));
+        expect(screen.getByText('0%')).toBeInTheDocument();
+        const USDAmount = await screen.findByText(/1.23/);
+        expect(USDAmount).toHaveTextContent('$1.23M');
+    });
+
+    it('handle not passing changedPercentage', async () => {
+        const props = {
+            logoSrc: 'https://assets.coingecko.com/coins/images/279/standard/ethereum.png?1696501628',
+            tokenName: 'Ethereum',
+            amount: -420.69,
+            symbol: 'ETH',
+            USDAmount: 1230000,
+            changedAmount: 420.69,
+            changedPercentage: 0.05,
+        };
+
+        render(createTestComponent(props));
+        const tagElement = await screen.findByText(/\+ 5%/);
+        expect(tagElement).toHaveTextContent('+ 5%');
+    });
+});

src/modules/components/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.tsx

@@ -0,0 +1,105 @@
+import classNames from 'classnames';
+import type React from 'react';
+import { Avatar, DataList, NumberFormat, Tag, formatterUtils, type IDataListItemProps } from '../../../../../core';
+
+export interface IAssetDataListItemStructureProps extends IDataListItemProps {
+    /**
+     * The source of the logo for the token.
+     */
+    logoSrc?: string;
+    /**
+     * The name of the Token.
+     */
+    tokenName?: string;
+    /**
+     * The symbol of the Token.
+     */
+    symbol?: string;
+    /**
+     * The amount of the Token.
+     */
+    amount?: number | string;
+    /**
+     * The price of the Token.
+     */
+    USDAmount?: number | string;
+    /**
+     * changed price amount (E.g. in last 24h).
+     */
+    changedAmount?: number | string;
+    /**
+     * changed price amount ratio (E.g. in last 24h).
+     */
+    changedPercentage?: number | string;
+}
+
+export const AssetDataListItemStructure: React.FC<IAssetDataListItemStructureProps> = (props) => {
+    const { logoSrc, tokenName, amount, symbol, USDAmount, changedAmount, changedPercentage, ...otherProps } = props;
+
+    const formattedChangedAmount = Number(Number(changedAmount).toFixed(2));
+    const formattedChangedPercentage = Number(Number(changedPercentage).toFixed(2));
+
+    const sign = (value: number) => (value > 0 ? '+' : value < 0 ? '-' : '');
+    const changedAmountSign = sign(formattedChangedAmount);
+    const changedPercentageSign = sign(formattedChangedPercentage);
+
+    const changedAmountClasses = classNames(
+        'text-sm font-normal leading-tight md:text-base',
+        { 'text-success-800': formattedChangedAmount > 0 },
+        { 'text-neutral-500': formattedChangedAmount === 0 },
+        { 'text-critical-800': formattedChangedAmount < 0 },
+    );
+
+    return (
+        <DataList.Item {...otherProps}>
+            <div className="flex space-x-3 py-0 md:py-1.5">
+                <Avatar {...{ src: logoSrc }} size="md" />
+                <div className=" flex w-full justify-between">
+                    <div className="flex flex-col space-y-0.5">
+                        <span className="text-sm leading-tight text-neutral-800 md:text-base">{tokenName}</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>{symbol}</span>
+                        </p>
+                    </div>
+                    <div className="flex flex-col items-end space-y-0.5">
+                        <span className="text-sm leading-tight text-neutral-800 md:text-base">
+                            {formatterUtils.formatNumber(USDAmount, {
+                                format: NumberFormat.FIAT_TOTAL_SHORT,
+                                fallback: '-',
+                            })}
+                        </span>
+                        <div className="flex items-center space-x-1">
+                            <span className={changedAmountClasses}>
+                                {changedAmountSign}
+                                {formatterUtils.formatNumber(Math.abs(formattedChangedAmount || 0), {
+                                    format: NumberFormat.FIAT_TOTAL_SHORT,
+                                })}
+                            </span>
+                            <Tag
+                                label={`${changedPercentageSign} ${formatterUtils.formatNumber(
+                                    Math.abs(formattedChangedPercentage || 0),
+                                    {
+                                        format: NumberFormat.PERCENTAGE_SHORT,
+                                    },
+                                )}`}
+                                variant={
+                                    formattedChangedPercentage > 0
+                                        ? 'success'
+                                        : formattedChangedPercentage < 0
+                                          ? 'critical'
+                                          : 'neutral'
+                                }
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </DataList.Item>
+    );
+};

src/modules/components/asset/assetDataListItem/assetDataListItemStructure/index.ts

@@ -0,0 +1,7 @@
+import { AssetDataListItemStructure } from './assetDataListItemStructure';
+
+export const AssetDataListItem = {
+    Structure: AssetDataListItemStructure,
+};
+
+export type { IAssetDataListItemStructureProps } from './assetDataListItemStructure';

src/modules/components/asset/assetDataListItem/index.ts

@@ -0,0 +1 @@
+export * from './assetDataListItemStructure';

src/modules/components/asset/index.ts

@@ -0,0 +1 @@
+export * from './assetDataListItem';