feat: mempool txs sort menu

src/app/_components/Stats/StatSection.tsx

@@ -4,16 +4,18 @@ import { FC, ReactNode } from 'react';
 import * as React from 'react';
 
 import { Box } from '../../../ui/Box';
-import { Flex } from '../../../ui/Flex';
+import { Flex, FlexProps } from '../../../ui/Flex';
 import { Grid } from '../../../ui/Grid';
 import { Text } from '../../../ui/Text';
 
-export const StatSection: FC<{
-  title: ReactNode;
-  bodyMainText: ReactNode;
-  bodySecondaryText: ReactNode;
-  caption: ReactNode;
-}> = ({ title, bodyMainText, bodySecondaryText, caption, ...rest }) => (
+export const StatSection: FC<
+  {
+    title: ReactNode;
+    bodyMainText: ReactNode;
+    bodySecondaryText: ReactNode;
+    caption: ReactNode;
+  } & Omit<FlexProps, 'title'>
+> = ({ title, bodyMainText, bodySecondaryText, caption, ...rest }) => (
   <Flex
     direction={'column'}
     p={5}

src/app/transactions/loading.tsx

@@ -1,20 +1,42 @@
 'use client';
 
-import React from 'react';
+import * as React from 'react';
 
+import { TabsContainer } from '../../common/components/TabsContainer';
 import { SkeletonTxsList } from '../../features/txs-list/SkeletonTxsList';
-import { TxListTabsBase } from '../../features/txs-list/tabs/TxListTabsBase';
 import { Flex } from '../../ui/Flex';
 import { Skeleton } from '../../ui/Skeleton';
 import { PageTitle } from '../_components/PageTitle';
+import { SkeletonStatSection } from '../_components/Stats/SkeletonStatSection';
+import { Wrapper as StatsWrapper } from '../_components/Stats/Wrapper';
 
 export default function Loading() {
   return (
-    <Flex direction={'column'} mt="32px" gap="32px">
+    <>
       <PageTitle>
         <Skeleton width={'400px'} height={'43px'} />
       </PageTitle>
-      <TxListTabsBase confirmedList={<SkeletonTxsList />} mempoolList={<SkeletonTxsList />} />
-    </Flex>
+      <StatsWrapper>
+        <SkeletonStatSection borderRightWidth={['0px', '0px', '1px', '1px']} />
+        <SkeletonStatSection borderRightWidth={['0px', '0px', '0px', '1px']} />
+        <SkeletonStatSection borderRightWidth={['0px', '0px', '1px', '1px']} />
+        <SkeletonStatSection />
+      </StatsWrapper>
+
+      <TabsContainer
+        tabs={[
+          {
+            title: 'Confirmed',
+            content: <SkeletonTxsList />,
+          },
+          {
+            title: 'Pending',
+            content: <SkeletonTxsList />,
+          },
+        ]}
+        actions={null}
+        gridColumnEnd={'3'}
+      />
+    </>
   );
 }

src/app/transactions/page.tsx

@@ -2,14 +2,97 @@
 
 import { NextPage } from 'next';
 import React from 'react';
+import { BsChevronDown, BsCodeSlash } from 'react-icons/bs';
+import { RxCube } from 'react-icons/rx';
 
+import { numberToString } from '../../common/utils/utils';
 import { TxListTabs } from '../../features/txs-list/tabs/TxListTabs';
-import { PageTitle } from '../_components/PageTitle';
+import { Button } from '../../ui/Button';
+import { Flex } from '../../ui/Flex';
+import { Icon } from '../../ui/Icon';
+import { Menu } from '../../ui/Menu';
+import { MenuButton } from '../../ui/MenuButton';
+import { MenuDivider } from '../../ui/MenuDivider';
+import { MenuItem } from '../../ui/MenuItem';
+import { MenuList } from '../../ui/MenuList';
+import { Tag } from '../../ui/Tag';
+import { TagLabel } from '../../ui/TagLabel';
+import { useColorMode } from '../../ui/hooks/useColorMode';
+import { FunctionIcon } from '../../ui/icons';
+import { CubeSparkleIcon } from '../../ui/icons/CubeSparkleIcon';
+import { PageTitle, PageTitleWithTags } from '../_components/PageTitle';
+import { StatSection } from '../_components/Stats/StatSection';
+import {
+  CurrentStackingCycle,
+  LastBlock,
+  NextStackingCycle,
+  StxSupply,
+} from '../_components/Stats/Stats';
+import { Wrapper } from '../_components/Stats/Wrapper';
+import { LinksGroup } from '../token/[tokenId]/LinksGroup';
+import { LinksMenu } from '../token/[tokenId]/LinksMenu';
+import { Tabs } from '../token/[tokenId]/Tabs';
+import { TokenInfo } from '../token/[tokenId]/TokenInfo';
 
 const TransactionsPage: NextPage = () => {
+  const { colorMode } = useColorMode();
   return (
     <>
-      <PageTitle>Transactions</PageTitle>
+      <Flex justifyContent={'space-between'} alignItems={'flex-end'}>
+        <PageTitle>Transactions</PageTitle>
+        <Menu>
+          <MenuButton
+            as={Button}
+            backgroundColor={colorMode === 'light' ? 'white' : 'transparent'}
+            variant={colorMode === 'light' ? undefined : 'outline'}
+            color={'textTitle.light'}
+            rightIcon={<Icon as={BsChevronDown} size="11px" color={'textCaption.light'} />}
+            _hover={{ backgroundColor: colorMode === 'light' ? 'white' : 'transparent' }}
+          >
+            Transaction type
+          </MenuButton>
+          <MenuList>
+            <MenuItem>All</MenuItem>
+            <MenuItem>Coinbase</MenuItem>
+            <MenuItem>Contract deploy</MenuItem>
+            <MenuItem>Function call</MenuItem>
+            <MenuItem>Tenure change</MenuItem>
+            <MenuItem>Token transfer</MenuItem>
+          </MenuList>
+        </Menu>
+      </Flex>
+      <Wrapper>
+        <StatSection
+          title="Highest fee"
+          bodyMainText={'2.1 STX'}
+          bodySecondaryText={null}
+          caption={<>$3.2</>}
+          borderRightWidth={['0px', '0px', '1px', '1px']}
+          borderColor={'border'}
+        />
+        <StatSection
+          title="Median fee"
+          bodyMainText={'1.5 STX'}
+          bodySecondaryText={null}
+          caption={<>$2.8</>}
+          borderRightWidth={['0px', '0px', '0px', '1px']}
+          borderColor={'border'}
+        />
+        <StatSection
+          title="Lowest fee"
+          bodyMainText={'0.7 STX'}
+          bodySecondaryText={null}
+          caption={<>$1.35</>}
+          borderRightWidth={['0px', '0px', '1px', '1px']}
+          borderColor={'border'}
+        />
+        <StatSection
+          title="Average fee"
+          bodyMainText={'1.8 STX'}
+          bodySecondaryText={null}
+          caption={<>$2.95</>}
+        />
+      </Wrapper>
       <TxListTabs />
     </>
   );

src/common/components/TabsContainer.tsx

@@ -1,6 +1,8 @@
 import { FC, ReactNode } from 'react';
 
-import { FlexProps } from '../../ui/Flex';
+import { Box } from '../../ui/Box';
+import { Flex, FlexProps } from '../../ui/Flex';
+import { Stack } from '../../ui/Stack';
 import { Tab } from '../../ui/Tab';
 import { TabList } from '../../ui/TabList';
 import { TabPanel } from '../../ui/TabPanel';
@@ -10,21 +12,26 @@ import { Section } from './Section';
 
 export const TabsContainer: FC<
   {
+    setTabIndex?: (index: number) => void;
     title?: string | ReactNode;
     tabs: {
       title: string;
       content: ReactNode;
     }[];
     actions?: ReactNode;
   } & FlexProps
-> = ({ title, tabs, actions, ...props }) => (
+> = ({ setTabIndex, title, tabs, actions, ...props }) => (
   <Section title={title} {...props}>
-    <Tabs isLazy>
+    <Tabs isLazy onChange={index => setTabIndex?.(index)}>
       <TabList flexWrap={'wrap'}>
-        {tabs.map(tab => (
-          <Tab key={`${tab.title}-title`}>{tab.title}</Tab>
-        ))}
-        {actions}
+        <Flex gap={4} width={'full'} direction={['column', 'column', 'column', 'row']}>
+          <Flex width={'full'}>
+            {tabs.map(tab => (
+              <Tab key={`${tab.title}-title`}>{tab.title}</Tab>
+            ))}
+          </Flex>
+          {actions}
+        </Flex>
       </TabList>
       <TabPanels>
         {tabs.map(tab => (

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

@@ -35,6 +35,8 @@ export function CSVDownloadButton({ address }: { address: string }) {
         _hover={{ cursor: 'pointer', color: 'textTitle' }}
         data-test="csv-download-button"
         onClick={downloadCSV}
+        flexWrap={'nowrap'}
+        whiteSpace={'nowrap'}
       >
         <Icon as={FiDownload} mr="4px" color="currentColor" size="13px" strokeWidth={1.5} />
         Export as CSV

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

@@ -1,25 +1,47 @@
 'use client';
 
+import { useColorModeValue } from '@chakra-ui/react';
+import ChevronDownIcon from 'mdi-react/ChevronDownIcon';
 import { useParams } from 'next/navigation';
 import * as React from 'react';
-import { FC, ReactNode } from 'react';
+import { FC, ReactNode, useState } from 'react';
+import { BsChevronDown } from 'react-icons/bs';
 
 import { TabsContainer } from '../../../common/components/TabsContainer';
 import { Box } from '../../../ui/Box';
+import { Button } from '../../../ui/Button';
 import { FlexProps } from '../../../ui/Flex';
+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';
+import { Select } from '../../../ui/Select';
 import { FilterButton } from '../../txs-filter/FilterButton';
 import { CSVDownloadButton } from './CSVDownloadButton';
 
+enum Sort {
+  receiptTime = 'Receipt Time',
+  feeRate = 'Fee rate',
+  size = 'Size',
+}
+
 export const TxListTabsBase: FC<
   {
     confirmedList: ReactNode;
     mempoolList: ReactNode;
   } & FlexProps
 > = ({ confirmedList, mempoolList, ...props }) => {
   const principal = useParams().principal;
+  const [tabIndex, setTabIndex] = useState(0);
+  const [sort, setSort] = useState<Sort | undefined>();
+  const bg = useColorModeValue('white', 'black');
+  const color = useColorModeValue('slate.700', 'slate.400');
+  const borderColor = useColorModeValue('slate.300', 'slate.900');
 
   return (
     <TabsContainer
+      setTabIndex={setTabIndex}
       title={'Recent transactions'}
       tabs={[
         {
@@ -32,8 +54,29 @@ export const TxListTabsBase: FC<
         },
       ]}
       actions={
-        <Box marginLeft={'auto'} display={'flex'} gap={4}>
+        <Box marginLeft={'auto'} display={'flex'} gap={4} width={['100%', '100%', '100%', 'auto']}>
           {!!principal && <CSVDownloadButton address={principal as string} />}
+          {tabIndex === 1 && (
+            <Menu>
+              <MenuButton
+                as={Button}
+                rightIcon={<Icon as={BsChevronDown} size={3} />}
+                fontSize={'sm'}
+                bg={bg}
+                color={color}
+                fontWeight={'semibold'}
+                border={'1px'}
+                borderColor={borderColor}
+              >
+                {sort || 'Sort by'}
+              </MenuButton>
+              <MenuList fontSize={'sm'} color={color}>
+                <MenuItem onClick={() => setSort(Sort.receiptTime)}>{Sort.receiptTime}</MenuItem>
+                <MenuItem onClick={() => setSort(Sort.feeRate)}>{Sort.feeRate}</MenuItem>
+                <MenuItem onClick={() => setSort(Sort.size)}>{Sort.size}</MenuItem>
+              </MenuList>
+            </Menu>
+          )}
           <FilterButton />
         </Box>
       }