From efbbce0fe94153657876329dfc6c8c73c1d5d546 Mon Sep 17 00:00:00 2001
From: Ashray Chowdhry <achowdhry@ripple.com>
Date: Wed, 29 Jan 2025 14:28:24 -0500
Subject: [PATCH] tabledetails for permissioneddomain

---
 .../CredentialAccept/TableDetail.tsx          |  4 +--
 .../test/CredentialAcceptTableDetail.test.tsx | 27 ++++++++++++++++
 .../CredentialCreate/TableDetail.tsx          |  4 +--
 .../CredentialDelete/TableDetail.tsx          |  4 +--
 .../PermissionedDomainDelete/TableDetail.tsx  | 26 +++++++++++++++
 .../PermissionedDomainSet/TableDetail.tsx     | 32 +++++++++++++++++++
 6 files changed, 91 insertions(+), 6 deletions(-)
 create mode 100644 src/containers/shared/components/Transaction/CredentialAccept/test/CredentialAcceptTableDetail.test.tsx
 create mode 100644 src/containers/shared/components/Transaction/PermissionedDomainDelete/TableDetail.tsx
 create mode 100644 src/containers/shared/components/Transaction/PermissionedDomainSet/TableDetail.tsx

diff --git a/src/containers/shared/components/Transaction/CredentialAccept/TableDetail.tsx b/src/containers/shared/components/Transaction/CredentialAccept/TableDetail.tsx
index 32ab09e67..c3462a5b9 100644
--- a/src/containers/shared/components/Transaction/CredentialAccept/TableDetail.tsx
+++ b/src/containers/shared/components/Transaction/CredentialAccept/TableDetail.tsx
@@ -9,9 +9,9 @@ export const TableDetail = ({
   const { t } = useTranslation()
   const { Account, Issuer, CredentialType } = instructions
   return (
-    <div className="credential">
+    <div className="credentialAccept">
       {Account && (
-        <div className="uri">
+        <div className="account">
           <span className="label">{t('account')}: </span>
           <span className="case-sensitive">{Account}</span>
         </div>
diff --git a/src/containers/shared/components/Transaction/CredentialAccept/test/CredentialAcceptTableDetail.test.tsx b/src/containers/shared/components/Transaction/CredentialAccept/test/CredentialAcceptTableDetail.test.tsx
new file mode 100644
index 000000000..569299c54
--- /dev/null
+++ b/src/containers/shared/components/Transaction/CredentialAccept/test/CredentialAcceptTableDetail.test.tsx
@@ -0,0 +1,27 @@
+import { createTableDetailWrapperFactory } from '../../test'
+import { TableDetail } from '../TableDetail'
+import mockCredentialAccept from './mock_data/CredentialAccept.json'
+
+const createWrapper = createTableDetailWrapperFactory(TableDetail)
+
+describe('CredentialAcceptTableDetail', () => {
+  it('renders CredentialAccept without crashing', () => {
+    const wrapper = createWrapper(mockCredentialAccept)
+
+    expect(wrapper.find('[data-test="account"]')).toHaveText(
+      ` rLbgNAngLq3HABBXK4uPGCHrqeZwgaYi7q `,
+    )
+    expect(wrapper.find('[data-test="amount"]')).toHaveText(`997.50 XRP`)
+    expect(wrapper.find('[data-test="condition"]')).toHaveText(
+      ` A0258020886F982742772F414243855DC13B348FC78FB3D5119412C8A6480114E36A4451810120 `,
+    )
+    expect(wrapper.find('[data-test="finish_after"]')).toHaveText(
+      `March 1, 2020 at 9:01:00 AM UTC`,
+    )
+    expect(wrapper.find('[data-test="cancel_after"]')).toHaveText(
+      `March 1, 2020 at 8:54:20 AM UTC`,
+    )
+
+    wrapper.unmount()
+  })
+})
diff --git a/src/containers/shared/components/Transaction/CredentialCreate/TableDetail.tsx b/src/containers/shared/components/Transaction/CredentialCreate/TableDetail.tsx
index 130dbb44c..2abceec3c 100644
--- a/src/containers/shared/components/Transaction/CredentialCreate/TableDetail.tsx
+++ b/src/containers/shared/components/Transaction/CredentialCreate/TableDetail.tsx
@@ -9,9 +9,9 @@ export const TableDetail = ({
   const { t } = useTranslation()
   const { Account, Subject, CredentialType, Expiration, URI } = instructions
   return (
-    <div className="credential">
+    <div className="credentialCreate">
       {Account && (
-        <div className="uri">
+        <div className="account">
           <span className="label">{t('account')}: </span>
           <span className="case-sensitive">{Account}</span>
         </div>
diff --git a/src/containers/shared/components/Transaction/CredentialDelete/TableDetail.tsx b/src/containers/shared/components/Transaction/CredentialDelete/TableDetail.tsx
index a6bf9d8e2..86dbf4f46 100644
--- a/src/containers/shared/components/Transaction/CredentialDelete/TableDetail.tsx
+++ b/src/containers/shared/components/Transaction/CredentialDelete/TableDetail.tsx
@@ -9,9 +9,9 @@ export const TableDetail = ({
   const { t } = useTranslation()
   const { Account, Subject, Issuer, CredentialType } = instructions
   return (
-    <div className="credential">
+    <div className="credentialDelete">
       {Account && (
-        <div className="uri">
+        <div className="account">
           <span className="label">{t('account')}: </span>
           <span className="case-sensitive">{Account}</span>
         </div>
diff --git a/src/containers/shared/components/Transaction/PermissionedDomainDelete/TableDetail.tsx b/src/containers/shared/components/Transaction/PermissionedDomainDelete/TableDetail.tsx
new file mode 100644
index 000000000..d3e827f14
--- /dev/null
+++ b/src/containers/shared/components/Transaction/PermissionedDomainDelete/TableDetail.tsx
@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next'
+import { type PermissionedDomainDelete } from 'xrpl'
+import { TransactionTableDetailProps } from '../types'
+
+export const TableDetail = ({
+  instructions,
+}: TransactionTableDetailProps<PermissionedDomainDelete>) => {
+  const { t } = useTranslation()
+  const { Account, DomainID } = instructions
+  return (
+    <div className="permissionedDomainDelete">
+      {Account && (
+        <div className="account">
+          <span className="label">{t('account')}: </span>
+          <span className="case-sensitive">{Account}</span>
+        </div>
+      )}
+      {DomainID && (
+        <div className="domainId">
+          <span className="label">{t('domain_id')}: </span>
+          <span className="case-sensitive">{DomainID}</span>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/containers/shared/components/Transaction/PermissionedDomainSet/TableDetail.tsx b/src/containers/shared/components/Transaction/PermissionedDomainSet/TableDetail.tsx
new file mode 100644
index 000000000..746e5c1e1
--- /dev/null
+++ b/src/containers/shared/components/Transaction/PermissionedDomainSet/TableDetail.tsx
@@ -0,0 +1,32 @@
+import { useTranslation } from 'react-i18next'
+import { type PermissionedDomainSet } from 'xrpl'
+import { TransactionTableDetailProps } from '../types'
+
+export const TableDetail = ({
+  instructions,
+}: TransactionTableDetailProps<PermissionedDomainSet>) => {
+  const { t } = useTranslation()
+  const { Account, DomainID, AcceptedCredentials } = instructions
+  return (
+    <div className="permissionedDomainSet">
+      {Account && (
+        <div className="account">
+          <span className="label">{t('account')}: </span>
+          <span className="case-sensitive">{Account}</span>
+        </div>
+      )}
+      {DomainID && (
+        <div className="domainId">
+          <span className="label">{t('domain_id')}: </span>
+          <span className="case-sensitive">{DomainID}</span>
+        </div>
+      )}
+      {AcceptedCredentials && (
+        <div className="acceptedCredentials">
+          <span className="label">{t('accepted_credentials')}: </span>
+          <span className="case-sensitive">{AcceptedCredentials}</span>
+        </div>
+      )}
+    </div>
+  )
+}