feat: Add hideValue flag to TransactionDataListItem (#583)

Signed-off-by: Milos Dzepina <milos@aragon.org>

Author: milosh86

.changeset/nine-moles-start.md

@@ -0,0 +1,5 @@
+---
+'@aragon/gov-ui-kit': minor
+---
+
+Add `hideValue` flag to `TransactionDataListItem` to hide fiat value

src/modules/components/transaction/transactionDataListItem/transactionDataListItemStructure/transactionDataListItemStructure.api.ts

@@ -30,6 +30,10 @@ export type ITransactionDataListItemProps = IDataListItemProps & {
      * The price of the transaction in USD.
      */
     amountUsd?: number | string;
+    /**
+     *  Whether to hide the value of the transaction (USD price).
+     */
+    hideValue?: boolean;
     /**
      * The type of transaction.
      * @default TransactionType.ACTION

src/modules/components/transaction/transactionDataListItem/transactionDataListItemStructure/transactionDataListItemStructure.stories.tsx

@@ -23,7 +23,15 @@ type Story = StoryObj<typeof TransactionDataListItemStructure>;
 /**
  * Default usage example of the TransactionDataList module component.
  */
-export const Default: Story = {};
+export const Deposit: Story = {
+    args: {
+        status: TransactionStatus.SUCCESS,
+        type: TransactionType.DEPOSIT,
+        tokenAmount: 10,
+        tokenSymbol: 'ETH',
+        date: 1613984914000,
+    },
+};
 
 /**
  * Example of the TransactionDataList component with withdraw transaction.
@@ -52,4 +60,19 @@ export const Failed: Story = {
     },
 };
 
+/**
+ * Example of the TransactionDataList component without fiat price.
+ */
+export const HideValue: Story = {
+    args: {
+        status: TransactionStatus.SUCCESS,
+        type: TransactionType.DEPOSIT,
+        tokenSymbol: 'ETH',
+        tokenAmount: 10,
+        amountUsd: 100,
+        hideValue: true,
+        date: 1613984914000,
+    },
+};
+
 export default meta;

src/modules/components/transaction/transactionDataListItem/transactionDataListItemStructure/transactionDataListItemStructure.test.tsx

@@ -92,4 +92,13 @@ describe('<TransactionDataListItem.Structure /> component', () => {
         render(createTestComponent({ href }));
         expect(screen.getByRole('link')).toHaveAttribute('href', href);
     });
+
+    it('does not render the formatted USD price of the transaction when hideValue flag is set', () => {
+        const amountUsd = '123.21';
+        const tokenAmount = 10;
+        const type = TransactionType.DEPOSIT;
+        const usdPrice = formatterUtils.formatNumber(amountUsd, { format: NumberFormat.FIAT_TOTAL_SHORT })!;
+        render(createTestComponent({ amountUsd, tokenAmount, type, hideValue: true }));
+        expect(screen.queryByText(usdPrice)).not.toBeInTheDocument();
+    });
 });

src/modules/components/transaction/transactionDataListItem/transactionDataListItemStructure/transactionDataListItemStructure.tsx

@@ -40,6 +40,7 @@ export const TransactionDataListItemStructure: React.FC<ITransactionDataListItem
         tokenSymbol,
         tokenAmount,
         amountUsd,
+        hideValue,
         type = TransactionType.ACTION,
         status = TransactionStatus.PENDING,
         date,
@@ -81,7 +82,7 @@ export const TransactionDataListItemStructure: React.FC<ITransactionDataListItem
                     <Spinner className="transition" variant="neutral" responsiveSize={{ md: 'lg' }} />
                 </div>
             )}
-            <div className="flex w-full flex-col items-start gap-y-1 self-center">
+            <div className="flex w-full flex-col items-start gap-y-0.5 self-center md:gap-y-1">
                 <span className="leading-tight text-neutral-800 md:text-lg">{typeToHeading[type]}</span>
                 {date && (
                     <p className="text-sm leading-tight text-neutral-500 md:text-base">
@@ -90,9 +91,13 @@ export const TransactionDataListItemStructure: React.FC<ITransactionDataListItem
                 )}
             </div>
 
-            <div className="flex shrink-0 flex-col items-end gap-y-1 truncate">
+            <div className="flex h-full shrink-0 flex-col items-end gap-y-0.5 truncate md:gap-y-1">
                 <span className="leading-tight text-neutral-800 md:text-lg">{processedTokenAmount}</span>
-                <span className="text-sm leading-tight text-neutral-500 md:text-base">{formattedTransactionValue}</span>
+                {!hideValue && (
+                    <span className="text-sm leading-tight text-neutral-500 md:text-base">
+                        {formattedTransactionValue}
+                    </span>
+                )}
             </div>
         </DataList.Item>
     );