resolve comments

aragon · Mar 26, 2024 · 7791714 · 7791714
1 parent 10505a5
commit 7791714
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 97 deletions.
diff --git a/...asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.stories.tsx b/...asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.stories.tsx
@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { DataList } from '../../../../../core/components/dataList';
+import { DataList } from '../../../../../core';
 import { AssetDataListItemStructure } from './assetDataListItemStructure';
 
 const meta: Meta<typeof AssetDataListItemStructure> = {
-    title: 'Modules/Components/asset/AssetDataListItem/AssetDataListItem.Structure',
+    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',
+            url: 'https://www.figma.com/file/P0GeJKqILL7UXvaqu5Jj7V/v1.1.0?type=design&node-id=8079-18352&mode=design&t=MR1awSDoExtPDiEd-4',
         },
     },
 };
@@ -22,12 +22,11 @@ type Story = StoryObj<typeof AssetDataListItemStructure>;
 export const Default: Story = {
     args: {
         logoSrc: 'https://assets.coingecko.com/coins/images/279/standard/ethereum.png?1696501628',
-        tokenName: 'Ethereum',
+        name: 'Ethereum',
         amount: 420.69,
         symbol: 'ETH',
-        USDAmount: 1230000,
-        changedAmount: 420.69,
-        changedPercentage: 0.05,
+        fiatPrice: 3654.76,
+        priceChange: 15,
     },
     render: (props) => (
         <DataList.Root entityLabel="Assets">
@@ -44,10 +43,10 @@ export const Default: Story = {
 export const Fallback: Story = {
     args: {
         logoSrc: 'https://assets.coingecko.com/coins/images/279/standard/ethereum.png?1696501628',
-        tokenName: 'Ethereum',
+        name: 'Ethereum',
         amount: 420.69,
         symbol: 'ETH',
-        USDAmount: 1230000,
+        fiatPrice: 3654.76,
     },
     render: (props) => (
         <DataList.Root entityLabel="Assets">

diff --git a/...ts/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.test.tsx b/...ts/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.test.tsx
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import { DataList } from '../../../../../core';
 import { AssetDataListItemStructure, type IAssetDataListItemStructureProps } from './assetDataListItemStructure';
 
-describe('<AssetDataListItemStructure /> component', () => {
+describe('<AssetDataListItem.Structure /> component', () => {
     const createTestComponent = (props?: Partial<IAssetDataListItemStructureProps>) => {
         return (
             <DataList.Root entityLabel="Assets">
@@ -15,29 +15,18 @@ describe('<AssetDataListItemStructure /> component', () => {
 
     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,
+            name: 'Ethereum',
             symbol: 'ETH',
-            USDAmount: 1230000,
-            changedAmount: 420.69,
-            changedPercentage: 0.05,
         };
 
         render(createTestComponent(props));
-        expect(screen.getByText(props.tokenName)).toBeInTheDocument();
+        expect(screen.getByText(props.name)).toBeInTheDocument();
         expect(screen.getByText(props.symbol)).toBeInTheDocument();
     });
 
-    it('handles zero changedAmount and changedPercentage as neutral', () => {
+    it('handles zero priceChange 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,
+            priceChange: 0,
         };
 
         render(createTestComponent(props));
@@ -48,10 +37,10 @@ describe('<AssetDataListItemStructure /> component', () => {
     it('handle not passing changedAmount and changedPercentage', async () => {
         const props = {
             logoSrc: 'https://assets.coingecko.com/coins/images/279/standard/ethereum.png?1696501628',
-            tokenName: 'Ethereum',
+            name: 'Ethereum',
             amount: 420.69,
             symbol: 'ETH',
-            USDAmount: 1230000,
+            fiatPrice: 3654.76,
         };
 
         render(createTestComponent(props));
@@ -63,12 +52,10 @@ describe('<AssetDataListItemStructure /> component', () => {
     it('handle not passing changedPercentage', async () => {
         const props = {
             logoSrc: 'https://assets.coingecko.com/coins/images/279/standard/ethereum.png?1696501628',
-            tokenName: 'Ethereum',
+            name: 'Ethereum',
             amount: -420.69,
             symbol: 'ETH',
-            USDAmount: 1230000,
-            changedAmount: 420.69,
-            changedPercentage: 0.05,
+            fiatPrice: 3654.76,
         };
 
         render(createTestComponent(props));

diff --git a/...ponents/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.tsx b/...ponents/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.tsx
@@ -1,100 +1,95 @@
 import classNames from 'classnames';
 import type React from 'react';
+import { useMemo } 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.
+     * The logo source of the asset
      */
     logoSrc?: string;
     /**
-     * The name of the Token.
+     * The name of the asset.
      */
-    tokenName?: string;
+    name?: string;
     /**
-     * The symbol of the Token.
+     * The symbol of the asset.
      */
     symbol?: string;
     /**
-     * The amount of the Token.
+     * The amount of the asset.
      */
     amount?: number | string;
     /**
-     * The price of the Token.
+     * The fiat price of the asset.
      */
-    USDAmount?: number | string;
+    fiatPrice?: number | string;
     /**
-     * changed price amount (E.g. in last 24h).
+     * the price change in percentage of the asset (E.g. in last 24h).
      */
-    changedAmount?: number | string;
-    /**
-     * changed price amount ratio (E.g. in last 24h).
-     */
-    changedPercentage?: number | string;
+    priceChange?: number;
 }
 
 export const AssetDataListItemStructure: React.FC<IAssetDataListItemStructureProps> = (props) => {
-    const { logoSrc, tokenName, amount, symbol, USDAmount, changedAmount, changedPercentage, ...otherProps } = props;
+    const { logoSrc, name, amount, symbol, fiatPrice, priceChange = 0, ...otherProps } = props;
 
-    const formattedChangedAmount = Number(Number(changedAmount).toFixed(2));
-    const formattedChangedPercentage = Number(Number(changedPercentage).toFixed(2));
+    const usdAmountChanged = useMemo(() => {
+        const usdAmount = (amount ? Number(amount) : 0) * (fiatPrice ? Number(fiatPrice) : 0);
+        const oldUsdAmount = (100 / (priceChange + 100)) * usdAmount;
+        return usdAmount - oldUsdAmount;
+    }, [amount, fiatPrice, priceChange]);
 
     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 },
+        { 'text-success-800': usdAmountChanged > 0 },
+        { 'text-neutral-500': usdAmountChanged === 0 },
+        { 'text-critical-800': usdAmountChanged < 0 },
     );
 
     return (
         <DataList.Item {...otherProps}>
-            <div className="flex space-x-3 py-0 md:py-1.5">
+            <div className="flex gap-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>
+                    <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>{symbol}</span>
+                            <span className="truncate">{symbol}</span>
                         </p>
                     </div>
-                    <div className="flex flex-col items-end space-y-0.5">
+                    <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(USDAmount, {
-                                format: NumberFormat.FIAT_TOTAL_SHORT,
-                                fallback: '-',
-                            })}
+                            {formatterUtils.formatNumber(
+                                (amount ? Number(amount) : 0) * (fiatPrice ? Number(fiatPrice) : 0),
+                                {
+                                    format: NumberFormat.FIAT_TOTAL_SHORT,
+                                    fallback: '-',
+                                },
+                            )}
                         </span>
-                        <div className="flex items-center space-x-1">
+                        <div className="flex items-center gap-x-1">
                             <span className={changedAmountClasses}>
-                                {changedAmountSign}
-                                {formatterUtils.formatNumber(Math.abs(formattedChangedAmount || 0), {
+                                {sign(usdAmountChanged)}
+                                {formatterUtils.formatNumber(Math.abs(usdAmountChanged), {
                                     format: NumberFormat.FIAT_TOTAL_SHORT,
                                 })}
                             </span>
                             <Tag
-                                label={`${changedPercentageSign} ${formatterUtils.formatNumber(
-                                    Math.abs(formattedChangedPercentage || 0),
+                                label={`${sign(priceChange / 100)}${formatterUtils.formatNumber(
+                                    Math.abs(priceChange / 100),
                                     {
                                         format: NumberFormat.PERCENTAGE_SHORT,
                                     },
                                 )}`}
-                                variant={
-                                    formattedChangedPercentage > 0
-                                        ? 'success'
-                                        : formattedChangedPercentage < 0
-                                          ? 'critical'
-                                          : 'neutral'
-                                }
+                                variant={priceChange > 0 ? 'success' : priceChange < 0 ? 'critical' : 'neutral'}
                             />
                         </div>
                     </div>

diff --git a/src/modules/components/asset/assetDataListItem/assetDataListItemStructure/index.ts b/src/modules/components/asset/assetDataListItem/assetDataListItemStructure/index.ts
@@ -1,7 +1 @@
-import { AssetDataListItemStructure } from './assetDataListItemStructure';
-
-export const AssetDataListItem = {
-    Structure: AssetDataListItemStructure,
-};
-
-export type { IAssetDataListItemStructureProps } from './assetDataListItemStructure';
+export { AssetDataListItemStructure, type IAssetDataListItemStructureProps } from './assetDataListItemStructure';
diff --git a/src/modules/components/asset/assetDataListItem/index.ts b/src/modules/components/asset/assetDataListItem/index.ts
@@ -1 +1,7 @@
-export * from './assetDataListItemStructure';
+import { AssetDataListItemStructure } from './assetDataListItemStructure';
+
+export const AssetDataListItem = {
+    Structure: AssetDataListItemStructure,
+};
+
+export type { IAssetDataListItemStructureProps } from './assetDataListItemStructure';
diff --git a/src/modules/components/dao/daoDataListItem/daoDataListItemStructure/index.ts b/src/modules/components/dao/daoDataListItem/daoDataListItemStructure/index.ts
@@ -1,7 +1 @@
-import { DaoDataListItemStructure } from './daoDataListItemStructure';
-
-export const DaoDataListItem = {
-    Structure: DaoDataListItemStructure,
-};
-
-export type { IDaoDataListItemStructureProps } from './daoDataListItemStructure';
+export { DaoDataListItemStructure, type IDaoDataListItemStructureProps } from './daoDataListItemStructure';
diff --git a/src/modules/components/dao/daoDataListItem/index.ts b/src/modules/components/dao/daoDataListItem/index.ts
@@ -1 +1,7 @@
-export * from './daoDataListItemStructure';
+import { DaoDataListItemStructure } from './daoDataListItemStructure';
+
+export const DaoDataListItem = {
+    Structure: DaoDataListItemStructure,
+};
+
+export type { IDaoDataListItemStructureProps } from './daoDataListItemStructure';
diff --git a/src/modules/components/index.ts b/src/modules/components/index.ts
@@ -1,3 +1,4 @@
+export * from './asset';
 export * from './dao';
 export * from './member';
 export * from './odsModulesProvider';

diff --git a/src/modules/components/member/memberDataListItem/index.ts b/src/modules/components/member/memberDataListItem/index.ts
@@ -1 +1,7 @@
-export * from './memberDataListItemStructure';
+import { MemberDataListItemStructure } from './memberDataListItemStructure';
+
+export const MemberDataListItem = {
+    Structure: MemberDataListItemStructure,
+};
+
+export type { IMemberDataListItemProps } from './memberDataListItemStructure';
diff --git a/src/modules/components/member/memberDataListItem/memberDataListItemStructure/index.ts b/src/modules/components/member/memberDataListItem/memberDataListItemStructure/index.ts
@@ -1,7 +1 @@
-import { MemberDataListItemStructure } from './memberDataListItemStructure';
-
-export const MemberDataListItem = {
-    Structure: MemberDataListItemStructure,
-};
-
-export type { IMemberDataListItemProps } from './memberDataListItemStructure';
+export { MemberDataListItemStructure, type IMemberDataListItemProps } from './memberDataListItemStructure';