feat: use-explorer-link got separated into bitcoin and stacks functio…

…n variant

src/app/common/hooks/use-bitcoin-explorer-link.ts

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+
+import { makeBitcoinTxExplorerLink } from '@app/common/utils';
+import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
+
+import { openInNewTab } from '../utils/open-in-new-tab';
+
+interface HandleOpenBitcoinTxLinkArgs {
+  txid: string;
+}
+
+export function useBitcoinExplorerLink() {
+  const { chain } = useCurrentNetworkState();
+  const { bitcoin } = chain;
+  const handleOpenBitcoinTxLink = useCallback(
+    ({ txid }: HandleOpenBitcoinTxLinkArgs) => {
+      openInNewTab(makeBitcoinTxExplorerLink({ txid, bitcoin }));
+    },
+    [bitcoin]
+  );
+
+  return {
+    handleOpenBitcoinTxLink,
+  };
+}

src/app/common/hooks/use-stacks-explorer-link.ts

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+
+import { makeStacksTxExplorerLink } from '@app/common/utils';
+import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
+
+import { openInNewTab } from '../utils/open-in-new-tab';
+
+export interface HandleOpenStacksTxLinkArgs {
+  suffix?: string;
+  txid: string;
+}
+export function useStacksExplorerLink() {
+  const { mode } = useCurrentNetworkState();
+
+  const handleOpenStacksTxLink = useCallback(
+    ({ suffix, txid }: HandleOpenStacksTxLinkArgs) => {
+      openInNewTab(makeStacksTxExplorerLink({ mode, suffix, txid }));
+    },
+    [mode]
+  );
+
+  return {
+    handleOpenStacksTxLink,
+  };
+}

src/app/common/utils.ts

