Merge pull request #124 from blockworks-foundation/foramt-swap-token-symbols

format swap token symbols

components/swap/SwapFormTokenList.tsx

@@ -11,6 +11,7 @@ import useJupiterMints from 'hooks/useJupiterMints'
 import useMangoGroup from 'hooks/useMangoGroup'
 import { PublicKey } from '@solana/web3.js'
 import FormatNumericValue from '@components/shared/FormatNumericValue'
+import { formatTokenSymbol } from 'utils/tokens'
 
 // const generateSearchTerm = (item: Token, searchValue: string) => {
 //   const normalizedSearchValue = searchValue.toLowerCase()
@@ -72,7 +73,7 @@ const TokenItem = ({
           </picture>
           <div className="ml-2.5">
             <p className="text-left text-th-fgd-2">
-              {symbol || 'unknown'}
+              {bank?.name ? formatTokenSymbol(bank.name) : symbol || 'unknown'}
               {bank?.reduceOnly ? (
                 <span className="ml-1.5 text-xxs text-th-warning">
                   {t('reduce-only')}

components/swap/TokenSelect.tsx

@@ -7,6 +7,7 @@ import useMangoGroup from 'hooks/useMangoGroup'
 import useJupiterMints from 'hooks/useJupiterMints'
 import { Bank } from '@blockworks-foundation/mango-v4'
 import { Dispatch, SetStateAction } from 'react'
+import { formatTokenSymbol } from 'utils/tokens'
 
 type TokenSelectProps = {
   bank: Bank | undefined
@@ -40,7 +41,9 @@ const TokenSelect = ({ bank, showTokenList, type }: TokenSelectProps) => {
         )}
       </div>
       <div className="flex w-full items-center justify-between">
-        <div className="text-xl font-bold text-th-fgd-1">{bank?.name}</div>
+        <div className="text-xl font-bold text-th-fgd-1">
+          {formatTokenSymbol(bank!.name)}
+        </div>
         <ChevronDownIcon className="h-6 w-6" />
       </div>
     </button>

utils/tokens.ts

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