diff --git a/CHANGELOG.md b/CHANGELOG.md index 0f9b96be4..086c3c4ff 100644 --- 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/src/modules/components/asset/assetDataListItem/assetDataListItemSkeleton/assetDataListItemSkeleton.tsx b/src/modules/components/asset/assetDataListItem/assetDataListItemSkeleton/assetDataListItemSkeleton.tsx index ff42fc35d..c499708bf 100644 --- a/src/modules/components/asset/assetDataListItem/assetDataListItemSkeleton/assetDataListItemSkeleton.tsx +++ b/src/modules/components/asset/assetDataListItem/assetDataListItemSkeleton/assetDataListItemSkeleton.tsx @@ -15,7 +15,7 @@ export const AssetDataListItemSkeleton: React.FC 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', () => { @@ -34,10 +32,4 @@ describe(' component', () => { 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/src/modules/components/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.tsx b/src/modules/components/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.tsx index a5703dbfa..442ed6755 100644 --- a/src/modules/components/asset/assetDataListItem/assetDataListItemStructure/assetDataListItemStructure.tsx +++ b/src/modules/components/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 = (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 - -
-
- {name} -

- {formattedAmount} - {symbol} -

-
-
- {fiatPrice ? ( - <> - - {formattedPrice} - -
- {formattedPriceChanged} - -
- - ) : ( - - {copy.assetDataListItemStructure.unknown} - - )} + +
+ + {name} +
+
+
+ {formattedPrice} +
+

{formattedAmount}

+

{symbol}

+