feat: implement transactions table in contract details page

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#86](https://github.com/alleslabs/celatone-frontend/pull/86) Add transactions table in contract details page
 - [#74](https://github.com/alleslabs/celatone-frontend/pull/74) Add tokens rendering for contract details page 
 - [#87](https://github.com/alleslabs/celatone-frontend/pull/87) Fix funds didn't microfy before sending tx
 - [#85](https://github.com/alleslabs/celatone-frontend/pull/85) Add sending asset in execute contract page

src/lib/pages/past-txs/components/StepperItem.tsx → src/lib/components/AccordionStepperItem.tsx

@@ -1,6 +1,6 @@
 import { Flex } from "@chakra-ui/react";
 
-export const StepperItem = () => (
+export const AccordionStepperItem = () => (
   <Flex position="relative">
     <Flex
       id="before-stepper"

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

@@ -0,0 +1,23 @@
+import { Flex, Tag } from "@chakra-ui/react";
+
+import type { Message } from "lib/types";
+import { countMessages } from "lib/utils";
+
+interface MultipleActionsMsgProps {
+  messages: Message[];
+}
+export const MultipleActionsMsg = ({ messages }: MultipleActionsMsgProps) => {
+  const displayMessagesCount = countMessages(messages).filter(
+    (msg) => msg.count !== 0
+  );
+  return (
+    <Flex gap={1}>
+      {displayMessagesCount.map((msg, index) => (
+        <Flex key={msg.type} gap={1}>
+          {msg.type} <Tag borderRadius="full">{msg.count}</Tag>
+          {index < displayMessagesCount.length - 1 && ","}
+        </Flex>
+      ))}
+    </Flex>
+  );
+};

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/pages/past-txs/components/SingleMsg.tsx → src/lib/components/action-msg/SingleMsg.tsx

@@ -33,8 +33,9 @@ export const SingleMsg = ({
   text3,
   link2,
 }: SingleMsgProps) => {
+  if (!type) return <Text>Message Unavailable</Text>;
   return (
-    <Flex gap={1} alignItems="center">
+    <Flex gap={1} alignItems="center" flexWrap="wrap">
       {type} {text1}
       {bolds && (
         <Box display="inline-flex">

src/lib/components/table/MsgDetail.tsx

@@ -0,0 +1,33 @@
+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 MsgDetailProps {
+  message: Message;
+}
+
+export const MsgDetail = ({ message }: MsgDetailProps) => (
+  <TableRow
+    h="40px"
+    borderBottom="none"
+    pl="256px"
+    gap={3}
+    _hover={{ background: "divider.main" }}
+    css={{
+      "&:not(:first-of-type) div#before-stepper": {
+        visibility: "visible",
+      },
+    }}
+  >
+    <AccordionStepperItem />
+    <SingleActionMsg
+      messages={[message]}
+      type={extractMsgType(message.type)}
+      success
+      singleMsg
+    />
+  </TableRow>
+);

src/lib/data/queries.ts

@@ -282,3 +282,51 @@ export const getCodeInfoByCodeId = graphql(`
     }
   }
 `);
+
+export const getTxsByContractAddress = graphql(`
+  query getTxsByContractAddress(
+    $contractAddress: String!
+    $offset: Int!
+    $pageSize: Int!
+  ) {
+    contract_transactions(
+      where: { contract: { address: { _eq: $contractAddress } } }
+      order_by: { transaction: { block: { timestamp: desc } } }
+      offset: $offset
+      limit: $pageSize
+    ) {
+      transaction {
+        hash
+        success
+        messages
+        account {
+          address
+        }
+        block {
+          height
+          timestamp
+        }
+        is_execute
+        is_ibc
+        is_instantiate
+        is_send
+        is_store_code
+        is_migrate
+        is_update_admin
+        is_clear_admin
+      }
+    }
+  }
+`);
+
+export const getTxsCountByContractAddress = graphql(`
+  query getTxsCountByContractAddress($contractAddress: String!) {
+    contract_transactions_aggregate(
+      where: { contract: { address: { _eq: $contractAddress } } }
+    ) {
+      aggregate {
+        count
+      }
+    }
+  }
+`);

src/lib/gql/gql.ts

@@ -33,6 +33,10 @@ const documents = {
     types.GetContractListCountByCodeIdDocument,
   "\n  query getCodeInfoByCodeId($codeId: Int!) {\n    codes_by_pk(id: $codeId) {\n      id\n      account {\n        address\n      }\n      transaction {\n        hash\n        block {\n          height\n          timestamp\n        }\n      }\n      code_proposals {\n        proposal_id\n        block {\n          height\n          timestamp\n        }\n      }\n      access_config_permission\n      access_config_addresses\n    }\n  }\n":
     types.GetCodeInfoByCodeIdDocument,
+  "\n  query getTxsByContractAddress(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_transactions(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { transaction: { block: { timestamp: desc } } }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      transaction {\n        hash\n        success\n        messages\n        account {\n          address\n        }\n        block {\n          height\n          timestamp\n        }\n        is_execute\n        is_ibc\n        is_instantiate\n        is_send\n        is_store_code\n        is_migrate\n        is_update_admin\n        is_clear_admin\n      }\n    }\n  }\n":
+    types.GetTxsByContractAddressDocument,
+  "\n  query getTxsCountByContractAddress($contractAddress: String!) {\n    contract_transactions_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
+    types.GetTxsCountByContractAddressDocument,
 };
 
 export function graphql(
@@ -80,6 +84,12 @@ export function graphql(
 export function graphql(
   source: "\n  query getCodeInfoByCodeId($codeId: Int!) {\n    codes_by_pk(id: $codeId) {\n      id\n      account {\n        address\n      }\n      transaction {\n        hash\n        block {\n          height\n          timestamp\n        }\n      }\n      code_proposals {\n        proposal_id\n        block {\n          height\n          timestamp\n        }\n      }\n      access_config_permission\n      access_config_addresses\n    }\n  }\n"
 ): typeof documents["\n  query getCodeInfoByCodeId($codeId: Int!) {\n    codes_by_pk(id: $codeId) {\n      id\n      account {\n        address\n      }\n      transaction {\n        hash\n        block {\n          height\n          timestamp\n        }\n      }\n      code_proposals {\n        proposal_id\n        block {\n          height\n          timestamp\n        }\n      }\n      access_config_permission\n      access_config_addresses\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getTxsByContractAddress(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_transactions(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { transaction: { block: { timestamp: desc } } }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      transaction {\n        hash\n        success\n        messages\n        account {\n          address\n        }\n        block {\n          height\n          timestamp\n        }\n        is_execute\n        is_ibc\n        is_instantiate\n        is_send\n        is_store_code\n        is_migrate\n        is_update_admin\n        is_clear_admin\n      }\n    }\n  }\n"
+): typeof documents["\n  query getTxsByContractAddress(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_transactions(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { transaction: { block: { timestamp: desc } } }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      transaction {\n        hash\n        success\n        messages\n        account {\n          address\n        }\n        block {\n          height\n          timestamp\n        }\n        is_execute\n        is_ibc\n        is_instantiate\n        is_send\n        is_store_code\n        is_migrate\n        is_update_admin\n        is_clear_admin\n      }\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getTxsCountByContractAddress($contractAddress: String!) {\n    contract_transactions_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
+): typeof documents["\n  query getTxsCountByContractAddress($contractAddress: String!) {\n    contract_transactions_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 
 export function graphql(source: string): unknown;
 export function graphql(source: string) {