use url param for token page

components/stats/StatsPage.tsx

@@ -1,4 +1,5 @@
 import TabButtons from '@components/shared/TabButtons'
+import TokenPage from '@components/token/TokenPage'
 import mangoStore from '@store/mangoStore'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import useMangoGroup from 'hooks/useMangoGroup'
@@ -28,6 +29,7 @@ const StatsPage = () => {
   const fullWidthTabs = width ? width < breakpoints.lg : false
   const router = useRouter()
   const { market } = router.query
+  const { token } = router.query
 
   useEffect(() => {
     if (group && (!perpStats || !perpStats.length)) {
@@ -40,6 +42,8 @@ const StatsPage = () => {
   }, [])
   return market ? (
     <PerpStatsPage />
+  ) : token ? (
+    <TokenPage />
   ) : (
     <div className="pb-20 md:pb-16">
       <div className="border-b border-th-bkg-3">

components/stats/TokenStats.tsx

@@ -13,7 +13,7 @@ import { LinkButton } from '../shared/Button'
 import ContentBox from '../shared/ContentBox'
 import Tooltip from '@components/shared/Tooltip'
 import { Bank, toUiDecimals } from '@blockworks-foundation/mango-v4'
-import { useRouter } from 'next/router'
+import { NextRouter, useRouter } from 'next/router'
 import useJupiterMints from 'hooks/useJupiterMints'
 import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
 import useMangoGroup from 'hooks/useMangoGroup'
@@ -40,10 +40,15 @@ const TokenStats = () => {
     }
   }, [group])
 
-  const goToTokenPage = (bank: Bank) => {
-    router.push(`/token/${bank.name.split(' ')[0].toUpperCase()}`, undefined, {
-      shallow: true,
-    })
+  // const goToTokenPage = (bank: Bank) => {
+  //   router.push(`/token/${bank.name.split(' ')[0].toUpperCase()}`, undefined, {
+  //     shallow: true,
+  //   })
+  // }
+
+  const goToTokenPage = (token: string, router: NextRouter) => {
+    const query = { ...router.query, ['token']: token }
+    router.push({ pathname: router.pathname, query })
   }
 
   return group ? (
@@ -128,7 +133,12 @@ const TokenStats = () => {
                   <TrBody
                     className="default-transition md:hover:cursor-pointer md:hover:bg-th-bkg-2"
                     key={bank.name}
-                    onClick={() => goToTokenPage(bank)}
+                    onClick={() =>
+                      goToTokenPage(
+                        bank.name.split(' ')[0].toUpperCase(),
+                        router
+                      )
+                    }
                   >
                     <Td>
                       <div className="flex items-center">
@@ -396,7 +406,12 @@ const TokenStats = () => {
                           <div className="col-span-1">
                             <LinkButton
                               className="flex items-center"
-                              onClick={() => goToTokenPage(bank)}
+                              onClick={() =>
+                                goToTokenPage(
+                                  bank.name.split(' ')[0].toUpperCase(),
+                                  router
+                                )
+                              }
                             >
                               {t('token:token-details')}
                               <ChevronRightIcon className="ml-2 h-5 w-5" />

components/token/ChartTabs.tsx

@@ -34,7 +34,11 @@ const ChartTabs = ({ token }: { token: string }) => {
   const statsHistory = useMemo(() => {
     if (!tokenStats?.length) return []
     return tokenStats.reduce((a: TokenStatsItem[], c: TokenStatsItem) => {
-      if (c.symbol === token) {
+      if (
+        c.symbol === token ||
+        // ETH needs to be renamed ETH (Portal) in tokenStats db
+        (c.symbol === 'ETH' && token === 'ETH (Portal)')
+      ) {
         const copy = { ...c }
         copy.deposit_apr = copy.deposit_apr * 100
         copy.borrow_apr = copy.borrow_apr * 100

components/token/TopTokenAccounts.tsx

@@ -197,7 +197,8 @@ const LeaderboardRow = ({
       </div>
       <div className="flex items-center pl-4">
         <p className="mr-2 text-right font-mono text-th-fgd-2 md:text-base">
-          <FormatNumericValue value={value} />
+          {/* remove isUsd when api returns token amount rather than value */}
+          <FormatNumericValue value={value} isUsd />
         </p>
         <ChevronRightIcon className="h-5 w-5 text-th-fgd-3" />
       </div>

pages/token/[token].tsx

@@ -1,43 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import TokenPage from '@components/token/TokenPage'
-import { CLUSTER } from '@store/mangoStore'
-import type { NextPage } from 'next'
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
-
-export async function getStaticProps({ locale }: { locale: string }) {
-  return {
-    props: {
-      ...(await serverSideTranslations(locale, [
-        'common',
-        'profile',
-        'search',
-        'settings',
-        'token',
-      ])),
-    },
-  }
-}
-
-export const getStaticPaths = async () => {
-  const url =
-    CLUSTER === 'devnet'
-      ? 'https://api.jup.ag/api/tokens/devnet'
-      : 'https://cache.jup.ag/tokens'
-  const response = await fetch(url)
-  const data = await response.json()
-  const paths = data.map((t: any) => ({
-    params: { token: t.symbol.toUpperCase() },
-  }))
-
-  return { paths, fallback: false }
-}
-
-const Token: NextPage = () => {
-  return (
-    <div className="pb-20 md:pb-16">
-      <TokenPage />
-    </div>
-  )
-}
-
-export default Token