fix: optimize filter function calling

DLC-link · Jan 17, 2025 · 42e2f94 · 42e2f94
1 parent 00e5718
commit 42e2f94
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 30 deletions.
diff --git a/...nts/proof-of-reserve/components/merchant-table/components/merchant-details-table-item.tsx b/...nts/proof-of-reserve/components/merchant-table/components/merchant-details-table-item.tsx
@@ -4,7 +4,7 @@ import { CustomSkeleton } from '@components/custom-skeleton/custom-skeleton';
 import { DetailedEvent } from '@models/ethereum-models';
 import { truncateAddress, unshiftValue } from 'dlc-btc-lib/utilities';
 
-import { findEthereumNetworkByName, formatEvent } from '@shared/utils';
+import { findEthereumNetworkByName, formatEvent, formatToFourDecimals } from '@shared/utils';
 
 export function MerchantDetailsTableItem(merchantFocusTableItem: DetailedEvent): React.JSX.Element {
   if (!merchantFocusTableItem) return <CustomSkeleton height={'35px'} />;
@@ -16,10 +16,13 @@ export function MerchantDetailsTableItem(merchantFocusTableItem: DetailedEvent):
     isMint,
     chain: eventChain,
   } = formatEvent(merchantFocusTableItem);
-
   const ethereumNetwork = findEthereumNetworkByName(eventChain);
+
   const isMobile = useBreakpointValue({ base: true, md: false });
 
