Feat/recent code lite

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#901](https://github.com/alleslabs/celatone-frontend/pull/901) Support lite version recent codes
 - [#902](https://github.com/alleslabs/celatone-frontend/pull/902) Add publish/republish tag to modules table
 - [#903](https://github.com/alleslabs/celatone-frontend/pull/903) Prevent list pages in lite version
 - [#897](https://github.com/alleslabs/celatone-frontend/pull/897) Add config for lite version support

src/config/chain/terra.ts

@@ -9,7 +9,7 @@ export const TERRA_CHAIN_CONFIGS: ChainConfigs = {
     chain: "terra",
     registryChainName: "terra2testnet",
     prettyName: "Terra Testnet Lite",
-    lcd: "https://pisco-lcd.terra.dev:443",
+    lcd: "https://terra-testnet-api.polkachu.com",
     rpc: "https://terra-testnet-rpc.polkachu.com:443",
     indexer: "https://pisco-1-graphql.alleslabs.dev/v1/graphql",
     wallets: [...staionWallets, ...keplrWallets],
@@ -105,7 +105,7 @@ export const TERRA_CHAIN_CONFIGS: ChainConfigs = {
     chain: "terra",
     registryChainName: "terra2testnet",
     prettyName: "Terra Testnet",
-    lcd: "https://pisco-lcd.terra.dev:443",
+    lcd: "https://terra-testnet-api.polkachu.com",
     rpc: "https://terra-testnet-rpc.polkachu.com:443",
     indexer: "https://pisco-1-graphql.alleslabs.dev/v1/graphql",
     wallets: [...staionWallets, ...keplrWallets],

src/lib/components/LoadNext.tsx

@@ -0,0 +1,32 @@
+import { Button, Flex, Spinner } from "@chakra-ui/react";
+
+import { CustomIcon } from "./icon";
+
+interface LoadNextProps {
+  text: string;
+  fetchNextPage: () => void;
+  isFetchingNextPage: boolean;
+}
+
+export const LoadNext = ({
+  text,
+  fetchNextPage,
+  isFetchingNextPage,
+}: LoadNextProps) => (
+  <Flex w="full" justifyContent="center" align="center" h="64px">
+    {isFetchingNextPage ? (
+      <Spinner />
+    ) : (
+      <Button
+        w="full"
+        h="full"
+        variant="ghost-gray"
+        gap={2}
+        onClick={fetchNextPage}
+      >
+        {text}
+        <CustomIcon name="chevron-down" boxSize="12px" />
+      </Button>
+    )}
+  </Flex>
+);

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

@@ -10,7 +10,7 @@ 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 { useLCDCodeInfo } from "lib/services/codeService";
+import { useCodeInfoLcd } from "lib/services/wasm/code";
 import type { BechAddr } from "lib/types";
 import { getNameAndDescriptionDefault, getPermissionHelper } from "lib/utils";
 
@@ -55,24 +55,22 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
   const { isCodeIdSaved, saveNewCode, updateCodeInfo, getCodeLocalInfo } =
     useCodeStore();
 
-  const { refetch, isFetching, isRefetching } = useLCDCodeInfo(codeId, {
+  const { refetch, isFetching, isRefetching } = useCodeInfoLcd(codeId, {
     enabled: false,
     retry: false,
     cacheTime: 0,
     onSuccess(data) {
       const { message, messageColor } = getPermissionHelper(
         address,
-        data.code_info.instantiate_permission.permission,
-        data.code_info.instantiate_permission.address
-          ? [data.code_info.instantiate_permission.address]
-          : data.code_info.instantiate_permission.addresses
+        data.codeInfo.instantiatePermission.permission,
+        data.codeInfo.instantiatePermission.addresses
       );
       setCodeIdStatus({
         state: "success",
-        message: `${message} (${data.code_info.instantiate_permission.permission})`,
+        message: `${message} (${data.codeInfo.instantiatePermission.permission})`,
         messageColor,
       });
-      setUploader(data.code_info.creator);
+      setUploader(data.codeInfo.creator);
       setUploaderStatus({ state: "success" });
     },
     onError() {

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 { LCDCodeInfoSuccessCallback } from "lib/services/codeService";
-import { useLCDCodeInfo } from "lib/services/codeService";
+import { useCodeInfoLcd } from "lib/services/wasm/code";
+import type { CodeInfoResponseLcd } 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?: LCDCodeInfoSuccessCallback;
+  setCodeHash: (data: CodeInfoResponseLcd) => void;
   codeId: string;
   status: FormStatus;
 }
@@ -29,7 +29,7 @@ export const CodeSelect = ({
 }: CodeSelectProps) => {
   const { getCodeLocalInfo } = useCodeStore();
   const name = getCodeLocalInfo(Number(codeId))?.name;
-  const { data: codeInfo } = useLCDCodeInfo(codeId, {
+  const { data: codeInfo } = useCodeInfoLcd(codeId, {
     onSuccess: setCodeHash,
     enabled: isId(codeId),
   });
@@ -66,11 +66,11 @@ export const CodeSelect = ({
               <DotSeparator />
               <PermissionChip
                 instantiatePermission={
-                  codeInfo?.code_info.instantiate_permission.permission ??
+                  codeInfo?.codeInfo.instantiatePermission.permission ??
                   AccessConfigPermission.UNKNOWN
                 }
                 permissionAddresses={
-                  codeInfo?.code_info.instantiate_permission.addresses ?? []
+                  codeInfo?.codeInfo.instantiatePermission.addresses ?? []
                 }
               />
             </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 { LCDCodeInfoSuccessCallback } from "lib/services/codeService";
+import type { CodeInfoResponseLcd } from "lib/services/wasm/code";
 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?: LCDCodeInfoSuccessCallback;
+  setCodeHash: (data: CodeInfoResponseLcd) => void;
   status: FormStatus;
 }
 

src/lib/components/table/MobileCardTemplate.tsx

@@ -1,4 +1,4 @@
-import { Divider, Flex } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import type { ReactNode } from "react";
 
 interface MobileCardTemplateProps {
@@ -30,16 +30,22 @@ export const MobileCardTemplate = ({
     {middleContent && (
       <Flex
         borderTop="1px solid"
-        borderBottom={bottomContent ? "1px solid" : "0px"}
         borderColor="gray.700"
         pt={3}
-        pb={bottomContent ? 3 : 0}
         direction="column"
       >
         {middleContent}
       </Flex>
     )}
-    {!middleContent && <Divider color="gray.700" size="1px" />}
-    {bottomContent && <Flex>{bottomContent}</Flex>}
+    {bottomContent && (
+      <Flex
+        borderTop="1px solid"
+        borderColor="gray.700"
+        pt={3}
+        direction="column"
+      >
+        {bottomContent}
+      </Flex>
+    )}
   </Flex>
 );

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

@@ -1,6 +1,7 @@
 import { MobileTableContainer, TableContainer } from "../tableComponents";
 import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
+import { ErrorFetching } from "lib/components/state";
 import type { CodeInfo, Option } from "lib/types";
 
 import { CodesTableHeader } from "./CodesTableHeader";
@@ -13,6 +14,7 @@ interface CodesTableProps {
   emptyState: JSX.Element;
   onRowSelect: (codeId: number) => void;
   isReadOnly?: boolean;
+  showCw2andContracts?: boolean;
 }
 
 export const CodesTable = ({
@@ -21,22 +23,23 @@ export const CodesTable = ({
   emptyState,
   onRowSelect,
   isReadOnly = false,
+  showCw2andContracts = true,
 }: CodesTableProps) => {
   const isMobile = useMobile();
 
   if (isLoading) return <Loading />;
-  if (!codes?.length) return emptyState;
+  if (!codes) return <ErrorFetching dataName="codes" />;
+  if (!codes.length) return emptyState;
 
-  const templateColumns = isReadOnly
-    ? "max(100px) minmax(250px, 1fr) minmax(200px, 1fr) max(100px) max(160px) 150px"
-    : "max(100px) minmax(250px, 1fr) minmax(200px, 1fr) max(100px) max(160px) 150px 180px";
+  const templateColumns = `max(100px) minmax(250px, 1fr)${showCw2andContracts ? " minmax(200px, 1fr) max(100px)" : ""} max(160px) 150px ${!isReadOnly ? " 180px" : ""}`;
 
   return isMobile ? (
     <MobileTableContainer>
       {codes.map((code) => (
         <CodesTableMobileCard
           key={code.id + code.uploader + code.name}
           codeInfo={code}
+          showCw2andContracts={showCw2andContracts}
         />
       ))}
     </MobileTableContainer>
@@ -45,6 +48,7 @@ export const CodesTable = ({
       <CodesTableHeader
         templateColumns={templateColumns}
         isReadOnly={isReadOnly}
+        showCw2andContracts={showCw2andContracts}
       />
       {codes.map((code) => (
         <CodesTableRow
@@ -53,6 +57,7 @@ export const CodesTable = ({
           templateColumns={templateColumns}
           onRowSelect={onRowSelect}
           isReadOnly={isReadOnly}
+          showCw2andContracts={showCw2andContracts}
         />
       ))}
     </TableContainer>

src/lib/components/table/codes/CodesTableHeader.tsx

@@ -6,15 +6,21 @@ import { TableHeader } from "../tableComponents";
 export const CodesTableHeader = ({
   templateColumns,
   isReadOnly,
+  showCw2andContracts,
 }: {
   templateColumns: GridProps["templateColumns"];
   isReadOnly: boolean;
+  showCw2andContracts: boolean;
 }) => (
   <Grid templateColumns={templateColumns} minW="min-content">
     <TableHeader>Code ID</TableHeader>
     <TableHeader>Code Name</TableHeader>
-    <TableHeader>CW2 Info</TableHeader>
-    <TableHeader textAlign="center">Contracts</TableHeader>
+    {showCw2andContracts && (
+      <>
+        <TableHeader>CW2 Info</TableHeader>
+        <TableHeader textAlign="center">Contracts</TableHeader>
+      </>
+    )}
     <TableHeader>Uploader</TableHeader>
     <TableHeader>Permission</TableHeader>
     {!isReadOnly && <TableHeader />}

src/lib/components/table/codes/CodesTableMobileCard.tsx

@@ -8,13 +8,13 @@ import { PermissionChip } from "lib/components/PermissionChip";
 import type { CodeInfo } from "lib/types";
 import { getCw2Info } from "lib/utils";
 
-import { CodeNameCell } from "./CodeNameCell";
-
 interface CodesTableMobileCardProps {
   codeInfo: CodeInfo;
+  showCw2andContracts: boolean;
 }
 export const CodesTableMobileCard = ({
   codeInfo,
+  showCw2andContracts,
 }: CodesTableMobileCardProps) => {
   const cw2Info = getCw2Info(codeInfo.cw2Contract, codeInfo.cw2Version);
   const navigate = useInternalNavigate();
@@ -28,21 +28,38 @@ export const CodesTableMobileCard = ({
         })
       }
       topContent={
-        <Flex gap={2} align="center">
-          <MobileLabel variant="body2" label="Code ID" />
-          <ExplorerLink
-            type="code_id"
-            value={codeInfo.id.toString()}
-            showCopyOnHover
-          />
-        </Flex>
+        showCw2andContracts ? (
+          <Flex gap={2} align="center">
+            <MobileLabel variant="body2" label="Code ID" />
+            <ExplorerLink
+              type="code_id"
+              value={codeInfo.id.toString()}
+              showCopyOnHover
+            />
+          </Flex>
+        ) : (
+          <Flex gap={3} w="full">
+            <Flex direction="column" flex="1">
+              <MobileLabel variant="body2" label="Code ID" />
+              <ExplorerLink
+                type="code_id"
+                value={codeInfo.id.toString()}
+                showCopyOnHover
+              />
+            </Flex>
+            <Flex direction="column" flex="1" gap={1}>
+              <MobileLabel variant="body2" label="Permission" />
+              <PermissionChip
+                instantiatePermission={codeInfo.instantiatePermission}
+                permissionAddresses={codeInfo.permissionAddresses}
+                tagSize="xs"
+              />
+            </Flex>
+          </Flex>
+        )
       }
       middleContent={
-        <Flex direction="column" gap={3}>
-          <Flex direction="column">
-            <MobileLabel label="Code Name" />
-            <CodeNameCell code={codeInfo} isReadOnly />
-          </Flex>
+        showCw2andContracts && (
           <Flex direction="column">
             <MobileLabel label="CW2 Info" />
             <Text
@@ -53,30 +70,32 @@ export const CodesTableMobileCard = ({
               {cw2Info ?? "N/A"}
             </Text>
           </Flex>
-        </Flex>
+        )
       }
       bottomContent={
-        <Flex gap={3} w="full">
-          <Flex direction="column" flex="1">
-            <MobileLabel label="Contracts" />
-            <Text
-              variant="body3"
-              onClick={(e) => e.stopPropagation()}
-              cursor="text"
-              color={codeInfo.contractCount ? "text.main" : "text.disabled"}
-            >
-              {codeInfo.contractCount ?? "N/A"}
-            </Text>
-          </Flex>
-          <Flex direction="column" flex="1">
-            <MobileLabel label="Permission" />
-            <PermissionChip
-              instantiatePermission={codeInfo.instantiatePermission}
-              permissionAddresses={codeInfo.permissionAddresses}
-              tagSize="xs"
-            />
+        showCw2andContracts && (
+          <Flex gap={3} w="full">
+            <Flex direction="column" flex="1">
+              <MobileLabel label="Contracts" />
+              <Text
+                variant="body3"
+                onClick={(e) => e.stopPropagation()}
+                cursor="text"
+                color={codeInfo.contractCount ? "text.main" : "text.disabled"}
+              >
+                {codeInfo.contractCount ?? "N/A"}
+              </Text>
+            </Flex>
+            <Flex direction="column" flex="1">
+              <MobileLabel label="Permission" />
+              <PermissionChip
+                instantiatePermission={codeInfo.instantiatePermission}
+                permissionAddresses={codeInfo.permissionAddresses}
+                tagSize="xs"
+              />
+            </Flex>
           </Flex>
-        </Flex>
+        )
       }
     />
   );