Merge pull request #970 from alleslabs/feat/account-detail-lite

Feat: Implement Account Details Page

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#970](https://github.com/alleslabs/celatone-frontend/pull/970) Support account details lite version
 - [#964](https://github.com/alleslabs/celatone-frontend/pull/964) Support migrate page lite version with LCD
 - [#966](https://github.com/alleslabs/celatone-frontend/pull/966) Support lite version for proposal details
 - [#958](https://github.com/alleslabs/celatone-frontend/pull/958) Support lite version for block index page

src/config/chain/osmosis.ts

@@ -58,7 +58,7 @@ export const OSMOSIS_CHAIN_CONFIGS: ChainConfigs = {
     prettyName: "Osmosis Testnet",
     lcd: "https://lcd.osmotest5.osmosis.zone",
     rpc: "https://osmosis-testnet-rpc.polkachu.com:443",
-    indexer: "https://osmo-test-5-graphql.alleslabs.dev/v1/graphql",
+    indexer: "",
     wallets: [...keplrWallets],
     features: {
       faucet: {

src/lib/components/modal/account/SaveNewAccount.tsx

@@ -17,7 +17,7 @@ import { ControllerInput, ControllerTextarea } from "lib/components/forms";
 import { useGetMaxLengthError, useHandleAccountSave } from "lib/hooks";
 import { useFormatAddresses } from "lib/hooks/useFormatAddresses";
 import { useAccountStore } from "lib/providers/store";
-import { useAccountType } from "lib/services/accountService";
+import { useAccountType } from "lib/services/account";
 import type { BechAddr } from "lib/types";
 import { AccountType } from "lib/types";
 

src/lib/pages/account-details/components/AccountHeader.tsx

@@ -12,7 +12,7 @@ import {
 import { PrimaryNameMark } from "lib/components/PrimaryNameMark";
 import { TotalValue } from "lib/components/TotalValue";
 import { useAccountStore } from "lib/providers/store";
-import type { AccountData } from "lib/services/account";
+import type { AccountData } from "lib/services/types";
 import type { BechAddr, HexAddr, Option } from "lib/types";
 
 interface AccounHeaderProps {

src/lib/pages/account-details/components/tables/index.ts

@@ -1,5 +1,5 @@
 export * from "./txs";
 export * from "./AdminContractsTable";
-export * from "./InstantiatedContractsTable";
+export * from "./instantiated-contracts";
 export * from "./OpenedProposalsTable";
 export * from "./StoredCodesTable";

src/lib/pages/account-details/components/tables/instantiated-contracts/Full.tsx

@@ -0,0 +1,118 @@
+import { Box } from "@chakra-ui/react";
+import type { ChangeEvent } from "react";
+
+import { useInternalNavigate, useMobile } from "lib/app-provider";
+import { Pagination } from "lib/components/pagination";
+import { usePaginator } from "lib/components/pagination/usePaginator";
+import { EmptyState, ErrorFetching } from "lib/components/state";
+import {
+  ContractsTable,
+  MobileTitle,
+  TableTitle,
+  ViewMore,
+} from "lib/components/table";
+import { useAccountContracts } from "lib/pages/account-details/data";
+import type { BechAddr32 } from "lib/types";
+
+import type { InstantiatedContractsTableProps } from "./types";
+
+export const InstantiatedContractsTableFull = ({
+  address,
+  scrollComponentId,
+  totalData,
+  refetchCount,
+  onViewMore,
+}: InstantiatedContractsTableProps) => {
+  const isMobile = useMobile();
+  const navigate = useInternalNavigate();
+  const onRowSelect = (contract: BechAddr32) =>
+    navigate({
+      pathname: "/contracts/[contract]",
+      query: { contract },
+    });
+
+  const {
+    pagesQuantity,
+    currentPage,
+    setCurrentPage,
+    pageSize,
+    setPageSize,
+    offset,
+  } = usePaginator({
+    total: totalData,
+    initialState: {
+      pageSize: 10,
+      currentPage: 1,
+      isDisabled: false,
+    },
+  });
+  const { contracts, isLoading } = useAccountContracts(
+    address,
+    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 isMobileOverview = isMobile && !!onViewMore;
+  return (
+    <Box mt={{ base: 4, md: 8 }}>
+      {isMobileOverview ? (
+        <MobileTitle
+          title="Contract Instances"
+          count={totalData}
+          onViewMore={onViewMore}
+        />
+      ) : (
+        <>
+          <TableTitle
+            title="Contract Instances"
+            count={totalData}
+            helperText="This account instantiated the following contracts"
+            mb={2}
+          />
+          <ContractsTable
+            contracts={contracts}
+            isLoading={isLoading}
+            emptyState={
+              !contracts ? (
+                <ErrorFetching dataName="contracts" />
+              ) : (
+                <EmptyState
+                  message="No contracts have been instantiated by this account before."
+                  withBorder
+                />
+              )
+            }
+            onRowSelect={onRowSelect}
+          />
+        </>
+      )}
+      {!!totalData &&
+        (onViewMore
+          ? totalData > 5 && !isMobile && <ViewMore onClick={onViewMore} />
+          : totalData > 10 && (
+              <Pagination
+                currentPage={currentPage}
+                pagesQuantity={pagesQuantity}
+                offset={offset}
+                totalData={totalData}
+                scrollComponentId={scrollComponentId}
+                pageSize={pageSize}
+                onPageChange={onPageChange}
+                onPageSizeChange={onPageSizeChange}
+              />
+            ))}
+    </Box>
+  );
+};

src/lib/pages/account-details/components/tables/instantiated-contracts/Lite.tsx

@@ -0,0 +1,71 @@
+import { Box } from "@chakra-ui/react";
+
+import { useInternalNavigate, useMobile } from "lib/app-provider";
+import { EmptyState, ErrorFetching } from "lib/components/state";
+import {
+  ContractsTable,
+  MobileTitle,
+  TableTitle,
+  ViewMore,
+} from "lib/components/table";
+import { useAccountContractsLcd } from "lib/pages/account-details/data";
+import type { BechAddr32 } from "lib/types";
+
+import type { InstantiatedContractsTableProps } from "./types";
+
+export const InstantiatedContractsTableLite = ({
+  address,
+  onViewMore,
+}: InstantiatedContractsTableProps) => {
+  const isMobile = useMobile();
+  const navigate = useInternalNavigate();
+  const onRowSelect = (contract: BechAddr32) =>
+    navigate({
+      pathname: "/contracts/[contract]",
+      query: { contract },
+    });
+  const { contracts, isLoading } = useAccountContractsLcd(address);
+
+  const contractsCount = contracts?.length;
+  const isMobileOverview = isMobile && !!onViewMore;
+  return (
+    <Box mt={{ base: 4, md: 8 }}>
+      {isMobileOverview ? (
+        <MobileTitle
+          title="Contract Instances"
+          count={contractsCount}
+          onViewMore={onViewMore}
+        />
+      ) : (
+        <>
+          <TableTitle
+            title="Contract Instances"
+            count={contractsCount}
+            helperText="This account instantiated the following contracts"
+            mb={2}
+          />
+          <ContractsTable
+            contracts={onViewMore ? contracts?.slice(0, 5) : contracts}
+            isLoading={isLoading}
+            emptyState={
+              !contracts ? (
+                <ErrorFetching dataName="contracts" />
+              ) : (
+                <EmptyState
+                  message="No contracts have been instantiated by this account before."
+                  withBorder
+                />
+              )
+            }
+            onRowSelect={onRowSelect}
+            showLastUpdate={false}
+          />
+        </>
+      )}
+      {!!contractsCount &&
+        (onViewMore
+          ? contractsCount > 5 && !isMobile && <ViewMore onClick={onViewMore} />
+          : null)}
+    </Box>
+  );
+};

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

@@ -0,0 +1,19 @@
+import { observer } from "mobx-react-lite";
+
+import { useTierConfig } from "lib/app-provider";
+
+import { InstantiatedContractsTableFull } from "./Full";
+import { InstantiatedContractsTableLite } from "./Lite";
+import type { InstantiatedContractsTableProps } from "./types";
+
+export const InstantiatedContractsTable = observer(
+  (props: InstantiatedContractsTableProps) => {
+    const isFullTier = useTierConfig() === "full";
+
+    return isFullTier ? (
+      <InstantiatedContractsTableFull {...props} />
+    ) : (
+      <InstantiatedContractsTableLite {...props} />
+    );
+  }
+);

src/lib/pages/account-details/components/tables/instantiated-contracts/types.ts

@@ -0,0 +1,9 @@
+import type { BechAddr, Option } from "lib/types";
+
+export interface InstantiatedContractsTableProps {
+  address: BechAddr;
+  scrollComponentId: string;
+  totalData: Option<number>;
+  refetchCount: () => void;
+  onViewMore?: () => void;
+}