Merge pull request #1753 from nervosnetwork/develop

Merge develop into testnet
nervosnetwork · Aug 14, 2024 · 230a82a · 230a82a
2 parents e3bbfcd + 87fbf1d
commit 230a82a
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 29 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -799,13 +799,13 @@
       "created_time": "Created Time",
       "tokens_empty": "There are no xUDTs at this time.",
       "tags": {
-        "invalid": "Invalid",
-        "suspicious": "Suspicious",
+        "invalid": "Invalid Name",
+        "suspicious": "Suspicious Name",
         "utility": "Utility",
-        "out-of-length-range": "Out Of Length Range",
+        "out-of-length-range": "Name Length Exceeded",
         "duplicate": "Duplicate",
-        "layer-1-asset": "Layer 1 Asset",
-        "layer-2-asset": "Layer 2 Asset",
+        "layer-1-asset": "Layer1 Asset",
+        "layer-2-asset": "Layer2 Asset",
         "verified-on": "Verified On Platform",
         "supply-limited": "Supply Limited",
         "supply-unlimited": "Supply Unlimited",

diff --git a/src/pages/NftCollectionInfo/NftCollectionOverview/index.tsx b/src/pages/NftCollectionInfo/NftCollectionOverview/index.tsx
@@ -24,7 +24,8 @@ const NftCollectionOverview = ({ id }: { id: string }) => {
     if (!info?.description) return '-'
     try {
       const parsed = JSON.parse(info.description)
-      if ('description' in parsed) return parsed.description
+      if ('description' in parsed)
+        return typeof parsed.description === 'object' ? JSON.stringify(parsed.description) : parsed.description
       return info.description
     } catch {
       return info.description

diff --git a/src/pages/Script/ScriptsComp.tsx b/src/pages/Script/ScriptsComp.tsx
@@ -32,36 +32,44 @@ export const ScriptTransactions = ({ page, size }: { page: number; size: number
   const [transactionsEmpty, setTransactionsEmpty] = useState(false)
   const previousTransactionEmpty = usePrevious(transactionsEmpty)
 
-  const transactionsQuery = useQuery(['scripts_ckb_transactions', codeHash, hashType, page, size], async () => {
-    try {
-      const { transactions, total } = await explorerService.api.fetchScriptCKBTransactions(
-        codeHash,
-        hashType,
-        page,
-        size,
-      )
-
-      if (!transactions.length) {
-        setTransactionsEmpty(true)
-      }
-      return {
-        total,
-        ckbTransactions: transactions,
-      }
-    } catch (error) {
+  const {
+    data = {
+      total: 0,
+      ckbTransactions: [],
+    },
+    isLoading,
+    error,
+  } = useQuery(['scripts_ckb_transactions', codeHash, hashType, page, size], async () => {
+    const { transactions, total } = await explorerService.api.fetchScriptCKBTransactions(codeHash, hashType, page, size)
+
+    if (!transactions.length) {
       setTransactionsEmpty(true)
-      return { total: 0, ckbTransactions: [] }
+    }
+    return {
+      total,
+      ckbTransactions: transactions,
     }
   })
 
-  const ckbTransactions = transactionsQuery.data?.ckbTransactions ?? []
-  const total = transactionsQuery.data?.total ?? 0
+  const { total, ckbTransactions } = data
   const totalPages = Math.ceil(total / size)
 
   const onChange = (page: number) => {
     history.push(`/${language}/script/${codeHash}/${hashType}?page=${page}&size=${size}`)
   }
 
+  const status = (() => {
+    if (error) {
+      return (error as Error).message
+    }
+
+    if (isLoading && !previousTransactionEmpty) {
+      return t('nft.loading')
+    }
+
+    return t(`nft.no_record`)
+  })()
+
   return (
     <>
       <div className={styles.scriptTransactionsPanel}>
@@ -77,9 +85,7 @@ export const ScriptTransactions = ({ page, size }: { page: number; size: number
             />
           ))
         ) : (
-          <div className={styles.loadingOrEmpty}>
-            {transactionsQuery.isLoading && !previousTransactionEmpty ? t('nft.loading') : t(`nft.no_record`)}
-          </div>
+          <div className={styles.loadingOrEmpty}>{status}</div>
         )}
       </div>
       {totalPages > 1 && (

diff --git a/src/pages/Script/index.tsx b/src/pages/Script/index.tsx
@@ -3,6 +3,7 @@ import { useHistory } from 'react-router'
 import { useParams } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
+import { Link } from '../../components/Link'
 import Content from '../../components/Content'
 import { useCurrentLanguage } from '../../utils/i18n'
 import { localeNumberString } from '../../utils/number'
@@ -18,6 +19,7 @@ import { explorerService } from '../../services/ExplorerService'
 import type { ScriptInfo } from '../../services/ExplorerService/fetcher'
 import { ScriptTab, ScriptTabPane, ScriptTabTitle } from './styled'
 import { Card, CardCellInfo, CardCellsLayout } from '../../components/Card'
+import { ReactComponent as OpenSourceIcon } from '../../assets/open-source.svg'
 import { HashType } from '../../constants/common'
 
 const scriptDataList = isMainnet() ? MainnetContractHashTags : TestnetContractHashTags
@@ -150,10 +152,27 @@ export const ScriptPage = () => {
     }
   }, [hashType, history])
 
+  const codeUrl = scriptNameList.get(scriptInfo.scriptName)?.code
+
   return (
     <Content>
       <div className={`${styles.scriptContentPanel} container`}>
         <Card>
+          <div className={styles.headerCard}>
+            <span className={styles.headerTitle}>Script</span>
+
+            {scriptInfo.scriptName ? <span className={styles.headerSubTitle}>{scriptInfo.scriptName}</span> : null}
+
+            {codeUrl ? (
+              <Link to={codeUrl} style={{ marginLeft: 'auto' }} className={styles.openSourceAction}>
+                {t('scripts.open_source_script')}
+                <OpenSourceIcon />
+              </Link>
+            ) : null}
+          </div>
+        </Card>
+
+        <Card style={{ marginTop: 24 }}>
           <CardCellsLayout type="left-right" cells={useScriptInfo(scriptInfo)} />
         </Card>
 

diff --git a/src/pages/Script/styles.module.scss b/src/pages/Script/styles.module.scss
@@ -159,3 +159,36 @@
 .noRecord {
   text-align: center;
 }
+
+.headerCard {
+  padding: 24px 0;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+
+  .headerTitle {
+    font-size: 24px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .headerSubTitle {
+    font-size: 16px;
+    color: #666;
+  }
+
+  .openSourceAction {
+    padding: 6px 8px;
+    display: flex;
+    align-items: center;
+    border-radius: 24px;
+    gap: 4px;
+    border: 1px solid #8a8a8a;
+    transition: all 0.3s;
+
+    &:hover {
+      border-color: var(--primary-color);
+    }
+  }
+}