Merge pull request #1 from FullStack-cash/dh-filter

feat(filter): Added 'appId' filter to explorer.fullstack.cash

gatsby-config.js

@@ -6,5 +6,5 @@
 
 module.exports = {
   /* Your site config here */
-  plugins: ["fullstack-gatsby-theme-bch-wallet"]
+  plugins: ['fullstack-gatsby-theme-bch-wallet']
 }

src/explorer/details.js

@@ -1,51 +1,51 @@
-import React from "react"
+import React from 'react'
-import PropTypes from "prop-types"
+import PropTypes from 'prop-types'
-import { Row, Col, Box, Button } from "adminlte-2-react"
+import { Row, Col, Box, Button } from 'adminlte-2-react'
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import JSONPretty from "react-json-pretty"
+import JSONPretty from 'react-json-pretty'
 
-const HASH_EXPLORER = "https://p2wdb.fullstack.cash/entry/hash/" // PSF p2wdb hash explorer
+const HASH_EXPLORER = 'https://p2wdb.fullstack.cash/entry/hash/' // PSF p2wdb hash explorer
-const TX_EXPLORER = "https://simpleledger.info/tx/" // BCH Transaction 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}>
+            <Box className=' border-none mt-2' loaded={!this.state.inFetch}>
-              <Row className="text-center">
+              <Row className='text-center'>
                 <Col sm={12}>
-                  <h1 id="SendTokens">
+                  <h1 id='SendTokens'>
                     <FontAwesomeIcon
