feat: add annotation for assets

nervosnetwork · Jan 5, 2025 · 2c22fd6 · 2c22fd6
1 parent 08c0566
commit 2c22fd6
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 2 deletions.
diff --git a/src/components/Annotation/index.module.scss b/src/components/Annotation/index.module.scss
@@ -0,0 +1,16 @@
+.container {
+  background: rgb(255 238 214);
+  border: 1px solid rgb(234 177 81);
+  color: rgb(117 74 34);
+  font-size: 0.75rem;
+  line-height: 1;
+  border-radius: 4px;
+  display: flex;
+  padding: 4px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+  outline: none;
+  cursor: help;
+}
diff --git a/src/components/Annotation/index.tsx b/src/components/Annotation/index.tsx
@@ -0,0 +1,12 @@
+import { Tooltip } from 'antd'
+import styles from './index.module.scss'
+
+const Annotation = ({ content }: { content: string }) => {
+  return (
+    <Tooltip title={content}>
+      <b className={styles.container}>CAVEAT</b>
+    </Tooltip>
+  )
+}
+
+export default Annotation
diff --git a/src/constants/marks.ts b/src/constants/marks.ts
@@ -0,0 +1,3 @@
+export const DEPRECATED_DOB_COLLECTION: Record<'id' | 'reason', string>[] = [
+  { id: '0x8a9f631f374e13911f16468c938650ec15fae6d1fa73aeb33ff40b746eaf361f', reason: 'Content Malformed' },
+]
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -17,7 +17,8 @@
       "minutes": "MINS",
       "seconds": "SECS",
       "minaraTime": "Est May 10th 2022",
-      "miranaAlive": "MIRANA IS LIVE"
+      "miranaAlive": "MIRANA IS LIVE",
+      "extra": "Extra"
     },
     "unit": {
       "days": "days",

diff --git a/src/locales/zh.json b/src/locales/zh.json
@@ -17,7 +17,8 @@
       "minutes": "分钟",
       "seconds": "秒",
       "minaraTime": "美国东部时间: 2022 年 05 月 10 日",
-      "miranaAlive": "MIRANA 已经激活"
+      "miranaAlive": "MIRANA 已经激活",
+      "extra": "额外信息"
     },
     "unit": {
       "days": "天",

diff --git a/src/pages/NftCollectionInfo/NftCollectionOverview/index.tsx b/src/pages/NftCollectionInfo/NftCollectionOverview/index.tsx
@@ -8,6 +8,8 @@ import styles from './styles.module.scss'
 import { handleNftImgError, patchMibaoImg } from '../../../utils/util'
 import { getPrimaryColor } from '../../../constants/common'
 import NFTTag from '../../../components/NFTTag'
+import { DEPRECATED_DOB_COLLECTION } from '../../../constants/marks'
+import Annotation from '../../../components/Annotation'
 
 const primaryColor = getPrimaryColor()
 
@@ -32,6 +34,8 @@ const NftCollectionOverview = ({ id }: { id: string }) => {
     }
   }, [info?.description])
 
+  const annotation = DEPRECATED_DOB_COLLECTION.find(item => item.id === id)
+
   return (
     <div className={styles.container}>
       <div className={styles.header}>
@@ -53,6 +57,7 @@ const NftCollectionOverview = ({ id }: { id: string }) => {
         <span>{isLoading ? t(`nft.loading`) : info?.name}</span>
       </div>
       <div className={styles.tags}>
+        {annotation ? <Annotation content={annotation.reason} /> : null}
         {isLoading ? t('nft.loading') : info?.tags.map(tag => <NFTTag key={tag} tagName={tag} to="/nft-collections" />)}
       </div>
       <div className={styles.desc}>{desc}</div>

diff --git a/src/pages/NftCollections/List.tsx b/src/pages/NftCollections/List.tsx
@@ -19,6 +19,8 @@ import NFTTag, { whiteList } from '../../components/NFTTag'
 import { Card } from '../../components/Card'
 import { FilterSortContainerOnMobile } from '../../components/FilterSortContainer'
 import AddressText from '../../components/AddressText'
+import { DEPRECATED_DOB_COLLECTION } from '../../constants/marks'
+import Annotation from '../../components/Annotation'
 
 const primaryColor = getPrimaryColor()
 function useFilterList(): Record<'title' | 'value', string>[] {
@@ -276,6 +278,7 @@ export const ListOnDesktop: React.FC<{ isLoading: boolean; list: NFTCollection[]
             } catch {
               typeHash = item.sn
             }
+            const annotation = DEPRECATED_DOB_COLLECTION.find(i => i.id === typeHash)
             return (
               <tr key={item.id}>
                 <td>
@@ -311,6 +314,7 @@ export const ListOnDesktop: React.FC<{ isLoading: boolean; list: NFTCollection[]
                 </td>
                 <td>
                   <div className={styles.tags}>
+                    {annotation ? <Annotation content={annotation.reason} /> : null}
                     {item.tags.map(tag => (
                       <NFTTag key={`${item.id}${item.tags}`} tagName={tag} />
                     ))}
@@ -391,6 +395,7 @@ export const ListOnMobile: React.FC<{ isLoading: boolean; list: NFTCollection[]
             } catch {
               // ignore
             }
+            const annotation = DEPRECATED_DOB_COLLECTION.find(i => i.id === typeHash)
             return (
               <Card key={item.id} className={styles.tokensCard}>
                 <div>
@@ -463,6 +468,7 @@ export const ListOnMobile: React.FC<{ isLoading: boolean; list: NFTCollection[]
                   </dl>
                 ) : null}
                 <dl className={styles.tokenInfo} style={{ flexDirection: 'row' }}>
+                  {annotation ? <Annotation content={annotation.reason} /> : null}
                   {item.tags.map(tag => (
                     <NFTTag tagName={tag} />
                   ))}

diff --git a/src/pages/NftInfo/index.tsx b/src/pages/NftInfo/index.tsx
@@ -13,6 +13,8 @@ import { patchMibaoImg, handleNftImgError, formatNftDisplayId, hexToBase64 } fro
 import { getImgFromSporeCell } from '../../utils/spore'
 import { useSearchParams } from '../../hooks'
 import DobTraits from '../../components/DobTraits'
+import { DEPRECATED_DOB_COLLECTION } from '../../constants/marks'
+import Annotation from '../../components/Annotation'
 
 const primaryColor = getPrimaryColor()
 const UNIQUE_ITEM_LABEL = 'Unique Item'
@@ -85,6 +87,8 @@ const NftInfo = () => {
     return <Cover className={styles.cover} />
   }
 
+  const annotation = DEPRECATED_DOB_COLLECTION.find(item => item.id === collection)
+
   return (
     <div className={styles.container}>
       <div className={styles.overview}>
@@ -160,6 +164,14 @@ const NftInfo = () => {
                 <DobTraits dob={dob} />
               </div>
             ) : null}
+            {annotation ? (
+              <div className={styles.item}>
+                <div>{t(`common.extra`)}</div>
+                <div className={styles.extra}>
+                  <Annotation content={annotation.reason} />
+                </div>
+              </div>
+            ) : null}
           </div>
         </div>
       </div>

diff --git a/src/pages/NftInfo/styles.module.scss b/src/pages/NftInfo/styles.module.scss
@@ -119,3 +119,7 @@
   margin-right: 6px;
   font-size: 16px;
 }
+
+.extra {
+  width: min-content;
+}