fix: avatar cache and show price

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 (
         <RainbowBox>
             <svg
@@ -36,12 +36,19 @@ export function NFTAvatarRing(props: NFTAvatarRingProps) {
                 id={id}>
                 <defs>
                     <path
-                        id={`${id}-path`}
+                        id={`${id}-path-name`}
                         fill="none"
                         stroke="none"
                         strokeWidth="0"
                         d={`M${x1} ${y1} A${path_r} ${path_r} 0 1 1 ${x2} ${y1}`}
                     />
+                    <path
+                        id={`${id}-path-price`}
+                        fill="none"
+                        stroke="none"
+                        strokeWidth="0"
+                        d={`M${x1} ${y1} A${path_r} ${path_r} 0 1 0 ${x2} ${y1}`}
+                    />
                     <linearGradient id={`${id}-gradient`} x1="0%" y1="0%" x2="100%" y2="0">
                         <stop offset="0%" stopColor="#00f8ff" />
                         <stop offset="20%" stopColor="#a4ff00" />
@@ -67,12 +74,24 @@ export function NFTAvatarRing(props: NFTAvatarRingProps) {
                 </pattern>
 
                 <text x="0%" textAnchor="middle" fill={`url(#${id}-pattern)`} fontFamily="sans-serif">
-                    <textPath xlinkHref={`#${id}-path`} startOffset="50%" rotate="auto">
+                    <textPath xlinkHref={`#${id}-path-name`} startOffset="50%" rotate="auto">
                         <tspan fontWeight="bold" fontSize={fontSize}>
                             {text}
                         </tspan>
                     </textPath>
                 </text>
+
+                <text x="0%" textAnchor="middle" fill={`url(#${id}-pattern)`} fontFamily="sans-serif">
+                    <textPath
+                        xlinkHref={`#${id}-path-price`}
+                        startOffset="50%"
+                        rotate="auto"
+                        dominantBaseline="mathematical">
+                        <tspan fontWeight="bold" fontSize={fontSize}>
+                            {price}
+                        </tspan>
+                    </textPath>
+                </text>
             </svg>
         </RainbowBox>
     )

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 (
         <div
@@ -64,7 +62,8 @@ export function NFTBadge(props: NFTBadgeProps) {
                     strokeWidth={14}
                     stroke="black"
                     fontSize={9}
-                    text={loading || loadingNFTVerified ? 'loading...' : `${name} ${formatPrice(amount)} ${symbol}`}
+                    text={loading ? 'loading...' : name}
+                    price={loading ? '' : `${formatPrice(amount)} ${symbol}`}
                 />
             </Link>
         </div>

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) {

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
 }
 

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) {

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<NFTVerified> {
-    return useAsync(async () => PluginNFTAvatarRPC.getNFTContractVerifiedFromJSON(address), [address])
+    return useAsync(async () => {
+        if (!address) return
+        return PluginNFTAvatarRPC.getNFTContractVerifiedFromJSON(address)
+    }, [address])
 }

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(isOne(quantity) ? 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)
 }