-                      className="title-icon"
+                      className='title-icon'
-                      size="xs"
+                      size='xs'
-                      icon="info-circle"
+                      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>
@@ -59,8 +59,8 @@ class Details extends React.Component {
                         <b>HASH: </b>
                         <a
                           href={`${HASH_EXPLORER}${entry.hash}`}
-                          target="_blank"
+                          target='_blank'
-                          rel="noreferrer"
+                          rel='noreferrer'
                         >
                           {entry.hash}
                         </a>
@@ -69,8 +69,8 @@ class Details extends React.Component {
                         <b>TRANSACTION ID : </b>
                         <a
                           href={`${TX_EXPLORER}${entry.key}`}
-                          target="_blank"
+                          target='_blank'
-                          rel="noreferrer"
+                          rel='noreferrer'
                         >
                           {entry.key}
                         </a>
@@ -95,7 +95,7 @@ class Details extends React.Component {
                               <>
                                 - <b>Data :</b>
                                 <JSONPretty
-                                  id="json-pretty"
+                                  id='json-pretty'
                                   data={entryData.data}
                                 />
                               </>
@@ -107,11 +107,11 @@ class Details extends React.Component {
                   )}
                 </Col>
                 <Col sm={12}>
-                  <div className="btn-wrapper">
+                  <div className='btn-wrapper'>
                     <Button
-                      text="Close"
+                      text='Close'
-                      type="primary"
+                      type='primary'
-                      className="btn-lg btn-close-entry mr-1 ml-1 mt-1"
+                      className='btn-lg btn-close-entry mr-1 ml-1 mt-1'
                       onClick={_this.handleClose}
                     />
                   </div>
@@ -124,34 +124,34 @@ 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()
   }
 
   // Detects if the input is a string and converts to json object
-  isJson(data) {
+  isJson (data) {
     try {
       JSON.parse(data)
       return true
@@ -162,6 +162,6 @@ class Details extends React.Component {
 }
 Details.propTypes = {
   entry: PropTypes.object,
-  onClose: PropTypes.func,
+  onClose: PropTypes.func
 }
 export default Details

src/explorer/index.js

@@ -1,7 +1,9 @@
 import React from 'react'
-import { Row, Col, Content, Box, DataTable } from 'adminlte-2-react'
+import { Row, Col, Content, Box, DataTable, Inputs, Button } from 'adminlte-2-react'
 import Details from './details'
 import './explorer.css'
+const { Text } = Inputs
+
 const axios = require('axios').default
 
 const SERVER = 'https://p2wdb.fullstack.cash/'
@@ -16,7 +18,8 @@ class Explorer extends React.Component {
       showEntry: false,
       data: [],
       entries: [],
-      entryData: null
+      entryData: null,
+      addId: ''
     }
 
     this.firstColumns = [
@@ -52,6 +55,25 @@ class Explorer extends React.Component {
         browserTitle='P2WDB Explorer'
       >
         <Row>
+          {!entryData && (
+            <Box title='Search By Appid' className='text-center'>
+              <Text
+                id='appId'
+                name='appId'
+                placeholder='Enter AppId'
+                label='AppId'
+                labelPosition='above'
+                onChange={this.handleUpdate}
+              />
+              <Button
+                text='Search'
+                type='primary'
+                className='btn-lg btn-close-entry mr-1 ml-1 mt-1'
+                onClick={_this.handleSearchByAppId}
+              />
+            </Box>
+          )}
+
           {entryData && (
             <Col xs={12}>
               <Details entry={entryData} onClose={_this.handleClose} />
@@ -83,6 +105,12 @@ class Explorer extends React.Component {
     )
   }
 
+  handleUpdate (event) {
+    _this.setState({
+      [event.target.name]: event.target.value
+    })
+  }
+
   async componentDidMount () {
     _this.handleEntries()
 
@@ -202,6 +230,30 @@ class Explorer extends React.Component {
       entryData: null
     })
   }
+
+  async handleSearchByAppId () {
+    try {
+      const { appId } = _this.state
+      let entries
+      if (!appId) {
+        entries = await _this.getEntries()
+      } else {
+        const options = {
+          method: 'GET',
+          url: `${SERVER}entry/appid/${appId}`
+        }
+        const result = await axios.request(options)
+        entries = result.data.data
+      }
+
+      _this.setState({
+        entries
+      })
+      _this.generateDataTable(entries)
+    } catch (error) {
+      console.warn(error)
+    }
+  }
 }
 
 export default Explorer

src/fullstack-gatsby-theme-bch-wallet/components/admin-lte/wallet/index.js

@@ -4,23 +4,23 @@
   of the Wallet View.
 */
 
-import React from "react"
+import React from 'react'
 
-import Wallet from "fullstack-gatsby-theme-bch-wallet/src/components/admin-lte/wallet/index"
+import Wallet from 'fullstack-gatsby-theme-bch-wallet/src/components/admin-lte/wallet/index'
 
 // import TXHistory from 'gatsby-plugin-bch-tx-history/src/components/txhistory'
 // import TXHistory from "gatsby-plugin-bch-tx-history"
 
 class Wallet2 extends Wallet {
   // class Wallet2 extends React.Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
-    console.log("Loading new example view.")
+    console.log('Loading new example view.')
 
     // console.log('Wallet info: ', props.walletInfo)
   }
 
-  render() {
+  render () {
     return (
       <>
         <Wallet {...this.props} importComponents={this.addCards()} />
@@ -28,7 +28,7 @@ class Wallet2 extends Wallet {
     )
   }
 
-  addCards() {
+  addCards () {
     return (
       <>
         {/*

src/fullstack-gatsby-theme-bch-wallet/components/menu-components.js

@@ -6,8 +6,8 @@
   It over-rides he default file in the gatsby-ipfs-web-wallet Theme.
 */
 
-import React from "react"
+import React from 'react'
-import { Sidebar } from "adminlte-2-react"
+import { Sidebar } from 'adminlte-2-react'
 
 // Example/Demo component. This is how you would build a component internal to
 // your wallet app/site.
@@ -20,11 +20,11 @@ import { Sidebar } from "adminlte-2-react"
 // import TXHistory from "gatsby-plugin-bch-tx-history"
 
 // Default components from gatsby-ipfs-web-wallet.
-import Wallet from "fullstack-gatsby-theme-bch-wallet/src/components/admin-lte/wallet"
+import Wallet from 'fullstack-gatsby-theme-bch-wallet/src/components/admin-lte/wallet'
-import Tokens from "fullstack-gatsby-theme-bch-wallet/src/components/admin-lte/tokens"
+import Tokens from 'fullstack-gatsby-theme-bch-wallet/src/components/admin-lte/tokens'
-import Configure from "fullstack-gatsby-theme-bch-wallet/src/components/admin-lte/configure"
+import Configure from 'fullstack-gatsby-theme-bch-wallet/src/components/admin-lte/configure'
-import SendReceive from "fullstack-gatsby-theme-bch-wallet/src/components/admin-lte/send-receive"
+import SendReceive from 'fullstack-gatsby-theme-bch-wallet/src/components/admin-lte/send-receive'
-import Explorer from "../../explorer"
+import Explorer from '../../explorer'
 
 const { Item } = Sidebar
 
@@ -32,35 +32,35 @@ const MenuComponents = props => {
   return [
     {
       active: true, // Set this view as default
-      key: "Explorer",
+      key: 'Explorer',
-      component: <Explorer key="Explorer" {...props} />,
+      component: <Explorer key='Explorer' {...props} />,
-      menuItem: <Item icon="fas-binoculars" key="Explorer" text="Explorer" />
+      menuItem: <Item icon='fas-binoculars' key='Explorer' text='Explorer' />
     },
     {
-      key: "Tokens",
+      key: 'Tokens',
-      component: <Tokens key="Tokens" {...props} />,
+      component: <Tokens key='Tokens' {...props} />,
-      menuItem: <Item icon="fas-coins" key="Tokens" text="Tokens" />
+      menuItem: <Item icon='fas-coins' key='Tokens' text='Tokens' />
     },
     {
-      key: "Send/Receive BCH",
+      key: 'Send/Receive BCH',
-      component: <SendReceive key="Send/Receive BCH" {...props} />,
+      component: <SendReceive key='Send/Receive BCH' {...props} />,
       menuItem: (
         <Item
-          icon="fa-exchange-alt"
+          icon='fa-exchange-alt'
-          key="Send/Receive BCH"
+          key='Send/Receive BCH'
-          text="Send/Receive BCH"
+          text='Send/Receive BCH'
         />
       )
     },
     {
-      key: "Wallet",
+      key: 'Wallet',
-      component: <Wallet key="Wallet" {...props} />,
+      component: <Wallet key='Wallet' {...props} />,
-      menuItem: <Item icon="fa-wallet" key="Wallet" text="Wallet" />
+      menuItem: <Item icon='fa-wallet' key='Wallet' text='Wallet' />
     },
     {
-      key: "Configure",
+      key: 'Configure',
-      component: <Configure key="Configure" {...props} />,
+      component: <Configure key='Configure' {...props} />,
-      menuItem: <Item icon="fas-cog" key="Configure" text="Configure" />
+      menuItem: <Item icon='fas-cog' key='Configure' text='Configure' />
     }
   ]
 }

src/html.js

@@ -1,33 +1,33 @@
-import React from "react"
+import React from 'react'
-import PropTypes from "prop-types"
+import PropTypes from 'prop-types'
 // import { withPrefix, Link } from 'gatsby'
 
 // window && typeof window !== 'undefined' && window.test = 'testing'
 
-export default function HTML(props) {
+export default function HTML (props) {
   return (
     <html {...props.htmlAttributes}>
       <head>
-        <meta charSet="utf-8" />
+        <meta charSet='utf-8' />
-        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
+        <meta httpEquiv='x-ua-compatible' content='ie=edge' />
         <meta
-          name="viewport"
+          name='viewport'
-          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+          content='width=device-width, initial-scale=1, shrink-to-fit=no'
         />
 
         {/* minimal-slp-wallet-web */}
-        <script src="https://unpkg.com/minimal-slp-wallet" />
+        <script src='https://unpkg.com/minimal-slp-wallet' />
 
         {/* bch-message-lib */}
-        {/*<script src='https://unpkg.com/bch-message-lib' />*/}
+        {/* <script src='https://unpkg.com/bch-message-lib' /> */}
 
         {props.headComponents}
       </head>
       <body {...props.bodyAttributes}>
         {props.preBodyComponents}
         <div
-          key="body"
+          key='body'
-          id="___gatsby"
+          id='___gatsby'
           dangerouslySetInnerHTML={{ __html: props.body }}
         />
         {props.postBodyComponents}