Revert "feat: fetch and cache token price on server"

src/app/_components/NavBar/BtcStxPrice.tsx

@@ -4,10 +4,14 @@ import * as React from 'react';
 import { ReactNode } from 'react';
 
 import { Circle } from '../../../common/components/Circle';
-import { TokenPrice } from '../../../common/types/tokenPrice';
+import {
+  useCurrentBtcPrice,
+  useSuspenseCurrentStxPrice,
+} from '../../../common/queries/useCurrentPrices';
 import { usdFormatter } from '../../../common/utils/utils';
 import { Flex, FlexProps } from '../../../ui/Flex';
 import { Icon } from '../../../ui/Icon';
+import { Skeleton } from '../../../ui/Skeleton';
 import { BitcoinIcon, StxIcon } from '../../../ui/icons';
 import { ExplorerErrorBoundary } from '../ErrorBoundary';
 
@@ -26,13 +30,29 @@ function PriceContainer({
   );
 }
 
-function BtcStxPriceBase({ tokenPrice }: { tokenPrice: TokenPrice }) {
-  const formattedBtcPrice = tokenPrice.btcPrice ? usdFormatter.format(tokenPrice.btcPrice) : '';
-  const formattedStxPrice = tokenPrice.stxPrice ? usdFormatter.format(tokenPrice.stxPrice) : '';
+function BtcStxPriceBase() {
+  const {
+    data: btcPrice,
+    isFetching: isBtcPriceFetching,
+    isError: isBtcPriceError,
+  } = useCurrentBtcPrice();
+  const {
+    data: stxPrice,
+    isFetching: isStxPriceFetching,
+    isError: isStxPriceError,
+  } = useSuspenseCurrentStxPrice();
+  const formattedBtcPrice = btcPrice ? usdFormatter.format(btcPrice) : '';
+  const formattedStxPrice = stxPrice ? usdFormatter.format(stxPrice) : '';
   return (
     <Flex gap={6} minWidth={'172px'}>
       <PriceContainer icon={<Icon as={BitcoinIcon} size={4.5} />} minWidth={'92px'}>
-        {!formattedBtcPrice ? 'N/A' : formattedBtcPrice}
+        {isBtcPriceError || !formattedBtcPrice ? (
+          'N/A'
+        ) : isBtcPriceFetching ? (
+          <Skeleton display={'flex'} flexGrow={1} height={3} />
+        ) : (
+          formattedBtcPrice
+        )}
       </PriceContainer>
       <PriceContainer
         icon={
@@ -42,16 +62,22 @@ function BtcStxPriceBase({ tokenPrice }: { tokenPrice: TokenPrice }) {
         }
         minWidth={'56px'}
       >
-        {!formattedStxPrice ? 'N/A' : formattedStxPrice}
+        {isStxPriceError || !formattedStxPrice ? (
+          'N/A'
+        ) : isStxPriceFetching ? (
+          <Skeleton display={'flex'} flexGrow={1} height={3} />
+        ) : (
+          formattedStxPrice
+        )}
       </PriceContainer>
     </Flex>
   );
 }
 
-export function BtcStxPrice({ tokenPrice }: { tokenPrice: TokenPrice }) {
+export function BtcStxPrice() {
   return (
     <ExplorerErrorBoundary renderContent={() => null}>
-      <BtcStxPriceBase tokenPrice={tokenPrice} />
+      <BtcStxPriceBase />
     </ExplorerErrorBoundary>
   );
 }

src/app/_components/NavBar/index.tsx

@@ -8,7 +8,6 @@ import { MODALS } from '../../../common/constants/constants';
 import { useGlobalContext } from '../../../common/context/useAppContext';
 import { useAppDispatch } from '../../../common/state/hooks';
 import { Network } from '../../../common/types/network';
-import { TokenPrice } from '../../../common/types/tokenPrice';
 import { buildUrl } from '../../../common/utils/buildUrl';
 import { capitalize } from '../../../common/utils/utils';
 import { Search } from '../../../features/search/Search';
@@ -28,7 +27,7 @@ import { NetworkLabel } from './NetworkLabel';
 import { NetworkModeBanner } from './NetworkModeBanner';
 import { NavItem } from './types';
 
-export function NavBar({ tokenPrice }: { tokenPrice: TokenPrice }) {
+export const NavBar: FC = () => {
   const { isOpen, onToggle } = useDisclosure();
   const { networks, activeNetwork } = useGlobalContext();
   const dispatch = useAppDispatch();
@@ -97,7 +96,7 @@ export function NavBar({ tokenPrice }: { tokenPrice: TokenPrice }) {
             <ColorModeButton aria-label={'Change color mode'} />
             <DesktopNav navItems={navItems} />
           </Flex>
-          <BtcStxPrice tokenPrice={tokenPrice} />
+          <BtcStxPrice />
         </Show>
         <Show below="lg">
           <IconButton
@@ -111,4 +110,4 @@ export function NavBar({ tokenPrice }: { tokenPrice: TokenPrice }) {
       </Flex>
     </Box>
   );
-}
+};

src/app/_components/PageWrapper.tsx

@@ -4,7 +4,6 @@ import { useColorModeValue } from '@chakra-ui/react';
 import React, { ReactNode } from 'react';
 
 import { AddNetworkModal } from '../../common/components/modals/AddNetwork';
-import { TokenPrice } from '../../common/types/tokenPrice';
 import { Flex } from '../../ui/Flex';
 import { Footer } from './Footer';
 import { NavBar } from './NavBar';
@@ -46,19 +45,13 @@ function WrapperWithBg({ children }: { children: ReactNode }) {
   );
 }
 
-export function PageWrapper({
-  tokenPrice,
-  children,
-}: {
-  tokenPrice: TokenPrice;
-  children: ReactNode;
-}) {
+export function PageWrapper({ children }: { children: ReactNode }) {
   return (
     <>
       <IncidentsStatusBarWithErrorBoundary />
       <WrapperWithBg>
         <Flex mx="auto" width="full" maxWidth="container.xl" flexDirection="column" p={6}>
-          <NavBar tokenPrice={tokenPrice} />
+          <NavBar />
           <Flex direction={'column'} mt={10} gap={7}>
             {children}
           </Flex>

src/app/layout.tsx

@@ -15,16 +15,14 @@ import { Analytics } from './_components/Analytics';
 import { GA } from './_components/GA';
 import { PageWrapper } from './_components/PageWrapper';
 import { Providers } from './_components/Providers';
-import { getTokenPrice } from './getTokenPriceInfo';
 import './global.css';
 
 export async function generateMetadata(): Promise<Metadata> {
   return Promise.resolve(meta);
 }
 
-export default async function RootLayout({ children }: { children: ReactNode }) {
+export default function RootLayout({ children }: { children: ReactNode }) {
   const headersList = headers();
-  const tokenPrice = await getTokenPrice();
   return (
     <html lang="en">
       <body>
@@ -36,7 +34,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
           btcAddressBaseUrls={NetworkModeBtcAddressBaseUrlMap}
         >
           <Providers headerCookies={headersList.get('cookie')}>
-            <PageWrapper tokenPrice={tokenPrice}>{children}</PageWrapper>
+            <PageWrapper>{children}</PageWrapper>
           </Providers>
         </AppContextProvider>
       </body>

src/app/transactions/MempoolFeeStats.tsx

@@ -5,7 +5,10 @@ import { MempoolFeePrioritiesAll } from '@stacks/blockchain-api-client/src/gener
 
 import { getTxTypeIcon } from '../../common/components/TxIcon';
 import { useSuspenseMempoolFee } from '../../common/queries/usMempoolFee';
-import { TokenPrice } from '../../common/types/tokenPrice';
+import {
+  useCurrentStxPrice,
+  useSuspenseCurrentStxPrice,
+} from '../../common/queries/useCurrentPrices';
 import { MICROSTACKS_IN_STACKS, capitalize, getUsdValue } from '../../common/utils/utils';
 import { Box } from '../../ui/Box';
 import { Flex, FlexProps } from '../../ui/Flex';
@@ -94,41 +97,43 @@ function MempoolFeeSection({
   );
 }
 
-export function MempoolFeeStats({ tokenPrice }: { tokenPrice: TokenPrice }) {
+export function MempoolFeeStats() {
   const mempoolFeeResponse = useSuspenseMempoolFee().data as MempoolFeePriorities;
+  const { data: stxPrice } = useCurrentStxPrice();
+  console.log(mempoolFeeResponse);
   return (
     <Wrapper>
       <MempoolFeeSection
         mempoolFeeResponse={mempoolFeeResponse}
         priority={'no_priority'}
-        stxPrice={tokenPrice.stxPrice}
+        stxPrice={stxPrice}
         borderRightWidth={['0px', '0px', '1px', '1px']}
       />
       <MempoolFeeSection
         mempoolFeeResponse={mempoolFeeResponse}
         priority={'low_priority'}
-        stxPrice={tokenPrice.stxPrice}
+        stxPrice={stxPrice}
         borderRightWidth={['0px', '0px', '0px', '1px']}
       />
       <MempoolFeeSection
         mempoolFeeResponse={mempoolFeeResponse}
         priority={'medium_priority'}
-        stxPrice={tokenPrice.stxPrice}
+        stxPrice={stxPrice}
         borderRightWidth={['0px', '0px', '1px', '1px']}
       />
       <MempoolFeeSection
         mempoolFeeResponse={mempoolFeeResponse}
         priority={'high_priority'}
-        stxPrice={tokenPrice.stxPrice}
+        stxPrice={stxPrice}
       />
     </Wrapper>
   );
 }
 
-export function MempoolFeeStatsWithErrorBoundary({ tokenPrice }: { tokenPrice: TokenPrice }) {
+export function MempoolFeeStatsWithErrorBoundary() {
   return (
     <ExplorerErrorBoundary renderContent={() => null}>
-      <MempoolFeeStats tokenPrice={tokenPrice} />
+      <MempoolFeeStats />
     </ExplorerErrorBoundary>
   );
 }

src/app/transactions/page.tsx

@@ -1,9 +1,50 @@
+'use client';
+
+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 { 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';
+import { MempoolFeeStats, MempoolFeeStatsWithErrorBoundary } from './MempoolFeeStats';
 
-import { getTokenPrice } from '../getTokenPriceInfo';
-import TransactionsPage from './TransactionPage';
+const TransactionsPage: NextPage = () => {
+  return (
+    <>
+      <Flex justifyContent={'space-between'} alignItems={'flex-end'}>
+        <PageTitle>Transactions</PageTitle>
+      </Flex>
+      <MempoolFeeStatsWithErrorBoundary />
+      <TxListTabs />
+    </>
+  );
+};
 
-export default async function () {
-  const tokenPrice = await getTokenPrice();
-  return <TransactionsPage tokenPrice={tokenPrice} />;
-}
+export default TransactionsPage;