format swap pair symbols

components/swap/SwapForm.tsx

@@ -350,9 +350,7 @@ const SwapForm = () => {
       </div>
       <div
         id="swap-step-four"
-        className={`border-t border-th-bkg-3 px-6 transition-all ${
-          showHealthImpact ? 'max-h-40 py-4 ' : 'h-0'
-        }`}
+        className={`border-t border-th-bkg-3 px-6 py-4 transition-all`}
       >
         <div className="flex justify-between">
           <div className="flex items-center">

components/swap/SwapTokenChart.tsx

@@ -27,6 +27,7 @@ import { useTheme } from 'next-themes'
 import PercentageChange from '../shared/PercentageChange'
 import ChartRangeButtons from '../shared/ChartRangeButtons'
 import { useViewport } from 'hooks/useViewport'
+import { formatTokenSymbol } from 'utils/tokens'
 
 dayjs.extend(relativeTime)
 
@@ -229,7 +230,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
   }
 
   return (
-    <ContentBox hideBorder hidePadding className="h-full px-6 py-3 md:pb-6">
+    <ContentBox hideBorder hidePadding className="h-full px-6 py-3">
       {loadChartData ? (
         <>
           <SheenLoader className="w-[148px] rounded-md">
@@ -253,8 +254,14 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
                 <div className="mb-0.5 flex items-center">
                   <p className="text-base text-th-fgd-3">
                     {['usd-coin', 'tether'].includes(inputTokenId || '')
-                      ? `${outputTokenInfo?.symbol?.toUpperCase()}/${inputTokenInfo?.symbol?.toUpperCase()}`
-                      : `${inputTokenInfo?.symbol?.toUpperCase()}/${outputTokenInfo?.symbol?.toUpperCase()}`}
+                      ? `${formatTokenSymbol(
+                          outputTokenInfo?.symbol?.toUpperCase()
+                        )}/${inputTokenInfo?.symbol?.toUpperCase()}`
+                      : `${formatTokenSymbol(
+                          inputTokenInfo?.symbol?.toUpperCase()
+                        )}/${formatTokenSymbol(
+                          outputTokenInfo?.symbol?.toUpperCase()
+                        )}`}
                   </p>
                   {/* <div
                     className="px-2 hover:cursor-pointer hover:text-th-primary"