feat(token): Added token view to the app

Author: danielhumgon

package-lock.json

@@ -20,6 +20,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^6.0.0",
+    "react-jdenticon": "0.0.8",
     "react-qr-reader": "^2.2.1",
     "react-redux": "^7.2.0"
   },

package.json

@@ -31,7 +31,7 @@
     text-transform: lowercase;
 }
 .components-container{
-    min-height: calc(100vh - 100px);
+    min-height: calc(100vh - var(--footer-height) - 50px);
 }
 
 .sidebar-toggle:hover{

src/components/admin-lte/admin-lte.css

@@ -2,7 +2,7 @@ import React from "react"
 import PropTypes from "prop-types"
 import Audit from "./audit"
 import Configure from "./configure"
-import Tokens from "./icons"
+import Tokens from "./tokens"
 import Wallet from "./wallet"
 
 import AdminLTE, { Sidebar, Navbar } from "adminlte-2-react"
@@ -71,7 +71,11 @@ class AdminLTEPage extends React.Component {
                   setBchWallet={_this.props.setBchWallet}
                 />
               )}
-              {_this.state.section === "Tokens" && <Tokens />}
+              {_this.state.section === "Tokens" &&
+               <Tokens 
+               walletInfo={_this.props.walletInfo}
+              bchWallet={_this.props.bchWallet} />
+              }
               {_this.state.section === "Configure" && (
                 <Configure 
                 walletInfo={_this.props.walletInfo}

src/components/admin-lte/icons/index.js

@@ -0,0 +1,134 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { Content, Row, Col, Box } from "adminlte-2-react"
+import TokenCard from "./token-card"
+import TokenModal from "./token-modal"
+import Spinner from "../../../images/loader.gif"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+
+let _this
+class Tokens extends React.Component {
+  constructor(props) {
+    super(props)
+    _this = this
+    this.state = {
+      tokens: [],
+      selectedToken: "",
+      showModal: false,
+      inFetch: true,
+      onEmptyTokensMsg: "No tokens found on this wallet..",
+    }
+  }
+
+  render() {
+    const { JWT } = _this.props.walletInfo
+
+    return (
+      <>
+        {_this.state.inFetch ? (
+          <div className="spinner">
+            <img alt="Loading..." src={Spinner} width={100} />
+          </div>
+        ) : (
+          <Content>
+            {!JWT && (
+              <Box padding="true" className="container-nofound">
+                <Row>
+                  <Col xs={12}>
+                    <FontAwesomeIcon
+                      className="icon btn-animation"
+                      size="lg"
+                      icon={"exclamation-triangle"}
+                    />
+                  </Col>
+
+                  <Col xs={12}>
+                    <em>
+                      You don't have a registered JWT, you could encounter
+                      errors viewing some of your tokens.
+                    </em>
+                  </Col>
+                </Row>
+              </Box>
+            )}
+            <br></br>
+            {!_this.state.tokens.length && (
+              <Box padding="true" className="container-nofound">
+                <Row>
+                  <Col xs={12}>
+                    <em>{_this.state.onEmptyTokensMsg}</em>
+                  </Col>
+                </Row>
+              </Box>
+            )}
+            {_this.state.tokens.length && (
+              <Row>
+                {_this.state.tokens.map((val, i) => {
+                  return (
+                    <Col sm={4} key={`token-${i}`}>
+                      <TokenCard
+                        key={`token-${i}`}
+                        id={`token-${i}`}
+                        token={val}
+                        showToken={_this.showToken}
+                      />
+                    </Col>
+                  )
+                })}
+              </Row>
+            )}
+          </Content>
+        )}
+        <TokenModal
+          token={_this.state.selectedToken ? _this.state.selectedToken : {}}
+          onHide={_this.toggleModal}
+          show={_this.state.showModal}
+        />
+      </>
+    )
+  }
+  async componentDidMount() {
+    const { mnemonic } = _this.props.walletInfo
+    const bchWallet = _this.props.bchWallet
+    let tokens = []
+    let { onEmptyTokensMsg } = _this.state
+
+    if (mnemonic && bchWallet) {
+      
+      try {
+        await bchWallet.walletInfoPromise
+        tokens = await bchWallet.listTokens()
+      } catch (error) {
+        console.error(error)
+        if (error.error.match("rate limits")) onEmptyTokensMsg = error.error
+      }
+    } else {
+      onEmptyTokensMsg =
+        "You need to create or import a wallet first, to view tokens"
+    }
+
+
+    _this.setState({
+      tokens,
+      inFetch: false,
+      onEmptyTokensMsg,
+    })
+  }
+  showToken(selectedToken) {
+    console.log("selectedToken", selectedToken)
+    _this.setState({
+      selectedToken,
+    })
+    _this.toggleModal()
+  }
+  toggleModal() {
+    _this.setState({
+      showModal: !_this.state.showModal,
+    })
+  }
+}
+Tokens.propTypes = {
+  walletInfo: PropTypes.object.isRequired, // wallet info
+  bchWallet: PropTypes.object, // get minimal-slp-wallet instance
+}
+export default Tokens

src/components/admin-lte/index.js

@@ -0,0 +1,64 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { Row, Col, Box, Button } from "adminlte-2-react"
+import Jdenticon from "react-jdenticon"
+import "./token.css"
+let _this
+class TokenCard extends React.Component {
+  constructor(props) {
+    super(props)
+    _this = this
+    this.state = {}
+  }
+  render() {
+    const token = _this.props.token
+    return (
+      <>
+        <Box className="hover-shadow border-none mt-2" id="token-card">
+          <Row className="text-center">
+            <Col sm={12} className="text-center mt-2 ">
+              <Jdenticon size="100" value={token.tokenId} />
+              <hr></hr>
+            </Col>
+            <Col sm={12} className="flex justify-content-center  ">
+              <div className="info-container">
+                <p className="info-content">
+                  <b>Ticker: </b>
+                  <span> {token.ticker}</span>
+                </p>
+                <p className="info-content">
+                  <b>Name: </b>
+                  <span>{token.name}</span>
+                </p>
+
+                <p className="info-content">
+                  <b>Balance</b>
+                  <span>{token.qty}</span>
+                </p>
+              </div>
+            </Col>
+
+            <Col sm={12} className="text-center ">
+              <Button
+                text="Show Token"
+                type="primary"
+                className="btn-lg"
+                onClick={() => {
+                  _this.props.showToken(token)
+                }}
+              />
+            </Col>
+          </Row>
+        </Box>
+      </>
+    )
+  }
+  shouldComponentUpdate() {
+    return false
+  }
+}
+TokenCard.propTypes = {
+  token: PropTypes.object.isRequired,
+  showToken: PropTypes.func.isRequired,
+}
+export default TokenCard