[After #925] Feat/cfe-414-code-lite

CHANGELOG.md

@@ -39,6 +39,8 @@ 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
 - [#918](https://github.com/alleslabs/celatone-frontend/pull/918) Support lite version for delegation informations

src/lib/app-provider/env.ts

@@ -10,14 +10,6 @@ export enum CELATONE_QUERY_KEYS {
   // TABLE
   ACCOUNT_TABLE_COUNTS = "CELATONE_QUERY_ACCOUNT_TABLE_COUNTS",
   CONTRACT_TABLE_COUNTS = "CELATONE_QUERY_CONTRACT_TABLE_COUNTS",
-  // CONTRACT,CODE LCD
-  CODE_INFO = "CELATONE_QUERY_CODE_INFO",
-  CODE_INFO_LCD = "CELATONE_QUERY_CODE_INFO_LCD",
-  CONTRACT_LCD = "CELATONE_QUERY_CONTRACT_LCD",
-  CONTRACT_QUERY_MSGS = "CELATONE_QUERY_CONTRACT_QUERY_MSGS",
-  CONTRACT_QUERY_LCD = "CELATONE_QUERY_CONTRACT_QUERY_LCD",
-  CONTRACT_STATE = "CELATONE_QUERY_CONTRACT_STATE",
-  CONTRACTS_BY_CODE_ID = "CELATONE_QUERY_CONTRACTS_BY_CODE_ID",
   // ACCOUNT
   ACCOUNT_DATA = "CELATONE_QUERY_ACCOUNT_DATA",
   ACCOUNT_TYPE = "CELATONE_QUERY_ACCOUNT_TYPE",
@@ -34,9 +26,16 @@ export enum CELATONE_QUERY_KEYS {
   CODES_BY_WALLET_ADDRESS = "CELATONE_QUERY_CODES_BY_WALLET_ADDRESS",
   CODES_BY_IDS = "CELATONE_QUERY_CODES_BY_IDS",
   CODE_DATA = "CELATONE_QUERY_CODE_DATA",
-  // CONTRACT GQL
+  CODE_DATA_LCD = "CELATONE_QUERY_CODE_DATA_LCD",
+  // CONTRACT
   CONTRACTS = "CELATONE_QUERY_CONTRACTS",
   CONTRACT_DATA = "CELATONE_QUERY_CONTRACT_DATA",
+  CONTRACT_LCD = "CELATONE_QUERY_CONTRACT_LCD",
+  CONTRACT_QUERY_MSGS = "CELATONE_QUERY_CONTRACT_QUERY_MSGS",
+  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",

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>
+);

src/lib/components/LabelText.tsx

@@ -3,7 +3,7 @@ import { Flex, Text } from "@chakra-ui/react";
 
 import { TooltipInfo } from "./Tooltip";
 
-interface LabelTextProps extends FlexProps {
+export interface LabelTextProps extends FlexProps {
   label: string;
   labelWeight?: number;
   labelColor?: string;

src/lib/components/modal/code/SaveNewCode.tsx

@@ -10,9 +10,13 @@ import { NumberInput, TextInput } from "lib/components/forms";
 import { CustomIcon } from "lib/components/icon";
 import { useGetMaxLengthError } from "lib/hooks";
 import { useCodeStore } from "lib/providers/store";
-import { useCodeInfoLcd } from "lib/services/wasm/code";
+import { useCodeLcd } from "lib/services/wasm/code";
 import type { BechAddr } from "lib/types";
-import { getNameAndDescriptionDefault, getPermissionHelper } from "lib/utils";
+import {
+  getNameAndDescriptionDefault,
+  getPermissionHelper,
+  isId,
+} from "lib/utils";
 
 interface SaveNewCodeModalProps {
   buttonProps: ButtonProps;
@@ -55,25 +59,25 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
   const { isCodeIdSaved, saveNewCode, updateCodeInfo, getCodeLocalInfo } =
     useCodeStore();
 
-  const { refetch, isFetching, isRefetching } = useCodeInfoLcd(codeId, {
+  const { refetch, isFetching, isRefetching } = useCodeLcd(Number(codeId), {
     enabled: false,
     retry: false,
     cacheTime: 0,
-    onSuccess(data) {
+    onSuccess: (data) => {
       const { message, messageColor } = getPermissionHelper(
         address,
-        data.codeInfo.instantiatePermission.permission,
-        data.codeInfo.instantiatePermission.addresses
+        data.instantiatePermission,
+        data.permissionAddresses
       );
       setCodeIdStatus({
         state: "success",
-        message: `${message} (${data.codeInfo.instantiatePermission.permission})`,
+        message: `${message} (${data.instantiatePermission})`,
         messageColor,
       });
-      setUploader(data.codeInfo.creator);
+      setUploader(data.uploader);
       setUploaderStatus({ state: "success" });
     },
-    onError() {
+    onError: () => {
       setCodeIdStatus({ state: "error", message: "Invalid Code ID" });
       setUploader("Not Found");
       setUploaderStatus({ state: "error" });
@@ -132,7 +136,8 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
         });
       } else {
         const timer = setTimeout(() => {
-          refetch();
+          if (isId(codeId)) refetch();
+          else setCodeIdStatus({ state: "error", message: "Invalid Code ID" });
         }, 500);
 
         return () => clearTimeout(timer);

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

@@ -6,16 +6,16 @@ import { PermissionChip } from "../PermissionChip";
 import type { FormStatus } from "lib/components/forms";
 import { UploadIcon } from "lib/components/icon";
 import { useCodeStore } from "lib/providers/store";
-import type { CodeInfoResponseLcd } from "lib/services/types";
-import { useCodeInfoLcd } from "lib/services/wasm/code";
+import type { Code } from "lib/services/types";
+import { useCodeLcd } from "lib/services/wasm/code";
 import { AccessConfigPermission } from "lib/types";
 import { isId } from "lib/utils";
 
 import { CodeSelectDrawerButton } from "./CodeSelectDrawerButton";
 
 interface CodeSelectProps extends Omit<FlexProps, "onSelect"> {
   onCodeSelect: (code: string) => void;
-  setCodeHash: (data: CodeInfoResponseLcd) => void;
+  setCodeHash: (data: Code) => void;
   codeId: string;
   status: FormStatus;
 }
@@ -29,9 +29,9 @@ export const CodeSelect = ({
 }: CodeSelectProps) => {
   const { getCodeLocalInfo } = useCodeStore();
   const name = getCodeLocalInfo(Number(codeId))?.name;
-  const { data: codeInfo } = useCodeInfoLcd(codeId, {
-    onSuccess: setCodeHash,
+  const { data } = useCodeLcd(Number(codeId), {
     enabled: isId(codeId),
+    onSuccess: setCodeHash,
   });
 
   const isError = status.state === "error";
@@ -66,12 +66,9 @@ export const CodeSelect = ({
               <DotSeparator />
               <PermissionChip
                 instantiatePermission={
-                  codeInfo?.codeInfo.instantiatePermission.permission ??
-                  AccessConfigPermission.UNKNOWN
-                }
-                permissionAddresses={
-                  codeInfo?.codeInfo.instantiatePermission.addresses ?? []
+                  data?.instantiatePermission ?? AccessConfigPermission.UNKNOWN
                 }
+                permissionAddresses={data?.permissionAddresses ?? []}
               />
             </Flex>
           </Flex>

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

@@ -5,7 +5,7 @@ import type { Control, FieldPath, FieldValues } from "react-hook-form";
 import { AmpEvent, track } from "lib/amplitude";
 import { ControllerInput } from "lib/components/forms";
 import type { FormStatus } from "lib/components/forms";
-import type { CodeInfoResponseLcd } from "lib/services/types";
+import type { Code } from "lib/services/types";
 import type { Option } from "lib/types";
 
 import { CodeSelect } from "./CodeSelect";
@@ -16,7 +16,7 @@ interface CodeSelectSectionProps<T extends FieldValues> {
   control: Control<T>;
   error: Option<string>;
   onCodeSelect: (codeId: string) => void;
-  setCodeHash: (data: CodeInfoResponseLcd) => void;
+  setCodeHash: (data: Code) => void;
   status: FormStatus;
 }
 

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}

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>

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 />
       </>
     )}

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 ? (