feat: token transfer transaction details

AstraProtocol · Oct 19, 2022 · f2f1604 · f2f1604
1 parent a67adac
commit f2f1604
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 85 deletions.
diff --git a/api/api_list.ts b/api/api_list.ts
@@ -40,7 +40,7 @@ const API_LIST = {
 	ADDRESS_TOKEN_TRANSFER: 'evm_/api/v1?module=account&action=getlisttokentransfers', // address=?
 
 	TOKEN_DETAIL: '',
-	TOKEN_TRANSACTIONS: '',
+	TOKEN_TRANSACTIONS: 'evm_/api/v1?module=token&action=getlisttokentransfers',
 	TOKEN_HOLDERS: 'evm_/api/v1?module=token&action=getTokenHolders' // contractaddress=0x60baCCdfdCa114f97F32121f6b2879fB555Df4d0&page=1&offset=20
 }
 

diff --git a/types/token.d.ts b/types/token.d.ts
@@ -1,6 +1,7 @@
-interface TokenResponse {
+interface TokenTransactionResponse {
 	hasNextPage: boolean
-	result: Token[]
+	nextPagePath: any
+	result: TokenTransaction[]
 }
 
 interface TokenHolderResponse {
@@ -17,16 +18,36 @@ interface TopAstraHolderResponse {
 	result: Holder[]
 }
 
-interface UseTokenHookData {
-	result: Token[]
-	hasNextPage: boolean
+interface UseTokenTransactionHookData {
+	data: {
+		result: TokenTransaction[] | []
+		hasNextPage: boolean
+	}
+	makeNextPage: Function
+	makePrevPage: Function
 }
 
 interface UseTokenHolderData {
 	result: Holder[]
 	hasNextPage: boolean
 }
 
+interface TokenTransaction {
+	amount: string
+	blockHash: string
+	blockNumber: string
+	decimals: string
+	fromAddress: string
+	fromAddressName: string
+	timestamp: string
+	toAddress: string
+	toAddressName: string
+	tokenContractAddress: string
+	tokenName: string
+	tokenSymbol: string
+	transactionHash: string
+}
+
 interface Token {
 	cataloged?: boolean
 	contractAddressHash: string

diff --git a/views/tokens/hook/useTokenTransactions.ts b/views/tokens/hook/useTokenTransactions.ts
@@ -2,27 +2,55 @@ import API_LIST from 'api/api_list'
 import { useEffect, useState } from 'react'
 import useSWR from 'swr'
 
-export default function useTokenTransactions(page: number) {
-	const [hookData, setState] = useState<UseTokenHookData>()
+export default function useTokenTransactions(token): UseTokenTransactionHookData {
+	const [hookData, setState] = useState({
+		result: [],
+		hasNextPage: false,
+		nextPagePath: undefined
+	})
+
+	const [currentParams, setParams] = useState(undefined)
+	const prevParams = []
 
 	const _fetchCondition = () => {
+		if (currentParams) {
+			return [
+				`${API_LIST.TOKEN_TRANSACTIONS}${currentParams}`,
+				{
+					contractaddress: token
+				}
+			]
+		}
+
 		return [
 			API_LIST.TOKEN_TRANSACTIONS,
 			{
-				page,
+				contractaddress: token,
+				page: 1,
 				offset: 10
 			}
 		]
 	}
-	const { data } = useSWR<TokenResponse>(_fetchCondition())
+	const { data } = useSWR<TokenTransactionResponse>(_fetchCondition())
 
 	useEffect(() => {
 		if (data?.result) {
 			setState(data)
 		}
 	}, [data])
+
 	return {
-		tokens: hookData?.result,
-		hasNextPage: hookData?.hasNextPage
+		data: {
+			result: hookData.result,
+			hasNextPage: hookData.hasNextPage
+		},
+		makeNextPage: () => {
+			if (currentParams) prevParams.push(currentParams)
+			setParams(hookData.nextPagePath)
+		},
+		makePrevPage: () => {
+			const prevParam = prevParams.pop()
+			setParams(prevParam)
+		}
 	}
 }
diff --git a/views/tokens/tabs/TokenTransactionTab/TokenTransaction.tsx b/views/tokens/tabs/TokenTransactionTab/TokenTransaction.tsx
@@ -1,18 +1,20 @@
+import { Typography as TypographyLib } from '@astraprotocol/astra-ui'
 import clsx from 'clsx'
 import GradientRow from 'components/Row/GradientRow'
 import Timer from 'components/Timer'
 import Typography from 'components/Typography'
-import { ellipseRightText, LinkMaker } from 'utils/helper'
+import { evmAddressName } from 'utils/evm'
+import { convertBalanceToView, ellipseBetweenText, ellipseRightText, LinkMaker } from 'utils/helper'
 import styles from './style.module.scss'
 
 interface Props {
-	transaction: AddressTransactionData
+	transaction: TokenTransaction
 }
 
 const AddressTransaction = ({ transaction }: Props) => {
 	return (
 		<GradientRow
-			type={transaction.success ? 'success' : 'error'}
+			type={'success'}
 			classes={clsx(
 				'padding-left-lg padding-right-lg',
 				'padding-top-xs padding-bottom-xs',
@@ -26,76 +28,69 @@ const AddressTransaction = ({ transaction }: Props) => {
 				className={clsx(styles.rowBrief, styles.TransactionRow, 'row')}
 				// style={{ minHeight: style === 'inject' ? 'auto' : height }}
 			>
-				<div className={clsx('col-4')}>
+				<div className={clsx('col-6')}>
 					<div>
 						<Typography.LinkText
-							href={LinkMaker.transaction(transaction.hash)}
+							href={LinkMaker.transaction(transaction.transactionHash)}
 							classes={'margin-right-xs'}
 							fontType="Titi"
 						>
-							{ellipseRightText(transaction.hash, 30)}
+							{ellipseRightText(transaction.transactionHash, 30)}
 						</Typography.LinkText>
-						<Typography.Label
+						{/* <Typography.Label
 							text={'Function Name'}
 							backgroundShape="rectangle"
 							color="contrast-color-70"
 							radius="radius-xs"
 							font="money-2xs"
-						/>
+						/> */}
 					</div>
-					{/* {(transaction.from || transaction.to) && (
-							<div className="margin-top-xs">
-								{transaction.from && (
-									<>
-										<span className={clsx('contrast-color-30 margin-right-xs text text-sm')}>
-											From
-										</span>
-										<span className="contrast-color-70 margin-right-lg money-2xs money">
-											{evmAddressName(fromName, ellipseBetweenText(from, 6, 6))}
-										</span>
-									</>
-								)}
-								{transaction.to && (
-									<>
-										<span className={clsx('contrast-color-30 padding-right-2xs text text-sm')}>
-											To
-										</span>
-										<span className="contrast-color-70 margin-right-lg  money-2xs money">
-											{evmAddressName(toName, ellipseBetweenText(to, 6, 6))}
-										</span>
-									</>
-								)}
-							</div>
-						)} */}
-				</div>
-				<div className={clsx('col-2 block-ver-center')}>
-					<Typography.Label
-						text={'Dontknow'}
-						// titleText={type}
-						backgroundShape="rectangle"
-						radius="radius-2xl"
-						font="text-bold text text-sm"
-					/>
+					{(transaction.fromAddress || transaction.toAddress) && (
+						<div className="margin-top-xs">
+							{transaction.fromAddress && (
+								<>
+									<span className={clsx('contrast-color-30 margin-right-xs text text-sm')}>From</span>
+									<span className="contrast-color-70 margin-right-lg money-2xs money">
+										{evmAddressName(
+											transaction.fromAddressName,
+											ellipseBetweenText(transaction.fromAddress, 6, 6)
+										)}
+									</span>
+								</>
+							)}
+							{transaction.toAddress && (
+								<>
+									<span className={clsx('contrast-color-30 padding-right-2xs text text-sm')}>To</span>
+									<span className="contrast-color-70 margin-right-lg  money-2xs money">
+										{evmAddressName(
+											transaction.toAddressName,
+											ellipseBetweenText(transaction.toAddress, 6, 6)
+										)}
+									</span>
+								</>
+							)}
+						</div>
+					)}
 				</div>
+
 				<div className={clsx('col-2 block-ver-center')}>
-					<Typography.LinkText href={LinkMaker.block(transaction.blockHeight)} fontType="Titi">
-						#{transaction.blockHeight}
+					<Typography.LinkText href={LinkMaker.block(transaction.blockNumber)} fontType="Titi">
+						#{transaction.blockNumber}
 					</Typography.LinkText>
 				</div>
 				<div className={clsx('col-2 block-ver-center')}>
-					{/* <div>
-							{Number(value) >= 0 && (
-								<>
-									<TypographyLib.Balance
-										size="xs"
-										value={value}
-										currency={valueCurrency?.toUpperCase()}
-										icon={valueToken && <CryptoIcon name={valueToken} size="sm" />}
-									/>
-									<br />
-								</>
-							)}
-							<span>
+					<div>
+						{Number(transaction.amount) >= 0 && (
+							<>
+								<TypographyLib.Balance
+									size="xs"
+									value={convertBalanceToView(transaction.amount)}
+									currency={transaction.tokenSymbol}
+								/>
+								<br />
+							</>
+						)}
+						{/* <span>
 								{Number(fee) >= 0 && (
 									<TypographyLib.Balance
 										icon={<span>Fee:</span>}
@@ -106,21 +101,17 @@ const AddressTransaction = ({ transaction }: Props) => {
 										classes="contrast-color-70"
 									/>
 								)}
-							</span>
-						</div> */}
+							</span> */}
+					</div>
 				</div>
 				<div className={clsx('col-1 block-ver-center')}>
-					<Timer updatedAt={transaction.blockTime} />
+					<Timer updatedAt={parseInt(transaction.timestamp) * 1000} />
 				</div>
 				<div
 					className={clsx('col-1 padding-left-md gutter-left block-ver-center')}
 					style={{ textTransform: 'capitalize' }}
 				>
-					{transaction.success ? (
-						<Typography.SuccessText>Success</Typography.SuccessText>
-					) : (
-						<Typography.ErrorText>Error</Typography.ErrorText>
-					)}
+					<Typography.SuccessText>Success</Typography.SuccessText>
 				</div>
 			</div>
 		</GradientRow>

diff --git a/views/tokens/tabs/TokenTransactionTab/index.tsx b/views/tokens/tabs/TokenTransactionTab/index.tsx
@@ -1,35 +1,46 @@
+import { PaginationLite } from '@astraprotocol/astra-ui'
 import Row from 'components/Grid/Row'
+import Empty from 'components/Typography/Empty'
 import { useState } from 'react'
+import useTokenTransactions from 'views/tokens/hook/useTokenTransactions'
+import AddressTransaction from './TokenTransaction'
 
 interface Props {
 	token: string
 }
 
 const TokenTransactionTab = ({ token }: Props) => {
 	const [currentPage, setPage] = useState(1)
-	// const { data, pagination } = useTokenTransactions(token)
+	const { data, makePrevPage, makeNextPage } = useTokenTransactions(token)
 
-	const onPagingChange = (value: number) => setPage(value)
+	const onPagingChange = (value: number) => {
+		if (value < currentPage) {
+			makePrevPage()
+		} else {
+			makeNextPage()
+		}
+		setPage(value)
+	}
 
 	return (
 		<div>
 			<Row style={{ justifyContent: 'space-between' }} classes="padding-xl">
 				<span className="text text-xl">Transactions</span>
 				<div>
 					{/* Select Component */}
-					{/* <PaginationLite currentPage={currentPage} hasNext={hasNextPage} onChange={onPagingChange} /> */}
+					<PaginationLite currentPage={currentPage} hasNext={data.hasNextPage} onChange={onPagingChange} />
 				</div>
 			</Row>
 
-			{/* {!data || data.length == 0 ? (
+			{!data.result || data.result.length == 0 ? (
 				<Empty text={'There are no transactions.'} />
 			) : (
-				<>
-					{data?.map((item, index) => (
-						<AddressTransaction key={item.hash + index} transaction={item} />
+				<div style={{ overflowY: 'scroll' }}>
+					{data.result.map((item, index) => (
+						<AddressTransaction key={item.transactionHash} transaction={item} />
 					))}
-				</>
-			)} */}
+				</div>
+			)}
 		</div>
 	)
 }