Skip to content

Commit

Permalink
fix: display tx amount
Browse files Browse the repository at this point in the history
  • Loading branch information
Tien Nam Dao committed Nov 7, 2022
1 parent eee0389 commit b2ded4e
Show file tree
Hide file tree
Showing 12 changed files with 162 additions and 24 deletions.
38 changes: 26 additions & 12 deletions components/Card/CardInfo/Components/Transfers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { Content } from '../'
import styles from '../style.module.scss'

const Transfers = ({ content }: { content: Content }) => {
const data = content?.transfer || {}
const isNFT = data.tokenType === 'ERC-721'
return (
<div className="block-center sm-wrap flex-justify-start">
<span
Expand All @@ -18,10 +20,8 @@ const Transfers = ({ content }: { content: Content }) => {
)}
>
<span className="padding-right-xs">From</span>
<Typography.LinkText href={LinkMaker.address(content?.transfer?.from)}>
{content?.transfer?.fromText}
</Typography.LinkText>
<CopyButton textCopy={content?.transfer?.from} />
<Typography.LinkText href={LinkMaker.address(data.from)}>{data.fromText}</Typography.LinkText>
<CopyButton textCopy={data.from} />
</span>
<span
className={clsx(
Expand All @@ -34,10 +34,8 @@ const Transfers = ({ content }: { content: Content }) => {
)}
>
<span className="padding-right-xs">To</span>
<Typography.LinkText href={LinkMaker.address(content?.transfer?.to)}>
{content?.transfer?.toText}
</Typography.LinkText>
<CopyButton textCopy={content?.transfer?.to} />
<Typography.LinkText href={LinkMaker.address(data.to)}>{data.toText}</Typography.LinkText>
<CopyButton textCopy={data.to} />
</span>
<span
className={clsx(
Expand All @@ -50,10 +48,26 @@ const Transfers = ({ content }: { content: Content }) => {
)}
>
<span className="padding-right-xs">For</span>
<span className="padding-right-xs">{content?.transfer.value}</span>
<Typography.LinkText href={LinkMaker.token(content?.transfer?.tokenAddress)}>
{content?.transfer?.token}
</Typography.LinkText>
{isNFT ? (
<>
<Typography.LinkText
classes="padding-right-xs"
href={LinkMaker.token(data.tokenAddress, data.tokenId)}
>
TokenID [{data.tokenId}]
</Typography.LinkText>
<Typography.LinkText href={LinkMaker.token(data.tokenAddress)}>
{data.tokenName}
</Typography.LinkText>
</>
) : (
<>
<span className="padding-right-xs">{content?.transfer.value}</span>
<Typography.LinkText href={LinkMaker.token(data.tokenAddress)}>
{data.tokenName}
</Typography.LinkText>
</>
)}
</span>
</div>
)
Expand Down
9 changes: 7 additions & 2 deletions components/Card/CardInfo/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,10 @@ export type Content = {
toText?: string
value?: number
tokenAddress?: string
token?: string
tokenName?: string
tokenSymbol?: string
tokenType?: string
tokenId?: string
}
decode?: DecodeProps
}
Expand Down Expand Up @@ -96,7 +99,9 @@ export default function CardInfo({
[`${responsive?.wrap}-flex-column`]: responsive
})}
>
<div className={clsx(styles.leftColumn, 'col-2 gutter-right padding-bottom-sm ')}>
<div
className={clsx(styles.leftColumn, 'col-2 gutter-right padding-bottom-sm block-ver-center')}
>
<Typography.CardLabel>{label}</Typography.CardLabel>
{type === 'nonce' && <Tag text={'Position'} />}
</div>
Expand Down
88 changes: 88 additions & 0 deletions pages/token/instance/[index].tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import { Breadcumbs, useMobileLayout } from '@astraprotocol/astra-ui'
import { evmApi } from 'api'
import API_LIST from 'api/api_list'
import { AxiosError } from 'axios'
import Container from 'components/Container'
import Head from 'next/head'
import React from 'react'
import { ellipseBetweenText, LinkMaker } from 'utils/helper'
import Web3 from 'web3'
import Layout from '../../../components/Layout'

type Props = {
token: string
tokenData: Token
errorMessage?: string
}

