feat: implement transactions table in contract details page

src/lib/components/actionMsg/MultipleActionMsgType.tsx → src/lib/components/action-msg/MultipleActionsMsg.tsx

@@ -3,12 +3,10 @@ import { Flex, Tag } from "@chakra-ui/react";
 import type { Message } from "lib/types";
 import { countMessages } from "lib/utils";
 
-interface MultipleActionMsgTypeProps {
+interface MultipleActionsMsgProps {
   messages: Message[];
 }
-export const MultipleActionMsgType = ({
-  messages,
-}: MultipleActionMsgTypeProps) => {
+export const MultipleActionsMsg = ({ messages }: MultipleActionsMsgProps) => {
   const displayMessagesCount = countMessages(messages).filter(
     (msg) => msg.count !== 0
   );

src/lib/components/action-msg/SingleActionMsg.tsx

@@ -0,0 +1,25 @@
+import { useSingleActionMsgProps } from "lib/hooks/useSingleMessageProps";
+import type { Message } from "lib/types";
+
+import { SingleMsg } from "./SingleMsg";
+
+interface SingleActionMsgProps {
+  messages: Message[];
+  type: string;
+  success: boolean;
+  singleMsg?: boolean;
+}
+export const SingleActionMsg = ({
+  messages,
+  type,
+  success,
+  singleMsg,
+}: SingleActionMsgProps) => {
+  const singleMsgProps = useSingleActionMsgProps(
+    type,
+    success,
+    messages,
+    singleMsg
+  );
+  return <SingleMsg {...singleMsgProps} />;
+};

src/lib/components/table/MsgDetail.tsx

@@ -1,15 +1,15 @@
-import { SingleActionMsgType } from "../actionMsg/SingleActionMsgType";
+import { SingleActionMsg } from "../action-msg/SingleActionMsg";
 import { AccordionStepperItem } from "lib/components/AccordionStepperItem";
 import type { Message } from "lib/types";
 import { extractMsgType } from "lib/utils";
 
 import { TableRow } from "./tableComponents";
 
-interface AccordionProps {
+interface MsgDetailProps {
   message: Message;
 }
 
-export const MsgDetail = ({ message }: AccordionProps) => (
+export const MsgDetail = ({ message }: MsgDetailProps) => (
   <TableRow
     h="40px"
     borderBottom="none"
@@ -23,7 +23,7 @@ export const MsgDetail = ({ message }: AccordionProps) => (
     }}
   >
     <AccordionStepperItem />
-    <SingleActionMsgType
+    <SingleActionMsg
       messages={[message]}
       type={extractMsgType(message.type)}
       success

src/lib/hooks/useSingleMessageTemplate.ts → src/lib/hooks/useSingleMessageProps.ts

@@ -1,5 +1,6 @@
 import { useWallet } from "@cosmos-kit/react";
 
+import type { SingleMsgProps } from "lib/components/action-msg/SingleMsg";
 import type { LinkType } from "lib/components/ExplorerLink";
 import { getAddressTypeByLength, useContractStore } from "lib/hooks";
 import type { ContractInfo } from "lib/stores/contract";
@@ -14,7 +15,7 @@ import type {
   DetailMigrate,
   DetailClearAdmin,
 } from "lib/types";
-import { coinToString } from "lib/utils";
+import { formatBalanceWithDenom } from "lib/utils";
 import { getExecuteMsgTags } from "lib/utils/executeTags";
 
 /**
@@ -186,7 +187,7 @@ const sendSingleMsgProps = (
   return isSuccess
     ? {
         type: "Send",
-        bolds: coinToString(detail.amount),
+        bolds: formatBalanceWithDenom(detail.amount),
         text2: "to",
         link1: {
           type: getAddressTypeByLength(chainName, detail.toAddress) as LinkType,
@@ -471,12 +472,12 @@ const otherMessageSingleMsgProps = (
       };
 };
 
-export const useSingleActionMsgTemplate = (
+export const useSingleActionMsgProps = (
   type: string,
   isSuccess: boolean,
   messages: Message[],
   singleMsg: Option<boolean>
-) => {
+): SingleMsgProps => {
   const { currentChainName } = useWallet();
   const { getContractInfo } = useContractStore();
 

src/lib/model/contract.ts

@@ -142,7 +142,6 @@ export const useContractData = (
 export const useContractDetailsTableCounts = (
   contractAddress: ContractAddr
 ) => {
-  // TODO - add other table count
   const { data: executeCount = 0, refetch: refetchExecute } =
     useExecuteTxsCountByContractAddress(contractAddress);
   const { data: migrationCount = 0, refetch: refetchMigration } =

src/lib/pages/contract-details/components/tables/transactions/TxsTableRow.tsx

@@ -1,18 +1,21 @@
-import { Flex, Icon, Text, Grid, useDisclosure, Tag } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
 import {
-  MdCheck,
-  MdClose,
-  MdKeyboardArrowDown,
-  MdKeyboardArrowUp,
-} from "react-icons/md";
+  Flex,
+  Icon,
+  Text,
+  Grid,
+  useDisclosure,
+  Tag,
+  Box,
+} from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { MdCheck, MdClose, MdKeyboardArrowDown } from "react-icons/md";
 
-import { MultipleActionMsgType } from "lib/components/actionMsg/MultipleActionMsgType";
-import { SingleActionMsgType } from "lib/components/actionMsg/SingleActionMsgType";
+import { MultipleActionsMsg } from "lib/components/action-msg/MultipleActionsMsg";
+import { SingleActionMsg } from "lib/components/action-msg/SingleActionMsg";
+import { SingleMsg } from "lib/components/action-msg/SingleMsg";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { TableRow } from "lib/components/table";
 import { MsgDetail } from "lib/components/table/MsgDetail";
-import { SingleMsg } from "lib/pages/past-txs/components/SingleMsg";
 import type { AllTransaction } from "lib/types";
 import { ActionMsgType } from "lib/types";
 import { dateFromNow, extractMsgType, formatUTC } from "lib/utils";
@@ -22,6 +25,31 @@ interface TxsTableRowProps {
   templateColumnsStyle: string;
 }
 
+const renderActionsMessages = (transaction: AllTransaction) => {
+  if (transaction.actionMsgType === ActionMsgType.SINGLE_ACTION_MSG) {
+    return (
+      <SingleActionMsg
+        messages={transaction.messages}
+        type={extractMsgType(transaction.messages[0].type)}
+        success={transaction.success}
+      />
+    );
+  }
+  if (transaction.actionMsgType === ActionMsgType.MULTIPLE_ACTION_MSG) {
+    return <MultipleActionsMsg messages={transaction.messages} />;
+  }
+  return (
+    <SingleMsg
+      type="Message"
+      tags={
+        transaction.messages.length === 1
+          ? [extractMsgType(transaction.messages[0].type)?.substring(3)]
+          : [transaction.messages.length.toString()]
+      }
+    />
+  );
+};
+
 export const TxsTableRow = ({
   transaction,
   templateColumnsStyle,
@@ -33,37 +61,13 @@ export const TxsTableRow = ({
     if (transaction.messages.length > 1) setIsAccordion(true);
   }, [transaction.messages]);
 
-  const renderActionsMessages = () => {
-    if (transaction.actionMsgType === ActionMsgType.SINGLEACTIONMSG) {
-      return (
-        <SingleActionMsgType
-          messages={transaction.messages}
-          type={extractMsgType(transaction.messages[0].type)}
-          success={transaction.success}
-        />
-      );
-    }
-    if (transaction.actionMsgType === ActionMsgType.MULTIPLEACTIONMSG) {
-      return <MultipleActionMsgType messages={transaction.messages} />;
-    }
-    return (
-      <SingleMsg
-        type="Message"
-        tags={
-          transaction.messages.length === 1
-            ? [extractMsgType(transaction.messages[0].type)?.substring(3)]
-            : [transaction.messages.length.toString()]
-        }
-      />
-    );
-  };
-
   return (
-    <>
+    <Box w="full" minW="min-content">
       <Grid
         templateColumns={templateColumnsStyle}
-        onClick={onToggle}
+        onClick={isAccordion ? onToggle : undefined}
         _hover={{ background: "divider.main" }}
+        cursor={isAccordion ? "pointer" : "none"}
       >
         <TableRow>
           <ExplorerLink
@@ -81,7 +85,7 @@ export const TxsTableRow = ({
         </TableRow>
         <TableRow>
           <Flex gap={1} flexWrap="wrap">
-            {renderActionsMessages()}
+            {renderActionsMessages(transaction)}
             {transaction.isIbc && (
               <Tag borderRadius="full" bg="rgba(164, 133, 231, 0.6)">
                 IBC
@@ -113,8 +117,13 @@ export const TxsTableRow = ({
           </Flex>
         </TableRow>
         <TableRow>
-          {isAccordion && !isOpen && <MdKeyboardArrowDown />}
-          {isAccordion && isOpen && <MdKeyboardArrowUp />}
+          {isAccordion && (
+            <Icon
+              as={MdKeyboardArrowDown}
+              transform={isOpen ? "rotate(180deg)" : "rotate(0deg)"}
+              boxSize="18px"
+            />
+          )}
         </TableRow>
       </Grid>
       {isAccordion && (
@@ -124,6 +133,6 @@ export const TxsTableRow = ({
           ))}
         </Grid>
       )}
-    </>
+    </Box>
   );
 };

src/lib/pages/contract-details/components/tables/transactions/Transactions.tsx → src/lib/pages/contract-details/components/tables/transactions/index.tsx

@@ -63,7 +63,7 @@ export const TransactionsTable = ({
     );
 
   const templateColumnsStyle =
-    "170px 70px minmax(350px, 1fr) repeat(2, max(170px)) max(300px) max(50px)";
+    "170px 70px minmax(360px, 1fr) repeat(2, max(170px)) max(300px) max(50px)";
 
   return (
     <Flex direction="column" overflowX="scroll">

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

@@ -26,10 +26,10 @@ import { ContractDesc } from "./components/contract-description/ContractDesc";
 import { ContractTop } from "./components/ContractTop";
 import { InstantiateInfo } from "./components/InstantiateInfo";
 import { JsonInfo } from "./components/JsonInfo";
-import { ExecuteTable } from "./components/tables/execute/Execute";
+import { ExecuteTable } from "./components/tables/execute";
 import { MigrationTable } from "./components/tables/migration";
 import { RelatedProposalsTable } from "./components/tables/related-proposals";
-import { TransactionsTable } from "./components/tables/transactions/Transactions";
+import { TransactionsTable } from "./components/tables/transactions";
 import { TokenSection } from "./components/TokenSection";
 
 interface ContractDetailsBodyProps {
@@ -98,7 +98,6 @@ const ContractDetailsBody = ({ contractAddress }: ContractDetailsBodyProps) => {
             Related Proposals
           </CustomTab>
         </TabList>
-        {/* TODOs: Wireup with real table data, Make table component, and render each table with different data under each TabPanel */}
         <TabPanels>
           <TabPanel p={0}>
             <TransactionsTable

src/lib/pages/past-txs/components/MsgDetail.tsx

@@ -6,6 +6,8 @@ import { BsArrowCounterclockwise } from "react-icons/bs";
 
 import { useFabricateFee, useSimulateFee, useResendTx } from "lib/app-provider";
 import { AccordionStepperItem } from "lib/components/AccordionStepperItem";
+import type { SingleMsgProps } from "lib/components/action-msg/SingleMsg";
+import { SingleMsg } from "lib/components/action-msg/SingleMsg";
 import { useContractStore } from "lib/hooks";
 import { FailedModal } from "lib/pages/instantiate/component";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
@@ -27,9 +29,6 @@ import {
   onClickRedo,
 } from "lib/utils";
 
-import type { SingleMsgProps } from "./SingleMsg";
-import { SingleMsg } from "./SingleMsg";
-
 interface MsgDetailProps {
   msg: Message;
   success: boolean;

src/lib/pages/past-txs/components/PastTxTable.tsx

@@ -15,15 +15,12 @@ import dayjs from "dayjs";
 import { useCallback, useMemo, useState } from "react";
 import type { MouseEvent } from "react";
 import { BsArrowCounterclockwise } from "react-icons/bs";
-import {
-  MdCheck,
-  MdClose,
-  MdKeyboardArrowDown,
-  MdKeyboardArrowUp,
-} from "react-icons/md";
+import { MdCheck, MdClose, MdKeyboardArrowDown } from "react-icons/md";
 
 import { useFabricateFee, useSimulateFee } from "lib/app-provider";
 import { useResendTx } from "lib/app-provider/tx/resend";
+import type { SingleMsgProps } from "lib/components/action-msg/SingleMsg";
+import { SingleMsg } from "lib/components/action-msg/SingleMsg";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { useContractStore } from "lib/hooks";
 import { FailedModal } from "lib/pages/instantiate/component";
@@ -49,8 +46,6 @@ import {
 import { MsgDetail } from "./MsgDetail";
 import type { MultipleMsgProps } from "./MultipleMsg";
 import { MultipleMsg } from "./MultipleMsg";
-import type { SingleMsgProps } from "./SingleMsg";
-import { SingleMsg } from "./SingleMsg";
 
 interface PastTxTableProps {
   element: Transaction;
@@ -547,8 +542,13 @@ const PastTxTable = ({ element }: PastTxTableProps) => {
           </Flex>
         </Td>
         <Td border={hideBorder} color="text.dark">
-          {isAccordion && !isOpen && <MdKeyboardArrowDown />}
-          {isAccordion && isOpen && <MdKeyboardArrowUp />}
+          {isAccordion && (
+            <Icon
+              as={MdKeyboardArrowDown}
+              transform={isOpen ? "rotate(180deg)" : "rotate(0deg)"}
+              boxSize="18px"
+            />
+          )}
         </Td>
       </Tr>
       {isAccordion && (

src/lib/services/contractService.ts

@@ -297,7 +297,7 @@ export const useTxsCountByContractAddress = (
       })
       .then(
         ({ contract_transactions_aggregate }) =>
-          contract_transactions_aggregate?.aggregate?.count
+          contract_transactions_aggregate.aggregate?.count
       );
   }, [contractAddress]);
 

src/lib/types/tx/transaction.ts

@@ -63,9 +63,9 @@ export interface ExecuteTransaction {
 }
 
 export enum ActionMsgType {
-  SINGLEACTIONMSG = "SINGLEACTIONMSG",
-  MULTIPLEACTIONMSG = "MULTIPLEACTIONMSG",
-  OTHERACTIONMSG = "OTHERACTIONMSG",
+  SINGLE_ACTION_MSG = "SINGLEACTIONMSG",
+  MULTIPLE_ACTION_MSG = "MULTIPLEACTIONMSG",
+  OTHER_ACTION_MSG = "OTHERACTIONMSG",
 }
 export interface AllTransaction extends ExecuteTransaction {
   actionMsgType: ActionMsgType;