From b616a01d72c6c0e530b7f364474d7ce7c7bcf23e Mon Sep 17 00:00:00 2001
From: Roza Eisenberg <45665959+rozanagy@users.noreply.github.com>
Date: Wed, 30 Oct 2024 14:48:51 +0100
Subject: [PATCH 1/3] Feat/add chain name to orderbook (#203)

* feat: adjust width of Merchant table and Protocol History table
---
 .../components/generic-table-layout.tsx       |  4 ++-
 .../components/merchant-table-header.tsx      | 20 -----------
 .../components/merchant-table-item.tsx        | 17 +++++++---
 .../merchant-table/merchant-table-layout.tsx  | 16 ---------
 .../merchant-table/merchant-table.tsx         | 34 +++++++++++++++++++
 .../proof-of-reserve/proof-of-reserve.tsx     | 11 ++----
 .../protocol-history-table-item.tsx           | 13 ++++---
 .../protocol-history-table.tsx                | 11 +++---
 8 files changed, 66 insertions(+), 60 deletions(-)
 delete mode 100644 src/app/components/proof-of-reserve/components/merchant-table/components/merchant-table-header.tsx
 delete mode 100644 src/app/components/proof-of-reserve/components/merchant-table/merchant-table-layout.tsx
 create mode 100644 src/app/components/proof-of-reserve/components/merchant-table/merchant-table.tsx

diff --git a/src/app/components/generic-table/components/generic-table-layout.tsx b/src/app/components/generic-table/components/generic-table-layout.tsx
index 50afce0a..dcb8a322 100644
--- a/src/app/components/generic-table/components/generic-table-layout.tsx
+++ b/src/app/components/generic-table/components/generic-table-layout.tsx
@@ -9,6 +9,7 @@ interface GenericTableLayoutProps {
   bg?: string;
   children: React.ReactNode;
   isMobile?: boolean;
+  isMerchant?: boolean;
 }
 
 export function GenericTableLayout({
@@ -20,13 +21,14 @@ export function GenericTableLayout({
   children,
   bg = 'background.container.01',
   isMobile = false,
+  isMerchant = false,
 }: GenericTableLayoutProps): React.JSX.Element {
   return (
     <VStack
       w={isMobile ? '100%' : width}
       h={height}
       minH={'100px'}
-      padding={isMobile ? '0px' : padding}
+      padding={isMobile ? (isMerchant ? '10px' : '0px') : padding}
       alignItems={alignItems}
       borderRadius={borderRadius}
       bg={bg}
diff --git a/src/app/components/proof-of-reserve/components/merchant-table/components/merchant-table-header.tsx b/src/app/components/proof-of-reserve/components/merchant-table/components/merchant-table-header.tsx
deleted file mode 100644
index b2102ed1..00000000
--- a/src/app/components/proof-of-reserve/components/merchant-table/components/merchant-table-header.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { HStack, Text, useBreakpointValue } from '@chakra-ui/react';
-
-export function MerchantTableHeader(): React.JSX.Element {
-  const isMobile = useBreakpointValue({ base: true, md: false });
-  return (
-    <HStack pt={'15px'} w={'100%'} justifyContent={'space-between'}>
-      <HStack w={isMobile ? '50%' : '250px'}>
-        <Text color={'white'} fontSize={'lg'} fontWeight={800}>
-          Merchant
-        </Text>
-      </HStack>
-      <HStack w={isMobile ? '50%' : '150px'}>
-        <Text color={'white'} fontSize={'lg'}>
-          dlcBTC Minted
-        </Text>
-      </HStack>
-      {!isMobile && <HStack w={'150px'} />}
-    </HStack>
-  );
-}
diff --git a/src/app/components/proof-of-reserve/components/merchant-table/components/merchant-table-item.tsx b/src/app/components/proof-of-reserve/components/merchant-table/components/merchant-table-item.tsx
index 4fc2183b..efc596b8 100644
--- a/src/app/components/proof-of-reserve/components/merchant-table/components/merchant-table-item.tsx
+++ b/src/app/components/proof-of-reserve/components/merchant-table/components/merchant-table-item.tsx
@@ -38,13 +38,20 @@ export function MerchantTableItem({
         gap={isMobile ? '10px' : '0px'}
       >
         <HStack>
-          <HStack w={isMobile ? 'auto' : '280px'}>
+          <HStack w={isMobile ? 'auto' : 'auto'}>
             <Image src={merchant.logo} alt={merchant.name} width={'150px'} />
           </HStack>
-          <HStack w={'150px'} h={'35px'} alignItems={'center'}>
+          <HStack w={'140px'} h={'35px'} alignItems={'center'}>
             <Image src={'/images/logos/dlc-btc-logo.svg'} alt={'dlcBTC Logo'} boxSize={'25px'} />
             <Skeleton isLoaded={dlcBTCAmount !== undefined} h={'auto'} w={'150px'}>
-              <Text color={'white'} fontSize={'2xl'} fontWeight={800} h={'35px'}>
+              <Text
+                color={'white'}
+                fontSize={'xl'}
+                fontWeight={800}
+                h={'35px'}
+                display={'flex'}
+                alignItems={'center'}
+              >
                 {Number(dlcBTCAmount?.toFixed(4))}
               </Text>
             </Skeleton>
@@ -52,12 +59,12 @@ export function MerchantTableItem({
         </HStack>
 
         <Button
-          w={isMobile ? '100%' : '150px'}
+          w={isMobile ? '100%' : '100px'}
           variant={'merchantTableItem'}
           onClick={() => navigate(`/merchant-details/${merchant.name}`)}
         >
           <Text color={'white.01'} fontSize={'xs'}>
-            Mint/Withdraw History
+            History
           </Text>
         </Button>
       </Stack>
diff --git a/src/app/components/proof-of-reserve/components/merchant-table/merchant-table-layout.tsx b/src/app/components/proof-of-reserve/components/merchant-table/merchant-table-layout.tsx
deleted file mode 100644
index 24bf626b..00000000
--- a/src/app/components/proof-of-reserve/components/merchant-table/merchant-table-layout.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { VStack, useBreakpointValue } from '@chakra-ui/react';
-import { HasChildren } from '@models/has-children';
-
-export function MerchantTableLayout({ children }: HasChildren): React.JSX.Element {
-  const isMobile = useBreakpointValue({ base: true, md: false });
-  return (
-    <VStack
-      w={isMobile ? '100%' : '50%'}
-      h={isMobile ? 'auto' : '275px'}
-      alignItems={'flex-start'}
-      borderRadius={'md'}
-    >
-      {children}
-    </VStack>
-  );
-}
diff --git a/src/app/components/proof-of-reserve/components/merchant-table/merchant-table.tsx b/src/app/components/proof-of-reserve/components/merchant-table/merchant-table.tsx
new file mode 100644
index 00000000..8f255759
--- /dev/null
+++ b/src/app/components/proof-of-reserve/components/merchant-table/merchant-table.tsx
@@ -0,0 +1,34 @@
+import { useBreakpointValue } from '@chakra-ui/react';
+import { GenericTableBody } from '@components/generic-table/components/generic-table-body';
+import { GenericTableHeader } from '@components/generic-table/components/generic-table-header';
+import { GenericTableHeaderText } from '@components/generic-table/components/generic-table-header-text';
+import { GenericTableLayout } from '@components/generic-table/components/generic-table-layout';
+
+import { MerchantTableItem } from './components/merchant-table-item';
+
+interface MerchantTableProps {
+  items?: any[];
+}
+
+export function MerchantTable({ items }: MerchantTableProps): React.JSX.Element {
+  const dynamicHeight = items ? items.length * 75 + 20 : 20;
+  const isMobile = useBreakpointValue({ base: true, md: false });
+  return (
+    <GenericTableLayout
+      height={isMobile ? 'auto' : `${dynamicHeight}px`}
+      width={isMobile ? '100%' : '30%'}
+      padding={isMobile ? '10px' : '15px'}
+      isMobile={isMobile}
+      isMerchant={true}
+    >
+      <GenericTableHeader>
+        <GenericTableHeaderText w={'50%'}>Merchant</GenericTableHeaderText>
+        <GenericTableHeaderText w={'100%'}>dlcBTC Minted</GenericTableHeaderText>
+      </GenericTableHeader>
+
+      <GenericTableBody>
+        {items?.map(item => <MerchantTableItem key={item.merchant.name} {...item} />)}
+      </GenericTableBody>
+    </GenericTableLayout>
+  );
+}
diff --git a/src/app/components/proof-of-reserve/proof-of-reserve.tsx b/src/app/components/proof-of-reserve/proof-of-reserve.tsx
index 1217e6da..3a1f2a0b 100644
--- a/src/app/components/proof-of-reserve/proof-of-reserve.tsx
+++ b/src/app/components/proof-of-reserve/proof-of-reserve.tsx
@@ -8,9 +8,7 @@ import { ProofOfReserveContext } from '@providers/proof-of-reserve-context-provi
 
 import { titleTextSize } from '@shared/utils';
 
-import { MerchantTableHeader } from './components/merchant-table/components/merchant-table-header';
-import { MerchantTableItem } from './components/merchant-table/components/merchant-table-item';
-import { MerchantTableLayout } from './components/merchant-table/merchant-table-layout';
+import { MerchantTable } from './components/merchant-table/merchant-table';
 import { ProofOfReserveLayout } from './components/proof-of-reserve-layout';
 import { TokenStatsBoardToken } from './components/token-stats-board/components/token-stats-board-token';
 import { TokenStatsBoardTVL } from './components/token-stats-board/components/token-stats-board-tvl';
@@ -68,12 +66,7 @@ export function ProofOfReserve(): React.JSX.Element {
         direction={isMobile ? 'column' : 'row'}
         gap={isMobile ? '40px' : '20px'}
       >
-        <MerchantTableLayout>
-          <MerchantTableHeader />
-          {merchantProofOfReserves.map(item => (
-            <MerchantTableItem key={item.merchant.name} {...item} />
-          ))}
-        </MerchantTableLayout>
+        <MerchantTable items={merchantProofOfReserves}></MerchantTable>
         <ProtocolHistoryTable items={allMintBurnEvents} />
       </Stack>
     </ProofOfReserveLayout>
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
index 4ff6ead4..3aa057fd 100644
--- 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
@@ -60,18 +60,23 @@ export function ProtocolHistoryTableItem(
         </>
       ) : (
         <>
-          <HStack w={'25%'}>
+          <HStack w={'20%'}>
             <Image src={'/images/logos/dlc-btc-logo.svg'} alt={'dlcBTC Logo'} boxSize={'20px'} />
             <Text color={'white'} fontWeight={800}>
               {unshiftValue(dlcBTCAmount)}
             </Text>
           </HStack>
-          <HStack w={'25%'}>
+          <HStack w={'20%'}>
             <Text color={'white'} fontSize={'sm'} fontWeight={800}>
               {truncateAddress(merchant)}
             </Text>
           </HStack>
-          <HStack w={'25%'}>
+          <HStack w={'20%'}>
+            <Text color={'white'} fontSize={'sm'} fontWeight={800}>
+              {ethereumNetwork.name}
+            </Text>
+          </HStack>
+          <HStack w={'20%'}>
             <Text
               color={'accent.lightBlue.01'}
               fontSize={'sm'}
@@ -84,7 +89,7 @@ export function ProtocolHistoryTableItem(
               {truncateAddress(txHash)}
             </Text>
           </HStack>
-          <HStack w={'25%'}>
+          <HStack w={'20%'}>
             <Text color={'white'} fontSize={'sm'}>
               {date}
             </Text>
diff --git a/src/app/components/protocol-history-table/protocol-history-table.tsx b/src/app/components/protocol-history-table/protocol-history-table.tsx
index 9c098330..d7ea3638 100644
--- a/src/app/components/protocol-history-table/protocol-history-table.tsx
+++ b/src/app/components/protocol-history-table/protocol-history-table.tsx
@@ -14,7 +14,7 @@ export function ProtocolHistoryTable({ items }: ProtocolHistoryTableProps): Reac
   const isMobile = useBreakpointValue({ base: true, md: false });
 
   return (
-    <GenericTableLayout height={`${dynamicHeight}px`} width={'50%'} isMobile={isMobile}>
+    <GenericTableLayout height={`${dynamicHeight}px`} width={'70%'} isMobile={isMobile}>
       <GenericTableHeader>
         {isMobile ? (
           <>
@@ -23,10 +23,11 @@ export function ProtocolHistoryTable({ items }: ProtocolHistoryTableProps): Reac
           </>
         ) : (
           <>
-            <GenericTableHeaderText w={'25%'}>Order Book</GenericTableHeaderText>
-            <GenericTableHeaderText w={'25%'}>Merchant</GenericTableHeaderText>
-            <GenericTableHeaderText w={'25%'}>Transaction</GenericTableHeaderText>
-            <GenericTableHeaderText w={'25%'}>Date</GenericTableHeaderText>
+            <GenericTableHeaderText w={'20%'}>Order Book</GenericTableHeaderText>
+            <GenericTableHeaderText w={'20%'}>Merchant</GenericTableHeaderText>
+            <GenericTableHeaderText w={'20%'}>Chain</GenericTableHeaderText>
+            <GenericTableHeaderText w={'20%'}>Transaction</GenericTableHeaderText>
+            <GenericTableHeaderText w={'20%'}>Date</GenericTableHeaderText>
           </>
         )}
       </GenericTableHeader>

From c58c46d8899d13360415041a3e6760fef9ca2eaa Mon Sep 17 00:00:00 2001
From: Roza Eisenberg <45665959+rozanagy@users.noreply.github.com>
Date: Wed, 30 Oct 2024 14:49:20 +0100
Subject: [PATCH 2/3] fix: adjust position and set min height (#204)

---
 src/styles/app-theme.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/styles/app-theme.ts b/src/styles/app-theme.ts
index fd9e21aa..db734c9d 100644
--- a/src/styles/app-theme.ts
+++ b/src/styles/app-theme.ts
@@ -37,8 +37,9 @@ export const appTheme = extendTheme({
         bg: 'background.website.01',
         bgImage: `url(${bgImage})`,
         width: '100%',
-        bgPosition: 'center 130px',
+        bgPosition: 'center bottom',
         bgRepeat: 'no-repeat',
+        minHeight: '100vh',
       },
     }),
   },

From 96b9e6684130b3e9bddecbc48c275f1150d98f86 Mon Sep 17 00:00:00 2001
From: Roza Eisenberg <45665959+rozanagy@users.noreply.github.com>
Date: Tue, 5 Nov 2024 11:01:25 +0100
Subject: [PATCH 3/3] fix: adjust height of points box and fix decimal format
 (#206)

* fix: adjust height of points box and fix decimal format
---
 .../components/points-table/components/points-table-item.tsx  | 4 ++--
 .../points/components/points-table/points-table.tsx           | 2 +-
 src/app/components/points/points.tsx                          | 4 ++--
 src/shared/utils.ts                                           | 4 ++++
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/app/components/points/components/points-table/components/points-table-item.tsx b/src/app/components/points/components/points-table/components/points-table-item.tsx
index da067c3d..e6a05407 100644
--- a/src/app/components/points/components/points-table/components/points-table-item.tsx
+++ b/src/app/components/points/components/points-table/components/points-table-item.tsx
@@ -3,7 +3,7 @@ import { CustomSkeleton } from '@components/custom-skeleton/custom-skeleton';
 import { ProtocolRewards } from '@models/points.models';
 import { unshiftValue } from 'dlc-btc-lib/utilities';
 
-import { formatNumber } from '@shared/utils';
+import { formatNumber, formatToFourDecimals } from '@shared/utils';
 
 export function PointsTableItem(pointsTableItem: ProtocolRewards): React.JSX.Element {
   const isMobile = useBreakpointValue({ base: true, md: false });
@@ -49,7 +49,7 @@ export function PointsTableItem(pointsTableItem: ProtocolRewards): React.JSX.Ele
           <HStack w={'25%'}>
             <Image src={'/images/logos/dlc-btc-logo.svg'} alt={'dlc BTC logo'} boxSize={'25px'} />
             <Text color={'white'} fontSize={'sm'} fontWeight={800}>
-              {unshiftValue(currentTokens)}
+              {formatToFourDecimals(unshiftValue(currentTokens))}
             </Text>
           </HStack>
           <HStack w={'50%'}>
diff --git a/src/app/components/points/components/points-table/points-table.tsx b/src/app/components/points/components/points-table/points-table.tsx
index f6aa7a2c..e26a52da 100644
--- a/src/app/components/points/components/points-table/points-table.tsx
+++ b/src/app/components/points/components/points-table/points-table.tsx
@@ -11,7 +11,7 @@ interface PointsTableProps {
 }
 
 export function PointsTable({ items }: PointsTableProps): React.JSX.Element {
-  const dynamicHeight = items ? items.length * 59 + 20 : 20;
+  const dynamicHeight = items ? items.length * 59 + 50 : 20;
   const isMobile = useBreakpointValue({ base: true, md: false });
 
   return (
diff --git a/src/app/components/points/points.tsx b/src/app/components/points/points.tsx
index dacd3040..30ada3e0 100644
--- a/src/app/components/points/points.tsx
+++ b/src/app/components/points/points.tsx
@@ -70,7 +70,7 @@ export function Points(): React.JSX.Element {
           <TokenStatsBoardLayout>
             <Stack
               w={'100%'}
-              alignItems={'flex-start'}
+              alignItems={'center'}
               direction={isMobile ? 'column' : 'row'}
               p={isMobile ? '15px' : '0px'}
               gap={isMobile ? '10px' : '0px'}
@@ -103,7 +103,7 @@ export function Points(): React.JSX.Element {
               <Divider
                 orientation={isMobile ? 'horizontal' : 'vertical'}
                 px={isMobile ? '0px' : '5px'}
-                height={isMobile ? '1px' : '300px'}
+                height={isMobile ? '1px' : '320px'}
                 variant={'thick'}
               />
               <PointsTable items={userPoints?.protocols} />
diff --git a/src/shared/utils.ts b/src/shared/utils.ts
index bdf6bdc2..53f98c03 100644
--- a/src/shared/utils.ts
+++ b/src/shared/utils.ts
@@ -51,5 +51,9 @@ export function formatEvent(event: DetailedEvent): FormattedEvent {
   };
 }
 
+export function formatToFourDecimals(value: number): number {
+  return parseFloat(value.toFixed(4));
+}
+
 export const breakpoints = ['300px', '400px', '600px', '850px', '1280px', '1400px'];
 export const titleTextSize = ['2xl', '2xl', '4xl', '6xl'];