feat(mempool-header): fixed linting and build issues

src/app/_components/Stats/TransactionTypeFilterMenu.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useMemo } from 'react';
 
-import { MempoolFeePriorities, MempoolTransactionStatsResponseTxTypeCounts } from '@stacks/blockchain-api-client';
+import { MempoolFeePriorities } from '@stacks/blockchain-api-client';
+
 import { FilterMenu } from '../../../common/components/FilterMenu';
 
 export enum TransactionTypeFilterTypes {
@@ -26,7 +27,9 @@ function getTransactionTypeFilterLabel(transactionType: TransactionTypeFilterTyp
   throw new Error('Invalid transactionType');
 }
 
-export function mapTransactionTypeToFilterValue(txType: TransactionTypeFilterTypes): keyof MempoolFeePriorities {
+export function mapTransactionTypeToFilterValue(
+  txType: TransactionTypeFilterTypes
+): keyof MempoolFeePriorities {
   if (txType === TransactionTypeFilterTypes.AverageForAllTransactions) {
     return 'all';
   }
@@ -53,9 +56,9 @@ export function TransactionTypeFilterMenu({
     () =>
       Object.keys(TransactionTypeFilterTypes).map(filterType => ({
         onClick: () => setTransactionType(filterType as TransactionTypeFilterTypes),
-        label: getTransactionTypeFilterLabel(filterType),
+        label: getTransactionTypeFilterLabel(filterType as TransactionTypeFilterTypes),
       })),
-    [setTransactionType, transactionType]
+    [setTransactionType]
   );
 
   const filterLabel = useCallback(

src/app/transactions/MempoolFeeStats.tsx

@@ -102,7 +102,7 @@ function MempoolFeePrioritCard({
                 mempoolFeeTokenTransfer / MICROSTACKS_IN_STACKS
               } STX`}
             >
-              <Flex gap={0.5} alignItems={'center'} justifyContent={'center'} color='secondaryText'>
+              <Flex gap={0.5} alignItems={'center'} justifyContent={'center'} color="secondaryText">
                 <Icon as={getTxTypeIcon('token_transfer')} size={3.5} mr={2} />
                 <Box suppressHydrationWarning>
                   {`${Number((mempoolFeeTokenTransfer / MICROSTACKS_IN_STACKS).toFixed(3))}`} STX
@@ -112,7 +112,7 @@ function MempoolFeePrioritCard({
             <Tooltip
               label={`Contract call tx fee: ${mempoolFeeContractCall / MICROSTACKS_IN_STACKS} STX`}
             >
-              <Flex gap={0.5} alignItems={'center'} justifyContent={'center'} color='secondaryText'>
+              <Flex gap={0.5} alignItems={'center'} justifyContent={'center'} color="secondaryText">
                 <Icon as={getTxTypeIcon('contract_call')} size={3.5} mr={2} />
                 <Box suppressHydrationWarning>
                   {`${Number((mempoolFeeContractCall / MICROSTACKS_IN_STACKS).toFixed(3))}`} STX
@@ -124,7 +124,7 @@ function MempoolFeePrioritCard({
                 mempoolFeeSmartContract / MICROSTACKS_IN_STACKS
               } STX`}
             >
-              <Flex gap={0.5} alignItems={'center'} justifyContent={'center'} color='secondaryText'>
+              <Flex gap={0.5} alignItems={'center'} justifyContent={'center'} color="secondaryText">
                 <Icon as={getTxTypeIcon('smart_contract')} size={3.5} mr={2} />
                 <Box suppressHydrationWarning>
                   {`${Number((mempoolFeeSmartContract / MICROSTACKS_IN_STACKS).toFixed(3))}`} STX

src/common/components/FilterMenu.tsx

@@ -47,46 +47,46 @@ export function FilterMenu({ filterLabel, menuItems, leftIcon }: FilterMenuProps
   const filterLabelValue = typeof filterLabel === 'function' ? filterLabel?.() : filterLabel;
 
   return (
-      <Menu>
-        {({ isOpen }) => (
-          <>
-            <MenuButton
-              as={Button}
-              rightIcon={<Icon as={BsChevronDown} size={3} color={textColor} />}
-              leftIcon={leftIcon ? <Icon as={leftIcon} size={4} color={filterTitleColor} /> : null}
-              fontSize={'sm'}
-              bg={bg}
-              fontWeight={'semibold'}
-              border={'1px'}
-              borderColor={borderColor}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
-              onMouseEnter={handleMouseEnter}
-              onMouseLeave={handleMouseLeave}
-              _hover={{ color: textColor, backgroundColor: hoverBg }}
-              _active={{ color: textColor, backgroundColor: hoverBg }}
-              _focus={{ color: textColor, backgroundColor: hoverBg }}
+    <Menu>
+      {({ isOpen }) => (
+        <>
+          <MenuButton
+            as={Button}
+            rightIcon={<Icon as={BsChevronDown} size={3} color={textColor} />}
+            leftIcon={leftIcon ? <Icon as={leftIcon} size={4} color={filterTitleColor} /> : null}
+            fontSize={'sm'}
+            bg={bg}
+            fontWeight={'semibold'}
+            border={'1px'}
+            borderColor={borderColor}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            _hover={{ color: textColor, backgroundColor: hoverBg }}
+            _active={{ color: textColor, backgroundColor: hoverBg }}
+            _focus={{ color: textColor, backgroundColor: hoverBg }}
+          >
+            <Box
+              display="inline"
+              fontWeight="normal"
+              color={isHoveredOrFocused || isOpen ? textColor : filterTitleColor}
             >
-              <Box
-                display="inline"
-                fontWeight="normal"
-                color={isHoveredOrFocused || isOpen ? textColor : filterTitleColor}
-              >
-                Show:{' '}
-              </Box>
-              <Box display="inline" fontWeight="normal" color={textColor}>
-                {filterLabelValue}
-              </Box>
-            </MenuButton>
-            <MenuList fontSize={'sm'} padding="8px">
-              {menuItems.map(({ label, onClick }) => (
-                <MenuItem color={textColor} onClick={onClick}>
-                  {label}
-                </MenuItem>
-              ))}
-            </MenuList>
-          </>
-        )}
-      </Menu>
+              Show:{' '}
+            </Box>
+            <Box display="inline" fontWeight="normal" color={textColor}>
+              {filterLabelValue}
+            </Box>
+          </MenuButton>
+          <MenuList fontSize={'sm'} padding="8px">
+            {menuItems.map(({ label, onClick }) => (
+              <MenuItem color={textColor} onClick={onClick}>
+                {label}
+              </MenuItem>
+            ))}
+          </MenuList>
+        </>
+      )}
+    </Menu>
   );
 }

src/common/components/StxPrice.tsx

@@ -18,7 +18,7 @@ interface StxPriceProps {
 }
 
 const StxPriceBase: FC<StxPriceProps> = ({ tx, value }) => {
-    const { historicalStxPrice, currentStxPrice } = useStxPriceForTx(tx);
+  const { historicalStxPrice, currentStxPrice } = useStxPriceForTx(tx);
 
   const activeTransactionValueFilter = useAppSelector(
     state => state.activeTransactionValueFilter.activeTransactionValueFilter

src/common/components/TxIcon.tsx

@@ -1,14 +1,7 @@
-import { CoinSparkleIcon } from '@/ui/icons/CoinSparkleIcon';
 import React, { FC } from 'react';
 import { BsCodeSlash } from 'react-icons/bs';
-import {
-  PiArrowBendDoubleUpRightLight,
-  PiArrowBendDownRight,
-  PiClock,
-  PiFireLight,
-  PiWarningCircle,
-} from 'react-icons/pi';
-import { RxCube } from 'react-icons/rx';
+import { PiArrowBendDownRight, PiClock, PiWarningCircle } from 'react-icons/pi';
+import { TbArrowsDoubleSwNe } from 'react-icons/tb';
 
 import { Transaction } from '@stacks/stacks-blockchain-api-types';
 import { TransactionType } from '@stacks/stacks-blockchain-api-types/generated';
@@ -20,8 +13,6 @@ import { CubeSparkleIcon } from '../../ui/icons/CubeSparkleIcon';
 import { TransactionStatus } from '../constants/constants';
 import { TxStatus } from '../types/tx';
 import { Circle } from './Circle';
-import { TbArrowsDoubleSwNe } from 'react-icons/tb';
-import { useIsNakamoto } from '../hooks/useIsNakamoto';
 
 export const getTxTypeIcon = (txType: Transaction['tx_type']): FC => {
   switch (txType) {

src/common/queries/useMempoolTxStats.ts

@@ -1,8 +1,9 @@
 import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 
+import { MempoolTransactionStatsResponse } from '@stacks/blockchain-api-client';
+
 import { useApi } from '../api/useApi';
 import { ONE_MINUTE } from './query-stale-time';
-import { MempoolTransactionStatsResponse } from '@stacks/blockchain-api-client';
 
 export function useMempoolTransactionStats(options: any = {}) {
   const api = useApi();

src/common/state/slices/transaction-value-filter-slice.ts

@@ -3,16 +3,16 @@ import { PayloadAction, createSlice } from '@reduxjs/toolkit';
 import { useAppSelector } from '../../state/hooks';
 
 export enum TransactionValueFilterTypes {
-    CurrentValue = 'CurrentValue',
-    EstimatedValueOnDayOfTransaction = 'EstimatedValueOnDayOfTransaction',
-  }
+  CurrentValue = 'CurrentValue',
+  EstimatedValueOnDayOfTransaction = 'EstimatedValueOnDayOfTransaction',
+}
 
 export interface TransactionValueFilterState {
-    activeTransactionValueFilter: TransactionValueFilterTypes;
+  activeTransactionValueFilter: TransactionValueFilterTypes;
 }
 
 export const initialState: TransactionValueFilterState = {
-    activeTransactionValueFilter: TransactionValueFilterTypes.CurrentValue,
+  activeTransactionValueFilter: TransactionValueFilterTypes.CurrentValue,
 };
 
 export const activeTransactionValueFilterSlice = createSlice({
@@ -27,4 +27,5 @@ export const activeTransactionValueFilterSlice = createSlice({
 
 export const { setTransactionValueFilter } = activeTransactionValueFilterSlice.actions;
 
-export const useTransactionValue = () => useAppSelector(state => state.activeTransactionValueFilter.activeTransactionValueFilter);
+export const useTransactionValue = () =>
+  useAppSelector(state => state.activeTransactionValueFilter.activeTransactionValueFilter);

src/common/state/store.ts

@@ -9,15 +9,17 @@ import {
   filterAndSortReducers,
 } from '../../features/txsFilterAndSort/txsFilterAndSortSlice';
 import { ModalState, modalSlice } from '../components/modals/modal-slice';
-import { TransactionValueFilterState, activeTransactionValueFilterSlice } from './slices/transaction-value-filter-slice';
+import {
+  TransactionValueFilterState,
+  activeTransactionValueFilterSlice,
+} from './slices/transaction-value-filter-slice';
 
 const rootReducer = combineReducers({
   modal: modalSlice.reducer,
   search: searchSlice.reducer,
   connect: sandboxSlice.reducer,
   ...filterAndSortReducers,
   activeTransactionValueFilter: activeTransactionValueFilterSlice.reducer,
-
 });
 
 export const makeStore = () =>

src/common/utils/test-utils/renderWithReduxProvider.tsx

@@ -1,7 +1,7 @@
-import { configureStore } from '@reduxjs/toolkit';
 import type { PreloadedState } from '@reduxjs/toolkit';
-import { render } from '@testing-library/react';
+import { configureStore } from '@reduxjs/toolkit';
 import type { RenderOptions } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import React, { PropsWithChildren } from 'react';
 import { Provider } from 'react-redux';
 
@@ -23,8 +23,11 @@ import {
   modalSlice,
   initialState as modalSliceInitialState,
 } from '../../components/modals/modal-slice';
+import {
+  initialState as activeTransactionValueFilterInitialState,
+  activeTransactionValueFilterSlice,
+} from '../../state/slices/transaction-value-filter-slice';
 import { AppStore, RootState } from '../../state/store';
-import { initialState as activeTransactionValueFilterInitialState, activeTransactionValueFilterSlice} from '../../state/slices/transaction-value-filter-slice';
 
 interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> {
   preloadedState?: PreloadedState<RootState>;

src/features/txs-list/ListItem/TxListItem.tsx

@@ -1,4 +1,4 @@
-import { Box, useColorMode } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { FC, ReactNode, memo } from 'react';
 
 import { Transaction } from '@stacks/stacks-blockchain-api-types';
@@ -12,10 +12,10 @@ import { getTransactionStatus } from '../../../common/utils/transactions';
 import { MICROSTACKS_IN_STACKS, truncateMiddle } from '../../../common/utils/utils';
 import { FlexProps } from '../../../ui/Flex';
 import { HStack } from '../../../ui/HStack';
+import { TxLink } from '../../../ui/TxLink';
 import { Caption } from '../../../ui/typography';
 import { TxTitle } from '../TxTitle';
 import { getTransactionTypeLabel } from '../utils';
-import { TxLink } from '../../../ui/TxLink';
 
 interface TxsListItemProps extends FlexProps {
   tx: Transaction;
@@ -59,12 +59,8 @@ const RightTitle: FC<{ tx: Transaction }> = memo(({ tx }) => {
       divider={<Caption>∙</Caption>}
       minWidth={'160px'}
     >
-      <Box
-        display={['none', 'none', 'inline']}
-      >
-        <TxLink href={href} >
-          {truncateMiddle(tx.tx_id)}
-        </TxLink>
+      <Box display={['none', 'none', 'inline']}>
+        <TxLink href={href}>{truncateMiddle(tx.tx_id)}</TxLink>
       </Box>
       <TxTimestamp tx={tx} />
     </HStack>

src/features/txs-list/tabs/TxListTabsBase.tsx

@@ -1,16 +1,15 @@
 'use client';
 
 import { useParams } from 'next/navigation';
-import * as React from 'react';
 import { FC, ReactNode, useState } from 'react';
 
 import { TabsContainer } from '../../../common/components/TabsContainer';
 import { Box } from '../../../ui/Box';
 import { FlexProps } from '../../../ui/Flex';
+import { ShowValueMenu } from '../..//txsFilterAndSort/ShowValueMenu';
 import { FilterButton } from '../../txsFilterAndSort/FilterButton';
 import { SortMenu } from '../../txsFilterAndSort/SortMenu';
 import { CSVDownloadButton } from './CSVDownloadButton';
-import { ShowValueMenu } from '../..//txsFilterAndSort/ShowValueMenu';
 
 export const TxListTabsBase: FC<
   {

src/features/txsFilterAndSort/ShowValueMenu.tsx

@@ -36,13 +36,10 @@ export function ShowValueMenu() {
       })),
     [dispatch]
   );
-  const filterLabel = useCallback(() => getActiveTransactionValueFilterLabel(activeTransactionValueFilter), [activeTransactionValueFilter]);
-
-  return (
-    <FilterMenu
-      filterLabel={filterLabel}
-      menuItems={menuItems}
-      leftIcon={PiCurrencyDollar}
-    />
+  const filterLabel = useCallback(
+    () => getActiveTransactionValueFilterLabel(activeTransactionValueFilter),
+    [activeTransactionValueFilter]
   );
+
+  return <FilterMenu filterLabel={filterLabel} menuItems={menuItems} leftIcon={PiCurrencyDollar} />;
 }

src/features/txsFilterAndSort/SortMenu.tsx

@@ -1,4 +1,4 @@
-import { FilterMenu } from '@/common/components/FilterMenu';
+import { FilterMenu } from '../../common/components/FilterMenu';
 import { useCallback, useMemo } from 'react';
 import { GoSortDesc } from 'react-icons/go';
 

src/ui/MenuButton.tsx

@@ -6,9 +6,9 @@ import {
   forwardRef,
   useColorModeValue,
 } from '@chakra-ui/react';
+import { ReactNode } from 'react';
 
 import { UIComponent } from './types';
-import { ReactNode } from 'react';
 
 export type MenuButtonProps = CUIMenuButtonProps &
   UIComponent & {

src/ui/MenuItem.tsx

@@ -13,7 +13,7 @@ export type MenuItemProps = CUIMenuItemProps & UIComponent;
 export const MenuItem = forwardRef<MenuItemProps, 'button'>(({ children, size, ...rest }, ref) => {
   const blackColor = useColorModeValue('slate.900', 'slate.900');
   const hoverBg = useColorModeValue('slate.150 !important', 'slate.900');
-  
+
   return (
     <CUIMenuItem
       padding="12px 16px"

src/ui/TxLink.tsx

@@ -4,7 +4,11 @@ import { FC } from 'react';
 
 import { Box, BoxProps } from './Box';
 
-export const TxLink: FC<{ href?: string, openInNewTab?: boolean } & BoxProps> = ({ href, openInNewTab = false, ...rest }) => {
+export const TxLink: FC<{ href?: string; openInNewTab?: boolean } & BoxProps> = ({
+  href,
+  openInNewTab = false,
+  ...rest
+}) => {
   const colorMode = useColorMode();
 
   return (