feat: table drawers

CHANGELOG.md

@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#240](https://github.com/alleslabs/celatone-frontend/pull/240) Change modals containing tables to drawers for easier exploration
 - [#239](https://github.com/alleslabs/celatone-frontend/pull/239) Add code description and code name for public code in code details page
 - [#237](https://github.com/alleslabs/celatone-frontend/pull/237) Change unsupported tokens layout and style
 

src/lib/components/select-code/CodeSelect.tsx

@@ -6,7 +6,7 @@ import { UploadIcon } from "lib/components/icon";
 import { useUserKey } from "lib/hooks";
 import { useCodeStore } from "lib/providers/store";
 
-import { CodeSelectModalButton } from "./CodeSelectModalButton";
+import { CodeSelectDrawerButton } from "./CodeSelectDrawerButton";
 
 interface CodeSelectProps extends Omit<FlexProps, "onSelect"> {
   onCodeSelect: (code: string) => void;
@@ -58,7 +58,7 @@ export const CodeSelect = ({
             Please select code
           </Text>
         )}
-        <CodeSelectModalButton
+        <CodeSelectDrawerButton
           onCodeSelect={onCodeSelect}
           buttonText={codeId ? "Change Code" : "Select Code"}
         />

src/lib/components/select-code/CodeSelectModalButton.tsx → src/lib/components/select-code/CodeSelectDrawerButton.tsx

@@ -1,14 +1,14 @@
 import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
   Button,
   useDisclosure,
-  ModalCloseButton,
   Text,
   Heading,
+  Drawer,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerCloseButton,
+  DrawerBody,
 } from "@chakra-ui/react";
 
 import { CustomIcon } from "../icon";
@@ -18,15 +18,15 @@ import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import { MySavedCodeContent } from "./MySavedCodeContent";
 import { MyStoredCodeContent } from "./MyStoredCodeContent";
 
-interface CodeSelectModalButtonProps {
+interface CodeSelectDrawerButtonProps {
   onCodeSelect: (code: string) => void;
   buttonText: string;
 }
 
-export const CodeSelectModalButton = ({
+export const CodeSelectDrawerButton = ({
   onCodeSelect,
   buttonText,
-}: CodeSelectModalButtonProps) => {
+}: CodeSelectDrawerButtonProps) => {
   // ------------------------------------------//
   // ---------------DEPENDENCIES---------------//
   // ------------------------------------------//
@@ -58,17 +58,17 @@ export const CodeSelectModalButton = ({
         {buttonText}
       </Button>
 
-      <Modal isOpen={isOpen} onClose={onClose} isCentered size="4xl">
-        <ModalOverlay />
-        <ModalContent w="840px">
-          <ModalHeader>
+      <Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
+        <DrawerOverlay />
+        <DrawerContent h="80%">
+          <DrawerHeader>
             <CustomIcon name="code" boxSize="6" />
             <Heading as="h5" variant="h5">
               Select Code ID
             </Heading>
-          </ModalHeader>
-          <ModalCloseButton color="text.dark" />
-          <ModalBody px={0} maxH="640px" overflow="scroll">
+          </DrawerHeader>
+          <DrawerCloseButton color="text.dark" />
+          <DrawerBody px={0} overflow="scroll">
             <Heading as="h6" variant="h6" mb="8px" ml="24px">
               My Stored Codes
             </Heading>
@@ -89,9 +89,9 @@ export const CodeSelectModalButton = ({
               savedCodes={savedCodes}
               handleSelect={handleSelect}
             />
-          </ModalBody>
-        </ModalContent>
-      </Modal>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
     </>
   );
 };

src/lib/components/select-contract/ContractListCard.tsx

@@ -1,14 +1,12 @@
 import {
   Flex,
   Button,
-  Tag,
   Text,
-  LinkBox,
-  LinkOverlay,
   Menu,
   MenuButton,
   MenuList,
   Spacer,
+  Badge,
 } from "@chakra-ui/react";
 
 import { CustomIcon } from "../icon";
@@ -28,80 +26,70 @@ export const ContractListCard = ({
   handleListSelect,
   isReadOnly,
 }: ContractListCardProps) => {
-  const showLastUpdated = item.slug !== formatSlugName(INSTANTIATED_LIST_NAME);
+  const isInstantiatedByMe =
+    item.slug !== formatSlugName(INSTANTIATED_LIST_NAME);
+  const isDisabled = isReadOnly && isInstantiatedByMe && !item.contracts.length;
 
   return (
-    <LinkBox cursor="pointer">
-      <Flex
-        p="4"
-        alignItems="center"
-        bg="pebble.800"
-        _hover={{ bg: "pebble.700" }}
-        borderRadius="8px"
-        transition="all .25s ease-in-out"
-        gap="4"
-        h="75px"
-      >
-        <CustomIcon name={getListIcon(item.name)} boxSize="24px" />
-        <Flex flexDirection="column">
-          <Flex alignItems="center" gap="2">
-            <LinkOverlay
-              onClick={() => handleListSelect(item.slug)}
-              display="grid"
-              whiteSpace="nowrap"
-            >
-              <Text
-                variant="body1"
-                fontWeight="600"
-                textOverflow="ellipsis"
-                overflow="hidden"
-              >
-                {item.name}
-              </Text>
-            </LinkOverlay>
-            <Tag
-              variant="solid"
-              size="sm"
-              minW="min-content"
-              backgroundColor="pebble.700"
-              borderRadius="full"
-              paddingTop="1px"
-              textColor="text.dark"
-            >
-              {item.contracts.length}
-            </Tag>
-          </Flex>
-          {showLastUpdated && (
-            <Text variant="body3" color="text.dark">
-              Updated {dateFromNow(item.lastUpdated)}
-            </Text>
-          )}
+    <Flex
+      as={Button}
+      gap={4}
+      h="75px"
+      onClick={() => handleListSelect(item.slug)}
+      bg="pebble.800"
+      _hover={{ bg: "pebble.700" }}
+      _disabled={{
+        bg: "pebble.800",
+        _hover: { bg: "pebble.800" },
+      }}
+      isDisabled={isDisabled}
+    >
+      <CustomIcon name={getListIcon(item.name)} boxSize="24px" />
+      <Flex flexDirection="column" alignItems="start" gap={1}>
+        <Flex alignItems="center" gap={2}>
+          <Text
+            variant="body1"
+            textColor={isDisabled ? "text.disabled" : "text.main"}
+            fontWeight="600"
+            textOverflow="ellipsis"
+            overflow="hidden"
+          >
+            {item.name}
+          </Text>
+          <Badge variant="gray" color="text.main">
+            {item.contracts.length}
+          </Badge>
         </Flex>
-        <Spacer />
-        {!isReadOnly && (
-          <Menu>
-            <MenuButton m="0" h="full" variant="ghost-gray" as={Button}>
-              <CustomIcon name="more" />
-            </MenuButton>
-            <MenuList>
-              <EditListNameModal
-                list={{ label: item.name, value: item.slug }}
-                menuItemProps={{
-                  icon: <CustomIcon name="edit" />,
-                  children: "Edit list name",
-                }}
-              />
-              <RemoveListModal
-                list={{ label: item.name, value: item.slug }}
-                menuItemProps={{
-                  icon: <CustomIcon name="delete" color="error.light" />,
-                  children: "Remove list",
-                }}
-              />
-            </MenuList>
-          </Menu>
+        {isInstantiatedByMe && (
+          <Text variant="body3" color="text.dark">
+            Updated {dateFromNow(item.lastUpdated)}
+          </Text>
         )}
       </Flex>
-    </LinkBox>
+      <Spacer />
+      {!isReadOnly && (
+        <Menu>
+          <MenuButton m="0" h="full" variant="ghost-gray" as={Button}>
+            <CustomIcon name="more" />
+          </MenuButton>
+          <MenuList>
+            <EditListNameModal
+              list={{ label: item.name, value: item.slug }}
+              menuItemProps={{
+                icon: <CustomIcon name="edit" />,
+                children: "Edit list name",
+              }}
+            />
+            <RemoveListModal
+              list={{ label: item.name, value: item.slug }}
+              menuItemProps={{
+                icon: <CustomIcon name="delete" color="error.light" />,
+                children: "Remove list",
+              }}
+            />
+          </MenuList>
+        </Menu>
+      )}
+    </Flex>
   );
 };

src/lib/components/select-contract/ContractListReadOnlyTable.tsx

@@ -16,7 +16,8 @@ interface ContractListReadOnlyTableProps {
   onContractSelect: (addr: ContractAddr) => void;
 }
 
-const TEMPLATE_COLUMNS = "160px 280px 260px 1fr";
+const TEMPLATE_COLUMNS =
+  "minmax(160px, 300px) minmax(300px, 3fr) minmax(200px, 2fr) 1fr";
 
 export const ContractListReadOnlyTable = ({
   contracts = [],

src/lib/components/select-contract/SelectContractAdmin.tsx

@@ -1,13 +1,13 @@
 import {
   useDisclosure,
   Button,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalCloseButton,
-  ModalBody,
   Heading,
+  Drawer,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerCloseButton,
+  DrawerBody,
 } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 
@@ -74,25 +74,25 @@ export const SelectContractAdmin = ({
         {notSelected ? "Select Contract" : "Change Contract"}
       </Button>
 
-      <Modal isOpen={isOpen} onClose={onClose} size="4xl" isCentered>
-        <ModalOverlay />
-        <ModalContent h="80%">
-          <ModalHeader>
+      <Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
+        <DrawerOverlay />
+        <DrawerContent h="80%">
+          <DrawerHeader>
             <CustomIcon name="contract-address-solid" boxSize="5" />
             <Heading as="h5" variant="h5">
               Select contract which you have permission
             </Heading>
-          </ModalHeader>
-          <ModalCloseButton />
-          <ModalBody maxH="full" overflowY="scroll">
+          </DrawerHeader>
+          <DrawerCloseButton />
+          <DrawerBody overflowY="scroll">
             <ContractListDetail
               contractListInfo={contractList}
               isReadOnly
               onContractSelect={onSelectThenClose}
             />
-          </ModalBody>
-        </ModalContent>
-      </Modal>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
     </>
   );
 };