@@ -8,7 +8,6 @@ import {
 import { toUnicode } from 'punycode';
 
 import { BitcoinChainConfig, BitcoinNetworkModes, KEBAB_REGEX } from '@shared/constants';
-import type { Blockchains } from '@shared/models/blockchain.model';
 
 export function createNullArrayOfLength(length: number) {
   return new Array(length).fill(null);
@@ -39,28 +38,37 @@ export function extractPhraseFromString(value: string) {
   }
 }
 
-interface MakeTxExplorerLinkArgs {
-  blockchain: Blockchains;
+interface MakeBitcoinTxExplorerLinkArgs {
+  txid: string;
+  bitcoin: BitcoinChainConfig;
+}
+
+interface MakeStacksTxExplorerLinkArgs {
   mode: BitcoinNetworkModes;
   suffix?: string;
   txid: string;
-  bitcoin: BitcoinChainConfig;
 }
-export function makeTxExplorerLink({
-  blockchain,
+
+export function makeStacksTxExplorerLink({
   mode,
   suffix = '',
   txid,
+}: MakeStacksTxExplorerLinkArgs) {
+  return `https://explorer.hiro.so/txid/${txid}?chain=${mode}${suffix}`;
+}
+
+export function makeBitcoinTxExplorerLink({
+  txid,
   bitcoin: { bitcoinUrl, bitcoinNetwork },
-}: MakeTxExplorerLinkArgs) {
-  switch (blockchain) {
-    case 'bitcoin':
-      if (bitcoinNetwork === 'regtest') {
-        return `${bitcoinUrl}/tx/${txid}`;
-      }
-      return `https://mempool.space/${mode !== 'mainnet' ? mode + '/' : ''}tx/${txid}`;
-    case 'stacks':
-      return `https://explorer.hiro.so/txid/${txid}?chain=${mode}${suffix}`;
+}: MakeBitcoinTxExplorerLinkArgs) {
+  switch (bitcoinNetwork) {
+    case 'mainnet':
+    case 'testnet':
+      return `https://mempool.space/${
+        bitcoinNetwork !== 'mainnet' ? bitcoinNetwork + '/' : ''
+      }tx/${txid}`;
+    case 'regtest':
+      return `${bitcoinUrl}/tx/${txid}`;
     default:
       return '';
   }

src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx

@@ -7,7 +7,7 @@ import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model
 import { RouteUrls } from '@shared/route-urls';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
-import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
+import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link';
 import {
   containsTaprootInput,
   getBitcoinTxCaption,
@@ -50,7 +50,7 @@ export function BitcoinTransactionItem({ transaction, ...rest }: BitcoinTransact
   });
 
   const bitcoinAddress = useCurrentAccountNativeSegwitAddressIndexZero();
-  const { handleOpenTxLink } = useExplorerLink();
+  const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink();
   const analytics = useAnalytics();
   const caption = useMemo(() => getBitcoinTxCaption(transaction), [transaction]);
   const value = useMemo(
@@ -70,7 +70,7 @@ export function BitcoinTransactionItem({ transaction, ...rest }: BitcoinTransact
       openInNewTab(createInscriptionInfoUrl(inscriptionData.id));
       return;
     }
-    handleOpenTxLink({ blockchain: 'bitcoin', txid: transaction?.txid || '' });
+    handleOpenTxLink({ txid: transaction?.txid || '' });
   };
 
   const isOriginator = !isBitcoinTxInbound(bitcoinAddress, transaction);

src/app/components/stacks-transaction-item/stacks-transaction-item.tsx

@@ -6,7 +6,7 @@ import { StacksTx, TxTransferDetails } from '@shared/models/transactions/stacks-
 import { RouteUrls } from '@shared/route-urls';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
-import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
+import { useStacksExplorerLink } from '@app/common/hooks/use-stacks-explorer-link';
 import {
   getTxCaption,
   getTxTitle,
@@ -36,7 +36,7 @@ export function StacksTransactionItem({
   ...rest
 }: StacksTransactionItemProps) {
   const [component, bind, { isHovered }] = usePressable(true);
-  const { handleOpenTxLink } = useExplorerLink();
+  const { handleOpenStacksTxLink: handleOpenTxLink } = useStacksExplorerLink();
   const currentAccount = useCurrentStacksAccount();
   const analytics = useAnalytics();
   const [_, setRawTxId] = useRawTxIdState();
@@ -49,7 +49,6 @@ export function StacksTransactionItem({
   const openTxLink = () => {
     void analytics.track('view_transaction');
     handleOpenTxLink({
-      blockchain: 'stacks',
       txid: transaction?.tx_id || transferDetails?.link || '',
     });
   };

src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-item.tsx

@@ -1,7 +1,7 @@
 import { StacksTransaction } from '@stacks/transactions';
 import { Box, HStack, Stack } from 'leather-styles/jsx';
 
-import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
+import { useStacksExplorerLink } from '@app/common/hooks/use-stacks-explorer-link';
 import { getTxSenderAddress } from '@app/common/transactions/stacks/transaction.utils';
 import { usePressable } from '@app/components/item-hover';
 import { Tooltip } from '@app/components/tooltip';
@@ -18,7 +18,7 @@ interface SubmittedTransactionItemProps {
 }
 export function SubmittedTransactionItem({ transaction, txId }: SubmittedTransactionItemProps) {
   const [component, bind] = usePressable(true);
-  const { handleOpenTxLink } = useExplorerLink();
+  const { handleOpenStacksTxLink: handleOpenTxLink } = useStacksExplorerLink();
 
   if (!transaction) return null;
 
@@ -38,7 +38,6 @@ export function SubmittedTransactionItem({ transaction, txId }: SubmittedTransac
         alignItems="center"
         onClick={() =>
           handleOpenTxLink({
-            blockchain: 'stacks',
             suffix: `&submitted=true`,
             txid: txId,
           })

src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex, HStack, styled } from 'leather-styles/jsx';
 
+import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link';
 import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
-import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
 import { Flag } from '@app/components/layout/flag';
 import { Tooltip } from '@app/components/tooltip';
 import { LeatherButton } from '@app/ui/components/button';
@@ -24,7 +24,7 @@ export function PsbtInputOutputItemLayout({
   txIdHoverLabel,
 }: PsbtInputOutputItemLayoutProps) {
   const { onCopy, hasCopied } = useClipboard(addressHoverLabel ?? '');
-  const { handleOpenTxLink } = useExplorerLink();
+  const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink();
 
   return (
     <Flag align="middle" img={<></>} mt="space.05" spacing="space.04">
@@ -56,7 +56,6 @@ export function PsbtInputOutputItemLayout({
           <LeatherButton
             onClick={() =>
               handleOpenTxLink({
-                blockchain: 'bitcoin',
                 txid: txIdHoverLabel ?? '',
               })
             }

src/app/features/stacks-transaction-request/contract-call-details/contract-call-details.tsx

@@ -2,7 +2,7 @@ import { Suspense } from 'react';
 
 import { Stack } from 'leather-styles/jsx';
 
-import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
+import { useStacksExplorerLink } from '@app/common/hooks/use-stacks-explorer-link';
 import { formatContractId } from '@app/common/utils';
 import { AttachmentRow } from '@app/features/stacks-transaction-request/attachment-row';
 import { ContractPreviewLayout } from '@app/features/stacks-transaction-request/contract-preview';
@@ -13,7 +13,7 @@ import { FunctionArgumentsList } from './function-arguments-list';
 
 function ContractCallDetailsSuspense() {
   const transactionRequest = useTransactionRequestState();
-  const { handleOpenTxLink } = useExplorerLink();
+  const { handleOpenStacksTxLink: handleOpenTxLink } = useStacksExplorerLink();
 
   if (!transactionRequest || transactionRequest.txType !== 'contract_call') return null;
   const { contractAddress, contractName, functionName, attachment } = transactionRequest;
@@ -34,7 +34,6 @@ function ContractCallDetailsSuspense() {
       <ContractPreviewLayout
         onClick={() =>
           handleOpenTxLink({
-            blockchain: 'stacks',
             txid: formatContractId(contractAddress, contractName),
           })
         }

src/app/pages/bitcoin-contract-list/components/bitcoin-contract-list-item-layout.tsx

@@ -4,7 +4,7 @@ import { Flex, HStack, styled } from 'leather-styles/jsx';
 
 import { createMoneyFromDecimal } from '@shared/models/money.model';
 
-import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
+import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link';
 import { baseCurrencyAmountInQuote } from '@app/common/money/calculate-money';
 import { i18nFormatCurrency } from '@app/common/money/format-money';
 import { satToBtc } from '@app/common/money/unit-conversion';
@@ -25,7 +25,7 @@ export function BitcoinContractListItemLayout({
   collateralAmount,
   txid,
 }: BitcoinContractListItemLayoutProps) {
-  const { handleOpenTxLink } = useExplorerLink();
+  const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink();
   const bitcoinMarketData = useCryptoCurrencyMarketData('BTC');
 
   const getFiatValue = useCallback(
@@ -41,8 +41,6 @@ export function BitcoinContractListItemLayout({
       marginBottom="15px"
       onClick={() =>
         handleOpenTxLink({
-          blockchain: 'bitcoin',
-          suffix: `&submitted=true`,
           txid,
         })
       }

src/app/pages/rpc-send-transfer/rpc-send-transfer-summary.tsx

@@ -4,8 +4,8 @@ import { useLocation } from 'react-router-dom';
 import { HStack, Stack } from 'leather-styles/jsx';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link';
 import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
-import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
 import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer';
 import {
   InfoCard,
@@ -21,7 +21,7 @@ import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon';
 
 export function RpcSendTransferSummary() {
   const { state } = useLocation();
-  const { handleOpenTxLink } = useExplorerLink();
+  const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink();
   const analytics = useAnalytics();
 
   const {

src/app/pages/rpc-sign-psbt/rpc-sign-psbt-summary.tsx

@@ -4,8 +4,8 @@ import { useLocation } from 'react-router-dom';
 import { Flex, HStack, Stack } from 'leather-styles/jsx';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link';
 import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
-import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
 import {
   InfoCard,
   InfoCardAssetValue,
@@ -19,7 +19,7 @@ import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon';
 
 export function RpcSignPsbtSummary() {
   const { state } = useLocation();
-  const { handleOpenTxLink } = useExplorerLink();
+  const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink();
   const analytics = useAnalytics();
 
   const { fee, sendingValue, totalSpend, txId, txFiatValue, txFiatValueSymbol, txLink, txValue } =

src/app/pages/send/locked-bitcoin-summary/locked-bitcoin-summary.tsx

@@ -4,8 +4,8 @@ import { useLocation } from 'react-router-dom';
 import { HStack, styled } from 'leather-styles/jsx';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link';
 import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
-import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { satToBtc } from '@app/common/money/unit-conversion';
 import {
@@ -25,7 +25,7 @@ export function LockBitcoinSummary() {
   const { txId, txMoney, txFiatValue, txFiatValueSymbol, symbol, txLink } = state;
 
   const { onCopy } = useClipboard(txId);
-  const { handleOpenTxLink } = useExplorerLink();
+  const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink();
   const analytics = useAnalytics();
 
   function onClickLink() {

src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx

@@ -9,8 +9,8 @@ import { SupportedInscription } from '@shared/models/inscription.model';
 import { RouteUrls } from '@shared/route-urls';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link';
 import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
-import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
 import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer';
 import { BaseDrawer } from '@app/components/drawer/base-drawer';
 import {
@@ -47,7 +47,7 @@ export function SendInscriptionSummary() {
   };
 
   const { onCopy } = useClipboard(txid || '');
-  const { handleOpenTxLink } = useExplorerLink();
+  const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink();
   const analytics = useAnalytics();
 
   function onClickLink() {

src/app/pages/send/sent-summary/brc20-sent-symmary.tsx

@@ -5,8 +5,8 @@ import get from 'lodash.get';
 
 import { createMoney } from '@shared/models/money.model';
 
-import { HandleOpenTxLinkArgs } from '@app/common/hooks/use-explorer-link';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
+import { HandleOpenStacksTxLinkArgs } from '@app/common/hooks/use-stacks-explorer-link';
 import { formatMoney } from '@app/common/money/format-money';
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import {
@@ -33,7 +33,7 @@ function useBrc20SentSummaryState() {
     tick: get(location.state, 'tick') as string,
     amount: get(location.state, 'amount') as string,
     txId: get(location.state, 'txId') as string,
-    txLink: get(location.state, 'txLink') as HandleOpenTxLinkArgs,
+    txLink: get(location.state, 'txLink') as HandleOpenStacksTxLinkArgs,
     feeRowValue: get(location.state, 'feeRowValue') as string,
   };
 }