Feat/pool tx table

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#294](https://github.com/alleslabs/celatone-frontend/pull/294) Add Pool related txs table
 - [#296](https://github.com/alleslabs/celatone-frontend/pull/296) Add pool header and pool assets section for pool details page
 - [#295](https://github.com/alleslabs/celatone-frontend/pull/295) Add expand/collapse all for unsupported pool list
 - [#277](https://github.com/alleslabs/celatone-frontend/pull/277) Wire up data for pool navigation page

src/lib/components/AccordionStepperItem.tsx

@@ -1,27 +1,30 @@
+import type { FlexProps } from "@chakra-ui/react";
 import { Flex } from "@chakra-ui/react";
 
+const AccordionStepperItemLine = (props: FlexProps) => (
+  <Flex
+    {...props}
+    w="1px"
+    h="28px"
+    right="45%"
+    background="pebble.600"
+    position="absolute"
+    visibility="hidden"
+    zIndex={0}
+  />
+);
+
 export const AccordionStepperItem = () => (
   <Flex position="relative">
-    <Flex
-      id="before-stepper"
-      w="1px"
-      h="31px"
-      right="45%"
-      bottom="9px"
-      background="pebble.600"
-      position="absolute"
-      visibility="hidden"
-      zIndex={0}
-    />
+    <AccordionStepperItemLine id="before-stepper" bottom="9px" />
     <Flex
       id="stepper"
       borderRadius="full"
       h="10px"
       w="10px"
       borderColor="pebble.600"
       borderWidth="1px"
-      position="relative"
-      zIndex={1}
     />
+    <AccordionStepperItemLine id="after-stepper" top="9px" />
   </Flex>
 );

src/lib/components/CustomTab.tsx

@@ -2,7 +2,7 @@ import type { TabProps } from "@chakra-ui/react";
 import { Button, useTab, Badge, useMultiStyleConfig } from "@chakra-ui/react";
 
 interface CustomTabProps extends TabProps {
-  count?: number;
+  count?: number | string;
 }
 
 export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {

src/lib/components/ExplorerLink.tsx

@@ -20,7 +20,8 @@ export type LinkType =
   | "tx_hash"
   | "code_id"
   | "block_height"
-  | "proposal_id";
+  | "proposal_id"
+  | "pool_id";
 
 interface ExplorerLinkProps extends BoxProps {
   value: string;
@@ -63,6 +64,9 @@ const getNavigationUrl = (
     case "proposal_id":
       url = getExplorerProposalUrl(currentChainName);
       break;
+    case "pool_id":
+      url = "/pools";
+      break;
     case "invalid_address":
       return "";
     default:
@@ -161,7 +165,8 @@ export const ExplorerLink = ({
     type === "contract_address" ||
     type === "user_address" ||
     type === "tx_hash" ||
-    type === "block_height";
+    type === "block_height" ||
+    type === "pool_id";
 
   const [hrefLink, textValue] = [
     getNavigationUrl(type, currentChainName, copyValue || value),

src/lib/components/Loading.tsx

@@ -1,8 +1,12 @@
 import { Flex, Spinner, Text } from "@chakra-ui/react";
 
-export const Loading = () => (
+interface LoadingProps {
+  withBorder?: boolean;
+}
+
+export const Loading = ({ withBorder = true }: LoadingProps) => (
   <Flex
-    borderY="1px solid"
+    borderY={withBorder ? "1px solid" : undefined}
     borderColor="pebble.700"
     width="full"
     py="60px"

src/lib/components/TokenCard.tsx

@@ -25,12 +25,7 @@ export const TokenCard = ({
   const { symbol, price, amount, precision, id } = userBalance.balance;
 
   return (
-    <Tooltip
-      label={`Token ID: ${id}`}
-      maxW="240px"
-      whiteSpace="pre-line"
-      textAlign="center"
-    >
+    <Tooltip label={`Token ID: ${id}`} maxW="240px" textAlign="center">
       <Flex
         className="copier-wrapper"
         direction="column"

src/lib/components/Tooltip.tsx

@@ -26,6 +26,7 @@ export const TooltipInfo = ({
   <Tooltip {...tooltipProps}>
     <div style={{ cursor: "pointer" }}>
       <CustomIcon
+        color="pebble.600"
         name={iconVariant === "solid" ? "info-circle-solid" : "info-circle"}
         boxSize={3}
         m={0}

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

@@ -0,0 +1,42 @@
+import { Flex, Text } from "@chakra-ui/react";
+import type { Coin } from "@cosmjs/stargate";
+
+import { Copier } from "../copy";
+import { TooltipInfo } from "../Tooltip";
+import { formatBalanceWithDenom } from "lib/utils";
+
+interface MsgTokenProps {
+  coin: Coin;
+  symbol?: string;
+  precision?: number;
+  fontWeight?: number;
+}
+
+export const MsgToken = ({
+  coin,
+  symbol,
+  precision,
+  fontWeight = 600,
+}: MsgTokenProps) => (
+  <Flex role="group" align="center" gap={1}>
+    <Text fontWeight={fontWeight}>
+      {formatBalanceWithDenom({
+        coin,
+        symbol,
+        precision,
+      })}
+    </Text>
+    <TooltipInfo
+      label={`Token ID: ${coin.denom}`}
+      maxW="240px"
+      textAlign="center"
+    />
+    <Copier
+      type={symbol ? "supported_asset" : "unsupported_asset"}
+      value={coin.denom}
+      copyLabel="Token ID Copied!"
+      display="none"
+      ml="4px"
+    />
+  </Flex>
+);

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

@@ -2,13 +2,11 @@ import { Tag, Text, Flex } from "@chakra-ui/react";
 import type { Coin } from "@cosmjs/stargate";
 import { snakeCase } from "snake-case";
 
-import { Copier } from "../copy";
-import { CustomIcon } from "../icon";
-import { Tooltip } from "../Tooltip";
 import type { LinkType } from "lib/components/ExplorerLink";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { Option } from "lib/types";
-import { formatBalanceWithDenom } from "lib/utils";
+
+import { MsgToken } from "./MsgToken";
 
 interface LinkElement {
   type: LinkType;
@@ -50,35 +48,17 @@ export const SingleMsg = ({
     <Flex gap={1} alignItems="center" flexWrap="wrap">
       {type} {text1}
       {tokens?.map((token: Token, index: number) => (
-        <Flex
+        <MsgToken
           key={index.toString() + token}
-          role="group"
-          align="center"
-          gap={1}
-        >
-          <Text fontWeight="medium">
-            {formatBalanceWithDenom({
-              coin: {
-                denom: token.id,
-                amount: token.amount,
-              } as Coin,
-              symbol: token.symbol,
-              precision: token.precision,
-            })}
-          </Text>
-          <Tooltip label={`Token ID: ${token.id}`} maxW="240px">
-            <Flex cursor="pointer">
-              <CustomIcon name="info-circle" boxSize="3" color="pebble.600" />
-            </Flex>
-          </Tooltip>
-          <Copier
-            type={token.symbol ? "supported_asset" : "unsupported_asset"}
-            value={token.id}
-            copyLabel="Token ID Copied!"
-            display="none"
-            ml="4px"
-          />
-        </Flex>
+          coin={
+            {
+              denom: token.id,
+              amount: token.amount,
+            } as Coin
+          }
+          symbol={token.symbol}
+          precision={token.precision}
+        />
       ))}
       {/* Tags  */}
       {tags?.map((tag: string, index: number) => (

src/lib/components/table/AccordionTx.tsx

@@ -43,18 +43,14 @@ export const AccordionTx = ({
   const [showButton, setShowButton] = useState(false);
   return (
     <TableRow
+      className="accordion-stepper-wrapper"
       minH={0}
       h="40px"
       borderBottom="none"
       pl={accordionSpacing}
       gap={3}
       _hover={{ background: "pebble.800" }}
       transition="all .25s ease-in-out"
-      css={{
-        "&:not(:first-of-type) div#before-stepper": {
-          visibility: "visible",
-        },
-      }}
       onMouseEnter={() => setShowButton(true)}
       onMouseLeave={() => setShowButton(false)}
     >

src/lib/components/table/tableComponents.ts

@@ -52,6 +52,14 @@ export const TableRow = chakra(GridItem, {
   baseStyle: tableRowBaseStyle,
 });
 
+export const TableNoBorderRow = chakra(GridItem, {
+  baseStyle: {
+    ...tableRowBaseStyle,
+    borderBottom: undefined,
+    borderColor: undefined,
+  },
+});
+
 export const TableRowFreeze = chakra(GridItem, {
   baseStyle: {
     ...tableRowBaseStyle,

src/lib/data/tx.ts

@@ -51,6 +51,8 @@ export type TypeUrl =
   | "/ibc.core.channel.v1.MsgTimeoutOnClose"
   | "/ibc.core.channel.v1.MsgAcknowledgement"
   // osmosis
+  | "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn"
+  | "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountOut"
   | "/osmosis.gamm.poolmodels.balancer.v1beta1.MsgCreateBalancerPool"
   | "/osmosis.gamm.poolmodels.stableswap.v1beta1.MsgCreateStableswapPool"
   | "/osmosis.gamm.poolmodels.stableswap.v1beta1.MsgStableSwapAdjustScalingFactors"

src/lib/gql/gql.ts

@@ -59,6 +59,8 @@ const documents = {
     types.GetPoolListByDenomsCountDocument,
   "\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n    }\n  }\n":
     types.GetPoolByPoolIdDocument,
+  "\n  query getPoolsByPoolIds($poolIds: [Int!]!) {\n    pools(where: { id: { _in: $poolIds } }) {\n      id\n      liquidity\n    }\n  }\n":
+    types.GetPoolsByPoolIdsDocument,
   "\n  query getRelatedProposalsByContractAddressPagination(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_proposals(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { proposal_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      proposal {\n        title\n        status\n        voting_end_time\n        deposit_end_time\n        type\n        account {\n          address\n        }\n        is_expedited\n      }\n      proposal_id\n      resolved_height\n    }\n  }\n":
     types.GetRelatedProposalsByContractAddressPaginationDocument,
   "\n  query getRelatedProposalsCountByContractAddress($contractAddress: String!) {\n    contract_proposals_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
@@ -77,7 +79,7 @@ const documents = {
     types.GetTxsByAddressPaginationDocument,
   "\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetTxsCountByAddressDocument,
-  "\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n":
+  "\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc, transaction_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n":
     types.GetTxsByPoolIdPaginationDocument,
   "\n  query getTxsCountByPoolId($expression: pool_transactions_bool_exp) {\n    pool_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetTxsCountByPoolIdDocument,
@@ -175,6 +177,9 @@ export function graphql(
 export function graphql(
   source: "\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n    }\n  }\n"
 ): typeof documents["\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getPoolsByPoolIds($poolIds: [Int!]!) {\n    pools(where: { id: { _in: $poolIds } }) {\n      id\n      liquidity\n    }\n  }\n"
+): typeof documents["\n  query getPoolsByPoolIds($poolIds: [Int!]!) {\n    pools(where: { id: { _in: $poolIds } }) {\n      id\n      liquidity\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getRelatedProposalsByContractAddressPagination(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_proposals(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { proposal_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      proposal {\n        title\n        status\n        voting_end_time\n        deposit_end_time\n        type\n        account {\n          address\n        }\n        is_expedited\n      }\n      proposal_id\n      resolved_height\n    }\n  }\n"
 ): typeof documents["\n  query getRelatedProposalsByContractAddressPagination(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_proposals(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { proposal_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      proposal {\n        title\n        status\n        voting_end_time\n        deposit_end_time\n        type\n        account {\n          address\n        }\n        is_expedited\n      }\n      proposal_id\n      resolved_height\n    }\n  }\n"];
@@ -203,8 +208,8 @@ export function graphql(
   source: "\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
-  source: "\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n"
-): typeof documents["\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n"];
+  source: "\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc, transaction_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n"
+): typeof documents["\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc, transaction_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getTxsCountByPoolId($expression: pool_transactions_bool_exp) {\n    pool_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getTxsCountByPoolId($expression: pool_transactions_bool_exp) {\n    pool_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];