feat: ui updates

src/app/PageClient.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import dynamic from 'next/dynamic';
-import * as React from 'react';
 
 import { DEFAULT_BLOCKS_LIST_LIMIT, DEFAULT_LIST_LIMIT_SMALL } from '../common/constants/constants';
 import { useGlobalContext } from '../common/context/useAppContext';
@@ -13,8 +12,8 @@
 
 const NonPaginatedBlockListLayoutA = dynamic(
   () =>
     import('./_components/BlockList/LayoutA/NonPaginated').then(
       mod => mod.NonPaginatedBlockListLayoutA
     ),
   {
     loading: () => <SkeletonBlockList />,
@@ -36,7 +35,7 @@
       <Grid
         gap="7"
         width="full"
-        gridTemplateColumns={['100%', '100%', 'minmax(0, 0.6fr) minmax(0, 0.4fr)']}
+        gridTemplateColumns={['100%', '100%', '100%', 'minmax(0, 0.6fr) minmax(0, 0.4fr)']}
       >
         <TxListTabs limit={DEFAULT_LIST_LIMIT_SMALL} />
 

src/app/_components/BlockList/LayoutA/__tests__/__snapshots__/BlockListWithControls.test.tsx.snap

@@ -209,7 +209,7 @@ exports[`BlockListWithControls renders correctly 1`] = `
                   <span
                     class="chakra-text css-nvxyq8"
                   >
-                    in 54062 years
+                    in 54066 years
                   </span>
                 </div>
               </div>
@@ -256,7 +256,7 @@ exports[`BlockListWithControls renders correctly 1`] = `
                   <span
                     class="chakra-text css-nvxyq8"
                   >
-                    in 54062 years
+                    in 54066 years
                   </span>
                 </div>
               </div>
@@ -303,7 +303,7 @@ exports[`BlockListWithControls renders correctly 1`] = `
                   <span
                     class="chakra-text css-nvxyq8"
                   >
-                    in 54062 years
+                    in 54066 years
                   </span>
                 </div>
               </div>
@@ -377,7 +377,7 @@ exports[`BlockListWithControls renders correctly 1`] = `
                 <span
                   class="chakra-text css-nvxyq8"
                 >
-                  in 54062 years
+                  in 54066 years
                 </span>
               </div>
             </div>

src/app/sandbox/components/TransactionsPanel.tsx

@@ -2,7 +2,7 @@
 
 import { useColorMode } from '@chakra-ui/react';
 import { useRouter } from 'next/navigation';
-import React, { Fragment, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { BsChevronDown } from 'react-icons/bs';
 
 import { Transaction } from '@stacks/stacks-blockchain-api-types';
@@ -18,7 +18,7 @@
 import { MempoolTxListItemMini } from '../../../features/txs-list/ListItem/MempoolTxListItemMini';
 import { TxListItemMini } from '../../../features/txs-list/ListItem/TxListItemMini';
 import { FilterButton } from '../../../features/txsFilterAndSort/FilterButton';
-import { FilteredMessage } from '../../../features/txsFilterAndSort/FilterPanel';
+import { AllTransactionsFilteredMessage } from '../../../features/txsFilterAndSort/TransactionMessages';
 import { useFilterAndSortState } from '../../../features/txsFilterAndSort/useFilterAndSortState';
 import { Accordion } from '../../../ui/Accordion';
 import { AccordionButton } from '../../../ui/AccordionButton';
@@ -36,23 +36,6 @@
 import { useUser } from '../hooks/useUser';
 import { setCodeBody, toggleRightPanel } from '../sandbox-slice';
 
-const PanelHeader: React.FC = () => {
-  return (
-    <>
-      <Flex
-        justifyContent="space-between"
-        px="16px"
-        borderBottomWidth="1px"
-        py="8px"
-        bg={`bg.${useColorMode().colorMode}`}
-      >
-        <Caption>Transactions</Caption>
-        <FilterButton />
-      </Flex>
-    </>
-  );
-};
-
 const LoadButton = ({ codeBody }: { codeBody: string }) => {
   const router = useRouter();
   const network = useGlobalContext().activeNetwork;
@@ -198,7 +181,6 @@
       : tx.tx_type === 'contract_call'
         ? tx.contract_call.contract_id
         : undefined;
-  const colorMode = useColorMode().colorMode;
 
   const { data: contract } = useContractById(contractId);
 
@@ -300,7 +282,7 @@
       {filteredTxs?.length ? (
         <Accordion allowMultiple>{txList}</Accordion>
       ) : hasTxButIsFiltered ? (
-        <FilteredMessage />
+        <AllTransactionsFilteredMessage />
       ) : (
         <Flex flexGrow={1} flexDirection="column" alignItems="center" justifyContent="center">
           <Stack textAlign="center">

src/app/txid/[txId]/Events.tsx

@@ -2,7 +2,6 @@
 
 import { Code } from '@chakra-ui/react';
 import React, { FC, Fragment } from 'react';
-import { IconType } from 'react-icons';
 import { TbAlignLeft, TbArrowRight, TbPlus, TbTrash } from 'react-icons/tb';
 
 import {
@@ -29,7 +28,6 @@ import {
 } from '../../../common/utils/utils';
 import { Box } from '../../../ui/Box';
 import { Flex } from '../../../ui/Flex';
-import { Grid } from '../../../ui/Grid';
 import { HStack } from '../../../ui/HStack';
 import { Icon } from '../../../ui/Icon';
 import { StxIcon } from '../../../ui/icons';

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

@@ -1,7 +1,5 @@
 'use client';
 
-import * as React from 'react';
-import { Fragment } from 'react';
 import { AiOutlineClockCircle } from 'react-icons/ai';
 
 import { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types';

src/common/components/BtcStxBlockLinks.tsx

@@ -1,13 +1,10 @@
 'use client';
 
-import { useColorMode } from '@chakra-ui/react';
-import * as React from 'react';
 import { FC, Fragment } from 'react';
 import { PiArrowRightLight } from 'react-icons/pi';
 
 import { Flex } from '../../ui/Flex';
 import { Icon } from '../../ui/Icon';
-import { Text } from '../../ui/Text';
 import { TextLink } from '../../ui/TextLink';
 import { BitcoinIcon, StxIcon } from '../../ui/icons';
 import { useGlobalContext } from '../context/useAppContext';
@@ -31,16 +28,16 @@ export const BtcStxBlockLinks: FC<BtcStxBlockLinksProps> = ({
 
   return (
     <Flex flexWrap={'wrap'} alignItems={'center'} gap={1.5}>
-      <Circle size={4.5} bg="purple.600">
-        <Icon as={StxIcon} size={2.5} color="white" />
+      <Circle size={'18px'} bg="purple.600">
+        <Icon as={StxIcon} size={'10px'} color="white" />
       </Circle>
       <BlockLink hash={stxBlockHash} fontWeight={'medium'} fontSize={'sm'}>
         #{stxBlockHeight}
       </BlockLink>
       {btcBlockHeight && (
         <Fragment>
-          <Icon as={PiArrowRightLight} size={4} color={'slate.700'} />
-          <Icon as={BitcoinIcon} size={4.5} />
+          <Icon as={PiArrowRightLight} size={'16px'} color={'slate.700'} />
+          <Icon as={BitcoinIcon} size={'18px'} />
           <TextLink
             href={`${btcBlockBaseUrl}/${btcBlockHeight}`}
             target="_blank"

src/common/components/ExplorerLinks.tsx

@@ -1,23 +1,39 @@
 'use client';
 
 import { forwardRef } from '@chakra-ui/react';
-import React from 'react';
 
 import { Link, LinkProps } from '../../ui/Link';
 import { useGlobalContext } from '../context/useAppContext';
 import { buildUrl } from '../utils/buildUrl';
 
-export const ExplorerLink = forwardRef<LinkProps, 'a'>(({ href, ...rest }, ref) => {
-  const network = useGlobalContext().activeNetwork;
-  return <Link ref={ref} href={buildUrl(href!, network)} {...rest} />;
-});
-
-export const TxLink = forwardRef<Partial<LinkProps> & { txId: string }, 'a'>(
-  ({ txId, ...rest }, ref) => {
-    return <ExplorerLink ref={ref} href={`/txid/${encodeURIComponent(txId)}`} {...rest} />;
+export const ExplorerLink = forwardRef<LinkProps & { openInNewTab?: boolean }, 'a'>(
+  ({ href, openInNewTab, ...rest }, ref) => {
+    const network = useGlobalContext().activeNetwork;
+    return (
+      <Link
+        ref={ref}
+        href={buildUrl(href!, network)}
+        {...(openInNewTab && { target: '_blank' })}
+        {...rest}
+      />
+    );
   }
 );
 
+export const TxLink = forwardRef<
+  Partial<LinkProps> & { txId: string; openInNewTab?: boolean },
+  'a'
+>(({ txId, openInNewTab = false, ...rest }, ref) => {
+  return (
+    <ExplorerLink
+      ref={ref}
+      href={`/txid/${encodeURIComponent(txId)}`}
+      openInNewTab={openInNewTab}
+      {...rest}
+    />
+  );
+});
+
 export const TokenLink = forwardRef<Partial<LinkProps> & { tokenId: string }, 'a'>(
   ({ tokenId, ...rest }, ref) => {
     return <ExplorerLink ref={ref} href={`/token/${encodeURIComponent(tokenId)}`} {...rest} />;

src/common/components/FilterMenu.tsx

@@ -0,0 +1,76 @@
+import { useColorModeValue } from '@chakra-ui/react';
+import { ReactNode, isValidElement } from 'react';
+import { IconType } from 'react-icons';
+import { BsChevronDown } from 'react-icons/bs';
+
+import { Box } from '../../ui/Box';
+import { Button } from '../../ui/Button';
+import { Icon } from '../../ui/Icon';
+import { Menu } from '../../ui/Menu';
+import { MenuButton } from '../../ui/MenuButton';
+import { MenuItem } from '../../ui/MenuItem';
+import { MenuList } from '../../ui/MenuList';
+
+interface MenuItem {
+  onClick: () => void;
+  label: string;
+}
+
+interface FilterMenuProps {
+  filterLabel: string | (() => string);
+  menuItems: MenuItem[] | ReactNode[];
+  leftIcon: IconType;
+}
+
+function isMenuItemArray(items: any[]): items is { label: string; onClick: () => void }[] {
+  return items.every(item => typeof item.label === 'string' && typeof item.onClick === 'function');
+}
+
+function isReactNodeArray(items: any[]): items is React.ReactNode[] {
+  return items.every(isValidElement);
+}
+
+export function FilterMenu({ filterLabel, menuItems, leftIcon }: FilterMenuProps) {
+  const borderColor = useColorModeValue('slate.300', 'slate.900');
+  const filterLabelValue = typeof filterLabel === 'function' ? filterLabel?.() : filterLabel;
+
+  return (
+    <Menu>
+      {({ isOpen }) => (
+        <>
+          <MenuButton
+            as={Button}
+            rightIcon={<Icon as={BsChevronDown} size={3} color="text" />}
+            leftIcon={<Icon as={leftIcon} size={4} color={isOpen ? 'text' : 'secondaryText'} />}
+            fontSize={'sm'}
+            bg={'bg'}
+            fontWeight={'semibold'}
+            border={'1px'}
+            borderColor={borderColor}
+            _hover={{ color: 'text', backgroundColor: 'border' }}
+            _active={{ color: 'text', backgroundColor: 'border' }}
+            _focus={{ color: 'text', backgroundColor: 'border' }}
+          >
+            <Box display="inline" fontWeight="normal" color={isOpen ? 'text' : 'secondaryText'}>
+              Show:{' '}
+            </Box>
+            <Box display="inline" fontWeight="normal" color={'text'}>
+              {filterLabelValue}
+            </Box>
+          </MenuButton>
+          <MenuList fontSize={'sm'} padding="8px">
+            {isMenuItemArray(menuItems)
+              ? menuItems.map(({ label, onClick }) => (
+                  <MenuItem color={'text'} onClick={onClick}>
+                    {label}
+                  </MenuItem>
+                ))
+              : isReactNodeArray(menuItems)
+                ? menuItems
+                : null}
+          </MenuList>
+        </>
+      )}
+    </Menu>
+  );
+}

src/common/components/StxPrice.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { useColorModeValue } from '@chakra-ui/react';
+import { FC, useMemo } from 'react';
+
+import { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types';
+
+import { ExplorerErrorBoundary } from '../../app/_components/ErrorBoundary';
+import { Flex } from '../../ui/Flex';
+import { useAppSelector } from '../state/hooks';
+import { TransactionValueFilterTypes } from '../state/slices/transaction-value-filter-slice';
+import { getUsdValue } from '../utils/utils';
+import { useStxPriceForTx } from './StxPriceButton/useStxPriceForTx';
+
+interface StxPriceProps {
+  tx: Transaction | MempoolTransaction;
+  value: number;
+}
+
+const StxPriceBase: FC<StxPriceProps> = ({ tx, value }) => {
+  const { historicalStxPrice, currentStxPrice } = useStxPriceForTx(tx);
+
+  const activeTransactionValueFilter = useAppSelector(
+    state => state.activeTransactionValueFilter.activeTransactionValueFilter
+  );
+  const currentPriceFormatted = useMemo(
+    () => getUsdValue(value, currentStxPrice, true),
+    [currentStxPrice, value]
+  );
+  const historicalPriceFormatted = useMemo(
+    () => getUsdValue(value, historicalStxPrice, true),
+    [historicalStxPrice, value]
+  );
+
+  return (
+    <Flex
+      height="24px"
+      justifyContent={'center'}
+      alignItems={'center'}
+      borderRadius="md"
+      padding="0px 8px"
+      ml={'5px'}
+      fontSize={'xs'}
+      _focus={{ outline: 0 }}
+      flexShrink={0}
+      suppressHydrationWarning={true}
+      bg={useColorModeValue('purple.200', 'purple.400')}
+      _hover={{ bg: useColorModeValue('purple.300', 'purple.300') }}
+      color={'black'}
+    >
+      {activeTransactionValueFilter === TransactionValueFilterTypes.CurrentValue
+        ? currentPriceFormatted
+        : historicalPriceFormatted}
+    </Flex>
+  );
+};
+
+export function StxPrice(props: StxPriceProps) {
+  return (
+    <ExplorerErrorBoundary renderContent={() => null}>
+      <StxPriceBase {...props} />
+    </ExplorerErrorBoundary>
+  );
+}

src/common/components/StxPriceButton/index.tsx

@@ -1,13 +1,11 @@
 'use client';
 
-import { useColorMode, useColorModeValue } from '@chakra-ui/react';
+import { useColorModeValue } from '@chakra-ui/react';
 import { FC, useCallback, useMemo, useState } from 'react';
-import * as React from 'react';
 
 import { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types';
 
 import { ExplorerErrorBoundary } from '../../../app/_components/ErrorBoundary';
-import { Box } from '../../../ui/Box';
 import { Button } from '../../../ui/Button';
 import { Tooltip } from '../../../ui/Tooltip';
 import { getUsdValue } from '../../utils/utils';