Fix parser to handle both nested and flat credential structures, use SimpleGroup for better UI

Co-authored-by: mvadari <8029314+mvadari@users.noreply.github.com>

Author: Copilot

src/containers/shared/components/Transaction/DepositPreauth/Simple.tsx

@@ -1,32 +1,10 @@
 import { useTranslation } from 'react-i18next'
 import { SimpleRow } from '../SimpleRow'
+import { SimpleGroup } from '../SimpleGroup'
 import { TransactionSimpleProps } from '../types'
 import { DepositPreauth, CredentialAuth } from './types'
 import { convertHexToString } from '../../../../../rippled/lib/utils'
 
-const renderCredentials = (credentials: CredentialAuth[], t: any) => {
-  return (
-    <>
-      {credentials.map((cred, index) => (
-        <div key={`${cred.Issuer}-${cred.CredentialType}`}>
-          <SimpleRow 
-            label={index === 0 ? t('credential_issuer') : ''} 
-            data-testid={`credential-issuer-${index}`}
-          >
-            {cred.Issuer}
-          </SimpleRow>
-          <SimpleRow 
-            label={index === 0 ? t('credential_type') : ''} 
-            data-testid={`credential-type-${index}`}
-          >
-            {convertHexToString(cred.CredentialType)}
-          </SimpleRow>
-        </div>
-      ))}
-    </>
-  )
-}
-
 export const Simple = ({ data }: TransactionSimpleProps<DepositPreauth>) => {
   const { t } = useTranslation()
   const { Authorize, Unauthorize, AuthorizeCredentials, UnauthorizeCredentials } = data.instructions
@@ -49,23 +27,47 @@ export const Simple = ({ data }: TransactionSimpleProps<DepositPreauth>) => {
 
   if (AuthorizeCredentials && AuthorizeCredentials.length > 0) {
     return (
-      <>
-        <SimpleRow label={t('authorize')} data-testid="authorize-credentials-label">
-          {t('accepted_credentials')}
-        </SimpleRow>
-        {renderCredentials(AuthorizeCredentials, t)}
-      </>
+      <SimpleGroup title={`${t('authorize')} ${t('accepted_credentials')}`}>
+        {AuthorizeCredentials.map((cred, index) => (
+          <div key={`${cred.Issuer}-${cred.CredentialType}`}>
+            <SimpleRow 
+              label={t('credential_issuer')} 
+              data-testid={`credential-issuer-${index}`}
+            >
+              {cred.Issuer}
+            </SimpleRow>
+            <SimpleRow 
+              label={t('credential_type')} 
+              data-testid={`credential-type-${index}`}
+            >
+              {convertHexToString(cred.CredentialType)}
+            </SimpleRow>
+          </div>
+        ))}
+      </SimpleGroup>
     )
   }
 
   if (UnauthorizeCredentials && UnauthorizeCredentials.length > 0) {
     return (
-      <>
-        <SimpleRow label={t('unauthorize')} data-testid="unauthorize-credentials-label">
-          {t('accepted_credentials')}
-        </SimpleRow>
-        {renderCredentials(UnauthorizeCredentials, t)}
-      </>
+      <SimpleGroup title={`${t('unauthorize')} ${t('accepted_credentials')}`}>
+        {UnauthorizeCredentials.map((cred, index) => (
+          <div key={`${cred.Issuer}-${cred.CredentialType}`}>
+            <SimpleRow 
+              label={t('credential_issuer')} 
+              data-testid={`credential-issuer-${index}`}
+            >
+              {cred.Issuer}
+            </SimpleRow>
+            <SimpleRow 
+              label={t('credential_type')} 
+              data-testid={`credential-type-${index}`}
+            >
+              {convertHexToString(cred.CredentialType)}
+            </SimpleRow>
+          </div>
+        ))}
+      </SimpleGroup>
     )
   }
 

src/containers/shared/components/Transaction/DepositPreauth/parser.ts

@@ -2,22 +2,33 @@ import { CredentialAuth, DepositPreauth } from './types'
 
 // Transform the nested XRPL credential structure to flat CredentialAuth objects
 const transformCredentials = (credentials: any[]): CredentialAuth[] => {
-  return credentials.map((item) => ({
-    Issuer: item.Credential.Issuer,
-    CredentialType: item.Credential.CredentialType,
-  }))
+  return credentials.map((item) => {
+    // Check if it's nested (has Credential wrapper) or already flat
+    if (item.Credential) {
+      return {
+        Issuer: item.Credential.Issuer,
+        CredentialType: item.Credential.CredentialType,
+      }
+    } else {
+      // Already flat, return as-is
+      return {
+        Issuer: item.Issuer,
+        CredentialType: item.CredentialType,
+      }
+    }
+  })
 }
 
 export const parser = (tx: any): DepositPreauth => {
-  // Handle AuthorizeCredentials with nested structure
+  // Handle AuthorizeCredentials (both nested and flat structures)
   if (tx.AuthorizeCredentials) {
     return {
       ...tx,
       AuthorizeCredentials: transformCredentials(tx.AuthorizeCredentials),
     } as DepositPreauth
   }
 
-  // Handle UnauthorizeCredentials with nested structure
+  // Handle UnauthorizeCredentials (both nested and flat structures)
   if (tx.UnauthorizeCredentials) {
     return {
       ...tx,