feat: Make the asset clickable link without issuer name

Author: ckeshava

src/containers/Vault/VaultHeader/index.tsx

@@ -11,21 +11,20 @@ import SocketContext from '../../shared/SocketContext'
 import { getMPTIssuance } from '../../../rippled/lib/rippled'
 import { parseVaultWebsite } from '../utils'
 import {
-  shortenMPTID,
   shortenVaultID,
   shortenAccount,
-  getCurrencySymbol,
 } from '../../shared/utils'
 import './styles.scss'
 import { useAnalytics } from '../../shared/analytics'
 import { parseAmount } from '../../shared/NumberFormattingUtils'
 import { convertHexToString } from '../../../rippled/lib/utils'
 import { Metadata } from '../../Token/MPT/Header/Metadata'
+import Currency from '../../shared/components/Currency'
 
 interface VaultData {
   Owner?: string
   Asset?: {
-    currency: string
+    currency?: string
     issuer?: string
     mpt_issuance_id?: string
   }
@@ -57,19 +56,6 @@ const WITHDRAWAL_POLICIES: { [key: number]: string } = {
   1: 'first_come_first_served',
 }
 
-const formatAsset = (asset: VaultData['Asset']): string | React.ReactNode => {
-  if (!asset) return '-'
-  if (asset.currency === 'XRP') return getCurrencySymbol('XRP')
-  if (asset.mpt_issuance_id) {
-    return (
-      <RouteLink to={MPT_ROUTE} params={{ id: asset.mpt_issuance_id }}>
-        {shortenMPTID(asset.mpt_issuance_id, 8, 6)}
-      </RouteLink>
-    )
-  }
-  return asset.currency
-}
-
 const getAssetCurrency = (asset: VaultData['Asset']): string =>
   asset?.currency === 'XRP' ? '\uE900' : asset?.currency || ''
 
@@ -252,7 +238,27 @@ export const VaultHeader = ({ data, vaultId, displayCurrency }: Props) => {
         <div className="details-column">
           <table className="token-table">
             <tbody>
-              <TokenTableRow label={t('asset')} value={formatAsset(asset)} />
+              <TokenTableRow
+                label={t('asset')}
+                value={
+                  asset?.currency === 'XRP' ? (
+                    getAssetCurrency(asset)
+                  ) : (
+                    <Currency
+                      currency={
+                        asset?.currency ??
+                        asset?.mpt_issuance_id ??
+                        'Unknown Currency Error'
+                      }
+                      link
+                      issuer={asset?.issuer}
+                      isMPT={asset?.mpt_issuance_id !== undefined}
+                      shortenIssuer
+                      hideIssuer
+                    />
+                  )
+                }
+              />
               <TokenTableRow
                 label={t('total_value_locked')}
                 value={(() => {

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

@@ -375,8 +375,10 @@ describe('VaultHeader Component', () => {
         </TestWrapper>,
       )
 
-      // Verify the exact currency code is displayed
-      expect(screen.getByText('USD')).toBeInTheDocument()
+      // Verify the exact currency code is displayed and issuer is hidden
+      const currencyEl = screen.getByTestId('currency')
+      expect(currencyEl).toHaveTextContent('USD')
+      expect(currencyEl).not.toHaveTextContent('rIssuerAccount123')
     })
 
     it('displays truncated MPT ID as a link for MPT vaults', () => {
@@ -385,7 +387,6 @@ describe('VaultHeader Component', () => {
       const vaultData = {
         Owner: 'rTestOwner',
         Asset: {
-          currency: 'MPT',
           mpt_issuance_id: mptId,
         },
       }
@@ -400,12 +401,8 @@ describe('VaultHeader Component', () => {
         </TestWrapper>,
       )
 
-      // MPT ID should be truncated: first 8 chars + "..." + last 6 chars
-      const expectedTruncated = `${mptId.substring(0, 8)}...${mptId.substring(mptId.length - 6)}`
-      // expectedTruncated = "00001234...ABCDEF"
-
       // Should be a link to the MPT page with exact truncated text
-      const mptLink = screen.getByRole('link', { name: expectedTruncated })
+      const mptLink = screen.getByRole('link', { name: 'MPT (' + mptId + ')' })
       expect(mptLink.getAttribute('href')).toBe(`/mpt/${mptId}`)
     })
 
@@ -427,7 +424,7 @@ describe('VaultHeader Component', () => {
 
       // Should display "-" as fallback
       const assetRow = screen.getByText('Asset').closest('tr')
-      expect(assetRow).toHaveTextContent('-')
+      expect(assetRow).toHaveTextContent('AssetUnknown Currency Error')
     })
   })
 

src/containers/shared/components/Currency.tsx

@@ -14,6 +14,7 @@ export interface Props {
   shortenIssuer?: boolean
   displaySymbol?: boolean
   isMPT?: boolean
+  hideIssuer?: boolean
 }
 
 /*
@@ -28,6 +29,7 @@ const Currency = (props: Props) => {
     shortenIssuer = false,
     displaySymbol = true,
     isMPT = false,
+    hideIssuer = false,
   } = props
   let content: string
 
@@ -65,7 +67,7 @@ const Currency = (props: Props) => {
       display = `\uE900 ${display}`
     }
 
-    if (issuer) {
+    if (issuer && !hideIssuer) {
       display += '.'
       display += shortenIssuer ? issuer.substring(0, 4) : issuer
     }