From ff6c34795963b4005bfcef8439349f259c02c655 Mon Sep 17 00:00:00 2001 From: He1DAr <97111756+He1DAr@users.noreply.github.com> Date: Tue, 9 Jan 2024 12:42:39 -0500 Subject: [PATCH] Revert "feat: fetch and cache token price on server" --- src/app/_components/NavBar/BtcStxPrice.tsx | 42 +++++++++++++---- src/app/_components/NavBar/index.tsx | 7 ++- src/app/_components/PageWrapper.tsx | 11 +---- src/app/getTokenPriceInfo.ts | 46 ------------------- src/app/layout.tsx | 6 +-- src/app/transactions/MempoolFeeStats.tsx | 21 +++++---- src/app/transactions/TransactionPage.tsx | 21 --------- src/app/transactions/page.tsx | 53 +++++++++++++++++++--- src/common/types/tokenPrice.ts | 4 -- 9 files changed, 101 insertions(+), 110 deletions(-) delete mode 100644 src/app/getTokenPriceInfo.ts delete mode 100644 src/app/transactions/TransactionPage.tsx delete mode 100644 src/common/types/tokenPrice.ts diff --git a/src/app/_components/NavBar/BtcStxPrice.tsx b/src/app/_components/NavBar/BtcStxPrice.tsx index f5c4957a6..91956c845 100644 --- a/src/app/_components/NavBar/BtcStxPrice.tsx +++ b/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 ( } minWidth={'92px'}> - {!formattedBtcPrice ? 'N/A' : formattedBtcPrice} + {isBtcPriceError || !formattedBtcPrice ? ( + 'N/A' + ) : isBtcPriceFetching ? ( + + ) : ( + formattedBtcPrice + )} - {!formattedStxPrice ? 'N/A' : formattedStxPrice} + {isStxPriceError || !formattedStxPrice ? ( + 'N/A' + ) : isStxPriceFetching ? ( + + ) : ( + formattedStxPrice + )} ); } -export function BtcStxPrice({ tokenPrice }: { tokenPrice: TokenPrice }) { +export function BtcStxPrice() { return ( null}> - + ); } diff --git a/src/app/_components/NavBar/index.tsx b/src/app/_components/NavBar/index.tsx index cf34d9d9a..7211a283b 100644 --- a/src/app/_components/NavBar/index.tsx +++ b/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 }) { - + ); -} +}; diff --git a/src/app/_components/PageWrapper.tsx b/src/app/_components/PageWrapper.tsx index 5dfd3ffde..ff50d9c51 100644 --- a/src/app/_components/PageWrapper.tsx +++ b/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 ( <> - + {children} diff --git a/src/app/getTokenPriceInfo.ts b/src/app/getTokenPriceInfo.ts deleted file mode 100644 index ab0a10c78..000000000 --- a/src/app/getTokenPriceInfo.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { TokenPrice } from '../common/types/tokenPrice'; -import { getCacheClient } from '../common/utils/cache-client'; - -const TOKEN_PRICE_CACHE_KEY = 'token-price'; - -export const getCurrentBtcPrice = async () => - fetch('https://api.coingecko.com/api/v3/exchange_rates') - .then(res => res.json()) - .then(data => data?.rates?.usd?.value || 0); - -export const getCurrentStxPrice = async () => - fetch('https://api.coingecko.com/api/v3/simple/price?ids=blockstack,bitcoin&vs_currencies=usd') - .then(res => res.json()) - .then(data => data?.blockstack?.usd || 0); - -async function getCachedTokenPrice() { - try { - const cachedTokenPrice = await getCacheClient().get(TOKEN_PRICE_CACHE_KEY); - if (cachedTokenPrice) { - return JSON.parse(cachedTokenPrice); - } - } catch (error) { - console.error(error); - } -} - -export async function getTokenPrice(): Promise { - const cachedTokenInfo = await getCachedTokenPrice(); - if (cachedTokenInfo) { - console.log('[debug] token price - cache hit'); - return cachedTokenInfo; - } - - console.log('[debug] token price - cache miss'); - - const btcPrice = await getCurrentBtcPrice(); - const stxPrice = await getCurrentStxPrice(); - - const tokenPrice = { - btcPrice, - stxPrice, - }; - - await getCacheClient().set(TOKEN_PRICE_CACHE_KEY, JSON.stringify(tokenPrice), 'EX', 60 * 3); // expires in 3 minutes - return tokenPrice; -} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 577b0da56..ae1cd7387 100644 --- a/src/app/layout.tsx +++ b/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 { 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 ( @@ -36,7 +34,7 @@ export default async function RootLayout({ children }: { children: ReactNode }) btcAddressBaseUrls={NetworkModeBtcAddressBaseUrlMap} > - {children} + {children} diff --git a/src/app/transactions/MempoolFeeStats.tsx b/src/app/transactions/MempoolFeeStats.tsx index 74fb1b423..757e5af51 100644 --- a/src/app/transactions/MempoolFeeStats.tsx +++ b/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 ( ); } -export function MempoolFeeStatsWithErrorBoundary({ tokenPrice }: { tokenPrice: TokenPrice }) { +export function MempoolFeeStatsWithErrorBoundary() { return ( null}> - + ); } diff --git a/src/app/transactions/TransactionPage.tsx b/src/app/transactions/TransactionPage.tsx deleted file mode 100644 index f38b769b4..000000000 --- a/src/app/transactions/TransactionPage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -'use client'; - -import React from 'react'; - -import { TokenPrice } from '../../common/types/tokenPrice'; -import { TxListTabs } from '../../features/txs-list/tabs/TxListTabs'; -import { Flex } from '../../ui/Flex'; -import { PageTitle } from '../_components/PageTitle'; -import { MempoolFeeStatsWithErrorBoundary } from './MempoolFeeStats'; - -export default function ({ tokenPrice }: { tokenPrice: TokenPrice }) { - return ( - <> - - Transactions - - - - - ); -} diff --git a/src/app/transactions/page.tsx b/src/app/transactions/page.tsx index 3cb253b6f..799c6f0ed 100644 --- a/src/app/transactions/page.tsx +++ b/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 ( + <> + + Transactions + + + + + ); +}; -export default async function () { - const tokenPrice = await getTokenPrice(); - return ; -} +export default TransactionsPage; diff --git a/src/common/types/tokenPrice.ts b/src/common/types/tokenPrice.ts deleted file mode 100644 index 0b694108d..000000000 --- a/src/common/types/tokenPrice.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface TokenPrice { - btcPrice: number; - stxPrice: number; -}