fix wbtc token page

components/shared/DetailedAreaChart.tsx

@@ -303,7 +303,7 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
                     />
                     <defs>
                       <linearGradient
-                        id={`gradientArea-${title?.replace(/\s/g, '')}`}
+                        id={`gradientArea-${title?.replace(/[^a-zA-Z]/g, '')}`}
                         x1="0"
                         y1={flipGradientCoords ? '1' : '0'}
                         x2="0"
@@ -339,7 +339,10 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
                           : COLORS.DOWN[theme]
                       }
                       strokeWidth={1.5}
-                      fill={`url(#gradientArea-${title?.replace(/\s/g, '')})`}
+                      fill={`url(#gradientArea-${title?.replace(
+                        /[^a-zA-Z]/g,
+                        ''
+                      )})`}
                     />
                     <XAxis
                       axisLine={false}

components/stats/TokenStats.tsx

@@ -41,7 +41,9 @@ const TokenStats = () => {
   }, [group])
 
   const goToTokenPage = (bank: Bank) => {
-    router.push(`/token/${bank.name}`, undefined, { shallow: true })
+    router.push(`/token/${bank.name.split(' ')[0].toUpperCase()}`, undefined, {
+      shallow: true,
+    })
   }
 
   return group ? (

components/token/TokenPage.tsx

@@ -71,16 +71,21 @@ const TokenPage = () => {
     INITIAL_ANIMATION_SETTINGS
   )
 
+  const bankName = useMemo(() => {
+    if (!token) return
+    return token === 'WBTC' ? 'wBTC (Portal)' : token.toString()
+  }, [token])
+
   const bank = useMemo(() => {
-    if (group && token) {
-      const bank = group.banksMapByName.get(token.toString())
+    if (group && bankName) {
+      const bank = group.banksMapByName.get(bankName)
       if (bank) {
         return bank[0]
       } else {
         setLoading(false)
       }
     }
-  }, [group, token])
+  }, [group, bankName])
 
   const logoURI = useMemo(() => {
     if (bank && mangoTokens.length) {
@@ -115,7 +120,7 @@ const TokenPage = () => {
 
   return (
     <>
-      {bank ? (
+      {bank && bankName ? (
         <>
           <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">
@@ -124,7 +129,7 @@ const TokenPage = () => {
                 {coingeckoTokenInfo.data ? (
                   <h1 className="text-base font-normal">
                     {coingeckoTokenInfo.data.name}{' '}
-                    <span className="text-th-fgd-4">({bank.name})</span>
+                    <span className="text-th-fgd-4">{bank.name}</span>
                   </h1>
                 ) : (
                   <h1 className="text-base font-normal">{bank.name}</h1>
@@ -161,7 +166,7 @@ const TokenPage = () => {
             </div>
             <ActionPanel bank={bank} />
           </div>
-          <ChartTabs token={token as string} />
+          <ChartTabs token={bankName} />
           <div className="flex items-center justify-center border-y border-th-bkg-3 px-6 py-4 text-center">
             <Tooltip
               content={'The percentage of deposits that have been lent out.'}