From 644d1f5514b7ba3d2a8c09138cdc0aebf570cc50 Mon Sep 17 00:00:00 2001 From: lelenei Date: Wed, 5 Jan 2022 18:08:49 +0800 Subject: [PATCH 1/2] fix: cache error --- .../plugins/Avatar/SNSAdaptor/NFTBadge.tsx | 4 +- .../mask/src/plugins/Avatar/Services/db.ts | 39 ++++++++++--------- .../mask/src/plugins/Avatar/Services/index.ts | 1 + .../plugins/Avatar/hooks/useNFTVerified.ts | 5 ++- .../mask/src/plugins/Avatar/utils/index.ts | 4 +- packages/web3-providers/src/opensea/utils.ts | 4 +- 6 files changed, 31 insertions(+), 26 deletions(-) diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx index e21c25c31aa2..83879ca73232 100644 --- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx +++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx @@ -3,7 +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 { useNFTVerified } from '../hooks/useNFTVerified' import type { AvatarMetaDB } from '../types' import { NFTAvatarRing } from './NFTAvatarRing' @@ -48,7 +47,6 @@ export function NFTBadge(props: NFTBadgeProps) { ) const { amount, symbol, name } = value - const { loading: loadingNFTVerified } = 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/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]) } diff --git a/packages/mask/src/plugins/Avatar/utils/index.ts b/packages/mask/src/plugins/Avatar/utils/index.ts index 562e0c5fae7c..c9e5630bf754 100644 --- a/packages/mask/src/plugins/Avatar/utils/index.ts +++ b/packages/mask/src/plugins/Avatar/utils/index.ts @@ -3,7 +3,7 @@ import { ChainId, NonFungibleAssetProvider } from '@masknet/web3-shared-evm' import { EVM_RPC } from '../../EVM/messages' import Services from '../../../extension/service' import { getOrderUnitPrice } from '@masknet/web3-providers' -import { ONE } from '@masknet/web3-shared-base' +import { ZERO } from '@masknet/web3-shared-base' export async function getNFT(address: string, tokenId: string) { const asset = await EVM_RPC.getAsset({ @@ -17,7 +17,7 @@ export async function getNFT(address: string, tokenId: string) { asset?.desktopOrder?.current_price, asset?.desktopOrder?.payment_token_contract?.decimals ?? 0, asset?.desktopOrder?.quantity ?? '1', - ) ?? ONE + ) ?? ZERO return { amount: amount.toFixed(), name: asset?.name ?? '', diff --git a/packages/web3-providers/src/opensea/utils.ts b/packages/web3-providers/src/opensea/utils.ts index ff4529630aaf..d051ed6ff503 100644 --- a/packages/web3-providers/src/opensea/utils.ts +++ b/packages/web3-providers/src/opensea/utils.ts @@ -5,11 +5,11 @@ export function getOrderUnitPrice(currentPrice?: string, decimals?: number, quan if (!currentPrice || !decimals || !quantity) return const _currentPrice = new BigNumber(currentPrice).div(pow10(decimals)) const _quantity = new BigNumber(quantity).div(pow10(new BigNumber(quantity).eq(1) ? 0 : 8)) - return _currentPrice.dividedBy(_quantity).decimalPlaces(4, 1) + return _currentPrice.dividedBy(_quantity).decimalPlaces(4, 2) } export function getOrderUSDPrice(currentPrice?: string, usdPrice?: string, decimals?: number) { if (!currentPrice || !decimals) return const quantity = new BigNumber(currentPrice).div(pow10(decimals)) - return new BigNumber(usdPrice ?? 0).multipliedBy(quantity).decimalPlaces(2, 1) + return new BigNumber(usdPrice ?? 0).multipliedBy(quantity).decimalPlaces(2, 2) } From ee8a00172aeebf1db42b88927554c0d9ad567a15 Mon Sep 17 00:00:00 2001 From: lelenei Date: Wed, 5 Jan 2022 21:13:27 +0800 Subject: [PATCH 2/2] refactor: show price --- .../Avatar/SNSAdaptor/NFTAvatarRing.tsx | 33 ++++++++++++---- .../plugins/Avatar/SNSAdaptor/NFTBadge.tsx | 3 +- .../src/plugins/Avatar/Services/verified.ts | 39 ++++++++++--------- 3 files changed, 49 insertions(+), 26 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 83879ca73232..c18db7129f6b 100644 --- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx +++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx @@ -62,7 +62,8 @@ export function NFTBadge(props: NFTBadgeProps) { strokeWidth={14} stroke="black" fontSize={9} - text={loading ? 'loading...' : `${name} ${formatPrice(amount)} ${symbol}`} + text={loading ? 'loading...' : name} + price={loading ? '' : `${formatPrice(amount)} ${symbol}`} /> 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) {