From b2ded4ee02873500a78e223a29d7e99a2df4a0cf Mon Sep 17 00:00:00 2001 From: Tien Nam Dao Date: Mon, 7 Nov 2022 14:04:38 +0700 Subject: [PATCH] fix: display tx amount --- .../Card/CardInfo/Components/Transfers.tsx | 38 +++++--- components/Card/CardInfo/index.tsx | 9 +- pages/token/instance/[index].tsx | 88 +++++++++++++++++++ pages/tx/index.tsx | 2 +- types/address.d.ts | 3 +- types/transactions.d.ts | 2 + utils/helper.ts | 5 +- views/accounts/hook/useAddressTransaction.ts | 3 + .../AddressTransaction.tsx | 4 +- views/transactions/TransactionRowContent.tsx | 3 +- views/transactions/hook/useConvertData.ts | 5 +- views/transactions/utils.ts | 24 ++++- 12 files changed, 162 insertions(+), 24 deletions(-) create mode 100644 pages/token/instance/[index].tsx diff --git a/components/Card/CardInfo/Components/Transfers.tsx b/components/Card/CardInfo/Components/Transfers.tsx index 3a115fd6..16659152 100644 --- a/components/Card/CardInfo/Components/Transfers.tsx +++ b/components/Card/CardInfo/Components/Transfers.tsx @@ -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 (
{ )} > From - - {content?.transfer?.fromText} - - + {data.fromText} + { )} > To - - {content?.transfer?.toText} - - + {data.toText} + { )} > For - {content?.transfer.value} - - {content?.transfer?.token} - + {isNFT ? ( + <> + + TokenID [{data.tokenId}] + + + {data.tokenName} + + + ) : ( + <> + {content?.transfer.value} + + {data.tokenName} + + + )}
) diff --git a/components/Card/CardInfo/index.tsx b/components/Card/CardInfo/index.tsx index 6ce81f9a..c4bdd3d0 100644 --- a/components/Card/CardInfo/index.tsx +++ b/components/Card/CardInfo/index.tsx @@ -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 } @@ -96,7 +99,9 @@ export default function CardInfo({ [`${responsive?.wrap}-flex-column`]: responsive })} > -
+
{label} {type === 'nonce' && }
diff --git a/pages/token/instance/[index].tsx b/pages/token/instance/[index].tsx new file mode 100644 index 00000000..0dc44c0f --- /dev/null +++ b/pages/token/instance/[index].tsx @@ -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 => { + const { isMobile } = useMobileLayout() + const { token, tokenData, errorMessage } = props + + const title = tokenData ? `${tokenData.name} (${tokenData.symbol}) - ${process.env.NEXT_PUBLIC_TITLE}` : token + return ( + + + + {title} + + + + +

{'In Development'}

+ + + ) +} + +export async function getServerSideProps({ params }) { + const { token } = params + if (Web3.utils.isAddress(token, 11115)) { + try { + const tokenData = await evmApi.get(`${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 diff --git a/pages/tx/index.tsx b/pages/tx/index.tsx index fb278d14..cd5ae4b8 100644 --- a/pages/tx/index.tsx +++ b/pages/tx/index.tsx @@ -65,7 +65,7 @@ const BlockDetailPage: React.FC = _ => { ]} /> )} -
+
{loaderTime ? ( ) : ( diff --git a/types/address.d.ts b/types/address.d.ts index c01650c6..bba6ec87 100644 --- a/types/address.d.ts +++ b/types/address.d.ts @@ -167,7 +167,7 @@ interface AddressTransactionData { }[] success: boolean fee: string | number - amount?: string + value?: string from?: string to?: string type: string @@ -210,6 +210,7 @@ interface AddressTransactionResponse { gasWanted: number gasUsed: number memo: string + value?: string timeoutHeight: number messages: TransactionMessage[] } diff --git a/types/transactions.d.ts b/types/transactions.d.ts index eb0f0eca..ff1f3ce3 100644 --- a/types/transactions.d.ts +++ b/types/transactions.d.ts @@ -72,6 +72,8 @@ interface EVMTransferItem { tokenContractAddress: string tokenName: string tokenSymbol: string + tokenId?: string + tokenType?: string fromAddressName: string toAddressName: string } diff --git a/utils/helper.ts b/utils/helper.ts index 3480190f..a97e02ed 100644 --- a/utils/helper.ts +++ b/utils/helper.ts @@ -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}` } } diff --git a/views/accounts/hook/useAddressTransaction.ts b/views/accounts/hook/useAddressTransaction.ts index 4692cbf3..7202ae64 100644 --- a/views/accounts/hook/useAddressTransaction.ts +++ b/views/accounts/hook/useAddressTransaction.ts @@ -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({ @@ -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, diff --git a/views/accounts/tabs/AddressTransactionTab/AddressTransaction.tsx b/views/accounts/tabs/AddressTransactionTab/AddressTransaction.tsx index ac8497aa..a596fad7 100644 --- a/views/accounts/tabs/AddressTransactionTab/AddressTransaction.tsx +++ b/views/accounts/tabs/AddressTransactionTab/AddressTransaction.tsx @@ -91,11 +91,11 @@ const AddressTransaction = ({ transaction }: Props) => {
- {Number(transaction.amount || '0') >= 0 && ( + {Number(transaction.value || '0') >= 0 && ( <> } /> diff --git a/views/transactions/TransactionRowContent.tsx b/views/transactions/TransactionRowContent.tsx index 2146bc98..d4eba92e 100644 --- a/views/transactions/TransactionRowContent.tsx +++ b/views/transactions/TransactionRowContent.tsx @@ -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 ( <> @@ -132,7 +133,7 @@ export default function TransactionRowContent({
- {Number(value) >= 0 && ( + {Number(value || '0') >= 0 && ( <> 0 ? formatEther(result.fee[0].amount) : '' data.gasPrice = result.gasPrice ? formatUnits(result.gasPrice, 9) + ' NanoAstra' : '' data.gasLimit = result.gasLimit ? formatNumber(result.gasLimit, 0) : '' @@ -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) : '' @@ -225,6 +227,7 @@ export const cosmsTransactionDetail = async (result: TransactionItem): Promise { + 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[],