fix linter errors

Author: ckeshava

src/containers/Vault/VaultHeader/index.tsx

@@ -10,10 +10,7 @@ import { MPT_ROUTE } from '../../App/routes'
 import SocketContext from '../../shared/SocketContext'
 import { getMPTIssuance } from '../../../rippled/lib/rippled'
 import { parseVaultWebsite } from '../utils'
-import {
-  shortenVaultID,
-  shortenAccount,
-} from '../../shared/utils'
+import { shortenVaultID, shortenAccount } from '../../shared/utils'
 import './styles.scss'
 import { useAnalytics } from '../../shared/analytics'
 import { parseAmount } from '../../shared/NumberFormattingUtils'
@@ -63,7 +60,11 @@ export const VaultHeader = ({ data, vaultId, displayCurrency }: Props) => {
   const { t } = useTranslation()
   const { trackException } = useAnalytics()
   const rippledSocket = useContext(SocketContext)
-  const { rate: tokenToUsdRate } = useTokenToUSDRate(data.Asset)
+  const { rate: tokenToUsdRate } = useTokenToUSDRate(
+    data.Asset?.currency
+      ? { currency: data.Asset.currency, issuer: data.Asset.issuer }
+      : undefined,
+  )
 
   const {
     Owner: owner,
@@ -271,7 +272,11 @@ export const VaultHeader = ({ data, vaultId, displayCurrency }: Props) => {
                   }
                   const amount = convertedAmount ?? assetsTotal
                   if (amount === undefined) return '--'
-                  if (['0', '0.00', '0.0000'].includes(parseAmount(amount ?? '0', 2)))
+                  if (
+                    ['0', '0.00', '0.0000'].includes(
+                      parseAmount(amount ?? '0', 2),
+                    )
+                  )
                     return '--'
                   // Note: As per the NumberFormat policy, prices in the range of [10_000, 1M] do not display decimal values
                   // Very large prices (greater than 1M must have two decimal places)
@@ -284,14 +289,12 @@ export const VaultHeader = ({ data, vaultId, displayCurrency }: Props) => {
               <TokenTableRow
                 label={t('max_total_supply')}
                 value={(() => {
-                  if (assetsMaximum === undefined)
-                    return t('no_limit')
+                  if (assetsMaximum === undefined) return t('no_limit')
 
                   const parsedAmt = parseAmount(assetsMaximum, 2)
-                  if (['0', '0.00', '0.0000'].includes(parsedAmt))
-                    return '--'
+                  if (['0', '0.00', '0.0000'].includes(parsedAmt)) return '--'
 
-                  return parsedAmt + ' ' + getAssetCurrency(asset)
+                  return `${parsedAmt} ${getAssetCurrency(asset)}`
                 })()}
               />
               <TokenTableRow
@@ -302,18 +305,16 @@ export const VaultHeader = ({ data, vaultId, displayCurrency }: Props) => {
                 label={t('available_to_borrow')}
                 value={(() => {
                   const parsedAmt = parseAmount(assetsAvailable ?? '0', 2)
-                  if (['0', '0.00', '0.0000'].includes(parsedAmt))
-                    return '--'
-                  return parsedAmt + ' ' + getAssetCurrency(asset)
+                  if (['0', '0.00', '0.0000'].includes(parsedAmt)) return '--'
+                  return `${parsedAmt} ${getAssetCurrency(asset)}`
                 })()}
               />
               <TokenTableRow
                 label={t('unrealized_loss')}
                 value={(() => {
                   const parsedAmt = parseAmount(lossUnrealized ?? '0', 2)
-                  if (['0', '0.00', '0.0000'].includes(parsedAmt))
-                    return '--'
-                  return parsedAmt + ' ' + getAssetCurrency(asset)
+                  if (['0', '0.00', '0.0000'].includes(parsedAmt)) return '--'
+                  return `${parsedAmt} ${getAssetCurrency(asset)}`
                 })()}
               />
             </tbody>

src/containers/Vault/VaultHeader/test/VaultHeader.test.tsx

@@ -402,7 +402,7 @@ describe('VaultHeader Component', () => {
       )
 
       // Should be a link to the MPT page with exact truncated text
-      const mptLink = screen.getByRole('link', { name: 'MPT (' + mptId + ')' })
+      const mptLink = screen.getByRole('link', { name: `MPT (${mptId})` })
       expect(mptLink.getAttribute('href')).toBe(`/mpt/${mptId}`)
     })
 

src/containers/Vault/VaultLoans/BrokerDetails.tsx

@@ -5,10 +5,7 @@ import { formatRate, LSF_LOAN_DEFAULT } from './utils'
 import { BrokerLoansTable } from './BrokerLoansTable'
 import WarningIcon from '../../shared/images/warning.svg'
 import { parseAmount } from '../../shared/NumberFormattingUtils'
-import {
-  shortenMPTID,
-  getCurrencySymbol,
-} from '../../shared/utils'
+import { shortenMPTID, getCurrencySymbol } from '../../shared/utils'
 
 // TODO: Use types from xrpl.js instead of hand-writing it.
 interface LoanBrokerData {
@@ -62,16 +59,24 @@ export const BrokerDetails = ({
       loan.TotalValueOutstanding > 0 && (loan.Flags ?? 0) & LSF_LOAN_DEFAULT,
   )
 
-  const formatBrokerAmount = (amount: string | undefined, asset: AssetInfo | undefined): string => {
+  const formatBrokerAmount = (
+    amount: string | undefined,
+    inputAsset: AssetInfo | undefined,
+  ): string => {
     const convertedAmount = convertToDisplayCurrency(amount)
     if (convertedAmount === undefined && displayCurrency === 'usd') {
       return '--'
     }
 
     const finalDisplayAmount = convertedAmount ?? amount
-    if(finalDisplayAmount !== undefined)
-      return `${parseAmount(finalDisplayAmount, 2)}` + ' ' + (getCurrencySymbol(asset?.currency) ??
-    `MPT (${shortenMPTID(asset?.mpt_issuance_id)})`)
+    if (finalDisplayAmount !== undefined)
+      return (
+        `${parseAmount(finalDisplayAmount, 2)}` +
+        ` ${
+          getCurrencySymbol(inputAsset?.currency) ??
+          `MPT (${shortenMPTID(inputAsset?.mpt_issuance_id)})`
+        }`
+      )
     return '--'
   }
 

src/containers/Vault/VaultLoans/test/VaultLoans.test.tsx

@@ -728,9 +728,7 @@ describe('VaultLoans Component', () => {
 
       await waitFor(() => {
         expect(screen.getByText('Loan Broker ID')).toBeInTheDocument()
-        expect(
-          screen.getByText(brokerId),
-        ).toBeInTheDocument()
+        expect(screen.getByText(brokerId)).toBeInTheDocument()
       })
     })