From a9dcd367a4db5416d674c4f1170c8008e37f26e9 Mon Sep 17 00:00:00 2001 From: Daniel Gonzalez Date: Sat, 27 Jun 2020 00:12:07 -0400 Subject: [PATCH] feat(token): Added token view to the app --- package-lock.json | 24 +++ package.json | 1 + src/components/admin-lte/admin-lte.css | 2 +- src/components/admin-lte/icons/index.js | 44 ----- src/components/admin-lte/index.js | 8 +- src/components/admin-lte/tokens/index.js | 134 ++++++++++++++ src/components/admin-lte/tokens/token-card.js | 64 +++++++ .../admin-lte/tokens/token-modal.js | 163 ++++++++++++++++++ src/components/admin-lte/tokens/token.css | 50 ++++++ src/components/app-colors.css | 12 +- src/components/footer/footer.css | 2 +- src/components/layout.css | 9 +- 12 files changed, 462 insertions(+), 51 deletions(-) delete mode 100644 src/components/admin-lte/icons/index.js create mode 100644 src/components/admin-lte/tokens/index.js create mode 100644 src/components/admin-lte/tokens/token-card.js create mode 100644 src/components/admin-lte/tokens/token-modal.js create mode 100644 src/components/admin-lte/tokens/token.css diff --git a/package-lock.json b/package-lock.json index e35b7e0..d64bbe2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6151,6 +6151,11 @@ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001084.tgz", "integrity": "sha512-ftdc5oGmhEbLUuMZ/Qp3mOpzfZLCxPYKcvGv6v2dJJ+8EdqcvZRbAGOiLmkM/PV1QGta/uwBs8/nCl6sokDW6w==" }, + "canvas-renderer": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/canvas-renderer/-/canvas-renderer-2.1.1.tgz", + "integrity": "sha512-/V0XetN7s1Mk3NO7x2wxPZYv0pLMQtGAhecuOuKR88beiYCUle1AbCcFZNLu+4NVzi9RVHS0rXtIgzPEaKidLw==" + }, "caseless": { "version": "0.12.0", "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz", @@ -24855,6 +24860,15 @@ "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.3.0.tgz", "integrity": "sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg==" }, + "jdenticon": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/jdenticon/-/jdenticon-2.2.0.tgz", + "integrity": "sha512-WGqwpjN9pab/Sah9pGnFH5tQc3HF3WbLV/tPVbykvk5nuAkxG/zhzQYWC2owvpnS+/A0HmlSx35rtY8kyN+x7Q==", + "requires": { + "@types/node": "*", + "canvas-renderer": "~2.1.1" + } + }, "jest-diff": { "version": "25.5.0", "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-25.5.0.tgz", @@ -29646,6 +29660,16 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-jdenticon": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/react-jdenticon/-/react-jdenticon-0.0.8.tgz", + "integrity": "sha512-+oVYV1Py3JBaCZIvOeOiuj9wmpLLDFGjsp7SCDXtai9l5khhiE2caDYubt/xZEcqlO8DyALcb+ZgRgPgXY70Zg==", + "requires": { + "jdenticon": "^2.2.0", + "prop-types": "^15.7.2", + "react": "^16.8.0" + } + }, "react-lifecycles-compat": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", diff --git a/package.json b/package.json index b2bf765..02313fe 100644 --- a/package.json +++ b/package.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" }, diff --git a/src/components/admin-lte/admin-lte.css b/src/components/admin-lte/admin-lte.css index 299ad1f..a832dc9 100644 --- a/src/components/admin-lte/admin-lte.css +++ b/src/components/admin-lte/admin-lte.css @@ -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{ diff --git a/src/components/admin-lte/icons/index.js b/src/components/admin-lte/icons/index.js deleted file mode 100644 index 92fb5a2..0000000 --- a/src/components/admin-lte/icons/index.js +++ /dev/null @@ -1,44 +0,0 @@ -import React from "react" - -import { Content, Row, Col, Box } from "adminlte-2-react" -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" - -class Icons extends React.Component { - state = {} - - render() { - return ( - - - - - - - -

- - Upload your token icon -

- - -

- You currently have 0 BCH. Go to the Portfolio page and - Create a Wallet. Then deposit some BCH to use the SLP Icons - tool. Get free BCH from the Bitcoin.com Faucet! -

- - - - - - - - ) - } -} - -export default Icons diff --git a/src/components/admin-lte/index.js b/src/components/admin-lte/index.js index 6332423..22f5650 100644 --- a/src/components/admin-lte/index.js +++ b/src/components/admin-lte/index.js @@ -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" && } + {_this.state.section === "Tokens" && + + } {_this.state.section === "Configure" && ( + {_this.state.inFetch ? ( +
+ Loading... +
+ ) : ( + + {!JWT && ( + + + + + + + + + You don't have a registered JWT, you could encounter + errors viewing some of your tokens. + + + + + )} +

+ {!_this.state.tokens.length && ( + + + + {_this.state.onEmptyTokensMsg} + + + + )} + {_this.state.tokens.length && ( + + {_this.state.tokens.map((val, i) => { + return ( + + + + ) + })} + + )} + + )} + + + ) + } + 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 diff --git a/src/components/admin-lte/tokens/token-card.js b/src/components/admin-lte/tokens/token-card.js new file mode 100644 index 0000000..5b1da03 --- /dev/null +++ b/src/components/admin-lte/tokens/token-card.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 ( + <> + + + + +
+ + +
+

+ Ticker: + {token.ticker} +

+

+ Name: + {token.name} +

+ +

+ Balance + {token.qty} +

+
+ + + +