feat: labeling whitelist address with verify character

data/address/mainnet.json

@@ -0,0 +1,8 @@
+{
+	"0x661276b8c832da06c709dbc2b0c063e2f1d25ef9": "Tiki Account",
+	"0x82121cdf2f8c14c809eb2fd2d0a1ec246bbbac59": "Tiki Deposit Account",
+	"0x6637d8275dc58983cb3a2fa64b705ec11f6ec670": "WASA: Wrap Astra",
+	"0x5fc4435aca131f1f541d2fc67dc3a6a20d10a99d": "Tether: USDT Stablecoin",
+	"0x7dad3d655ea4be30e1fd95addbdeeddcdae0c2c6": "SolarswapRouter",
+	"0x647db4fcf734c387b0ce8500314732f94afe5211": "Tiki Reward"
+}

data/address/testnet.json

@@ -0,0 +1 @@
+[]

utils/label.ts

@@ -0,0 +1,10 @@
+import { isMainnet } from './helper'
+
+const addressLabelArr = isMainnet ? require('../data/address/mainnet.json') : require('../data/address/testnet.json')
+
+export const getAddressLabel = (label, address: string) => {
+	if (label && label.trim() !== '') return label + ' ✅'
+	if (!address) return ''
+	if (addressLabelArr[address.toLowerCase()]) return addressLabelArr[address.toLowerCase()] + ' ✅'
+	return ''
+}

views/tokens/tabs/TokenTransactionTab/TokenTransaction.tsx

@@ -5,9 +5,10 @@ import GradientRow from 'components/Row/GradientRow'
 import Timer from 'components/Timer'
 import Typography from 'components/Typography'
 import { LinkText } from 'components/Typography/LinkText'
+import { useMemo } from 'react'
 import { CONFIG } from 'utils/constants'
-import { evmAddressName } from 'utils/evm'
-import { convertBalanceToView, ellipseBetweenText, isERC721, LinkMaker } from 'utils/helper'
+import { LinkMaker, convertBalanceToView, ellipseBetweenText, isERC721 } from 'utils/helper'
+import { getAddressLabel } from 'utils/label'
 import styles from './style.module.scss'
 
 interface Props {
@@ -20,6 +21,15 @@ const TokenTransaction = ({ transaction, tokenData }: Props) => {
 	const { isMobile } = useMobileLayout()
 	const txsHashLength = isMobile ? CONFIG.TXS_MOBILE_SPLIT_LENGTH : CONFIG.TXS_DESKTOP_SPLIT_LENGTH
 
+	const fromAddressLabel = useMemo(
+		() => getAddressLabel(transaction.fromAddressName, transaction.fromAddress),
+		[transaction.fromAddress, transaction.fromAddressName]
+	)
+	const toAddressLabel = useMemo(
+		() => getAddressLabel(transaction.toAddressName, transaction.toAddress),
+		[transaction.toAddress, transaction.toAddressName]
+	)
+
 	return (
 		<GradientRow
 			type={'success'}
@@ -64,10 +74,9 @@ const TokenTransaction = ({ transaction, tokenData }: Props) => {
 										fontType="Titi"
 										fontSize="money-2xs"
 									>
-										{evmAddressName(
-											transaction.fromAddressName,
-											ellipseBetweenText(transaction.fromAddress, 6, 6)
-										)}
+										{fromAddressLabel
+											? fromAddressLabel
+											: ellipseBetweenText(transaction.fromAddress, 6, 6)}
 									</LinkText>
 								</>
 							)}
@@ -80,10 +89,9 @@ const TokenTransaction = ({ transaction, tokenData }: Props) => {
 										fontType="Titi"
 										fontSize="money-2xs"
 									>
-										{evmAddressName(
-											transaction.toAddressName,
-											ellipseBetweenText(transaction.toAddress, 6, 6)
-										)}
+										{toAddressLabel
+											? toAddressLabel
+											: ellipseBetweenText(transaction.toAddress, 6, 6)}
 									</LinkText>
 								</>
 							)}

views/transactions/TransactionRowContent.tsx

@@ -7,9 +7,11 @@ import TransactionTag from 'components/Tag/TransactionTag'
 import Timer from 'components/Timer'
 import Typography from 'components/Typography'
 import Image from 'next/image'
+import { useMemo } from 'react'
 import { CONFIG } from 'utils/constants'
-import { evmAddressName, isEvmTransactionType } from 'utils/evm'
+import { isEvmTransactionType } from 'utils/evm'
 import { LinkMaker, convertBalanceToView, ellipseBetweenText, ellipseRightText } from 'utils/helper'
+import { getAddressLabel } from 'utils/label'
 import styles from './style.module.scss'
 
 export type TransactionRowContentProps = {
@@ -61,6 +63,9 @@ export default function TransactionRowContent({
 	const isEvm = isEvmTransactionType(type)
 	const addressQuery = hash?.startsWith('0x') ? '' : isEvm ? { type: 'evm' } : ''
 
+	const fromAddressLabel = useMemo(() => getAddressLabel(fromName, from), [fromName, from])
+	const toAddressLabel = useMemo(() => getAddressLabel(toName, to || contractAddress), [toName, to, contractAddress])
+
 	return (
 		<>
 			<div
@@ -99,7 +104,7 @@ export default function TransactionRowContent({
 												href={LinkMaker.address(from)}
 												classes="margin-right-sm"
 											>
-												{evmAddressName(fromName, ellipseBetweenText(from, 6, 6))}
+												{fromAddressLabel ? fromAddressLabel : ellipseBetweenText(from, 6, 6)}
 											</Typography.LinkText>
 										</>
 									)}
@@ -115,10 +120,9 @@ export default function TransactionRowContent({
 												fontType="Titi"
 												href={LinkMaker.address(to || contractAddress)}
 											>
-												{evmAddressName(
-													toName,
-													ellipseBetweenText(to || contractAddress, 6, 6)
-												)}
+												{toAddressLabel
+													? toAddressLabel
+													: ellipseBetweenText(to || contractAddress, 6, 6)}
 											</Typography.LinkText>
 										</>
 									)}