fix: nft avatar can't display

packages/mask/src/plugins/Avatar/utils/index.ts

@@ -1,9 +1,15 @@
 import { isNull } from 'lodash-unified'
-import { ChainId, NonFungibleAssetProvider } from '@masknet/web3-shared-evm'
+import { ChainId, NonFungibleAssetProvider, formatBalance } from '@masknet/web3-shared-evm'
 import { EVM_RPC } from '../../EVM/messages'
 import Services from '../../../extension/service'
-import { getOrderUnitPrice } from '@masknet/web3-providers'
+import { getOrderUnitPrice, NonFungibleTokenAPI } from '@masknet/web3-providers'
 import { ZERO } from '@masknet/web3-shared-base'
+import BigNumber from 'bignumber.js'
+
+function getLastSalePrice(lastSale?: NonFungibleTokenAPI.AssetEvent | null) {
+    if (!lastSale?.total_price || !lastSale?.payment_token?.decimals) return
+    return formatBalance(lastSale.total_price, lastSale.payment_token.decimals)
+}
 
 export async function getNFT(address: string, tokenId: string) {
     const asset = await EVM_RPC.getAsset({
@@ -17,9 +23,11 @@ export async function getNFT(address: string, tokenId: string) {
             asset?.desktopOrder?.current_price,
             asset?.desktopOrder?.payment_token_contract?.decimals ?? 0,
             asset?.desktopOrder?.quantity ?? '1',
-        ) ?? ZERO
+        ) ??
+        getLastSalePrice(asset?.last_sale) ??
+        ZERO
     return {
-        amount: amount.toFixed(),
+        amount: new BigNumber(amount).toFixed(),
         name: asset?.name ?? '',
         symbol: asset?.desktopOrder?.payment_token_contract?.symbol ?? 'ETH',
         image: asset?.image_url ?? '',

packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx

@@ -11,9 +11,8 @@ import { getAvatarId } from '../../utils/user'
 import { PluginNFTAvatarRPC } from '../../../../plugins/Avatar/messages'
 import { NFTBadge } from '../../../../plugins/Avatar/SNSAdaptor/NFTBadge'
 import { NFTAvatar } from '../../../../plugins/Avatar/SNSAdaptor/NFTAvatar'
-import { useAsync, useLocation, useUpdateEffect, useWindowSize } from 'react-use'
+import { useLocation, useUpdateEffect, useWindowSize } from 'react-use'
 import { rainbowBorderKeyFrames } from '../../../../plugins/Avatar/SNSAdaptor/RainbowBox'
-import { trim } from 'lodash-unified'
 
 export function injectNFTAvatarInTwitter(signal: AbortSignal) {
     const watcher = new MutationObserverWatcher(searchTwitterAvatarSelector())
@@ -71,7 +70,7 @@ function NFTAvatarInTwitter() {
         setNFTEvent(data)
     }
 
-    useAsync(async () => {
+    useEffect(() => {
         if (!wallet || !NFTAvatar) return
 
         if (!NFTEvent?.address || !NFTEvent?.tokenId) {
@@ -85,23 +84,22 @@ function NFTAvatarInTwitter() {
             return
         }
 
-        const avatar = await PluginNFTAvatarRPC.saveNFTAvatar(wallet.address, {
+        PluginNFTAvatarRPC.saveNFTAvatar(wallet.address, {
             ...NFTEvent,
             avatarId: getAvatarId(identity.avatar ?? ''),
-        } as AvatarMetaDB)
-
-        setAvatar(avatar)
-        MaskMessages.events.NFTAvatarTimelineUpdated.sendToAll(
-            avatar ?? {
-                userId: identity.identifier.userId,
-                avatarId: getAvatarId(identity.avatar ?? ''),
-                address: '',
-                tokenId: '',
-            },
-        )
-
+        } as AvatarMetaDB).then((avatar: AvatarMetaDB | undefined) => {
+            setAvatar(avatar)
+            MaskMessages.events.NFTAvatarTimelineUpdated.sendToAll(
+                avatar ?? {
+                    userId: identity.identifier.userId,
+                    avatarId: getAvatarId(identity.avatar ?? ''),
+                    address: '',
+                    tokenId: '',
+                },
+            )
+        })
         setNFTEvent(undefined)
-    }, [identity.avatar])
+    }, [identity.avatar, identity.identifier.userId, NFTEvent?.address, NFTEvent?.tokenId])
 
     useEffect(() => {
         setAvatar(_avatar)
@@ -114,6 +112,7 @@ function NFTAvatarInTwitter() {
     useEffect(() => {
         const linkDom = searchTwitterAvatarLinkSelector().evaluate()
 
+        if (!showAvatar) return
         if (linkDom?.firstElementChild && linkDom.childNodes.length === 4) {
             const linkParentDom = linkDom.closest('div')
 
@@ -141,7 +140,7 @@ function NFTAvatarInTwitter() {
                 linkDom.appendChild(style)
             }
         }
-    }, [location.pathname])
+    }, [location.pathname, showAvatar])
 
     useEffect(() => {
         const linkDom = searchTwitterAvatarLinkSelector().evaluate()
@@ -161,16 +160,6 @@ function NFTAvatarInTwitter() {
         }
     }, [showAvatar])
 
-    useUpdateEffect(() => {
-        if (
-            location.pathname &&
-            location.pathname.split('/').length === 2 &&
-            trim(location.pathname, '/') !== identity.identifier.userId
-        ) {
-            setAvatar(undefined)
-        }
-    }, [location, identity])
-
     useUpdateEffect(() => {
         const linkParentDom = searchTwitterAvatarLinkSelector().evaluate()?.closest('div')
 

packages/web3-providers/src/opensea/index.ts

@@ -167,6 +167,7 @@ function createNFTAsset(asset: OpenSeaResponse, chainId: ChainId): NonFungibleTo
         })),
         collection: asset.collection as unknown as NonFungibleTokenAPI.AssetCollection,
         response_: asset as any,
+        last_sale: asset.last_sale,
     }
 }
 

packages/web3-providers/src/opensea/types.ts

@@ -102,7 +102,7 @@ export interface OpenSeaResponse extends Asset {
         value: string
     }[]
     num_sales: number
-    last_sale: AssetEvent | null
+    last_sale: NonFungibleTokenAPI.AssetEvent | null
     background_color: string | null
     transfer_fee: string | null
     transfer_fee_payment_token: OpenSeaFungibleToken | null
@@ -114,15 +114,6 @@ export interface OpenSeaResponse extends Asset {
     endTime: string
 }
 
-interface AssetEvent {
-    event_type: string
-    event_timestamp: number
-    auction_type: string
-    total_price: string
-    transaction: Transaction | null
-    payment_token: OpenSeaFungibleToken | null
-}
-
 interface Transaction {
     from_account: OpenSeaCustomAccount
     to_account: OpenSeaCustomAccount

packages/web3-providers/src/rarible/index.ts

@@ -120,6 +120,7 @@ function createNFTAsset(asset: RaribleNFTItemMapResponse, chainId: ChainId): Non
         response_: asset,
         token_id: asset.tokenId,
         safelist_request_status: '',
+        last_sale: null,
     }
 }
 

packages/web3-providers/src/types.ts

@@ -160,6 +160,15 @@ export namespace NonFungibleTokenAPI {
         wiki_link?: string
         safelist_request_status: string
     }
+    export interface AssetEvent {
+        event_type: string
+        event_timestamp: number
+        auction_type: string
+        total_price: string
+        payment_token: {
+            decimals: number
+        }
+    }
 
     export interface Asset {
         is_verified: boolean
@@ -187,7 +196,7 @@ export namespace NonFungibleTokenAPI {
         top_ownerships: {
             owner: AssetOwner
         }[]
-
+        last_sale: AssetEvent | null
         response_: any
     }