fix(btc-link): link to the different btc env (#412)

* fix(btc-link): link to the different btc env

* feat(btc-link): address depends on the txid

* style(btc-link): change the code style

src/components/Btc/Transaction/index.tsx

@@ -1,11 +1,9 @@
 import { useMemo, type FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useQuery } from '@tanstack/react-query'
 import { Tooltip } from 'antd'
 import dayjs from 'dayjs'
 import styles from './styles.module.scss'
 import { type RawBtcRPC } from '../../../services/ExplorerService'
-import config from '../../../config'
 import AddressText from '../../AddressText'
 import EllipsisMiddle from '../../EllipsisMiddle'
 import { ReactComponent as UsedSeal } from './used-seal.svg'
@@ -14,8 +12,7 @@ import { ReactComponent as ViewNewSeal } from './view-new-seal.svg'
 import { ReactComponent as MoreIcon } from '../../../assets/more-icon.svg'
 import { ReactComponent as BtcIcon } from './btc.svg'
 import { ReactComponent as DirectionIcon } from '../../../assets/direction.svg'
-import { getBtcChainIdentify } from '../../../services/BTCIdentifier'
-import { IS_MAINNET } from '../../../constants/common'
+import { BTCExplorerLink } from '../../Link'
 
 const MAX_ITEMS = 10
 
@@ -26,14 +23,6 @@ const BtcTransaction: FC<{
 }> = ({ tx, boundCellIndex, showId = true }) => {
   const { t } = useTranslation()
 
-  const { data: identity } = useQuery({
-    queryKey: ['btc-testnet-identity', tx.txid],
-    queryFn: () => (tx.txid ? getBtcChainIdentify(tx.txid) : null),
-    enabled: !IS_MAINNET && !!tx.txid,
-  })
-
-  const btcExplorer = `${config.BITCOIN_EXPLORER}${IS_MAINNET ? '' : `/${identity}`}`
-
   const time = tx.blocktime ? dayjs(tx.blocktime * 1000) : null
 
   const commitment = useMemo(() => {
@@ -49,9 +38,9 @@ const BtcTransaction: FC<{
       {showId ? (
         <div className={styles.header}>
           <h3 className={styles.txid}>
-            <a href={`${btcExplorer}/tx/${tx.txid}`} title={tx.txid} rel="noopener noreferrer" target="_blank">
+            <BTCExplorerLink id={tx.txid} path="/tx">
               <EllipsisMiddle className="monospace" text={tx.txid} />
-            </a>
+            </BTCExplorerLink>
           </h3>
           {time && tx.confirmations ? (
             <time dateTime={time.toISOString()}>{`${tx.confirmations.toLocaleString('en')} Confirmations (${time.format(
@@ -71,13 +60,9 @@ const BtcTransaction: FC<{
             const boundIndex = boundCellIndex[key]
             return (
               <div key={key} className={styles.input}>
-                <a
-                  href={`${btcExplorer}/address/${input.prevout.scriptPubKey.address}`}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
+                <BTCExplorerLink address={input.prevout.scriptPubKey.address} id={tx.txid} path="/address">
                   <AddressText className="monospace">{input.prevout.scriptPubKey.address}</AddressText>
-                </a>
+                </BTCExplorerLink>
                 <div className={`${styles.btcAttr} monospace`}>
                   <div className={styles.btcValue}>
                     <span>{int}</span>
@@ -102,9 +87,9 @@ const BtcTransaction: FC<{
           })}
           {viewMoreInputs ? (
             <div style={{ marginTop: 4 }}>
-              <a href={`${btcExplorer}/tx/${tx.txid}`} rel="noopener noreferrer" target="_blank">
+              <BTCExplorerLink id={tx.txid} path="/tx">
                 View more in BTC Explorer
-              </a>
+              </BTCExplorerLink>
             </div>
           ) : null}
         </div>
@@ -117,13 +102,9 @@ const BtcTransaction: FC<{
             return (
               <div key={key} className={styles.output}>
                 {output.scriptPubKey.address ? (
-                  <a
-                    href={`${btcExplorer}/address/${output.scriptPubKey.address}`}
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
+                  <BTCExplorerLink address={output.scriptPubKey.address} id={tx.txid} path="/address">
                     <AddressText className="monospace">{output.scriptPubKey.address}</AddressText>
-                  </a>
+                  </BTCExplorerLink>
                 ) : (
                   <div style={{ display: 'flex', gap: 8 }}>
                     OP RETURN
@@ -175,9 +156,9 @@ const BtcTransaction: FC<{
           })}
           {viewMoreOutputs ? (
             <div style={{ marginTop: 4 }}>
-              <a href={`${btcExplorer}/tx/${tx.txid}`} rel="noopener noreferrer" target="_blank">
+              <BTCExplorerLink id={tx.txid} path="/tx">
                 View more in BTC Explorer
-              </a>
+              </BTCExplorerLink>
             </div>
           ) : null}
         </div>

src/components/Link/index.tsx

@@ -38,35 +38,40 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps<unknown>>((({ lng, t
 
 export type BTCExplorerLinkProps<S> =
   | (Omit<RouterLinkProps<S>, 'to'> & {
-      id: string
+      id?: string
+      address?: string
       path: string
       lng: SupportedLng
       anchor?: string
     })
   | {
-      id: string
+      id?: string
+      address?: string
       path: string
       lng?: SupportedLng
       anchor?: string
     }
 
 export const BTCExplorerLink = forwardRef<HTMLAnchorElement, BTCExplorerLinkProps<unknown>>(((
-  { id, lng, path, anchor, ...props },
+  { id, address, lng, path, anchor, ...props },
   ref,
 ) => {
   const { locale } = useParams<{ locale?: string }>()
-  const { data: identity } = useQuery({
-    queryKey: ['btc-testnet-identity', id],
-    queryFn: () => (id ? getBtcChainIdentify(id) : null),
-    enabled: !IS_MAINNET && !!id && path === '/tx',
+  let { data: identity } = useQuery({
+    queryKey: ['btc-testnet-identity', id, address],
+    queryFn: () => getBtcChainIdentify(id!),
+    enabled: !IS_MAINNET && !!id,
   })
+  identity = identity ?? 'testnet'
 
   return (
     <Link
       lng={lng ?? (locale as 'en' | 'zh')}
       ref={ref}
       {...props}
-      to={`${config.BITCOIN_EXPLORER}${IS_MAINNET ? '' : `/${identity}`}${path}/${id}${anchor ? `#${anchor}` : ''}`}
+      to={`${config.BITCOIN_EXPLORER}${IS_MAINNET ? '' : `/${identity}`}${path}/${address ?? id}${
+        anchor ? `#${anchor}` : ''
+      }`}
     />
   )
 }) as <S>(props: BTCExplorerLinkProps<S>, ref: ForwardedRef<HTMLAnchorElement>) => JSX.Element)

src/components/TransactionItem/TransactionRGBPPDigestModal/TransactionRGBPPDigestContent.tsx

@@ -1,5 +1,4 @@
 import { useMemo } from 'react'
-import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import BigNumber from 'bignumber.js'
 import { ReactComponent as CopyIcon } from '../../../assets/copy_icon.svg'
@@ -12,11 +11,8 @@ import EllipsisMiddle from '../../EllipsisMiddle'
 import styles from './TransactionRGBPPDigestContent.module.scss'
 import AddressText from '../../AddressText'
 import { useIsMobile } from '../../../hooks'
-import { Link } from '../../Link'
-import config from '../../../config'
+import { BTCExplorerLink } from '../../Link'
 import SmallLoading from '../../Loading/SmallLoading'
-import { getBtcChainIdentify } from '../../../services/BTCIdentifier'
-import { IS_MAINNET } from '../../../constants/common'
 
 export const TransactionRGBPPDigestContent = ({
   hash,
@@ -31,14 +27,6 @@ export const TransactionRGBPPDigestContent = ({
   const setToast = useSetToast()
   const isMobile = useIsMobile()
 
-  const btcTxId = digest?.txid
-
-  const { data: identity } = useQuery({
-    queryKey: ['btc-testnet-identity', btcTxId],
-    queryFn: () => (btcTxId ? getBtcChainIdentify(btcTxId) : null),
-    enabled: !IS_MAINNET && !!btcTxId,
-  })
-
   const transfers = useMemo(() => {
     const m = new Map<string, LiteTransfer.Transfer[]>()
     digest?.transfers.forEach(tf => {
@@ -124,12 +112,9 @@ export const TransactionRGBPPDigestContent = ({
                 >
                   {digest.txid}
                 </AddressText>
-                <Link
-                  to={`${config.BITCOIN_EXPLORER}${IS_MAINNET ? '' : `/${identity}`}/tx/${digest.txid}`}
-                  className={styles.action}
-                >
+                <BTCExplorerLink className={styles.action} id={digest.txid} path="/tx">
                   <RedirectIcon />
-                </Link>
+                </BTCExplorerLink>
               </>
             )}
           </div>

src/components/UTXOGraph/GraphNode/cellNode.tsx

@@ -9,10 +9,8 @@ import { IS_MAINNET } from '../../../constants/common'
 import { getBtcUtxo, shannonToCkb } from '../../../utils/util'
 import { CellBasicInfo } from '../../../utils/transformer'
 import { ReactComponent as MoreIcon } from '../../../assets/more.svg'
-import { Link } from '../../Link'
-import config from '../../../config'
+import { BTCExplorerLink, Link } from '../../Link'
 import styles from '../styles.module.scss'
-import { getBtcChainIdentify } from '../../../services/BTCIdentifier'
 
 export const useGenerateMenuItem = ({
   t,
@@ -27,11 +25,6 @@ export const useGenerateMenuItem = ({
   btcUtxo?: ReturnType<typeof getBtcUtxo>
   onViewCell: (cell: CellBasicInfo) => void
 }) => {
-  const { data: identity } = useQuery({
-    queryKey: ['btc-testnet-identity', btcUtxo?.txid],
-    queryFn: () => (btcUtxo?.txid ? getBtcChainIdentify(btcUtxo.txid) : null),
-    enabled: !IS_MAINNET && !!btcUtxo?.txid,
-  })
   return useMemo(
     () => [
       {
@@ -46,15 +39,14 @@ export const useGenerateMenuItem = ({
         ? [
             {
               label: (
-                <a
-                  href={`${config.BITCOIN_EXPLORER}${IS_MAINNET ? '' : `/${identity}`}/tx/${
-                    btcUtxo.txid
-                  }#vout=${parseInt(btcUtxo.index!, 16)}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
+                <BTCExplorerLink
+                  className={styles.action}
+                  id={btcUtxo.txid}
+                  anchor={`vout=${parseInt(btcUtxo.index!, 16)}`}
+                  path="/tx"
                 >
                   {t('utxo_graph.view_btc_utxo')}
-                </a>
+                </BTCExplorerLink>
               ),
               key: 'btc-utxo',
             },
@@ -69,7 +61,7 @@ export const useGenerateMenuItem = ({
         key: 'cell',
       },
     ],
-    [t, address, btcUtxo, onViewCell, cell, identity],
+    [t, address, btcUtxo, onViewCell, cell],
   )
 }
 

src/pages/Address/AddressPage.tsx

@@ -23,9 +23,8 @@ import { Card, HashCardHeader } from '../../components/Card'
 import { ReactComponent as ShareIcon } from './share.svg'
 import styles from './styles.module.scss'
 import { useDASAccount } from '../../hooks/useDASAccount'
-import { Link } from '../../components/Link'
+import { BTCExplorerLink, Link } from '../../components/Link'
 import { isValidBTCAddress } from '../../utils/bitcoin'
-import config from '../../config'
 import { defaultAddressInfo } from './state'
 import { BTCAddressOverviewCard } from './BTCAddressComp'
 import Qrcode from '../../components/Qrcode'
@@ -223,14 +222,9 @@ const LinkToBtcAddress = ({ address }: { address: string }) => {
   const { t } = useTranslation()
   return (
     <Tooltip placement="top" title={t('address.view_in_btc_explorer')}>
-      <a
-        rel="noreferrer"
-        target="_blank"
-        className={styles.openInNew}
-        href={`${config.BITCOIN_EXPLORER}/address/${address}`}
-      >
+      <BTCExplorerLink className={styles.openInNew} address={address} path="/address">
         <ShareIcon />
-      </a>
+      </BTCExplorerLink>
     </Tooltip>
   )
 }

src/pages/Address/RgbppAssets.tsx

@@ -1,7 +1,7 @@
 import { type FC, useState, useRef, useEffect } from 'react'
 import { TFunction, useTranslation } from 'react-i18next'
 import BigNumber from 'bignumber.js'
-import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
+import { useInfiniteQuery } from '@tanstack/react-query'
 import { Tooltip } from 'antd'
 import { ReactComponent as ListIcon } from './list.svg'
 import { ReactComponent as GridIcon } from './grid.svg'
@@ -22,14 +22,13 @@ import { TransactionCellInfo } from '../Transaction/TransactionCell'
 import { parseUDTAmount } from '../../utils/number'
 import { getContractHashTag, shannonToCkb } from '../../utils/util'
 import { useSetToast } from '../../components/Toast'
-import { IS_MAINNET, PAGE_SIZE } from '../../constants/common'
+import { PAGE_SIZE } from '../../constants/common'
 import styles from './rgbppAssets.module.scss'
 import MergedAssetList from './MergedAssetList'
 import { UDTAccount } from '../../models/Address'
 import { CellBasicInfo } from '../../utils/transformer'
 import { isTypeIdScript } from '../../utils/typeid'
-import config from '../../config'
-import { getBtcChainIdentify } from '../../services/BTCIdentifier'
+import { BTCExplorerLink } from '../../components/Link'
 import InvalidRGBPPAssetList from './InvalidRGBPPAssetList'
 
 const fetchCells = async ({
@@ -237,13 +236,6 @@ const AssetItem: FC<{ cells: LiveCell[]; btcTxId: string; vout: number; width: n
   width,
 }) => {
   const { t } = useTranslation()
-  const { data: identity } = useQuery({
-    queryKey: ['btc-testnet-identity', btcTxId],
-    queryFn: () => (btcTxId ? getBtcChainIdentify(btcTxId) : null),
-    enabled: !IS_MAINNET && !!btcTxId,
-  })
-  const btcExplorer = `${config.BITCOIN_EXPLORER}${IS_MAINNET ? '' : `/${identity}`}`
-
   return (
     <div key={btcTxId + vout} className={styles.card}>
       <h5
@@ -253,13 +245,12 @@ const AssetItem: FC<{ cells: LiveCell[]; btcTxId: string; vout: number; width: n
         }}
       >
         <div className={styles.explorerLink}>
-          <a href={`${btcExplorer}/tx/${btcTxId}#vout=${vout}`}>{`${btcTxId.slice(0, 4)}...${btcTxId.slice(
-            btcTxId.length - 5,
-            btcTxId.length,
-          )}:${vout}`}</a>
-          <a href={`${btcExplorer}/tx/${btcTxId}#vout=${vout}`}>
+          <BTCExplorerLink className={styles.action} id={btcTxId} anchor={`vout=${vout}`} path="/tx">
+            {`${btcTxId.slice(0, 4)}...${btcTxId.slice(btcTxId.length - 5, btcTxId.length)}:${vout}`}
+          </BTCExplorerLink>
+          <BTCExplorerLink className={styles.action} id={btcTxId} anchor={`vout=${vout}`} path="/tx">
             <RedirectIcon />
-          </a>
+          </BTCExplorerLink>
         </div>
 
         {cells.length > 1 ? (