add token stats charts

components/account/AccountChart.tsx

@@ -55,6 +55,7 @@ const AccountChart = ({
       daysToShow={daysToShow}
       hideChart={hideChart}
       loading={loading}
+      prefix="$"
       setDaysToShow={handleDaysToShow}
       tickFormat={(x) => `$${x.toFixed(2)}`}
       title={t(chartToShow)}

components/account/AccountPage.tsx

@@ -260,7 +260,7 @@ const AccountPage = () => {
               )}
             </div>
             <div className="flex items-center space-x-1.5">
-              <Change change={accountValueChange} isCurrency />
+              <Change change={accountValueChange} prefix="$" />
               <p className="text-th-fgd-4">{t('today')}</p>
             </div>
           </div>
@@ -451,7 +451,7 @@ const AccountPage = () => {
               {formatFixedDecimals(accountPnl, true)}
             </p>
             <div className="flex space-x-1">
-              <Change change={oneDayPnlChange} isCurrency size="small" />
+              <Change change={oneDayPnlChange} prefix="$" size="small" />
               <p className="text-xs text-th-fgd-4">{t('today')}</p>
             </div>
           </div>
@@ -482,7 +482,7 @@ const AccountPage = () => {
               {formatFixedDecimals(interestTotalValue, true)}
             </p>
             <div className="flex space-x-1">
-              <Change change={oneDayInterestChange} isCurrency size="small" />
+              <Change change={oneDayInterestChange} prefix="$" size="small" />
               <p className="text-xs text-th-fgd-4">{t('today')}</p>
             </div>
           </div>

components/shared/Change.tsx

@@ -4,12 +4,14 @@ import { DownTriangle, UpTriangle } from './DirectionTriangles'
 
 const Change = ({
   change,
-  isCurrency,
+  prefix,
   size,
+  suffix,
 }: {
   change: number | typeof NaN
-  isCurrency?: boolean
+  prefix?: string
   size?: 'small'
+  suffix?: string
 }) => {
   return (
     <div className="flex items-center space-x-1.5">
@@ -39,11 +41,11 @@ const Change = ({
             : 'text-th-fgd-4'
         }`}
       >
-        {isCurrency ? '$' : ''}
+        {prefix ? prefix : ''}
         {isNaN(change)
           ? '0.00'
           : formatFixedDecimals(Math.abs(change), false, true)}
-        {!isCurrency ? '%' : ''}
+        {suffix ? suffix : ''}
       </p>
     </div>
   )

components/shared/DetailedAreaChart.tsx

@@ -25,17 +25,22 @@ import useLocalStorageState from 'hooks/useLocalStorageState'
 import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
 import { formatFixedDecimals } from 'utils/numbers'
 import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettings'
+import { AxisDomain } from 'recharts/types/util/types'
 
 dayjs.extend(relativeTime)
 
 interface DetailedAreaChartProps {
   data: any[]
   daysToShow?: string
+  domain?: AxisDomain
   hideChange?: boolean
   hideChart?: () => void
   loading?: boolean
+  prefix?: string
   setDaysToShow?: (x: string) => void
-  tickFormat?: (x: any) => string
+  small?: boolean
+  suffix?: string
+  tickFormat?: (x: number) => string
   title?: string
   xKey: string
   yKey: string
@@ -52,10 +57,14 @@ export const formatDateAxis = (date: string, days: number) => {
 const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
   data,
   daysToShow = '1',
+  domain,
   hideChange,
   hideChart,
   loading,
+  prefix = '',
   setDaysToShow,
+  small,
+  suffix = '',
   tickFormat,
   title,
   xKey,
@@ -81,7 +90,6 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
   const calculateChartChange = () => {
     if (data.length) {
       if (mouseData) {
-        console.log(mouseData)
         const index = data.findIndex((d: any) => d[xKey] === mouseData[xKey])
         const change = index >= 0 ? data[index][yKey] - data[0][yKey] : 0
         return isNaN(change) ? 0 : change
@@ -112,66 +120,100 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
                   </IconButton>
                 ) : null}
                 <div>
-                  <p className="mb-0.5 text-base text-th-fgd-3">{title}</p>
+                  <p
+                    className={`${
+                      small ? 'text-sm' : 'mb-0.5 text-base'
+                    } text-th-fgd-3`}
+                  >
+                    {title}
+                  </p>
                   {mouseData ? (
                     <div>
-                      <div className="mb-1 flex items-end text-4xl font-bold text-th-fgd-1">
+                      <div
+                        className={`flex ${
+                          small
+                            ? 'h-8 items-center text-2xl'
+                            : 'mb-1 items-end text-4xl'
+                        } font-bold text-th-fgd-1`}
+                      >
                         {animationSettings['number-scroll'] ? (
                           <FlipNumbers
-                            height={40}
+                            height={24}
-                            width={26}
+                            width={15}
                             play
-                            numbers={formatFixedDecimals(mouseData[yKey], true)}
+                            numbers={
+                              prefix +
+                              formatFixedDecimals(mouseData[yKey]) +
+                              suffix
+                            }
                           />
                         ) : (
                           <span>
-                            {formatFixedDecimals(mouseData[yKey], true)}
+                            {prefix +
+                              formatFixedDecimals(mouseData[yKey]) +
+                              suffix}
                           </span>
                         )}
                         {!hideChange ? (
                           <span className="ml-3">
                             <Change
                               change={calculateChartChange()}
-                              isCurrency
+                              prefix={prefix}
+                              suffix={suffix}
                             />
                           </span>
                         ) : null}
                       </div>
-                      <p className="text-sm text-th-fgd-4">
+                      <p
+                        className={`${
+                          small ? 'text-xs' : 'text-sm'
+                        } text-th-fgd-4`}
+                      >
                         {dayjs(mouseData[xKey]).format('DD MMM YY, h:mma')}
                       </p>
                     </div>
                   ) : (
                     <div>
-                      <div className="mb-1 flex items-end text-4xl font-bold text-th-fgd-1">
+                      <div
+                        className={`flex ${
+                          small
+                            ? 'h-8 items-center text-2xl'
+                            : 'mb-1 items-end text-4xl'
+                        } font-bold text-th-fgd-1`}
+                      >
                         {animationSettings['number-scroll'] ? (
                           <FlipNumbers
-                            height={40}
+                            height={24}
-                            width={26}
+                            width={15}
                             play
-                            numbers={formatFixedDecimals(
+                            numbers={
-                              data[data.length - 1][yKey],
+                              prefix +
-                              true
+                              formatFixedDecimals(data[data.length - 1][yKey]) +
-                            )}
+                              suffix
+                            }
                           />
                         ) : (
                           <span>
-                            {formatFixedDecimals(
+                            {prefix +
-                              data[data.length - 1][yKey],
+                              formatFixedDecimals(data[data.length - 1][yKey]) +
-                              true
+                              suffix}
-                            )}
                           </span>
                         )}
                         {!hideChange ? (
                           <span className="ml-3">
                             <Change
                               change={calculateChartChange()}
-                              isCurrency
+                              prefix={prefix}
+                              suffix={suffix}
                             />
                           </span>
                         ) : null}
                       </div>
-                      <p className="text-sm text-th-fgd-4">
+                      <p
+                        className={`${
+                          small ? 'text-xs' : 'text-sm'
+                        } text-th-fgd-4`}
+                      >
                         {dayjs(data[data.length - 1][xKey]).format(
                           'DD MMM YY, h:mma'
                         )}
@@ -248,6 +290,7 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
                     <XAxis
                       axisLine={false}
                       dataKey={xKey}
+                      minTickGap={20}
                       padding={{ left: 20, right: 20 }}
                       tick={{
                         fill: 'var(--fgd-4)',
@@ -261,8 +304,9 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
                     <YAxis
                       axisLine={false}
                       dataKey={yKey}
+                      minTickGap={20}
                       type="number"
-                      domain={['dataMin', 'dataMax']}
+                      domain={domain ? domain : ['dataMin', 'dataMax']}
                       padding={{ top: 20, bottom: 20 }}
                       tick={{
                         fill: 'var(--fgd-4)',

components/shared/TabButtons.tsx

@@ -18,7 +18,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
   rounded = false,
   fillWidth = false,
 }) => {
-  const { t } = useTranslation(['common', 'swap', 'trade'])
+  const { t } = useTranslation(['common', 'swap', 'token', 'trade'])
 
   return (
     <div

components/stats/SpotMarketsTable.tsx

@@ -99,7 +99,7 @@ const SpotMarketsTable = () => {
                   </Td>
                   <Td>
                     <div className="flex flex-col items-end">
-                      <Change change={change} />
+                      <Change change={change} suffix="%" />
                     </div>
                   </Td>
                 </TrBody>
@@ -169,7 +169,7 @@ const MobileSpotMarketItem = ({ market }: { market: Serum3Market }) => {
               <p className="font-mono">
                 {bank?.uiPrice ? formatFixedDecimals(bank.uiPrice, true) : '-'}
               </p>
-              <Change change={change} />
+              <Change change={change} suffix="%" />
             </div>
           </div>
         </div>

components/stats/TokenStats.tsx

@@ -47,7 +47,9 @@ const TokenStats = () => {
   const router = useRouter()
 
   useEffect(() => {
+    if (group && !tokenStats.length) {
       actions.fetchTokenStats()
+    }
   }, [group])
 
   const totalValues = useMemo(() => {
@@ -128,6 +130,7 @@ const TokenStats = () => {
                 },
               ])}
               daysToShow={'999'}
+              prefix="$"
               tickFormat={(x) => `$${x.toFixed(2)}`}
               title={t('total-deposit-value')}
               xKey="date"
@@ -152,7 +155,7 @@ const TokenStats = () => {
                 },
               ])}
               daysToShow={'999'}
-              // setDaysToShow={() => console.log('fuck')}
+              prefix="$"
               tickFormat={(x) => `$${x.toFixed(2)}`}
               title={t('total-borrow-value')}
               xKey="date"

components/swap/SwapTokenChart.tsx

@@ -198,7 +198,7 @@ const SwapTokenChart = () => {
                     <span
                       className={`ml-0 mt-2 flex items-center text-sm md:ml-3 md:mt-0`}
                     >
-                      <Change change={calculateChartChange()} />
+                      <Change change={calculateChartChange()} suffix="%" />
                     </span>
                   </div>
                   <p className="text-sm text-th-fgd-4">
@@ -227,7 +227,7 @@ const SwapTokenChart = () => {
                     <span
                       className={`ml-0 mt-2 flex items-center text-sm md:ml-3 md:mt-0`}
                     >
-                      <Change change={calculateChartChange()} />
+                      <Change change={calculateChartChange()} suffix="%" />
                     </span>
                   </div>
                   <p className="text-sm text-th-fgd-4">

components/trade/AdvancedMarketHeader.tsx

@@ -51,7 +51,7 @@ const AdvancedMarketHeader = () => {
       </div>
       <div className="ml-6 flex-col">
         <div className="text-xs text-th-fgd-4">{t('rolling-change')}</div>
-        <Change change={change} size="small" />
+        <Change change={change} size="small" suffix="%" />
       </div>
       {selectedMarket instanceof PerpMarket ? (
         <div className="ml-6 flex-col">

pages/token/[token].tsx

@@ -1,6 +1,6 @@
 import Change from '@components/shared/Change'
 import DailyRange from '@components/shared/DailyRange'
-import mangoStore from '@store/mangoStore'
+import mangoStore, { TokenStatsItem } from '@store/mangoStore'
 import type { NextPage } from 'next'
 import { useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -32,9 +32,14 @@ import { useCoingecko } from 'hooks/useCoingecko'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
 import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettings'
+import TabButtons from '@components/shared/TabButtons'
 const PriceChart = dynamic(() => import('@components/token/PriceChart'), {
   ssr: false,
 })
+const DetailedAreaChart = dynamic(
+  () => import('@components/shared/DetailedAreaChart'),
+  { ssr: false }
+)
 dayjs.extend(relativeTime)
 
 export async function getStaticProps({ locale }: { locale: string }) {
@@ -73,6 +78,9 @@ const DEFAULT_COINGECKO_VALUES = {
 
 const Token: NextPage = () => {
   const { t } = useTranslation(['common', 'token'])
+  const actions = mangoStore((s) => s.actions)
+  const tokenStats = mangoStore((s) => s.tokenStats.data)
+  const loadingTokenStats = mangoStore((s) => s.tokenStats.loading)
   const [showFullDesc, setShowFullDesc] = useState(false)
   const [showDepositModal, setShowDepositModal] = useState(false)
   const [showBorrowModal, setShowBorrowModal] = useState(false)
@@ -87,11 +95,35 @@ const Token: NextPage = () => {
   const [chartData, setChartData] = useState<{ prices: any[] } | null>(null)
   const [loadChartData, setLoadChartData] = useState(true)
   const [daysToShow, setDaysToShow] = useState<string>('1')
+  const [activeDepositsTab, setActiveDepositsTab] = useState('token:deposits')
+  const [activeBorrowsTab, setActiveBorrowsTab] = useState('token:borrows')
   const [animationSettings] = useLocalStorageState(
     ANIMATION_SETTINGS_KEY,
     INITIAL_ANIMATION_SETTINGS
   )
 
+  useEffect(() => {
+    if (group && !tokenStats.length) {
+      actions.fetchTokenStats()
+    }
+  }, [group])
+
+  const statsHistory = useMemo(() => {
+    if (!tokenStats.length) return []
+    return tokenStats.reduce((a: TokenStatsItem[], c: TokenStatsItem) => {
+      if (c.symbol === token) {
+        const copy = { ...c }
+        copy.deposit_apr = copy.deposit_apr * 100
+        copy.borrow_apr = copy.borrow_apr * 100
+        a.push(copy)
+      }
+      return a.sort(
+        (a, b) =>
+          new Date(a.date_hour).getTime() - new Date(b.date_hour).getTime()
+      )
+    }, [])
+  }, [tokenStats])
+
   const bank = useMemo(() => {
     if (group && token) {
       const bank = group.banksMapByName.get(token.toString())
@@ -217,7 +249,7 @@ const Token: NextPage = () => {
     <div className="pb-20 md:pb-16">
       {bank ? (
         <>
-          <div className="flex flex-col border-b border-th-bkg-3 px-6 py-3 md:flex-row md:items-center md:justify-between">
+          <div className="flex flex-col border-b border-th-bkg-3 px-6 py-5 md:flex-row md:items-center md:justify-between">
             <div className="mb-4 md:mb-1">
               <div className="mb-1.5 flex items-center space-x-2">
                 <Image src={logoURI!} height="20" width="20" />
@@ -244,7 +276,7 @@ const Token: NextPage = () => {
                   <span>{formatFixedDecimals(bank.uiPrice, true)}</span>
                 )}
                 {coingeckoData ? (
-                  <Change change={price_change_percentage_24h} />
+                  <Change change={price_change_percentage_24h} suffix="%" />
                 ) : null}
               </div>
               {coingeckoData ? (
@@ -306,53 +338,97 @@ const Token: NextPage = () => {
               </div>
             </div>
           </div>
-          <div className="grid grid-cols-1 sm:grid-cols-2">
+          <div className="grid grid-cols-1 md:grid-cols-2">
-            <div className="col-span-1 border-b border-r border-th-bkg-3 px-6 py-4 sm:border-b-0">
+            <div className="col-span-1 border-b border-th-bkg-3 md:border-r md:border-b-0">
-              <h2 className="mb-4 text-base">{t('token:lending')}</h2>
+              <div className="w-full">
-              <div className="flex justify-between border-t border-th-bkg-3 py-4">
+                {statsHistory.length ? (
-                <p>{t('total-deposits')}</p>
+                  <>
-                <p className="font-mono text-th-fgd-2">
+                    <TabButtons
-                  {formatFixedDecimals(bank.uiDeposits())}
+                      activeValue={activeDepositsTab}
-                </p>
+                      onChange={(v) => setActiveDepositsTab(v)}
+                      showBorders
+                      values={[
+                        ['token:deposits', 0],
+                        ['token:deposit-rates', 0],
+                      ]}
+                    />
+                    <div className="px-6 pt-5 pb-2">
+                      {activeDepositsTab === 'token:deposits' ? (
+                        <DetailedAreaChart
+                          data={statsHistory}
+                          daysToShow={'999'}
+                          // domain={[0, 'dataMax']}
+                          loading={loadingTokenStats}
+                          small
+                          tickFormat={(x) => x.toFixed(2)}
+                          title={`${token} ${t('token:deposits')}`}
+                          xKey="date_hour"
+                          yKey={'total_deposits'}
+                        />
+                      ) : (
+                        <DetailedAreaChart
+                          data={statsHistory}
+                          daysToShow={'999'}
+                          // domain={[0, 'dataMax']}
+                          loading={loadingTokenStats}
+                          hideChange
+                          small
+                          suffix="%"
+                          tickFormat={(x) => `${x.toFixed(2)}%`}
+                          title={`${token} ${t('token:deposit-rates')} (APR)`}
+                          xKey="date_hour"
+                          yKey={'deposit_apr'}
+                        />
+                      )}
                     </div>
-              <div className="flex justify-between border-t border-th-bkg-3 py-4">
+                  </>
-                <p>{t('token:total-value')}</p>
+                ) : null}
-                <p className="font-mono text-th-fgd-2">
-                  {formatFixedDecimals(bank.uiDeposits() * bank.uiPrice, true)}
-                </p>
-              </div>
-              <div className="flex justify-between border-t border-th-bkg-3 pt-4">
-                <p>{t('deposit-rate')}</p>
-                <p className="font-mono text-th-up">
-                  {formatDecimal(bank.getDepositRateUi(), 2, {
-                    fixed: true,
-                  })}
-                  %
-                </p>
               </div>
             </div>
-            <div className="col-span-1 px-6 py-4">
+            <div className="col-span-1">
-              <h2 className="mb-4 text-base">{t('token:borrowing')}</h2>
+              <div className="w-full">
-              <div className="flex justify-between border-t border-th-bkg-3 py-4">
+                {statsHistory.length ? (
-                <p>{t('total-borrows')}</p>
+                  <>
-                <p className="font-mono text-th-fgd-2">
+                    <TabButtons
-                  {formatFixedDecimals(bank.uiBorrows())}
+                      activeValue={activeBorrowsTab}
-                </p>
+                      onChange={(v) => setActiveBorrowsTab(v)}
+                      showBorders
+                      values={[
+                        ['token:borrows', 0],
+                        ['token:borrow-rates', 0],
+                      ]}
+                    />
+                    <div className="px-6 pt-5 pb-2">
+                      {activeBorrowsTab === 'token:borrows' ? (
+                        <DetailedAreaChart
+                          data={statsHistory}
+                          daysToShow={'999'}
+                          // domain={[0, 'dataMax']}
+                          loading={loadingTokenStats}
+                          small
+                          tickFormat={(x) => x.toFixed(2)}
+                          title={`${token} ${t('token:borrows')}`}
+                          xKey="date_hour"
+                          yKey={'total_borrows'}
+                        />
+                      ) : (
+                        <DetailedAreaChart
+                          data={statsHistory}
+                          daysToShow={'999'}
+                          // domain={[0, 'dataMax']}
+                          loading={loadingTokenStats}
+                          small
+                          hideChange
+                          suffix="%"
+                          tickFormat={(x) => `${x.toFixed(2)}%`}
+                          title={`${token} ${t('token:borrow-rates')} (APR)`}
+                          xKey="date_hour"
+                          yKey={'borrow_apr'}
+                        />
+                      )}
                     </div>
-              <div className="flex justify-between border-t border-th-bkg-3 py-4">
+                  </>
-                <p>{t('token:total-value')}</p>
+                ) : null}
-                <p className="font-mono text-th-fgd-2">
-                  {formatFixedDecimals(bank.uiBorrows() * bank.uiPrice, true)}
-                </p>
-              </div>
-              <div className="flex justify-between border-t border-th-bkg-3 pt-4">
-                <p>{t('borrow-rate')}</p>
-                <p className="font-mono text-th-down">
-                  {formatDecimal(bank.getBorrowRateUi(), 2, {
-                    fixed: true,
-                  })}
-                  %
-                </p>
               </div>
             </div>
           </div>
@@ -426,8 +502,8 @@ const Token: NextPage = () => {
               ) : (
                 <div className="h-10 w-[104px] animate-pulse rounded bg-th-bkg-3" />
               )}
-              <div className="grid grid-cols-1 border-b border-th-bkg-3 sm:grid-cols-2">
+              <div className="grid grid-cols-1 border-b border-th-bkg-3 md:grid-cols-2">
-                <div className="col-span-1 border-y border-th-bkg-3 px-6 py-4 sm:col-span-2">
+                <div className="col-span-1 border-y border-th-bkg-3 px-6 py-4 md:col-span-2">
                   <h2 className="text-base">{bank.name} Stats</h2>
                 </div>
                 <div className="col-span-1 border-r border-th-bkg-3 px-6 py-4">
@@ -453,7 +529,7 @@ const Token: NextPage = () => {
                         <span className="mr-2">
                           {formatFixedDecimals(ath.usd, true)}
                         </span>
-                        <Change change={ath_change_percentage.usd} />
+                        <Change change={ath_change_percentage.usd} suffix="%" />
                       </div>
                       <p className="text-xs text-th-fgd-4">
                         {dayjs(ath_date.usd).format('MMM, D, YYYY')} (
@@ -461,14 +537,14 @@ const Token: NextPage = () => {
                       </p>
                     </div>
                   </div>
-                  <div className="flex justify-between border-b border-t border-th-bkg-3 py-4 sm:border-b-0 sm:pb-0">
+                  <div className="flex justify-between border-b border-t border-th-bkg-3 py-4 md:border-b-0 md:pb-0">
                     <p>{t('token:all-time-low')}</p>
                     <div className="flex flex-col items-end">
                       <div className="flex items-center font-mono text-th-fgd-2">
                         <span className="mr-2">
                           {formatFixedDecimals(atl.usd, true)}
                         </span>
-                        <Change change={atl_change_percentage.usd} />
+                        <Change change={atl_change_percentage.usd} suffix="%" />
                       </div>
                       <p className="text-xs text-th-fgd-4">
                         {dayjs(atl_date.usd).format('MMM, D, YYYY')} (
@@ -477,7 +553,7 @@ const Token: NextPage = () => {
                     </div>
                   </div>
                 </div>
-                <div className="col-span-1 px-6 pb-4 sm:pt-4">
+                <div className="col-span-1 px-6 pb-4 md:pt-4">
                   {fully_diluted_valuation.usd ? (
                     <div className="flex justify-between pb-4">
                       <p>{t('token:fdv')}</p>
@@ -500,7 +576,7 @@ const Token: NextPage = () => {
                   </div>
                   <div
                     className={`flex justify-between border-t border-th-bkg-3 ${
-                      max_supply ? 'py-4' : 'border-b pt-4 sm:pb-4'
+                      max_supply ? 'py-4' : 'border-b pt-4 md:pb-4'
                     }`}
                   >
                     <p>{t('token:total-supply')}</p>

public/locales/en/token.json

@@ -2,8 +2,12 @@
     "all-time-high": "All-time High",
     "all-time-low": "All-time Low",
     "borrowing": "Borrowing",
+    "borrows": "Borrows",
+    "borrow-rates": "Borrow Rates",
     "chart-unavailable": "Chart Unavailable",
     "circulating-supply": "Circulating Supply",
+    "deposits": "Deposits",
+    "deposit-rates": "Deposit Rates",
     "fdv": "Fully Diluted Value",
     "go-to-account": "Go To Account",
     "lending": "Lending",

public/locales/es/token.json

@@ -2,8 +2,12 @@
     "all-time-high": "All-time High",
     "all-time-low": "All-time Low",
     "borrowing": "Borrowing",
+    "borrows": "Borrows",
+    "borrow-rates": "Borrow Rates",
     "chart-unavailable": "Chart Unavailable",
     "circulating-supply": "Circulating Supply",
+    "deposits": "Deposits",
+    "deposit-rates": "Deposit Rates",
     "fdv": "Fully Diluted Value",
     "go-to-account": "Go To Account",
     "lending": "Lending",

public/locales/ru/token.json

@@ -2,8 +2,12 @@
     "all-time-high": "All-time High",
     "all-time-low": "All-time Low",
     "borrowing": "Borrowing",
+    "borrows": "Borrows",
+    "borrow-rates": "Borrow Rates",
     "chart-unavailable": "Chart Unavailable",
     "circulating-supply": "Circulating Supply",
+    "deposits": "Deposits",
+    "deposit-rates": "Deposit Rates",
     "fdv": "Fully Diluted Value",
     "go-to-account": "Go To Account",
     "lending": "Lending",

public/locales/zh/token.json

@@ -2,8 +2,12 @@
     "all-time-high": "All-time High",
     "all-time-low": "All-time Low",
     "borrowing": "Borrowing",
+    "borrows": "Borrows",
+    "borrow-rates": "Borrow Rates",
     "chart-unavailable": "Chart Unavailable",
     "circulating-supply": "Circulating Supply",
+    "deposits": "Deposits",
+    "deposit-rates": "Deposit Rates",
     "fdv": "Fully Diluted Value",
     "go-to-account": "Go To Account",
     "lending": "Lending",

public/locales/zh_tw/token.json

@@ -2,8 +2,12 @@
     "all-time-high": "All-time High",
     "all-time-low": "All-time Low",
     "borrowing": "Borrowing",
+    "borrows": "Borrows",
+    "borrow-rates": "Borrow Rates",
     "chart-unavailable": "Chart Unavailable",
     "circulating-supply": "Circulating Supply",
+    "deposits": "Deposits",
+    "deposit-rates": "Deposit Rates",
     "fdv": "Fully Diluted Value",
     "go-to-account": "Go To Account",
     "lending": "Lending",

tailwind.config.js

@@ -253,7 +253,7 @@ module.exports = {
           },
           button: {
             DEFAULT: 'hsl(156, 55%, 26%)',
-            hover: 'hsl(202, 5%, 40%)',
+            hover: 'hsl(156, 55%, 21%)',
           },
           link: { DEFAULT: 'hsl(31, 100%, 57%)', hover: 'hsl(31, 100%, 42%)' },
           down: {