chore: update props, calc, CHANGELOG

aragon · Jan 3, 2025 · e920dc9 · e920dc9
1 parent c106e0d
commit e920dc9
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- Update `TransactionDataListItem` to receive `amountUsd` for transaction price, remove calculation
+
 ## [1.0.61] - 2024-12-29
 
 ### Added

diff --git a/...tionDataListItem/transactionDataListItemStructure/transactionDataListItemStructure.api.ts b/...tionDataListItem/transactionDataListItemStructure/transactionDataListItemStructure.api.ts
@@ -27,9 +27,9 @@ export type ITransactionDataListItemProps = IDataListItemProps & {
      */
     tokenAmount?: number | string;
     /**
-     * The price of the token at the time of the transaction.
+     * The calculated price of the transaction in USD.
      */
-    tokenPrice?: number | string;
+    amountUsd?: number | string;
     /**
      * The type of transaction.
      * @default TransactionType.ACTION

diff --git a/...ataListItem/transactionDataListItemStructure/transactionDataListItemStructure.stories.tsx b/...ataListItem/transactionDataListItemStructure/transactionDataListItemStructure.stories.tsx
@@ -47,7 +47,7 @@ export const Failed: Story = {
         type: TransactionType.DEPOSIT,
         tokenSymbol: 'ETH',
         tokenAmount: 10,
-        tokenPrice: 100,
+        amountUsd: 100,
         date: 1613984914000,
     },
 };

diff --git a/...onDataListItem/transactionDataListItemStructure/transactionDataListItemStructure.test.tsx b/...onDataListItem/transactionDataListItemStructure/transactionDataListItemStructure.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import { DateFormat, NumberFormat, formatterUtils } from '../../../../../core';
+import { DateFormat, formatterUtils } from '../../../../../core';
 import * as useBlockExplorer from '../../../../hooks';
 import { TransactionDataListItemStructure } from './transactionDataListItemStructure';
 import {
@@ -51,14 +51,12 @@ describe('<TransactionDataListItem.Structure /> component', () => {
     });
 
     it('renders the formatted USD price of the transaction', () => {
-        const tokenPrice = 100;
+        const amountUsd = 100;
         const tokenAmount = 10;
         const type = TransactionType.DEPOSIT;
-        const usdPrice = formatterUtils.formatNumber(tokenPrice * tokenAmount, {
-            format: NumberFormat.FIAT_TOTAL_SHORT,
-        })!;
-        render(createTestComponent({ tokenPrice, tokenAmount, type }));
-        const formattedUsdEstimate = screen.getByText(usdPrice);
+
+        render(createTestComponent({ amountUsd, tokenAmount, type }));
+        const formattedUsdEstimate = screen.getByText(amountUsd);
         expect(formattedUsdEstimate).toBeInTheDocument();
     });
 

diff --git a/...sactionDataListItem/transactionDataListItemStructure/transactionDataListItemStructure.tsx b/...sactionDataListItem/transactionDataListItemStructure/transactionDataListItemStructure.tsx
@@ -39,7 +39,7 @@ export const TransactionDataListItemStructure: React.FC<ITransactionDataListItem
         chainId,
         tokenSymbol,
         tokenAmount,
-        tokenPrice,
+        amountUsd,
         type = TransactionType.ACTION,
         status = TransactionStatus.PENDING,
         date,
@@ -54,10 +54,10 @@ export const TransactionDataListItemStructure: React.FC<ITransactionDataListItem
     const processedHref = 'href' in otherProps && otherProps.href != null ? otherProps.href : blockExplorerHref;
 
     const formattedTokenValue = formatterUtils.formatNumber(tokenAmount, { format: NumberFormat.TOKEN_AMOUNT_SHORT });
-
-    const fiatValue = Number(tokenAmount ?? 0) * Number(tokenPrice ?? 0);
-    const formattedTokenPrice = formatterUtils.formatNumber(fiatValue, { format: NumberFormat.FIAT_TOTAL_SHORT });
-
+    const formattedTokenPrice = formatterUtils.formatNumber(amountUsd, {
+        format: NumberFormat.FIAT_TOTAL_SHORT,
+        fallback: '-',
+    });
     const formattedTokenAmount =
         type === TransactionType.ACTION || formattedTokenValue == null ? '-' : `${formattedTokenValue} ${tokenSymbol}`;