Merge pull request #933 from alleslabs/feat/code-lite-contracts

fix: code lite contracts
alleslabs · May 16, 2024 · 7479b9f · 7479b9f
2 parents 2389c5e + a8cc8b3
commit 7479b9f
Show file tree

Hide file tree

Showing 19 changed files with 268 additions and 104 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#933](https://github.com/alleslabs/celatone-frontend/pull/933) Support lite version for code details contract list
 - [#929](https://github.com/alleslabs/celatone-frontend/pull/929) Support lite version for code details page
 - [#925](https://github.com/alleslabs/celatone-frontend/pull/925) Move contracts service to new folder structure
 - [#919](https://github.com/alleslabs/celatone-frontend/pull/919) Remove singleStakingDenom config and use from lcd instead

diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
@@ -35,6 +35,7 @@ export enum CELATONE_QUERY_KEYS {
   CONTRACT_QUERY_LCD = "CELATONE_QUERY_CONTRACT_QUERY_LCD",
   CONTRACT_STATES = "CELATONE_QUERY_CONTRACT_STATES",
   CONTRACTS_BY_CODE_ID = "CELATONE_QUERY_CONTRACTS_BY_CODE_ID",
+  CONTRACTS_BY_CODE_ID_LCD = "CELATONE_QUERY_CONTRACTS_BY_CODE_ID_LCD",
   CONTRACTS_BY_ADMIN = "CELATONE_QUERY_CONTRACT_BY_ADMIN",
   INSTANTIATED_CONTRACTS_BY_ADDRESS = "CELATONE_QUERY_INSTANTIATED_CONTRACTS_BY_ADDRESS",
   ADMIN_CONTRACTS_BY_ADDRESS = "CELATONE_QUERY_ADMIN_CONTRACTS_BY_ADDRESS",

diff --git a/src/lib/components/AlertPaginationLcd.tsx b/src/lib/components/AlertPaginationLcd.tsx
@@ -0,0 +1,9 @@
+import { Alert, AlertDescription } from "@chakra-ui/react";
+
+export const AlertPaginationLcd = () => (
+  <Alert variant="error" alignItems="center">
+    <AlertDescription wordBreak="break-word">
+      Error fetching data from LCD. Please try again later.
+    </AlertDescription>
+  </Alert>
+);
diff --git a/src/lib/components/table/contracts/ContractNameCell.tsx b/src/lib/components/table/contracts/ContractNameCell.tsx
@@ -25,7 +25,11 @@ export const ContractNameCell = ({
   return (
     <EditableCell
       initialValue={contractLocalInfo.name}
-      defaultValue={contractLocalInfo.label}
+      defaultValue={
+        contractLocalInfo.label.length > 0
+          ? contractLocalInfo.label
+          : "Untitled"
+      }
       maxLength={constants.maxContractNameLength}
       tooltip={contractLocalInfo.description}
       isReadOnly={isReadOnly}

diff --git a/src/lib/components/table/contracts/ContractsTable.tsx b/src/lib/components/table/contracts/ContractsTable.tsx
@@ -13,19 +13,21 @@ interface ContractsTableProps {
   isLoading: boolean;
   emptyState: JSX.Element;
   onRowSelect: (contract: BechAddr32) => void;
+  showTag?: boolean;
+  showLastUpdate?: boolean;
   isReadOnly?: boolean;
   withCTA?: CTAInfo;
-  withoutTag?: boolean;
 }
 
 export const ContractsTable = ({
   contracts,
   isLoading,
   emptyState,
   onRowSelect,
+  showTag = true,
+  showLastUpdate = true,
   isReadOnly = false,
   withCTA,
-  withoutTag,
 }: ContractsTableProps) => {
   const isMobile = useMobile();
 
@@ -34,13 +36,11 @@ export const ContractsTable = ({
 
   let templateColumns: string;
   if (isReadOnly)
-    templateColumns =
-      "minmax(160px, 300px) minmax(300px, 3fr) minmax(200px, 2fr) 1fr";
-  else if (withoutTag)
-    templateColumns = "160px minmax(300px, 3fr)  250px 300px 80px";
+    templateColumns = `minmax(160px, 300px) minmax(300px, 3fr) minmax(200px, 2fr)${showLastUpdate ? " 1fr" : ""}`;
+  else if (!showTag)
+    templateColumns = `160px minmax(300px, 3fr)${showLastUpdate ? " 250px 300px" : ""} 80px`;
   else
-    templateColumns =
-      "160px minmax(300px, 3fr) minmax(200px, 2fr) 150px 260px 80px";
+    templateColumns = `160px minmax(300px, 3fr) minmax(200px, 2fr)${showLastUpdate ? " 150px 260px" : ""} 80px`;
 
   return isMobile ? (
     <MobileTableContainer>
@@ -55,16 +55,18 @@ export const ContractsTable = ({
           }
           contractInfo={contractInfo}
           onRowSelect={onRowSelect}
+          showLastUpdate={showLastUpdate}
         />
       ))}
     </MobileTableContainer>
   ) : (
     <TableContainer pb={6}>
       <ContractsTableHeader
         templateColumns={templateColumns}
+        showTag={showTag}
+        showLastUpdate={showLastUpdate}
         isReadOnly={isReadOnly}
         withCTA={withCTA}
-        withoutTag={withoutTag}
       />
       {contracts.map((contractInfo) => (
         <ContractsTableRow
@@ -78,9 +80,10 @@ export const ContractsTable = ({
           contractInfo={contractInfo}
           templateColumns={templateColumns}
           onRowSelect={onRowSelect}
+          showTag={showTag}
+          showLastUpdate={showLastUpdate}
           isReadOnly={isReadOnly}
           withCTA={withCTA}
-          withoutTag={withoutTag}
         />
       ))}
     </TableContainer>

diff --git a/src/lib/components/table/contracts/ContractsTableHeader.tsx b/src/lib/components/table/contracts/ContractsTableHeader.tsx
@@ -7,23 +7,29 @@ import type { CTAInfo } from "./ContractsTableRowCTA";
 
 export const ContractsTableHeader = ({
   templateColumns,
+  showTag,
+  showLastUpdate,
   isReadOnly,
   withCTA,
-  withoutTag,
 }: {
   templateColumns: GridProps["templateColumns"];
+  showTag: boolean;
+  showLastUpdate: boolean;
   isReadOnly: boolean;
   withCTA?: CTAInfo;
-  withoutTag?: boolean;
 }) => (
   <Grid templateColumns={templateColumns} minW="min-content">
     <TableHeader>Contract Address</TableHeader>
     <TableHeader>Contract Name</TableHeader>
-    {!withoutTag && <TableHeader>Tags</TableHeader>}
-    <TableHeader>Instantiator</TableHeader>
+    {showTag && <TableHeader>Tags</TableHeader>}
+    {showLastUpdate && <TableHeader>Instantiator</TableHeader>}
     {!isReadOnly && (
       <>
-        {withCTA ? <TableHeader /> : <TableHeader>Timestamp</TableHeader>}
+        {showLastUpdate && (
+          <>
+            {withCTA ? <TableHeader /> : <TableHeader>Timestamp</TableHeader>}
+          </>
+        )}
         <TableHeader />
       </>
     )}

diff --git a/src/lib/components/table/contracts/ContractsTableMobileCard.tsx b/src/lib/components/table/contracts/ContractsTableMobileCard.tsx
@@ -17,6 +17,7 @@ import { ContractInstantiatorCell } from "./ContractInstantiatorCell";
 interface ContractsTableMobileCardProps {
   contractInfo: ContractInfo;
   onRowSelect: (contract: BechAddr32) => void;
+  showLastUpdate: boolean;
 }
 
 const InstantiatorRemark = ({
@@ -44,6 +45,7 @@ const InstantiatorRemark = ({
 export const ContractsTableMobileCard = ({
   contractInfo,
   onRowSelect,
+  showLastUpdate,
 }: ContractsTableMobileCardProps) => (
   <MobileCardTemplate
     onClick={() => onRowSelect(contractInfo.contractAddress)}
@@ -57,26 +59,28 @@ export const ContractsTableMobileCard = ({
       </Flex>
     }
     middleContent={
-      <Flex gap={3} direction="column" w="full">
-        <div>
-          <MobileLabel label="Contract Name" />
-          <Text
-            variant="body2"
-            maxW="full"
-            color="text.main"
-            wordBreak="break-all"
-          >
-            {contractInfo.name ?? contractInfo.label}
-          </Text>
-        </div>
-        <div>
-          <InstantiatorRemark remark={contractInfo.remark} />
-          <ContractInstantiatorCell
-            contractInfo={contractInfo}
-            isReadOnly={false}
-          />
-        </div>
-      </Flex>
+      showLastUpdate && (
+        <Flex gap={3} direction="column" w="full">
+          <div>
+            <MobileLabel label="Contract Name" />
+            <Text
+              variant="body2"
+              maxW="full"
+              color="text.main"
+              wordBreak="break-all"
+            >
+              {contractInfo.name ?? contractInfo.label}
+            </Text>
+          </div>
+          <div>
+            <InstantiatorRemark remark={contractInfo.remark} />
+            <ContractInstantiatorCell
+              contractInfo={contractInfo}
+              isReadOnly={false}
+            />
+          </div>
+        </Flex>
+      )
     }
     bottomContent={
       contractInfo.latestUpdated ? (

diff --git a/src/lib/components/table/contracts/ContractsTableRow.tsx b/src/lib/components/table/contracts/ContractsTableRow.tsx
@@ -14,18 +14,20 @@ interface ContractsTableRowProps {
   contractInfo: ContractInfo;
   templateColumns: string;
   onRowSelect: (contract: BechAddr32) => void;
+  showTag: boolean;
+  showLastUpdate: boolean;
   isReadOnly: boolean;
   withCTA?: CTAInfo;
-  withoutTag?: boolean;
 }
 
 export const ContractsTableRow = ({
   contractInfo,
   templateColumns,
   onRowSelect,
+  showTag,
+  showLastUpdate,
   isReadOnly,
   withCTA,
-  withoutTag,
 }: ContractsTableRowProps) => (
   <Grid
     templateColumns={templateColumns}
@@ -51,20 +53,27 @@ export const ContractsTableRow = ({
       />
     </TableRow>
 
-    {!withoutTag && (
+    {showTag && (
       <TableRow>
         <TagsCell contractLocalInfo={contractInfo} isReadOnly={isReadOnly} />
       </TableRow>
     )}
-    <TableRow>
-      <ContractInstantiatorCell
-        contractInfo={contractInfo}
-        isReadOnly={isReadOnly}
-      />
-    </TableRow>
+
+    {showLastUpdate && (
+      <TableRow>
+        <ContractInstantiatorCell
+          contractInfo={contractInfo}
+          isReadOnly={isReadOnly}
+        />
+      </TableRow>
+    )}
 
     {!isReadOnly && (
-      <ContractsTableRowCTA contractInfo={contractInfo} withCTA={withCTA} />
+      <ContractsTableRowCTA
+        contractInfo={contractInfo}
+        withCTA={withCTA}
+        showLastUpdate={showLastUpdate}
+      />
     )}
   </Grid>
 );
diff --git a/src/lib/components/table/contracts/ContractsTableRowCTA.tsx b/src/lib/components/table/contracts/ContractsTableRowCTA.tsx
@@ -13,11 +13,7 @@ import {
 } from "@chakra-ui/react";
 
 import { TableRow } from "../tableComponents";
-import {
-  useCurrentChain,
-  useInternalNavigate,
-  useMobile,
-} from "lib/app-provider";
+import { useCurrentChain, useInternalNavigate } from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import { CustomIcon } from "lib/components/icon";
 import {
@@ -27,8 +23,8 @@ import {
   RemoveContractModal,
   SaveContractDetailsModal,
 } from "lib/components/modal";
-import { ContractInteractionTabs } from "lib/types";
 import type { ContractInfo, LVPair, Option } from "lib/types";
+import { ContractInteractionTabs } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 const StyledIconButton = chakra(IconButton, {
@@ -59,7 +55,6 @@ export const ContractsTableRowCTA = ({
   const navigate = useInternalNavigate();
 
   const isAdmin = !!address && address === contractInfo.admin;
-  const isMobile = useMobile();
   return withCTA ? (
     <>
       <TableRow>
@@ -201,35 +196,33 @@ export const ContractsTableRowCTA = ({
           </Flex>
         </TableRow>
       )}
-      {!isMobile && (
-        <TableRow>
-          <Box onClick={(e) => e.stopPropagation()}>
-            {contractInfo.lists ? (
-              <AddToOtherListModal
-                contractLocalInfo={contractInfo}
-                triggerElement={
-                  <StyledIconButton
-                    aria-label="button"
-                    icon={<CustomIcon name="bookmark-solid" />}
-                    variant="ghost-primary"
-                  />
-                }
-              />
-            ) : (
-              <SaveContractDetailsModal
-                contractLocalInfo={contractInfo}
-                triggerElement={
-                  <StyledIconButton
-                    aria-label="button"
-                    icon={<CustomIcon name="bookmark" />}
-                    variant="ghost-gray"
-                  />
-                }
-              />
-            )}
-          </Box>
-        </TableRow>
-      )}
+      <TableRow>
+        <Box onClick={(e) => e.stopPropagation()}>
+          {contractInfo.lists ? (
+            <AddToOtherListModal
+              contractLocalInfo={contractInfo}
+              triggerElement={
+                <StyledIconButton
+                  aria-label="button"
+                  icon={<CustomIcon name="bookmark-solid" />}
+                  variant="ghost-primary"
+                />
+              }
+            />
+          ) : (
+            <SaveContractDetailsModal
+              contractLocalInfo={contractInfo}
+              triggerElement={
+                <StyledIconButton
+                  aria-label="button"
+                  icon={<CustomIcon name="bookmark" />}
+                  variant="ghost-gray"
+                />
+              }
+            />
+          )}
+        </Box>
+      </TableRow>
     </>
   );
 };
diff --git a/src/lib/pages/code-details/components/code-info/index.ts b/src/lib/pages/code-details/components/code-info/index.ts
@@ -1,2 +1,3 @@
-export * from "./table/CodeContractsTable";
+export * from "./table/CodeContractsTableFull";
+export * from "./table/CodeContractsTableLite";
 export * from "./CodeInfoSection";
diff --git a/...ts/code-info/table/CodeContractsTable.tsx → ...ode-info/table/CodeContractsTableFull.tsx b/...ts/code-info/table/CodeContractsTable.tsx → ...ode-info/table/CodeContractsTableFull.tsx
@@ -9,12 +9,12 @@ import type { BechAddr32 } from "lib/types";
 
 import { NoContracts } from "./NoContracts";
 
-interface CodeContractsTableProps {
+interface CodeContractsTableFullProps {
   codeId: number;
 }
 
-export const CodeContractsTable = observer(
-  ({ codeId }: CodeContractsTableProps) => {
+export const CodeContractsTableFull = observer(
+  ({ codeId }: CodeContractsTableFullProps) => {
     const navigate = useInternalNavigate();
     const onRowSelect = (contract: BechAddr32) =>
       navigate({