tabledetails

Author: achowdhry-ripple

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

@@ -22,7 +22,7 @@ export const TableDetail = ({
           <span className="case-sensitive">{Issuer}</span>
         </div>
       )}
-      {Issuer && (
+      {CredentialType && (
         <div className="credential-type">
           <span className="label">{t('credential_type')}: </span>
           <span className="case-sensitive">

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

@@ -0,0 +1,47 @@
+import { useTranslation } from 'react-i18next'
+import { type CredentialCreate } from 'xrpl'
+import { TransactionTableDetailProps } from '../types'
+import { convertHexToString } from '../../../../../rippled/lib/utils'
+
+export const TableDetail = ({
+  instructions,
+}: TransactionTableDetailProps<CredentialCreate>) => {
+  const { t } = useTranslation()
+  const { Account, Subject, CredentialType, Expiration, URI } = instructions
+  return (
+    <div className="credential">
+      {Account && (
+        <div className="uri">
+          <span className="label">{t('account')}: </span>
+          <span className="case-sensitive">{Account}</span>
+        </div>
+      )}
+      {Subject && (
+        <div className="issuer">
+          <span className="label">{t('subject')}: </span>
+          <span className="case-sensitive">{Subject}</span>
+        </div>
+      )}
+      {CredentialType && (
+        <div className="credential-type">
+          <span className="label">{t('credential_type')}: </span>
+          <span className="case-sensitive">
+            {convertHexToString(CredentialType)}
+          </span>
+        </div>
+      )}
+      {Expiration && (
+        <div className="expiration">
+          <span className="label">{t('expiration')}: </span>
+          <span className="case-sensitive">{Expiration}</span>
+        </div>
+      )}
+      {URI && (
+        <div className="uri">
+          <span className="label">{t('uri')}: </span>
+          <span className="case-sensitive">{URI}</span>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,41 @@
+import { useTranslation } from 'react-i18next'
+import { type CredentialDelete } from 'xrpl'
+import { TransactionTableDetailProps } from '../types'
+import { convertHexToString } from '../../../../../rippled/lib/utils'
+
+export const TableDetail = ({
+  instructions,
+}: TransactionTableDetailProps<CredentialDelete>) => {
+  const { t } = useTranslation()
+  const { Account, Subject, Issuer, CredentialType } = instructions
+  return (
+    <div className="credential">
+      {Account && (
+        <div className="uri">
+          <span className="label">{t('account')}: </span>
+          <span className="case-sensitive">{Account}</span>
+        </div>
+      )}
+      {Subject && (
+        <div className="issuer">
+          <span className="label">{t('subject')}: </span>
+          <span className="case-sensitive">{Subject}</span>
+        </div>
+      )}
+      {Issuer && (
+        <div className="issuer">
+          <span className="label">{t('issuer')}: </span>
+          <span className="case-sensitive">{Issuer}</span>
+        </div>
+      )}
+      {CredentialType && (
+        <div className="credential-type">
+          <span className="label">{t('credential_type')}: </span>
+          <span className="case-sensitive">
+            {convertHexToString(CredentialType)}
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}