fix(regressions): fixed a couple bugs

hirosystems · Jun 20, 2024 · 1ef490a · 1ef490a
1 parent 128b9ad
commit 1ef490a
Show file tree

Hide file tree

Showing 15 changed files with 372 additions and 316 deletions.
diff --git a/src/app/_components/NavBar/NetworkLabel.tsx b/src/app/_components/NavBar/NetworkLabel.tsx
@@ -1,6 +1,6 @@
 import { useColorMode, useColorModeValue } from '@chakra-ui/react';
 import { Check, Trash } from '@phosphor-icons/react';
-import React, { FC } from 'react';
+import { FC, useMemo } from 'react';
 
 import { ChainID } from '@stacks/transactions';
 
@@ -52,6 +52,16 @@ export const NetworkLabel: FC<{ network: Network }> = ({ network }) => {
   const greenBadgeBg = useColorModeValue('green.100', 'green.900');
   const badgeBorder = useColorModeValue('purple.300', 'purple.700');
 
+  const isNetworkRemovable = useMemo(
+    () =>
+      network.isCustomNetwork &&
+      !isDevnet &&
+      !isActive &&
+      !network.label.includes('Nakamoto') &&
+      network.label !== 'https://api.nakamoto.testnet.hiro.so',
+    [network.isCustomNetwork, isDevnet, isActive, network.label]
+  );
+
   return (
     <Flex
       justifyContent={'space-between'}
@@ -119,11 +129,7 @@ export const NetworkLabel: FC<{ network: Network }> = ({ network }) => {
           <Spinner size="18px" opacity={0.5} color={'#666'} data-testid="spinner" />
         ) : !!error ? (
           <Caption color={`feedbackError.${colorMode}`}>Offline</Caption>
-        ) : network.isCustomNetwork &&
-          !isDevnet &&
-          !isActive &&
-          !network.label.includes('Nakamoto') &&
-          network.label !== 'https://api.nakamoto.testnet.hiro.so' ? (
+        ) : isNetworkRemovable ? (
           <Tooltip label="Remove network">
             <IconButton
               disabled={isDisabled}

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,13 +4,7 @@ import { headers } from 'next/headers';
 import { ReactNode } from 'react';
 
 import { meta } from '../common/constants/meta';
-import {
-  NetworkModeBtcAddressBaseUrlMap,
-  NetworkModeBtcBlockBaseUrlMap,
-  NetworkModeBtcTxBaseUrlMap,
-  NetworkModeUrlMap,
-} from '../common/constants/network';
-import { AppContextProvider } from '../common/context/GlobalContext';
+import { AppContextProvider } from '../common/context/AppContextProvider';
 import { PageWrapper } from './_components/PageWrapper';
 import { Providers } from './_components/Providers';
 import { getTokenPrice } from './getTokenPriceInfo';
@@ -26,13 +20,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
   return (
     <html lang="en">
       <body>
-        <AppContextProvider
-          headerCookies={headersList.get('cookie')}
-          apiUrls={NetworkModeUrlMap} // TODO: why does this need to be in context? remove. make a function that returns these. network should be in redux not context
-          btcBlockBaseUrls={NetworkModeBtcBlockBaseUrlMap} // TODO: why does this need to be in context? remove. make a function that returns these. network should be in redux not context
-          btcTxBaseUrls={NetworkModeBtcTxBaseUrlMap} // TODO: why does this need to be in context? remove. make a function that returns these. network should be in redux not context
-          btcAddressBaseUrls={NetworkModeBtcAddressBaseUrlMap} // TODO: why does this need to be in context? remove. make a function that returns these. network should be in redux not context
-        >
+        <AppContextProvider headerCookies={headersList.get('cookie')}>
           <Providers headerCookies={headersList.get('cookie')}>
             <PageWrapper tokenPrice={tokenPrice}>{children}</PageWrapper>
           </Providers>

diff --git a/src/app/sandbox/layout/RightPanelSkeleton.tsx b/src/app/sandbox/layout/RightPanelSkeleton.tsx
@@ -14,6 +14,7 @@ export function RightPanelSkeleton() {
       width={96}
       height={'full'}
       p={7}
+      overflow="hidden"
     >
       <SkeletonText noOfLines={50} spacing={4} />
     </Card>

diff --git a/src/app/token/[tokenId]/TokenInfo/Price.tsx b/src/app/token/[tokenId]/TokenInfo/Price.tsx
@@ -1,4 +1,3 @@
-import { useColorMode } from '@chakra-ui/react';
 import { FC } from 'react';
 
 import { Flex } from '../../../../ui/Flex';
@@ -13,7 +12,6 @@ export const Price: FC<
     currentPriceInBtc: number | null | undefined;
   }
 > = ({ currentPrice, priceChangePercentage24h, currentPriceInBtc, ...gridProps }) => {
-  const colorMode = useColorMode().colorMode;
   return (
     <StatSection
       title="Price"

diff --git a/src/app/txid/[txId]/TxDetails/Recipient.tsx b/src/app/txid/[txId]/TxDetails/Recipient.tsx
@@ -1,5 +1,4 @@
 import { ArrowDownRight } from '@phosphor-icons/react';
-import * as React from 'react';
 import { FC } from 'react';
 
 import {
@@ -9,8 +8,8 @@ import {
 
 import { ExplorerLink } from '../../../../common/components/ExplorerLinks';
 import { KeyValueHorizontal } from '../../../../common/components/KeyValueHorizontal';
-import { Box } from '../../../../ui/Box';
 import { HStack } from '../../../../ui/HStack';
+import { Icon } from '../../../../ui/Icon';
 
 export const Recipient: FC<{ tx: TokenTransferTransaction | MempoolTokenTransferTransaction }> = ({
   tx,
@@ -19,9 +18,7 @@ export const Recipient: FC<{ tx: TokenTransferTransaction | MempoolTokenTransfer
     label={'Recipient'}
     value={
       <HStack>
-        <Box>
-          <ArrowDownRight size={4} />
-        </Box>
+        <Icon as={ArrowDownRight} size={4} />
         <ExplorerLink
           fontSize={'14px'}
           fontWeight={'medium'}

diff --git a/src/app/txid/[txId]/TxDetails/Sender.tsx b/src/app/txid/[txId]/TxDetails/Sender.tsx
@@ -1,25 +1,22 @@
 'use client';
 
 import { ArrowUpRight } from '@phosphor-icons/react';
-import * as React from 'react';
 import { FC } from 'react';
 
 import { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types';
 
 import { ExplorerLink } from '../../../../common/components/ExplorerLinks';
 import { KeyValueHorizontal } from '../../../../common/components/KeyValueHorizontal';
-import { Box } from '../../../../ui/Box';
 import { HStack } from '../../../../ui/HStack';
+import { Icon } from '../../../../ui/Icon';
 import { getSenderName } from '../utils';
 
 export const Sender: FC<{ tx: Transaction | MempoolTransaction }> = ({ tx }) => (
   <KeyValueHorizontal
     label={getSenderName(tx.tx_type)}
     value={
       <HStack>
-        <Box>
-          <ArrowUpRight size={4} />
-        </Box>
+        <Icon as={ArrowUpRight} size={4} />
         <ExplorerLink
           fontSize={'xs'}
           fontWeight={'medium'}

diff --git a/src/common/constants/network.ts b/src/common/constants/network.ts
@@ -1,6 +1,7 @@
 import { ChainID } from '@stacks/transactions';
 
-import { NetworkModes } from '../types/network';
+import { Network, NetworkModes } from '../types/network';
+import { DEFAULT_DEVNET_SERVER } from './constants';
 import {
   DEFAULT_MAINNET_SERVER,
   DEFAULT_TESTNET_SERVER,
@@ -36,3 +37,56 @@ export const NetworkModeBtcAddressBaseUrlMap: Record<NetworkModes, string> = {
   [NetworkModes.Mainnet]: MAINNET_BTC_ADDRESS_BASE_URL,
   [NetworkModes.Testnet]: TESTNET_BTC_ADDRESS_BASE_URL,
 };
+
+export const mainnetNetwork: Network = {
+  label: 'Stacks Mainnet',
+  url: NetworkModeUrlMap[NetworkModes.Mainnet],
+  btcBlockBaseUrl: NetworkModeBtcBlockBaseUrlMap[NetworkModes.Mainnet],
+  btcTxBaseUrl: NetworkModeBtcTxBaseUrlMap[NetworkModes.Mainnet],
+  btcAddressBaseUrl: NetworkModeBtcAddressBaseUrlMap[NetworkModes.Mainnet],
+  networkId: ChainID.Mainnet,
+  mode: NetworkModes.Mainnet,
+};
+
+export const testnetNetwork: Network = {
+  label: 'Stacks Testnet (Primary)',
+  url: NetworkModeUrlMap[NetworkModes.Testnet],
+  btcBlockBaseUrl: NetworkModeBtcBlockBaseUrlMap[NetworkModes.Testnet],
+  btcTxBaseUrl: NetworkModeBtcTxBaseUrlMap[NetworkModes.Testnet],
+  btcAddressBaseUrl: NetworkModeBtcAddressBaseUrlMap[NetworkModes.Testnet],
+  networkId: ChainID.Testnet,
+  mode: NetworkModes.Testnet,
+};
+
+export const nakamotoTestnetNetwork: Network = {
+  label: 'Nakamoto Testnet',
+  url: 'https://api.nakamoto.testnet.hiro.so',
+  btcBlockBaseUrl: NetworkModeBtcBlockBaseUrlMap[NetworkModes.Testnet],
+  btcTxBaseUrl: NetworkModeBtcTxBaseUrlMap[NetworkModes.Testnet],
+  btcAddressBaseUrl: NetworkModeBtcAddressBaseUrlMap[NetworkModes.Testnet],
+  networkId: ChainID.Testnet,
+  mode: NetworkModes.Testnet,
+  isCustomNetwork: true,
+};
+
+export const oldTestnetNetwork: Network = {
+  label: 'Stacks Testnet (Archive)',
+  url: 'https://api.old.testnet.hiro.so',
+  btcBlockBaseUrl: NetworkModeBtcBlockBaseUrlMap[NetworkModes.Testnet],
+  btcTxBaseUrl: NetworkModeBtcTxBaseUrlMap[NetworkModes.Testnet],
+  btcAddressBaseUrl: NetworkModeBtcAddressBaseUrlMap[NetworkModes.Testnet],
+  networkId: ChainID.Testnet,
+  mode: NetworkModes.Testnet,
+  isCustomNetwork: true,
+};
+
+export const devnetNetwork: Network = {
+  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,
+};