feat: round and filter orderbook

DLC-link · Dec 2, 2024 · 00e5718 · 00e5718
1 parent 2a2c239
commit 00e5718
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 7 deletions.
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
@@ -4,11 +4,11 @@ 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 ProtocolHistoryTableItem(
   protocolHistoryTableItem: DetailedEvent
-): React.JSX.Element {
+): React.JSX.Element | null {
   if (!protocolHistoryTableItem) return <CustomSkeleton height={'35px'} />;
 
   const {
@@ -23,6 +23,16 @@ export function 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;
+  }
+
   return (
     <HStack
       p={'10px'}
@@ -40,7 +50,7 @@ export function ProtocolHistoryTableItem(
           <HStack w={'50%'}>
             <Image src={'/images/logos/ibtc-logo.svg'} alt={'iBTC Logo'} boxSize={'20px'} />
             <Text color={'white'} fontWeight={800}>
-              {unshiftValue(iBTCAmount)}
+              {displayAmount}
             </Text>
           </HStack>
           <HStack w={'50%'}>
@@ -62,7 +72,7 @@ export function ProtocolHistoryTableItem(
           <HStack w={'20%'}>
             <Image src={'/images/logos/ibtc-logo.svg'} alt={'iBTC Logo'} boxSize={'20px'} />
             <Text color={'white'} fontWeight={800}>
-              {unshiftValue(iBTCAmount)}
+              {displayAmount}
             </Text>
           </HStack>
           <HStack w={'20%'}>

diff --git a/src/app/components/protocol-history-table/protocol-history-table.tsx b/src/app/components/protocol-history-table/protocol-history-table.tsx
@@ -6,6 +6,9 @@ import { GenericTableHeader } from '@components/generic-table/components/generic
 import { GenericTableHeaderText } from '@components/generic-table/components/generic-table-header-text';
 import { GenericTableLayout } from '@components/generic-table/components/generic-table-layout';
 import { ProtocolHistoryTableItem } from '@components/protocol-history-table/components/protocol-history-table-item';
+import { unshiftValue } from 'dlc-btc-lib/utilities';
+
+import { formatToFourDecimals } from '@shared/utils';
 
 interface ProtocolHistoryTableProps {
   items?: any[];
@@ -16,9 +19,24 @@ export function ProtocolHistoryTable({ items }: ProtocolHistoryTableProps): Reac
   const itemsPerPage = 10;
   const isMobile = useBreakpointValue({ base: true, md: false });
 
-  const totalPages = Math.ceil((items?.length || 0) / itemsPerPage);
+  // 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
+  });
+
+  // Step 2: Calculate total pages based on filtered items
+  const totalPages = Math.ceil((filteredItems?.length || 0) / itemsPerPage);
 
-  const currentItems = items?.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+  // Step 3: Slice the filtered items for the current page
+  const currentItems = filteredItems?.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage
+  );
 
   const handlePageChange = (direction: number) => {
     setCurrentPage(prevPage => {

diff --git a/src/shared/utils.ts b/src/shared/utils.ts
@@ -65,7 +65,8 @@ export function parseAssetAmount(assetAmount: string): Decimal {
 }
 
 export function formatToFourDecimals(value: number): number {
-  return parseFloat(value.toFixed(4));
+  const roundedValue = value < 0 ? -Math.abs(parseFloat(value.toFixed(4))) : parseFloat(value.toFixed(4));
+  return roundedValue;
 }
 
 export const breakpoints = ['300px', '400px', '600px', '850px', '1280px', '1400px'];