show correct borrow fee unit and remove unnecessary class

components/BorrowForm.tsx

@@ -279,7 +279,7 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
                   allowNegative={false}
                   isNumericString={true}
                   decimalScale={bank?.mintDecimals || 6}
-                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
+                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
                   placeholder="0.00"
                   value={inputAmount}
                   onValueChange={handleInputChange}

components/DepositForm.tsx

@@ -299,7 +299,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
                   allowNegative={false}
                   isNumericString={true}
                   decimalScale={bank?.mintDecimals || 6}
-                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
+                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
                   placeholder="0.00"
                   value={inputAmount}
                   onValueChange={(e: NumberFormatValues) => {

components/RepayForm.tsx

@@ -262,7 +262,7 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
                   allowNegative={false}
                   isNumericString={true}
                   decimalScale={bank?.mintDecimals || 6}
-                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
+                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
                   placeholder="0.00"
                   value={inputAmount}
                   onValueChange={(e: NumberFormatValues) => {

components/TokenList.tsx

@@ -189,7 +189,7 @@ const TokenList = () => {
                           <QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" />
                         )}
                       </div>
-                      <p className="font-body tracking-wide">{bank.name}</p>
+                      <p className="font-body tracking-wider">{bank.name}</p>
                     </div>
                   </Td>
                   <Td className="text-right">
@@ -558,7 +558,7 @@ const ActionsMenu = ({
             <div className="mr-2 flex flex-shrink-0 items-center">
               <Image alt="" width="20" height="20" src={logoURI || ''} />
             </div>
-            <p className="font-body tracking-wide">
+            <p className="font-body tracking-wider">
               {formatTokenSymbol(bank.name)}
             </p>
           </div>

components/WithdrawForm.tsx

@@ -253,7 +253,7 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
                   allowNegative={false}
                   isNumericString={true}
                   decimalScale={bank?.mintDecimals || 6}
-                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
+                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
                   placeholder="0.00"
                   value={inputAmount}
                   onValueChange={(e: NumberFormatValues) =>

components/account/ActivityFeed.tsx

@@ -432,10 +432,8 @@ const ActivityDetails = ({
           <p className="mb-0.5 text-sm">{t('activity:asset-liquidated')}</p>
           <p className="font-mono text-th-fgd-1">
             {formatDecimal(asset_amount)}{' '}
-            <span className="font-body tracking-wide">{asset_symbol}</span>
-            <span className="ml-2 font-body tracking-wide text-th-fgd-3">
-              at
-            </span>{' '}
+            <span className="font-body tracking-wider">{asset_symbol}</span>
+            <span className="ml-2 font-body text-th-fgd-3">at</span>{' '}
             {formatFixedDecimals(asset_price, true)}
           </p>
           <p className="font-mono text-xs text-th-fgd-3">
@@ -446,10 +444,8 @@ const ActivityDetails = ({
           <p className="mb-0.5 text-sm">{t('activity:asset-returned')}</p>
           <p className="font-mono text-th-fgd-1">
             {formatDecimal(liab_amount)}{' '}
-            <span className="font-body tracking-wide">{liab_symbol}</span>
-            <span className="ml-2 font-body tracking-wide text-th-fgd-3">
-              at
-            </span>{' '}
+            <span className="font-body tracking-wider">{liab_symbol}</span>
+            <span className="ml-2 font-body text-th-fgd-3">at</span>{' '}
             {formatFixedDecimals(liab_price, true)}
           </p>
           <p className="font-mono text-xs text-th-fgd-3">

components/account/ActivityFeedTable.tsx

@@ -194,7 +194,7 @@ const ActivityFeedTable = ({
                   }
                 >
                   <Td>
-                    <p className="font-body tracking-wide">
+                    <p className="font-body tracking-wider">
                       {dayjs(block_datetime).format('ddd D MMM')}
                     </p>
                     <p className="text-xs text-th-fgd-3">
@@ -206,13 +206,13 @@ const ActivityFeedTable = ({
                   </Td>
                   <Td className="text-right font-mono">
                     {amounts.credit.value}{' '}
-                    <span className="font-body tracking-wide text-th-fgd-3">
+                    <span className="font-body text-th-fgd-3">
                       {amounts.credit.symbol}
                     </span>
                   </Td>
                   <Td className="text-right font-mono">
                     {amounts.debit.value}{' '}
-                    <span className="font-body tracking-wide text-th-fgd-3">
+                    <span className="font-body text-th-fgd-3">
                       {amounts.debit.symbol}
                     </span>
                   </Td>
@@ -353,7 +353,7 @@ const MobileActivityFeedItem = ({
                       { maximumFractionDigits: 6 }
                     )}
                   </span>
-                  <span className="font-body tracking-wide text-th-fgd-3">
+                  <span className="font-body text-th-fgd-3">
                     {activity.activity_details.swap_in_symbol}
                   </span>
                   <span className="mx-1 font-body text-th-fgd-3">for</span>
@@ -363,7 +363,7 @@ const MobileActivityFeedItem = ({
                       { maximumFractionDigits: 6 }
                     )}
                   </span>
-                  <span className="font-body tracking-wide text-th-fgd-3">
+                  <span className="font-body text-th-fgd-3">
                     {activity.activity_details.swap_out_symbol}
                   </span>
                 </>
@@ -392,7 +392,7 @@ const MobileActivityFeedItem = ({
                   <span className="mr-1">
                     {activity.activity_details.quantity}
                   </span>
-                  <span className="font-body tracking-wide text-th-fgd-3">
+                  <span className="font-body text-th-fgd-3">
                     {activity.activity_details.symbol}
                   </span>
                 </>
@@ -443,12 +443,10 @@ const MobileActivityFeedItem = ({
             <p className="mb-0.5 text-sm">{t('activity:asset-liquidated')}</p>
             <p className="font-mono text-sm text-th-fgd-1">
               {formatDecimal(activity.activity_details.asset_amount)}{' '}
-              <span className="font-body tracking-wide">
+              <span className="font-body tracking-wider">
                 {activity.activity_details.asset_symbol}
               </span>
-              <span className="ml-2 font-body tracking-wide text-th-fgd-3">
-                at
-              </span>{' '}
+              <span className="ml-2 font-body text-th-fgd-3">at</span>{' '}
               {formatFixedDecimals(activity.activity_details.asset_price, true)}
             </p>
             <p className="font-mono text-xs text-th-fgd-3">
@@ -463,12 +461,10 @@ const MobileActivityFeedItem = ({
             <p className="mb-0.5 text-sm">{t('activity:asset-returned')}</p>
             <p className="font-mono text-sm text-th-fgd-1">
               {formatDecimal(activity.activity_details.liab_amount)}{' '}
-              <span className="font-body tracking-wide">
+              <span className="font-body tracking-wider">
                 {activity.activity_details.liab_symbol}
               </span>
-              <span className="ml-2 font-body tracking-wide text-th-fgd-3">
-                at
-              </span>{' '}
+              <span className="ml-2 font-body text-th-fgd-3">at</span>{' '}
               {formatFixedDecimals(activity.activity_details.liab_price, true)}
             </p>
             <p className="font-mono text-xs text-th-fgd-3">

components/modals/UserSetupModal.tsx

@@ -462,7 +462,7 @@ const UserSetupModal = ({
                       allowNegative={false}
                       isNumericString={true}
                       decimalScale={tokenMax.decimals || 6}
-                      className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
+                      className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
                       placeholder="0.00"
                       value={depositAmount}
                       onValueChange={(e: NumberFormatValues) => {

components/stats/PerpMarketsTable.tsx

@@ -85,7 +85,7 @@ const PerpMarketsTable = ({
                   <Td>
                     <div className="flex items-center">
                       <MarketLogos market={market} />
-                      <p className="font-body tracking-wide">{market.name}</p>
+                      <p className="font-body tracking-wider">{market.name}</p>
                     </div>
                   </Td>
                   <Td>

components/stats/SpotMarketsTable.tsx

@@ -67,7 +67,7 @@ const SpotMarketsTable = () => {
                   <Td>
                     <div className="flex items-center">
                       <MarketLogos market={market} />
-                      <p className="font-body tracking-wide">{market.name}</p>
+                      <p className="font-body tracking-wider">{market.name}</p>
                     </div>
                   </Td>
                   <Td>

components/stats/TokenStats.tsx

@@ -119,7 +119,7 @@ const TokenStats = () => {
                           <QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" />
                         )}
                       </div>
-                      <p className="font-body tracking-wide">{bank.name}</p>
+                      <p className="font-body tracking-wider">{bank.name}</p>
                     </div>
                   </Td>
                   <Td>

components/swap/SwapHistoryTable.tsx

@@ -114,10 +114,10 @@ const SwapHistoryTable = () => {
               return (
                 <TrBody key={signature}>
                   <Td>
-                    <p className="font-body tracking-wide">
+                    <p className="font-body tracking-wider">
                       {dayjs(block_datetime).format('ddd D MMM')}
                     </p>
-                    <p className="font-body text-xs tracking-wide text-th-fgd-3">
+                    <p className="font-body text-xs text-th-fgd-3">
                       {dayjs(block_datetime).format('h:mma')}
                     </p>
                   </Td>
@@ -135,7 +135,7 @@ const SwapHistoryTable = () => {
                         <div>
                           <p className="whitespace-nowrap">
                             {`${swap_in_amount.toFixed(inDecimals)}`}
-                            <span className="ml-1 font-body tracking-wide text-th-fgd-3">
+                            <span className="ml-1 font-body text-th-fgd-3">
                               {inSymbol}
                             </span>
                           </p>
@@ -160,7 +160,7 @@ const SwapHistoryTable = () => {
                         <div>
                           <p className="whitespace-nowrap">
                             {`${trimDecimals(swap_out_amount, outDecimals)}`}
-                            <span className="ml-1 font-body tracking-wide text-th-fgd-3">
+                            <span className="ml-1 font-body text-th-fgd-3">
                               {outSymbol}
                             </span>
                           </p>
@@ -186,7 +186,7 @@ const SwapHistoryTable = () => {
                     <div className="flex flex-col text-right">
                       <p>
                         {borrowAmount}
-                        <span className="ml-1 font-body tracking-wide text-th-fgd-3">
+                        <span className="ml-1 font-body text-th-fgd-3">
                           {inSymbol}
                         </span>
                       </p>
@@ -194,7 +194,12 @@ const SwapHistoryTable = () => {
                   </Td>
                   <Td>
                     <div className="flex flex-col text-right">
-                      <p>${borrowFee}</p>
+                      <p>
+                        {borrowFee}
+                        <span className="ml-1 font-body text-th-fgd-3">
+                          {inSymbol}
+                        </span>
+                      </p>
                     </div>
                   </Td>
                   <Td>

components/swap/SwapReviewRouteInfo.tsx

@@ -340,22 +340,22 @@ const SwapReviewRouteInfo = ({
                   {swapRate ? (
                     <>
                       1{' '}
-                      <span className="font-body tracking-wide">
+                      <span className="font-body tracking-wider">
                         {inputTokenInfo!.name} ≈{' '}
                       </span>
                       {formatFixedDecimals(amountOut.div(amountIn).toNumber())}{' '}
-                      <span className="font-body tracking-wide">
+                      <span className="font-body tracking-wider">
                         {outputTokenInfo?.symbol}
                       </span>
                     </>
                   ) : (
                     <>
                       1{' '}
-                      <span className="font-body tracking-wide">
+                      <span className="font-body tracking-wider">
                         {outputTokenInfo?.symbol} ≈{' '}
                       </span>
                       {formatFixedDecimals(amountIn.div(amountOut).toNumber())}{' '}
-                      <span className="font-body tracking-wide">
+                      <span className="font-body tracking-wider">
                         {inputTokenInfo!.symbol}
                       </span>
                     </>
@@ -377,7 +377,7 @@ const SwapReviewRouteInfo = ({
                     }`}
                   >
                     {Decimal.abs(coinGeckoPriceDifference).toFixed(1)}%{' '}
-                    <span className="font-body tracking-wide text-th-fgd-3">{`${
+                    <span className="font-body text-th-fgd-3">{`${
                       coinGeckoPriceDifference.lte(0)
                         ? 'cheaper'
                         : 'more expensive'
@@ -398,7 +398,7 @@ const SwapReviewRouteInfo = ({
                     10 ** outputTokenInfo.decimals || 1,
                   outputTokenInfo.decimals
                 )}{' '}
-                <span className="font-body tracking-wide">
+                <span className="font-body tracking-wider">
                   {outputTokenInfo?.symbol}
                 </span>
               </p>
@@ -441,7 +441,7 @@ const SwapReviewRouteInfo = ({
               </Tooltip>
               <p className="text-right font-mono text-sm text-th-fgd-2">
                 ~{formatFixedDecimals(borrowAmount)}{' '}
-                <span className="font-body tracking-wide">
+                <span className="font-body tracking-wider">
                   {inputTokenInfo?.symbol}
                 </span>
               </p>
@@ -522,7 +522,7 @@ const SwapReviewRouteInfo = ({
                             .mul(inputBank!.loanOriginationFeeRate.toFixed())
                             .toNumber()
                         )}{' '}
-                        <span className="font-body tracking-wide">
+                        <span className="font-body tracking-wider">
                           {inputBank!.name}
                         </span>{' '}
                         (
@@ -560,7 +560,7 @@ const SwapReviewRouteInfo = ({
                                 info.lpFee?.amount /
                                 Math.pow(10, feeToken.decimals)
                               ).toFixed(6)}{' '}
-                              <span className="font-body tracking-wide">
+                              <span className="font-body tracking-wider">
                                 {feeToken?.symbol}
                               </span>{' '}
                               (

components/trade/OpenOrders.tsx

@@ -292,7 +292,7 @@ const OpenOrders = () => {
                               minimumFractionDigits: getDecimalCount(tickSize),
                               maximumFractionDigits: getDecimalCount(tickSize),
                             })}{' '}
-                            <span className="font-body tracking-wide text-th-fgd-4">
+                            <span className="font-body text-th-fgd-4">
                               {quoteSymbol}
                             </span>
                           </span>

components/trade/UnsettledTrades.tsx

@@ -167,17 +167,13 @@ const UnsettledTrades = ({
                     {unsettledSpotBalances[mktAddress].base ? (
                       <div>
                         {unsettledSpotBalances[mktAddress].base}{' '}
-                        <span className="font-body tracking-wide text-th-fgd-4">
-                          {base}
-                        </span>
+                        <span className="font-body text-th-fgd-4">{base}</span>
                       </div>
                     ) : null}
                     {unsettledSpotBalances[mktAddress].quote ? (
                       <div className="ml-4">
                         {unsettledSpotBalances[mktAddress].quote}{' '}
-                        <span className="font-body tracking-wide text-th-fgd-4">
-                          {quote}
-                        </span>
+                        <span className="font-body text-th-fgd-4">{quote}</span>
                       </div>
                     ) : null}
                   </div>
@@ -255,17 +251,13 @@ const UnsettledTrades = ({
                 {unsettledSpotBalances[mktAddress].base ? (
                   <span className="font-mono text-sm">
                     {unsettledSpotBalances[mktAddress].base}{' '}
-                    <span className="font-body tracking-wide text-th-fgd-4">
-                      {base}
-                    </span>
+                    <span className="font-body text-th-fgd-4">{base}</span>
                   </span>
                 ) : null}
                 {unsettledSpotBalances[mktAddress].quote ? (
                   <span className="font-mono text-sm">
                     {unsettledSpotBalances[mktAddress].quote}{' '}
-                    <span className="font-body tracking-wide text-th-fgd-4">
-                      {quote}
-                    </span>
+                    <span className="font-body text-th-fgd-4">{quote}</span>
                   </span>
                 ) : null}
                 {connected ? (

components/wallet/ConnectWalletButton.tsx

@@ -49,7 +49,7 @@ export const ConnectWalletButton: React.FC = () => {
                 {connecting ? <Loading className="h-4 w-4" /> : t('connect')}
               </div>
 
-              <div className="text-xxs font-normal leading-3 tracking-wider text-th-fgd-3">
+              <div className="text-xxs font-normal leading-3 text-th-fgd-3">
                 {preselectedWalletName}
               </div>
             </div>