-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature: added AssetDataListItem.Structure
- Loading branch information
1 parent
04a5a5a
commit 3b469f8
Showing
7 changed files
with
254 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 61 additions & 0 deletions
61
...asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 DaoDataListItem 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 DaoDataListItem without an image src and 0 changes. | ||
*/ | ||
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; |
78 changes: 78 additions & 0 deletions
78
...ts/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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%'); | ||
}); | ||
}); |
105 changes: 105 additions & 0 deletions
105
...ponents/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}; |
7 changes: 7 additions & 0 deletions
7
src/modules/components/asset/assetDataListItem/assetDataListItemStructure/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { AssetDataListItemStructure } from './assetDataListItemStructure'; | ||
|
||
export const AssetDataListItem = { | ||
Structure: AssetDataListItemStructure, | ||
}; | ||
|
||
export type { IAssetDataListItemStructureProps } from './assetDataListItemStructure'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './assetDataListItemStructure'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './assetDataListItem'; |