fix(regressions): fixed a couple bugs

src/app/PageClient.tsx

@@ -4,7 +4,7 @@ import { NextPage } from 'next';
 import dynamic from 'next/dynamic';
 
 import { DEFAULT_BLOCKS_LIST_LIMIT, DEFAULT_LIST_LIMIT_SMALL } from '../common/constants/constants';
-import { useGlobalContext } from '../common/context/useAppContext';
+import { useGlobalContext } from '../common/context/useGlobalContext';
 import { NetworkModes } from '../common/types/network';
 import { TxListTabs } from '../features/txs-list/tabs/TxListTabs';
 import { Grid } from '../ui/Grid';

src/app/_components/BlockList/LayoutA/BurnBlock.tsx

@@ -1,10 +1,9 @@
 import { useColorModeValue } from '@chakra-ui/react';
 import { ArrowBendDownLeft } from '@phosphor-icons/react';
-import * as React from 'react';
 import { memo } from 'react';
 
 import { Timestamp } from '../../../../common/components/Timestamp';
-import { useGlobalContext } from '../../../../common/context/useAppContext';
+import { useGlobalContext } from '../../../../common/context/useGlobalContext';
 import { truncateMiddle } from '../../../../common/utils/utils';
 import { Box } from '../../../../ui/Box';
 import { Flex, FlexProps } from '../../../../ui/Flex';

src/app/_components/BlockList/Sockets/useSubscribeBlocks.ts

@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
 import { Block, StacksApiSocketClient } from '@stacks/blockchain-api-client';
 import { NakamotoBlock } from '@stacks/blockchain-api-client/src/generated/models';
 
