feat: tx info

Author: radzionc

apps/enterprise/package.json

@@ -40,6 +40,7 @@
     "@mui/icons-material": "^5.10.2",
     "@mui/material": "^5.10.2",
     "@popperjs/core": "^2.11.6",
+    "@terra-money/log-finder-ruleset": "^3.0.2",
     "@terra-money/terra.js": "^3.1.6",
     "@terra-money/wallet-provider": "^3.11.1",
     "@terra.kitchen/utils": "^1.0.7",
@@ -127,4 +128,4 @@
       "parser": "typescript"
     }
   }
-}
+}

apps/enterprise/src/errors/components/ErrorBoundary.tsx

@@ -0,0 +1,37 @@
+import { reportError } from 'errors/errorMonitoring';
+import { ComponentWithChildrenProps } from 'lib/shared/props';
+import React, { Component, ReactNode } from 'react';
+
+interface ErrorBoundaryProps extends ComponentWithChildrenProps {
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+    };
+  }
+
+  static getDerivedStateFromError(_: Error): State {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error): void {
+    reportError(error)
+  }
+
+  render(): React.ReactNode {
+    if (this.state.hasError) {
+      return this.props.fallback || null
+    }
+
+    return this.props.children
+  }
+}
+

apps/enterprise/src/lib/ui/Tag.tsx

@@ -0,0 +1,25 @@
+import { ComponentProps, ReactNode } from 'react'
+import styled from 'styled-components'
+import { HSLA } from 'lib/ui/colors/HSLA'
+import { Text } from 'lib/ui/Text'
+
+type Props = ComponentProps<typeof Text> & {
+  color: HSLA
+  children: ReactNode
+}
+
+const Container = styled(Text) <{ $color: HSLA }>`
+  padding: 4px 8px;
+  border-radius: 8px;
+  color: ${({ $color }) => $color.toCssValue()};
+  background: ${({ $color }) =>
+    $color.getVariant({ a: () => 0.14 }).toCssValue()};
+`
+
+export const Tag = ({ color, children, ...rest }: Props) => {
+  return (
+    <Container as="span" $color={color} {...rest}>
+      {children}
+    </Container>
+  )
+}

apps/enterprise/src/pages/dao/staking/TokenStaking.tsx

@@ -26,7 +26,6 @@ import { SameWidthChildrenRow } from 'lib/ui/Layout/SameWidthChildrenRow';
 import { OverlayOpener } from 'lib/ui/OverlayOpener';
 import { StakeTokenOverlay } from './StakeTokenOverlay';
 import { PrimaryButton } from 'lib/ui/buttons/rect/PrimaryButton';
