From 51a84b1a7677c8aa109e8fb318cec597f127d1da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3za=20Nagy?= <rozanagy88@gmail.com>
Date: Mon, 28 Oct 2024 15:05:26 +0100
Subject: [PATCH 1/2] 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..73cf67d9 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 Name</GenericTableHeaderText>
+            <GenericTableHeaderText w={'20%'}>Transaction</GenericTableHeaderText>
+            <GenericTableHeaderText w={'20%'}>Date</GenericTableHeaderText>
           </>
         )}
       </GenericTableHeader>

From 7f6b4262c72175860dc4922cc47bab62aaf64731 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3za=20Nagy?= <rozanagy88@gmail.com>
Date: Tue, 29 Oct 2024 09:50:44 +0100
Subject: [PATCH 2/2] fix: correct title

---
 .../protocol-history-table/protocol-history-table.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 73cf67d9..d7ea3638 100644
--- a/src/app/components/protocol-history-table/protocol-history-table.tsx
+++ b/src/app/components/protocol-history-table/protocol-history-table.tsx
@@ -25,7 +25,7 @@ export function ProtocolHistoryTable({ items }: ProtocolHistoryTableProps): Reac
           <>
             <GenericTableHeaderText w={'20%'}>Order Book</GenericTableHeaderText>
             <GenericTableHeaderText w={'20%'}>Merchant</GenericTableHeaderText>
-            <GenericTableHeaderText w={'20%'}>Chain Name</GenericTableHeaderText>
+            <GenericTableHeaderText w={'20%'}>Chain</GenericTableHeaderText>
             <GenericTableHeaderText w={'20%'}>Transaction</GenericTableHeaderText>
             <GenericTableHeaderText w={'20%'}>Date</GenericTableHeaderText>
           </>