feat: add codes table of an account

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#221](https://github.com/alleslabs/celatone-frontend/pull/221) Add codes of an account
 - [#218](https://github.com/alleslabs/celatone-frontend/pull/218) Add instantiated and admin contracts of an account
 - [#192](https://github.com/alleslabs/celatone-frontend/pull/192) Add alternative sidebar with only icons
 - [#210](https://github.com/alleslabs/celatone-frontend/pull/210) New design for token card, currently support price

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

@@ -0,0 +1,18 @@
+import type { GridProps } from "@chakra-ui/react";
+import { Grid } from "@chakra-ui/react";
+
+import { TableHeader } from "lib/components/table";
+
+export const CodesTableHeader = ({
+  templateColumns,
+}: {
+  templateColumns: GridProps["templateColumns"];
+}) => (
+  <Grid templateColumns={templateColumns} minW="min-content">
+    <TableHeader borderTopStyle="none">Code ID</TableHeader>
+    <TableHeader>Code Name</TableHeader>
+    <TableHeader>Contracts</TableHeader>
+    <TableHeader>Uploader</TableHeader>
+    <TableHeader>Permission</TableHeader>
+  </Grid>
+);

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

@@ -0,0 +1,83 @@
+import { Flex, Text, Grid, HStack } from "@chakra-ui/react";
+
+import { useInternalNavigate } from "lib/app-provider";
+import { InstantiateButton } from "lib/components/button";
+import { CodeNameCell } from "lib/components/CodeNameCell";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { SaveOrRemoveCodeModal } from "lib/components/modal/code/SaveOrRemoveCode";
+import { PermissionChip } from "lib/components/PermissionChip";
+import { TableRow } from "lib/components/table/tableComponents";
+import type { CodeInfo } from "lib/types";
+
+interface CodesTableRowProps {
+  codeInfo: CodeInfo;
+  templateColumns: string;
+}
+
+export const CodesTableRow = ({
+  codeInfo,
+  templateColumns,
+}: CodesTableRowProps) => {
+  const navigate = useInternalNavigate();
+
+  return (
+    <Grid
+      templateColumns={templateColumns}
+      onClick={() =>
+        navigate({
+          pathname: `/code/${codeInfo.id}`,
+        })
+      }
+      _hover={{ bg: "pebble.900" }}
+      transition="all .25s ease-in-out"
+      cursor="pointer"
+      minW="min-content"
+    >
+      <TableRow>
+        <ExplorerLink
+          type="code_id"
+          value={codeInfo.id.toString()}
+          canCopyWithHover
+        />
+      </TableRow>
+      <TableRow>
+        <CodeNameCell code={codeInfo} />
+      </TableRow>
+      <TableRow>
+        <Text
+          variant="body2"
+          onClick={(e) => e.stopPropagation()}
+          cursor="text"
+          w="fit-content"
+          m="auto"
+          px={2}
+        >
+          {codeInfo.contractCount ?? "N/A"}
+        </Text>
+      </TableRow>
+      <TableRow>
+        <ExplorerLink
+          value={codeInfo.uploader}
+          type="user_address"
+          canCopyWithHover
+        />
+      </TableRow>
+      <TableRow>
+        <Flex justify="space-between" align="center" w="full">
+          <PermissionChip
+            instantiatePermission={codeInfo.instantiatePermission}
+            permissionAddresses={codeInfo.permissionAddresses}
+          />
+          <HStack onClick={(e) => e.stopPropagation()}>
+            <InstantiateButton
+              instantiatePermission={codeInfo.instantiatePermission}
+              permissionAddresses={codeInfo.permissionAddresses}
+              codeId={codeInfo.id}
+            />
+            <SaveOrRemoveCodeModal codeInfo={codeInfo} />
+          </HStack>
+        </Flex>
+      </TableRow>
+    </Grid>
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from "./CodesTableHeader";
+export * from "./CodesTableRow";

src/lib/components/table/contracts/ContractsTableHeader.tsx

@@ -0,0 +1,19 @@
+import type { GridProps } from "@chakra-ui/react";
+import { Grid } from "@chakra-ui/react";
+
+import { TableHeader } from "lib/components/table";
+
+export const ContractsTableHeader = ({
+  templateColumns,
+}: {
+  templateColumns: GridProps["templateColumns"];
+}) => (
+  <Grid templateColumns={templateColumns} minW="min-content">
+    <TableHeader borderTopStyle="none">Contract Address</TableHeader>
+    <TableHeader>Contract Name</TableHeader>
+    <TableHeader>Tags</TableHeader>
+    <TableHeader>Instantiator</TableHeader>
+    <TableHeader>Timestamp</TableHeader>
+    <TableHeader />
+  </Grid>
+);

src/lib/components/table/contracts/ContractTableRow.tsx → src/lib/components/table/contracts/ContractsTableRow.tsx

@@ -24,14 +24,14 @@ const StyledIconButton = chakra(IconButton, {
   },
 });
 
-interface ContractTableRowProps {
+interface ContractsTableRowProps {
   contractInfo: ContractInfo;
-  templateColumnsStyle: string;
+  templateColumns: string;
 }
 
 const InstantiatorRender = ({
   contractInfo: { remark, latestUpdater },
-}: Pick<ContractTableRowProps, "contractInfo">) => {
+}: Pick<ContractsTableRowProps, "contractInfo">) => {
   const getAddressType = useGetAddressType();
 
   /**
@@ -83,15 +83,15 @@ const InstantiatorRender = ({
   }
 };
 
-export const ContractTableRow = ({
+export const ContractsTableRow = ({
   contractInfo,
-  templateColumnsStyle,
-}: ContractTableRowProps) => {
+  templateColumns,
+}: ContractsTableRowProps) => {
   const navigate = useInternalNavigate();
 
   return (
     <Grid
-      templateColumns={templateColumnsStyle}
+      templateColumns={templateColumns}
       onClick={() =>
         navigate({
           pathname: `/contract/${contractInfo.contractAddress}`,

src/lib/components/table/contracts/index.tsx

@@ -0,0 +1,2 @@
+export * from "./ContractsTableHeader";
+export * from "./ContractsTableRow";

src/lib/model/account.ts

@@ -13,7 +13,7 @@ import type { HumanAddr } from "lib/types";
  * Counts for stored codes, contract admin, contract instances, transactions, and opened proposals tables
  */
 export const useAccountDetailsTableCounts = (walletAddress: HumanAddr) => {
-  const { data: codesCount, refetch: refetchCodes } =
+  const { data: codesCount, refetch: refetchCodesCount } =
     useCodeListCountByWalletAddress(walletAddress);
   const { data: contractsAdminCount, refetch: refetchContractsAdminCount } =
     useContractListCountByAdmin(walletAddress);
@@ -44,7 +44,7 @@ export const useAccountDetailsTableCounts = (walletAddress: HumanAddr) => {
       countTxs,
       proposalCount,
     },
-    refetchCodes,
+    refetchCodesCount,
     refetchContractsAdminCount,
     refetchContractsCount,
     refetchCountTxs,

src/lib/pages/account-details/components/tables/codes/CodesTable.tsx

@@ -0,0 +1,124 @@
+import { Box, Flex } from "@chakra-ui/react";
+import { observer } from "mobx-react-lite";
+import type { ChangeEvent } from "react";
+
+import { Loading } from "lib/components/Loading";
+import { Pagination } from "lib/components/pagination";
+import { usePaginator } from "lib/components/pagination/usePaginator";
+import { EmptyState } from "lib/components/state/EmptyState";
+import { TableContainer } from "lib/components/table";
+import { CodesTableHeader, CodesTableRow } from "lib/components/table/codes";
+import { TableTitle } from "lib/components/table/TableTitle";
+import { ViewMore } from "lib/components/table/ViewMore";
+import { useCodeStored } from "lib/pages/account-details/data";
+import type { HumanAddr, Option } from "lib/types";
+
+interface CodesTableProps {
+  walletAddress: HumanAddr;
+  scrollComponentId: string;
+  totalData: Option<number>;
+  refetchCount: () => void;
+  onViewMore?: () => void;
+}
+
+const CodesTableBody = observer(
+  ({
+    walletAddress,
+    scrollComponentId,
+    totalData,
+    refetchCount,
+    onViewMore,
+  }: CodesTableProps) => {
+    const {
+      pagesQuantity,
+      currentPage,
+      setCurrentPage,
+      pageSize,
+      setPageSize,
+      offset,
+    } = usePaginator({
+      total: totalData,
+      initialState: {
+        pageSize: 10,
+        currentPage: 1,
+        isDisabled: false,
+      },
+    });
+    const { codes, isLoading } = useCodeStored(
+      walletAddress,
+      offset,
+      onViewMore ? 5 : pageSize
+    );
+
+    const onPageChange = (nextPage: number) => {
+      refetchCount();
+      setCurrentPage(nextPage);
+    };
+
+    const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
+      const size = Number(e.target.value);
+      refetchCount();
+      setPageSize(size);
+      setCurrentPage(1);
+    };
+
+    const templateColumns =
+      "max(80px) minmax(320px, 1fr) max(120px) max(160px) minmax(320px, 0.75fr)";
+
+    if (isLoading) return <Loading />;
+    if (!codes?.length)
+      return (
+        <Flex
+          py="64px"
+          direction="column"
+          borderY="1px solid"
+          borderColor="pebble.700"
+        >
+          <EmptyState message="This account did not stored any codes before." />
+        </Flex>
+      );
+    return (
+      <>
+        <TableContainer>
+          <CodesTableHeader templateColumns={templateColumns} />
+          {codes.map((code) => (
+            <CodesTableRow
+              key={code.id + code.uploader + code.name}
+              codeInfo={code}
+              templateColumns={templateColumns}
+            />
+          ))}
+        </TableContainer>
+        {totalData &&
+          (onViewMore
+            ? totalData > 5 && <ViewMore onClick={onViewMore} />
+            : totalData > 10 && (
+                <Pagination
+                  currentPage={currentPage}
+                  pagesQuantity={pagesQuantity}
+                  offset={offset}
+                  totalData={totalData}
+                  scrollComponentId={scrollComponentId}
+                  pageSize={pageSize}
+                  onPageChange={onPageChange}
+                  onPageSizeChange={onPageSizeChange}
+                />
+              ))}
+      </>
+    );
+  }
+);
+
+export const CodesTable = ({
+  totalData,
+  ...componentProps
+}: CodesTableProps) => (
+  <Box mt={12} mb={4}>
+    <TableTitle
+      title="Stored Codes"
+      count={totalData ?? 0}
+      helperText="This account stored the following codes"
+    />
+    <CodesTableBody totalData={totalData} {...componentProps} />
+  </Box>
+);

src/lib/pages/account-details/components/tables/codes/index.tsx

@@ -0,0 +1 @@
+export * from "./CodesTable";