From 524861ffb9fc6223add524cfd87104371eb98956 Mon Sep 17 00:00:00 2001
From: pandablue0809 <bluep0415@gmail.com>
Date: Mon, 22 Sep 2025 01:39:05 +0900
Subject: [PATCH 1/5] add full support in credentials

---
 .../Transaction/TransactionCredential.js      | 152 ++++++++++++++++++
 components/Transaction/index.js               |   1 +
 pages/transaction/[id].js                     |   3 +
 3 files changed, 156 insertions(+)
 create mode 100644 components/Transaction/TransactionCredential.js

diff --git a/components/Transaction/TransactionCredential.js b/components/Transaction/TransactionCredential.js
new file mode 100644
index 000000000..62be980a1
--- /dev/null
+++ b/components/Transaction/TransactionCredential.js
@@ -0,0 +1,152 @@
+import { TData } from '../Table'
+
+import { TransactionCard } from './TransactionCard'
+import { AddressWithIconFilled } from '../../utils/format'
+
+const CredentialList = ({ credentials, title }) => {
+  if (!credentials || credentials.length === 0) return null
+
+  return (
+    <tr>
+      <TData className="bold">{title}</TData>
+      <TData>
+        <div>
+          {credentials.map((credential, index) => (
+            <div key={index} style={{ marginBottom: '8px', padding: '8px', border: '1px solid #ddd', borderRadius: '4px' }}>
+              <div style={{ 
+                display: 'flex', 
+                alignItems: 'center',
+                flexWrap: 'wrap',
+                gap: '4px'
+              }}>
+                <div style={{ 
+                  flex: '0 0 auto',
+                  minWidth: 'fit-content'
+                }}>
+                  <strong>Issuer:</strong>
+                </div>
+                <div style={{ 
+                  flex: '1 1 auto',
+                  minWidth: '140px'
+                }}>
+                  <AddressWithIconFilled data={credential} name="issuer" />
+                </div>
+              </div>
+              <div><strong>Type:</strong> {credential.type || <span className="orange">Unknown</span>}</div>
+            </div>
+          ))}
+        </div>
+      </TData>
+    </tr>
+  )
+}
+
+export const TransactionCredential = ({ data, pageFiatRate, selectedCurrency }) => {
+  if (!data) return null
+  const { specification, outcome, tx } = data
+  const txType = tx?.TransactionType
+  const isDepositPreauth = txType === 'DepositPreauth'
+
+  return (
+    <TransactionCard
+      data={data}
+      pageFiatRate={pageFiatRate}
+      selectedCurrency={selectedCurrency}
+    >
+      <tr>
+        <TData>Initiated by</TData>
+        <TData>
+          <AddressWithIconFilled data={specification?.source} name="address" />
+        </TData>
+      </tr>
+      {isDepositPreauth && tx.Authorize && (
+        <tr>
+          <TData className="bold">Authorize</TData>
+          <TData>
+            <AddressWithIconFilled data={tx.Authorize} name="address" />
+          </TData>
+        </tr>
+      )}
+      {isDepositPreauth && tx.Unauthorize && (
+        <tr>
+          <TData className="bold">Unauthorize</TData>
+          <TData>
+            <AddressWithIconFilled data={tx.Unauthorize} name="address" />
+          </TData>
+        </tr>
+      )}
+      {!isDepositPreauth && (
+        <>
+          {txType === 'CredentialDelete' && (
+            <tr>
+              <TData>Account</TData>
+              <TData>
+                <AddressWithIconFilled data={specification?.source} name="address" />
+              </TData>
+            </tr>
+          )}
+          <tr>
+            <TData>
+              {txType === 'CredentialCreate' ? 'Account' : 'Issuer'}
+            </TData>
+            <TData>
+              <AddressWithIconFilled data={outcome?.credentialChanges} name="issuer" />
+            </TData>
+          </tr>
+          <tr>
+            <TData>
+              {txType === 'CredentialCreate' || txType === 'CredentialDelete' ? 'Subject' : 'Account'}
+            </TData>
+            <TData>
+              <AddressWithIconFilled data={outcome?.credentialChanges} name="subject" />
+            </TData>
+          </tr>
+          <tr>
+            <TData>Credential Type</TData>
+            <TData>{outcome?.credentialChanges?.credentialType}</TData>
+          </tr>
+          {outcome?.credentialChanges?.flags && (
+            <tr>
+              <TData>Flags</TData>
+              <TData>
+                <div>
+                  <div>Accepted: <span className={outcome.credentialChanges.flags.accepted ? 'green' : 'red'}>
+                    {outcome.credentialChanges.flags.accepted ? 'Yes' : 'No'}
+                  </span></div>
+                </div>
+              </TData>
+            </tr>
+          )}
+        </>
+      )}
+      <CredentialList 
+        credentials={specification?.authorizeCredentials} 
+        title="Authorize Credentials" 
+      />
+      <CredentialList 
+        credentials={specification?.unauthorizeCredentials} 
+        title="Unauthorize Credentials" 
+      />
+      {!isDepositPreauth && specification?.expiration !== undefined && (
+        <tr>
+          <TData>Expiration</TData>
+          <TData>{specification.expiration}</TData>
+        </tr>
+      )}
+      {!isDepositPreauth && specification?.uri && (
+        <tr>
+          <TData>URI</TData>
+          <TData>
+            {specification.uri.startsWith('http') ? (
+              <a href={specification.uri} target="_blank" rel="noopener">
+                {specification.uri}
+              </a>
+            ) : (
+              specification.uri
+            )}
+          </TData>
+        </tr>
+      )}
+    </TransactionCard>
+  )
+}
diff --git a/components/Transaction/index.js b/components/Transaction/index.js
index e722479d6..dd44f773f 100644
--- a/components/Transaction/index.js
+++ b/components/Transaction/index.js
@@ -4,6 +4,7 @@ export { TransactionDetails } from './TransactionDetails'
 export { TransactionAccountDelete } from './TransactionAccountDelete'
 export { TransactionAccountSet } from './TransactionAccountSet'
 export { TransactionCheck } from './TransactionCheck'
