tidy up

components/TokenList.tsx

@@ -237,7 +237,7 @@ const TokenList = () => {
                 </Th>
                 <Th>
                   <div className="flex justify-end">
-                    <Tooltip content="The interest rates for depositing (green/left) and borrowing (red/right)">
+                    <Tooltip content={t('tooltip-interest-rates')}>
                       <SortableColumnHeader
                         sortKey="depositRate"
                         sort={() => requestSort('depositRate')}
@@ -245,7 +245,6 @@ const TokenList = () => {
                         title={t('rates')}
                         titleClass="tooltip-underline"
                       />
-                      {/* <span className="tooltip-underline">{t('rates')}</span> */}
                     </Tooltip>
                   </div>
                 </Th>

components/explore/ExplorePage.tsx

@@ -9,6 +9,7 @@ import relativeTime from 'dayjs/plugin/relativeTime'
 import Spot from './Spot'
 import mangoStore from '@store/mangoStore'
 import PerpStatsPage from '@components/stats/perps/PerpStatsPage'
+import useBanks from 'hooks/useBanks'
 dayjs.extend(relativeTime)
 
 const ExplorePage = () => {
@@ -19,17 +20,17 @@ const ExplorePage = () => {
   const perpStats = mangoStore((s) => s.perpStats.data)
   const initialStatsLoad = mangoStore((s) => s.tokenStats.initialLoad)
   const [activeTab, setActiveTab] = useState('spot')
-  const { perpMarketsWithData, serumMarketsWithData } =
-    useListedMarketsWithMarketData()
+  const { perpMarketsWithData } = useListedMarketsWithMarketData()
+  const { banks } = useBanks()
 
   const tabsWithCount: [string, number][] = useMemo(() => {
     const tabs: [string, number][] = [
-      ['spot', serumMarketsWithData.length],
+      ['spot', banks.length],
       ['perp', perpMarketsWithData.length],
       //   ['accounts', 0],
     ]
     return tabs
-  }, [perpMarketsWithData, serumMarketsWithData])
+  }, [banks, perpMarketsWithData])
 
   useEffect(() => {
     if (!perpStats || !perpStats.length) {

components/explore/Spot.tsx

@@ -27,6 +27,8 @@ import SpotCards from './SpotCards'
 import Input from '@components/forms/Input'
 import EmptyState from '@components/nftMarket/EmptyState'
 import { Bank } from '@blockworks-foundation/mango-v4'
+import Link from 'next/link'
+import useBanks from 'hooks/useBanks'
 dayjs.extend(relativeTime)
 
 export type BankWithMarketData = {
@@ -84,17 +86,15 @@ const Spot = () => {
   const { t } = useTranslation(['common', 'explore', 'trade'])
   const router = useRouter()
   const { group } = useMangoGroup()
+  const { banks } = useBanks()
   const { serumMarketsWithData } = useListedMarketsWithMarketData()
   const [sortByKey, setSortByKey] = useState<AllowedKeys>('quote_volume_24h')
   const [search, setSearch] = useState('')
-  const [showTableView, setShowTableView] = useState(false)
+  const [showTableView, setShowTableView] = useState(true)
 
   const banksWithMarketData = useMemo(() => {
-    if (!group || !serumMarketsWithData.length) return []
+    if (!banks.length || !group || !serumMarketsWithData.length) return []
     const banksWithMarketData = []
-    const banks = Array.from(group.banksMapByMint)
-      .map(([_mintAddress, banks]) => banks)
-      .map((b) => b[0])
     const usdcQuoteMarkets = serumMarketsWithData.filter(
       (market) => market.quoteTokenIndex === 0,
     )
@@ -109,7 +109,7 @@ const Spot = () => {
       }
     }
     return banksWithMarketData
-  }, [group, serumMarketsWithData])
+  }, [banks, group, serumMarketsWithData])
 
   const newlyListedMintInfo = useMemo(() => {
     if (!group) return []
@@ -176,9 +176,18 @@ const Spot = () => {
     <>
       <div className="grid grid-cols-12 gap-4 px-4 pb-8 md:px-6 2xl:px-12">
         <div className="col-span-12 rounded-lg border border-th-bkg-3 p-6 lg:col-span-4">
-          <div className="mb-4 flex items-center space-x-2">
-            <BoltIcon className="h-5 w-5" />
-            <h2 className="text-base">{t('explore:recently-listed')}</h2>
+          <div className="mb-4 flex items-center justify-between">
+            <div className="flex items-center space-x-2">
+              <BoltIcon className="h-5 w-5" />
+              <h2 className="text-base">{t('explore:recently-listed')}</h2>
+            </div>
+            <a className="font-bold">
+              <Link href="/governance/list" shallow>
+                <span className="default-transition text-th-active md:hover:text-th-active-dark">
+                  {t('governance:list-token')}
+                </span>
+              </Link>
+            </a>
           </div>
           <div className="border-t border-th-bkg-3">
             {newlyListed.map((listing) => {
@@ -313,20 +322,20 @@ const Spot = () => {
               <div className="flex">
                 <button
                   className={`flex w-10 items-center justify-center rounded-l-md border border-th-bkg-3 focus:outline-none md:hover:bg-th-bkg-3 ${
-                    !showTableView ? 'bg-th-bkg-3 text-th-active' : ''
-                  }`}
-                  onClick={() => setShowTableView(!showTableView)}
-                >
-                  <Squares2X2Icon className="h-5 w-5" />
-                </button>
-                <button
-                  className={`flex w-10 items-center justify-center rounded-r-md border border-th-bkg-3 focus:outline-none md:hover:bg-th-bkg-3 ${
                     showTableView ? 'bg-th-bkg-3 text-th-active' : ''
                   }`}
                   onClick={() => setShowTableView(!showTableView)}
                 >
                   <TableCellsIcon className="h-5 w-5" />
                 </button>
+                <button
+                  className={`flex w-10 items-center justify-center rounded-r-md border border-th-bkg-3 focus:outline-none md:hover:bg-th-bkg-3 ${
+                    !showTableView ? 'bg-th-bkg-3 text-th-active' : ''
+                  }`}
+                  onClick={() => setShowTableView(!showTableView)}
+                >
+                  <Squares2X2Icon className="h-5 w-5" />
+                </button>
               </div>
             </div>
           </div>

components/explore/SpotCards.tsx

@@ -10,10 +10,15 @@ import { useRouter } from 'next/router'
 import { useTranslation } from 'react-i18next'
 import { numberCompacter } from 'utils/numbers'
 import { BankWithMarketData } from './Spot'
+import Tooltip from '@components/shared/Tooltip'
+import SimpleAreaChart from '@components/shared/SimpleAreaChart'
+import { COLORS } from 'styles/colors'
+import useThemeWrapper from 'hooks/useThemeWrapper'
 
 const SpotCards = ({ tokens }: { tokens: BankWithMarketData[] }) => {
   const { t } = useTranslation(['common', 'explore', 'trade'])
   const { group } = useMangoGroup()
+  const { theme } = useThemeWrapper()
   const router = useRouter()
   return (
     <div className="grid grid-cols-12 gap-4 px-4 py-6 md:px-6 2xl:px-12">
@@ -36,26 +41,44 @@ const SpotCards = ({ tokens }: { tokens: BankWithMarketData[] }) => {
             className="col-span-12 rounded-lg border border-th-bkg-3 p-6 md:col-span-6 xl:col-span-4 2xl:col-span-3"
             key={bank.tokenIndex}
           >
-            <div className="mb-4 flex items-center space-x-3 border-b border-th-bkg-3 pb-4">
-              <TokenLogo bank={bank} size={32} />
-              <div>
-                <h3 className="mb-1 text-base leading-none">{bank.name}</h3>
-                <div className="flex items-center space-x-3">
-                  <span className="font-mono">
-                    <FormatNumericValue value={bank.uiPrice} isUsd />
-                  </span>
-                  {token.market ? (
-                    <Change
-                      change={token.market?.rollingChange || 0}
-                      suffix="%"
-                    />
-                  ) : null}
+            <div className="mb-4 flex items-center justify-between border-b border-th-bkg-3 pb-4">
+              <div className="flex items-center space-x-3">
+                <TokenLogo bank={bank} size={32} />
+                <div>
+                  <h3 className="mb-1 text-base leading-none">{bank.name}</h3>
+                  <div className="flex items-center space-x-3">
+                    <span className="font-mono">
+                      <FormatNumericValue value={bank.uiPrice} isUsd />
+                    </span>
+                    {token.market ? (
+                      <Change
+                        change={token.market?.rollingChange || 0}
+                        suffix="%"
+                      />
+                    ) : null}
+                  </div>
                 </div>
               </div>
+              {token.market?.marketData?.price_history &&
+              token.market?.marketData?.price_history.length ? (
+                <div className="h-10 w-20">
+                  <SimpleAreaChart
+                    color={
+                      token.market?.rollingChange || 0 >= 0
+                        ? COLORS.UP[theme]
+                        : COLORS.DOWN[theme]
+                    }
+                    data={token.market.marketData.price_history}
+                    name={bank.name}
+                    xKey="time"
+                    yKey="price"
+                  />
+                </div>
+              ) : null}
             </div>
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <p>{t('trade:24h-volume')}</p>
+                <p className="mb-1">{t('trade:24h-volume')}</p>
                 <p className="font-mono text-th-fgd-2">
                   {!token.market ? (
                     '–'
@@ -74,17 +97,34 @@ const SpotCards = ({ tokens }: { tokens: BankWithMarketData[] }) => {
                 </p>
               </div>
               <div>
-                <p>{t('available')}</p>
+                <Tooltip
+                  content={t('tooltip-available', { token: bank.name })}
+                  placement="top-start"
+                >
+                  <p className="tooltip-underline mb-1">{t('available')}</p>
+                </Tooltip>
                 <span className="font-mono text-th-fgd-2">
                   <FormatNumericValue value={available} />
                 </span>
               </div>
               <div>
-                <p>{t('explore:collateral-weight')}</p>
+                <Tooltip
+                  content={t('tooltip-collateral-weight')}
+                  placement="top-start"
+                >
+                  <p className="tooltip-underline mb-1">
+                    {t('explore:collateral-weight')}
+                  </p>
+                </Tooltip>
                 <span className="font-mono text-th-fgd-2">{assetWeight}x</span>
               </div>
               <div>
-                <p>{t('rates')}</p>
+                <Tooltip
+                  content={t('tooltip-interest-rates')}
+                  placement="top-start"
+                >
+                  <p className="tooltip-underline mb-1">{t('rates')}</p>
+                </Tooltip>
                 <div className="flex space-x-1.5 font-mono">
                   <p className="text-th-up">
                     <FormatNumericValue value={depositRate} decimals={2} />%

components/explore/SpotTable.tsx

@@ -29,6 +29,7 @@ import Decimal from 'decimal.js'
 import BankAmountWithValue from '@components/shared/BankAmountWithValue'
 import { BankWithMarketData } from './Spot'
 import { SerumMarketWithMarketData } from 'hooks/useListedMarketsWithMarketData'
+import Tooltip from '@components/shared/Tooltip'
 
 type TableData = {
   assetWeight: string
@@ -176,32 +177,41 @@ const SpotTable = ({ tokens }: { tokens: BankWithMarketData[] }) => {
               </Th>
               <Th>
                 <div className="flex justify-end">
-                  <SortableColumnHeader
-                    sortKey="available"
-                    sort={() => requestSort('available')}
-                    sortConfig={sortConfig}
-                    title={t('available')}
-                  />
+                  <Tooltip content={t('tooltip-available', { token: '' })}>
+                    <SortableColumnHeader
+                      sortKey="available"
+                      sort={() => requestSort('available')}
+                      sortConfig={sortConfig}
+                      title={t('available')}
+                      titleClass="tooltip-underline"
+                    />
+                  </Tooltip>
                 </div>
               </Th>
               <Th>
                 <div className="flex justify-end">
-                  <SortableColumnHeader
-                    sortKey="assetWeight"
-                    sort={() => requestSort('assetWeight')}
-                    sortConfig={sortConfig}
-                    title={t('explore:collateral-weight')}
-                  />
+                  <Tooltip content={t('tooltip-collateral-weight')}>
+                    <SortableColumnHeader
+                      sortKey="assetWeight"
+                      sort={() => requestSort('assetWeight')}
+                      sortConfig={sortConfig}
+                      title={t('explore:collateral-weight')}
+                      titleClass="tooltip-underline"
+                    />
+                  </Tooltip>
                 </div>
               </Th>
               <Th>
                 <div className="flex justify-end">
-                  <SortableColumnHeader
-                    sortKey="depositRate"
-                    sort={() => requestSort('depositRate')}
-                    sortConfig={sortConfig}
-                    title={t('rates')}
-                  />
+                  <Tooltip content={t('tooltip-interest-rates')}>
+                    <SortableColumnHeader
+                      sortKey="depositRate"
+                      sort={() => requestSort('depositRate')}
+                      sortConfig={sortConfig}
+                      title={t('rates')}
+                      titleClass="tooltip-underline"
+                    />
+                  </Tooltip>
                 </div>
               </Th>
               <Th />

components/stats/tokens/TokenOverviewTable.tsx

@@ -132,7 +132,7 @@ const TokenOverviewTable = () => {
                 </Th>
                 <Th className="text-right">
                   <div className="flex justify-end">
-                    <Tooltip content="The amount available to borrow">
+                    <Tooltip content={t('tooltip-available', { token: '' })}>
                       <SortableColumnHeader
                         sortKey="availableValue"
                         sort={() => requestSort('availableValue')}

hooks/useBanks.ts

@@ -0,0 +1,15 @@
+import { useMemo } from 'react'
+import useMangoGroup from './useMangoGroup'
+
+export default function useBanks() {
+  const { group } = useMangoGroup()
+
+  const banks = useMemo(() => {
+    if (!group) return []
+    return Array.from(group.banksMapByMint)
+      .map(([_mintAddress, banks]) => banks)
+      .map((b) => b[0])
+  }, [group])
+
+  return { banks }
+}

hooks/useStablePrice.ts

@@ -2,17 +2,12 @@ import { I80F48, PerpMarket } from '@blockworks-foundation/mango-v4'
 import { useMemo } from 'react'
 import useMangoGroup from './useMangoGroup'
 import useSelectedMarket from './useSelectedMarket'
+import useBanks from './useBanks'
 
 const useStablePrice = () => {
   const { selectedMarket } = useSelectedMarket()
   const { group } = useMangoGroup()
-
-  const banks = useMemo(() => {
-    if (!group) return []
-    return Array.from(group.banksMapByMint)
-      .map(([_mintAddress, banks]) => banks)
-      .map((b) => b[0])
-  }, [group])
+  const { banks } = useBanks()
 
   const stablePrice = useMemo(() => {
     if (!group || !selectedMarket || !banks.length) return 0

pages/explore.tsx

@@ -9,6 +9,7 @@ export async function getStaticProps({ locale }: { locale: string }) {
         'activity',
         'common',
         'explore',
+        'governance',
         'notifications',
         'onboarding',
         'profile',

public/locales/en/common.json

@@ -166,9 +166,12 @@
   "token": "Token",
   "tokens": "Tokens",
   "token-collateral-multiplier": "{{token}} Collateral Multiplier",
+  "tooltip-available": "The amount of {{token}} available to borrow",
   "tooltip-borrow-fee": "The fee for opening a new borrow.",
   "tooltip-borrow-rate": "The variable interest rate you'll pay on your borrowed balance",
   "tooltip-collateral-value": "The USD amount you can trade or borrow against",
+  "tooltip-collateral-weight": "The multiplier applied to the notional value of {{token}} collateral",
+  "tooltip-interest-rates": "The interest rates for depositing (green/left) and borrowing (red/right)",
   "total": "Total",
   "total-borrows": "Total Borrows",
   "total-borrow-value": "Total Borrow Value",

public/locales/es/common.json

@@ -166,9 +166,12 @@
   "token": "Token",
   "tokens": "Tokens",
   "token-collateral-multiplier": "{{token}} Collateral Multiplier",
+  "tooltip-available": "The amount of {{token}} available to borrow",
   "tooltip-borrow-fee": "The fee for opening a new borrow.",
   "tooltip-borrow-rate": "The variable interest rate you'll pay on your borrowed balance",
   "tooltip-collateral-value": "The USD amount you can trade or borrow against",
+  "tooltip-collateral-weight": "The multiplier applied to the notional value of {{token}} collateral",
+  "tooltip-interest-rates": "The interest rates for depositing (green/left) and borrowing (red/right)",
   "total": "Total",
   "total-borrows": "Total Borrows",
   "total-borrow-value": "Total Borrow Value",

public/locales/ru/common.json

@@ -166,9 +166,12 @@
   "token": "Token",
   "tokens": "Tokens",
   "token-collateral-multiplier": "{{token}} Collateral Multiplier",
+  "tooltip-available": "The amount of {{token}} available to borrow",
   "tooltip-borrow-fee": "The fee for opening a new borrow.",
   "tooltip-borrow-rate": "The variable interest rate you'll pay on your borrowed balance",
   "tooltip-collateral-value": "The USD amount you can trade or borrow against",
+  "tooltip-collateral-weight": "The multiplier applied to the notional value of {{token}} collateral",
+  "tooltip-interest-rates": "The interest rates for depositing (green/left) and borrowing (red/right)",
   "total": "Total",
   "total-borrows": "Total Borrows",
   "total-borrow-value": "Total Borrow Value",

public/locales/zh/common.json

@@ -165,9 +165,12 @@
   "token": "币种",
   "token-collateral-multiplier": "{{token}}质押品乘数",
   "tokens": "币种",
+  "tooltip-available": "The amount of {{token}} available to borrow",
   "tooltip-borrow-fee": "借贷费用。",
   "tooltip-borrow-rate": "您将为借入余额支付的可变利率",
   "tooltip-collateral-value": "您可以交易或借入的美元金额",
+  "tooltip-collateral-weight": "The multiplier applied to the notional value of {{token}} collateral",
+  "tooltip-interest-rates": "The interest rates for depositing (green/left) and borrowing (red/right)",
   "total": "总计",
   "total-borrow-value": "总借贷价值",
   "total-borrows": "总借贷",

public/locales/zh_tw/common.json

@@ -165,9 +165,12 @@
   "token": "幣種",
   "token-collateral-multiplier": "{{token}}質押品乘數",
   "tokens": "幣種",
+  "tooltip-available": "The amount of {{token}} available to borrow",
   "tooltip-borrow-fee": "借貸費用。",
   "tooltip-borrow-rate": "您將為借入餘額支付的可變利率",
   "tooltip-collateral-value": "您可以交易或借入的美元金額",
+  "tooltip-collateral-weight": "The multiplier applied to the notional value of {{token}} collateral",
+  "tooltip-interest-rates": "The interest rates for depositing (green/left) and borrowing (red/right)",
   "total": "總計",
   "total-borrow-value": "總借貸價值",
   "total-borrows": "總借貸",