const TokenInstanceDetailPage: React.FC<Props> = props => {
const { isMobile } = useMobileLayout()
const { token, tokenData, errorMessage } = props

const title = tokenData ? `${tokenData.name} (${tokenData.symbol}) - ${process.env.NEXT_PUBLIC_TITLE}` : token
return (
<Layout>
<Head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>{title}</title>
</Head>
<Container>
<Breadcumbs
items={[
{ label: 'Address', link: LinkMaker.token() },
{ label: isMobile ? ellipseBetweenText(token) : token }
]}
/>

<h1 className="text contrast-color-70 margin-top-sm">{'In Development'}</h1>
</Container>
</Layout>
)
}

export async function getServerSideProps({ params }) {
const { token } = params
if (Web3.utils.isAddress(token, 11115)) {
try {
const tokenData = await evmApi.get<TokenDetailResponse>(`${API_LIST.TOKEN_DETAIL}${token}`)
if (tokenData.data.result) {
return {
props: {
errorMessage: '404 Not Found',
token,
tokenData: tokenData.data.result
}
}
}
return {
props: {
errorMessage: tokenData.data.message,
token,
tokenData: null
}
}
} catch (err) {
let errorMessage = err.message
if (err instanceof AxiosError) {
console.log('error api', err.message, err.code, err?.config?.baseURL, err?.config?.url)
if (err.code !== '200') errorMessage = '404 Not Found'
}
return {
props: {
errorMessage: err.message,
token,
tokenData: null
}
}
}
}
return {
props: {
message: 'Token address invalid',
token,
tokenData: null
}
}
}

