format token symbols in select buttons

components/account/ActionTokenItem.tsx

@@ -49,7 +49,7 @@ const ActionTokenItem = ({
             src={logoUri || `/icons/${name.toLowerCase()}.svg`}
           />
         </div>
-        <p className="text-th-fgd-1">{name}</p>
+        <p className="text-left text-th-fgd-1">{name}</p>
       </div>
       {showDepositRates ? (
         <div className="w-1/4 text-right font-mono">

components/shared/TokenListButton.tsx

@@ -1,5 +1,6 @@
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import Image from 'next/image'
+import { formatTokenSymbol } from 'utils/tokens'
 
 const TokenListButton = ({
   logoUri,
@@ -24,7 +25,7 @@ const TokenListButton = ({
         />
       </div>
       <div className="flex w-full items-center justify-between">
-        <div className="text-xl font-bold">{token}</div>
+        <div className="text-xl font-bold">{formatTokenSymbol(token)}</div>
         <ChevronDownIcon className="h-6 w-6" />
       </div>
     </button>

components/token/TokenPage.tsx

@@ -21,6 +21,7 @@ import { useQuery } from '@tanstack/react-query'
 import FormatNumericValue from '@components/shared/FormatNumericValue'
 import TopTokenAccounts from './TopTokenAccounts'
 import TokenParams from './TokenParams'
+import { formatTokenSymbol } from 'utils/tokens'
 
 const DEFAULT_COINGECKO_VALUES = {
   ath: 0,
@@ -136,7 +137,9 @@ const TokenPage = () => {
                 {coingeckoTokenInfo ? (
                   <h1 className="text-base font-normal">
                     {coingeckoTokenInfo.name}{' '}
-                    <span className="text-th-fgd-4">{bank.name}</span>
+                    <span className="text-th-fgd-4">
+                      {formatTokenSymbol(bank.name)}
+                    </span>
                   </h1>
                 ) : (
                   <h1 className="text-base font-normal">{bank.name}</h1>

utils/tokens.ts

@@ -143,7 +143,7 @@ export async function getNFTsByOwner(owner: PublicKey, connection: Connection) {
 export const formatTokenSymbol = (symbol: string) => {
   if (symbol.toLowerCase().includes('portal')) {
     const truncSymbol = symbol.split(' ')[0].toUpperCase()
-    return truncSymbol === 'WBTC' ? 'BTC' : truncSymbol
+    return truncSymbol === 'WBTC' ? 'wBTC' : truncSymbol
   }
   return symbol === 'MSOL' ? 'mSOL' : symbol
 }