style(json): Added reac-pretty-json dependency

package.json

@@ -21,7 +21,8 @@
   "dependencies": {
     "gatsby": "^3.7.2",
     "gatsby-ipfs-web-wallet": "1.25.3",
-    "gatsby-plugin-bch-tx-history": "^1.1.4"
+    "gatsby-plugin-bch-tx-history": "^1.1.4",
+    "react-json-pretty": "^2.2.0"
   },
   "repository": {
     "type": "git",

src/explorer/details.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Row, Col, Box, Button } from 'adminlte-2-react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-
+import JSONPretty from 'react-json-pretty'
 let _this
 class Details extends React.Component {
   constructor (props) {
@@ -69,7 +69,21 @@ class Details extends React.Component {
                             - <b>Signature : </b> {entryData.signature}
                           </p>
                           <p>
-                            - <b>Data : </b> {entryData.data}
+                            {!_this.isJson(entryData.data) && (
+                              <>
+                                - <b>Data : </b> {entryData.data}
+                              </>
+                            )}
+
+                            {_this.isJson(entryData.data) && (
+                              <>
+                                - <b>Data :</b>
+                                <JSONPretty
+                                  id='json-pretty'
+                                  data={entryData.data}
+                                />
+                              </>
+                            )}
                           </p>
                         </>
                       )}
@@ -119,6 +133,16 @@ class Details extends React.Component {
   handleClose () {
     _this.props.onClose()
   }
+
+  // Detects if the input is a string and converts to json object
+  isJson (data) {
+    try {
+      JSON.parse(data)
+      return true
+    } catch (error) {
+      return false
+    }
+  }
 }
 Details.propTypes = {
   entry: PropTypes.object,