Updated to use fullstack repo software

gatsby-config.js

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

package.json

@@ -19,9 +19,9 @@
     "test": "npm run lint"
   },
   "dependencies": {
-    "gatsby": "^3.7.2",
+    "adminlte-2-react": "0.2.0-beta.10",
-    "gatsby-ipfs-web-wallet": "1.25.3",
+    "fullstack-gatsby-theme-bch-wallet": "1.0.5",
-    "gatsby-plugin-bch-tx-history": "^1.1.4",
+    "gatsby": "4.4.0",
     "react-json-pretty": "^2.2.0"
   },
   "repository": {
@@ -32,6 +32,8 @@
     "url": "https://github.com/Permissionless-Software-Foundation/explorer.fullstack.cash/issues"
   },
   "devDependencies": {
+    "colors": "^1.4.0",
+    "mocha": "^9.2.0",
     "semantic-release": "^17.4.3",
     "standard": "^16.0.3"
   },

src/demo-component/index.js

@@ -1,151 +0,0 @@
-/*
-  This is a demonstration component. It helps to show how you can create new
-  menu items and Views in your own BCH web wallet dashboard app.
-
-  This file controls the View (the part on the right side of the dashboard) of
-  the component. The menu item is controlled by the menu-components.js file.
-*/
-
-import React from 'react'
-import { Row, Col, Content, Box, Button } from 'adminlte-2-react'
-import { getWalletInfo } from 'gatsby-ipfs-web-wallet/src/components/localWallet'
-
-const BchWallet =
-  typeof window !== 'undefined'
-    ? window.SlpWallet
-    : null
-
-let _this
-class DemoComponent extends React.Component {
-  constructor (props) {
-    super(props)
-    _this = this
-    this.state = {
-      unconfirmedBalance: 0,
-      confirmedBalance: 0,
-      totalBalance: 0,
-      inFetch: false,
-      bchWallet: '',
-      isChecked: ''
-
-    }
-  }
-
-  render () {
-    const {
-      unconfirmedBalance,
-      confirmedBalance,
-      totalBalance,
-      inFetch,
-      isChecked
-    } = _this.state
-    return (
-      <Content
-        title='Demo Component'
-        subTitle='Check the BCH balance of an address'
-        browserTitle='Demo Component'
-      >
-        <Row>
-          <Col xs={12}>
-            <Box
-              title='BCH Balance'
-              type='primary'
-              closable
-              collapsable
-              loaded={!inFetch}
-              footer={
-                <Button
-                  type='primary'
-                  text='Check Balance'
-                  onClick={_this.handleGetBalance}
-                />
-              }
-            >
-
-              {
-                isChecked &&
-                  <div>
-                    <p>Confirmed: {confirmedBalance}</p>
-                    <p>Unconfirmed: {unconfirmedBalance}</p>
-                    <p>Total : <strong>{totalBalance}</strong></p>
-                  </div>
-
-              }
-
-            </Box>
-          </Col>
-        </Row>
-      </Content>
-    )
-  }
-
-  componentDidMount () {
-    _this.instanceWallet() // Creates a web wallet instance
-  }
-
-  // Get wallet balance
-  async handleGetBalance () {
-    try {
-      _this.setState({
-        inFetch: true
-      })
-
-      const addr = 'bitcoincash:qr69kyzha07dcecrsvjwsj4s6slnlq4r8c30lxnur3'
-
-      const bchWallet = _this.state.bchWallet
-      const bchjs = bchWallet.bchjs
-
-      // Get the Balance
-      const balances = await bchjs.Electrumx.balance(addr)
-
-      const totalBalance = balances.balance.confirmed + balances.balance.unconfirmed
-
-      _this.setState({
-        inFetch: false,
-        unconfirmedBalance: balances.balance.unconfirmed,
-        confirmedBalance: balances.balance.confirmed,
-        totalBalance: totalBalance,
-        isChecked: true
-      })
-    } catch (error) {
-      console.error(error)
-      _this.setState({
-        inFetch: false
-      })
-    }
-  }
-
-  // Creates an instance  of minimal-slp-wallet, with
-  // the local storage information if it exists
-  instanceWallet () {
-    try {
-      const localStorageInfo = getWalletInfo()
-      if (!localStorageInfo.mnemonic) return null
-
-      const jwtToken = localStorageInfo.JWT
-      const restURL = localStorageInfo.selectedServer
-      const bchjsOptions = {}
-
-      if (jwtToken) {
-        bchjsOptions.apiToken = jwtToken
-      }
-      if (restURL) {
-        bchjsOptions.restURL = restURL
-      }
-      const bchWalletLib = new BchWallet(localStorageInfo.mnemonic, bchjsOptions)
-
-      // Update bchjs instances  of minimal-slp-wallet libraries
-      bchWalletLib.tokens.sendBch.bchjs = new bchWalletLib.BCHJS(bchjsOptions)
-      bchWalletLib.tokens.utxos.bchjs = new bchWalletLib.BCHJS(bchjsOptions)
-
-      _this.setState({
-        bchWallet: bchWalletLib
-      })
-      return bchWalletLib
-    } catch (error) {
-      console.warn(error)
-    }
-  }
-}
-
-export default DemoComponent

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 'gatsby-ipfs-web-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'
+// 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,13 +28,15 @@ class Wallet2 extends Wallet {
     )
   }
 
