chore: rename reverse address component

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

@@ -21,7 +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'
+import { ReversedAddress } from '@masknet/shared'
 
 export const CollectibleContext = createContext<{
     collectiblesRetry: () => void
@@ -301,7 +301,7 @@ export function CollectionList({
                                 className={classes.button}
                                 variant="outlined"
                                 size="small">
-                                <ReverseAddress address={addressName.resolvedAddress} addressSize={5} />
+                                <ReversedAddress address={addressName.resolvedAddress} />
                                 <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">
-                        <ReverseAddress address={addressName.resolvedAddress} addressSize={5} />
+                        <ReversedAddress address={addressName.resolvedAddress} />
                         <KeyboardArrowDownIcon />
                     </Button>
                 </Box>

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

@@ -17,7 +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'
+import { ReversedAddress } from '@masknet/shared'
 
 const useStyles = makeStyles()((theme) => ({
     root: {},
@@ -143,7 +143,7 @@ export function NFTAvatar(props: NFTAvatarProps) {
                     </Typography>
                     {account ? (
                         <Typography variant="body1" color="textPrimary" className={classes.account}>
-                            {t('nft_wallet_label')}: <ReverseAddress address={account} addressSize={4} />
+                            {t('nft_wallet_label')}: <ReversedAddress address={account} size={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 { ReverseAddress } from '@masknet/shared'
+import { ReversedAddress } 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)}>
-                            <ReverseAddress address={x.resolvedAddress} addressSize={5} />
+                            <ReversedAddress address={x.resolvedAddress} />
                         </MenuItem>
                     )
                 })}

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

@@ -5,14 +5,14 @@ interface ReverseAddressProps {
     address: string
     pluginId?: NetworkPluginID
     domainSize?: number
-    addressSize?: number
+    size?: number
 }
 
-export const ReverseAddress = memo<ReverseAddressProps>(({ address, pluginId, domainSize, addressSize }) => {
+export const ReversedAddress = memo<ReverseAddressProps>(({ address, pluginId, domainSize, size = 5 }) => {
     const { value: domain } = useReverseAddress(address, pluginId)
     const { Utils } = useWeb3State(pluginId)
 
-    if (!domain || !Utils?.formatDomainName) return <>{Utils?.formatAddress?.(address, addressSize) ?? address}</>
+    if (!domain || !Utils?.formatDomainName) return <>{Utils?.formatAddress?.(address, size) ?? address}</>
 
     return <>{Utils.formatDomainName(domain, domainSize)}</>
 })

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

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