feat: adjust width of Merchant table and Protocol History table

DLC-link · Oct 28, 2024 · 51a84b1 · 51a84b1
1 parent 6a809ae
commit 51a84b1
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 60 deletions.
diff --git 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/...omponents/proof-of-reserve/components/merchant-table/components/merchant-table-header.tsx b/...omponents/proof-of-reserve/components/merchant-table/components/merchant-table-header.tsx
diff --git a/.../components/proof-of-reserve/components/merchant-table/components/merchant-table-item.tsx b/.../components/proof-of-reserve/components/merchant-table/components/merchant-table-item.tsx
@@ -38,26 +38,33 @@ 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>
           </HStack>
         </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
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
@@ -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
@@ -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
@@ -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
@@ -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>