fix: token holder display percentage holder

components/Search/ResultView.tsx

@@ -10,6 +10,7 @@ export interface SearchResultViewItem {
 	time?: string
 	status?: string
 	value: string
+	key: string | number
 	linkValue?: string
 }
 

components/Search/SearchResult.tsx

@@ -22,6 +22,7 @@ export default function SearchResult({ status, data }: SearchResultProps) {
 				items.push({
 					time: item.blockTime,
 					type: 'Block',
+					key: item.blockHeight,
 					value: item.blockHash,
 					linkValue: `${item.blockHeight}`
 				})
@@ -32,6 +33,7 @@ export default function SearchResult({ status, data }: SearchResultProps) {
 				items.push({
 					time: item.blockTime,
 					type: 'Block',
+					key: item.blockHash,
 					value: item.blockHash
 				})
 			}
@@ -40,6 +42,7 @@ export default function SearchResult({ status, data }: SearchResultProps) {
 			for (let item of transactions) {
 				items.push({
 					time: item.blockTime,
+					key: item.hash,
 					type: 'Transaction',
 					value: item.hash,
 					linkValue: item.hash
@@ -52,6 +55,7 @@ export default function SearchResult({ status, data }: SearchResultProps) {
 				items.push({
 					status: item.status,
 					type: 'Validator',
+					key: item.operatorAddress,
 					value: item.operatorAddress,
 					linkValue: item.operatorAddress
 				})
@@ -62,6 +66,7 @@ export default function SearchResult({ status, data }: SearchResultProps) {
 				items.push({
 					linkValue: item.addressHash,
 					type: 'Token',
+					key: item.addressHash,
 					value: `${item.name} (${item.symbol})`,
 					time: item.insertedAt
 				})
@@ -94,7 +99,7 @@ export default function SearchResult({ status, data }: SearchResultProps) {
 					</div>
 					<div className={styles.resultScroll}>
 						{items.map(item => (
-							<ResultView key={item.value} item={item} />
+							<ResultView key={item.key} item={item} />
 						))}
 					</div>
 				</div>

pages/tokens.tsx

@@ -1,5 +1,6 @@
-import { PaginationLite, Row } from '@astraprotocol/astra-ui'
+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 usePageQuery from 'hooks/usePageQuery'

views/tokens/tabs/TokenHolderTab/TokenHolder.tsx

@@ -12,6 +12,8 @@ type Props = {
 }
 
 export default function TokenHolder({ index, account, tokenData }: Props) {
+	let percentage = (parseFloat(account.balance) / parseFloat(tokenData.totalSupply)) * 100
+	percentage = percentage < 10 ** -3 ? 0 : percentage
 	return (
 		<div
 			className={clsx(
@@ -44,7 +46,7 @@ export default function TokenHolder({ index, account, tokenData }: Props) {
 					'padding-left-lg text-center money money-2xs contrast-color-70 block-ver-center col-2'
 				)}
 			>
-				{numeral((parseFloat(account.balance) / parseFloat(tokenData.totalSupply)) * 100).format('0,0.00')}%
+				{numeral(percentage).format('0,0.00')}%
 			</div>
 		</div>
 	)

views/tokens/tabs/TokenHolderTab/index.tsx

@@ -2,6 +2,7 @@ import { PaginationLite } from '@astraprotocol/astra-ui'
 import Row from 'components/Grid/Row'
 import Empty from 'components/Typography/Empty'
 import { useState } from 'react'
+import { getEnvNumber } from 'utils/helper'
 import useTokenHolders from 'views/tokens/hook/useTokenHolders'
 import TokenHolder from './TokenHolder'
 
@@ -31,7 +32,14 @@ const TokenHolderTab = ({ token, tokenData }: Props) => {
 			) : (
 				<div className="padding-bottom-sm" style={{ overflowY: 'scroll' }}>
 					{tokens?.map((item: Holder, index: number) => {
-						return <TokenHolder key={item.address} tokenData={tokenData} index={index + 1} account={item} />
+						return (
+							<TokenHolder
+								key={item.address}
+								tokenData={tokenData}
+								index={index + (currentPage - 1) * getEnvNumber('NEXT_PUBLIC_PAGE_OFFSET') + 1}
+								account={item}
+							/>
+						)
 					})}
 				</div>
 			)}