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) => {
)}
- {metadata && }
+ {metadata && (
+
+ ) : (
+ metadata
+ )
+ }
+ />
+ )}
)
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) ? (
+
+ ) : (
+ metadata
+ )}
)}
>
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,