Merge pull request #1 from Permissionless-Software-Foundation/dh-block-explorer

feat(explorer): Created a block explorer for P2WDB

src/explorer/details.js

@@ -0,0 +1,127 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Row, Col, Box, Button } from 'adminlte-2-react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+let _this
+class Details extends React.Component {
+  constructor (props) {
+    super(props)
+
+    _this = this
+
+    this.state = {
+      entry: {},
+      entryData: {}
+    }
+  }
+
+  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'>
+                <Col sm={12}>
+                  <h1 id='SendTokens'>
+                    <FontAwesomeIcon
+                      className='title-icon'
+                      size='xs'
+                      icon='info-circle'
+                    />
+                    <span>Details</span>
+                  </h1>
+                  {entry._id && (
+                    <Box className='border-none details-data-content'>
+                      <p>
+                        <b>IS VALID: </b>
+                        {entry.isValid}
+                      </p>
+                      <p>
+                        <b>APP ID: </b>
+                        {entry.appId || 'none'}
+                      </p>
+                      <p>
+                        <b>CREATE AT: </b>
+                        {new Date(entry.createdAt).toLocaleString()}
+                      </p>
+                      <p>
+                        <b>ID: </b>
+                        {entry._id}
+                      </p>
+                      <p>
+                        <b>HASH: </b>
+                        {entry.hash}
+                      </p>
+                      <p>
+                        <b>TRANSACTION ID : </b>
+                        {entry.key}
+                      </p>
+                      {entryData && (
+                        <>
+                          <b>VALUE : </b>
+                          <p>
+                            - <b>Message : </b> {entryData.message}
+                          </p>
+                          <p>
+                            - <b>Signature : </b> {entryData.signature}
+                          </p>
+                          <p>
+                            - <b>Data : </b> {entryData.data}
+                          </p>
+                        </>
+                      )}
+                    </Box>
+                  )}
+                </Col>
+                <Col sm={12}>
+                  <div className='btn-wrapper'>
+                    <Button
+                      text='Close'
+                      type='primary'
+                      className='btn-lg btn-close-entry mr-1 ml-1 mt-1'
+                      onClick={_this.handleClose}
+                    />
+                  </div>
+                </Col>
+              </Row>
+            </Box>
+          </Col>
+        </Row>
+      </>
+    )
+  }
+
+  componentDidMount () {
+    _this.handleData()
+  }
+
+  componentDidUpdate () {
+    if (_this.props.entry._id !== _this.state.entry._id) {
+      _this.handleData()
+    }
+  }
+
+  handleData () {
+    try {
+      const { entry } = _this.props
+      _this.setState({
+        entry,
+        entryData: entry.value
+      })
+    } catch (err) {
+      console.warn('Error in handleData()', err)
+    }
+  }
+
+  handleClose () {
+    _this.props.onClose()
+  }
+}
+Details.propTypes = {
+  entry: PropTypes.object,
+  onClose: PropTypes.func
+}
+export default Details

src/explorer/explorer.css

@@ -0,0 +1,10 @@
+.btn-close-entry{
+    width: 150px;
+}
+.action-handler{
+    color: #3c8dbc;
+    cursor: pointer;
+}
+.details-data-content{
+    text-align: left;
+}

src/explorer/index.js

