Merge pull request #1479 from nervosnetwork/develop

Merge develop into testnet
nervosnetwork · Mar 13, 2024 · f45ce3b · f45ce3b
2 parents c0a72ff + bd8441f
commit f45ce3b
Show file tree

Hide file tree

Showing 10 changed files with 159 additions and 131 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "@ant-design/icons": "4.8.1",
     "@ckb-lumos/base": "0.21.0-next.1",
     "@microlink/react-json-view": "1.23.0",
-    "@nervosnetwork/ckb-sdk-utils": "0.109.0",
+    "@nervosnetwork/ckb-sdk-utils": "0.109.1",
     "@sentry/react": "7.94.1",
     "@sentry/tracing": "7.94.1",
     "@spore-sdk/core": "^0.1.0-beta.10",

diff --git a/src/pages/Address/AddressAssetComp.tsx b/src/pages/Address/AddressAssetComp.tsx
@@ -6,7 +6,7 @@ import { CoTA, OmigaInscription, MNFT, NRC721, SUDT, Spore } from '../../models/
 import SUDTTokenIcon from '../../assets/sudt_token.png'
 import { parseUDTAmount } from '../../utils/number'
 import { parseSporeCellData } from '../../utils/spore'
-import { handleNftImgError, hexToBase64, patchMibaoImg } from '../../utils/util'
+import { formatNftDisplayId, handleNftImgError, hexToBase64, patchMibaoImg } from '../../utils/util'
 import { sliceNftName } from '../../utils/string'
 
 export const AddressAssetComp = ({
@@ -71,10 +71,11 @@ export const AddressSporeComp = ({ account }: { account: Spore }) => {
       setIcon(`data:${sporeData.contentType};base64,${base64Data}`)
     }
   }
+  const id = formatNftDisplayId(amount, 'spore')
   return (
     <AddressAssetComp
       href={`/nft-collections/${collection?.typeHash}`}
-      property={`#${amount}`}
+      property={`id: ${id.slice(0, 8)}...${id.slice(-8)}`}
       name={sliceNftName(symbol)}
       udtLabel="Spore"
       icon={{ url: patchMibaoImg(icon), errorHandler: handleNftImgError }}

diff --git a/src/pages/Address/Cells.tsx b/src/pages/Address/Cells.tsx
@@ -5,6 +5,7 @@ import { explorerService } from '../../services/ExplorerService'
 import styles from './cells.module.scss'
 import { shannonToCkb } from '../../utils/util'
 import { parseUDTAmount } from '../../utils/number'
+import { PAGE_SIZE } from '../../constants/common'
 import SUDTTokenIcon from '../../assets/sudt_token.png'
 import CKBTokenIcon from './ckb_token_icon.png'
 
@@ -82,7 +83,9 @@ const Cells: FC<{ address: string; count: number }> = ({ address, count }) => {
         {cells.map(cell => {
           const ckb = Number(shannonToCkb(cell.capacity)).toLocaleString('en')
           const title = `${cell.txHash.slice(0, 8)}...${cell.txHash.slice(-8)}#${cell.cellIndex}`
-          const link = `/transaction/${cell.txHash}`
+          const link = `/transaction/${cell.txHash}?${new URLSearchParams({
+            page_of_outputs: Math.ceil(+cell.cellIndex / PAGE_SIZE).toString(),
+          })}`
           const assetType: string = cell.extraInfo?.type ?? cell.cellType
           let icon = null
           let assetName = null
@@ -132,15 +135,14 @@ const Cells: FC<{ address: string; count: number }> = ({ address, count }) => {
               icon = SUDTTokenIcon
               assetName = 'UNKNOWN'
               assetAmount = '-'
-              // ignore
             }
           }
 
           return (
             <li key={cell.txHash + cell.cellIndex} className={styles.card}>
               <h5>
                 <a href={link}>{title}</a>
-                <span>{`${ckb} CKB`}</span>
+                <span title={`${ckb} CKB`}>{`${ckb} CKB`}</span>
               </h5>
               <div className={styles.content}>
                 {icon ? <img src={icon} alt={assetName ?? 'sudt'} width="40" height="40" /> : null}

diff --git a/src/pages/Address/cells.module.scss b/src/pages/Address/cells.module.scss
@@ -17,7 +17,6 @@
 }
 
 .card {
-  flex-basis: 248px;
   min-height: 86px;
   background: #fff;
   border-radius: 4px;
@@ -35,13 +34,22 @@
     overflow: hidden;
     text-overflow: ellipsis;
 
-    &:hover {
-      a {
+    a {
+      margin-right: 8px;
+
+      &:hover {
         font-weight: bold;
         color: #fff;
         text-decoration: underline;
       }
     }
+
+    span {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: default;
+    }
   }
 
   .content {

diff --git a/src/pages/NftCollectionInfo/NftCollectionOverview/index.tsx b/src/pages/NftCollectionInfo/NftCollectionOverview/index.tsx
@@ -9,6 +9,9 @@ import { getPrimaryColor } from '../../../constants/common'
 
 const primaryColor = getPrimaryColor()
 
+// TODO: add docs of this id
+const UNIQUE_ITEMS_CLUSTER_ID = '0xcf9e0cdbd169550492b29d3d1181d27048ab80126b797840965d2864607a892d'
+
 const NftCollectionOverview = ({ id }: { id: string }) => {
   const { t } = useTranslation()
   const { isLoading, data: info } = useQuery(['collection-info', id], () => explorerService.api.fetchNFTCollection(id))
@@ -47,28 +50,30 @@ const NftCollectionOverview = ({ id }: { id: string }) => {
             : `${(info?.holders_count ?? 0).toLocaleString('en')}/${(info?.items_count ?? 0).toLocaleString('en')}`}
         </dd>
       </dl>
-      <dl>
-        <dt>{t(`nft.minter_address`)}</dt>
-        <dd>
-          {isLoading ? t(`nft.loading`) : null}
+      {id === UNIQUE_ITEMS_CLUSTER_ID ? null : (
+        <dl>
+          <dt>{t(`nft.minter_address`)}</dt>
+          <dd>
+            {isLoading ? t(`nft.loading`) : null}
 
-          {!isLoading && info?.creator ? (
-            <Tooltip title={info.creator}>
-              <Link
-                to={`/address/${info.creator}`}
-                title={info.creator}
-                className="monospace"
-                style={{
-                  color: primaryColor,
-                  fontWeight: 700,
-                }}
-              >{`${info.creator.slice(0, 12)}...${info.creator.slice(-12)}`}</Link>
-            </Tooltip>
-          ) : (
-            '-'
-          )}
-        </dd>
-      </dl>
+            {!isLoading && info?.creator ? (
+              <Tooltip title={info.creator}>
+                <Link
+                  to={`/address/${info.creator}`}
+                  title={info.creator}
+                  className="monospace"
+                  style={{
+                    color: primaryColor,
+                    fontWeight: 700,
+                  }}
+                >{`${info.creator.slice(0, 12)}...${info.creator.slice(-12)}`}</Link>
+              </Tooltip>
+            ) : (
+              '-'
+            )}
+          </dd>
+        </dl>
+      )}
     </div>
   )
 }

diff --git a/src/pages/Transaction/TransactionCellScript/index.tsx b/src/pages/Transaction/TransactionCellScript/index.tsx
@@ -3,15 +3,14 @@ import { useState, ReactNode, useRef } from 'react'
 import BigNumber from 'bignumber.js'
 import { useTranslation } from 'react-i18next'
 import { useQuery } from '@tanstack/react-query'
+import { scriptToHash } from '@nervosnetwork/ckb-sdk-utils'
 import { explorerService } from '../../../services/ExplorerService'
 import { hexToUtf8 } from '../../../utils/string'
 import {
-  TransactionDetailCopyButton,
   TransactionDetailContainer,
   TransactionDetailPanel,
   TransactionCellDetailPanel,
   TransactionCellInfoValuePanel,
-  TransactionDetailScriptButton,
   TransactionCellDetailTab,
   TransactionCellDetailPane,
   TransactionCellDetailTitle,
@@ -23,11 +22,13 @@ import { localeNumberString } from '../../../utils/number'
 import HashTag from '../../../components/HashTag'
 import { ReactComponent as CopyIcon } from '../../../assets/copy_icon.svg'
 import { ReactComponent as OuterLinkIcon } from './outer_link_icon.svg'
+import { ReactComponent as ScriptHashIcon } from './script_hash_icon.svg'
 import { HelpTip } from '../../../components/HelpTip'
 import { useSetToast } from '../../../components/Toast'
 import { CellBasicInfo } from '../../../utils/transformer'
 import { isAxiosError } from '../../../utils/error'
 import { Script } from '../../../models/Script'
+import styles from './styles.module.scss'
 
 enum CellInfo {
   LOCK = 1,
@@ -235,11 +236,30 @@ export default ({ cell, onClose }: TransactionCellScriptProps) => {
     },
   )
 
-  const onClickCopy = () => {
-    navigator.clipboard.writeText(getContentJSONWithSnakeCase(content)).then(
-      () => {
-        setToast({ message: t('common.copied') })
-      },
+  const onCopy = (e: React.SyntheticEvent<HTMLButtonElement>) => {
+    const { role } = e.currentTarget.dataset
+
+    let v = ''
+
+    switch (role) {
+      case 'copy-script': {
+        v = getContentJSONWithSnakeCase(content)
+        break
+      }
+      case 'copy-script-hash': {
+        if (isScript(content)) {
+          v = scriptToHash(content as CKBComponents.Script)
+        }
+        break
+      }
+      default: {
+        // ignore
+      }
+    }
+    if (!v) return
+
+    navigator.clipboard.writeText(v).then(
+      () => setToast({ message: t('common.copied') }),
       error => {
         console.error(error)
       },
@@ -308,16 +328,29 @@ export default ({ cell, onClose }: TransactionCellScriptProps) => {
 
         {!isFetched || !content ? null : (
           <div className="transactionDetailCopy">
-            <TransactionDetailCopyButton onClick={onClickCopy}>
+            <button data-role="copy-script" className={styles.button} type="button" onClick={onCopy}>
               <div>{t('common.copy')}</div>
               <CopyIcon />
-            </TransactionDetailCopyButton>
+            </button>
+
+            {isScript(content) ? (
+              <button data-role="copy-script-hash" className={styles.button} type="button" onClick={onCopy}>
+                <div>Script Hash</div>
+                <ScriptHashIcon />
+              </button>
+            ) : null}
 
             {isScript(content) ? (
-              <TransactionDetailScriptButton href={`/script/${content.codeHash}/${content.hashType}`} target="_blank">
-                <div>{t('scripts.script')}</div>
+              <a
+                data-role="script-info"
+                className={styles.button}
+                href={`/script/${content.codeHash}/${content.hashType}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <div>{`${t('scripts.script')} Info`}</div>
                 <OuterLinkIcon />
-              </TransactionDetailScriptButton>
+              </a>
             ) : null}
           </div>
         )}

diff --git a/src/pages/Transaction/TransactionCellScript/script_hash_icon.svg b/src/pages/Transaction/TransactionCellScript/script_hash_icon.svg
diff --git a/src/pages/Transaction/TransactionCellScript/styled.tsx b/src/pages/Transaction/TransactionCellScript/styled.tsx
@@ -212,86 +212,6 @@ export const TransactionDetailPanel = styled.div`
   }
 `
 
-export const TransactionDetailCopyButton = styled.div`
-  margin: 0 4rem;
-  cursor: pointer;
-  width: 150px;
-  height: 40px;
-  border: 1px ${props => props.theme.primary} solid;
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-
-  > div {
-    color: ${props => props.theme.primary};
-    font-size: 20px;
-  }
-
-  svg {
-    > path {
-      fill: ${props => props.theme.primary};
-    }
-  }
-
-  > img {
-    width: 24px;
-    height: 24px;
-  }
-
-  @media (max-width: ${variables.mobileBreakPoint}) {
-    width: 75px;
-    height: 20px;
-    padding: 0 10px;
-
-    > div {
-      font-size: 12px;
-    }
-
-    > img {
-      width: 14px;
-      height: 14px;
-    }
-  }
-`
-
-export const TransactionDetailScriptButton = styled.a`
-  margin: 0 4rem;
-  cursor: pointer;
-  width: 150px;
-  height: 40px;
-  background: ${props => props.theme.primary};
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-
-  > div {
-    color: white;
-    font-size: 20px;
-  }
-
-  > img {
-    width: 24px;
-    height: 24px;
-  }
-
-  @media (max-width: ${variables.mobileBreakPoint}) {
-    width: 75px;
-    height: 20px;
-    padding: 0 10px;
-
-    > div {
-      font-size: 12px;
-    }
-
-    > img {
-      width: 14px;
-      height: 14px;
-    }
-  }
-`
-
 export const TransactionCellInfoValuePanel = styled.div`
   > div {
     display: flex;