feat: add page tokens + holders

api/api_list.ts

@@ -6,8 +6,7 @@ const API_LIST = {
 	TRANSACTION_OF_BLOCK: '/blocks/:id/transactions?pagination=offset&page=1&limit=20&order=height.desc',
 	LATEST_BLOCK: 'evm_/api/v1?module=block&action=eth_block_number',
 	ALL_TOKENS: 'evm_/api/v1?module=token&action=getListTokens', // &page=1&offset=20
-	ALL_HOLDERS:
-		'evm_/api/v1?module=token&action=getTokenHolders&contractaddress=0x60baCCdfdCa114f97F32121f6b2879fB555Df4d0&page=1&offset=20', // &page=1&offset=20
+	ALL_HOLDERS: 'evm_/api/v1?module=account&action=getTopAddressesBalance', // &page=1&offset=20
 
 	ALL_TRANSACTIONS: '/transactions',
 	TRANSACTIONS: '/transactions/',

components/Card/Layout/StaticsCard.tsx

@@ -15,7 +15,7 @@ interface Props {
 
 const StaticsCard = ({ icon, title, content, classes, contentClasses }: Props) => (
 	<div className={clsx(styles.staticsCard, classes)}>
-		<Row className={'block-ver-center'}>
+		<Row classes={'block-ver-center'}>
 			<div className={clsx(styles.iconBlock, 'block-center')}>
 				{/* <span className={icon}></span> */}
 				<Image alt={icon} src={`/images/icons/${icon}.svg`} width={48} height={48} />

components/Grid/Row.tsx

@@ -2,12 +2,17 @@ import clsx from 'clsx'
 import styles from './style.module.scss'
 
 interface Props {
-	className?: string
+	classes?: string
 	children: JSX.Element[]
+	style?: any
 }
 
-const Row = ({ children, className = '' }: Props) => {
-	return <div className={clsx(styles.row, className)}>{children}</div>
+const Row = ({ children, style, classes = '' }: Props) => {
+	return (
+		<div style={style} className={clsx(styles.row, classes)}>
+			{children}
+		</div>
+	)
 }
 
 export default Row

components/Grid/style.module.scss

@@ -1,6 +1,7 @@
 .row {
 	display: flex;
 	flex-direction: row;
+	align-items: center;
 	flex: 1;
 }
 

components/Tabs/Tabs.tsx

@@ -34,7 +34,7 @@ const Tabs = ({ tabs, contents, classes, headerBorder = true, headerPadding, tab
 	return (
 		<>
 			<Row
-				className={clsx(styles.tabs, headerPadding || 'padding-left-xl padding-right-xl', {
+				classes={clsx(styles.tabs, headerPadding || 'padding-left-xl padding-right-xl', {
 					'border border-bottom-base': headerBorder
 				})}
 			>

components/Typography/PageTitle.tsx

@@ -15,5 +15,5 @@ export const PageTitle = ({ children, icon, className = [] }: Props) => {
 				</span>
 			</>
 		)
-	return <span className={clsx('text', 'text-2xl', 'text-bold', ...className)}>{children}</span>
+	return <span className={clsx('text text-2xl text-bold contrast-color-70', ...className)}>{children}</span>
 }

pages/accounts.tsx

@@ -1,16 +1,21 @@
+import { PaginationLite } from '@astraprotocol/astra-ui'
 import Container from 'components/Container'
+import Row from 'components/Grid/Row'
+import RowLoader from 'components/Loader/RowLoader'
 import { PageTitle } from 'components/Typography/PageTitle'
 import RowTitle from 'components/Typography/RowTitle'
 import { NextPage } from 'next'
-// import {Pagination} from '@astraprotocol/astra-ui'
 import Head from 'next/head'
 import React, { useState } from 'react'
+import HolderRow from 'views/accounts/HolderRow'
+import useAccounts from 'views/accounts/hook/useAccounts'
 import Layout from '../components/Layout'
 
 const AstraHolderPage: React.FC<NextPage> = _ => {
 	const [currentPage, setPage] = useState(1)
-	// const { tokens } = useTokens(currentPage)
-	// console.log(tokens)
+	const { accounts, hasNextPage } = useAccounts(currentPage)
+
+	const onPagingChange = (value: number) => setPage(value)
 
 	return (
 		<Layout>
@@ -19,25 +24,28 @@ const AstraHolderPage: React.FC<NextPage> = _ => {
 			</Head>
 
 			<Container>
-				<PageTitle>Astra Address</PageTitle>
+				<Row style={{ justifyContent: 'space-between' }}>
+					<PageTitle>Astra Address</PageTitle>
+					<PaginationLite currentPage={currentPage} hasNext={hasNextPage} onChange={onPagingChange} />
+				</Row>
 				<RowTitle
 					columns={[
-						{ title: '', col: 'gutter-right' },
-						{ title: 'Address', col: 'padding-left-lg gutter-left col-5' },
-						{ title: 'Balance', col: 'padding-left-sm col-4' },
-						{ title: 'Transaction Count', col: 'padding-left-lg ' }
+						{ title: 'S', col: 'hidden padding-right-lg gutter-right' },
+						{ title: 'Address', col: 'padding-left-lg gutter-right col-5' },
+						{ title: 'Balance', col: 'padding-left-lg col-5 gutter-right' },
+						{ title: 'Transaction Count', col: 'col-2' }
 					]}
 				/>
-				{/* <Pagination></Pagination> */}
-				{/* {!tokens || tokens.length === 0 ? (
+
+				{!accounts || accounts.length === 0 ? (
 					<RowLoader row={10} />
 				) : (
 					<div className="padding-bottom-sm">
-						{tokens?.map((item: Token, index: number) => {
-							return <TokenRow key={index} index={index} token={item} />
+						{accounts?.map((item: AstraHolder, index: number) => {
+							return <HolderRow key={index} index={index + 1} account={item} />
 						})}
 					</div>
-				)} */}
+				)}
 			</Container>
 		</Layout>
 	)

pages/tokens.tsx

@@ -1,4 +1,6 @@
+import { PaginationLite } from '@astraprotocol/astra-ui'
 import Container from 'components/Container'
+import Row from 'components/Grid/Row'
 import RowLoader from 'components/Loader/RowLoader'
 import { PageTitle } from 'components/Typography/PageTitle'
 import RowTitle from 'components/Typography/RowTitle'
@@ -12,8 +14,9 @@ import Layout from '../components/Layout'
 
 const AllTokensPage: React.FC<NextPage> = _ => {
 	const [currentPage, setPage] = useState(1)
-	const { tokens } = useTokens(currentPage)
-	console.log(tokens)
+	const { tokens, hasNextPage } = useTokens(currentPage)
+
+	const onPagingChange = (value: number) => setPage(value)
 
 	return (
 		<Layout>
@@ -22,24 +25,28 @@ const AllTokensPage: React.FC<NextPage> = _ => {
 			</Head>
 
 			<Container>
-				<PageTitle>Tokens</PageTitle>
+				<Row style={{ justifyContent: 'space-between' }}>
+					<PageTitle>Tokens</PageTitle>
+					<PaginationLite currentPage={currentPage} hasNext={hasNextPage} onChange={onPagingChange} />
+				</Row>
 				<RowTitle
 					columns={[
-						{ title: '', col: 'gutter-right' },
-						{ title: 'Token', col: 'padding-left-lg col-2 gutter-right' },
-						{ title: 'Address', col: 'padding-left-lg gutter-left col-5' },
-						{ title: 'Total Supply', col: 'padding-left-sm col-4' },
-						{ title: 'Holders Count', col: 'padding-left-lg ' }
+						{ title: 'S', col: 'hidden padding-right-lg gutter-right' },
+						{ title: 'Token', col: 'padding-left-lg col-3 gutter-right' },
+						{ title: 'Address', col: 'padding-left-lg col-4 gutter-right' },
+						{ title: 'Total Supply', col: 'padding-left-lg col-4 gutter-right' },
+						{ title: 'Holders Count', col: 'padding-left-lg' }
 					]}
 				/>
-				{/* <Pagination></Pagination> */}
+
 				{!tokens || tokens.length === 0 ? (
 					<RowLoader row={10} />
 				) : (
 					<div className="padding-bottom-sm">
 						{tokens?.map((item: Token, index: number) => {
-							return <TokenRow key={index} index={index} token={item} />
+							return <TokenRow key={index} index={index + 1} token={item} />
 						})}
+						{/* <Pagination currentPage={currentPage} onChange={onPaginationChange} total={pagination.total} /> */}
 					</div>
 				)}
 			</Container>

project.d.ts

@@ -370,18 +370,54 @@ interface CosmosTransactionDetailResponse {
 
 interface Token {
 	cataloged: boolean
-	contract_address_hash: string
+	contractAddressHash: string
 	decimals: string
-	holder_count: number
+	holderCount: number
 	name: string
-	skip_metadata: any
 	symbol: string
-	total_supply: string
+	totalSupply: string
 	type: string
 }
 
+interface AstraHolder {
+	address: {
+		contract_code: any
+		decompiled: boolean
+		fetched_coin_balance: {
+			value: string
+		}
+		fetched_coin_balance_block_number: number
+		gas_used: number
+		has_decompiled_code: any
+		hash: string
+		inserted_at: string
+		nonce: number
+		state: any
+		token_transfers_count: number
+		transactions_count: number
+		updated_at: string
+		verified: boolean
+	}
+	total_supply: string
+	tx_count: number
+}
+
+interface UseTokenHookData {
+	result: Token[]
+	hasNextPage: boolean
+}
+
+interface UseAstraHolderData {
+	result: AstraHolder[]
+	hasNextPage: boolean
+}
+
 interface TokenResponse {
-	message: string
+	hasNextPage: boolean
 	result: Token[]
-	status: string
+}
+
+interface TopAstraHolderResponse {
+	hasNextPage: boolean
+	result: AstraHolder[]
 }

views/accounts/HolderRow.tsx

@@ -0,0 +1,46 @@
+import clsx from 'clsx'
+import Typography from 'components/Typography'
+import { LinkMaker } from 'utils/helper'
+import styles from './style.module.scss'
+
+type Props = {
+	index: number
+	account: AstraHolder
+}
+
+export default function HolderRow({ index, account }: Props) {
+	return (
+		<div
+			className={clsx(
+				styles.rowBrief,
+				styles.tokenRow,
+				'row padding-left-lg',
+				'padding-right-lg padding-top-sm padding-bottom-sm',
+				'radius-lg',
+				'margin-bottom-xs'
+			)}
+		>
+			<div className={clsx('text text-base contrast-color-70 text-center margin-right-lg')}>{index}</div>
+			<div className={clsx(styles.borderLeft, 'col-5 padding-left-lg block-ver-center')}>
+				<Typography.LinkText href={LinkMaker.token(account.address.hash)} className={['text', 'text-base']}>
+					{account.address.hash}
+				</Typography.LinkText>
+			</div>
+			<div className={clsx(styles.borderLeft, 'col-5 padding-left-lg ')}>
+				<span className={clsx('money money-sm money-bold padding-right-xs')}>
+					{account.address.fetched_coin_balance.value}
+				</span>
+				<span className={clsx(styles.currency, 'money money-sm money-bold')}>ASA</span>
+			</div>
+
+			<div
+				className={clsx(
+					styles.borderLeft,
+					'padding-left-lg text-center money money-xs contrast-color-70 block-ver-center col-2'
+				)}
+			>
+				{account.address.transactions_count || 0}
+			</div>
+		</div>
+	)
+}

views/accounts/hook/useAccounts.ts

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 import useSWR from 'swr'
 
 export default function useAccounts(page: number) {
-	const [tokens, setState] = useState<Token[]>()
+	const [hookData, setState] = useState<UseAstraHolderData>()
 
 	const _fetchCondition = () => {
 		return [
@@ -14,14 +14,15 @@ export default function useAccounts(page: number) {
 			}
 		]
 	}
-	const { data } = useSWR<TokenResponse>(_fetchCondition())
+	const { data } = useSWR<TopAstraHolderResponse>(_fetchCondition())
 
 	useEffect(() => {
 		if (data?.result) {
-			setState(data?.result)
+			setState(data)
 		}
 	}, [data])
 	return {
-		tokens
+		hasNextPage: hookData?.hasNextPage,
+		accounts: hookData?.result
 	}
 }