feat: adjust merchant details page to mobile

DLC-link · Oct 2, 2024 · 8b2df34 · 8b2df34
1 parent b38d201
commit 8b2df34
Show file tree

Hide file tree

Showing 7 changed files with 203 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
@@ -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/.../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
@@ -28,13 +28,14 @@ export function MerchantTableItem({
   const isMobile = useBreakpointValue({ base: true, md: false });
 
   return (
-    <VStack w={'100%'} gap={'10px'}>
+    <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'}
       >
         <HStack>
           <HStack w={isMobile ? 'auto' : '280px'}>

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/protocol-history-table/components/protocol-history-table-item.tsx b/src/app/components/protocol-history-table/components/protocol-history-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';
@@ -23,7 +23,7 @@ export function ProtocolHistoryTableItem(
   const ethereumNetwork = findEthereumNetworkByName(eventChain);
 
   console.log('dlcBTCAmount', dlcBTCAmount);
-
+  const isMobile = useBreakpointValue({ base: true, md: false });
   return (
     <HStack
       p={'10px'}
@@ -36,7 +36,62 @@ export function ProtocolHistoryTableItem(
       borderColor={'border.white.01'}
       justifyContent={'space-between'}
     >
-      <HStack w={'25%'}>
+      {isMobile ? (
+        <>
+          <HStack w={'50%'}>
+            <Image src={'/images/logos/dlc-btc-logo.svg'} alt={'dlcBTC Logo'} boxSize={'20px'} />
+            <Text color={'white'} fontWeight={800}>
+              {unshiftValue(dlcBTCAmount)}
+            </Text>
+          </HStack>
+          <HStack w={'50%'}>
+            <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={'25%'}>
+            <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%'}>
+            <Text color={'white'} fontSize={'sm'} fontWeight={800}>
+              {truncateAddress(merchant)}
+            </Text>
+          </HStack>
+          <HStack w={'25%'}>
+            <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={'25%'}>
+            <Text color={'white'} fontSize={'sm'}>
+              {date}
+            </Text>
+          </HStack>
+        </>
+      )}
+      {/* <HStack w={'25%'}>
         <Image src={'/images/logos/dlc-btc-logo.svg'} alt={'dlcBTC Logo'} boxSize={'20px'} />
         <Text color={'white'} fontWeight={800}>
           {unshiftValue(dlcBTCAmount)}
@@ -64,7 +119,7 @@ export function ProtocolHistoryTableItem(
         <Text color={'white'} fontSize={'sm'}>
           {date}
         </Text>
-      </HStack>
+      </HStack> */}
     </HStack>
   );
 }
diff --git a/src/app/components/protocol-history-table/protocol-history-table.tsx b/src/app/components/protocol-history-table/protocol-history-table.tsx
@@ -16,10 +16,19 @@ export function ProtocolHistoryTable({ items }: ProtocolHistoryTableProps): Reac
   return (
     <GenericTableLayout height={`${dynamicHeight}px`} width={'50%'} isMobile={isMobile}>
       <GenericTableHeader>
-        <GenericTableHeaderText w={'25%'}>Order Book</GenericTableHeaderText>
-        <GenericTableHeaderText w={'25%'}>Merchant</GenericTableHeaderText>
-        <GenericTableHeaderText w={'25%'}>Transaction</GenericTableHeaderText>
-        <GenericTableHeaderText w={'25%'}>Date</GenericTableHeaderText>
+        {isMobile ? (
+          <>
+            <GenericTableHeaderText w={'50%'}>Order Book</GenericTableHeaderText>
+            <GenericTableHeaderText w={'50%'}>Transaction</GenericTableHeaderText>
+          </>
+        ) : (
+          <>
+            <GenericTableHeaderText w={'25%'}>Order Book</GenericTableHeaderText>
+            <GenericTableHeaderText w={'25%'}>Merchant</GenericTableHeaderText>
+            <GenericTableHeaderText w={'25%'}>Transaction</GenericTableHeaderText>
+            <GenericTableHeaderText w={'25%'}>Date</GenericTableHeaderText>
+          </>
+        )}
       </GenericTableHeader>
       <Skeleton isLoaded={items !== undefined} height={'50px'} w={'100%'}>
         <GenericTableBody>