cleanup, formatting, tested'

Author: achowdhry-ripple

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

@@ -35,6 +35,9 @@ export const Simple = ({ data }: TransactionSimpleProps<DepositPreauth>) => {
       <SimpleGroup title={`${t('authorize')} ${t('accepted_credentials')}`}>
         {AuthorizeCredentials.map((cred, index) => (
           <div key={`${cred.Issuer}-${cred.CredentialType}`}>
+            {index > 0 && (
+              <div style={{ borderTop: '1px solid #444', margin: '12px 0' }} />
+            )}
             <SimpleRow
               label={t('credential_issuer')}
               data-testid={`credential-issuer-${index}`}
@@ -58,6 +61,9 @@ export const Simple = ({ data }: TransactionSimpleProps<DepositPreauth>) => {
       <SimpleGroup title={`${t('unauthorize')} ${t('accepted_credentials')}`}>
         {UnauthorizeCredentials.map((cred, index) => (
           <div key={`${cred.Issuer}-${cred.CredentialType}`}>
+            {index > 0 && (
+              <div style={{ borderTop: '1px solid #444', margin: '12px 0' }} />
+            )}
             <SimpleRow
               label={t('credential_issuer')}
               data-testid={`credential-issuer-${index}`}

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

@@ -0,0 +1,78 @@
+import { useTranslation } from 'react-i18next'
+import { TransactionTableDetailProps } from '../types'
+import { DepositPreauth } from './types'
+import { Account } from '../../Account'
+import { convertHexToString } from '../../../../../rippled/lib/utils'
+
+export const TableDetail = ({
+  instructions,
+}: TransactionTableDetailProps<DepositPreauth>) => {
+  const { t } = useTranslation()
+  const {
+    Authorize,
+    Unauthorize,
+    AuthorizeCredentials,
+    UnauthorizeCredentials,
+  } = instructions
+
+  if (Authorize) {
+    return (
+      <div className="deposit-preauth">
+        <span className="label">{t('authorize')}</span>
+        <Account account={Authorize} />
+      </div>
+    )
+  }
+
+  if (Unauthorize) {
+    return (
+      <div className="deposit-preauth">
+        <span className="label">{t('unauthorize')}</span>
+        <Account account={Unauthorize} />
+      </div>
+    )
+  }
+
+  if (AuthorizeCredentials && AuthorizeCredentials.length > 0) {
+    return (
+      <div className="deposit-preauth">
+        <span className="label">{t('authorize')} {t('accepted_credentials')}</span>
+        <div className="credentials">
+          {AuthorizeCredentials.map((cred, index) => (
+            <div key={`${cred.Issuer}-${cred.CredentialType}`} className="credential">
+              <span className="credential-type">
+                {convertHexToString(cred.CredentialType)}
+              </span>
+              <span className="credential-issuer">
+                <Account account={cred.Issuer} />
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  if (UnauthorizeCredentials && UnauthorizeCredentials.length > 0) {
+    return (
+      <div className="deposit-preauth">
+        <span className="label">{t('unauthorize')} {t('accepted_credentials')}</span>
+        <div className="credentials">
+          {UnauthorizeCredentials.map((cred, index) => (
+            <div key={`${cred.Issuer}-${cred.CredentialType}`} className="credential">
+              <span className="credential-type">
+                {convertHexToString(cred.CredentialType)}
+              </span>
+              <span className="credential-issuer">
+                <Account account={cred.Issuer} />
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  return null
+}
+

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

@@ -6,11 +6,13 @@ import {
 
 import { Simple } from './Simple'
 import { Description } from './Description'
+import { TableDetail } from './TableDetail'
 import { parser } from './parser'
 
 export const DepositPreauthTransaction: TransactionMapping = {
   Description,
   Simple,
+  TableDetail,
   parser,
   action: TransactionAction.MODIFY,
   category: TransactionCategory.ACCOUNT,

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

@@ -20,18 +20,22 @@ const transformCredentials = (credentials: any[]): CredentialAuth[] =>
 export const parser = (tx: any): DepositPreauth => {
   // Handle AuthorizeCredentials (both nested and flat structures)
   if (tx.AuthorizeCredentials) {
-    return {
-      ...tx,
+    const { Authorize, Unauthorize, ...rest } = tx
+    const result = {
+      ...rest,
       AuthorizeCredentials: transformCredentials(tx.AuthorizeCredentials),
     } as DepositPreauth
+    return result
   }
 
   // Handle UnauthorizeCredentials (both nested and flat structures)
   if (tx.UnauthorizeCredentials) {
-    return {
-      ...tx,
+    const { Authorize, Unauthorize, ...rest } = tx
+    const result = {
+      ...rest,
       UnauthorizeCredentials: transformCredentials(tx.UnauthorizeCredentials),
     } as DepositPreauth
+    return result
   }
 
   // For Authorize/Unauthorize fields (string-based), pass through unchanged