From 7801da41dc56b27a6ba0295b80ed535901fd5662 Mon Sep 17 00:00:00 2001
From: Phu Pham <ppham@ripple.com>
Date: Thu, 10 Oct 2024 15:50:54 -0400
Subject: [PATCH] add metadata styling

---
 src/containers/MPT/MPTHeader/Details.tsx         | 16 ++++++++++++++--
 src/containers/MPT/MPTHeader/styles.scss         |  4 ++++
 .../Transaction/MPTokenIssuanceCreate/Simple.tsx | 10 ++++++++--
 .../MPTokenIssuanceCreate/styles.scss            |  3 +++
 src/containers/shared/utils.js                   |  9 +++++++++
 5 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 src/containers/shared/components/Transaction/MPTokenIssuanceCreate/styles.scss

diff --git a/src/containers/MPT/MPTHeader/Details.tsx b/src/containers/MPT/MPTHeader/Details.tsx
index b980380c0..6a0e3d9f1 100644
--- a/src/containers/MPT/MPTHeader/Details.tsx
+++ b/src/containers/MPT/MPTHeader/Details.tsx
@@ -1,9 +1,10 @@
 import { useTranslation } from 'react-i18next'
 import './styles.scss'
 import { useLanguage } from '../../shared/hooks'
-import { localizeNumber } from '../../shared/utils'
+import { isValidJsonString, localizeNumber } from '../../shared/utils'
 import { MPTIssuanceFormattedInfo } from '../../shared/Interfaces'
 import { TokenTableRow } from '../../shared/components/TokenTableRow'
+import { JsonView } from '../../shared/components/JsonView'
 
 interface Props {
   data: MPTIssuanceFormattedInfo
@@ -41,7 +42,18 @@ export const Details = ({ data }: Props) => {
         )}
         <TokenTableRow label={t('transfer_fee')} value={formattedFee ?? '0%'} />
         <TokenTableRow label={t('sequence_number_short')} value={sequence} />
-        {metadata && <TokenTableRow label={t('metadata')} value={metadata} />}
+        {metadata && (
+          <TokenTableRow
+            label={t('metadata')}
+            value={
+              isValidJsonString(metadata) ? (
+                <JsonView data={JSON.parse(metadata)} />
+              ) : (
+                metadata
+              )
+            }
+          />
+        )}
       </tbody>
     </table>
   )
diff --git a/src/containers/MPT/MPTHeader/styles.scss b/src/containers/MPT/MPTHeader/styles.scss
index fc1b25e01..682ea36e4 100644
--- a/src/containers/MPT/MPTHeader/styles.scss
+++ b/src/containers/MPT/MPTHeader/styles.scss
@@ -17,6 +17,10 @@
       @include for-size(desktop-up) {
         width: 490px;
       }
+
+      .jv-indent {
+        border-left: none;
+      }
     }
 
     .settings {
diff --git a/src/containers/shared/components/Transaction/MPTokenIssuanceCreate/Simple.tsx b/src/containers/shared/components/Transaction/MPTokenIssuanceCreate/Simple.tsx
index dc80d5625..218ae93d2 100644
--- a/src/containers/shared/components/Transaction/MPTokenIssuanceCreate/Simple.tsx
+++ b/src/containers/shared/components/Transaction/MPTokenIssuanceCreate/Simple.tsx
@@ -3,8 +3,10 @@ import { SimpleRow } from '../SimpleRow'
 import { TransactionSimpleComponent, TransactionSimpleProps } from '../types'
 import { MPTokenIssuanceCreateInstructions } from './types'
 import { useLanguage } from '../../../hooks'
-import { localizeNumber } from '../../../utils'
+import { isValidJsonString, localizeNumber } from '../../../utils'
 import { MPTokenLink } from '../../MPTokenLink'
+import { JsonView } from '../../JsonView'
+import './styles.scss'
 
 export const Simple: TransactionSimpleComponent = ({
   data,
@@ -55,7 +57,11 @@ export const Simple: TransactionSimpleComponent = ({
           className="dt"
           data-test="mpt-metadata"
         >
-          {metadata}
+          {isValidJsonString(metadata) ? (
+            <JsonView data={JSON.parse(metadata)} />
+          ) : (
+            metadata
+          )}
         </SimpleRow>
       )}
     </>
diff --git a/src/containers/shared/components/Transaction/MPTokenIssuanceCreate/styles.scss b/src/containers/shared/components/Transaction/MPTokenIssuanceCreate/styles.scss
new file mode 100644
index 000000000..f7ce40841
--- /dev/null
+++ b/src/containers/shared/components/Transaction/MPTokenIssuanceCreate/styles.scss
@@ -0,0 +1,3 @@
+.jv-indent {
+  border-left: none;
+}
diff --git a/src/containers/shared/utils.js b/src/containers/shared/utils.js
index ac510adeb..9046410e0 100644
--- a/src/containers/shared/utils.js
+++ b/src/containers/shared/utils.js
@@ -129,6 +129,15 @@ export const isEarlierVersion = (source, target) => {
   return false
 }
 
+export const isValidJsonString = (str) => {
+  try {
+    JSON.parse(str)
+    return true
+  } catch (e) {
+    return false
+  }
+}
+
 // Document: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
 export const localizeNumber = (
   num,