-import { useGlobalContext } from '../../../../common/context/useAppContext';
+import { useGlobalContext } from '../../../../common/context/useGlobalContext';
 
 interface Subscription {
   unsubscribe(): void;

src/app/_components/BlockList/Sockets/useSubscribeBlocksUIBlock.ts

@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
 import { StacksApiSocketClient } from '@stacks/blockchain-api-client';
 import { NakamotoBlock } from '@stacks/blockchain-api-client/src/generated/models';
 
-import { useGlobalContext } from '../../../../common/context/useAppContext';
+import { useGlobalContext } from '../../../../common/context/useGlobalContext';
 
 interface Subscription {
   unsubscribe(): void;

src/app/_components/BtcAnchorBlockCard.tsx

@@ -4,7 +4,7 @@ import { Block } from '@stacks/stacks-blockchain-api-types';
 
 import { KeyValueVertical } from '../../common/components/KeyValueVertical';
 import { Section } from '../../common/components/Section';
-import { useGlobalContext } from '../../common/context/useAppContext';
+import { useGlobalContext } from '../../common/context/useGlobalContext';
 import { truncateMiddle } from '../../common/utils/utils';
 import { Text } from '../../ui/Text';
 import { TextLink } from '../../ui/TextLink';

src/app/_components/ErrorBox.tsx

@@ -1,7 +1,6 @@
 import { XCircle } from '@phosphor-icons/react';
-import * as React from 'react';
 
-import { useGlobalContext } from '../../common/context/useAppContext';
+import { useGlobalContext } from '../../common/context/useGlobalContext';
 import { buildUrl } from '../../common/utils/buildUrl';
 import { Button } from '../../ui/Button';
 import { ButtonLink } from '../../ui/ButtonLink';

src/app/_components/Footer.tsx

@@ -5,7 +5,7 @@ import { FC } from 'react';
 
 import { PAGE_MAX_WIDTH } from '../../common/constants/constants';
 import { RELEASE_TAG_NAME } from '../../common/constants/env';
-import { useGlobalContext } from '../../common/context/useAppContext';
+import { useGlobalContext } from '../../common/context/useGlobalContext';
 import { buildUrl } from '../../common/utils/buildUrl';
 import { Box } from '../../ui/Box';
 import { Flex } from '../../ui/Flex';

src/app/_components/NavBar/NetworkLabel.tsx

@@ -1,12 +1,12 @@
 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';
 
 import { Badge } from '../../../common/components/Badge';
 import { DEFAULT_DEVNET_SERVER } from '../../../common/constants/constants';
-import { useGlobalContext } from '../../../common/context/useAppContext';
+import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { useCustomNetworkApiInfo } from '../../../common/queries/useCustomNetworkApiInfo';
 import { Network } from '../../../common/types/network';
 import { buildUrl } from '../../../common/utils/buildUrl';
@@ -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}

src/app/_components/NavBar/NetworkModeBanner.tsx

@@ -4,7 +4,7 @@ import { Flask } from '@phosphor-icons/react';
 import { FC } from 'react';
 
 import { Badge } from '../../../common/components/Badge';
-import { useGlobalContext } from '../../../common/context/useAppContext';
+import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { capitalize } from '../../../common/utils/utils';
 import { Flex } from '../../../ui/Flex';
 import { Icon } from '../../../ui/Icon';

src/app/_components/NavBar/__tests__/NetworkLabel.test.tsx

@@ -3,12 +3,12 @@ import { fireEvent, render } from '@testing-library/react';
 
 import { ChainID } from '@stacks/transactions';
 
-import { useGlobalContext } from '../../../../common/context/useAppContext';
+import { useGlobalContext } from '../../../../common/context/useGlobalContext';
 import { Network, NetworkModes } from '../../../../common/types/network';
 import { useBreakpointValue } from '../../../../ui/hooks/useBreakpointValue';
 import { NetworkLabel } from '../NetworkLabel';
 
-jest.mock('../../../../common/context/useAppContext', () => ({
+jest.mock('../../../../common/context/useGlobalContext', () => ({
   useGlobalContext: jest.fn().mockReturnValue({
     activeNetwork: { url: 'testUrl' },
     removeCustomNetwork: jest.fn(),

src/app/_components/NavBar/index.tsx

@@ -5,7 +5,7 @@ import { useMemo } from 'react';
 
 import { openModal } from '../../../common/components/modals/modal-slice';
 import { MODALS } from '../../../common/constants/constants';
-import { useGlobalContext } from '../../../common/context/useAppContext';
+import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { useAppDispatch } from '../../../common/state/hooks';
 import { Network } from '../../../common/types/network';
 import { TokenPrice } from '../../../common/types/tokenPrice';

src/app/_components/StatusBar/IncidentsStatusBar.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import { useEffect, useRef } from 'react';
 import { IncidentImpact } from 'statuspage.io';
 
-import { useGlobalContext } from '../../../common/context/useAppContext';
+import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { useUnresolvedIncidents } from '../../../common/queries/useUnresolvedIncidents';
 import { useAppDispatch } from '../../../common/state/hooks';
 import { Flex } from '../../../ui/Flex';

src/app/block/[hash]/error.tsx

@@ -1,11 +1,10 @@
 'use client';
 
 import { useEffect } from 'react';
-import * as React from 'react';
 
 import { ErrorMessageLayout } from '../../../common/components/ErrorMessageLayout';
 import { Section } from '../../../common/components/Section';
-import { useGlobalContext } from '../../../common/context/useAppContext';
+import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { useError } from '../../../common/hooks/useError';
 import { ExplorerError } from '../../../common/types/Error';
 import { buildUrl } from '../../../common/utils/buildUrl';
@@ -14,7 +13,6 @@ import { ButtonLink } from '../../../ui/ButtonLink';
 import { Flex } from '../../../ui/Flex';
 import { Grid } from '../../../ui/Grid';
 import { HStack } from '../../../ui/HStack';
-import { Stack } from '../../../ui/Stack';
 import { PageTitle } from '../../_components/PageTitle';
 
 const defaultErrorMessage = 'Failed to fetch block';

src/app/blocks/PageClient.tsx

@@ -3,7 +3,7 @@
 import type { NextPage } from 'next';
 import dynamic from 'next/dynamic';
 
-import { useGlobalContext } from '../../common/context/useAppContext';
+import { useGlobalContext } from '../../common/context/useGlobalContext';
 import { NetworkModes } from '../../common/types/network';
 import {
   BlockPageHeadersSkeleton,

src/app/btcblock/[hash]/BitcoinAnchorDetails.tsx

@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import { useParamsBlockHash } from '../../../app/block/[hash]/useParamsBlockHash';
 import { KeyValueVertical } from '../../../common/components/KeyValueVertical';
 import { Section } from '../../../common/components/Section';
-import { useGlobalContext } from '../../../common/context/useAppContext';
+import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { useSuspenseBurnBlock } from '../../../common/queries/useBurnBlock';
 import { toRelativeTime, truncateMiddle } from '../../../common/utils/utils';
 import { Flex } from '../../../ui/Flex';

src/app/btcblock/[hash]/NavBlock.tsx

@@ -1,6 +1,6 @@
 import { ArrowLeft, ArrowRight } from '@phosphor-icons/react';
 
-import { useGlobalContext } from '../../../common/context/useAppContext';
+import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { buildUrl } from '../../../common/utils/buildUrl';
 import { Flex } from '../../../ui/Flex';
 import { Icon } from '../../../ui/Icon';

src/app/error.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import * as React from 'react';
 import { useEffect } from 'react';
 
 import { ErrorMessageLayout } from '../common/components/ErrorMessageLayout';
 import { Section } from '../common/components/Section';
-import { useGlobalContext } from '../common/context/useAppContext';
+import { useGlobalContext } from '../common/context/useGlobalContext';
 import { buildUrl } from '../common/utils/buildUrl';
 import { Box } from '../ui/Box';
 import { Button } from '../ui/Button';

src/app/global-error.tsx

@@ -1,16 +1,12 @@
 'use client';
 
-import * as React from 'react';
 import { useEffect } from 'react';
 
 import { ErrorMessageLayout } from '../common/components/ErrorMessageLayout';
 import { Section } from '../common/components/Section';
-import { useGlobalContext } from '../common/context/useAppContext';
-import { buildUrl } from '../common/utils/buildUrl';
+import { useGlobalContext } from '../common/context/useGlobalContext';
 import { Box } from '../ui/Box';
-import { ButtonLink } from '../ui/ButtonLink';
 import { Grid } from '../ui/Grid';
-import { Stack } from '../ui/Stack';
 
 export default function Error({
   error,

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 { GlobalContextProvider } from '../common/context/GlobalContextProvider';
 import { PageWrapper } from './_components/PageWrapper';
 import { Providers } from './_components/Providers';
 import { getTokenPrice } from './getTokenPriceInfo';
@@ -26,17 +20,11 @@ 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
-        >
+        <GlobalContextProvider headerCookies={headersList.get('cookie')}>
           <Providers headerCookies={headersList.get('cookie')}>
             <PageWrapper tokenPrice={tokenPrice}>{children}</PageWrapper>
           </Providers>
-        </AppContextProvider>
+        </GlobalContextProvider>
       </body>
       <GoogleAnalytics gaId="G-NB2VBT0KY2" />
       <script

src/app/sandbox/Wrapper.tsx

@@ -3,11 +3,11 @@
 import { List, User } from '@phosphor-icons/react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import { Circle } from '../../common/components/Circle';
 import { Section } from '../../common/components/Section';
-import { useGlobalContext } from '../../common/context/useAppContext';
+import { useGlobalContext } from '../../common/context/useGlobalContext';
 import { useAppDispatch, useAppSelector } from '../../common/state/hooks';
 import { getQueryParams } from '../../common/utils/buildUrl';
 import { Button } from '../../ui/Button';

src/app/sandbox/components/ContractCall/DefaultView/SearchContractsForm.tsx

@@ -3,7 +3,7 @@ import { Form, Formik } from 'formik';
 import { useRouter } from 'next/navigation';
 import React, { FC } from 'react';
 
-import { useGlobalContext } from '../../../../../common/context/useAppContext';
+import { useGlobalContext } from '../../../../../common/context/useGlobalContext';
 import { buildUrl } from '../../../../../common/utils/buildUrl';
 import { onPaste, validateStacksAddress } from '../../../../../common/utils/utils';
 import { Box } from '../../../../../ui/Box';

src/app/sandbox/components/ContractCall/SelectedContractView.tsx

@@ -9,7 +9,7 @@ import { Section } from '../../../../common/components/Section';
 import { TxIcon } from '../../../../common/components/TxIcon';
 import { ArrowLeftIcon } from '../../../../common/components/icons/arrow-left';
 import { FungibleTokenIcon } from '../../../../common/components/icons/fungible-token';
-import { useGlobalContext } from '../../../../common/context/useAppContext';
+import { useGlobalContext } from '../../../../common/context/useGlobalContext';
 import { useAppSelector } from '../../../../common/state/hooks';
 import { ContractWithParsedAbi } from '../../../../common/types/contract';
 import { buildUrl } from '../../../../common/utils/buildUrl';

src/app/sandbox/components/TransactionsPanel.tsx

@@ -11,7 +11,7 @@ import { Badge } from '../../../common/components/Badge';
 import { ExplorerLink } from '../../../common/components/ExplorerLinks';
 import { Section } from '../../../common/components/Section';
 import { InfoCircleIcon } from '../../../common/components/icons/info-circle';
-import { useGlobalContext } from '../../../common/context/useAppContext';
+import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { useContractById } from '../../../common/queries/useContractById';
 import { useAppDispatch } from '../../../common/state/hooks';
 import { buildUrl } from '../../../common/utils/buildUrl';

src/app/sandbox/hooks/useUser.ts

@@ -8,7 +8,7 @@ import {
   MempoolTransaction,
 } from '@stacks/stacks-blockchain-api-types';
 
-import { useGlobalContext } from '../../../common/context/useAppContext';
+import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { useInfiniteQueryResult } from '../../../common/hooks/useInfiniteQueryResult';
 import { useAccountBalance } from '../../../common/queries/useAccountBalance';
 import { useAddressConfirmedTxsWithTransfersInfinite } from '../../../common/queries/useAddressConfirmedTxsWithTransfersInfinite';

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>

src/app/sandbox/layout/SideNav.tsx

@@ -3,7 +3,7 @@ import { usePathname } from 'next/navigation';
 import React from 'react';
 
 import { DropIcon } from '../../../common/components/icons/drop';
-import { useGlobalContext } from '../../../common/context/useAppContext';
+import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { buildUrl } from '../../../common/utils/buildUrl';
 import { Icon } from '../../../ui/Icon';
 import { Stack, StackProps } from '../../../ui/Stack';

src/app/signers/data/UseSignerAddresses.ts

@@ -1,7 +1,7 @@
 // Add missing import statement
 import { useSuspenseQuery } from '@tanstack/react-query';
 
-import { useGlobalContext } from '../../../common/context/useAppContext';
+import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { TEN_MINUTES, TWO_MINUTES } from '../../../common/queries/query-stale-time';
 
 const SIGNER_ADDRESSES_QUERY_KEY = 'signer-addresses';

src/app/signers/data/useSigners.ts

@@ -1,6 +1,6 @@
 import { useSuspenseQuery } from '@tanstack/react-query';
 
-import { useGlobalContext } from '../../../common/context/useAppContext';
+import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { TEN_MINUTES } from '../../../common/queries/query-stale-time';
 import { ApiResponseWithResultsOffset } from '../../../common/types/api';
 

src/app/signers/useSignerLocations.ts

@@ -1,6 +1,6 @@
 import { useSuspenseQuery } from '@tanstack/react-query';
 
-import { useGlobalContext } from '../../common/context/useAppContext';
+import { useGlobalContext } from '../../common/context/useGlobalContext';
 import { TEN_MINUTES } from '../../common/queries/query-stale-time';
 
 const SIGNER_LOCATION_QUERY_KEY = 'signer-addresses';

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"

src/app/token/[tokenId]/error.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import * as React from 'react';
 import { useEffect } from 'react';
 
 import { ErrorMessageLayout } from '../../../common/components/ErrorMessageLayout';
 import { Section } from '../../../common/components/Section';
-import { useGlobalContext } from '../../../common/context/useAppContext';
+import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { useError } from '../../../common/hooks/useError';
 import { ExplorerError } from '../../../common/types/Error';
 import { buildUrl } from '../../../common/utils/buildUrl';