+export { TransactionCredential } from './TransactionCredential'
 export { TransactionDelegateSet } from './TransactionDelegateSet'
 export { TransactionEscrow } from './TransactionEscrow'
 export { TransactionNFToken } from './TransactionNFToken'
diff --git a/pages/transaction/[id].js b/pages/transaction/[id].js
index d60efc2f2..618af7840 100644
--- a/pages/transaction/[id].js
+++ b/pages/transaction/[id].js
@@ -12,6 +12,7 @@ import {
   TransactionAccountSet,
   TransactionAMM,
   TransactionCheck,
+  TransactionCredential,
   TransactionDID,
   TransactionEscrow,
   TransactionImport,
@@ -94,6 +95,8 @@ export default function Transaction({ data, selectedCurrency }) {
     TransactionComponent = TransactionAMM
   } else if (txType?.includes('Check')) {
     TransactionComponent = TransactionCheck
+  } else if (txType === 'CredentialCreate' || txType === 'CredentialAccept' || txType === 'CredentialDelete' || txType === 'DepositPreauth') {
+    TransactionComponent = TransactionCredential
   } else if (txType?.includes('Escrow')) {
     TransactionComponent = TransactionEscrow
   } else if (txType === 'Import') {

From 1c3dd81c669e5dee3786e97387fd07c79f5f449c Mon Sep 17 00:00:00 2001
From: Viacheslav Bakshaev <bakshaev@protonmail.ch>
Date: Sun, 12 Oct 2025 14:56:37 +0200
Subject: [PATCH 2/5] CredentialCreate updates

---
 .../Transaction/TransactionCredential.js      | 100 ++++++++----------
 1 file changed, 46 insertions(+), 54 deletions(-)

diff --git a/components/Transaction/TransactionCredential.js b/components/Transaction/TransactionCredential.js
index 62be980a1..4d751d442 100644
--- a/components/Transaction/TransactionCredential.js
+++ b/components/Transaction/TransactionCredential.js
@@ -1,7 +1,9 @@
 import { TData } from '../Table'
 
 import { TransactionCard } from './TransactionCard'
-import { AddressWithIconFilled } from '../../utils/format'
+import { AddressWithIconFilled, fullDateAndTime } from '../../utils/format'
+import { decode } from '../../utils'
+import CopyButton from '../UI/CopyButton'
 
 const CredentialList = ({ credentials, title }) => {
   if (!credentials || credentials.length === 0) return null
@@ -12,27 +14,38 @@ const CredentialList = ({ credentials, title }) => {
       <TData>
         <div>
           {credentials.map((credential, index) => (
-            <div key={index} style={{ marginBottom: '8px', padding: '8px', border: '1px solid #ddd', borderRadius: '4px' }}>
-              <div style={{ 
-                display: 'flex', 
-                alignItems: 'center',
-                flexWrap: 'wrap',
-                gap: '4px'
-              }}>
-                <div style={{ 
-                  flex: '0 0 auto',
-                  minWidth: 'fit-content'
-                }}>
+            <div
+              key={index}
+              style={{ marginBottom: '8px', padding: '8px', border: '1px solid #ddd', borderRadius: '4px' }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  flexWrap: 'wrap',
+                  gap: '4px'
+                }}
+              >
+                <div
+                  style={{
+                    flex: '0 0 auto',
+                    minWidth: 'fit-content'
+                  }}
+                >
                   <strong>Issuer:</strong>
                 </div>
-                <div style={{ 
-                  flex: '1 1 auto',
-                  minWidth: '140px'
-                }}>
+                <div
+                  style={{
+                    flex: '1 1 auto',
+                    minWidth: '140px'
+                  }}
+                >
                   <AddressWithIconFilled data={credential} name="issuer" />
                 </div>
               </div>
-              <div><strong>Type:</strong> {credential.type || <span className="orange">Unknown</span>}</div>
+              <div>
+                <strong>Type:</strong> {credential.type || <span className="orange">Unknown</span>}
+              </div>
             </div>
           ))}
         </div>
@@ -48,11 +61,7 @@ export const TransactionCredential = ({ data, pageFiatRate, selectedCurrency })
   const isDepositPreauth = txType === 'DepositPreauth'
 
   return (
-    <TransactionCard
-      data={data}
-      pageFiatRate={pageFiatRate}
-      selectedCurrency={selectedCurrency}
-    >
+    <TransactionCard data={data} pageFiatRate={pageFiatRate} selectedCurrency={selectedCurrency}>
       <tr>
         <TData>Initiated by</TData>
         <TData>
@@ -86,65 +95,48 @@ export const TransactionCredential = ({ data, pageFiatRate, selectedCurrency })
             </tr>
           )}
           <tr>
-            <TData>
-              {txType === 'CredentialCreate' ? 'Account' : 'Issuer'}
-            </TData>
+            <TData>{txType === 'CredentialCreate' ? 'Account' : 'Issuer'}</TData>
             <TData>
               <AddressWithIconFilled data={outcome?.credentialChanges} name="issuer" />
             </TData>
           </tr>
           <tr>
-            <TData>
-              {txType === 'CredentialCreate' || txType === 'CredentialDelete' ? 'Subject' : 'Account'}
-            </TData>
+            <TData>{txType === 'CredentialCreate' || txType === 'CredentialDelete' ? 'Subject' : 'Account'}</TData>
             <TData>
               <AddressWithIconFilled data={outcome?.credentialChanges} name="subject" />
             </TData>
           </tr>
           <tr>
             <TData>Credential Type</TData>
-            <TData>{outcome?.credentialChanges?.credentialType}</TData>
+            <TData>
+              {decode(outcome?.credentialChanges?.credentialType)}{' '}
+              <CopyButton text={outcome?.credentialChanges?.credentialType} />
+            </TData>
           </tr>
           {outcome?.credentialChanges?.flags && (
             <tr>
-              <TData>Flags</TData>
+              <TData>Flag</TData>
               <TData>
-                <div>
-                  <div>Accepted: <span className={outcome.credentialChanges.flags.accepted ? 'green' : 'red'}>
-                    {outcome.credentialChanges.flags.accepted ? 'Yes' : 'No'}
-                  </span></div>
-                </div>
+                <span className={outcome.credentialChanges.flags.accepted ? 'green' : 'red'}>
+                  {outcome.credentialChanges.flags.accepted ? 'Accepted' : 'Not accepted'}
+                </span>
               </TData>
             </tr>
           )}
         </>
       )}