+  const formattedAmount = unshiftValue(iBTCAmount);
+  const displayAmount = formattedAmount !== 0 ? formatToFourDecimals(formattedAmount) : 'N/A';
+
   return (
     <HStack
       p={'10px'}
@@ -42,7 +45,7 @@ export function MerchantDetailsTableItem(merchantFocusTableItem: DetailedEvent):
           <HStack w={'30%'}>
             <Image src={'/images/logos/ibtc-logo.svg'} alt={'dlc BTC logo'} boxSize={'25px'} />
             <Text color={'white'} fontSize={'sm'} fontWeight={800}>
-              {unshiftValue(iBTCAmount)}
+              {displayAmount}
             </Text>
           </HStack>
           <HStack w={'30%'}>
@@ -69,13 +72,9 @@ export function MerchantDetailsTableItem(merchantFocusTableItem: DetailedEvent):
           <HStack w={'15%'}>
             <Image src={'/images/logos/ibtc-logo.svg'} alt={'dlc BTC logo'} boxSize={'25px'} />
             <Text color={'white'} fontSize={'sm'} fontWeight={800}>
-              {unshiftValue(iBTCAmount)}
+              {displayAmount}
             </Text>
           </HStack>
-          {/* add back the USD calculation later and adjus the width accordingly */}
-          {/* <Text w={'20%'} color={'white'} fontSize={'sm'}>
-        {inUSD}
-      </Text> */}
           <HStack w={'15%'}>
             <Text
               color={'accent.lightBlue.01'}

diff --git a/src/app/components/protocol-history-table/components/protocol-history-table-item.tsx b/src/app/components/protocol-history-table/components/protocol-history-table-item.tsx
@@ -2,9 +2,9 @@
 import { HStack, Image, Text, useBreakpointValue } from '@chakra-ui/react';
 import { CustomSkeleton } from '@components/custom-skeleton/custom-skeleton';
 import { DetailedEvent } from '@models/ethereum-models';
-import { truncateAddress, unshiftValue } from 'dlc-btc-lib/utilities';
+import { truncateAddress } from 'dlc-btc-lib/utilities';
 
-import { findEthereumNetworkByName, formatEvent, formatToFourDecimals } from '@shared/utils';
+import { findEthereumNetworkByName, formatEvent } from '@shared/utils';
 
 export function ProtocolHistoryTableItem(
   protocolHistoryTableItem: DetailedEvent
@@ -13,22 +13,17 @@ export function ProtocolHistoryTableItem(
 
   const {
     merchant,
-    iBTCAmount,
     txHash,
     date,
     isMint,
     chain: eventChain,
+    displayAmount,
   } = formatEvent(protocolHistoryTableItem);
 
   const ethereumNetwork = findEthereumNetworkByName(eventChain);
 
   const isMobile = useBreakpointValue({ base: true, md: false });
 
-  const displayAmount =
-    formatToFourDecimals(unshiftValue(iBTCAmount)) === 0
-      ? null
-      : formatToFourDecimals(unshiftValue(iBTCAmount));
-
   if (displayAmount === null) {
     return null;
   }

diff --git a/src/app/components/protocol-history-table/protocol-history-table.tsx b/src/app/components/protocol-history-table/protocol-history-table.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { Button, HStack, Skeleton, Spacer, VStack, useBreakpointValue } from '@chakra-ui/react';
 import { GenericTableBody } from '@components/generic-table/components/generic-table-body';
@@ -19,20 +19,22 @@ export function ProtocolHistoryTable({ items }: ProtocolHistoryTableProps): Reac
   const itemsPerPage = 10;
   const isMobile = useBreakpointValue({ base: true, md: false });
 
-  // Step 1: Filter out the rows with displayAmount == null (i.e., 0)
-  const filteredItems = items?.filter(item => {
-    const { iBTCAmount } = item;
-    const displayAmount =
-      formatToFourDecimals(unshiftValue(iBTCAmount)) === 0
-        ? null
-        : formatToFourDecimals(unshiftValue(iBTCAmount));
-    return displayAmount !== null; // Only keep items where displayAmount is not null
-  });
+  const filteredItems = useMemo(() => {
+    if (!items) return [];
+    return items
+      ?.map(item => {
+        const { iBTCAmount } = item;
+        const displayAmount = formatToFourDecimals(unshiftValue(iBTCAmount));
+        return {
+          ...item,
+          displayAmount: displayAmount === 0 ? null : displayAmount,
+        };
+      })
+      .filter(item => item.displayAmount !== null);
+  }, [items]);
 
-  // Step 2: Calculate total pages based on filtered items
   const totalPages = Math.ceil((filteredItems?.length || 0) / itemsPerPage);
 
-  // Step 3: Slice the filtered items for the current page
   const currentItems = filteredItems?.slice(
     (currentPage - 1) * itemsPerPage,
     currentPage * itemsPerPage

diff --git a/src/shared/models/ethereum-models.ts b/src/shared/models/ethereum-models.ts
@@ -39,4 +39,5 @@ export interface FormattedEvent {
   chain: string;
   isMint: boolean;
   isCCIP: boolean;
+  displayAmount: number | null;
 }
diff --git a/src/shared/utils.ts b/src/shared/utils.ts
@@ -1,6 +1,7 @@
 import { DetailedEvent, FormattedEvent } from '@models/ethereum-models';
 import Decimal from 'decimal.js';
 import { supportedEthereumNetworks } from 'dlc-btc-lib/constants';
+import { unshiftValue } from 'dlc-btc-lib/utilities';
 import { Chain } from 'viem';
 
 import { SUPPORTED_VIEM_CHAINS } from './constants/ethereum.constants';
@@ -38,8 +39,15 @@ export function findEthereumNetworkByName(ethereumNetworkName: string): Chain {
 export function formatEvent(event: DetailedEvent): FormattedEvent {
   const isMint = event.eventType === 'mint';
   const date = new Date(event.timestamp * 1000);
+
+  const iBTCAmount = isMint ? event.value : -event.value;
+
+  const displayAmount =
+    formatToFourDecimals(unshiftValue(iBTCAmount)) === 0
+      ? null
+      : formatToFourDecimals(unshiftValue(iBTCAmount));
   return {
-    iBTCAmount: isMint ? event.value : -event.value,
+    iBTCAmount,
     merchant: isMint ? event.to : event.from,
     txHash: event.txHash,
     date: date
@@ -48,6 +56,7 @@ export function formatEvent(event: DetailedEvent): FormattedEvent {
     isMint,
     chain: event.chain,
     isCCIP: event.isCCIP,
+    displayAmount,
   };
 }
 
@@ -65,7 +74,8 @@ export function parseAssetAmount(assetAmount: string): Decimal {
 }
 
 export function formatToFourDecimals(value: number): number {
-  const roundedValue = value < 0 ? -Math.abs(parseFloat(value.toFixed(4))) : parseFloat(value.toFixed(4));
+  const roundedValue =
+    value < 0 ? -Math.abs(parseFloat(value.toFixed(4))) : parseFloat(value.toFixed(4));
   return roundedValue;
 }