handle no coingecko data

pages/token/[token].tsx

@@ -12,7 +12,10 @@ import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import Button from '@components/shared/Button'
-import { ArrowSmallUpIcon } from '@heroicons/react/20/solid'
+import {
+  ArrowSmallUpIcon,
+  ArrowTrendingUpIcon,
+} from '@heroicons/react/20/solid'
 import DepositModal from '@components/modals/DepositModal'
 import BorrowModal from '@components/modals/BorrowModal'
 import parse from 'html-react-parser'
@@ -203,18 +206,22 @@ const Token: NextPage = () => {
 
   return (
     <div className="pb-20 md:pb-16">
-      {coingeckoData && bank ? (
+      {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="mb-4 md:mb-1">
               <div className="mb-1.5 flex items-center space-x-2">
                 <Image src={logoURI!} height="20" width="20" />
+                {coingeckoData ? (
                   <h1 className="text-base font-normal">
                     {coingeckoData.name}{' '}
                     <span className="text-th-fgd-4">({bank.name})</span>
                   </h1>
+                ) : (
+                  <h1 className="text-base font-normal">{bank.name}</h1>
+                )}
               </div>
-              <div className="mb-2 flex items-end space-x-3 text-5xl font-bold text-th-fgd-1">
+              <div className="flex items-end space-x-3 text-5xl font-bold text-th-fgd-1">
                 $
                 <FlipNumbers
                   height={48}
@@ -224,14 +231,20 @@ const Token: NextPage = () => {
                   duration={1}
                   numbers={formatDecimal(bank.uiPrice, 2)}
                 />
+                {coingeckoData ? (
                   <Change change={price_change_percentage_24h} />
+                ) : null}
               </div>
+              {coingeckoData ? (
+                <div className="mt-2">
                   <DailyRange
                     high={high_24h.usd}
                     low={low_24h.usd}
                     price={bank.uiPrice}
                   />
                 </div>
+              ) : null}
+            </div>
             <div className="w-full rounded-md bg-th-bkg-2 p-4 md:w-[343px]">
               <div className="mb-4 flex justify-between">
                 <p>
@@ -348,6 +361,8 @@ const Token: NextPage = () => {
               %
             </span>
           </div>
+          {coingeckoData ? (
+            <>
               <div className="border-b border-th-bkg-3 py-4 px-6">
                 <h2 className="mb-1 text-xl">About {bank.name}</h2>
                 <div className="flex items-end">
@@ -389,7 +404,12 @@ const Token: NextPage = () => {
                     />
                   </>
                 ) : bank?.name === 'USDC' || bank?.name === 'USDT' ? null : (
-              <p className="mb-0 text-th-fgd-4">{t('unavailable')}</p>
+                  <div className="flex flex-col items-center p-6">
+                    <ArrowTrendingUpIcon className="h-5 w-5 text-th-fgd-3" />
+                    <p className="mb-0 text-th-fgd-4">
+                      {t('token:chart-unavailable')}
+                    </p>
+                  </div>
                 )
               ) : (
                 <div className="h-10 w-[104px] animate-pulse rounded bg-th-bkg-3" />
@@ -487,6 +507,13 @@ const Token: NextPage = () => {
                 </div>
               </div>
             </>
+          ) : (
+            <div className="flex flex-col items-center p-6">
+              <span className="mb-0.5 text-2xl">🦎</span>
+              <p>No CoinGecko data...</p>
+            </div>
+          )}
+        </>
       ) : loading ? (
         <div className="space-y-3 px-6 py-4">
           <SheenLoader className="flex flex-1">

public/locales/en/token.json

@@ -2,6 +2,7 @@
     "all-time-high": "All-time High",
     "all-time-low": "All-time Low",
     "borrowing": "Borrowing",
+    "chart-unavailable": "Chart Unavailable",
     "circulating-supply": "Circulating Supply",
     "fdv": "Fully Diluted Value",
     "go-to-account": "Go To Account",

public/locales/es/token.json

@@ -2,6 +2,7 @@
     "all-time-high": "All-time High",
     "all-time-low": "All-time Low",
     "borrowing": "Borrowing",
+    "chart-unavailable": "Chart Unavailable",
     "circulating-supply": "Circulating Supply",
     "fdv": "Fully Diluted Value",
     "go-to-account": "Go To Account",

public/locales/ru/token.json

@@ -2,6 +2,7 @@
     "all-time-high": "All-time High",
     "all-time-low": "All-time Low",
     "borrowing": "Borrowing",
+    "chart-unavailable": "Chart Unavailable",
     "circulating-supply": "Circulating Supply",
     "fdv": "Fully Diluted Value",
     "go-to-account": "Go To Account",

public/locales/zh/token.json

@@ -2,6 +2,7 @@
     "all-time-high": "All-time High",
     "all-time-low": "All-time Low",
     "borrowing": "Borrowing",
+    "chart-unavailable": "Chart Unavailable",
     "circulating-supply": "Circulating Supply",
     "fdv": "Fully Diluted Value",
     "go-to-account": "Go To Account",

public/locales/zh_tw/token.json

@@ -2,6 +2,7 @@
     "all-time-high": "All-time High",
     "all-time-low": "All-time Low",
     "borrowing": "Borrowing",
+    "chart-unavailable": "Chart Unavailable",
     "circulating-supply": "Circulating Supply",
     "fdv": "Fully Diluted Value",
     "go-to-account": "Go To Account",

utils/tokens.ts

@@ -108,7 +108,9 @@ export const formatTokenSymbol = (symbol: string) =>
 
 export const LISTED_TOKENS: string[] = [
   'BTC',
+  'DUST',
   'ETH',
+  'RAY',
   'soETH',
   'SOL',
   'MSOL',

yarn.lock

@@ -50,9 +50,9 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@blockworks-foundation/mango-v4@https://tylersssss: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@github.com/blockworks-foundation/mango-v4.git#main":
+"@blockworks-foundation/mango-v4@git+https://mschneider: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@github.com/blockworks-foundation/mango-v4.git#main":
   version "0.0.1-beta.5"
-  resolved "https://tylersssss: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@github.com/blockworks-foundation/mango-v4.git#73792dd6ea1a899bc18848db5e13edeed22dcfa4"
+  resolved "git+https://mschneider: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@github.com/blockworks-foundation/mango-v4.git#6ea338df6dfbb14fb238d3157fbd6f4c5d5a1709"
   dependencies:
     "@project-serum/anchor" "^0.25.0"
     "@project-serum/serum" "^0.13.65"