-  addCards () {
+  addCards() {
     return (
       <>
+        {/*
         <TXHistory
           walletInfo={this.props.walletInfo}
           bchWallet={this.props.bchWallet}
         />
+        */}
       </>
     )
   }

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

@@ -0,0 +1,68 @@
+/*
+  This file is how you add new menu items to your site. It uses the Gatsby
+  concept of Component Shadowing:
+  https://www.gatsbyjs.org/blog/2019-04-29-component-shadowing/
+
+  It over-rides he default file in the gatsby-ipfs-web-wallet Theme.
+*/
+
+import React from "react"
+import { Sidebar } from "adminlte-2-react"
+
+// Example/Demo component. This is how you would build a component internal to
+// your wallet app/site.
+// import DemoComponent from '../../demo-component'
+
+// TX History Plugin.
+// This is an example of an external plugin for the wallet. It's a modular
+// approach to sharing 'lego blocks' between wallet apps.
+// import TXHistory from 'gatsby-plugin-bch-tx-history/src/components/txhistory'
+// 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 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 SendReceive from "fullstack-gatsby-theme-bch-wallet/src/components/admin-lte/send-receive"
+import Explorer from "../../explorer"
+
+const { Item } = Sidebar
+
+const MenuComponents = props => {
+  return [
+    {
+      active: true, // Set this view as default
+      key: "Explorer",
+      component: <Explorer key="Explorer" {...props} />,
+      menuItem: <Item icon="fas-binoculars" key="Explorer" text="Explorer" />
+    },
+    {
+      key: "Tokens",
+      component: <Tokens key="Tokens" {...props} />,
+      menuItem: <Item icon="fas-coins" key="Tokens" text="Tokens" />
+    },
+    {
+      key: "Send/Receive BCH",
+      component: <SendReceive key="Send/Receive BCH" {...props} />,
+      menuItem: (
+        <Item
+          icon="fa-exchange-alt"
+          key="Send/Receive BCH"
+          text="Send/Receive BCH"
+        />
+      )
+    },
+    {
+      key: "Wallet",
+      component: <Wallet key="Wallet" {...props} />,
+      menuItem: <Item icon="fa-wallet" key="Wallet" text="Wallet" />
+    },
+    {
+      key: "Configure",
+      component: <Configure key="Configure" {...props} />,
+      menuItem: <Item icon="fas-cog" key="Configure" text="Configure" />
+    }
+  ]
+}
+
+export default MenuComponents

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

@@ -1,80 +0,0 @@
-/*
-  This file is how you add new menu items to your site. It uses the Gatsby
-  concept of Component Shadowing:
-  https://www.gatsbyjs.org/blog/2019-04-29-component-shadowing/
-
-  It over-rides he default file in the gatsby-ipfs-web-wallet Theme.
-*/
-
-import React from 'react'
-import { Sidebar } from 'adminlte-2-react'
-
-// Example/Demo component. This is how you would build a component internal to
-// your wallet app/site.
-import DemoComponent from '../../demo-component'
-
-// TX History Plugin.
-// This is an example of an external plugin for the wallet. It's a modular
-// approach to sharing 'lego blocks' between wallet apps.
-// import TXHistory from 'gatsby-plugin-bch-tx-history/src/components/txhistory'
-import TXHistory from 'gatsby-plugin-bch-tx-history'
-
-// Default components from gatsby-ipfs-web-wallet.
-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 [
-    {
-      active: true, // Set this view as default
-      key: 'Explorer',
-      component: <Explorer key='Explorer' {...props} />,
-      menuItem: <Item icon='fas-binoculars' key='Explorer' text='Explorer' />
-    },
-    {
-      key: 'Tokens',
-      component: <Tokens key='Tokens' {...props} />,
-      menuItem: <Item icon='fas-coins' key='Tokens' text='Tokens' />
-    },
-    {
-      key: 'Send/Receive BCH',
-      component: <SendReceive key='Send/Receive BCH' {...props} />,
-      menuItem: (
-        <Item
-          icon='fa-exchange-alt'
-          key='Send/Receive BCH'
-          text='Send/Receive BCH'
-        />
-      )
-    },
-    {
-      key: 'Wallet',
-      component: <Wallet key='Wallet' {...props} />,
-      menuItem: <Item icon='fa-wallet' key='Wallet' text='Wallet' />
-    },
-    {
-      key: 'Configure',
-      component: <Configure key='Configure' {...props} />,
-      menuItem: <Item icon='fas-cog' key='Configure' text='Configure' />
-    },
-    {
-      key: 'TX History',
-      component: <TXHistory key='TX History' {...props} />,
-      menuItem: <Item icon='fas-cog' key='TX History' text='TX History' />
-    },
-    {
-      key: 'Demo Component',
-      component: <DemoComponent key='Demo Component' {...props} />,
-      menuItem: (
-        <Item icon='fas-cog' key='Demo Component' text='Demo Component' />
-      )
-    }
-  ]
-}
-
-export default MenuComponents

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}