feat: btc explorer network config

hirosystems · Oct 13, 2023 · 6912233 · 6912233
1 parent 3e1b8a2
commit 6912233
Show file tree

Hide file tree

Showing 22 changed files with 537 additions and 233 deletions.
diff --git a/src/app/Providers.tsx b/src/app/Providers.tsx
@@ -36,7 +36,6 @@ export const Providers: FC<any> = ({
             queryNetworkMode={queryNetworkMode}
             queryApiUrl={queryApiUrl}
             querySubnet={querySubnet}
-            apiUrls={apiUrls}
           >
             <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
           </AppConfig>

diff --git a/src/app/txid/[txid]/Cards/BtcAnchorBlockCard.tsx b/src/app/txid/[txid]/Cards/BtcAnchorBlockCard.tsx
@@ -12,20 +12,15 @@ import { KeyValueVertical } from '../../../common/components/KeyValueVertical';
 import { useVerticallyStackedElementsBorderStyle } from '../../../common/styles/border';
 
 export const BtcAnchorBlockCard: FC<{ block: Block }> = ({ block }) => {
-  const networkMode = useGlobalContext().activeNetwork.mode;
-  const btcLinkPathPrefix = networkMode === NetworkModes.Testnet ? '/testnet' : '';
+  const { btcBlockBaseUrl, btcTxBaseUrl } = useGlobalContext().activeNetwork;
 
   return (
     <Section title="Bitcoin anchor">
       <Box px="16px" css={useVerticallyStackedElementsBorderStyle}>
         <KeyValueVertical
           label={'Bitcoin block height'}
           value={
-            <TextLink
-              as="a"
-              target="_blank"
-              href={`https://mempool.space${btcLinkPathPrefix}/block/${block.burn_block_height}`}
-            >
+            <TextLink as="a" target="_blank" href={`${btcBlockBaseUrl}/${block.burn_block_height}`}>
               <Text fontSize={'14px'} fontWeight={500}>
                 #{block.burn_block_height}
               </Text>
@@ -39,10 +34,7 @@ export const BtcAnchorBlockCard: FC<{ block: Block }> = ({ block }) => {
             <TextLink
               as="a"
               target="_blank"
-              href={`https://mempool.space${btcLinkPathPrefix}/block/${block.burn_block_hash.replace(
-                '0x',
-                ''
-              )}`}
+              href={`${btcBlockBaseUrl}/${block.burn_block_hash.replace('0x', '')}`}
             >
               <Text fontSize={'14px'} fontWeight={500}>
                 {truncateMiddle(block.burn_block_hash, 8)}
@@ -57,10 +49,7 @@ export const BtcAnchorBlockCard: FC<{ block: Block }> = ({ block }) => {
             <TextLink
               as="a"
               target="_blank"
-              href={`https://mempool.space${btcLinkPathPrefix}/tx/${block.miner_txid.replace(
-                '0x',
-                ''
-              )}`}
+              href={`${btcTxBaseUrl}/${block.miner_txid.replace('0x', '')}`}
             >
               <Text fontSize={'14px'} fontWeight={500}>
                 {truncateMiddle(block.miner_txid, 8)}

diff --git a/src/common/constants.ts b/src/common/constants.ts
@@ -32,9 +32,27 @@ export const CONNECT_AUTH_ORIGIN =
 export const DEFAULT_MAINNET_SERVER =
   process.env.NEXT_PUBLIC_MAINNET_API_SERVER || 'https://api.hiro.so';
 
+export const MAINNET_BTC_BLOCK_BASE_URL =
+  process.env.NEXT_PUBLIC_MAINNET_BTC_BLOCK_BASE_URL || 'https://mempool.space/block';
+
+export const MAINNET_BTC_TX_BASE_URL =
+  process.env.NEXT_PUBLIC_MAINNET_BTC_TX_BASE_URL || 'https://mempool.space/tx';
+
+export const MAINNET_BTC_ADDRESS_BASE_URL =
+  process.env.NEXT_PUBLIC_MAINNET_BTC_ADDRESS_BASE_URL || 'https://mempool.space/address';
+
 export const DEFAULT_TESTNET_SERVER =
   process.env.NEXT_PUBLIC_TESTNET_API_SERVER || 'https://api.testnet.hiro.so';
 
+export const TESTNET_BTC_BLOCK_BASE_URL =
+  process.env.NEXT_PUBLIC_TESTNET_BTC_BLOCK_BASE_URL || 'https://mempool.space/testnet/block';
+
+export const TESTNET_BTC_TX_BASE_URL =
+  process.env.NEXT_PUBLIC_TESTNET_BTC_TX_BASE_URL || 'https://mempool.space/testnet/tx';
+
+export const TESTNET_BTC_ADDRESS_BASE_URL =
+  process.env.NEXT_PUBLIC_TESTNET_BTC_ADDRESS_BASE_URL || 'https://mempool.space/testnet/address';
+
 export const DEFAULT_DEVNET_SERVER = 'http://localhost:3999';
 
 export const VERSION = process.env.VERSION || process.env.VERSION || packageJson.version;

diff --git a/src/common/constants/network.ts b/src/common/constants/network.ts
@@ -1,4 +1,13 @@
-import { DEFAULT_MAINNET_SERVER, DEFAULT_TESTNET_SERVER } from '@/common/constants';
+import {
+  DEFAULT_MAINNET_SERVER,
+  DEFAULT_TESTNET_SERVER,
+  MAINNET_BTC_ADDRESS_BASE_URL,
+  MAINNET_BTC_BLOCK_BASE_URL,
+  MAINNET_BTC_TX_BASE_URL,
+  TESTNET_BTC_ADDRESS_BASE_URL,
+  TESTNET_BTC_BLOCK_BASE_URL,
+  TESTNET_BTC_TX_BASE_URL,
+} from '@/common/constants';
 import { NetworkModes } from '@/common/types/network';
 
 import { ChainID } from '@stacks/transactions';
@@ -13,4 +22,19 @@ export const NetworkModeUrlMap: Record<NetworkModes, string> = {
   [NetworkModes.Testnet]: DEFAULT_TESTNET_SERVER,
 };
 
+export const NetworkModeBtcBlockBaseUrlMap: Record<NetworkModes, string> = {
+  [NetworkModes.Mainnet]: MAINNET_BTC_BLOCK_BASE_URL,
+  [NetworkModes.Testnet]: TESTNET_BTC_BLOCK_BASE_URL,
+};
+
+export const NetworkModeBtcTxBaseUrlMap: Record<NetworkModes, string> = {
+  [NetworkModes.Mainnet]: MAINNET_BTC_TX_BASE_URL,
+  [NetworkModes.Testnet]: TESTNET_BTC_TX_BASE_URL,
+};
+
+export const NetworkModeBtcAddressBaseUrlMap: Record<NetworkModes, string> = {
+  [NetworkModes.Mainnet]: MAINNET_BTC_ADDRESS_BASE_URL,
+  [NetworkModes.Testnet]: TESTNET_BTC_ADDRESS_BASE_URL,
+};
+
 export const CustomNetworksLSKey = 'CustomNetworks';
diff --git a/src/common/context/GlobalContext.tsx b/src/common/context/GlobalContext.tsx
@@ -1,16 +1,28 @@
 import { DEFAULT_DEVNET_SERVER, IS_BROWSER } from '@/common/constants';
-import { NetworkIdModeMap, NetworkModeUrlMap } from '@/common/constants/network';
+import {
+  NetworkIdModeMap,
+  NetworkModeBtcBlockBaseUrlMap,
+  NetworkModeBtcTxBaseUrlMap,
+  NetworkModeBtcAddressBaseUrlMap,
+  NetworkModeUrlMap,
+} from '@/common/constants/network';
 import { Network, NetworkModes } from '@/common/types/network';
 import cookie from 'cookie';
 import { FC, createContext, useCallback, useEffect, useMemo, useState } from 'react';
 import { useCookies } from 'react-cookie';
 
 import { ChainID } from '@stacks/transactions';
-import { buildCustomNetworkUrl, fetchCustomNetworkId } from '@/components/add-network-form';
+import {
+  buildCustomNetworkUrl,
+  fetchCustomNetworkId,
+} from '@/components/modals/AddNetwork/AddNetworkForm';
 
 interface GlobalContextProps {
   cookies: string;
   apiUrls: Record<NetworkModes, string>;
+  btcBlockBaseUrls: Record<NetworkModes, string>;
+  btcTxBaseUrls: Record<NetworkModes, string>;
+  btcAddressBaseUrls: Record<NetworkModes, string>;
   activeNetwork: Network;
   activeNetworkKey: string;
   addCustomNetwork: (network: Network) => Promise<any>;
@@ -21,9 +33,15 @@ interface GlobalContextProps {
 export const GlobalContext = createContext<GlobalContextProps>({
   cookies: '',
   apiUrls: NetworkModeUrlMap,
+  btcBlockBaseUrls: NetworkModeBtcBlockBaseUrlMap,
+  btcTxBaseUrls: NetworkModeBtcTxBaseUrlMap,
+  btcAddressBaseUrls: NetworkModeBtcAddressBaseUrlMap,
   activeNetwork: {
     label: 'hiro.so',
     url: NetworkModeUrlMap[NetworkModes.Mainnet],
+    btcBlockBaseUrl: NetworkModeBtcBlockBaseUrlMap[NetworkModes.Mainnet],
+    btcTxBaseUrl: NetworkModeBtcTxBaseUrlMap[NetworkModes.Mainnet],
+    btcAddressBaseUrl: NetworkModeBtcAddressBaseUrlMap[NetworkModes.Mainnet],
     networkId: ChainID.Mainnet,
     mode: NetworkModes.Mainnet,
   },
@@ -38,7 +56,13 @@ export const AppContextProvider: FC<any> = ({
   queryNetworkMode,
   queryApiUrl,
   apiUrls,
+  btcBlockBaseUrls,
+  btcTxBaseUrls,
+  btcAddressBaseUrls,
   querySubnet,
+  queryBtcBlockBaseUrl,
+  queryBtcTxBaseUrl,
+  queryBtcAddressBaseUrl,
   children,
 }) => {
   if (IS_BROWSER && (window as any)?.location?.search?.includes('err=1'))
@@ -53,18 +77,27 @@ export const AppContextProvider: FC<any> = ({
       [apiUrls[NetworkModes.Mainnet]]: {
         label: 'hiro.so',
         url: apiUrls[NetworkModes.Mainnet],
+        btcBlockBaseUrl: NetworkModeBtcBlockBaseUrlMap[NetworkModes.Mainnet],
+        btcTxBaseUrl: NetworkModeBtcTxBaseUrlMap[NetworkModes.Mainnet],
+        btcAddressBaseUrl: NetworkModeBtcAddressBaseUrlMap[NetworkModes.Mainnet],
         networkId: ChainID.Mainnet,
         mode: NetworkModes.Mainnet,
       },
       [apiUrls[NetworkModes.Testnet]]: {
         label: 'hiro.so',
         url: apiUrls[NetworkModes.Testnet],
+        btcBlockBaseUrl: NetworkModeBtcBlockBaseUrlMap[NetworkModes.Testnet],
+        btcTxBaseUrl: NetworkModeBtcTxBaseUrlMap[NetworkModes.Testnet],
+        btcAddressBaseUrl: NetworkModeBtcAddressBaseUrlMap[NetworkModes.Testnet],
         networkId: ChainID.Testnet,
         mode: NetworkModes.Testnet,
       },
       [DEFAULT_DEVNET_SERVER]: {
         label: 'devnet',
         url: DEFAULT_DEVNET_SERVER,
+        btcBlockBaseUrl: NetworkModeBtcBlockBaseUrlMap[NetworkModes.Testnet],
+        btcTxBaseUrl: NetworkModeBtcTxBaseUrlMap[NetworkModes.Testnet],
+        btcAddressBaseUrl: NetworkModeBtcAddressBaseUrlMap[NetworkModes.Testnet],
         networkId: ChainID.Testnet,
         mode: NetworkModes.Testnet,
         isCustomNetwork: true,
@@ -75,14 +108,27 @@ export const AppContextProvider: FC<any> = ({
             [querySubnet]: {
               isSubnet: true,
               url: querySubnet,
+              btcBlockBaseUrl:
+                queryBtcBlockBaseUrl || NetworkModeBtcBlockBaseUrlMap[NetworkModes.Mainnet],
+              btcTxBaseUrl: queryBtcTxBaseUrl || NetworkModeBtcTxBaseUrlMap[NetworkModes.Mainnet],
+              btcAddressBaseUrl:
+                queryBtcAddressBaseUrl || NetworkModeBtcAddressBaseUrlMap[NetworkModes.Mainnet],
               label: 'subnet',
               networkId: 0,
               mode: NetworkModes.Mainnet,
             },
           }
         : {}),
     }),
-    [apiUrls, customNetworks, isUrlPassedSubnet, querySubnet]
+    [
+      apiUrls,
+      customNetworks,
+      isUrlPassedSubnet,
+      queryBtcBlockBaseUrl,
+      queryBtcTxBaseUrl,
+      queryBtcAddressBaseUrl,
+      querySubnet,
+    ]
   );
 
   const addCustomNetwork = useCallback(
@@ -114,6 +160,11 @@ export const AppContextProvider: FC<any> = ({
         const network: Network = {
           label: queryApiUrl,
           url: networkUrl,
+          btcBlockBaseUrl:
+            queryBtcBlockBaseUrl || NetworkModeBtcBlockBaseUrlMap[NetworkModes.Mainnet],
+          btcTxBaseUrl: queryBtcTxBaseUrl || NetworkModeBtcTxBaseUrlMap[NetworkModes.Mainnet],
+          btcAddressBaseUrl:
+            queryBtcAddressBaseUrl || NetworkModeBtcAddressBaseUrlMap[NetworkModes.Mainnet],
           networkId,
           mode: NetworkIdModeMap[networkId],
           isCustomNetwork: true,
@@ -126,7 +177,14 @@ export const AppContextProvider: FC<any> = ({
     if (queryApiUrl && !networks[queryApiUrl]) {
       void addCustomNetworkFromQuery();
     }
-  }, [queryApiUrl, networks, addCustomNetwork]);
+  }, [
+    queryApiUrl,
+    networks,
+    addCustomNetwork,
+    queryBtcBlockBaseUrl,
+    queryBtcTxBaseUrl,
+    queryBtcAddressBaseUrl,
+  ]);
 
   return (
     <GlobalContext.Provider
@@ -135,6 +193,9 @@ export const AppContextProvider: FC<any> = ({
         activeNetworkKey,
         cookies,
         apiUrls,
+        btcBlockBaseUrls,
+        btcTxBaseUrls,
+        btcAddressBaseUrls,
         addCustomNetwork,
         removeCustomNetwork: (network: Network) => {
           const { [network.url]: omitted, ...remainingCustomNetworks } = customNetworks;

diff --git a/src/common/context/__tests__/GlobalContext.test.tsx b/src/common/context/__tests__/GlobalContext.test.tsx
@@ -1,10 +1,10 @@
 import { useContext } from 'react';
 import { AppContextProvider, GlobalContext } from '../GlobalContext';
 import { render, screen, waitFor } from '@testing-library/react';
-import { fetchCustomNetworkId } from '@/components/add-network-form';
+import { fetchCustomNetworkId } from '@/components/modals/AddNetwork/AddNetworkForm';
 
-jest.mock('@/components/add-network-form', () => ({
-  ...jest.requireActual('@/components/add-network-form'),
+jest.mock('@/components/modals/AddNetwork/AddNetworkForm', () => ({
+  ...jest.requireActual('@/components/modals/AddNetwork/AddNetworkForm'),
   fetchCustomNetworkId: jest.fn(() => '1111'),
 }));
 

diff --git a/src/common/types/network.ts b/src/common/types/network.ts
@@ -10,6 +10,9 @@ export type NetworkMode = NetworkModes.Mainnet | NetworkModes.Testnet;
 export interface Network {
   label: string;
   url: string;
+  btcBlockBaseUrl: string;
+  btcTxBaseUrl: string;
+  btcAddressBaseUrl: string;
   networkId: ChainID;
   mode: NetworkModes;
   wsUrl?: string;

diff --git a/src/components/__tests__/add-network-form.test.tsx b/src/components/__tests__/add-network-form.test.tsx
@@ -1,4 +1,4 @@
-import { buildCustomNetworkUrl } from '../add-network-form';
+import { buildCustomNetworkUrl } from '../modals/AddNetwork/AddNetworkForm';
 
 describe('buildCustomNetworkUrl', () => {
   const cases = [