feat: responsive contract history

CheesecakeLabs · Feb 20, 2024 · 4f0d2dd · 4f0d2dd
1 parent 107252a
commit 4f0d2dd
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 29 deletions.
diff --git a/frontend/src/components/templates/contracts-detail/components/contract-history/index.tsx b/frontend/src/components/templates/contracts-detail/components/contract-history/index.tsx
@@ -1,4 +1,14 @@
-import { Flex, Table, Tbody, Td, Text, Th, Thead, Tr } from '@chakra-ui/react'
+import {
+  Flex,
+  Table,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tr,
+  useMediaQuery,
+} from '@chakra-ui/react'
 import React from 'react'
 
 import { formatDateFullClean, toCrypto } from 'utils/formatter'
@@ -12,6 +22,8 @@ export const ContractHistory: React.FC<IWithdrawDetails> = ({
   contract,
   history,
 }) => {
+  const [isLargerThanSm] = useMediaQuery('(min-width: 480px)')
+
   const calculateVariation = (
     depositAmount: number,
     withdrawAmount: number
@@ -22,8 +34,7 @@ export const ContractHistory: React.FC<IWithdrawDetails> = ({
 
   return (
     <Flex>
-      <Flex flexDir="column" w="full"
-          overflowX="auto">
+      <Flex flexDir="column" w="full" overflowX="auto">
         <Text
           bg="gray.100"
           borderRadius="full"
@@ -37,28 +48,92 @@ export const ContractHistory: React.FC<IWithdrawDetails> = ({
         >
           Your history
         </Text>
-        <Table variant="small" mt="0.25rem">
-          <Thead>
-            <Tr>
-              <Th>Date of deposit</Th>
-              <Th>Deposited</Th>
-              <Th>Date of withdraw</Th>
-              <Th>Withdrawn</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
+        {isLargerThanSm ? (
+          <Table variant="small" mt="0.25rem">
+            <Thead>
+              <Tr>
+                <Th>Date of deposit</Th>
+                <Th>Deposited</Th>
+                <Th>Date of withdraw</Th>
+                <Th>Withdrawn</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {history?.map((itemHistory, index) => (
+                <Tr key={index}>
+                  <Td>{formatDateFullClean(itemHistory.deposited_at)}</Td>
+                  <Td>{`${toCrypto(itemHistory.deposit_amount)} ${
+                    contract.asset.code
+                  }`}</Td>
+                  <Td>
+                    {itemHistory.withdrawn_at
+                      ? formatDateFullClean(itemHistory.withdrawn_at)
+                      : '-'}
+                  </Td>
+                  <Td>
+                    <Flex alignItems="center" gap="0.5rem">
+                      {itemHistory.withdraw_amount
+                        ? `${toCrypto(itemHistory.withdraw_amount)} ${
+                            contract.asset.code
+                          }`
+                        : '-'}
+                      {itemHistory.withdraw_amount && (
+                        <Text
+                          fontSize="xs"
+                          bg="#e0eaf9"
+                          py="0.15rem"
+                          px="0.35rem"
+                          mt="0.25rem"
+                          borderRadius="full"
+                          color="purple.600"
+                          w="fit-content"
+                          _dark={{ bg: 'black.800', color: 'white' }}
+                        >
+                          {calculateVariation(
+                            itemHistory.deposit_amount,
+                            itemHistory.withdraw_amount
+                          )}
+                        </Text>
+                      )}
+                    </Flex>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        ) : (
+          <Flex flexDir="column">
             {history?.map((itemHistory, index) => (
-              <Tr key={index}>
-                <Td>{formatDateFullClean(itemHistory.deposited_at)}</Td>
-                <Td>{`${toCrypto(itemHistory.deposit_amount)} ${
-                  contract.asset.code
-                }`}</Td>
-                <Td>
-                  {itemHistory.withdrawn_at
-                    ? formatDateFullClean(itemHistory.withdrawn_at)
-                    : '-'}
-                </Td>
-                <Td>
+              <Flex
+                key={index}
+                flexDir="column"
+                borderBottom="1px solid"
+                borderColor={'gray.600'}
+                _dark={{ borderColor: 'black.800' }}
+                pb={2}
+                pt={2}
+                gap={1}
+              >
+                <Flex gap="0.35rem">
+                  <Text fontWeight="bold">Date of deposit</Text>
+                  <Text>{formatDateFullClean(itemHistory.deposited_at)}</Text>
+                </Flex>
+                <Flex gap="0.35rem">
+                  <Text fontWeight="bold">Deposited</Text>
+                  <Text>{`${toCrypto(itemHistory.deposit_amount)} ${
+                    contract.asset.code
+                  }`}</Text>
+                </Flex>
+                <Flex gap="0.35rem">
+                  <Text fontWeight="bold">Date of withdraw</Text>
+                  <Text>
+                    {itemHistory.withdrawn_at
+                      ? formatDateFullClean(itemHistory.withdrawn_at)
+                      : '-'}
+                  </Text>
+                </Flex>
+                <Flex gap="0.35rem">
+                  <Text fontWeight="bold">Withdrawn</Text>
                   <Flex alignItems="center" gap="0.5rem">
                     {itemHistory.withdraw_amount
                       ? `${toCrypto(itemHistory.withdraw_amount)} ${
@@ -84,11 +159,11 @@ export const ContractHistory: React.FC<IWithdrawDetails> = ({
                       </Text>
                     )}
                   </Flex>
-                </Td>
-              </Tr>
+                </Flex>
+              </Flex>
             ))}
-          </Tbody>
-        </Table>
+          </Flex>
+        )}
         {history && history.length == 0 && (
           <Text
             variant="secondary"

diff --git a/frontend/src/components/templates/contracts-detail/index.tsx b/frontend/src/components/templates/contracts-detail/index.tsx
@@ -57,7 +57,7 @@ export const ContractsDetailTemplate: React.FC<IContractsDetailTemplate> = ({
   timerCounter,
 }) => {
   return (
-    <Flex flexDir="column" w="full">
+    <Flex flexDir="column" w="full" pb="3.5rem">
       <Flex
         maxW={MAX_PAGE_WIDTH_FULL}
         alignSelf="center"