mirror of
https://github.com/fullstack-cash/explorer.fullstack.cash.git
synced 2026-09-21 16:52:05 -07:00
Merge pull request #4 from Permissionless-Software-Foundation/dh-json-pretty
style(json): Added reac-pretty-json dependency
This commit is contained in:
Chris Troutner
Generated
+3138
-21537
File diff suppressed because it is too large
Load Diff
+2
-1
@@ -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",
|
||||
|
||||
+62
-34
@@ -1,47 +1,51 @@
|
||||
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 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"
|
||||
|
||||
const HASH_EXPLORER = "https://p2wdb.fullstack.cash/entry/hash/" // PSF p2wdb hash explorer
|
||||
const TX_EXPLORER = "https://simpleledger.info/tx/" // BCH Transaction Explorer
|
||||
|
||||
let _this
|
||||
class Details extends React.Component {
|
||||
constructor (props) {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
_this = this
|
||||
|
||||
this.state = {
|
||||
entry: {},
|
||||
entryData: {}
|
||||
entryData: {},
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
render() {
|
||||
const { entry, entryData } = _this.state
|
||||
return (
|
||||
<>
|
||||
<Row>
|
||||
<Col sm={12}>
|
||||
<Box className=' border-none mt-2' loaded={!this.state.inFetch}>
|
||||
<Row className='text-center'>
|
||||
<Box className=" border-none mt-2" loaded={!this.state.inFetch}>
|
||||
<Row className="text-center">
|
||||
<Col sm={12}>
|
||||
<h1 id='SendTokens'>
|
||||
<h1 id="SendTokens">
|
||||
<FontAwesomeIcon
|
||||
className='title-icon'
|
||||
size='xs'
|
||||
icon='info-circle'
|
||||
className="title-icon"
|
||||
size="xs"
|
||||
icon="info-circle"
|
||||
/>
|
||||
<span>Details</span>
|
||||
</h1>
|
||||
{entry._id && (
|
||||
<Box className='border-none details-data-content'>
|
||||
<Box className="border-none details-data-content">
|
||||
<p>
|
||||
<b>IS VALID: </b>
|
||||
{entry.isValid}
|
||||
</p>
|
||||
<p>
|
||||
<b>APP ID: </b>
|
||||
{entry.appId || 'none'}
|
||||
{entry.appId || "none"}
|
||||
</p>
|
||||
<p>
|
||||
<b>CREATE AT: </b>
|
||||
@@ -53,11 +57,23 @@ class Details extends React.Component {
|
||||
</p>
|
||||
<p>
|
||||
<b>HASH: </b>
|
||||
<a
|
||||
href={`${HASH_EXPLORER}${entry.hash}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{entry.hash}
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<b>TRANSACTION ID : </b>
|
||||
<a
|
||||
href={`${TX_EXPLORER}${entry.key}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{entry.key}
|
||||
</a>
|
||||
</p>
|
||||
{entryData && (
|
||||
<>
|
||||
@@ -69,7 +85,21 @@ class Details extends React.Component {
|
||||
- <b>Signature : </b> {entryData.signature}
|
||||
</p>
|
||||
<p>
|
||||
- <b>Data : </b> {_this.formatData(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>
|
||||
</>
|
||||
)}
|
||||
@@ -77,11 +107,11 @@ class Details extends React.Component {
|
||||
)}
|
||||
</Col>
|
||||
<Col sm={12}>
|
||||
<div className='btn-wrapper'>
|
||||
<div className="btn-wrapper">
|
||||
<Button
|
||||
text='Close'
|
||||
type='primary'
|
||||
className='btn-lg btn-close-entry mr-1 ml-1 mt-1'
|
||||
text="Close"
|
||||
type="primary"
|
||||
className="btn-lg btn-close-entry mr-1 ml-1 mt-1"
|
||||
onClick={_this.handleClose}
|
||||
/>
|
||||
</div>
|
||||
@@ -94,46 +124,44 @@ class Details extends React.Component {
|
||||
)
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
componentDidMount() {
|
||||
_this.handleData()
|
||||
}
|
||||
|
||||
componentDidUpdate () {
|
||||
componentDidUpdate() {
|
||||
if (_this.props.entry._id !== _this.state.entry._id) {
|
||||
_this.handleData()
|
||||
}
|
||||
}
|
||||
|
||||
handleData () {
|
||||
handleData() {
|
||||
try {
|
||||
const { entry } = _this.props
|
||||
_this.setState({
|
||||
entry,
|
||||
entryData: entry.value
|
||||
entryData: entry.value,
|
||||
})
|
||||
} catch (err) {
|
||||
console.warn('Error in handleData()', err)
|
||||
console.warn("Error in handleData()", err)
|
||||
}
|
||||
}
|
||||
|
||||
handleClose () {
|
||||
handleClose() {
|
||||
_this.props.onClose()
|
||||
}
|
||||
|
||||
formatData (data) {
|
||||
// Detects if the input is a string and converts to json object
|
||||
isJson(data) {
|
||||
try {
|
||||
const parsed = JSON.parse(data)
|
||||
const str = JSON.stringify(parsed, null, 2)
|
||||
|
||||
return str
|
||||
JSON.parse(data)
|
||||
return true
|
||||
} catch (error) {
|
||||
console.warn('error in formatData', error)
|
||||
return data
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
Details.propTypes = {
|
||||
entry: PropTypes.object,
|
||||
onClose: PropTypes.func
|
||||
onClose: PropTypes.func,
|
||||
}
|
||||
export default Details
|
||||
|
||||
Reference in New Issue
Block a user