chore: merge branch 'dev' into feat/updated-pagination

DLC-link · Nov 7, 2024 · f02efdc · f02efdc
2 parents 26afa1a + 96b9e66
commit f02efdc
Show file tree

Hide file tree

Showing 13 changed files with 76 additions and 65 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/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
@@ -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
@@ -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/...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
@@ -39,10 +39,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>

diff --git 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'];
diff --git 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',
       },
     }),
   },