fix: unit test

src/app/components/BlockList/BlockAndMicroblocksItem.tsx

@@ -7,7 +7,7 @@ import { useVerticallyStackedElementsBorderStyle } from '@/app/common/styles/bor
 import { MicroblockListItem } from './MicroblockListItem';
 import { Text } from '@/ui/Text';
 import React, { memo } from 'react';
-import { Block } from '@stacks/blockchain-api-client';
+import { Block } from '@stacks/stacks-blockchain-api-types';
 import { BlockListItem } from './BlockListItem';
 
 export const BlockAndMicroblocksItem: React.FC<{ block: Block }> = memo(

src/app/components/BlockList/BlockListItem.tsx

@@ -8,7 +8,7 @@ import { Caption, Text } from '@/ui/typography';
 import pluralize from 'pluralize';
 import React from 'react';
 
-import { Block } from '@stacks/blockchain-api-client';
+import { Block } from '@stacks/stacks-blockchain-api-types';
 
 export const BlockListItem: React.FC<{ block: Block } & FlexProps> = React.memo(
   ({ block, ...rest }) => {

src/app/components/BlockList/__tests__/BlocksListBase.test.tsx

@@ -2,11 +2,10 @@ import React from 'react';
 import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
 import BlocksListBase from '../';
 import { useBlockListInfinite as useBlockListInfiniteActual } from '@/app/common/queries/useBlockListInfinite';
-import {
-  Block,
-  connectWebSocketClient as connectWebSocketClientActual,
-  StacksApiWebSocketClient,
-} from '@stacks/blockchain-api-client';
+import { connectWebSocketClient as connectWebSocketClientActual } from '@stacks/blockchain-api-client';
+import { Block } from '@stacks/stacks-blockchain-api-types';
+import { StacksApiWebSocketClient } from '@stacks/blockchain-api-client';
+
 import { EnhancedBlock } from '@/app/components/BlockList/types';
 
 const useBlockListInfinite = useBlockListInfiniteActual as jest.MockedFunction<

src/app/components/BlockList/__tests__/__snapshots__/MicroblockListItem.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`MicroblockListItem component renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="css-r9yb24"
+    class="css-brzhns"
   >
     <span
-      class="chakra-stack css-mx5gzi"
+      class="chakra-stack css-1h7m9p5"
     >
       <div
         class="css-1gqk193"
@@ -30,10 +30,10 @@ exports[`MicroblockListItem component renders correctly 1`] = `
         </svg>
       </div>
       <span
-        class="chakra-stack css-ueng8y"
+        class="chakra-stack css-x6ucgl"
       >
         <div
-          class="css-20iiw3"
+          class="css-1exw3s2"
         >
           <a
             class="chakra-text css-jqqks0"
@@ -51,7 +51,7 @@ exports[`MicroblockListItem component renders correctly 1`] = `
       </span>
     </span>
     <span
-      class="chakra-stack css-tprkve"
+      class="chakra-stack css-afdpdg"
     >
       <span
         class="chakra-text css-zousv3"

src/app/components/BlockList/index.tsx

@@ -10,7 +10,8 @@ import { Text } from '@/ui/typography';
 import dynamic from 'next/dynamic';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { Block, connectWebSocketClient } from '@stacks/blockchain-api-client';
+import { Block } from '@stacks/stacks-blockchain-api-types';
+import { connectWebSocketClient } from '@stacks/blockchain-api-client';
 
 import { useInfiniteQueryResult } from '../../common/hooks/useInfiniteQueryResult';
 import { useBlockListInfinite } from '../../common/queries/useBlockListInfinite';
@@ -43,7 +44,7 @@ const BlocksListBase: React.FC<{
     };
     const subscribe = async () => {
       const client = await connectWebSocketClient(activeNetwork.url.replace('https://', 'wss://'));
-      sub = await client.subscribeBlocks(block => {
+      sub = await client.subscribeBlocks((block: any) => {
         setLatestBlocks(prevLatestBlocks => [
           { ...block, microblock_tx_count: {}, animate: true },
           ...prevLatestBlocks,

src/app/components/BlockList/types.ts

@@ -1,3 +1,3 @@
-import { Block } from '@stacks/blockchain-api-client';
+import { Block } from '@stacks/stacks-blockchain-api-types';
 
 export type EnhancedBlock = Block & { destroy?: boolean; animate?: boolean };

src/app/components/NavBar/__tests__/__snapshots__/DesktopNav.test.tsx.snap

@@ -3,16 +3,16 @@
 exports[`DesktopNav should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="chakra-stack css-1o2h1ld"
+    class="chakra-stack css-1yubk4m"
   >
     <div
-      class="css-15159ky"
+      class="css-1txr7ua"
     >
       <div
         aria-controls="popover-content-:r1:"
         aria-expanded="false"
         aria-haspopup="dialog"
-        class="css-1dc63cv"
+        class="css-1dz1cl"
         id="popover-trigger-:r1:"
       >
         <a
@@ -52,13 +52,13 @@ exports[`DesktopNav should render correctly 1`] = `
       </div>
     </div>
     <div
-      class="css-15159ky"
+      class="css-1txr7ua"
     >
       <div
         aria-controls="popover-content-:r3:"
         aria-expanded="false"
         aria-haspopup="dialog"
-        class="css-1dc63cv"
+        class="css-1dz1cl"
         id="popover-trigger-:r3:"
       >
         <a

src/app/components/NavBar/__tests__/__snapshots__/MobileNav.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`MobileNav should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="chakra-stack css-j054pp"
+    class="chakra-stack css-4xpai1"
   >
     <div
-      class="css-hwh8lq"
+      class="css-sw0q0z"
     >
       <button
         aria-label="Change color mode"
@@ -27,17 +27,13 @@ exports[`MobileNav should render correctly 1`] = `
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <desc />
           <path
             d="M0 0h24v24H0z"
             fill="none"
             stroke="none"
           />
-          <line
-            x1="3"
-            x2="21"
-            y1="3"
-            y2="21"
+          <path
+            d="M3 3l18 18"
           />
           <path
             d="M16 12a4 4 0 0 0 -4 -4m-2.834 1.177a4 4 0 0 0 5.66 5.654"
@@ -65,23 +61,16 @@ exports[`MobileNav should render correctly 1`] = `
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <desc />
           <path
             d="M0 0h24v24H0z"
             fill="none"
             stroke="none"
           />
-          <line
-            x1="18"
-            x2="6"
-            y1="6"
-            y2="18"
+          <path
+            d="M18 6l-12 12"
           />
-          <line
-            x1="6"
-            x2="18"
-            y1="6"
-            y2="18"
+          <path
+            d="M6 6l12 12"
           />
         </svg>
       </button>
@@ -90,10 +79,10 @@ exports[`MobileNav should render correctly 1`] = `
       class="css-xar605"
     >
       <div
-        class="chakra-stack css-1bf3tp6"
+        class="chakra-stack css-bi0nzx"
       >
         <a
-          class="css-loh7ac"
+          class="css-3xyie7"
           href="#"
         >
           <span
@@ -102,7 +91,7 @@ exports[`MobileNav should render correctly 1`] = `
             Mobile Sample Item 1
           </span>
           <svg
-            class="chakra-icon css-1uilshh"
+            class="chakra-icon css-3tv48m"
             fill="currentColor"
             focusable="false"
             height="1em"
@@ -123,7 +112,7 @@ exports[`MobileNav should render correctly 1`] = `
           style="overflow: hidden; display: none; opacity: 0; height: 0px;"
         >
           <div
-            class="chakra-stack css-sgwtyh"
+            class="chakra-stack css-k96o6u"
           >
             <a
               class="css-9sazr8"
@@ -135,10 +124,10 @@ exports[`MobileNav should render correctly 1`] = `
         </div>
       </div>
       <div
-        class="chakra-stack css-1bf3tp6"
+        class="chakra-stack css-bi0nzx"
       >
         <a
-          class="css-loh7ac"
+          class="css-3xyie7"
           href="#"
         >
           <span
@@ -152,7 +141,7 @@ exports[`MobileNav should render correctly 1`] = `
           style="overflow: hidden; display: none; opacity: 0; height: 0px;"
         >
           <div
-            class="chakra-stack css-sgwtyh"
+            class="chakra-stack css-k96o6u"
           />
         </div>
       </div>

src/app/txid/[txid]/TxDetails/BlockHeight.tsx

@@ -16,6 +16,8 @@ export const BlockHeight: FC<{
   tx: Transaction | MempoolTransaction;
   block?: Block;
 }> = ({ tx, block }) => {
+  const [isOnTouchScreen] = useMediaQuery('(hover: none)');
+
   if (isInMempool(tx) || isInMicroblock(tx)) return null;
 
   const ts = tx.parent_burn_block_time || tx.burn_block_time;
@@ -25,8 +27,6 @@ export const BlockHeight: FC<{
     ts * 1000
   ).toLocaleDateString()}`;
 
-  const [isOnTouchScreen] = useMediaQuery('(hover: none)');
-
   return (
     <KeyValueHorizontal
       label={'Block height'}

src/app/txid/[txid]/TxDetails/__tests__/Broadcast.test.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { Broadcast } from '../Broadcast';
 import '@testing-library/jest-dom/extend-expect';
-import {Transaction} from "@stacks/stacks-blockchain-api-types";
+import { Transaction } from '@stacks/stacks-blockchain-api-types';
 
 describe('<Broadcast />', () => {
   it('renders correctly', () => {
     const hardcodedDate = new Date('2023-01-01T12:00:00Z');
 
     const mockTx = {
-      receipt_time: Math.floor(hardcodedDate.getTime() / 1000)
+      receipt_time: Math.floor(hardcodedDate.getTime() / 1000),
     } as unknown as Transaction;
 
     const { asFragment } = render(<Broadcast tx={mockTx} />);

src/app/txid/[txid]/TxDetails/__tests__/__snapshots__/Broadcast.test.tsx.snap

@@ -3,21 +3,21 @@
 exports[`<Broadcast /> renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="css-1pxgzpz"
+    class="css-1vao8g8"
   >
     <div
-      class="css-14yezot"
+      class="css-wasqz"
     >
       Broadcast
     </div>
     <div
-      class="css-15u2v2k"
+      class="css-1q1jcsf"
     >
       <div
         class="css-1dupj0l"
       >
         <div
-          class="css-15159ky"
+          class="css-1txr7ua"
         >
           <svg
             class="chakra-icon css-1p0vfbv"

src/common/utils.spec.ts

@@ -13,7 +13,7 @@ describe('isJSONString', () => {
 
   test('returns false for a non-string input', () => {
     const nonStringInput = { key: 'value' };
-    expect(isJSONString(nonStringInput)).toBe(false);
+    expect(isJSONString(nonStringInput as any)).toBe(false);
   });
 
   test('returns false for an empty string', () => {

src/components/balances/stx-balance-card.tsx

@@ -80,6 +80,7 @@ interface StxBalancesProps {
 }
 
 export const StxBalances: React.FC<StxBalancesProps> = ({ balances, principal }) => {
+  const colorMode = useColorMode().colorMode;
   const dispatch = useAppDispatch();
   const tokenOfferingData = balances?.token_offering_locked;
 
@@ -126,7 +127,7 @@ export const StxBalances: React.FC<StxBalancesProps> = ({ balances, principal })
               alignItems="flex-start"
               py="24px"
             >
-              <Circle bg={`brand.${useColorMode().colorMode}`} mr="16px" size="36px">
+              <Circle bg={`brand.${colorMode}`} mr="16px" size="36px">
                 <StxIcon color="white" size="16px" />
               </Circle>
               <Stack spacing="8px" pr="16px">

src/components/function-summary/function-summary.tsx

@@ -28,7 +28,7 @@ export const FunctionSummarySection = memo<{
           />
           <KeyValueHorizontal
             label="Result"
-            value={<FunctionSummaryResult result={result} txStatus={txStatus} />}
+            value={<FunctionSummaryResult result={result} />}
             labelProps={{ alignSelf: 'flex-start' }}
           />
           <KeyValueHorizontal

src/components/modals/add-network.tsx

@@ -1,13 +1,13 @@
 import { MODALS } from '@/common/constants';
 import { useAppDispatch } from '@/common/state/hooks';
 import { AddNetworkForm } from '@/components/add-network-form';
-import { selectOpenedModal } from '@/components/modals/modal-slice';
+import { useOpenedModal } from '@/components/modals/modal-slice';
 import { Box, Modal, Stack, TextLink } from '@/ui/components';
 import { Text } from '@/ui/typography';
 import { FC } from 'react';
 
 export const AddNetworkModal: FC = () => {
-  const modal = selectOpenedModal();
+  const modal = useOpenedModal();
   const dispatch = useAppDispatch();
   const isOpen = modal === MODALS.ADD_NETWORK;
   return (

src/components/modals/modal-slice.ts

@@ -27,4 +27,4 @@ export const modalSlice = createSlice({
 
 export const { openModal, closeModal } = modalSlice.actions;
 
-export const selectOpenedModal = () => useAppSelector(state => state.modal.openedModal);
+export const useOpenedModal = () => useAppSelector(state => state.modal.openedModal);

src/components/modals/unlocking-schedule.tsx

@@ -2,7 +2,7 @@
 
 import { Badge } from '@/common/components/Badge';
 import { MODALS } from '@/common/constants';
-import { selectOpenedModal } from '@/components/modals/modal-slice';
+import { useOpenedModal } from '@/components/modals/modal-slice';
 import { PercentageCircle } from '@/components/percentage-circle';
 import { Section } from '@/components/section';
 import { AddressQueryKeys, addressQK } from '@/features/address/query-keys';
@@ -208,7 +208,7 @@ const Table: React.FC<{ balance?: AddressBalanceResponse; stacksTipHeight?: numb
 export const UnlockingScheduleModal: React.FC<{ balance?: AddressBalanceResponse }> = ({
   balance,
 }) => {
-  const isOpen = selectOpenedModal() === MODALS.UNLOCKING_SCHEDULE;
+  const isOpen = useOpenedModal() === MODALS.UNLOCKING_SCHEDULE;
   const queries = useAddressQueries();
   const { data: stacksInfo } = useQuery(
     addressQK(AddressQueryKeys.coreApiInfo),

src/features/blocks-visualizer/index.tsx

@@ -12,7 +12,7 @@ import { AiFillCheckCircle } from 'react-icons/ai';
 import { BsArrowRight, BsFillExclamationCircleFill } from 'react-icons/bs';
 import { TbCurrencyBitcoin } from 'react-icons/tb';
 
-import { Block as BlockType } from '@stacks/blockchain-api-client';
+import { Block as BlockType } from '@stacks/stacks-blockchain-api-types';
 
 import { useBlockListInfinite } from '../../app/common/queries/useBlockListInfinite';
 

src/features/search/items/block-result-item.tsx

@@ -4,7 +4,7 @@ import { Box } from '@/ui/components';
 import { css } from '@emotion/react';
 import React from 'react';
 
-import { Block } from '@stacks/blockchain-api-client';
+import { Block } from '@stacks/stacks-blockchain-api-types';
 
 interface BlockResultItemProps {
   result: FoundResult;