chore: merge remote-tracking branch 'origin' into feat/adjust-header-…

…to-mobile
DLC-link · Oct 3, 2024 · 4ced153 · 4ced153
2 parents 99b501a + 94215ad
commit 4ced153
Show file tree

Hide file tree

Showing 12 changed files with 304 additions and 105 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
@@ -21,7 +21,6 @@ export function GenericTableLayout({
   bg = 'background.container.01',
   isMobile = false,
 }: GenericTableLayoutProps): React.JSX.Element {
-  // const isMobile = useBreakpointValue({ base: true, md: false });
   return (
     <VStack
       w={isMobile ? '100%' : width}

diff --git a/src/app/components/proof-of-reserve/components/merchant-details/merchant-details.tsx b/src/app/components/proof-of-reserve/components/merchant-details/merchant-details.tsx
@@ -2,10 +2,21 @@ import { useContext } from 'react';
 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 {
+  Divider,
+  HStack,
+  Icon,
+  Image,
+  Link,
+  Stack,
+  Text,
+  useBreakpointValue,
+} from '@chakra-ui/react';
 import { bitcoin, dlcBTC } from '@models/token';
 import { ProofOfReserveContext } from '@providers/proof-of-reserve-context-provider';
 
+import { titleTextSize } from '@shared/utils';
+
 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';
@@ -20,6 +31,7 @@ export function MerchantDetails(): React.JSX.Element {
 
   const selectedMerchant = proofOfReserve?.[1].find(item => item.merchant.name === name);
   const mintBurnEvents = merchantMintBurnEvents?.find(item => item.name === name)?.mintBurnEvents;
+  const isMobile = useBreakpointValue({ base: true, md: false });
 
   if (!name) return <Text>Error: No merchant name provided</Text>;
 
@@ -28,10 +40,10 @@ export function MerchantDetails(): React.JSX.Element {
       <Text
         w={'100%'}
         color={'white'}
-        fontSize={'5xl'}
+        fontSize={titleTextSize}
         fontWeight={600}
         pt={'50px'}
-        lineHeight={'60px'}
+        lineHeight={isMobile ? '35px' : '60px'}
       >
         {`${name}`}
         <br />
@@ -51,23 +63,43 @@ export function MerchantDetails(): React.JSX.Element {
       </Link>
 
       <TokenStatsBoardLayout width={'100%'}>
-        <HStack w={'100%'} alignItems={'center'} justifyContent={'space-evenly'}>
+        <Stack
+          w={'100%'}
+          alignItems={isMobile ? 'flex-start' : 'center'}
+          direction={isMobile ? 'column' : 'row'}
+          gap={isMobile ? '20px' : '0px'}
+        >
           <Image
             src={selectedMerchant?.merchant.logo}
             alt={'Merchant logo'}
-            boxSize={'100px'}
-            mx={'30px'}
+            width={isMobile ? '150px' : '100px'}
+            mx={isMobile ? '0px' : '30px'}
+          />
+          <Divider
+            orientation={isMobile ? 'horizontal' : 'vertical'}
+            px={isMobile ? '0px' : '10px'}
+            height={isMobile ? '1px' : '75px'}
+            variant={'thick'}
           />
-          <Divider orientation={'vertical'} px={'10px'} height={'75px'} variant={'thick'} />
           <TokenStatsBoardTVL
             totalSupply={selectedMerchant?.dlcBTCAmount}
             bitcoinPrice={bitcoinPrice}
           />
-          <Divider orientation={'vertical'} px={'10px'} height={'75px'} variant={'thick'} />
+          <Divider
+            orientation={isMobile ? 'horizontal' : 'vertical'}
+            px={isMobile ? '0px' : '10px'}
+            height={isMobile ? '1px' : '75px'}
+            variant={'thick'}
+          />
           <TokenStatsBoardToken token={dlcBTC} totalSupply={selectedMerchant?.dlcBTCAmount} />
-          <Divider orientation={'vertical'} px={'10px'} height={'75px'} variant={'thick'} />
+          <Divider
+            orientation={isMobile ? 'horizontal' : 'vertical'}
+            px={isMobile ? '0px' : '10px'}
+            height={isMobile ? '1px' : '75px'}
+            variant={'thick'}
+          />
           <TokenStatsBoardToken token={bitcoin} totalSupply={selectedMerchant?.dlcBTCAmount} />
-        </HStack>
+        </Stack>
       </TokenStatsBoardLayout>
       <MerchantDetailsTable items={mintBurnEvents} />
     </MerchantDetailsLayout>

diff --git a/...nts/proof-of-reserve/components/merchant-table/components/merchant-details-table-item.tsx b/...nts/proof-of-reserve/components/merchant-table/components/merchant-details-table-item.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { HStack, Image, Text } from '@chakra-ui/react';
+import { HStack, Image, Text, useBreakpointValue } from '@chakra-ui/react';
 import { CustomSkeleton } from '@components/custom-skeleton/custom-skeleton';
 import { DetailedEvent } from '@models/ethereum-models';
 import { truncateAddress, unshiftValue } from 'dlc-btc-lib/utilities';
@@ -18,6 +18,7 @@ export function MerchantDetailsTableItem(merchantFocusTableItem: DetailedEvent):
   } = formatEvent(merchantFocusTableItem);
 
   const ethereumNetwork = findEthereumNetworkByName(eventChain);
+  const isMobile = useBreakpointValue({ base: true, md: false });
 
   return (
     <HStack
@@ -31,44 +32,75 @@ export function MerchantDetailsTableItem(merchantFocusTableItem: DetailedEvent):
       borderColor={'border.white.01'}
       justifyContent={'space-between'}
     >
-      <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}>
-          {unshiftValue(dlcBTCAmount)}
-        </Text>
-      </HStack>
-      {/* add back the USD calculation later and adjus the width accordingly */}
-      {/* <Text w={'20%'} color={'white'} fontSize={'sm'}>
+      {isMobile ? (
+        <>
+          <HStack w={'30%'}>
+            <Text color={isMint ? 'green.mint' : 'red.redeem'} fontSize={'sm'} fontWeight={700}>
+              {isMint ? 'MINT' : 'REDEEM'}
+            </Text>
+          </HStack>
+          <HStack w={'30%'}>
+            <Image src={'/images/logos/dlc-btc-logo.svg'} alt={'dlc BTC logo'} boxSize={'25px'} />
+            <Text color={'white'} fontSize={'sm'} fontWeight={800}>
+              {unshiftValue(dlcBTCAmount)}
+            </Text>
+          </HStack>
+          <HStack w={'30%'}>
+            <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={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}>
+              {unshiftValue(dlcBTCAmount)}
+            </Text>
+          </HStack>
+          {/* add back the USD calculation later and adjus the width accordingly */}
+          {/* <Text w={'20%'} color={'white'} fontSize={'sm'}>
         {inUSD}
       </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 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>
   );
 }
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
@@ -1,19 +1,20 @@
-import { HStack, Text } from '@chakra-ui/react';
+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={'250px'}>
+      <HStack w={isMobile ? '50%' : '250px'}>
         <Text color={'white'} fontSize={'lg'} fontWeight={800}>
           Merchant
         </Text>
       </HStack>
-      <HStack w={'150px'}>
+      <HStack w={isMobile ? '50%' : '150px'}>
         <Text color={'white'} fontSize={'lg'}>
           dlcBTC Minted
         </Text>
       </HStack>
-      <HStack w={'150px'} />
+      {!isMobile && <HStack w={'150px'} />}
     </HStack>
   );
 }
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
@@ -1,7 +1,17 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { Button, HStack, Image, Skeleton, Text } from '@chakra-ui/react';
+import {
+  Button,
+  Divider,
+  HStack,
+  Image,
+  Skeleton,
+  Stack,
+  Text,
+  VStack,
+  useBreakpointValue,
+} from '@chakra-ui/react';
 import { Merchant } from '@models/merchant';
 
 interface MerchantTableItemProps {
@@ -15,28 +25,43 @@ export function MerchantTableItem({
 }: MerchantTableItemProps): React.ReactElement {
   const navigate = useNavigate();
 
+  const isMobile = useBreakpointValue({ base: true, md: false });
+
   return (
-    <HStack w={'100%'} justifyContent={'space-between'} py={'5px'}>
-      <HStack w={'250px'}>
-        <Image src={merchant.logo} alt={merchant.name} width={'150px'} />
-      </HStack>
-      <HStack w={'150px'} h={'35px'}>
-        <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'}>
-            {Number(dlcBTCAmount?.toFixed(4))}
-          </Text>
-        </Skeleton>
-      </HStack>
-      <Button
-        w={'150px'}
-        variant={'merchantTableItem'}
-        onClick={() => navigate(`/merchant-details/${merchant.name}`)}
+    <VStack w={'100%'} gap={isMobile ? '20px' : '10px'}>
+      <Stack
+        justifyContent={'space-between'}
+        py={'5px'}
+        w={'100%'}
+        alignItems={isMobile ? 'center' : 'flex-start'}
+        direction={isMobile ? 'column' : 'row'}
+        gap={isMobile ? '10px' : '0px'}
       >
-        <Text color={'white.01'} fontSize={'xs'}>
-          Mint/Withdraw History
-        </Text>
-      </Button>
-    </HStack>
+        <HStack>
+          <HStack w={isMobile ? 'auto' : '280px'}>
+            <Image src={merchant.logo} alt={merchant.name} width={'150px'} />
+          </HStack>
+          <HStack w={'150px'} 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'}>
+                {Number(dlcBTCAmount?.toFixed(4))}
+              </Text>
+            </Skeleton>
+          </HStack>
+        </HStack>
+
+        <Button
+          w={isMobile ? '100%' : '150px'}
+          variant={'merchantTableItem'}
+          onClick={() => navigate(`/merchant-details/${merchant.name}`)}
+        >
+          <Text color={'white.01'} fontSize={'xs'}>
+            Mint/Withdraw History
+          </Text>
+        </Button>
+      </Stack>
+      <Divider orientation={'horizontal'} />
+    </VStack>
   );
 }
diff --git a/src/app/components/proof-of-reserve/components/merchant-table/merchant-details-table.tsx b/src/app/components/proof-of-reserve/components/merchant-table/merchant-details-table.tsx
@@ -1,4 +1,4 @@
-import { Skeleton, Text } from '@chakra-ui/react';
+import { Skeleton, Text, 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';
@@ -12,16 +12,26 @@ interface MerchantDetailsTableProps {
 
 export function MerchantDetailsTable({ items }: MerchantDetailsTableProps): React.JSX.Element {
   const dynamicHeight = items ? items.length * 59 + 20 : 20;
+  const isMobile = useBreakpointValue({ base: true, md: false });
 
   return (
-    <GenericTableLayout height={`${dynamicHeight}px`}>
+    <GenericTableLayout height={`${dynamicHeight}px`} isMobile={isMobile}>
       <GenericTableHeader>
-        <GenericTableHeaderText w={'15%'}>Order Book</GenericTableHeaderText>
-        <GenericTableHeaderText w={'15%'}>Amount</GenericTableHeaderText>
-        {/* <GenericTableHeaderText>in USD</GenericTableHeaderText> */}
-        <GenericTableHeaderText w={'15%'}>Transaction</GenericTableHeaderText>
-        <GenericTableHeaderText w={'15%'}>Chain</GenericTableHeaderText>
-        <GenericTableHeaderText w={'15%'}>Date</GenericTableHeaderText>
+        {isMobile ? (
+          <>
+            <GenericTableHeaderText w={'30%'}>Order Book</GenericTableHeaderText>
+            <GenericTableHeaderText w={'25%'}>Amount</GenericTableHeaderText>
+            <GenericTableHeaderText w={'30%'}>Transaction</GenericTableHeaderText>
+          </>
+        ) : (
+          <>
+            <GenericTableHeaderText w={'15%'}>Order Book</GenericTableHeaderText>
+            <GenericTableHeaderText w={'15%'}>Amount</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 && (

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
@@ -1,9 +1,15 @@
-import { VStack } from '@chakra-ui/react';
+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={'50%'} h={'275px'} alignItems={'flex-start'} borderRadius={'md'}>
+    <VStack
+      w={isMobile ? '100%' : '50%'}
+      h={isMobile ? 'auto' : '275px'}
+      alignItems={'flex-start'}
+      borderRadius={'md'}
+    >
       {children}
     </VStack>
   );