From 277319236b3ac87febb61c35a15b618e2bd32433 Mon Sep 17 00:00:00 2001
From: daryl <sai9375@hotmail.com>
Date: Wed, 7 Aug 2024 14:07:16 +0800
Subject: [PATCH 1/3] fix(block): extra null block request (#409)

* fix(block): extra null block request

* style(block): use falsy condition
---
 src/pages/BlockDetail/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/BlockDetail/index.tsx b/src/pages/BlockDetail/index.tsx
index f84b302c9..6e48c1959 100644
--- a/src/pages/BlockDetail/index.tsx
+++ b/src/pages/BlockDetail/index.tsx
@@ -79,7 +79,7 @@ export default () => {
   const queryBlockTransactions = useQuery(
     ['block-transactions', blockHash, currentPage, pageSizeParam, filter],
     async () => {
-      assert(blockHash != null)
+      assert(!!blockHash)
       try {
         const { transactions, total, pageSize } = await explorerService.api.fetchTransactionsByBlockHash(blockHash, {
           page: currentPage,

From 6e0254e59dc0d5a55addf192558b2e4542c51da4 Mon Sep 17 00:00:00 2001
From: daryl <sai9375@hotmail.com>
Date: Wed, 7 Aug 2024 18:37:26 +0800
Subject: [PATCH 2/3] fix(live-cell): not filter bound status when using ckb
 address (#414)

---
 src/pages/Address/Cells.tsx             | 3 ++-
 src/services/ExplorerService/fetcher.ts | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/Address/Cells.tsx b/src/pages/Address/Cells.tsx
index a342e5470..4406435ce 100644
--- a/src/pages/Address/Cells.tsx
+++ b/src/pages/Address/Cells.tsx
@@ -44,7 +44,8 @@ const fetchCells = async ({
   sort: string
   page: number
 }) => {
-  const res = await explorerService.api.fetchAddressLiveCells(address, page, size, sort)
+  const boundStatus = address.startsWith('ckb') || address.startsWith('ckt') ? undefined : 'bound'
+  const res = await explorerService.api.fetchAddressLiveCells(address, page, size, sort, boundStatus)
   return {
     data: res.data,
     nextPage: page + 1,
diff --git a/src/services/ExplorerService/fetcher.ts b/src/services/ExplorerService/fetcher.ts
index 4266adad3..775a72fe0 100644
--- a/src/services/ExplorerService/fetcher.ts
+++ b/src/services/ExplorerService/fetcher.ts
@@ -176,7 +176,7 @@ export const apiFetcher = {
     page: number,
     size: number,
     sort?: string,
-    boundStatus: 'bound' | 'unbound' = 'bound',
+    boundStatus?: 'bound' | 'unbound',
   ) => {
     return v1GetUnwrappedPagedList<LiveCell>(`address_live_cells/${address}`, {
       params: {

From 380c792db65bdf6c7e2bcf5a06c7866463a07509 Mon Sep 17 00:00:00 2001
From: daryl <sai9375@hotmail.com>
Date: Thu, 8 Aug 2024 14:11:31 +0800
Subject: [PATCH 3/3] 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      | 41 +++++------------
 src/components/Link/index.tsx                 | 21 +++++----
 .../TransactionRGBPPDigestContent.tsx         | 21 ++-------
 .../UTXOGraph/GraphNode/cellNode.tsx          | 24 ++++------
 src/pages/Address/AddressPage.tsx             | 12 ++---
 src/pages/Address/RgbppAssets.tsx             | 25 ++++-------
 src/pages/RGBPP/TransactionList/List/item.tsx | 37 ++++-----------
 .../TransactionCellScript/index.tsx           | 45 ++++---------------
 8 files changed, 63 insertions(+), 163 deletions(-)

diff --git a/src/components/Btc/Transaction/index.tsx b/src/components/Btc/Transaction/index.tsx
index 7ab736ebf..4507d94a1 100644
--- a/src/components/Btc/Transaction/index.tsx
+++ b/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>
diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
index 7bff26f8c..0f4e2d770 100644
--- a/src/components/Link/index.tsx
+++ b/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)
diff --git a/src/components/TransactionItem/TransactionRGBPPDigestModal/TransactionRGBPPDigestContent.tsx b/src/components/TransactionItem/TransactionRGBPPDigestModal/TransactionRGBPPDigestContent.tsx
index bd971d096..8211a3775 100644
--- a/src/components/TransactionItem/TransactionRGBPPDigestModal/TransactionRGBPPDigestContent.tsx
+++ b/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>
diff --git a/src/components/UTXOGraph/GraphNode/cellNode.tsx b/src/components/UTXOGraph/GraphNode/cellNode.tsx
index 2614f75ff..a68976ab8 100644
--- a/src/components/UTXOGraph/GraphNode/cellNode.tsx
+++ b/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],
   )
 }
 
diff --git a/src/pages/Address/AddressPage.tsx b/src/pages/Address/AddressPage.tsx
index df01114f6..241e3d917 100644
--- a/src/pages/Address/AddressPage.tsx
+++ b/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>
   )
 }
diff --git a/src/pages/Address/RgbppAssets.tsx b/src/pages/Address/RgbppAssets.tsx
index a60cfeb54..46248a4d7 100644
--- a/src/pages/Address/RgbppAssets.tsx
+++ b/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 ? (
diff --git a/src/pages/RGBPP/TransactionList/List/item.tsx b/src/pages/RGBPP/TransactionList/List/item.tsx
index c1a157c5c..eea62a8cc 100644
--- a/src/pages/RGBPP/TransactionList/List/item.tsx
+++ b/src/pages/RGBPP/TransactionList/List/item.tsx
@@ -1,16 +1,12 @@
 import { useTranslation } from 'react-i18next'
-import { useQuery } from '@tanstack/react-query'
 import AddressText from '../../../../components/AddressText'
-import { Link } from '../../../../components/Link'
+import { BTCExplorerLink, Link } from '../../../../components/Link'
 import { useStatistics } from '../../../../services/ExplorerService'
 import { localeNumberString } from '../../../../utils/number'
 import { dayjs } from '../../../../utils/date'
 import { ReactComponent as ShareIcon } from './share_icon.svg'
-import config from '../../../../config'
 import { TransactionLeapDirection } from '../../../../components/RGBPP/types'
 import styles from './styles.module.scss'
-import { getBtcChainIdentify } from '../../../../services/BTCIdentifier'
-import { IS_MAINNET } from '../../../../constants/common'
 import { HelpTip } from '../../../../components/HelpTip'
 
 export type Transaction = {
@@ -27,14 +23,6 @@ const Item = ({ item }: { item: Transaction }) => {
   const statistics = useStatistics()
   const tipBlockNumber = parseInt(statistics?.tipBlockNumber ?? '0', 10)
 
-  const { data: identity } = useQuery({
-    queryKey: ['btc-testnet-identity', item.btcTxId],
-    queryFn: () => (item.btcTxId ? getBtcChainIdentify(item.btcTxId) : null),
-    enabled: !IS_MAINNET && !!item.btcTxId,
-  })
-
-  const btcExplorerUrl = `${config.BITCOIN_EXPLORER}${IS_MAINNET ? '' : `/${identity}`}`
-
   return (
     <tr key={item.ckbTxId}>
       <td className={styles.hash} title={t('rgbpp.transaction.ckb_tx')}>
@@ -83,23 +71,14 @@ const Item = ({ item }: { item: Transaction }) => {
             style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8 }}
             title={t('rgbpp.transaction.view_on_bitcoin_explorer')}
           >
-            <AddressText
-              style={{ marginLeft: 'auto' }}
-              disableTooltip
-              linkProps={{
-                to: `${btcExplorerUrl}/tx/${item.btcTxId}`,
-              }}
-            >
-              {item.btcTxId}
-            </AddressText>
-            <a
-              href={`${btcExplorerUrl}/tx/${item.btcTxId}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              style={{ display: 'flex', alignItems: 'center' }}
-            >
+            <BTCExplorerLink className={styles.action} id={item.btcTxId} path="/tx">
+              <AddressText style={{ marginLeft: 'auto' }} disableTooltip>
+                {item.btcTxId}
+              </AddressText>
+            </BTCExplorerLink>
+            <BTCExplorerLink className={styles.action} id={item.btcTxId} path="/tx">
               <ShareIcon />
-            </a>
+            </BTCExplorerLink>
           </div>
         ) : (
           '/'
diff --git a/src/pages/Transaction/TransactionCellScript/index.tsx b/src/pages/Transaction/TransactionCellScript/index.tsx
index 1bae368b7..52a483516 100644
--- a/src/pages/Transaction/TransactionCellScript/index.tsx
+++ b/src/pages/Transaction/TransactionCellScript/index.tsx
@@ -3,7 +3,6 @@ import type { Cell } from '@ckb-lumos/base'
 import { useState, ReactNode, useRef, FC } 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 type { ContractHashTag } from '../../../constants/scripts'
 import {
@@ -16,7 +15,6 @@ import {
   TransactionCellDetailTitle,
 } from './styled'
 import CloseIcon from './modal_close.png'
-import config from '../../../config'
 import { getBtcTimeLockInfo, getBtcUtxo, getContractHashTag } from '../../../utils/util'
 import { localeNumberString } from '../../../utils/number'
 import { cellOccupied } from '../../../utils/cell'
@@ -30,8 +28,7 @@ import { useSetToast } from '../../../components/Toast'
 import { Script } from '../../../models/Script'
 import { ReactComponent as CompassIcon } from './compass.svg'
 import styles from './styles.module.scss'
-import { getBtcChainIdentify } from '../../../services/BTCIdentifier'
-import { IS_MAINNET } from '../../../constants/common'
+import { BTCExplorerLink } from '../../../components/Link'
 
 enum CellInfo {
   LOCK = 1,
@@ -92,29 +89,18 @@ const JSONKeyValueView = ({ title = '', value = '' }: { title?: string; value?:
 )
 
 const RGBPP: FC<{ btcUtxo: Partial<Record<'txid' | 'index', string>> }> = ({ btcUtxo }) => {
-  const { data: identity } = useQuery({
-    queryKey: ['btc-testnet-identity', btcUtxo.txid],
-    queryFn: () => (btcUtxo?.txid ? getBtcChainIdentify(btcUtxo.txid) : null),
-    enabled: !IS_MAINNET && !!btcUtxo.txid,
-  })
-
-  if (!IS_MAINNET && !identity) return null
-
   return (
     <JSONKeyValueView
       value={
-        <a
-          href={`${config.BITCOIN_EXPLORER}${IS_MAINNET ? '' : `/${identity}`}/tx/${btcUtxo.txid}#vout=${parseInt(
-            btcUtxo.index!,
-            16,
-          )}`}
-          target="_blank"
-          rel="noopener noreferrer"
-          className={styles.btcUtxo}
+        <BTCExplorerLink
+          className={styles.action}
+          id={btcUtxo.txid}
+          anchor={`vout=${parseInt(btcUtxo.index!, 16)}`}
+          path="/tx"
         >
           BTC UTXO
           <CompassIcon />
-        </a>
+        </BTCExplorerLink>
       }
     />
   )
@@ -126,26 +112,13 @@ const BTCTimeLock: FC<{
     after: number
   }
 }> = ({ btcTimeLockInfo }) => {
-  const { data: identity } = useQuery({
-    queryKey: ['btc-testnet-identity', btcTimeLockInfo.txid],
-    queryFn: () => (btcTimeLockInfo?.txid ? getBtcChainIdentify(btcTimeLockInfo.txid) : null),
-    enabled: !IS_MAINNET && !!btcTimeLockInfo.txid,
-  })
-
-  if (!IS_MAINNET && !identity) return null
-
   return (
     <JSONKeyValueView
       value={
-        <a
-          href={`${config.BITCOIN_EXPLORER}${IS_MAINNET ? '' : `/${identity}`}/tx/${btcTimeLockInfo.txid}`}
-          target="_blank"
-          rel="noopener noreferrer"
-          className={styles.btcUtxo}
-        >
+        <BTCExplorerLink className={styles.action} id={btcTimeLockInfo.txid} path="/tx">
           {`${btcTimeLockInfo.after} confirmations after BTC Tx`}
           <CompassIcon />
-        </a>
+        </BTCExplorerLink>
       }
     />
   )