feat: reverse address to domian (#5897)

* feat: reverse address to domian component

* fix: add format ethereum address

* fix: eslint

* fix: support ens name on ins

* fix: build error

Author: albert-0229

packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx

@@ -5,7 +5,6 @@ import {
     ChainId,
     ERC721ContractDetailed,
     ERC721TokenDetailed,
-    formatEthereumAddress,
     isSameAddress,
     NonFungibleAssetProvider,
     SocketState,
@@ -22,6 +21,7 @@ import { WalletMessages } from '@masknet/plugin-wallet'
 import { CollectionIcon } from './CollectionIcon'
 import { uniqBy } from 'lodash-unified'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import { ReverseAddress } from '@masknet/shared'
 
 export const CollectibleContext = createContext<{
     collectiblesRetry: () => void
@@ -301,7 +301,7 @@ export function CollectionList({
                                 className={classes.button}
                                 variant="outlined"
                                 size="small">
-                                {formatEthereumAddress(addressName.label, 5)}
+                                <ReverseAddress address={addressName.resolvedAddress} addressSize={5} />
                                 <KeyboardArrowDownIcon />
                             </Button>
                         </Box>
@@ -330,7 +330,7 @@ export function CollectionList({
                 </Stack>
                 <Box display="flex" alignItems="center" justifyContent="flex-end" flexWrap="wrap">
                     <Button onClick={onSelectAddress} className={classes.button} variant="outlined" size="small">
-                        {formatEthereumAddress(addressName.label, 5)}
+                        <ReverseAddress address={addressName.resolvedAddress} addressSize={5} />
                         <KeyboardArrowDownIcon />
                     </Button>
                 </Box>

packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx

@@ -17,6 +17,7 @@ import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
 import { AddNFT } from './AddNFT'
 import { NFTImage } from './NFTImage'
 import { useAccount, useWeb3State } from '@masknet/plugin-infra'
+import { ReverseAddress } from '@masknet/shared'
 
 const useStyles = makeStyles()((theme) => ({
     root: {},
@@ -142,7 +143,7 @@ export function NFTAvatar(props: NFTAvatarProps) {
                     </Typography>
                     {account ? (
                         <Typography variant="body1" color="textPrimary" className={classes.account}>
-                            {t('nft_wallet_label')}: {Utils?.formatAddress?.(account, 4) || account}
+                            {t('nft_wallet_label')}: <ReverseAddress address={account} addressSize={4} />
                             {!hideWallet ? (
                                 <Button
                                     variant="text"

packages/mask/src/plugins/Collectible/SNSAdaptor/NFTPage.tsx

@@ -4,7 +4,7 @@ import { MenuItem } from '@mui/material'
 import type { AddressName } from '@masknet/web3-shared-evm'
 import { CollectionList } from '../../../extension/options-page/DashboardComponents/CollectibleList'
 import { first, uniqBy } from 'lodash-unified'
-import { formatEthereumAddress } from '@masknet/web3-shared-evm'
+import { ReverseAddress } from '@masknet/shared'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -71,7 +71,7 @@ export function NFTPage(props: NFTPageProps) {
                 {uniqBy(addressNames ?? [], (x) => x.resolvedAddress.toLowerCase()).map((x) => {
                     return (
                         <MenuItem key={x.resolvedAddress} value={x.resolvedAddress} onClick={() => onSelect(x)}>
-                            {formatEthereumAddress(x.label, 5)}
+                            <ReverseAddress address={x.resolvedAddress} addressSize={5} />
                         </MenuItem>
                     )
                 })}

packages/shared/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@dimensiondev/holoflows-kit": "^0.9.0-20210902104757-7c3d0d0",
     "@masknet/icons": "workspace:*",
+    "@masknet/plugin-infra": "workspace:*",
     "@masknet/shared-base": "workspace:*",
     "@masknet/theme": "workspace:*",
     "@masknet/web3-shared-base": "workspace:*",

packages/shared/src/UI/components/ReverseAddress/index.tsx

@@ -0,0 +1,18 @@
+import { memo } from 'react'
+import { NetworkPluginID, useReverseAddress, useWeb3State } from '@masknet/plugin-infra'
+
+interface ReverseAddressProps {
+    address: string
+    pluginId?: NetworkPluginID
+    domainSize?: number
+    addressSize?: number
+}
+
+export const ReverseAddress = memo<ReverseAddressProps>(({ address, pluginId, domainSize, addressSize }) => {
+    const { value: domain } = useReverseAddress(address, pluginId)
+    const { Utils } = useWeb3State(pluginId)
+
+    if (!domain || !Utils?.formatDomainName) return <>{Utils?.formatAddress?.(address, addressSize) ?? address}</>
+
+    return <>{Utils.formatDomainName(domain, domainSize)}</>
+})

packages/shared/src/UI/components/index.ts

@@ -12,3 +12,4 @@ export * from './AddressViewer'
 export * from './I18NextProviderHMR'
 export * from './AssetPlayer'
 export * from './NFTCardStyledAssetPlayer'
+export * from './ReverseAddress'

packages/shared/tsconfig.json

@@ -10,6 +10,8 @@
     { "path": "../web3-shared/evm" },
     { "path": "../theme" },
     { "path": "../shared-base" },
-    { "path": "../icons" }
+    { "path": "../shared-base-ui" },
+    { "path": "../icons" },
+    { "path": "../plugin-infra" }
   ]
 }