From 2c22fd6d9bf46c8d8ff71486b16fd36cf2762543 Mon Sep 17 00:00:00 2001 From: Keith Date: Sun, 5 Jan 2025 22:34:47 +0900 Subject: [PATCH] feat: add annotation for assets --- src/components/Annotation/index.module.scss | 16 ++++++++++++++++ src/components/Annotation/index.tsx | 12 ++++++++++++ src/constants/marks.ts | 3 +++ src/locales/en.json | 3 ++- src/locales/zh.json | 3 ++- .../NftCollectionOverview/index.tsx | 5 +++++ src/pages/NftCollections/List.tsx | 6 ++++++ src/pages/NftInfo/index.tsx | 12 ++++++++++++ src/pages/NftInfo/styles.module.scss | 4 ++++ 9 files changed, 62 insertions(+), 2 deletions(-) create mode 100644 src/components/Annotation/index.module.scss create mode 100644 src/components/Annotation/index.tsx create mode 100644 src/constants/marks.ts diff --git a/src/components/Annotation/index.module.scss b/src/components/Annotation/index.module.scss new file mode 100644 index 000000000..902593190 --- /dev/null +++ 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 new file mode 100644 index 000000000..47197fd89 --- /dev/null +++ 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 ( + + CAVEAT + + ) +} + +export default Annotation diff --git a/src/constants/marks.ts b/src/constants/marks.ts new file mode 100644 index 000000000..9d733c616 --- /dev/null +++ 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 index b53319a8f..ea5b1c8bf 100644 --- 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 index cca1b5de6..98763e2d1 100644 --- 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 index 6ad8d861e..349d87e6b 100644 --- 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 (
@@ -53,6 +57,7 @@ const NftCollectionOverview = ({ id }: { id: string }) => { {isLoading ? t(`nft.loading`) : info?.name}
+ {annotation ? : null} {isLoading ? t('nft.loading') : info?.tags.map(tag => )}
{desc}
diff --git a/src/pages/NftCollections/List.tsx b/src/pages/NftCollections/List.tsx index a93e6540f..22395b24f 100644 --- 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 ( @@ -311,6 +314,7 @@ export const ListOnDesktop: React.FC<{ isLoading: boolean; list: NFTCollection[]
+ {annotation ? : null} {item.tags.map(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 (
@@ -463,6 +468,7 @@ export const ListOnMobile: React.FC<{ isLoading: boolean; list: NFTCollection[] ) : null}
+ {annotation ? : null} {item.tags.map(tag => ( ))} diff --git a/src/pages/NftInfo/index.tsx b/src/pages/NftInfo/index.tsx index edfa21075..45af81a88 100644 --- 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 } + const annotation = DEPRECATED_DOB_COLLECTION.find(item => item.id === collection) + return (
@@ -160,6 +164,14 @@ const NftInfo = () => {
) : null} + {annotation ? ( +
+
{t(`common.extra`)}
+
+ +
+
+ ) : null}
diff --git a/src/pages/NftInfo/styles.module.scss b/src/pages/NftInfo/styles.module.scss index 47c4b1a7a..79b1419d6 100644 --- 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; +}