-import { RewardsPanel } from './RewardsPanel';
 
 const useTokenData = (daoAddress: string, tokenAddress: string) => {
   const { data: token } = useCW20TokenInfoQuery(tokenAddress);

apps/enterprise/src/pages/dao/treasury/TxAsset.tsx

@@ -0,0 +1,32 @@
+import { demicrofy, formatAmount } from "@terra-money/apps/libs/formatting"
+import { isDenom } from "@terra.kitchen/utils"
+import { AssetType } from "chain"
+import { useAssetInfoQuery } from "chain/queries/useAssetInfoQuery"
+import { Spinner } from "lib/ui/Spinner"
+import { Text } from "lib/ui/Text"
+
+interface TxAssetProps {
+  id: string
+  amount: string
+}
+
+export const TxAsset = ({ id, amount }: TxAssetProps) => {
+  const type: AssetType = isDenom(id) ? 'native' : 'cw20'
+
+  const { data, isLoading } = useAssetInfoQuery({ id, type })
+
+  if (data) {
+    const { symbol, decimals } = data
+    return (
+      <Text weight="semibold" color="regular">
+        {formatAmount(demicrofy(amount, decimals))} {symbol}
+      </Text>
+    )
+  }
+
+  if (isLoading) {
+    return <Spinner />
+  }
+
+  return <>🤷‍♂️</>
+}

apps/enterprise/src/pages/dao/treasury/TxItem.tsx

@@ -1,5 +1,5 @@
 import { useWallet } from '@terra-money/wallet-provider';
-import { getFinderUrl, truncateAddress } from '@terra-money/apps/utils';
+import { assertDefined, getFinderUrl, getLast, truncateAddress } from '@terra-money/apps/utils';
 import { TxEvent, TxResponse } from '@terra-money/apps/types';
 import { Container } from '@terra-money/apps/components';
 import { ExpandablePanel } from 'lib/ui/Panel/ExpandablePanel';
@@ -8,6 +8,17 @@ import { Text } from 'lib/ui/Text';
 import { ShyTextButton } from 'lib/ui/buttons/ShyTextButton';
 import { HStack } from 'lib/ui/Stack';
 import { TimeAgo } from 'lib/ui/TimeAgo';
+import {
+  createActionRuleSet,
+  createLogMatcherForActions,
+  getTxCanonicalMsgs,
+} from "@terra-money/log-finder-ruleset"
+import { ErrorBoundary } from 'errors/components/ErrorBoundary';
+import { useTheme } from 'styled-components';
+import { Tag } from 'lib/ui/Tag';
+import { capitalizeFirstLetter } from 'lib/shared/utils/capitalizeFirstLetter';
+import { TxMessage } from './TxMessage';
+import { useCurrentDao } from 'dao/components/CurrentDaoProvider';
 
 interface TxItemProps {
   tx: TxResponse;
@@ -17,17 +28,54 @@ export const TxItem = (props: TxItemProps) => {
   const { tx } = props;
   const { txhash, timestamp, logs } = tx;
   const { network } = useWallet();
-  console.log(timestamp)
+
+  const { address } = useCurrentDao()
 
   const events: TxEvent[] = logs ? logs[0].events : [];
 
   const attributes = events?.flatMap(event => event.attributes);
 
+  const ruleset = createActionRuleSet(network.name)
+  const logMatcher = createLogMatcherForActions(ruleset)
+  const getCanonicalMsgs = (txInfo: TxResponse) => {
+    const matchedMsg = getTxCanonicalMsgs(txInfo, logMatcher)
+    return matchedMsg
+      ? matchedMsg
+        .map((matchedLog) => matchedLog.map(({ transformed }) => transformed))
+        .flat(2)
+      : []
+  }
+
+  const isSuccess = tx.code === 0
+
+  const { colors } = useTheme()
+
   const header = (
     <HStack fullWidth gap={20} wrap="wrap" justifyContent="space-between">
-      <ExternalLink to={getFinderUrl(network.name, txhash)}>
-        <ShyTextButton as="div" text={truncateAddress(txhash)} />
-      </ExternalLink>
+      <HStack alignItems="center" gap={16}>
+        <ExternalLink to={getFinderUrl(network.name, txhash)}>
+          <ShyTextButton as="div" text={truncateAddress(txhash)} />
+        </ExternalLink>
+        <ErrorBoundary>
+          {getCanonicalMsgs(tx).filter(msg => msg).map(
+            (msg, index) => {
+              const { msgType, canonicalMsg } = assertDefined(msg)
+              const type = getLast(msgType.split("/"))
+
+              return (
+                <HStack alignItems="center" gap={8}>
+                  <Tag color={isSuccess ? colors.success : colors.alert}>
+                    {capitalizeFirstLetter(type)}
+                  </Tag>
+                  {canonicalMsg.map((text, index) => (
+                    <TxMessage targetAddress={address} text={text} key={index} />
+                  ))}
+                </HStack>
+              )
+            }
+          )}
+        </ErrorBoundary>
+      </HStack>
       <Text color="supporting" size={14}>
         <TimeAgo value={new Date(timestamp)} />
       </Text>

apps/enterprise/src/pages/dao/treasury/TxMessage.tsx

@@ -0,0 +1,79 @@
+import { capitalizeFirstLetter, truncateAddress } from "@terra-money/apps/utils"
+import { AccAddress, Coin, Coins, } from "@terra-money/terra.js"
+import { useWallet } from "@terra-money/wallet-provider"
+import { isDenom } from "@terra.kitchen/utils"
+import { ExternalLink } from "lib/navigation/Link/ExternalLink"
+import { ShyTextButton } from "lib/ui/buttons/ShyTextButton"
+import { HStack } from "lib/ui/Stack"
+import { Text } from "lib/ui/Text"
+import { ReactNode } from "react"
+import { TxAsset } from "./TxAsset"
+
+interface TxMessageProps {
+  text: string
+  targetAddress: string
+}
+
+const validateTokens = (tokens: any) => {
+  const validate = ({ denom }: Coin) =>
+    isDenom(denom) || AccAddress.validate(denom)
+
+  try {
+    const coins = new Coins(tokens)
+    return coins.toArray().every(validate)
+  } catch {
+    return false
+  }
+}
+
+export const TxMessage = ({ text, targetAddress }: TxMessageProps) => {
+  const { network } = useWallet()
+
+  const parse = (word: string, index: number): ReactNode => {
+    if (!word) return null
+    if (word === targetAddress) return 'treasury'
+
+    if (word.endsWith(",")) return <>{parse(word.slice(0, -1), index)},</>
+
+    if (validateTokens(word)) {
+      const list = new Coins(word).toArray()
+
+      return (
+        <span style={{ color: 'purple' }}>
+          {list.length > 1 ? 'multiple tokens' : list.map((coin, index) => {
+            // todo: style address
+            const denom = coin.toData().denom
+            const [amount] = word.split(denom)
+            return <TxAsset amount={amount} id={denom} />
+          })}
+
+        </span>
+      )
+    }
+
+    if (AccAddress.validate(word)) {
+      return (
+        <ExternalLink to={`https://terrasco.pe/${network.name}/address/${word}`}>
+          <ShyTextButton text={truncateAddress(word)} as="div" />
+        </ExternalLink>
+      )
+    }
+
+    if (index === 0) {
+      return capitalizeFirstLetter(word)
+    }
+
+    return <span>{word}</span>
+  }
+  return (
+    <Text as="div" style={{ textAlign: 'start' }} color="supporting">
+      <HStack alignItems="center" gap={4}>
+        {text.split(' ').map((word, index) => {
+          const parsed = parse(word, index)
+
+          return <span key={index}>{parsed}</span>
+        })}
+      </HStack>
+    </Text>
+  )
+}

yarn.lock

@@ -3981,6 +3981,7 @@ __metadata:
     "@mui/icons-material": ^5.10.2
     "@mui/material": ^5.10.2
     "@popperjs/core": ^2.11.6
+    "@terra-money/log-finder-ruleset": ^3.0.2
     "@terra-money/terra.js": ^3.1.6
     "@terra-money/wallet-provider": ^3.11.1
     "@terra.kitchen/utils": ^1.0.7
@@ -5238,6 +5239,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@terra-money/log-finder-ruleset@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "@terra-money/log-finder-ruleset@npm:3.0.2"
+  dependencies:
+    "@terra-money/log-finder": ^1.1.6
+  checksum: 71ecf5645ab1baa94aa600d24f09cb3ef88666b83580c789e6059dc5ccecdec57cecf85c0d230f2f34f6ee714e49837e65ac72257c05e2508003c446369774d5
+  languageName: node
+  linkType: hard
+
+"@terra-money/log-finder@npm:^1.1.6":
+  version: 1.1.6
+  resolution: "@terra-money/log-finder@npm:1.1.6"
+  checksum: 68519c37109f8d5788ca14028031b50e00059cf275d6d1c5127e311790fb2ffc3df1088ad001eee6c1f31c9f1be2bd29ba6320ef178330c3c3567a1624f9bca8
+  languageName: node
+  linkType: hard
+
 "@terra-money/terra.js@npm:^3.1.3":
   version: 3.1.3
   resolution: "@terra-money/terra.js@npm:3.1.3"