feat: show warning icon when inscription exist same symbol

Signed-off-by: Miles Zhang <[email protected]>
Magickbase · Feb 27, 2024 · d81e2e7 · d81e2e7
1 parent aabf595
commit d81e2e7
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -615,7 +615,8 @@
       "vericode": "Verification Code",
       "get_code": "Get Code",
       "wrong_email": "Wrong Email? Click to report.",
-      "view_original": "View Original"
+      "view_original": "View Original",
+      "repeat_inscription_symbol": "This inscription is a duplicate with an earlier release of the same name."
     },
     "nft": {
       "nft_collection": "NFT Collection",

diff --git a/src/locales/zh.json b/src/locales/zh.json
@@ -616,7 +616,8 @@
       "vericode": "验证码",
       "get_code": "获取验证码",
       "wrong_email": "不是这个邮箱? 提交报告",
-      "view_original": "查看原铭文"
+      "view_original": "查看原铭文",
+      "repeat_inscription_symbol": "此铭文与早期发布的铭文同名"
     },
     "nft": {
       "nft_collection": "NFT 藏品",

diff --git a/src/pages/Tokens/index.tsx b/src/pages/Tokens/index.tsx
@@ -1,4 +1,5 @@
 import { Table, Tooltip } from 'antd'
+import { WarningOutlined } from '@ant-design/icons'
 import { Link } from 'react-router-dom'
 import { useQuery, UseQueryResult } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
@@ -71,7 +72,14 @@ const TokenInfo: FC<{ token: UDT | OmigaInscriptionCollection }> = ({ token }) =
 
   return (
     <div key={token.typeHash} className={styles.tokenInfo}>
-      <img className={styles.icon} src={token.iconFile ? token.iconFile : SUDTTokenIcon} alt="token icon" />
+      <span>
+        {isOmigaInscriptionCollection(token) && !token.published && (
+          <Tooltip title={t('udt.repeat_inscription_symbol')}>
+            <WarningOutlined style={{ fontSize: '16px', color: '#FFB21E' }} />
+          </Tooltip>
+        )}
+        <img className={styles.icon} src={token.iconFile ? token.iconFile : SUDTTokenIcon} alt="token icon" />
+      </span>
       <span className={styles.symbol}>
         {isKnown ? (
           <Link
@@ -211,6 +219,14 @@ const TokenTable: FC<{
         const isKnown = (Boolean(name) && token.published) || isOmigaInscriptionCollection(token)
         return (
           <div className={styles.container}>
+            <div className={styles.warningIcon}>
+              {isOmigaInscriptionCollection(token) && !token.published && (
+                <Tooltip title={t('udt.repeat_inscription_symbol')}>
+                  <WarningOutlined style={{ fontSize: '16px', color: '#FFB21E' }} />
+                </Tooltip>
+              )}
+            </div>
+
             <img className={styles.icon} src={token.iconFile ? token.iconFile : SUDTTokenIcon} alt="token icon" />
             <div className={styles.right}>
               <div className={styles.symbolAndName}>

diff --git a/src/pages/Tokens/styles.module.scss b/src/pages/Tokens/styles.module.scss
@@ -47,14 +47,15 @@
 
 .tokenInfo {
   display: grid;
-  grid-template-columns: min-content 8px min-content 16px auto;
+  grid-template-columns: 40px 16px min-content 16px auto;
   grid-template-rows: 20px;
   padding: 16px 0;
   border-bottom: 1px solid #f5f5f5;
 
   .icon {
     width: auto;
     height: 100%;
+    float: right;
   }
 
   .symbol {
@@ -178,9 +179,15 @@
 
     .container {
       display: flex;
+      position: relative;
       align-items: center;
       gap: 10px;
 
+      .warningIcon {
+        position: absolute;
+        right: 101%;
+      }
+
       .icon {
         width: 30px;
         height: 30px;