From 063449d67737cbb0f5f760b0dd8bdfcc8063726f Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Wed, 5 Jan 2022 18:42:28 +0800 Subject: [PATCH 1/5] fix: nft avatar can't display --- .../plugins/Avatar/SNSAdaptor/NFTBadge.tsx | 4 +- .../injection/NFT/NFTAvatarInTwitter.tsx | 43 +++++++------------ 2 files changed, 19 insertions(+), 28 deletions(-) diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx index e21c25c31aa2..582b44b40389 100644 --- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx +++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx @@ -3,6 +3,7 @@ import { resolveOpenSeaLink } from '@masknet/web3-shared-evm' import Link from '@mui/material/Link' import BigNumber from 'bignumber.js' import { useNFT } from '../hooks' +import { useUserOwnerAddress } from '../hooks/useUserOwnerAddress' import { useNFTVerified } from '../hooks/useNFTVerified' import type { AvatarMetaDB } from '../types' import { NFTAvatarRing } from './NFTAvatarRing' @@ -47,8 +48,9 @@ export function NFTBadge(props: NFTBadgeProps) { avatar.tokenId, ) + const address = useUserOwnerAddress(avatar.userId) const { amount, symbol, name } = value - const { loading: loadingNFTVerified } = useNFTVerified(avatar.address) + const { loading: loadingNFTVerified, value: NFTVerified } = useNFTVerified(avatar.address) return (
{ + useEffect(() => { if (!wallet || !NFTAvatar) return if (!NFTEvent?.address || !NFTEvent?.tokenId) { @@ -85,21 +84,20 @@ 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]) @@ -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') From f24bf2b5c1f49cc49d88f9bf79ca67b8678d7880 Mon Sep 17 00:00:00 2001 From: lelenei <72531217+lelenei@users.noreply.github.com> Date: Thu, 6 Jan 2022 11:39:22 +0800 Subject: [PATCH 2/5] fix: avatar cache and show price (#5399) * fix: cache error * refactor: show price --- .../Avatar/SNSAdaptor/NFTAvatarRing.tsx | 33 ++++++++++++---- .../plugins/Avatar/SNSAdaptor/NFTBadge.tsx | 7 +--- .../mask/src/plugins/Avatar/Services/db.ts | 39 ++++++++++--------- .../mask/src/plugins/Avatar/Services/index.ts | 1 + .../src/plugins/Avatar/Services/verified.ts | 39 ++++++++++--------- .../plugins/Avatar/hooks/useNFTVerified.ts | 5 ++- 6 files changed, 75 insertions(+), 49 deletions(-) diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatarRing.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatarRing.tsx index bd20c64ce021..e54532753bbf 100644 --- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatarRing.tsx +++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatarRing.tsx @@ -11,21 +11,21 @@ interface NFTAvatarRingProps { strokeWidth: number fontSize: number text: string + price: string width: number id: string } export function NFTAvatarRing(props: NFTAvatarRingProps) { const { classes } = useStyles() - const { stroke, strokeWidth, fontSize, text, width, id } = props + const { stroke, strokeWidth, fontSize, text, width, id, price } = props const avatarSize = width + 3 const R = avatarSize / 2 const path_r = R - strokeWidth + fontSize / 2 - const x1 = R - path_r / 2 - const y1 = R + Math.sqrt(Math.pow(path_r, 2) - Math.pow(path_r / 2, 2)) - const x2 = R + path_r / 2 - + const x1 = R - path_r + const y1 = R + const x2 = R + path_r return ( + @@ -67,12 +74,24 @@ export function NFTAvatarRing(props: NFTAvatarRingProps) { - + {text} + + + + + {price} + + + ) diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx index 582b44b40389..c18db7129f6b 100644 --- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx +++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx @@ -3,8 +3,6 @@ import { resolveOpenSeaLink } from '@masknet/web3-shared-evm' import Link from '@mui/material/Link' import BigNumber from 'bignumber.js' import { useNFT } from '../hooks' -import { useUserOwnerAddress } from '../hooks/useUserOwnerAddress' -import { useNFTVerified } from '../hooks/useNFTVerified' import type { AvatarMetaDB } from '../types' import { NFTAvatarRing } from './NFTAvatarRing' @@ -48,9 +46,7 @@ export function NFTBadge(props: NFTBadgeProps) { avatar.tokenId, ) - const address = useUserOwnerAddress(avatar.userId) const { amount, symbol, name } = value - const { loading: loadingNFTVerified, value: NFTVerified } = useNFTVerified(avatar.address) return (
diff --git a/packages/mask/src/plugins/Avatar/Services/db.ts b/packages/mask/src/plugins/Avatar/Services/db.ts index 027e99713d20..2bd399a5d3a5 100644 --- a/packages/mask/src/plugins/Avatar/Services/db.ts +++ b/packages/mask/src/plugins/Avatar/Services/db.ts @@ -17,26 +17,29 @@ async function fetchData() { } async function _fetch() { - const c = cache.get('avatar') - let f, json - if (c) { - f = c[1] - if (!f) { - f = fetchData() - cache.set('avatar', [Date.now(), f]) - } - if (Date.now() - c[0] >= EXPIRED_TIME) { - json = await f - f = fetchData() - cache.set('avatar', [Date.now(), f]) - return json - } - } else { - f = fetchData() + let c = cache.get('avatar') + if (!c) { + const f = fetchData() cache.set('avatar', [Date.now(), f]) + } else { + const [t, f] = c + if (!f || Date.now() - t >= EXPIRED_TIME) { + const _f = fetchData() + cache.set('avatar', [Date.now(), _f]) + } } - json = await f - return json + + c = cache.get('avatar') + if (!c) return [] + const [_, f] = c + + return f + .then((data) => data) + .catch((err) => { + console.log(err) + cache.delete('avatar') + return [] + }) } export async function getNFTAvatarFromJSON(userId: string) { diff --git a/packages/mask/src/plugins/Avatar/Services/index.ts b/packages/mask/src/plugins/Avatar/Services/index.ts index f7099f436b50..3ed77abe52f8 100644 --- a/packages/mask/src/plugins/Avatar/Services/index.ts +++ b/packages/mask/src/plugins/Avatar/Services/index.ts @@ -16,6 +16,7 @@ export async function getNFTAvatar(userId: string) { if (!result) { result = await getNFTAvatarFromJSON(userId) } + return result } diff --git a/packages/mask/src/plugins/Avatar/Services/verified.ts b/packages/mask/src/plugins/Avatar/Services/verified.ts index d211199fcd81..9943f3ec82cf 100644 --- a/packages/mask/src/plugins/Avatar/Services/verified.ts +++ b/packages/mask/src/plugins/Avatar/Services/verified.ts @@ -18,26 +18,29 @@ async function fetchData() { } async function _fetch() { - const c = cache.get('verified') - let f, json - if (c) { - f = c[1] - if (!f) { - f = fetchData() - cache.set('verified', [Date.now(), f]) - } - if (Date.now() - c[0] >= EXPIRED_TIME) { - json = await f - f = fetchData() - cache.set('verified', [Date.now(), f]) - return json - } - } else { - f = fetchData() + let c = cache.get('verified') + if (!c) { + const f = fetchData() cache.set('verified', [Date.now(), f]) + } else { + const [t, f] = c + if (!f || Date.now() - t >= EXPIRED_TIME) { + const _f = fetchData() + cache.set('verified', [Date.now(), _f]) + } } - json = await f - return json + + c = cache.get('verified') + if (!c) return [] + const [_, f] = c + + return f + .then((data) => data) + .catch((err) => { + console.log(err) + cache.delete('verified') + return [] + }) } export async function getNFTContractVerifiedFromJSON(address: string) { diff --git a/packages/mask/src/plugins/Avatar/hooks/useNFTVerified.ts b/packages/mask/src/plugins/Avatar/hooks/useNFTVerified.ts index 10118d6c8c73..bd4cf3ab4f75 100644 --- a/packages/mask/src/plugins/Avatar/hooks/useNFTVerified.ts +++ b/packages/mask/src/plugins/Avatar/hooks/useNFTVerified.ts @@ -4,5 +4,8 @@ import { PluginNFTAvatarRPC } from '../messages' import type { NFTVerified } from '../types' export function useNFTVerified(address: string): AsyncState { - return useAsync(async () => PluginNFTAvatarRPC.getNFTContractVerifiedFromJSON(address), [address]) + return useAsync(async () => { + if (!address) return + return PluginNFTAvatarRPC.getNFTContractVerifiedFromJSON(address) + }, [address]) } From ace20292ec280055c83404c5356f0d8c0c65055d Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Wed, 12 Jan 2022 16:53:05 +0800 Subject: [PATCH 3/5] chore: revert get last sale price --- .../mask/src/plugins/Avatar/utils/index.ts | 16 +++++++++++---- packages/web3-providers/src/opensea/index.ts | 1 + packages/web3-providers/src/opensea/types.ts | 20 +++++++++---------- packages/web3-providers/src/rarible/index.ts | 1 + packages/web3-providers/src/types.ts | 11 +++++++++- 5 files changed, 34 insertions(+), 15 deletions(-) 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/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..4dc170a00614 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 @@ -113,15 +113,15 @@ export interface OpenSeaResponse extends Asset { creator: OpenSeaCustomAccount endTime: string } - -interface AssetEvent { - event_type: string - event_timestamp: number - auction_type: string - total_price: string - transaction: Transaction | null - payment_token: OpenSeaFungibleToken | null -} +// +// 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 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 } From d1812d3214fe932195a734e2f4ac2124bd172d77 Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Wed, 12 Jan 2022 23:32:23 -0800 Subject: [PATCH 4/5] chore: move useless comment --- packages/web3-providers/src/opensea/types.ts | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/web3-providers/src/opensea/types.ts b/packages/web3-providers/src/opensea/types.ts index 4dc170a00614..aa362d68d63f 100644 --- a/packages/web3-providers/src/opensea/types.ts +++ b/packages/web3-providers/src/opensea/types.ts @@ -113,15 +113,6 @@ export interface OpenSeaResponse extends Asset { creator: OpenSeaCustomAccount 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 From b21cab58a9aaf6fe2b4ef47df4c6efde7ba05a19 Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Wed, 12 Jan 2022 23:39:38 -0800 Subject: [PATCH 5/5] fix: update hooks deps --- .../twitter.com/injection/NFT/NFTAvatarInTwitter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 640cead529a4..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 @@ -99,7 +99,7 @@ function NFTAvatarInTwitter() { ) }) setNFTEvent(undefined) - }, [identity.avatar]) + }, [identity.avatar, identity.identifier.userId, NFTEvent?.address, NFTEvent?.tokenId]) useEffect(() => { setAvatar(_avatar)