feat(APP-3652): Update AssetDataListItem component to support hideValue property

Author: cgero-eth

CHANGELOG.md

@@ -7,6 +7,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- Update `<AssetDataListItem />` module component to support `hideValue` property
+
 ### Changed
 
 - Update Manrope font weight for Regular variant from 500 to 400

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

@@ -41,7 +41,7 @@ export const LongName: Story = {
 };
 
 /**
- *  Usage of the AssetDataListItem without fiatPrice.
+ * Usage of the AssetDataListItem component without fiatPrice.
  */
 export const UnknownPrice: Story = {
     args: {
@@ -51,4 +51,17 @@ export const UnknownPrice: Story = {
     },
 };
 
+/**
+ * Set the hideValue property to true to only render the token amount.
+ */
+export const WithoutValue: Story = {
+    args: {
+        name: 'Solana',
+        logoSrc: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5426.png',
+        amount: 2.479283,
+        symbol: 'SOL',
+        hideValue: true,
+    },
+};
+
 export default meta;

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

@@ -13,23 +13,33 @@ describe('<AssetDataListItem.Structure /> component', () => {
         return <AssetDataListItemStructure {...completeProps} />;
     };
 
-    it('renders token name and symbol', () => {
-        const props = { name: 'Ethereum', symbol: 'ETH' };
-        render(createTestComponent(props));
-        expect(screen.getByText(props.name)).toBeInTheDocument();
-        expect(screen.getByText(props.symbol)).toBeInTheDocument();
+    it('renders the token name and symbol', () => {
+        const name = 'Ethereum';
+        const symbol = 'ETH';
+        render(createTestComponent({ name, symbol }));
+        expect(screen.getByText(name)).toBeInTheDocument();
+        expect(screen.getByText(/ETH/)).toBeInTheDocument();
     });
 
-    it('correctly renders amount and fiat price', () => {
-        const props = { amount: 10, fiatPrice: 1250 };
-        render(createTestComponent(props));
+    it('correctly renders the amount and fiat value', () => {
+        const amount = 10;
+        const fiatPrice = 1250;
+        const symbol = 'SOL';
+        render(createTestComponent({ amount, fiatPrice, symbol }));
         expect(screen.getByText('$12.50K')).toBeInTheDocument();
-        expect(screen.getByText(props.amount)).toBeInTheDocument();
+        expect(screen.getByText(`${amount.toString()} ${symbol}`)).toBeInTheDocument();
     });
 
-    it('renders unknown with fiatPrice is not set', () => {
-        const props = { fiatPrice: undefined };
-        render(createTestComponent(props));
+    it('renders unknown when fiatPrice is not set', () => {
+        const fiatPrice = undefined;
+        render(createTestComponent({ fiatPrice }));
         expect(screen.getByText('Unknown')).toBeInTheDocument();
     });
+
+    it('hides the fiat value when hideValue is set to true', () => {
+        const fiatPrice = undefined;
+        const hideValue = true;
+        render(createTestComponent({ fiatPrice, hideValue }));
+        expect(screen.queryByText('Unknown')).not.toBeInTheDocument();
+    });
 });

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

@@ -24,25 +24,26 @@ export type IAssetDataListItemStructureProps = IDataListItemProps & {
      * The fiat price of the asset.
      */
     fiatPrice?: number | string;
+    /**
+     * Hides the asset value when set to true.
+     */
+    hideValue?: boolean;
 };
 
 export const AssetDataListItemStructure: React.FC<IAssetDataListItemStructureProps> = (props) => {
-    const { logoSrc, name, amount, symbol, fiatPrice, className, ...otherProps } = props;
+    const { logoSrc, name, amount, symbol, fiatPrice, className, hideValue, ...otherProps } = props;
 
     const { copy } = useGukModulesContext();
 
-    const fiatAmount = Number(amount) * Number(fiatPrice);
-
-    const formattedAmount = formatterUtils.formatNumber(amount, {
-        format: NumberFormat.TOKEN_AMOUNT_SHORT,
-        fallback: '',
-    });
-
-    const formattedPrice = formatterUtils.formatNumber(fiatAmount, {
+    const fiatValue = Number(amount) * Number(fiatPrice);
+    const formattedValue = formatterUtils.formatNumber(fiatValue, {
         format: NumberFormat.FIAT_TOTAL_SHORT,
         fallback: copy.assetDataListItemStructure.unknown,
     });
 
+    const formattedAmount = formatterUtils.formatNumber(amount, { format: NumberFormat.TOKEN_AMOUNT_SHORT });
+    const parsedAmount = `${formattedAmount!} ${symbol}`;
+
     return (
         <DataList.Item
             className={classNames('flex items-center justify-between gap-x-3 py-3 md:py-5', className)}
@@ -54,11 +55,14 @@ export const AssetDataListItemStructure: React.FC<IAssetDataListItemStructurePro
             </div>
             <div className="flex min-w-0 gap-x-2 text-right">
                 <div className="flex min-w-0 flex-col gap-y-1">
-                    <span className="text-base leading-tight text-neutral-800 md:text-lg">{formattedPrice}</span>
-                    <div className="flex items-center gap-1">
-                        <p className="text-sm leading-tight text-neutral-500 md:text-base">{formattedAmount}</p>
-                        <p className="truncate text-sm leading-tight text-neutral-500 md:text-base">{symbol}</p>
-                    </div>
+                    <span className="truncate text-base leading-tight text-neutral-800 md:text-lg">
+                        {hideValue ? parsedAmount : formattedValue}
+                    </span>
+                    {!hideValue && (
+                        <span className="truncate text-sm leading-tight text-neutral-500 md:text-base">
+                            {parsedAmount}
+                        </span>
+                    )}
                 </div>
             </div>
         </DataList.Item>