Skip to content

Commit

Permalink
feat: tx info
Browse files Browse the repository at this point in the history
  • Loading branch information
radzionc committed Mar 14, 2023
1 parent 45663f9 commit bf59521
Show file tree
Hide file tree
Showing 8 changed files with 245 additions and 7 deletions.
3 changes: 2 additions & 1 deletion apps/enterprise/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -127,4 +128,4 @@
"parser": "typescript"
}
}
}
}
37 changes: 37 additions & 0 deletions apps/enterprise/src/errors/components/ErrorBoundary.tsx
Original file line number Diff line number Diff line change
@@ -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
}
}

25 changes: 25 additions & 0 deletions apps/enterprise/src/lib/ui/Tag.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
1 change: 0 additions & 1 deletion apps/enterprise/src/pages/dao/staking/TokenStaking.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
32 changes: 32 additions & 0 deletions apps/enterprise/src/pages/dao/treasury/TxAsset.tsx
Original file line number Diff line number Diff line change
@@ -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 <>🤷‍♂️</>
}
58 changes: 53 additions & 5 deletions apps/enterprise/src/pages/dao/treasury/TxItem.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand All @@ -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>
Expand Down
79 changes: 79 additions & 0 deletions apps/enterprise/src/pages/dao/treasury/TxMessage.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
17 changes: 17 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit bf59521

Please sign in to comment.