diff --git a/packages/maskbook/src/extension/background-script/EthereumServices/tokenList.ts b/packages/maskbook/src/extension/background-script/EthereumServices/tokenList.ts index b90c04537c05..e7c1a18a48d1 100644 --- a/packages/maskbook/src/extension/background-script/EthereumServices/tokenList.ts +++ b/packages/maskbook/src/extension/background-script/EthereumServices/tokenList.ts @@ -18,6 +18,7 @@ interface TokenList { name: string symbol: string decimals: number + logoURI?: string }[] version: { major: number diff --git a/packages/maskbook/src/extension/options-page/DashboardComponents/TokenIcon.tsx b/packages/maskbook/src/extension/options-page/DashboardComponents/TokenIcon.tsx index cd67c707cadb..42100abaf058 100644 --- a/packages/maskbook/src/extension/options-page/DashboardComponents/TokenIcon.tsx +++ b/packages/maskbook/src/extension/options-page/DashboardComponents/TokenIcon.tsx @@ -1,30 +1,30 @@ import { + useBlockie, + useChainDetailed, ChainId, formatEthereumAddress, getChainFullName, getTokenConstants, - useBlockie, - useChainDetailed, } from '@masknet/web3-shared' import { Avatar, AvatarProps, makeStyles, Theme } from '@material-ui/core' import { useStylesExtends } from '../../../components/custom-ui-helper' -import { useImageFailover } from '../../../utils/hooks/useImageFailover' +import { useImageFailover } from '../../../utils' +import SPECIAL_ICON_LIST from './TokenIconSpeialIconList.json' //#region fix icon image -function resolveTokenIconURL(address: string, baseURI: string) { - const iconMap = { - [getTokenConstants().NATIVE_TOKEN_ADDRESS]: `${baseURI}/info/logo.png`, - '0x69af81e73A73B40adF4f3d4223Cd9b1ECE623074': - 'https://dimensiondev.github.io/Maskbook-VI/assets/Logo/MB--Logo--Geo--ForceCircle--Blue.svg', // MASK - '0x32a7C02e79c4ea1008dD6564b35F131428673c41': 'https://s2.coinmarketcap.com/static/img/coins/64x64/6747.png', // CRUST - '0x04abEdA201850aC0124161F037Efd70c74ddC74C': 'https://s2.coinmarketcap.com/static/img/coins/64x64/5841.png', // NEST - '0x14de81C71B3F73874659082b971433514E201B27': 'https://etherscan.io/token/images/ykyctoken_32.png', // Yes KYC - '0x3B73c1B2ea59835cbfcADade5462b6aB630D9890': - 'https://raw.githubusercontent.com/chainswap/chainswap-assets/main/logo_white_256.png', // TOKEN +function resolveTokenIconURLs(address: string, baseURIs: string[], chainId: ChainId, logoURI?: string) { + const checkSummedAddress = formatEthereumAddress(address) + + if (getTokenConstants().NATIVE_TOKEN_ADDRESS, checkSummedAddress) { + return baseURIs.map((x) => `${x}/info/logo.png`) } - const checksummedAddress = formatEthereumAddress(address) - if (iconMap[checksummedAddress]) return iconMap[checksummedAddress] - return `${baseURI}/assets/${checksummedAddress}/logo.png` + + const specialIcon = SPECIAL_ICON_LIST.find((item) => item.address === address) + + if (specialIcon) return [specialIcon.logo_url] + + const fullIconAssetURIs = baseURIs.map((x) => `${x}/assets/${checkSummedAddress}/logo.png`) + return logoURI ? [logoURI] : fullIconAssetURIs } //#endregion @@ -39,41 +39,25 @@ const useStyles = makeStyles((theme: Theme) => ({ export interface TokenIconProps extends withClasses { name?: string - logoURL?: string + logoURI?: string chainId?: ChainId address: string AvatarProps?: Partial } export function TokenIcon(props: TokenIconProps) { - const { address, logoURL, name, chainId, AvatarProps } = props + const { address, logoURI, name, chainId, AvatarProps } = props const classes = useStylesExtends(useStyles(), props) const chainDetailed = useChainDetailed() const tokenBlockie = useBlockie(address) + const tokenAssetBaseURI = useConstantNext(CONSTANTS, chainId).TOKEN_ASSET_BASE_URI - const fullName = chainDetailed ? getChainFullName(chainId ?? chainDetailed.chainId) : '' - const { value: baseURI, loading } = useImageFailover( - chainDetailed - ? [ - `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/${fullName.toLowerCase()}`, - `https://rawcdn.githack.com/trustwallet/assets/master/blockchains/${fullName.toLowerCase()}`, - ] - : [], - '/info/logo.png', - ) + const tokenURIs = resolveTokenIconURLs(address, tokenAssetBaseURI, chainId ?? ChainId.Mainnet, logoURI) + const { value: baseURI, loading } = useImageFailover(chainDetailed ? tokenURIs : [], '') - if (logoURL) - return ( - - {name?.substr(0, 1).toLocaleUpperCase()} - - ) return ( - + {name?.substr(0, 1).toLocaleUpperCase()} diff --git a/packages/maskbook/src/extension/options-page/DashboardComponents/TokenIconSpeialIconList.json b/packages/maskbook/src/extension/options-page/DashboardComponents/TokenIconSpeialIconList.json new file mode 100644 index 000000000000..c2dabf84f51c --- /dev/null +++ b/packages/maskbook/src/extension/options-page/DashboardComponents/TokenIconSpeialIconList.json @@ -0,0 +1,167 @@ +[ + { + "name": "NEST", + "address": "0x04abEdA201850aC0124161F037Efd70c74ddC74C", + "logo_url": "https://s2.coinmarketcap.com/static/img/coins/64x64/5841.png" + }, + { + "name": "Yes KYC", + "address": "0x14de81C71B3F73874659082b971433514E201B27", + "logo_url": "https://etherscan.io/token/images/ykyctoken_32.png" + }, + { + "name": "cWBTC", + "address": "0xC11b1268C1A384e55C48c2391d8d480264A3A7F4", + "logo_url": "https://etherscan.io/token/images/compoundwrappedbtc_32.png" + }, + { + "name": "DANK", + "address": "0x0cB8D0B37C7487b11d57F1f33dEfA2B1d3cFccfE", + "logo_url": "https://etherscan.io/token/images/dank_32.png" + }, + { + "name": "DSCP", + "address": "0x03e3f0c25965f13DbbC58246738C183E27b26a56", + "logo_url": "https://etherscan.io/token/images/disciplina_28.png" + }, + { + "name": "GEE", + "address": "0x4F4f0Db4de903B88f2B1a2847971E231D54F8fd3", + "logo_url": "https://etherscan.io/token/images/geens_28.png" + }, + { + "name": "FKX", + "address": "0x009e864923b49263c7F10D19B7f8Ab7a9A5AAd33", + "logo_url": "https://etherscan.io/token/images/knoxstertoken_32.png?v=2" + }, + { + "name": "N0031", + "address": "0x075190c6130EA0a3A7E40802F1D77F4Ea8f38fE2", + "logo_url": "https://etherscan.io/token/images/nestyfi_32.png" + }, + { + "name": "NFC", + "address": "0xb0866289e870D2efc282406cF4123Df6E5BcB652", + "logo_url": "https://etherscan.io/token/images/nofaketoday_28.png" + }, + { + "name": "O3Swap", + "address": "0xEe9801669C6138E84bD50dEB500827b776777d28", + "logo_url": "https://etherscan.io/token/images/o3swaptoken_32.png" + }, + { + "name": "QTUM", + "address": "0x9a642d6b3368ddc662CA244bAdf32cDA716005BC", + "logo_url": "https://etherscan.io/token/images/qtum_28.png" + }, + { + "name": "REMI", + "address": "0x13cb85823f78Cff38f0B0E90D3e975b8CB3AAd64", + "logo_url": "https://etherscan.io/token/images/remiit_28.png" + }, + { + "name": "REDC", + "address": "0xB563300A3BAc79FC09B93b6F84CE0d4465A2AC27", + "logo_url": "https://etherscan.io/token/images/redcab_28.png" + }, + { + "name": "SBTC", + "address": "0xfE18be6b3Bd88A2D2A7f928d00292E7a9963CfC6", + "logo_url": "https://etherscan.io/token/images/Synthetixsbtc_32.png" + }, + { + "name": "TPT", + "address": "0xC596bD09d652827b0106292D3e378D5938df4B12", + "logo_url": "https://etherscan.io/token/images/009-TPT-Teleport-Token-Coin-Logo.png" + }, + { + "name": "TRL", + "address": "0xCed1A8529125D1bD06B54a7B01210df357D00885", + "logo_url": "https://etherscan.io/token/images/giraffage_28.png" + }, + { + "name": "UPX", + "address": "0x5f778ec4B31a506c1Dfd8b06F131E9B451a61D39", + "logo_url": "https://etherscan.io/token/images/udap_28.png" + }, + { + "name": "WYV", + "address": "0x056017c55aE7AE32d12AeF7C679dF83A85ca75Ff", + "logo_url": "https://etherscan.io/token/images/wyvern_28.png" + }, + { + "name": "VDOC", + "address": "0x82BD526bDB718C6d4DD2291Ed013A5186cAE2DCa", + "logo_url": "https://etherscan.io/token/images/vdoc_28.png" + }, + { + "name": "rSAI", + "address": "0xea8b224eDD3e342DEb514C4176c2E72Bcce6fFF9", + "logo_url": "https://etherscan.io/token/images/redeemabledai_32.png?v=2" + }, + { + "name": "ALICE", + "address": "0xAC51066d7bEC65Dc4589368da368b212745d63E8", + "logo_url": "https://bscscan.com/token/images/alicetoken_32.png" + }, + { + "name": "BP", + "address": "0xACB8f52DC63BB752a51186D1c55868ADbFfEe9C1", + "logo_url": "https://bscscan.com/token/images/bunnypark_32.png" + }, + { + "name": "DOGGY", + "address": "0x74926B3d118a63F6958922d3DC05eB9C6E6E00c6", + "logo_url": "https://bscscan.com/token/images/doggy_32.png" + }, + { + "name": "DCH", + "address": "0x14ACe3d3429408bFA8562099A253172913AD71bd", + "logo_url": "https://bscscan.com/token/images/dechart_32.png" + }, + { + "name": "FRANK", + "address": "0x129e6d84c6CAb9b0c2F37aD1D14a9fe2E59DAb09", + "logo_url": "https://bscscan.com/token/images/frankenstein_32.png" + }, + { + "name": "RFOX", + "address": "0x0a3A21356793B49154Fd3BbE91CBc2A16c0457f5", + "logo_url": "https://bscscan.com/token/images/redfoxlabs_32.png" + }, + { + "name": "FOR", + "address": "0x658A109C5900BC6d2357c87549B651670E5b0539", + "logo_url": "https://bscscan.com/token/images/forceprotocol_32.png" + }, + { + "name": "TPT", + "address": "0xECa41281c24451168a37211F0bc2b8645AF45092", + "logo_url": "https://bscscan.com/token/images/tokenpocket_32.png" + }, + { + "name": "UNCL", + "address": "0x0E8D5504bF54D9E44260f8d153EcD5412130CaBb", + "logo_url": "https://bscscan.com/token/images/unicrypt-uncl_32.png" + }, + { + "name": "UNCX", + "address": "0x09a6c44c3947B69E2B45F4D51b67E6a39ACfB506", + "logo_url": "https://bscscan.com/token/images/unicrypt_32.png" + }, + { + "name": "WOOP", + "address": "0x8b303d5BbfBbf46F1a4d9741E491e06986894e18", + "logo_url": "https://bscscan.com/token/images/woonkly_32.png" + }, + { + "name": "ZIL", + "address": "0xb86AbCb37C3A4B64f74f59301AFF131a1BEcC787", + "logo_url": "https://bscscan.com/token/images/zilliqa_32.png" + }, + { + "name": "PBTC", + "address": "0xeD28A457A5A76596ac48d87C0f577020F6Ea1c4C", + "logo_url": "https://bscscan.com/token/images/ptokenbtc_32.png" + } +] diff --git a/packages/maskbook/src/extension/options-page/DashboardComponents/TokenInList.tsx b/packages/maskbook/src/extension/options-page/DashboardComponents/TokenInList.tsx index 7ae3ecf00e3a..a46f172d9829 100644 --- a/packages/maskbook/src/extension/options-page/DashboardComponents/TokenInList.tsx +++ b/packages/maskbook/src/extension/options-page/DashboardComponents/TokenInList.tsx @@ -76,7 +76,7 @@ export function TokenInList({ data, index, style }: TokenInListProps) { const token = data.tokens[index] if (!token) return null - const { address, name, symbol } = token + const { address, name, symbol, logoURI } = token return ( data.onSelect(address)}> - + diff --git a/packages/web3-shared/src/constants/index.ts b/packages/web3-shared/src/constants/index.ts index 59b81bf7a629..0f38c0762abb 100644 --- a/packages/web3-shared/src/constants/index.ts +++ b/packages/web3-shared/src/constants/index.ts @@ -39,3 +39,16 @@ export const useTrendingConstants = hookTransform(getTrendingConstants) export const getURLConstants = transform(URL) export const useURLConstants = hookTransform(getURLConstants) + +const ETHEREUM_TOKEN_ASSET_BASE_URIS = [ + 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum', + 'https://rawcdn.githack.com/trustwallet/assets/master/blockchains/ethereum', +] +const SMARTCHAIN_TOKEN_ASSET_BASE_URIS = [ + 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/smartchain', + 'https://rawcdn.githack.com/trustwallet/assets/master/blockchains/smartchain', +] +const POLYGON_TOKEN_ASSET_BASE_URIS = [ + 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/polygon', + 'https://rawcdn.githack.com/trustwallet/assets/master/blockchains/polygon', +] diff --git a/packages/web3-shared/src/types/index.ts b/packages/web3-shared/src/types/index.ts index 5185fc4dc6ed..8df0f39ffb68 100644 --- a/packages/web3-shared/src/types/index.ts +++ b/packages/web3-shared/src/types/index.ts @@ -70,6 +70,7 @@ export interface NativeTokenDetailed extends NativeToken { name: string symbol: string decimals: number + logoURI?: string } //#endregion @@ -84,6 +85,7 @@ export interface ERC20TokenDetailed extends ERC20Token { name?: string symbol?: string decimals: number + logoURI?: string } //#endregion