fix(btc): fix the link to btc explorer

Magickbase · Jul 14, 2024 · 446435f · 446435f
1 parent 032b528
commit 446435f
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 26 deletions.
diff --git a/src/components/Cell/CellInfo/index.tsx b/src/components/Cell/CellInfo/index.tsx
@@ -32,10 +32,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, Link } from '../../Link'
 import { CellInfoProps } from './types'
-import { getBtcChainIdentify } from '../../../services/BTCIdentifier'
-import { IS_MAINNET } from '../../../constants/common'
 
 enum CellInfo {
   LOCK = 'lock',
@@ -165,6 +163,7 @@ const JSONKeyValueView = ({ title = '', value = '' }: { title?: string; value?:
   </div>
 )
 
+///
 const ScriptRender = ({ content: script }: { content: Script }) => {
   const { t } = useTranslation()
   const hashTag = getContractHashTag(script)
@@ -173,14 +172,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 +189,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}
@@ -505,6 +487,7 @@ export default ({ cell, onClose }: CellInfoProps) => {
               tab={
                 <>
                   <TransactionCellDetailTitle>{t('transaction.rgbpp')}</TransactionCellDetailTitle>
+                  <HelpTip title={t('glossary.capacity_usage')} placement="bottom" containerRef={ref} />
                 </>
               }
               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,38 @@ 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,
+  })
+
+  if (!IS_MAINNET && btcTxId && !identity) return `${config.BITCOIN_EXPLORER}${path}`
+
+  return (
+    <Link
+      lng={lng ?? (locale as 'en' | 'zh')}
+      ref={ref}
+      {...props}
+      to={`${config.BITCOIN_EXPLORER}${IS_MAINNET ? '' : `/${identity}`}${path}`}
+    />
+  )
+}) as <S>(props: BTCExplorerLinkProps<S>, ref: ForwardedRef<HTMLAnchorElement>) => JSX.Element)