feat(components): support opinit transaction

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#648](https://github.com/alleslabs/celatone-frontend/pull/648) Support OPInit transaction in initia
 - [#654](https://github.com/alleslabs/celatone-frontend/pull/654) Add recent modules page
 - [#653](https://github.com/alleslabs/celatone-frontend/pull/653) Migrate from stone-12 to stone-12-1
 - [#637](https://github.com/alleslabs/celatone-frontend/pull/637) Add amp module interaction and code snippet property

src/lib/app-provider/env.ts

@@ -89,8 +89,7 @@ export enum CELATONE_QUERY_KEYS {
   TXS_BY_ADDRESS_PAGINATION = "CELATONE_QUERY_TXS_BY_ADDRESS_PAGINATION",
   TXS_BY_ADDRESS_COUNT = "CELATONE_QUERY_TXS_BY_ADDRESS_COUNT",
   TXS = "CELATONE_QUERY_TXS",
-  TXS_BY_BLOCK_HEIGHT_PAGINATION = "CELATONE_QUERY_TXS_BY_BLOCK_HEIGHT",
-  TXS_BY_BLOCK_HEIGHT_COUNT = "CELATONE_QUERY_TXS_BY_BLOCK_HEIGHT_COUNT",
+  TXS_BY_BLOCK_HEIGHT = "CELATONE_QUERY_TXS_BY_BLOCK_HEIGHT",
   // ICNS
   ICNS_NAMES_BY_ADDRESS = "CELATONE_QUERY_ICNS_NAMES_BY_ADDRESS",
   ADDRESS_BY_ICNS_NAME = "CELATONE_QUERY_ADDRESS_BY_ICNS_NAME",

src/lib/app-provider/hooks/index.ts

@@ -14,3 +14,4 @@ export * from "./useConfig";
 export * from "./useCurrentChain";
 export * from "./useConvertHexAddress";
 export * from "./usePlatform";
+export * from "./useInitia";

src/lib/app-provider/hooks/useInitia.ts

@@ -0,0 +1,8 @@
+import { useCelatoneApp } from "../contexts";
+
+export const useInitia = () => {
+  const {
+    chainConfig: { chain },
+  } = useCelatoneApp();
+  return chain === "initia";
+};

src/lib/components/TxFilterSelection.tsx

@@ -16,12 +16,13 @@ import { matchSorter } from "match-sorter";
 import type { CSSProperties } from "react";
 import { useMemo, useState, useRef, forwardRef } from "react";
 
-import { useMoveConfig, useWasmConfig } from "lib/app-provider";
+import { useInitia, useMoveConfig, useWasmConfig } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import {
   DEFAULT_BASE_TX_FILTERS,
   DEFAULT_MOVE_TX_FILTERS,
   DEFAULT_WASM_TX_FILTERS,
+  DEFAULT_INITIA_TX_FILTERS,
 } from "lib/data";
 import { displayActionValue, mergeRefs } from "lib/utils";
 
@@ -50,6 +51,7 @@ const listItemProps: CSSProperties = {
 const BASE_OPTIONS = Object.keys(DEFAULT_BASE_TX_FILTERS);
 const WASM_OPTIONS = Object.keys(DEFAULT_WASM_TX_FILTERS);
 const MOVE_OPTIONS = Object.keys(DEFAULT_MOVE_TX_FILTERS);
+const INITIA_OPTIONS = Object.keys(DEFAULT_INITIA_TX_FILTERS);
 
 // TODO - Refactor this along with TagSelection
 export const TxFilterSelection = forwardRef<
@@ -80,13 +82,16 @@ export const TxFilterSelection = forwardRef<
     const wasm = useWasmConfig({ shouldRedirect: false });
     const move = useMoveConfig({ shouldRedirect: false });
 
+    const isInitia = useInitia();
+
     const options = useMemo(
       () => [
         ...BASE_OPTIONS,
         ...(wasm.enabled ? WASM_OPTIONS : []),
         ...(move.enabled ? MOVE_OPTIONS : []),
+        ...(isInitia ? INITIA_OPTIONS : []),
       ],
-      [wasm.enabled, move.enabled]
+      [wasm.enabled, move.enabled, isInitia]
     );
 
     const partialResults = useMemo(

src/lib/components/table/transactions/TransactionsTableMobileCard.tsx

@@ -51,10 +51,15 @@ export const TransactionsTableMobileCard = ({
         <Flex>
           <RenderActionMessages transaction={transaction} />
           {transaction.isIbc && (
-            <Tag variant="accent-dark" size="sm" w={8} justifyContent="center">
+            <Tag variant="accent-dark" size="sm">
               IBC
             </Tag>
           )}
+          {transaction.isOpinit && (
+            <Tag variant="teal" size="sm">
+              OPInit
+            </Tag>
+          )}
         </Flex>
       }
       bottomContent={

src/lib/components/table/transactions/TransactionsTableRow.tsx

@@ -36,7 +36,6 @@ export const TransactionsTableRow = ({
 }: TransactionsTableRowProps) => {
   const { isOpen, onToggle } = useDisclosure();
   const isAccordion = transaction.messages.length > 1;
-
   return (
     <Box w="full" minW="min-content">
       <Grid
@@ -86,6 +85,11 @@ export const TransactionsTableRow = ({
                 IBC
               </Tag>
             )}
+            {transaction.isOpinit && (
+              <Tag variant="teal" size="sm">
+                OPInit
+              </Tag>
+            )}
           </Flex>
         </TableRow>
 

src/lib/data/constant.ts

@@ -1,5 +1,6 @@
 import type {
   BaseTxFilters,
+  InitiaTxFilters,
   LVPair,
   MoveTxFilters,
   TxFilters,
@@ -59,10 +60,15 @@ export const DEFAULT_MOVE_TX_FILTERS: MoveTxFilters = {
   isMoveScript: false,
 };
 
+export const DEFAULT_INITIA_TX_FILTERS: InitiaTxFilters = {
+  isOpinit: false,
+};
+
 export const DEFAULT_TX_FILTERS: TxFilters = {
   ...DEFAULT_BASE_TX_FILTERS,
   ...DEFAULT_WASM_TX_FILTERS,
   ...DEFAULT_MOVE_TX_FILTERS,
+  ...DEFAULT_INITIA_TX_FILTERS,
 };
 
 export const UPPERBOUND_COUNT = 10000;

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

@@ -60,7 +60,7 @@ export const TxsTable = ({
     data: rawTxCount,
     isLoading: isTxCountLoading,
     refetch: refetchTxsCount,
-  } = useAPITxsCountByAddress(address, isSigner, filters);
+  } = useAPITxsCountByAddress(address, undefined, isSigner, filters);
 
   const txsCount = rawTxCount ?? undefined;
   const isTxsCountTimeout = rawTxCount === null;
@@ -97,6 +97,7 @@ export const TxsTable = ({
 
   const { data: transactions, isLoading } = useTxsByAddress(
     address,
+    undefined,
     isSigner,
     filters,
     offset,

src/lib/pages/block-details/components/BlockTxsTable.tsx

@@ -1,13 +1,8 @@
-import type { ChangeEvent } from "react";
-
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
 import { TransactionsTable } from "lib/components/table";
-import {
-  useTxsByBlockHeightPagination,
-  useTxsCountByBlockHeight,
-} from "lib/services/txService";
+import { useTxsByBlockHeight } from "lib/services/txService";
 
 const scrollComponentId = "block_tx_table_header";
 
@@ -16,41 +11,30 @@ interface BlockTxsTableProps {
 }
 
 export const BlockTxsTable = ({ height }: BlockTxsTableProps) => {
-  const { data: blockTxsCount = 0 } = useTxsCountByBlockHeight(height);
   const {
     pagesQuantity,
+    setTotalData,
     currentPage,
     setCurrentPage,
     pageSize,
     setPageSize,
     offset,
   } = usePaginator({
-    total: blockTxsCount,
     initialState: {
       pageSize: 10,
       currentPage: 1,
       isDisabled: false,
     },
   });
-
-  const { data: blockTxs, isLoading: isBlockTxsLoading } =
-    useTxsByBlockHeightPagination(height, pageSize, offset);
-
-  const onPageChange = (nextPage: number) => {
-    setCurrentPage(nextPage);
-  };
-
-  const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
-    const size = Number(e.target.value);
-    setPageSize(size);
-    setCurrentPage(1);
-  };
+  const { data, isLoading } = useTxsByBlockHeight(height, pageSize, offset, {
+    onSuccess: ({ total }) => setTotalData(total),
+  });
 
   return (
     <>
       <TransactionsTable
-        transactions={blockTxs}
-        isLoading={isBlockTxsLoading}
+        transactions={data?.items}
+        isLoading={isLoading}
         emptyState={
           <EmptyState
             imageVariant="empty"
@@ -61,16 +45,20 @@ export const BlockTxsTable = ({ height }: BlockTxsTableProps) => {
         showRelations={false}
         showTimestamp={false}
       />
-      {blockTxsCount > 10 && (
+      {data && data.total > 10 && (
         <Pagination
           currentPage={currentPage}
           pagesQuantity={pagesQuantity}
           offset={offset}
-          totalData={blockTxsCount}
+          totalData={data.total}
           scrollComponentId={scrollComponentId}
           pageSize={pageSize}
-          onPageChange={onPageChange}
-          onPageSizeChange={onPageSizeChange}
+          onPageChange={setCurrentPage}
+          onPageSizeChange={(e) => {
+            const size = Number(e.target.value);
+            setPageSize(size);
+            setCurrentPage(1);
+          }}
         />
       )}
     </>

src/lib/pages/module-details/components/tables/ModuleTxsTable.tsx

@@ -6,19 +6,21 @@ import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
 import { TransactionsTable, ViewMore } from "lib/components/table";
-import { useModuleTxsByPagination } from "lib/services/txService";
-import type { Nullable, Option } from "lib/types";
+import { useTxsByModule } from "lib/services/txService";
+import type { HexAddr, Option } from "lib/types";
 
 interface ModuleTxsTableProps {
-  moduleId: Option<Nullable<number>>;
+  address: HexAddr;
+  moduleName: string;
   txCount: Option<number>;
   onViewMore?: () => void;
   scrollComponentId?: string;
   refetchCount: () => void;
 }
 
 export const ModuleTxsTable = ({
-  moduleId,
+  address,
+  moduleName,
   txCount,
   onViewMore,
   scrollComponentId,
@@ -46,11 +48,7 @@ export const ModuleTxsTable = ({
     data: moduleTxs,
     isLoading,
     error,
-  } = useModuleTxsByPagination({
-    moduleId,
-    pageSize,
-    offset,
-  });
+  } = useTxsByModule(address, moduleName, offset, pageSize);
 
   const onPageChange = (nextPage: number) => {
     refetchCount();
@@ -72,10 +70,10 @@ export const ModuleTxsTable = ({
   return (
     <>
       <TransactionsTable
-        transactions={moduleTxs}
+        transactions={moduleTxs?.items}
         isLoading={isLoading}
         emptyState={
-          !moduleId || error ? (
+          error ? (
             <EmptyState
               withBorder
               imageVariant="not-found"

src/lib/pages/module-details/index.tsx

@@ -325,7 +325,8 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
                   <TabPanels>
                     <TabPanel p={0}>
                       <ModuleTxsTable
-                        moduleId={moduleId}
+                        address={moduleData.address}
+                        moduleName={moduleData.moduleName}
                         txCount={moduleTxsCount}
                         refetchCount={refetchTxsCount}
                         onViewMore={() => {
@@ -408,7 +409,8 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
                 <TabPanels>
                   <TabPanel p={0}>
                     <ModuleTxsTable
-                      moduleId={moduleId}
+                      address={moduleData.address}
+                      moduleName={moduleData.moduleName}
                       txCount={moduleTxsCount}
                       refetchCount={refetchTxsCount}
                       scrollComponentId={historyTabHeaderId}