-      <CredentialList 
-        credentials={specification?.authorizeCredentials} 
-        title="Authorize Credentials" 
-      />
-      <CredentialList 
-        credentials={specification?.unauthorizeCredentials} 
-        title="Unauthorize Credentials" 
-      />
-      {!isDepositPreauth && specification?.expiration !== undefined && (
+      <CredentialList credentials={specification?.authorizeCredentials} title="Authorize Credentials" />
+      <CredentialList credentials={specification?.unauthorizeCredentials} title="Unauthorize Credentials" />
+      {!isDepositPreauth && specification?.expiration && (
         <tr>
           <TData>Expiration</TData>
-          <TData>{specification.expiration}</TData>
+          <TData>{fullDateAndTime(specification.expiration, 'ripple')}</TData>
         </tr>
       )}
       {!isDepositPreauth && specification?.uri && (
         <tr>
           <TData>URI</TData>
-          <TData>
-            {specification.uri.startsWith('http') ? (
-              <a href={specification.uri} target="_blank" rel="noopener">
-                {specification.uri}
-              </a>
-            ) : (
-              specification.uri
-            )}
-          </TData>
+          <TData>{decode(specification.uri)}</TData>
         </tr>
       )}
     </TransactionCard>

From 77ca33dd0d599fded84816260ecee56b04f7442a Mon Sep 17 00:00:00 2001
From: Viacheslav Bakshaev <bakshaev@protonmail.ch>
Date: Sun, 12 Oct 2025 15:04:02 +0200
Subject: [PATCH 3/5] CredentialCreate fixes

---
 .../Transaction/TransactionCredential.js      | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/components/Transaction/TransactionCredential.js b/components/Transaction/TransactionCredential.js
index 4d751d442..a001d4269 100644
--- a/components/Transaction/TransactionCredential.js
+++ b/components/Transaction/TransactionCredential.js
@@ -63,7 +63,15 @@ export const TransactionCredential = ({ data, pageFiatRate, selectedCurrency })
   return (
     <TransactionCard data={data} pageFiatRate={pageFiatRate} selectedCurrency={selectedCurrency}>
       <tr>
-        <TData>Initiated by</TData>
+        <TData>
+          Initiated by
+          {txType === 'CredentialCreate' && (
+            <>
+              <br />
+              issuer
+            </>
+          )}
+        </TData>
         <TData>
           <AddressWithIconFilled data={specification?.source} name="address" />
         </TData>
@@ -94,12 +102,14 @@ export const TransactionCredential = ({ data, pageFiatRate, selectedCurrency })
               </TData>
             </tr>
           )}
-          <tr>
-            <TData>{txType === 'CredentialCreate' ? 'Account' : 'Issuer'}</TData>
-            <TData>
-              <AddressWithIconFilled data={outcome?.credentialChanges} name="issuer" />
-            </TData>
-          </tr>
+          {txType !== 'CredentialCreate' && (
+            <tr>
+              <TData>Issuer</TData>
+              <TData>
+                <AddressWithIconFilled data={outcome?.credentialChanges} name="issuer" />
+              </TData>
+            </tr>
+          )}
           <tr>
             <TData>{txType === 'CredentialCreate' || txType === 'CredentialDelete' ? 'Subject' : 'Account'}</TData>
             <TData>

From 72155186d2036a1df32cfe366490aa7fef20df47 Mon Sep 17 00:00:00 2001
From: Viacheslav Bakshaev <bakshaev@protonmail.ch>
Date: Sun, 12 Oct 2025 15:21:51 +0200
Subject: [PATCH 4/5] CredentialCreate - hydration and subject details fixes

---
 components/Transaction/TransactionCredential.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/Transaction/TransactionCredential.js b/components/Transaction/TransactionCredential.js
index a001d4269..4bbed421c 100644
--- a/components/Transaction/TransactionCredential.js
+++ b/components/Transaction/TransactionCredential.js
@@ -1,5 +1,4 @@
 import { TData } from '../Table'
-
 import { TransactionCard } from './TransactionCard'
 import { AddressWithIconFilled, fullDateAndTime } from '../../utils/format'
 import { decode } from '../../utils'
@@ -113,13 +112,13 @@ export const TransactionCredential = ({ data, pageFiatRate, selectedCurrency })
           <tr>
             <TData>{txType === 'CredentialCreate' || txType === 'CredentialDelete' ? 'Subject' : 'Account'}</TData>
             <TData>
-              <AddressWithIconFilled data={outcome?.credentialChanges} name="subject" />
+              <AddressWithIconFilled data={specification || outcome?.credentialChanges} name="subject" />
             </TData>
           </tr>
           <tr>
-            <TData>Credential Type</TData>
+            <TData>Credential type</TData>
             <TData>
-              {decode(outcome?.credentialChanges?.credentialType)}{' '}
+              <span suppressHydrationWarning>{decode(outcome?.credentialChanges?.credentialType)}</span>{' '}
               <CopyButton text={outcome?.credentialChanges?.credentialType} />
             </TData>
           </tr>

From 96e07f23f4a0f1c7de8f78427b9d2999e1790c91 Mon Sep 17 00:00:00 2001
From: Viacheslav Bakshaev <bakshaev@protonmail.ch>
Date: Sun, 12 Oct 2025 15:52:57 +0200
Subject: [PATCH 5/5] CredentialDelete fixes

---
 .../Transaction/TransactionCredential.js      | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/components/Transaction/TransactionCredential.js b/components/Transaction/TransactionCredential.js
index 4bbed421c..b2261bc5b 100644
--- a/components/Transaction/TransactionCredential.js
+++ b/components/Transaction/TransactionCredential.js
@@ -70,6 +70,12 @@ export const TransactionCredential = ({ data, pageFiatRate, selectedCurrency })
               issuer
             </>
           )}