export default TokenInstanceDetailPage
2 changes: 1 addition & 1 deletion pages/tx/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const BlockDetailPage: React.FC<NextPage> = _ => {
]}
/>
)}
<div style={{ overflow: 'hidden' }}>
<div style={{ overflow: 'hidden' }} className="margin-top-xs">
{loaderTime ? (
<RowLoader row={12} />
) : (
Expand Down
3 changes: 2 additions & 1 deletion types/address.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ interface AddressTransactionData {
}[]
success: boolean
fee: string | number
amount?: string
value?: string
from?: string
to?: string
type: string
Expand Down Expand Up @@ -210,6 +210,7 @@ interface AddressTransactionResponse {
gasWanted: number
gasUsed: number
memo: string
value?: string
timeoutHeight: number
messages: TransactionMessage[]
}
Expand Down
2 changes: 2 additions & 0 deletions types/transactions.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,8 @@ interface EVMTransferItem {
tokenContractAddress: string
tokenName: string
tokenSymbol: string
tokenId?: string
tokenType?: string
fromAddressName: string
toAddressName: string
}
Expand Down
5 changes: 3 additions & 2 deletions utils/helper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -106,8 +106,9 @@ export class LinkMaker {
* @param token
* @returns
*/
static token(token?: string) {
return `/token/${token}`
static token(token?: string, instance?: number | string) {
if (isUndefined(instance)) return `/token/${token}`
return `/token/${token}/instance/${instance}`
}
}

Expand Down
3 changes: 3 additions & 0 deletions views/accounts/hook/useAddressTransaction.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { ethToAstra } from '@astradefi/address-converter'
import API_LIST from 'api/api_list'
import { formatEther } from 'ethers/lib/utils'
import { useEffect, useState } from 'react'
import useSWR from 'swr'
import { caculateTxAmount } from 'views/transactions/utils'

export default function useAddressTransactions(address: string, page: number) {
const [hookData, setState] = useState<UseAddressTransactionData>({
Expand Down Expand Up @@ -33,6 +35,7 @@ export default function useAddressTransactions(address: string, page: number) {
else type = msgTypeShort

return {
value: (d.value ? formatEther(d.value) : caculateTxAmount(d.messages)) || '0',
account: d.account,
blockHash: d.blockHash,
blockHeight: d.blockHeight,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -91,11 +91,11 @@ const AddressTransaction = ({ transaction }: Props) => {
</div>
<div className={clsx('col-2 block-ver-center')}>
<div>
{Number(transaction.amount || '0') >= 0 && (
{Number(transaction.value || '0') >= 0 && (
<>
<TypographyLib.Balance
size="xs"
value={transaction.amount}
value={transaction.value}
currency={''}
icon={<CryptoIcon name={'asa'} size="sm" />}
/>
Expand Down
3 changes: 2 additions & 1 deletion views/transactions/TransactionRowContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ export default function TransactionRowContent({
const { isMobile: isSmallDevice } = useMobileLayout('small')
const statusText = status ? 'success' : 'error'
const isEvm = type === 'MsgEthereumTx'

const addressQuery = hash?.startsWith('0x') ? '' : isEvm ? { type: 'evm' } : ''
return (
<>
Expand Down Expand Up @@ -132,7 +133,7 @@ export default function TransactionRowContent({
</div>
<div className={clsx('col-2 block-ver-center')}>
<div>
{Number(value) >= 0 && (
{Number(value || '0') >= 0 && (
<>
<TypographyLib.Balance
size="xs"
Expand Down
5 changes: 4 additions & 1 deletion views/transactions/hook/useConvertData.ts
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,10 @@ export default function useConvertData({ data }: { data: TransactionDetail }) {
? Number(formatUnits(transfer.amount, transfer.decimals || '1'))
: '',
tokenAddress: transfer.tokenContractAddress,
token: transfer.tokenSymbol
tokenSymbol: transfer.tokenSymbol,
tokenName: transfer.tokenName,
tokenId: transfer.tokenId,
tokenType: transfer.tokenType
}
}
],
Expand Down
24 changes: 22 additions & 2 deletions views/transactions/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { astraToEth } from '@astradefi/address-converter'
import { formatNumber } from '@astraprotocol/astra-ui'
import { cosmosApi, evmApi } from 'api'
import API_LIST from 'api/api_list'
import { BigNumber } from 'ethers'
import { formatEther, formatUnits } from 'ethers/lib/utils'
import numeral from 'numeral'
import { TransacionTypeEnum } from 'utils/constants'
Expand All @@ -23,6 +24,7 @@ export interface TransferItem {
tokenContractAddress?: string
tokenName?: string
tokenSymbol?: string
tokenType?: string
}
export interface TransactionDetail {
pageTitle?: string
Expand Down Expand Up @@ -124,7 +126,7 @@ export const evmTransactionDetail = async (evmHash?: string, cosmosHash?: string
data.from = result.from
data.to = result.to
data.createdContractAddressHash = result.createdContractAddressHash
data.value = formatEther(result.value || '0')
data.value = (result.value ? formatEther(result.value) : caculateTxAmount(result.messages)) || '0'
data.fee = result.fee && result.fee.length > 0 ? formatEther(result.fee[0].amount) : ''
data.gasPrice = result.gasPrice ? formatUnits(result.gasPrice, 9) + ' NanoAstra' : ''
data.gasLimit = result.gasLimit ? formatNumber(result.gasLimit, 0) : ''
Expand Down Expand Up @@ -174,7 +176,7 @@ export const evmTransactionDetail = async (evmHash?: string, cosmosHash?: string
data.from = result.from
data.to = result.to
data.createdContractAddressHash = result.createdContractAddressHash
data.value = formatEther(result.value || '0')
data.value = (result.value ? formatEther(result.value) : caculateTxAmount(result.messages)) || '0'
data.fee = result.fee && result.fee.length > 0 ? formatEther(result.fee[0].amount) : ''
data.gasPrice = result.gasPrice ? formatUnits(result.gasPrice, 9) + ' NanoAstra' : ''
data.gasLimit = result.gasLimit ? formatNumber(result.gasLimit, 0) : ''
Expand Down Expand Up @@ -225,6 +227,7 @@ export const cosmsTransactionDetail = async (result: TransactionItem): Promise<T
data.blockHeight = `${result.blockHeight}`
data.time = result.blockTime
data.failLog = !result.success ? result.log : undefined
data.value = caculateTxAmount(result.messages) || '0'
// data.from = result.from
// data.to = result.to
// data.tokenTransfer = []
Expand All @@ -249,6 +252,23 @@ export const cosmsTransactionDetail = async (result: TransactionItem): Promise<T

return data
}

/**
* return tx amount
* @param tx messages
* @returns amount in string
*/
export const caculateTxAmount = (messages: TransactionMessage[]): string => {
if (messages && messages.length > 0) {
let totalAmount = BigNumber.from('0')
for (let message of messages) {
totalAmount = totalAmount.add(BigNumber.from(message.content?.params?.data?.value || '0'))
}
return formatEther(totalAmount)
}
return '0'
}

const _convertTransfer = (
data: TransactionDetail,
messages: TransactionMessage[],
Expand Down

0 comments on commit b2ded4e

Please sign in to comment.