Merge branch 'staging'

Author: kuan121

src/containers/Token/IOU/Header/index.tsx

@@ -158,15 +158,15 @@ export const Header = ({
           <Currency currency={currency} />
           {tokenData.issuer_name && (
             <div className="token-issuer-wrap">
+              (
               <span className="issuer-name">
-                (
                 {tokenData.issuer_name
                   .trim()
                   .toUpperCase()
                   .replace(/\(/g, '')
                   .replace(/\)/g, '')}
-                )
               </span>
+              )
             </div>
           )}
         </div>

src/containers/Token/IOU/test/Header/Header.test.tsx

@@ -118,7 +118,7 @@ describe('Header Component', () => {
   })
 
   it('displays issuer name when available', () => {
-    render(
+    const { container } = render(
       <TestWrapper>
         <Header
           currency="USD"
@@ -129,7 +129,9 @@ describe('Header Component', () => {
         />
       </TestWrapper>,
     )
-    expect(screen.getByText('(TEST ISSUER)')).toBeInTheDocument()
+    const issuerNameSpan = container.querySelector('.issuer-name')
+    expect(issuerNameSpan).toBeInTheDocument()
+    expect(issuerNameSpan?.textContent).toBe('TEST ISSUER')
   })
 
   it('displays issuer domain link when available', () => {
@@ -340,7 +342,7 @@ describe('Header Component', () => {
       ...mockTokenData,
       issuer_name: '(Test) Issuer (Name)',
     }
-    render(
+    const { container } = render(
       <TestWrapper>
         <Header
           currency="USD"
@@ -351,7 +353,10 @@ describe('Header Component', () => {
         />
       </TestWrapper>,
     )
-    expect(screen.getByText('(TEST ISSUER NAME)')).toBeInTheDocument()
+
+    const issuerNameSpan = container.querySelector('.issuer-name')
+    expect(issuerNameSpan).toBeInTheDocument()
+    expect(issuerNameSpan?.textContent).toBe('TEST ISSUER NAME')
   })
 
   it('handles missing issuer name', () => {

src/containers/Token/MPT/Header/index.tsx

@@ -164,9 +164,8 @@ export const Header = (props: Props) => {
           {/* Show issuer name if available */}
           {issuerName && (
             <div className="token-issuer-wrap">
-              <span className="issuer-name">
-                ({shortenAccount(issuerName)})
-              </span>
+              (<span className="issuer-name">{shortenAccount(issuerName)}</span>
+              )
             </div>
           )}
         </div>