+          {outcome?.credentialChanges.subject === specification?.source && (
+            <>
+              <br />
+              subject
+            </>
+          )}
         </TData>
         <TData>
           <AddressWithIconFilled data={specification?.source} name="address" />
@@ -93,32 +99,26 @@ export const TransactionCredential = ({ data, pageFiatRate, selectedCurrency })
       )}
       {!isDepositPreauth && (
         <>
-          {txType === 'CredentialDelete' && (
+          {specification.issuer && (
             <tr>
-              <TData>Account</TData>
+              <TData>Issuer</TData>
               <TData>
-                <AddressWithIconFilled data={specification?.source} name="address" />
+                <AddressWithIconFilled data={specification} name="issuer" />
               </TData>
             </tr>
           )}
-          {txType !== 'CredentialCreate' && (
+          {specification?.subject && (
             <tr>
-              <TData>Issuer</TData>
+              <TData>Subject</TData>
               <TData>
-                <AddressWithIconFilled data={outcome?.credentialChanges} name="issuer" />
+                <AddressWithIconFilled data={specification} name="subject" />
               </TData>
             </tr>
           )}
-          <tr>
-            <TData>{txType === 'CredentialCreate' || txType === 'CredentialDelete' ? 'Subject' : 'Account'}</TData>
-            <TData>
-              <AddressWithIconFilled data={specification || outcome?.credentialChanges} name="subject" />
-            </TData>
-          </tr>
           <tr>
             <TData>Credential type</TData>
             <TData>
-              <span suppressHydrationWarning>{decode(outcome?.credentialChanges?.credentialType)}</span>{' '}
+              {outcome?.credentialChanges?.credentialType}{' '}
               <CopyButton text={outcome?.credentialChanges?.credentialType} />
             </TData>
           </tr>