feat: remove mint burn events related functions, replace them with ap…

src/app/components/generic-table/components/generic-table-header-text.tsx

@@ -8,7 +8,6 @@ interface GenericTableHeaderTextProps {
   fontSize?: string;
   fontWeight?: string;
   children: React.ReactNode;
-  pl?: string;
 }
 
 export function GenericTableHeaderText({
@@ -17,10 +16,9 @@ export function GenericTableHeaderText({
   fontSize = 'small',
   children,
   fontWeight = '600',
-  pl = '10px',
 }: GenericTableHeaderTextProps): React.JSX.Element {
   return (
-    <Text w={w} color={color} fontSize={fontSize} fontWeight={fontWeight} pl={pl}>
+    <Text w={w} color={color} fontSize={fontSize} fontWeight={fontWeight}>
       {children}
     </Text>
   );

src/app/components/generic-table/components/generic-table-header.tsx

@@ -5,5 +5,9 @@ interface GenericTableHeaderProps {
 }
 
 export function GenericTableHeader({ children }: GenericTableHeaderProps): React.JSX.Element {
-  return <HStack w={'100% '}>{children}</HStack>;
+  return (
+    <HStack w={'100%'} px={'10px'}>
+      {children}
+    </HStack>
+  );
 }

src/app/components/points/components/points-table/components/points-table-item.tsx

@@ -41,9 +41,11 @@ export function PointsTableItem(pointsTableItem: ProtocolRewards): React.JSX.Ele
           {`(${multiplier}x)`}
         </Text>
       </HStack>
-      <Text w={'20%'} color={'white'} fontSize={'sm'}>
-        {name}
-      </Text>
+      <HStack w={'25%'}>
+        <Text color={'white'} fontSize={'sm'}>
+          {name}
+        </Text>
+      </HStack>
     </HStack>
   );
 }

src/app/components/points/points.tsx

@@ -55,7 +55,7 @@ export function Points(): React.JSX.Element {
                 <HStack w={'100%'} pl={'25px'}>
                   <PointsStatsBoardAction
                     token={dlcBTC}
-                    totalSupply={userPoints?.protocols.find(p => p.name == 'Curve')?.points}
+                    totalSupply={userPoints?.useTotal}
                     tokenSuffix={'Use'}
                   />
                   <Divider

src/app/components/proof-of-reserve/components/merchant-details/merchant-details.tsx

@@ -3,16 +3,9 @@ import { MdArrowBack } from 'react-icons/md';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { Divider, HStack, Icon, Image, Link, Text } from '@chakra-ui/react';
-import { fetchMintBurnEvents } from '@functions/ethereum.functions';
-import { DetailedEvent } from '@models/ethereum-models';
-import { Merchant } from '@models/merchant';
 import { bitcoin, dlcBTC } from '@models/token';
-import { EthereumNetworkConfigurationContext } from '@providers/ethereum-network-configuration.provider';
 import { ProofOfReserveContext } from '@providers/proof-of-reserve-context-provider';
-import { useQuery } from '@tanstack/react-query';
-import { isEmpty } from 'ramda';
 
-import { MerchantDetailsTableItemProps } from '../merchant-table/components/merchant-details-table-item';
 import { MerchantDetailsTable } from '../merchant-table/merchant-details-table';
 import { TokenStatsBoardToken } from '../token-stats-board/components/token-stats-board-token';
 import { TokenStatsBoardTVL } from '../token-stats-board/components/token-stats-board-tvl';
@@ -21,59 +14,15 @@ import { MerchantDetailsLayout } from './components/merchant-details-layout';
 
 export function MerchantDetails(): React.JSX.Element {
   const { name } = useParams();
-  const { proofOfReserve, bitcoinPrice } = useContext(ProofOfReserveContext);
+  const { proofOfReserve, bitcoinPrice, merchantMintBurnEvents } =
+    useContext(ProofOfReserveContext);
   const navigate = useNavigate();
 
-  const [, merchantProofOfReserves] = proofOfReserve || [
-    undefined,
-    appConfiguration.merchants.map((merchant: Merchant) => {
-      return {
-        merchant,
-        dlcBTCAmount: undefined,
-      };
-    }),
-  ];
-  const selectedMerchant = merchantProofOfReserves.find(item => item.merchant.name === name);
-
-  const { ethereumNetworkConfiguration } = useContext(EthereumNetworkConfigurationContext);
-
-  const { data: mintBurnEvents } = useQuery({
-    queryKey: [`mintBurnEvents${name}`, ethereumNetworkConfiguration.dlcBTCContract.address],
-    queryFn: fetchMintBurnEventsHandler,
-  });
+  const selectedMerchant = proofOfReserve?.[1].find(item => item.merchant.name === name);
+  const mintBurnEvents = merchantMintBurnEvents?.find(item => item.name === name)?.mintBurnEvents;
 
   if (!name) return <Text>Error: No merchant name provided</Text>;
 
-  async function fetchMintBurnEventsHandler(): Promise<MerchantDetailsTableItemProps[]> {
-    if (!selectedMerchant || isEmpty(selectedMerchant?.merchant.addresses)) return [];
-    const detailedEvents: DetailedEvent[] = (
-      await Promise.all(
-        selectedMerchant.merchant.addresses.map(async address => {
-          return await fetchMintBurnEvents(
-            ethereumNetworkConfiguration.dlcBTCContract,
-            ethereumNetworkConfiguration.httpURL,
-            address
-          );
-        })
-      )
-    ).flat();
-
-    return detailedEvents.map((event, index) => {
-      return {
-        id: index,
-        orderBook: selectedMerchant.merchant.addresses
-          .map(address => address.toLowerCase())
-          .includes(event.from.toLowerCase())
-          ? 'REDEEM'
-          : 'MINT',
-        amount: event.value,
-        inUSD: 'TODO', //TODO: calculate usd value at the time of mint
-        txHash: event.txHash,
-        date: new Date(event.timestamp * 1000).toDateString(),
-      };
-    });
-  }
-
   return (
     <MerchantDetailsLayout>
       <Text

src/app/components/proof-of-reserve/components/merchant-table/components/merchant-details-table-item.tsx

@@ -1,82 +1,74 @@
 /* eslint-disable */
-import { useContext } from 'react';
-
 import { HStack, Image, Text } from '@chakra-ui/react';
 import { CustomSkeleton } from '@components/custom-skeleton/custom-skeleton';
-import { EthereumNetworkConfigurationContext } from '@providers/ethereum-network-configuration.provider';
+import { DetailedEvent } from '@models/ethereum-models';
 import { truncateAddress, unshiftValue } from 'dlc-btc-lib/utilities';
 
-export interface MerchantDetailsTableItemProps {
-  id: number;
-  orderBook: string;
-  amount: number;
-  inUSD: string;
-  txHash: string;
-  date: string;
-}
+import { findEthereumNetworkByName, formatEvent } from '@shared/utils';
 
-export function MerchantDetailsTableItem(
-  merchantFocusTableItem: MerchantDetailsTableItemProps
-): React.JSX.Element {
+export function MerchantDetailsTableItem(merchantFocusTableItem: DetailedEvent): React.JSX.Element {
   if (!merchantFocusTableItem) return <CustomSkeleton height={'35px'} />;
 
-  const { orderBook, amount, txHash, date } = merchantFocusTableItem;
-
-  const { ethereumNetworkConfiguration } = useContext(EthereumNetworkConfigurationContext);
+  const {
+    dlcBTCAmount,
+    txHash,
+    date,
+    isMint,
+    chain: eventChain,
+  } = formatEvent(merchantFocusTableItem);
 
-  const renderAmount = () => {
-    const unshiftedValue = unshiftValue(amount);
-    return orderBook === 'REDEEM' ? -unshiftedValue : unshiftedValue;
-  };
+  const ethereumNetwork = findEthereumNetworkByName(eventChain);
 
   return (
     <HStack
       p={'10px'}
       w={'100%'}
       h={'50px'}
-      bg={orderBook === 'MINT' ? 'table.background.green' : 'table.background.red'}
+      bg={isMint ? 'table.background.green' : 'table.background.red'}
       blendMode={'screen'}
       border={'1px solid'}
       borderRadius={'md'}
       borderColor={'border.white.01'}
       justifyContent={'space-between'}
     >
-      <Text
-        w={'18%'}
-        color={orderBook === 'MINT' ? 'green.mint' : 'red.redeem'}
-        fontSize={'sm'}
-        fontWeight={700}
-      >
-        {orderBook}
-      </Text>
-      <HStack w={'18%'}>
+      <HStack w={'15%'}>
+        <Text color={isMint ? 'green.mint' : 'red.redeem'} fontSize={'sm'} fontWeight={700}>
+          {isMint ? 'MINT' : 'REDEEM'}
+        </Text>
+      </HStack>
+      <HStack w={'15%'}>
         <Image src={'/images/logos/dlc-btc-logo.svg'} alt={'dlc BTC logo'} boxSize={'25px'} />
         <Text color={'white'} fontSize={'sm'} fontWeight={800}>
-          {renderAmount()}
+          {unshiftValue(dlcBTCAmount)}
         </Text>
       </HStack>
       {/* add back the USD calculation later and adjus the width accordingly */}
       {/* <Text w={'20%'} color={'white'} fontSize={'sm'}>
         {inUSD}
       </Text> */}
-      <Text
-        w={'15%'}
-        color={'accent.lightBlue.01'}
-        fontSize={'sm'}
-        onClick={() =>
-          window.open(
-            `${ethereumNetworkConfiguration.ethereumExplorerAPIURL}/tx/${txHash}`,
-            '_blank'
-          )
-        }
-        cursor={'pointer'}
-        textDecoration={'underline'}
-      >
-        {truncateAddress(txHash)}
-      </Text>
-      <Text w={'25%'} color={'white'} fontSize={'sm'}>
-        {date}
-      </Text>
+      <HStack w={'15%'}>
+        <Text
+          color={'accent.lightBlue.01'}
+          fontSize={'sm'}
+          onClick={() =>
+            window.open(`${ethereumNetwork.blockExplorers?.default.url}/tx/${txHash}`, '_blank')
+          }
+          cursor={'pointer'}
+          textDecoration={'underline'}
+        >
+          {truncateAddress(txHash)}
+        </Text>
+      </HStack>
+      <HStack w={'15%'}>
+        <Text color={'white'} fontSize={'sm'}>
+          {ethereumNetwork.name}
+        </Text>
+      </HStack>
+      <HStack w={'15%'}>
+        <Text color={'white'} fontSize={'sm'}>
+          {date}
+        </Text>
+      </HStack>
     </HStack>
   );
 }

src/app/components/proof-of-reserve/components/merchant-table/merchant-details-table.tsx

@@ -16,11 +16,12 @@ export function MerchantDetailsTable({ items }: MerchantDetailsTableProps): Reac
   return (
     <GenericTableLayout height={`${dynamicHeight}px`}>
       <GenericTableHeader>
-        <GenericTableHeaderText w={'25%'}>Order Book</GenericTableHeaderText>
-        <GenericTableHeaderText w={'25%'}>Amount</GenericTableHeaderText>
+        <GenericTableHeaderText w={'15%'}>Order Book</GenericTableHeaderText>
+        <GenericTableHeaderText w={'15%'}>Amount</GenericTableHeaderText>
         {/* <GenericTableHeaderText>in USD</GenericTableHeaderText> */}
-        <GenericTableHeaderText w={'25%'}>Transaction</GenericTableHeaderText>
-        <GenericTableHeaderText>Date</GenericTableHeaderText>
+        <GenericTableHeaderText w={'15%'}>Transaction</GenericTableHeaderText>
+        <GenericTableHeaderText w={'15%'}>Chain</GenericTableHeaderText>
+        <GenericTableHeaderText w={'15%'}>Date</GenericTableHeaderText>
       </GenericTableHeader>
       <Skeleton isLoaded={items !== undefined} height={'50px'} w={'100%'}>
         {items?.length === 0 && (

src/app/components/proof-of-reserve/proof-of-reserve.tsx

@@ -1,16 +1,10 @@
 import { useContext } from 'react';
 
 import { Divider, HStack, Text } from '@chakra-ui/react';
-import { ProtocolHistoryTableItemProps } from '@components/protocol-history-table/components/protocol-history-table-item';
 import { ProtocolHistoryTable } from '@components/protocol-history-table/protocol-history-table';
-import { fetchMintBurnEvents } from '@functions/ethereum.functions';
 import { Merchant } from '@models/merchant';
 import { bitcoin, dlcBTC } from '@models/token';
-import { EthereumNetworkConfigurationContext } from '@providers/ethereum-network-configuration.provider';
 import { ProofOfReserveContext } from '@providers/proof-of-reserve-context-provider';
-import { useQuery } from '@tanstack/react-query';
-
-import { BURN_ADDRESS } from '@shared/constants/ethereum.constants';
 
 import { MerchantTableHeader } from './components/merchant-table/components/merchant-table-header';
 import { MerchantTableItem } from './components/merchant-table/components/merchant-table-item';
@@ -21,7 +15,8 @@ import { TokenStatsBoardTVL } from './components/token-stats-board/components/to
 import { TokenStatsBoardLayout } from './components/token-stats-board/token-stats-board.layout';
 
 export function ProofOfReserve(): React.JSX.Element {
-  const { proofOfReserve, totalSupply, bitcoinPrice } = useContext(ProofOfReserveContext);
+  const { proofOfReserve, totalSupply, bitcoinPrice, allMintBurnEvents } =
+    useContext(ProofOfReserveContext);
 
   const [proofOfReserveSum, merchantProofOfReserves] = proofOfReserve || [
     undefined,
@@ -32,31 +27,6 @@ export function ProofOfReserve(): React.JSX.Element {
       };
     }),
   ];
-  const { ethereumNetworkConfiguration } = useContext(EthereumNetworkConfigurationContext);
-
-  const { data: allMintBurnEvents } = useQuery({
-    queryKey: ['allMintBurnEvents', ethereumNetworkConfiguration.dlcBTCContract.address],
-    queryFn: fetchMintBurnEventsHandler,
-  });
-
-  async function fetchMintBurnEventsHandler(): Promise<ProtocolHistoryTableItemProps[]> {
-    const detailedEvents = await fetchMintBurnEvents(
-      ethereumNetworkConfiguration.dlcBTCContract,
-      ethereumNetworkConfiguration.httpURL,
-      undefined,
-      10
-    );
-    return detailedEvents.map((event, index) => {
-      const isMint = event.from.toLowerCase() === BURN_ADDRESS.toLowerCase();
-      return {
-        id: index,
-        dlcBTCAmount: isMint ? event.value : event.value * -1,
-        merchant: isMint ? event.to : event.from,
-        txHash: event.txHash,
-        date: new Date(event.timestamp * 1000).toDateString(),
-      };
-    });
-  }
 
   return (
     <ProofOfReserveLayout>