diff --git a/packages/mask/src/plugins/Avatar/utils/index.ts b/packages/mask/src/plugins/Avatar/utils/index.ts index c9e5630bf754..10ad88cc4d53 100644 --- a/packages/mask/src/plugins/Avatar/utils/index.ts +++ b/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 ?? '', diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx index e56fed2ab7a4..1d53671f2966 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx +++ b/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') diff --git a/packages/web3-providers/src/opensea/index.ts b/packages/web3-providers/src/opensea/index.ts index d799a717dc46..3ea7bd597374 100644 --- a/packages/web3-providers/src/opensea/index.ts +++ b/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, } } diff --git a/packages/web3-providers/src/opensea/types.ts b/packages/web3-providers/src/opensea/types.ts index 6c53e9951388..aa362d68d63f 100644 --- a/packages/web3-providers/src/opensea/types.ts +++ b/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 diff --git a/packages/web3-providers/src/rarible/index.ts b/packages/web3-providers/src/rarible/index.ts index 4c995aa0e84d..2bc5f290a753 100644 --- a/packages/web3-providers/src/rarible/index.ts +++ b/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, } } diff --git a/packages/web3-providers/src/types.ts b/packages/web3-providers/src/types.ts index 6ce0c55d3977..d25de15219bd 100644 --- a/packages/web3-providers/src/types.ts +++ b/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 }