@@ -0,0 +1,207 @@
+import React from 'react'
+import { Row, Col, Content, Box, DataTable } from 'adminlte-2-react'
+import Details from './details'
+import './explorer.css'
+const axios = require('axios').default
+
+const SERVER = 'https://p2wdb.fullstack.cash/'
+const EXPLORER_URL = 'https://explorer.bitcoin.com/bch/tx/'
+
+let _this
+class Explorer extends React.Component {
+  constructor (props) {
+    super(props)
+    _this = this
+    this.state = {
+      showEntry: false,
+      data: [],
+      entries: [],
+      entryData: null
+    }
+
+    this.firstColumns = [
+      { title: 'Created At', data: 'createdAt' },
+      {
+        title: 'Transaction',
+        data: 'txid',
+        render: txid => (
+          <span className='on-click-event action-handler'>
+            {txid.subString}
+          </span>
+        )
+      },
+      {
+        title: 'Hash',
+        data: 'hash',
+        render: hash => (
+          <span className='on-click-event action-handler'>
+            {hash.subString}
+          </span>
+        )
+      },
+      { title: 'App Id', data: 'appId' }
+    ]
+  }
+
+  render () {
+    const { data, entryData } = _this.state
+    return (
+      <Content
+        title='P2WDB Explorer'
+        subTitle='Block Explorer for P2WDB'
+        browserTitle='P2WDB Explorer'
+      >
+        <Row>
+          {entryData && (
+            <Col xs={12}>
+              <Details entry={entryData} onClose={_this.handleClose} />
+            </Col>
+          )}
+          <Col xs={12}>
+            <Box title='Block explorer for P2WDB'>
+              <DataTable
+                columns={_this.firstColumns}
+                data={data}
+                options={{
+                  paging: true,
+                  lengthChange: false,
+                  searching: false,
+                  ordering: false,
+                  info: true,
+                  autoWidth: false
+                }}
+                onClickEvents={{
+                  onClickEvent: (data, rowIdx, rowData) => {
+                    _this.handleEvents(data)
+                  }
+                }}
+              />
+            </Box>
+          </Col>
+        </Row>
+      </Content>
+    )
+  }
+
+  async componentDidMount () {
+    _this.handleEntries()
+
+    // Get data and update table
+    // every 20 seconds
+    setInterval(() => {
+      _this.handleEntries()
+    }, 20000)
+  }
+
+  async handleEntries () {
+    const entries = await _this.getEntries()
+    _this.generateDataTable(entries)
+  }
+
+  // REST petition to Get data fron the pw2db
+  async getEntries () {
+    try {
+      const options = {
+        method: 'GET',
+        url: `${SERVER}entry/all/${0}`,
+        data: {}
+      }
+      const result = await axios.request(options)
+      _this.setState({
+        entries: result.data.data
+      })
+      return result.data.data
+    } catch (err) {
+      console.warn('Error in getEntries() ', err)
+    }
+  }
+
+  // Generate table content
+  generateDataTable (dataArr) {
+    try {
+      const data = []
+
+      for (let i = 0; i < dataArr.length; i++) {
+        const entry = dataArr[i]
+        const row = {
+          // createdAt row data
+          createdAt: new Date(entry.createdAt).toLocaleString(),
+          // Transaction id row data
+          txid: {
+            subString: _this.cutString(entry.key),
+            txid: entry.key
+          },
+          // Hash row data
+          hash: {
+            subString: _this.cutString(entry.hash),
+            hash: entry.hash,
+            data: entry
+          },
+          // App id row data
+          appId: entry.appId || 'none'
+        }
+        data.push(row)
+      }
+      _this.setState({
+        data
+      })
+    } catch (err) {
+      console.warn('Error in generateDataTable() ', err)
+    }
+  }
+
+  cutString (txid) {
+    try {
+      const subTxid = txid.slice(0, 4)
+      const subTxid2 = txid.slice(-4)
+      return `${subTxid}...${subTxid2}`
+    } catch (err) {
+      console.warn('Error in cutString() ', err)
+    }
+  }
+
+  handleTxIdClick (txid) {
+    try {
+      window.open(`${EXPLORER_URL}${txid}`, '_blank')
+    } catch (err) {
+      console.warn('Error in handleTxIdClick() ', err)
+    }
+  }
+
+  handleHashClick (data) {
+    try {
+      data.isValid = data.isValid.toString()
+      _this.setState({
+        entryData: data
+      })
+    } catch (err) {
+      _this.setState({
+        entryData: null
+      })
+      console.warn('Error in handleHashClick() ', err)
+    }
+  }
+
+  handleEvents (eventData) {
+    try {
+      const { txid, hash, data } = eventData
+
+      if (txid) {
+        _this.handleTxIdClick(txid)
+      }
+      if (hash && data) {
+        _this.handleHashClick(data)
+      }
+    } catch (err) {
+      console.warn('Error in handleEvents() ', err)
+    }
+  }
+
+  handleClose () {
+    _this.setState({
+      entryData: null
+    })
+  }
+}
+
+export default Explorer

src/gatsby-ipfs-web-wallet/components/menu-components.js

@@ -24,11 +24,17 @@ import Wallet from 'gatsby-ipfs-web-wallet/src/components/admin-lte/wallet'
 import Tokens from 'gatsby-ipfs-web-wallet/src/components/admin-lte/tokens'
 import Configure from 'gatsby-ipfs-web-wallet/src/components/admin-lte/configure'
 import SendReceive from 'gatsby-ipfs-web-wallet/src/components/admin-lte/send-receive'
+import Explorer from '../../explorer'
 
 const { Item } = Sidebar
 
 const MenuComponents = props => {
   return [
+    {
+      key: 'Explorer',
+      component: <Explorer key='Explorer' {...props} />,
+      menuItem: <Item icon='fas-binoculars' key='Explorer' text='Explorer' />
+    },
     {
       key: 'Tokens',
       component: <Tokens key='Tokens' {...props} />,
@@ -58,9 +64,7 @@ const MenuComponents = props => {
     {
       key: 'TX History',
       component: <TXHistory key='TX History' {...props} />,
-      menuItem: (
+      menuItem: <Item icon='fas-cog' key='TX History' text='TX History' />
-        <Item icon='fas-cog' key='TX History' text='TX History' />
-      )
     },
     {
       key: 'Demo Component',