fix: add helper text to editable cell, change trash button to bookmark

CHANGELOG.md

@@ -114,6 +114,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#180](https://github.com/alleslabs/celatone-frontend/pull/180) Add helper text to editable cell, Change trash button to bookmark button
 - [#171](https://github.com/alleslabs/celatone-frontend/pull/171) Change gql query for better speed, remove unwrap and default values, and better handle data rendering
 - [#177](https://github.com/alleslabs/celatone-frontend/pull/177) Handle instantiate render: tx hash, proposal, genesis, and data not available case
 - [#176](https://github.com/alleslabs/celatone-frontend/pull/176) Adjust contract table fraction, limit tag render, full ellipsis contract desc/name length

src/lib/components/table/EditableCell.tsx

@@ -97,42 +97,46 @@ export const EditableCell = ({
         onMouseOver={handleMouseEnter}
         onMouseOut={handleMouseOut}
         position="relative"
-        zIndex={2}
         w="full"
       >
         {isEditCellOpen ? (
           <Flex
-            ref={editCellRef}
-            alignItems="center"
-            gap={1}
+            direction="column"
             position="absolute"
-            top="-28px"
+            zIndex="sticky"
+            top="-32px"
             left="-16px"
             bg="pebble.800"
             p={3}
             borderRadius="8px"
-            zIndex="sticky"
             onClick={(e) => e.stopPropagation()}
+            ref={editCellRef}
           >
-            <Input
-              size="sm"
-              value={inputValue}
-              onChange={handleChange}
-              width="full"
-              minWidth="300px"
-              maxLength={maxLength}
-              autoFocus
-              onKeyDown={(e) => {
-                if (e.key === "Enter") handleSave();
-                else if (e.key === "Escape") handleCancel();
-              }}
-            />
-            <Button size="sm" onClick={handleSave} variant="ghost-gray">
-              <Icon as={MdCheck} color="success.main" />
-            </Button>
-            <Button onClick={handleCancel} size="sm" variant="ghost-gray">
-              <Icon as={MdClose} color="error.light" />
-            </Button>
+            <Flex alignItems="center" gap={1}>
+              <Input
+                size="sm"
+                value={inputValue}
+                onChange={handleChange}
+                width="full"
+                minW="472px"
+                minH="40px"
+                maxLength={maxLength}
+                autoFocus
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") handleSave();
+                  else if (e.key === "Escape") handleCancel();
+                }}
+              />
+              <Button size="sm" onClick={handleSave} variant="ghost-gray">
+                <Icon boxSize={6} as={MdCheck} color="success.main" />
+              </Button>
+              <Button onClick={handleCancel} size="sm" variant="ghost-gray">
+                <Icon boxSize={6} as={MdClose} color="error.light" />
+              </Button>
+            </Flex>
+            <Text fontSize="body3" color="text.dark" ml={4} mt={2}>
+              Your input will be stored in this device only.
+            </Text>
           </Flex>
         ) : (
           <Flex

src/lib/pages/code-details/components/table/contracts/ContractTable.tsx

@@ -88,7 +88,7 @@ export const ContractTable = observer(({ codeId }: ContractTableProps) => {
       {!codeContracts?.length ? (
         <NoContracts />
       ) : (
-        <TableContainer>
+        <TableContainer overflow="visible">
           <Grid templateColumns={templateColumnsStyle} minW="min-content">
             <TableHeader borderTopStyle="none">Contract Address</TableHeader>
             <TableHeader>Contract Name</TableHeader>

src/lib/pages/codes/components/CodesTable.tsx

@@ -15,7 +15,6 @@ import { MdSearchOff } from "react-icons/md";
 import { useInternalNavigate } from "lib/app-provider";
 import { InstantiateButton } from "lib/components/button";
 import { ExplorerLink } from "lib/components/ExplorerLink";
-import { RemoveCodeModal } from "lib/components/modal/code/RemoveCode";
 import { SaveOrRemoveCodeModal } from "lib/components/modal/code/SaveOrRemoveCode";
 import { PermissionChip } from "lib/components/PermissionChip";
 import { DisconnectedState } from "lib/components/state/DisconnectedState";
@@ -36,13 +35,11 @@ interface CodesTableProps {
   tableName: string;
   codes: CodeInfo[];
   action?: ReactNode;
-  isRemovable?: boolean;
   isSearching: boolean;
 }
 
 interface CodesRowProps {
   code: CodeInfo;
-  isRemovable: boolean;
 }
 
 interface OtherTBodyProps {
@@ -119,7 +116,7 @@ const CodeTableHead = () => {
   );
 };
 
-const CodeTableRow = ({ code, isRemovable }: CodesRowProps) => {
+const CodeTableRow = ({ code }: CodesRowProps) => {
   const navigate = useInternalNavigate();
   const goToCodeDetails = () => {
     navigate({ pathname: `/code/${code.id}` });
@@ -178,11 +175,7 @@ const CodeTableRow = ({ code, isRemovable }: CodesRowProps) => {
               permissionAddresses={code.permissionAddresses}
               codeId={code.id}
             />
-            {isRemovable ? (
-              <RemoveCodeModal codeId={code.id} name={code.name} />
-            ) : (
-              <SaveOrRemoveCodeModal codeInfo={code} />
-            )}
+            <SaveOrRemoveCodeModal codeInfo={code} />
           </HStack>
         </Flex>
       </TableRowNoBorder>
@@ -193,16 +186,14 @@ const CodeTableRow = ({ code, isRemovable }: CodesRowProps) => {
 const NormalRender = ({
   codes,
   tableName,
-  isRemovable = false,
-}: Pick<CodesTableProps, "codes" | "tableName" | "isRemovable">) => {
+}: Pick<CodesTableProps, "codes" | "tableName">) => {
   return (
     <TableContainer mb={20} position="relative">
       <CodeTableHead />
       {codes.map((code) => (
         <CodeTableRow
           key={`row-${tableName}-${code.id}-${code.name}-${code.uploader}`}
           code={code}
-          isRemovable={isRemovable}
         />
       ))}
     </TableContainer>
@@ -214,7 +205,6 @@ function CodesTable({
   tableName,
   codes,
   action,
-  isRemovable,
   isSearching,
 }: CodesTableProps) {
   const { address } = useWallet();
@@ -223,13 +213,7 @@ function CodesTable({
     if (!address && type === "stored") return <Unconnected />;
     if (codes.length === 0 && isSearching) return <NotMatched />;
     if (codes.length === 0) return <Empty type={type} />;
-    return (
-      <NormalRender
-        isRemovable={isRemovable}
-        codes={codes}
-        tableName={tableName}
-      />
-    );
+    return <NormalRender codes={codes} tableName={tableName} />;
   };
 
   return (

src/lib/pages/codes/index.tsx

@@ -94,7 +94,6 @@ const Codes = observer(() => {
               tableName="My Saved Codes"
               codes={saved}
               action={<SaveCodeButton />}
-              isRemovable
               isSearching={!!keyword}
             />
           </TabPanel>
@@ -114,7 +113,6 @@ const Codes = observer(() => {
               codes={saved}
               action={<SaveCodeButton />}
               isSearching={!!keyword}
-              isRemovable
             />
           </TabPanel>
         </TabPanels>