fix(cell-info) (#402)

* fix(cell-info): remove the help tip for RGB++ tab * fix(btc): fix the link to btc explorer * Update src/components/Link/index.tsx Co-authored-by: Chen Yu <[email protected]> Signed-off-by: daryl <[email protected]> --------- Signed-off-by: daryl <[email protected]> Co-authored-by: Chen Yu <[email protected]>
Magickbase · Jul 15, 2024 · 76c4ace · 76c4ace
1 parent 54f37df
commit 76c4ace
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 35 deletions.
diff --git a/src/components/Cell/CellInfo/index.tsx b/src/components/Cell/CellInfo/index.tsx
@@ -11,7 +11,6 @@ import { hexToUtf8 } from '../../../utils/string'
 import { TransactionCellDetailTab, TransactionCellDetailPane, TransactionCellDetailTitle } from './styled'
 import SmallLoading from '../../Loading/SmallLoading'
 import CloseIcon from './modal_close.png'
-import config from '../../../config'
 import { getBtcTimeLockInfo, getBtcUtxo, getContractHashTag } from '../../../utils/util'
 import { localeNumberString } from '../../../utils/number'
 import HashTag from '../../HashTag'
@@ -32,10 +31,8 @@ import { ReactComponent as CompassIcon } from './compass.svg'
 import styles from './styles.module.scss'
 import EllipsisMiddle from '../../EllipsisMiddle'
 import { useIsMobile } from '../../../hooks'
-import { Link } from '../../Link'
+import { BTCExplorerLink } from '../../Link'
 import { CellInfoProps } from './types'
-import { getBtcChainIdentify } from '../../../services/BTCIdentifier'
-import { IS_MAINNET } from '../../../constants/common'
 
 enum CellInfo {
   LOCK = 'lock',
@@ -165,6 +162,7 @@ const JSONKeyValueView = ({ title = '', value = '' }: { title?: string; value?:
   </div>
 )
 
+///
 const ScriptRender = ({ content: script }: { content: Script }) => {
   const { t } = useTranslation()
   const hashTag = getContractHashTag(script)
@@ -173,14 +171,6 @@ const ScriptRender = ({ content: script }: { content: Script }) => {
 
   const txid = btcUtxo?.txid ?? btcTimeLockInfo?.txid
 
-  const { data: identity } = useQuery({
-    queryKey: ['btc-testnet-identity', txid],
-    queryFn: () => (txid ? getBtcChainIdentify(txid) : null),
-    enabled: !IS_MAINNET && !!txid,
-  })
-
-  if (!IS_MAINNET && txid && !identity) return null
-
   return (
     <>
       <JSONKeyValueView title={`"${t('transaction.script_code_hash')}": `} value={script.codeHash} />
@@ -198,34 +188,25 @@ const ScriptRender = ({ content: script }: { content: Script }) => {
       {btcUtxo ? (
         <JSONKeyValueView
           value={
-            <a
-              href={`${config.BITCOIN_EXPLORER}${IS_MAINNET ? '' : `/${identity}`}/tx/${btcUtxo.txid}#vout=${parseInt(
-                btcUtxo.index!,
-                16,
-              )}`}
-              target="_blank"
-              rel="noopener noreferrer"
+            <BTCExplorerLink
               className={styles.btcUtxo}
+              btcTxId={txid ?? ''}
+              path={`/tx/${btcUtxo.txid}#vout=${parseInt(btcUtxo.index!, 16)}`}
             >
               BTC UTXO
               <CompassIcon />
-            </a>
+            </BTCExplorerLink>
           }
         />
       ) : null}
 
       {btcTimeLockInfo ? (
         <JSONKeyValueView
           value={
-            <a
-              href={`${config.BITCOIN_EXPLORER}${IS_MAINNET ? '' : `/${identity}`}/tx/${btcTimeLockInfo.txid}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className={styles.btcUtxo}
-            >
+            <BTCExplorerLink className={styles.btcUtxo} btcTxId={txid ?? ''} path={`/tx/${btcTimeLockInfo.txid}`}>
               {`${btcTimeLockInfo.after} confirmations after BTC Tx`}
               <CompassIcon />
-            </a>
+            </BTCExplorerLink>
           }
         />
       ) : null}
@@ -267,9 +248,9 @@ const CellInfoValueRender = ({ content }: { content: CellInfoValue }) => {
         value={
           <>
             <EllipsisMiddle useTextWidthForPlaceholderWidth>{content.btcTx}</EllipsisMiddle>
-            <Link to={`${config.BITCOIN_EXPLORER}/tx/${content.btcTx}`}>
+            <BTCExplorerLink btcTxId={content.btcTx} path="/tx">
               <ViewIcon />
-            </Link>
+            </BTCExplorerLink>
           </>
         }
       />
@@ -502,12 +483,7 @@ export default ({ cell, onClose }: CellInfoProps) => {
           />
           {cell.rgbInfo && (
             <TransactionCellDetailPane
-              tab={
-                <>
-                  <TransactionCellDetailTitle>{t('transaction.rgbpp')}</TransactionCellDetailTitle>
-                  <HelpTip title={t('glossary.capacity_usage')} placement="bottom" containerRef={ref} />
-                </>
-              }
+              tab={<TransactionCellDetailTitle>{t('transaction.rgbpp')}</TransactionCellDetailTitle>}
               key={CellInfo.RGBPP}
             />
           )}

diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
@@ -2,7 +2,11 @@
 import { ForwardedRef, forwardRef, useMemo } from 'react'
 import { Link as RouterLink, LinkProps as RouterLinkProps, useLocation, useParams } from 'react-router-dom'
 import * as H from 'history'
+import { useQuery } from '@tanstack/react-query'
 import { SupportedLng, addI18nPrefix, removeI18nPrefix } from '../../utils/i18n'
+import { IS_MAINNET } from '../../constants/common'
+import { getBtcChainIdentify } from '../../services/BTCIdentifier'
+import config from '../../config'
 
 export type LinkProps<S> =
   | (Omit<RouterLinkProps<S>, 'to'> & {
@@ -31,3 +35,36 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps<unknown>>((({ lng, t
   return <RouterLink ref={ref} {...props} to={toWithPrefix} />
   // The `as` here is to allow the generic type to be correctly inferred.
 }) as <S>(props: LinkProps<S>, ref: ForwardedRef<HTMLAnchorElement>) => JSX.Element)
+
+export type BTCExplorerLinkProps<S> =
+  | (Omit<RouterLinkProps<S>, 'to'> & {
+      btcTxId: string
+      path: string
+      lng: SupportedLng
+    })
+  | {
+      btcTxId: string
+      path: string
+      lng?: SupportedLng
+    }
+
+export const BTCExplorerLink = forwardRef<HTMLAnchorElement, BTCExplorerLinkProps<unknown>>(((
+  { btcTxId, lng, path, ...props },
+  ref,
+) => {
+  const { locale } = useParams<{ locale?: string }>()
+  const { data: identity } = useQuery({
+    queryKey: ['btc-testnet-identity', btcTxId],
+    queryFn: () => (btcTxId ? getBtcChainIdentify(btcTxId) : null),
+    enabled: !IS_MAINNET && !!btcTxId,
+  })
+
+  return (
+    <Link
+      lng={lng ?? (locale as 'en' | 'zh')}
+      ref={ref}
+      {...props}
+      to={`${config.BITCOIN_EXPLORER}${IS_MAINNET ? '' : `/${identity}`}${path}/${btcTxId}`}
+    />
+  )
+}) as <S>(props: BTCExplorerLinkProps<S>, ref: ForwardedRef<HTMLAnchorElement>) => JSX.Element)