fullstack/fullstack-gatsby-theme-bch-wallet
1
0
Fork 0
mirror of https://github.com/fullstack-cash/fullstack-gatsby-theme-bch-wallet.git synced 2026-09-21 16:52:06 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix(linting): Adding standard linting

Browse Source
This commit is contained in:
Chris Troutner
2020-07-06 13:56:15 -07:00
parent ea9b87d1c4
commit 8dddc9abfe
32 changed files with 759 additions and 748 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gatsby-browser.js
+1 -1
View File
@@ -1,2 +1,2 @@
import wrapWithProvider from "./wrap-with-provider" import wrapWithProvider from './wrap-with-provider'
export const wrapRootElement = wrapWithProvider export const wrapRootElement = wrapWithProvider
gatsby-config.js
+43 -43
View File
@@ -1,31 +1,31 @@
const ipfsPrefix = process.argv.find(val => val === "--prefix-paths") const ipfsPrefix = process.argv.find(val => val === '--prefix-paths')
console.log("DEBUG >> IM HERE") console.log('DEBUG >> IM HERE')
const ipfsConfig = [ const ipfsConfig = [
"gatsby-plugin-ipfs", 'gatsby-plugin-ipfs',
`gatsby-plugin-react-helmet`, 'gatsby-plugin-react-helmet',
{ {
resolve: `gatsby-source-filesystem`, resolve: 'gatsby-source-filesystem',
options: { options: {
start_url: "__GATSBY_IPFS_PATH_PREFIX__", start_url: '__GATSBY_IPFS_PATH_PREFIX__',
name: `images`, name: 'images',
path: `${__dirname}/src/images`, path: `${__dirname}/src/images`
}
}, },
}, 'gatsby-transformer-sharp',
`gatsby-transformer-sharp`, 'gatsby-plugin-sharp',
`gatsby-plugin-sharp`,
{ {
resolve: `gatsby-plugin-manifest`, resolve: 'gatsby-plugin-manifest',
options: { options: {
name: `gatsby-starter-default`, name: 'gatsby-starter-default',
short_name: `starter`, short_name: 'starter',
start_url: "__GATSBY_IPFS_PATH_PREFIX__", start_url: '__GATSBY_IPFS_PATH_PREFIX__',
background_color: `#663399`, background_color: '#663399',
theme_color: `#663399`, theme_color: '#663399',
display: `minimal-ui`, display: 'minimal-ui',
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site. icon: 'src/images/gatsby-icon.png' // This path is relative to the root of the site.
}, }
}, }
// this (optional) plugin enables Progressive Web App + Offline functionality // this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline // To learn more, visit: https://gatsby.dev/offline
@@ -33,29 +33,29 @@ const ipfsConfig = [
] ]
const normalConfig = [ const normalConfig = [
`gatsby-plugin-react-helmet`, 'gatsby-plugin-react-helmet',
{ {
resolve: `gatsby-source-filesystem`, resolve: 'gatsby-source-filesystem',
options: { options: {
start_url: "/", start_url: '/',
name: `images`, name: 'images',
path: `${__dirname}/src/images`, path: `${__dirname}/src/images`
}
}, },
}, 'gatsby-transformer-sharp',
`gatsby-transformer-sharp`, 'gatsby-plugin-sharp',
`gatsby-plugin-sharp`,
{ {
resolve: `gatsby-plugin-manifest`, resolve: 'gatsby-plugin-manifest',
options: { options: {
name: `gatsby-starter-default`, name: 'gatsby-starter-default',
short_name: `starter`, short_name: 'starter',
start_url: "/", start_url: '/',
background_color: `#663399`, background_color: '#663399',
theme_color: `#663399`, theme_color: '#663399',
display: `minimal-ui`, display: 'minimal-ui'
// icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site. // icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
}, }
}, }
// this (optional) plugin enables Progressive Web App + Offline functionality // this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline // To learn more, visit: https://gatsby.dev/offline
@@ -64,10 +64,10 @@ const normalConfig = [
module.exports = { module.exports = {
siteMetadata: { siteMetadata: {
title: `Gatsby IPFS Adminlte Starter`, title: 'Gatsby IPFS Adminlte Starter',
description: `A gatsbyjs app with adminlte2 integration.`, description: 'A gatsbyjs app with adminlte2 integration.',
author: `@gatsbyjs`, author: '@gatsbyjs'
}, },
pathPrefix: "__GATSBY_IPFS_PATH_PREFIX__", pathPrefix: '__GATSBY_IPFS_PATH_PREFIX__',
plugins: ipfsPrefix ? ipfsConfig : normalConfig, plugins: ipfsPrefix ? ipfsConfig : normalConfig
} }
gatsby-node.js
+6 -6
View File
@@ -1,15 +1,15 @@
exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => { exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
actions.setWebpackConfig({ actions.setWebpackConfig({
node: { node: {
fs: "empty", fs: 'empty'
}, }
}) })
// Ignore css order // Ignore css order
if (stage === "build-javascript") { if (stage === 'build-javascript') {
const config = getConfig() const config = getConfig()
const miniCssExtractPlugin = config.plugins.find( const miniCssExtractPlugin = config.plugins.find(
plugin => plugin.constructor.name === "MiniCssExtractPlugin" plugin => plugin.constructor.name === 'MiniCssExtractPlugin'
) )
if (miniCssExtractPlugin) { if (miniCssExtractPlugin) {
miniCssExtractPlugin.options.ignoreOrder = true miniCssExtractPlugin.options.ignoreOrder = true
@@ -19,9 +19,9 @@ exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
} }
exports.createPages = async ({ actions }, themeOptions) => { exports.createPages = async ({ actions }, themeOptions) => {
const basePath = "/" const basePath = '/'
actions.createPage({ actions.createPage({
path: basePath, path: basePath,
component: require.resolve("./src/pages/index.js"), component: require.resolve('./src/pages/index.js')
}) })
} }
gatsby-ssr.js
+1 -1
View File
@@ -1,2 +1,2 @@
import wrapWithProvider from "./wrap-with-provider" import wrapWithProvider from './wrap-with-provider'
export const wrapRootElement = wrapWithProvider export const wrapRootElement = wrapWithProvider
package.json
+1
View File
@@ -10,6 +10,7 @@
"build:normal": "gatsby build", "build:normal": "gatsby build",
"develop": "gatsby develop", "develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,json,md}\"", "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
"lint": "standard --env mocha --fix",
"start": "npm run develop", "start": "npm run develop",
"serve": "gatsby serve", "serve": "gatsby serve",
"clean": "gatsby clean", "clean": "gatsby clean",
src/components/admin-lte/audit/index.js
+10 -10
View File
@@ -1,10 +1,10 @@
import React from "react" import React from 'react'
import { Content, Row, Col, Box } from "adminlte-2-react" import { Content, Row, Col, Box } from 'adminlte-2-react'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
class Audit extends React.Component { class Audit extends React.Component {
state = {} // state = {}
render () { render () {
return ( return (
@@ -12,19 +12,19 @@ class Audit extends React.Component {
<Row> <Row>
<Col sm={4} /> <Col sm={4} />
<Col sm={4}> <Col sm={4}>
<Box className="hover-shadow border-none mt-2"> <Box className='hover-shadow border-none mt-2'>
<Row> <Row>
<Col sm={12} className="text-center"> <Col sm={12} className='text-center'>
<h1> <h1>
<FontAwesomeIcon <FontAwesomeIcon
className="title-icon" className='title-icon'
size="xs" size='xs'
icon={"eye"} icon='eye'
/> />
<span>Audit</span> <span>Audit</span>
</h1> </h1>
</Col> </Col>
<Col sm={12} className="text-center mt-2 mb-2"> <Col sm={12} className='text-center mt-2 mb-2'>
<h3>Never trust, always verify.</h3> <h3>Never trust, always verify.</h3>
<p> <p>
Check the open source code here. Check and/or change the Check the open source code here. Check and/or change the
src/components/admin-lte/configure/index.js
+51 -47
View File
@@ -1,8 +1,8 @@
import React from "react" import React from 'react'
import PropTypes from "prop-types" import PropTypes from 'prop-types'
import { Content, Row, Col, Box, Inputs, Button } from "adminlte-2-react" import { Content, Row, Col, Box, Inputs, Button } from 'adminlte-2-react'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import BchWallet from "minimal-slp-wallet" import BchWallet from 'minimal-slp-wallet'
const { Text } = Inputs const { Text } = Inputs
@@ -14,8 +14,8 @@ class Configure extends React.Component {
_this = this _this = this
this.state = { this.state = {
JWT: "", JWT: '',
errMsg: "", errMsg: ''
} }
_this.BchWallet = BchWallet _this.BchWallet = BchWallet
@@ -26,23 +26,23 @@ class Configure extends React.Component {
<Content> <Content>
<Row> <Row>
<Col sm={12}> <Col sm={12}>
<Box className="hover-shadow border-none mt-2"> <Box className='hover-shadow border-none mt-2'>
<Row> <Row>
<Col sm={12} className="text-center"> <Col sm={12} className='text-center'>
<h1> <h1>
<FontAwesomeIcon <FontAwesomeIcon
className="title-icon" className='title-icon'
size="xs" size='xs'
icon={"cog"} icon='cog'
/> />
<span>Configure</span> <span>Configure</span>
</h1> </h1>
<Box className="border-none"> <Box className='border-none'>
<h3> <h3>
<FontAwesomeIcon <FontAwesomeIcon
className="title-icon" className='title-icon'
size="xs" size='xs'
icon={"exclamation-triangle"} icon='exclamation-triangle'
/> />
Be Careful Be Careful
</h3> </h3>
@@ -52,11 +52,11 @@ class Configure extends React.Component {
</p> </p>
<p> <p>
This is just a placeholder. This View will allow the user This is just a placeholder. This View will allow the user
to pick alternate back-end servers. The default will be{" "} to pick alternate back-end servers. The default will be{' '}
<a <a
href="https://fullstack.cash" href='https://fullstack.cash'
target="_blank" target='_blank'
rel="noreferrer" rel='noopener noreferrer'
> >
FullStack.cash FullStack.cash
</a> </a>
@@ -67,37 +67,37 @@ class Configure extends React.Component {
</Box> </Box>
</Col> </Col>
<Col sm={12}> <Col sm={12}>
<Box className="hover-shadow border-none mt-2"> <Box className='hover-shadow border-none mt-2'>
<Row> <Row>
<Col sm={12} className="text-center"> <Col sm={12} className='text-center'>
<h1> <h1>
<FontAwesomeIcon <FontAwesomeIcon
className="title-icon" className='title-icon'
size="xs" size='xs'
icon={"coins"} icon='coins'
/> />
<span>JWT</span> <span>JWT</span>
</h1> </h1>
<Box className="border-none"> <Box className='border-none'>
<Text <Text
id="jwt" id='jwt'
name="JWT" name='JWT'
placeholder="Enter FullStack.cash JWT" placeholder='Enter FullStack.cash JWT'
label="FullStack.cash JWT" label='FullStack.cash JWT'
labelPosition="above" labelPosition='above'
onChange={_this.handleUpdate} onChange={_this.handleUpdate}
/> />
<Button <Button
text="Update" text='Update'
type="primary" type='primary'
className="btn-lg" className='btn-lg'
onClick={_this.updateJWT} onClick={_this.handleUpdateJWT}
/> />
</Box> </Box>
</Col> </Col>
<Col sm={12} className="text-center"> <Col sm={12} className='text-center'>
{_this.state.errMsg && ( {_this.state.errMsg && (
<p className="error-color">{_this.state.errMsg}</p> <p className='error-color'>{_this.state.errMsg}</p>
)} )}
</Col> </Col>
</Row> </Row>
@@ -107,24 +107,28 @@ class Configure extends React.Component {
</Content> </Content>
) )
} }
componentDidMount () { componentDidMount () {
_this.setJwt() _this.setJwt()
} }
setJwt () { setJwt () {
const { JWT } = _this.props.walletInfo const { JWT } = _this.props.walletInfo
if (JWT) { if (JWT) {
const jwtElem = document.getElementById("jwt") const jwtElem = document.getElementById('jwt')
jwtElem.value = JWT jwtElem.value = JWT
} }
} }
handleUpdate (event) { handleUpdate (event) {
let value = event.target.value const value = event.target.value
_this.setState({ _this.setState({
[event.target.name]: value, [event.target.name]: value
}) })
console.log(_this.state.JWT) console.log(_this.state.JWT)
} }
async updateJWT() {
async handleUpdateJWT () {
try { try {
const { mnemonic } = _this.props.walletInfo const { mnemonic } = _this.props.walletInfo
const apiToken = _this.state.JWT const apiToken = _this.state.JWT
@@ -144,7 +148,7 @@ class Configure extends React.Component {
} catch (error) { } catch (error) {
console.warn(error) console.warn(error)
_this.setState({ _this.setState({
errMsg: error.message, errMsg: error.message
}) })
} }
} }
@@ -152,17 +156,17 @@ class Configure extends React.Component {
// Reset form and component state // Reset form and component state
resetValues () { resetValues () {
_this.setState({ _this.setState({
JWT: "", JWT: '',
errMsg: "", errMsg: ''
}) })
const jwtElem = document.getElementById("jwt") const jwtElem = document.getElementById('jwt')
jwtElem.value = "" jwtElem.value = ''
} }
} }
Configure.propTypes = { Configure.propTypes = {
setWalletInfo: PropTypes.func.isRequired, setWalletInfo: PropTypes.func.isRequired,
walletInfo: PropTypes.object.isRequired, walletInfo: PropTypes.object.isRequired,
setBchWallet: PropTypes.func.isRequired, setBchWallet: PropTypes.func.isRequired
} }
export default Configure export default Configure
src/components/admin-lte/index.js
+57 -57
View File
@@ -1,21 +1,21 @@
import React from "react" import React from 'react'
import PropTypes from "prop-types" import PropTypes from 'prop-types'
import Configure from "./configure" import Configure from './configure'
import Tokens from "./tokens" import Tokens from './tokens'
import Wallet from "./wallet" import Wallet from './wallet'
// import Audit from "./audit" // import Audit from "./audit"
import AdminLTE, { Sidebar, Navbar } from "adminlte-2-react" import AdminLTE, { Sidebar, Navbar } from 'adminlte-2-react'
import ScannerModal from "../qr-scanner/modal" import ScannerModal from '../qr-scanner/modal'
import Layout from "../layout" import Layout from '../layout'
import "./admin-lte.css" import './admin-lte.css'
import BchWallet from "minimal-slp-wallet" import BchWallet from 'minimal-slp-wallet'
import VersionStatus from "../version-status" import VersionStatus from '../version-status'
import { BrowserRouter as Router } from "react-router-dom" import { BrowserRouter as Router } from 'react-router-dom'
import menuComponents from "../menu-components.js" import menuComponents from '../menu-components.js'
import SendReceive from "./send-receive" import SendReceive from './send-receive'
const { Item } = Sidebar const { Item } = Sidebar
@@ -31,28 +31,29 @@ class AdminLTEPage extends React.Component {
this.state = { this.state = {
bchBalance: 0, bchBalance: 0,
showScannerModal: false, showScannerModal: false,
section: "Wallet", section: 'Wallet',
menuIsHide: false, menuIsHide: false,
walletInfo: {}, walletInfo: {}
}
_this.BchWallet = BchWallet
} }
sidebar = [ _this.BchWallet = BchWallet
<Item icon="fa-exchange-alt" key="SendReceive" text="Send/Receive" />,
<Item icon="fas-coins" key="Tokens" text="Tokens" />, _this.sidebar = [
<Item icon="fa-wallet" key="Wallet" text="Wallet" activeOn="/" />, <Item icon='fa-exchange-alt' key='SendReceive' text='Send/Receive' />,
<Item icon="fa-qrcode" key="qrReader" text="Qr Scanner" />, <Item icon='fas-coins' key='Tokens' text='Tokens' />,
<Item icon="fas-cog" key="Configure" text="Configure" />, <Item icon='fa-wallet' key='Wallet' text='Wallet' activeOn='/' />,
<Item icon='fa-qrcode' key='qrReader' text='Qr Scanner' />,
<Item icon='fas-cog' key='Configure' text='Configure' />
] ]
}
render () { render () {
return ( return (
<> <>
<AdminLTE title={["FullStack.cash"]} titleShort={["PSF"]} theme="blue"> <AdminLTE title={['FullStack.cash']} titleShort={['PSF']} theme='blue'>
<Sidebar.Core> <Sidebar.Core>
<Item key="Balance" text="Balance" icon="fab-bitcoin"> <Item key='Balance' text='Balance' icon='fab-bitcoin'>
<div className="sidebar-balance"> <div className='sidebar-balance'>
<div> <div>
<h3>BCH Balance </h3> <h3>BCH Balance </h3>
@@ -67,12 +68,12 @@ class AdminLTEPage extends React.Component {
</Sidebar.Core> </Sidebar.Core>
<Navbar.Core> <Navbar.Core>
<VersionStatus></VersionStatus> <VersionStatus />
</Navbar.Core> </Navbar.Core>
<Layout path="/"> <Layout path='/'>
<div className="components-container"> <div className='components-container'>
{_this.state.section === "Send/Receive" && ( {_this.state.section === 'Send/Receive' && (
<SendReceive <SendReceive
setWalletInfo={_this.props.setWalletInfo} setWalletInfo={_this.props.setWalletInfo}
walletInfo={_this.props.walletInfo} walletInfo={_this.props.walletInfo}
@@ -82,7 +83,7 @@ class AdminLTEPage extends React.Component {
/> />
)} )}
{_this.state.section === "Wallet" && ( {_this.state.section === 'Wallet' && (
<Wallet <Wallet
setWalletInfo={_this.props.setWalletInfo} setWalletInfo={_this.props.setWalletInfo}
walletInfo={_this.props.walletInfo} walletInfo={_this.props.walletInfo}
@@ -92,14 +93,14 @@ class AdminLTEPage extends React.Component {
/> />
)} )}
{_this.state.section === "Tokens" && ( {_this.state.section === 'Tokens' && (
<Tokens <Tokens
walletInfo={_this.props.walletInfo} walletInfo={_this.props.walletInfo}
bchWallet={_this.props.bchWallet} bchWallet={_this.props.bchWallet}
/> />
)} )}
{_this.state.section === "Wallet" && ( {_this.state.section === 'Wallet' && (
<Wallet <Wallet
setWalletInfo={_this.props.setWalletInfo} setWalletInfo={_this.props.setWalletInfo}
walletInfo={_this.props.walletInfo} walletInfo={_this.props.walletInfo}
@@ -108,7 +109,7 @@ class AdminLTEPage extends React.Component {
/> />
)} )}
{_this.state.section === "Configure" && ( {_this.state.section === 'Configure' && (
<Configure <Configure
walletInfo={_this.props.walletInfo} walletInfo={_this.props.walletInfo}
setWalletInfo={_this.props.setWalletInfo} setWalletInfo={_this.props.setWalletInfo}
@@ -124,13 +125,14 @@ class AdminLTEPage extends React.Component {
<Router> <Router>
<ScannerModal <ScannerModal
show={_this.state.showScannerModal} show={_this.state.showScannerModal}
onHide={_this.toggleScannerModal} onHide={_this.handleToggleScannerModal}
path="/" path='/'
/> />
</Router> </Router>
</> </>
) )
} }
// Get wallet balance // Get wallet balance
async getBalance () { async getBalance () {
try { try {
@@ -151,7 +153,7 @@ class AdminLTEPage extends React.Component {
_this.customMenuItems() _this.customMenuItems()
_this.addOnClickEventToScanner() _this.addOnClickEventToScanner()
_this.activeItemById("Wallet") _this.activeItemById('Wallet')
await _this.updateState() await _this.updateState()
setTimeout(() => { setTimeout(() => {
@@ -164,16 +166,17 @@ class AdminLTEPage extends React.Component {
componentDidUpdate () { componentDidUpdate () {
_this.updateState() _this.updateState()
} }
// Update component state when props change // Update component state when props change
updateState () { updateState () {
if (_this.props.walletInfo.mnemonic !== _this.state.walletInfo.mnemonic) { if (_this.props.walletInfo.mnemonic !== _this.state.walletInfo.mnemonic) {
_this.setState({ _this.setState({
walletInfo: _this.props.walletInfo, walletInfo: _this.props.walletInfo
}) })
} }
if (_this.props.bchBalance !== _this.state.bchBalance) { if (_this.props.bchBalance !== _this.state.bchBalance) {
_this.setState({ _this.setState({
bchBalance: _this.props.bchBalance, bchBalance: _this.props.bchBalance
}) })
} }
} }
@@ -183,9 +186,9 @@ class AdminLTEPage extends React.Component {
customMenuItems () { customMenuItems () {
try { try {
// Ignore menu items without link to components // Ignore menu items without link to components
const ignoreItems = ["Balance", "Qr Scanner", "Link"] const ignoreItems = ['Balance', 'Qr Scanner', 'Link']
const menu = document.getElementsByClassName("sidebar-menu") const menu = document.getElementsByClassName('sidebar-menu')
const ulElement = menu[0] const ulElement = menu[0]
const childrens = ulElement.children const childrens = ulElement.children
@@ -196,8 +199,7 @@ class AdminLTEPage extends React.Component {
childrens[i].id = textValue childrens[i].id = textValue
const ignore = ignoreItems.find(val => textValue === val) const ignore = ignoreItems.find(val => textValue === val)
// Ignore menu items without link to components // Ignore menu items without link to components
if (!ignore) if (!ignore) { childrens[i].onclick = () => this.changeSection(textValue) }
childrens[i].onclick = () => this.changeSection(textValue)
} }
} }
} catch (error) { } catch (error) {
@@ -208,7 +210,7 @@ class AdminLTEPage extends React.Component {
// Displays the BCH balance by default // Displays the BCH balance by default
dropDownBalance () { dropDownBalance () {
try { try {
const balanceEle = document.getElementById("Balance") const balanceEle = document.getElementById('Balance')
balanceEle.children[0].click() balanceEle.children[0].click()
} catch (error) { } catch (error) {
console.error(error) console.error(error)
@@ -221,7 +223,7 @@ class AdminLTEPage extends React.Component {
changeSection (section) { changeSection (section) {
_this.activeItemById(section) _this.activeItemById(section)
_this.setState({ _this.setState({
section: section, section: section
}) })
_this.hideMenu() _this.hideMenu()
} }
@@ -229,8 +231,8 @@ class AdminLTEPage extends React.Component {
// Adds a visual mark to the selected item on the menu // Adds a visual mark to the selected item on the menu
activeItemById (id) { activeItemById (id) {
try { try {
const elementActived = document.getElementsByClassName("active") const elementActived = document.getElementsByClassName('active')
elementActived[0].className = "" elementActived[0].className = ''
const element = document.getElementById(id) const element = document.getElementById(id)
element.className = `${element.className} active` element.className = `${element.className} active`
} catch (error) { } catch (error) {
@@ -244,7 +246,7 @@ class AdminLTEPage extends React.Component {
const windowWidth = window.innerWidth const windowWidth = window.innerWidth
// console.log("Window Width : ",windowWidth) // console.log("Window Width : ",windowWidth)
if (windowWidth > MENU_HIDE_WIDTH) return if (windowWidth > MENU_HIDE_WIDTH) return
const toggleEle = document.getElementsByClassName("sidebar-toggle") const toggleEle = document.getElementsByClassName('sidebar-toggle')
toggleEle[0].click() toggleEle[0].click()
} catch (error) { } catch (error) {
console.error(error) console.error(error)
@@ -254,20 +256,20 @@ class AdminLTEPage extends React.Component {
// Adds the "onClick" event to the QR scanner item // Adds the "onClick" event to the QR scanner item
addOnClickEventToScanner () { addOnClickEventToScanner () {
try { try {
const qrScannerEle = document.getElementById("Qr Scanner") const qrScannerEle = document.getElementById('Qr Scanner')
qrScannerEle.onclick = () => _this.toggleScannerModal() qrScannerEle.onclick = () => _this.handleToggleScannerModal()
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} }
} }
// Controller to show the QR scanner // Controller to show the QR scanner
toggleScannerModal() { handleToggleScannerModal () {
if (!_this.state.showScannerModal) { if (!_this.state.showScannerModal) {
_this.hideMenu() _this.hideMenu()
} }
_this.setState({ _this.setState({
showScannerModal: !_this.state.showScannerModal, showScannerModal: !_this.state.showScannerModal
}) })
} }
@@ -280,7 +282,6 @@ class AdminLTEPage extends React.Component {
// TODO: Figure out how to return an invisible Item. // TODO: Figure out how to return an invisible Item.
return <Item style={{ display: 'none' }} /> return <Item style={{ display: 'none' }} />
} }
} }
// Displays the View corresponding to the dynamically loaded menu item. // Displays the View corresponding to the dynamically loaded menu item.
@@ -290,7 +291,7 @@ class AdminLTEPage extends React.Component {
if (_this.state.section === m.key) { if (_this.state.section === m.key) {
return m.component return m.component
} }
return "" return ''
})) }))
} catch (err) { } catch (err) {
@@ -304,8 +305,7 @@ AdminLTEPage.propTypes = {
setWalletInfo: PropTypes.func.isRequired, // set wallet info setWalletInfo: PropTypes.func.isRequired, // set wallet info
updateBalance: PropTypes.func.isRequired, // update bch balance updateBalance: PropTypes.func.isRequired, // update bch balance
setBchWallet: PropTypes.func.isRequired, // set minimal-slp-wallet instance setBchWallet: PropTypes.func.isRequired, // set minimal-slp-wallet instance
bchWallet: PropTypes.object, // get minimal-slp-wallet instance bchWallet: PropTypes.object // get minimal-slp-wallet instance
} }
export default AdminLTEPage export default AdminLTEPage
src/components/admin-lte/send-receive/index.js
+8 -8
View File
@@ -1,10 +1,10 @@
import React from "react" import React from 'react'
import PropTypes from "prop-types" import PropTypes from 'prop-types'
import { Content, Row, Col, Box } from "adminlte-2-react" import { Content, Row, Col, Box } from 'adminlte-2-react'
import Receive from "./receive" import Receive from './receive'
import Send from "./send" import Send from './send'
import "./send-receive.css" import './send-receive.css'
let _this let _this
class SendReceive extends React.Component { class SendReceive extends React.Component {
@@ -27,7 +27,7 @@ class SendReceive extends React.Component {
</Content> </Content>
) : ( ) : (
<Content> <Content>
<Box padding="true" className="container-nofound"> <Box padding='true' className='container-nofound'>
<Row> <Row>
<Col xs={12}> <Col xs={12}>
<em>You need to create or import a wallet first</em> <em>You need to create or import a wallet first</em>
@@ -45,7 +45,7 @@ SendReceive.propTypes = {
walletInfo: PropTypes.object.isRequired, walletInfo: PropTypes.object.isRequired,
updateBalance: PropTypes.func.isRequired, updateBalance: PropTypes.func.isRequired,
setBchWallet: PropTypes.func.isRequired, setBchWallet: PropTypes.func.isRequired,
bchWallet: PropTypes.object, bchWallet: PropTypes.object
} }
export default SendReceive export default SendReceive
src/components/admin-lte/send-receive/receive.js
+25 -24
View File
@@ -1,10 +1,10 @@
import React from "react" import React from 'react'
import PropTypes from "prop-types" import PropTypes from 'prop-types'
import { Content } from "adminlte-2-react" import { Content, Row, Col, Box } from 'adminlte-2-react'
import { Row, Col, Box } from "adminlte-2-react"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
var QRCode = require("qrcode.react") import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
var QRCode = require('qrcode.react')
let _this let _this
class Receive extends React.Component { class Receive extends React.Component {
@@ -12,7 +12,7 @@ class Receive extends React.Component {
super(props) super(props)
_this = this _this = this
this.state = { this.state = {
addr: _this.props.walletInfo.cashAddress, addr: _this.props.walletInfo.cashAddress
} }
} }
@@ -24,33 +24,33 @@ class Receive extends React.Component {
<Row> <Row>
<Col sm={2} /> <Col sm={2} />
<Col sm={8}> <Col sm={8}>
<Box className=" border-none mt-2"> <Box className=' border-none mt-2'>
<Row> <Row>
<Col sm={12} className="text-center"> <Col sm={12} className='text-center'>
<h1> <h1>
<FontAwesomeIcon <FontAwesomeIcon
className="title-icon" className='title-icon'
size="xs" size='xs'
icon={"wallet"} icon='wallet'
/> />
<span>Receive</span> <span>Receive</span>
</h1> </h1>
</Col> </Col>
<Col sm={12} className="text-center mt-2 mb-2"> <Col sm={12} className='text-center mt-2 mb-2'>
<QRCode <QRCode
value={_this.state.addr} value={_this.state.addr}
size={256} size={256}
includeMargin={true} includeMargin
fgColor={"#333"} fgColor='#333'
/> />
<p>{_this.state.addr}</p> <p>{_this.state.addr}</p>
<label className="switch-address" htmlFor="address-checkbox"> <label className='switch-address' htmlFor='address-checkbox'>
<input <input
id="address-checkbox" id='address-checkbox'
type="checkbox" type='checkbox'
onChange={_this.changeAddr} onChange={_this.handleChangeAddr}
/> />
<span className="slider round"></span> <span className='slider round' />
</label> </label>
</Col> </Col>
</Row> </Row>
@@ -63,8 +63,9 @@ class Receive extends React.Component {
</> </>
) )
} }
changeAddr() {
const checkbox = document.getElementById("address-checkbox") handleChangeAddr () {
const checkbox = document.getElementById('address-checkbox')
const { cashAddress, slpAddress } = _this.props.walletInfo const { cashAddress, slpAddress } = _this.props.walletInfo
let addr let addr
@@ -74,12 +75,12 @@ class Receive extends React.Component {
addr = cashAddress addr = cashAddress
} }
_this.setState({ _this.setState({
addr, addr
}) })
} }
} }
Receive.propTypes = { Receive.propTypes = {
walletInfo: PropTypes.object.isRequired, walletInfo: PropTypes.object.isRequired
} }
export default Receive export default Receive
src/components/admin-lte/send-receive/send.js
+94 -90
View File
@@ -1,9 +1,9 @@
import React from "react" import React from 'react'
import PropTypes from "prop-types" import PropTypes from 'prop-types'
import { Content, Row, Col, Box, Inputs, Button } from "adminlte-2-react" import { Content, Row, Col, Box, Inputs, Button } from 'adminlte-2-react'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import BchWallet from "minimal-slp-wallet" import BchWallet from 'minimal-slp-wallet'
import ScannerModal from "../../qr-scanner/modal" import ScannerModal from '../../qr-scanner/modal'
const { Text } = Inputs const { Text } = Inputs
let _this let _this
@@ -14,11 +14,11 @@ class Send extends React.Component {
_this = this _this = this
this.state = { this.state = {
address: "", address: '',
amountSat: "", amountSat: '',
errMsg: "", errMsg: '',
txId: "", txId: '',
showScan: false, showScan: false
} }
_this.BchWallet = BchWallet _this.BchWallet = BchWallet
} }
@@ -30,56 +30,56 @@ class Send extends React.Component {
<Row> <Row>
<Col sm={2} /> <Col sm={2} />
<Col sm={8}> <Col sm={8}>
<Box className="hover-shadow border-none mt-2"> <Box className='hover-shadow border-none mt-2'>
<Row> <Row>
<Col sm={12} className="text-center"> <Col sm={12} className='text-center'>
<h1> <h1>
<FontAwesomeIcon <FontAwesomeIcon
className="title-icon" className='title-icon'
size="xs" size='xs'
icon={"paper-plane"} icon='paper-plane'
/> />
<span>Send</span> <span>Send</span>
</h1> </h1>
<Box className="border-none"> <Box className='border-none'>
<Text <Text
id="addressToSend" id='addressToSend'
name="address" name='address'
placeholder="Enter bch address to send" placeholder='Enter bch address to send'
label="BCH Address" label='BCH Address'
labelPosition="above" labelPosition='above'
onChange={_this.handleUpdate} onChange={_this.handleUpdate}
className="title-icon" className='title-icon'
buttonRight={ buttonRight={
<Button <Button
icon="fa-qrcode" icon='fa-qrcode'
onClick={_this.toggleScanner} onClick={_this.handleToggleScanner}
/> />
} }
/> />
<Text <Text
id="amountToSend" id='amountToSend'
name="amountSat" name='amountSat'
placeholder="Enter amount to send" placeholder='Enter amount to send'
label="Amount" label='Amount'
labelPosition="above" labelPosition='above'
onChange={_this.handleUpdate} onChange={_this.handleUpdate}
/> />
<Button <Button
text="Send" text='Send'
type="primary" type='primary'
className="btn-lg" className='btn-lg'
onClick={_this.send} onClick={_this.handleSend}
/> />
</Box> </Box>
</Col> </Col>
<Col sm={12} className="text-center"> <Col sm={12} className='text-center'>
{_this.state.errMsg && ( {_this.state.errMsg && (
<p className="error-color">{_this.state.errMsg}</p> <p className='error-color'>{_this.state.errMsg}</p>
)} )}
{_this.state.txId && ( {_this.state.txId && (
<p className="">Transaction ID: {_this.state.txId}</p> <p className=''>Transaction ID: {_this.state.txId}</p>
)} )}
</Col> </Col>
</Row> </Row>
@@ -89,8 +89,8 @@ class Send extends React.Component {
</Row> </Row>
<ScannerModal <ScannerModal
show={_this.state.showScan} show={_this.state.showScan}
onHide={_this.toggleScanner} onHide={_this.handleToggleScanner}
onScan={_this.onScan} onScan={_this.handleOnScan}
/> />
</Content> </Content>
</> </>
@@ -98,13 +98,14 @@ class Send extends React.Component {
} }
handleUpdate (event) { handleUpdate (event) {
let value = event.target.value const value = event.target.value
_this.setState({ _this.setState({
[event.target.name]: value, [event.target.name]: value
}) })
// console.log(_this.state) // console.log(_this.state)
} }
async send() {
async handleSend () {
try { try {
_this.validateInputs() _this.validateInputs()
@@ -115,13 +116,13 @@ class Send extends React.Component {
{ {
address, address,
// amount in satoshis, 1 satoshi = 0.00000001 Bitcoin // amount in satoshis, 1 satoshi = 0.00000001 Bitcoin
amountSat: Math.floor(Number(amountSat) * 100000000), amountSat: Math.floor(Number(amountSat) * 100000000)
}, }
] ]
// console.log("receivers", receivers) // console.log("receivers", receivers)
if (!bchWalletLib) { if (!bchWalletLib) {
throw new Error("Wallet not found") throw new Error('Wallet not found')
} }
// Ensure the wallet UTXOs are up-to-date. // Ensure the wallet UTXOs are up-to-date.
@@ -135,7 +136,7 @@ class Send extends React.Component {
// console.log('result',result) // console.log('result',result)
_this.setState({ _this.setState({
txId: result, txId: result
}) })
// update balance // update balance
@@ -156,7 +157,7 @@ class Send extends React.Component {
return { return {
...prevState, ...prevState,
errMsg, errMsg,
txId: "", txId: ''
} }
}) })
} }
@@ -165,61 +166,63 @@ class Send extends React.Component {
// Reset form and component state // Reset form and component state
resetValues () { resetValues () {
_this.setState({ _this.setState({
address: "", address: '',
amountSat: "", amountSat: '',
errMsg: "", errMsg: ''
}) })
const amountEle = document.getElementById("amountToSend") const amountEle = document.getElementById('amountToSend')
amountEle.value = "" amountEle.value = ''
const addressEle = document.getElementById("addressToSend") const addressEle = document.getElementById('addressToSend')
addressEle.value = "" addressEle.value = ''
} }
validateInputs () { validateInputs () {
try {
const { address, amountSat } = _this.state const { address, amountSat } = _this.state
const amountNumber = Number(amountSat) const amountNumber = Number(amountSat)
console.log(_this.state) console.log(_this.state)
if (!address) { if (!address) {
throw new Error("Address is required") throw new Error('Address is required')
} }
if (!amountSat) { if (!amountSat) {
throw new Error("Amount is required") throw new Error('Amount is required')
} }
if (!amountNumber) { if (!amountNumber) {
throw new Error("Amount must be a number") throw new Error('Amount must be a number')
}
if (amountNumber < 0) {
throw new Error("Amount must be greater than zero")
}
} catch (error) {
throw error
}
}
toggleScanner() {
_this.setState({
showScan: !_this.state.showScan,
})
}
resetAddressValue() {
_this.setState({
address: "",
errMsg: "",
})
const addressEle = document.getElementById("addressToSend")
addressEle.value = ""
} }
onScan(data) { if (amountNumber < 0) {
const validateAdrrs = ["bitcoincash", "simpleledger"] throw new Error('Amount must be greater than zero')
}
}
handleToggleScanner () {
_this.setState({
showScan: !_this.state.showScan
})
}
resetAddressValue () {
_this.setState({
address: '',
errMsg: ''
})
const addressEle = document.getElementById('addressToSend')
addressEle.value = ''
}
handleOnScan (data) {
const validateAdrrs = ['bitcoincash', 'simpleledger']
try { try {
_this.resetAddressValue() _this.resetAddressValue()
if (!data) { if (!data) {
throw new Error("No Result!") throw new Error('No Result!')
} }
if (typeof data !== "string") { if (typeof data !== 'string') {
throw new Error("It should scan a bch address or slp address") throw new Error('It should scan a bch address or slp address')
} }
// Validates that the words "bitcoincash" or "simpleledger" are contained // Validates that the words "bitcoincash" or "simpleledger" are contained
let isValid = false let isValid = false
@@ -228,28 +231,29 @@ class Send extends React.Component {
if (isValid) { if (isValid) {
_this.setState({ _this.setState({
address: data, address: data,
errMsg: "", errMsg: ''
}) })
const addressEle = document.getElementById("addressToSend") const addressEle = document.getElementById('addressToSend')
addressEle.value = data addressEle.value = data
} }
} }
if (!isValid) { if (!isValid) {
throw new Error("It should scan a bch address or slp address") throw new Error('It should scan a bch address or slp address')
} }
_this.toggleScanner() _this.handleToggleScanner()
} catch (error) { } catch (error) {
_this.toggleScanner() _this.handleToggleScanner()
_this.setState({ _this.setState({
errMsg: error.message, errMsg: error.message
}) })
} }
} }
componentDidMount () {} componentDidMount () {}
} }
Send.propTypes = { Send.propTypes = {
updateBalance: PropTypes.func.isRequired, updateBalance: PropTypes.func.isRequired,
bchWallet: PropTypes.object, bchWallet: PropTypes.object
} }
export default Send export default Send
src/components/admin-lte/tokens/index.js
+30 -29
View File
@@ -1,10 +1,10 @@
import React from "react" import React from 'react'
import PropTypes from "prop-types" import PropTypes from 'prop-types'
import { Content, Row, Col, Box } from "adminlte-2-react" import { Content, Row, Col, Box } from 'adminlte-2-react'
import TokenCard from "./token-card" import TokenCard from './token-card'
import TokenModal from "./token-modal" import TokenModal from './token-modal'
import Spinner from "../../../images/loader.gif" import Spinner from '../../../images/loader.gif'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
let _this let _this
class Tokens extends React.Component { class Tokens extends React.Component {
@@ -13,10 +13,10 @@ class Tokens extends React.Component {
_this = this _this = this
this.state = { this.state = {
tokens: [], tokens: [],
selectedToken: "", selectedToken: '',
showModal: false, showModal: false,
inFetch: true, inFetch: true,
onEmptyTokensMsg: "No tokens found on this wallet..", onEmptyTokensMsg: 'No tokens found on this wallet..'
} }
} }
@@ -26,19 +26,19 @@ class Tokens extends React.Component {
return ( return (
<> <>
{_this.state.inFetch ? ( {_this.state.inFetch ? (
<div className="spinner"> <div className='spinner'>
<img alt="Loading..." src={Spinner} width={100} /> <img alt='Loading...' src={Spinner} width={100} />
</div> </div>
) : ( ) : (
<Content> <Content>
{!JWT && ( {!JWT && (
<Box padding="true" className="container-nofound"> <Box padding='true' className='container-nofound'>
<Row> <Row>
<Col xs={12}> <Col xs={12}>
<FontAwesomeIcon <FontAwesomeIcon
className="icon btn-animation" className='icon btn-animation'
size="lg" size='lg'
icon={"exclamation-triangle"} icon='exclamation-triangle'
/> />
</Col> </Col>
@@ -51,9 +51,9 @@ class Tokens extends React.Component {
</Row> </Row>
</Box> </Box>
)} )}
<br></br> <br />
{!_this.state.tokens.length && ( {!_this.state.tokens.length && (
<Box padding="true" className="container-nofound"> <Box padding='true' className='container-nofound'>
<Row> <Row>
<Col xs={12}> <Col xs={12}>
<em>{_this.state.onEmptyTokensMsg}</em> <em>{_this.state.onEmptyTokensMsg}</em>
@@ -81,12 +81,13 @@ class Tokens extends React.Component {
)} )}
<TokenModal <TokenModal
token={_this.state.selectedToken ? _this.state.selectedToken : {}} token={_this.state.selectedToken ? _this.state.selectedToken : {}}
onHide={_this.toggleModal} onHide={_this.handleToggleModal}
show={_this.state.showModal} show={_this.state.showModal}
/> />
</> </>
) )
} }
async componentDidMount () { async componentDidMount () {
const { mnemonic } = _this.props.walletInfo const { mnemonic } = _this.props.walletInfo
const bchWallet = _this.props.bchWallet const bchWallet = _this.props.bchWallet
@@ -94,41 +95,41 @@ class Tokens extends React.Component {
let { onEmptyTokensMsg } = _this.state let { onEmptyTokensMsg } = _this.state
if (mnemonic && bchWallet) { if (mnemonic && bchWallet) {
try { try {
await bchWallet.walletInfoPromise await bchWallet.walletInfoPromise
tokens = await bchWallet.listTokens() tokens = await bchWallet.listTokens()
} catch (error) { } catch (error) {
console.error(error) console.error(error)
if (error.error.match("rate limits")) onEmptyTokensMsg = error.error if (error.error.match('rate limits')) onEmptyTokensMsg = error.error
} }
} else { } else {
onEmptyTokensMsg = onEmptyTokensMsg =
"You need to create or import a wallet first, to view tokens" 'You need to create or import a wallet first, to view tokens'
} }
_this.setState({ _this.setState({
tokens, tokens,
inFetch: false, inFetch: false,
onEmptyTokensMsg, onEmptyTokensMsg
}) })
} }
showToken (selectedToken) { showToken (selectedToken) {
console.log("selectedToken", selectedToken) console.log('selectedToken', selectedToken)
_this.setState({ _this.setState({
selectedToken, selectedToken
}) })
_this.toggleModal() _this.handleToggleModal()
} }
toggleModal() {
handleToggleModal () {
_this.setState({ _this.setState({
showModal: !_this.state.showModal, showModal: !_this.state.showModal
}) })
} }
} }
Tokens.propTypes = { Tokens.propTypes = {
walletInfo: PropTypes.object.isRequired, // wallet info walletInfo: PropTypes.object.isRequired, // wallet info
bchWallet: PropTypes.object, // get minimal-slp-wallet instance bchWallet: PropTypes.object // get minimal-slp-wallet instance
} }
export default Tokens export default Tokens
src/components/admin-lte/tokens/token-card.js
+22 -20
View File
@@ -1,8 +1,8 @@
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 Jdenticon from "react-jdenticon" import Jdenticon from 'react-jdenticon'
import "./token.css" import './token.css'
let _this let _this
class TokenCard extends React.Component { class TokenCard extends React.Component {
constructor (props) { constructor (props) {
@@ -10,39 +10,40 @@ class TokenCard extends React.Component {
_this = this _this = this
this.state = {} this.state = {}
} }
render () { render () {
const token = _this.props.token const token = _this.props.token
return ( return (
<> <>
<Box className="hover-shadow border-none mt-2" id="token-card"> <Box className='hover-shadow border-none mt-2' id='token-card'>
<Row className="text-center"> <Row className='text-center'>
<Col sm={12} className="text-center mt-2 "> <Col sm={12} className='text-center mt-2 '>
<Jdenticon size="100" value={token.tokenId} /> <Jdenticon size='100' value={token.tokenId} />
<hr></hr> <hr />
</Col> </Col>
<Col sm={12} className="flex justify-content-center "> <Col sm={12} className='flex justify-content-center '>
<div className="info-container"> <div className='info-container'>
<p className="info-content"> <p className='info-content'>
<b>Ticker: </b> <b>Ticker: </b>
<span> {token.ticker}</span> <span> {token.ticker}</span>
</p> </p>
<p className="info-content"> <p className='info-content'>
<b>Name: </b> <b>Name: </b>
<span>{token.name}</span> <span>{token.name}</span>
</p> </p>
<p className="info-content"> <p className='info-content'>
<b>Balance</b> <b>Balance</b>
<span>{token.qty}</span> <span>{token.qty}</span>
</p> </p>
</div> </div>
</Col> </Col>
<Col sm={12} className="text-center "> <Col sm={12} className='text-center '>
<Button <Button
text="Show Token" text='Show Token'
type="primary" type='primary'
className="btn-lg" className='btn-lg'
onClick={() => { onClick={() => {
_this.props.showToken(token) _this.props.showToken(token)
}} }}
@@ -53,12 +54,13 @@ class TokenCard extends React.Component {
</> </>
) )
} }
shouldComponentUpdate () { shouldComponentUpdate () {
return false return false
} }
} }
TokenCard.propTypes = { TokenCard.propTypes = {
token: PropTypes.object.isRequired, token: PropTypes.object.isRequired,
showToken: PropTypes.func.isRequired, showToken: PropTypes.func.isRequired
} }
export default TokenCard export default TokenCard
src/components/admin-lte/tokens/token-modal.js
+32 -30
View File
@@ -1,22 +1,23 @@
import React from "react" import React from 'react'
import PropTypes from "prop-types" import PropTypes from 'prop-types'
import { Content, Row, Col, Box, Button } from "adminlte-2-react" import { Content, Row, Col, Box, Button } from 'adminlte-2-react'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import "./token.css" import './token.css'
let _this let _this
class TokenModal extends React.Component { class TokenModal extends React.Component {
constructor (props) { constructor (props) {
super(props) super(props)
_this = this _this = this
this.state = {} this.state = {}
this.modalFooter = (
<>
<Button text='Close' pullLeft onClick={this.props.handleOnHide} />
</>
)
} }
modalFooter = (
<React.Fragment>
<Button text="Close" pullLeft onClick={this.props.onHide} />
</React.Fragment>
)
render () { render () {
const token = _this.props.token const token = _this.props.token
return ( return (
@@ -26,18 +27,18 @@ class TokenModal extends React.Component {
modal modal
modalFooter={this.modalFooter} modalFooter={this.modalFooter}
show={_this.props.show} show={_this.props.show}
modalCloseButton={true} modalCloseButton
onHide={_this.props.onHide} onHide={_this.props.handleOnHide}
> >
<Row> <Row>
<Col sm={12}> <Col sm={12}>
<Box className=" border-none "> <Box className=' border-none '>
<Row> <Row>
<Col <Col
sm={12} sm={12}
className="text-center tokenModal-info-container" className='text-center tokenModal-info-container'
> >
<Row className="tokenModal-info-content mt-1 text-left"> <Row className='tokenModal-info-content mt-1 text-left'>
<Col xs={12}> <Col xs={12}>
<Row> <Row>
<Col xs={12} sm={3}> <Col xs={12} sm={3}>
@@ -48,16 +49,16 @@ class TokenModal extends React.Component {
</Col> </Col>
<Col xs={2} sm={1}> <Col xs={2} sm={1}>
<FontAwesomeIcon <FontAwesomeIcon
className="icon btn-animation" className='icon btn-animation'
size="lg" size='lg'
onClick={() => _this.copyToClipBoard("tokenId")} onClick={() => _this.copyToClipBoard('tokenId')}
icon={"copy"} icon='copy'
/> />
</Col> </Col>
</Row> </Row>
</Col> </Col>
</Row> </Row>
<Row className="tokenModal-info-content mt-1 text-left"> <Row className='tokenModal-info-content mt-1 text-left'>
<Col xs={12}> <Col xs={12}>
<Row> <Row>
<Col xs={12} sm={3}> <Col xs={12} sm={3}>
@@ -66,8 +67,8 @@ class TokenModal extends React.Component {
<Col xs={12} sm={9}> <Col xs={12} sm={9}>
<a <a
href={`http://${token.url}`} href={`http://${token.url}`}
target="_blank" target='_blank'
rel="noreferrer" rel='noopener noreferrer'
> >
{token.url} {token.url}
</a> </a>
@@ -75,7 +76,7 @@ class TokenModal extends React.Component {
</Row> </Row>
</Col> </Col>
</Row> </Row>
<Row className="tokenModal-info-content mt-1 text-left"> <Row className='tokenModal-info-content mt-1 text-left'>
<Col xs={12}> <Col xs={12}>
<Row> <Row>
<Col xs={12} sm={3}> <Col xs={12} sm={3}>
@@ -87,7 +88,7 @@ class TokenModal extends React.Component {
</Row> </Row>
</Col> </Col>
</Row> </Row>
<Row className="tokenModal-info-content mt-1 text-left"> <Row className='tokenModal-info-content mt-1 text-left'>
<Col xs={12}> <Col xs={12}>
<Row> <Row>
<Col xs={12} sm={3}> <Col xs={12} sm={3}>
@@ -99,7 +100,7 @@ class TokenModal extends React.Component {
</Row> </Row>
</Col> </Col>
</Row> </Row>
<Row className="tokenModal-info-content mt-1 text-left"> <Row className='tokenModal-info-content mt-1 text-left'>
<Col xs={12}> <Col xs={12}>
<Row> <Row>
<Col xs={12} sm={3}> <Col xs={12} sm={3}>
@@ -111,7 +112,7 @@ class TokenModal extends React.Component {
</Row> </Row>
</Col> </Col>
</Row> </Row>
<Row className="tokenModal-info-content mt-1 text-left"> <Row className='tokenModal-info-content mt-1 text-left'>
<Col xs={12}> <Col xs={12}>
<Row> <Row>
<Col xs={12} sm={3}> <Col xs={12} sm={3}>
@@ -123,7 +124,7 @@ class TokenModal extends React.Component {
</Row> </Row>
</Col> </Col>
</Row> </Row>
<Row className="tokenModal-info-content mt-1 text-left"> <Row className='tokenModal-info-content mt-1 text-left'>
<Col xs={12}> <Col xs={12}>
<Row> <Row>
<Col xs={12} sm={3}> <Col xs={12} sm={3}>
@@ -144,20 +145,21 @@ class TokenModal extends React.Component {
</> </>
) )
} }
// copy info to clipboard // copy info to clipboard
copyToClipBoard (key) { copyToClipBoard (key) {
const val = _this.props.token[key] const val = _this.props.token[key]
var textArea = document.createElement("textarea") var textArea = document.createElement('textarea')
textArea.value = val // copyText.textContent; textArea.value = val // copyText.textContent;
document.body.appendChild(textArea) document.body.appendChild(textArea)
textArea.select() textArea.select()
document.execCommand("Copy") document.execCommand('Copy')
textArea.remove() textArea.remove()
} }
} }
TokenModal.propTypes = { TokenModal.propTypes = {
token: PropTypes.object.isRequired, token: PropTypes.object.isRequired,
show: PropTypes.bool.isRequired, show: PropTypes.bool.isRequired,
onHide: PropTypes.func.isRequired, onHide: PropTypes.func.isRequired
} }
export default TokenModal export default TokenModal
src/components/admin-lte/wallet/create.js
+19 -19
View File
@@ -1,8 +1,8 @@
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 BchWallet from "minimal-slp-wallet" import BchWallet from 'minimal-slp-wallet'
let _this let _this
class NewWallet extends React.Component { class NewWallet extends React.Component {
@@ -20,24 +20,24 @@ class NewWallet extends React.Component {
<Row> <Row>
<Col sm={2} /> <Col sm={2} />
<Col sm={8}> <Col sm={8}>
<Box className="hover-shadow border-none mt-2"> <Box className='hover-shadow border-none mt-2'>
<Row> <Row>
<Col sm={12} className="text-center"> <Col sm={12} className='text-center'>
<h1> <h1>
<FontAwesomeIcon <FontAwesomeIcon
className="title-icon" className='title-icon'
size="xs" size='xs'
icon={"plus"} icon='plus'
/> />
<span>New Wallet</span> <span>New Wallet</span>
</h1> </h1>
</Col> </Col>
<Col sm={12} className="text-center mt-2 mb-2"> <Col sm={12} className='text-center mt-2 mb-2'>
<Button <Button
text="Create Wallet" text='Create Wallet'
type="primary" type='primary'
className="btn-lg" className='btn-lg'
onClick={_this.createWallet} onClick={_this.handleCreateWallet}
/> />
</Col> </Col>
</Row> </Row>
@@ -49,12 +49,12 @@ class NewWallet extends React.Component {
) )
} }
async createWallet() { async handleCreateWallet () {
try { try {
const currentWallet = _this.props.walletInfo const currentWallet = _this.props.walletInfo
if (currentWallet.mnemonic) { if (currentWallet.mnemonic) {
console.warn("Wallet already exists") console.warn('Wallet already exists')
/* /*
* TODO: notify the user that if it has an existing wallet, * TODO: notify the user that if it has an existing wallet,
* it will get overwritten * it will get overwritten
@@ -71,7 +71,7 @@ class NewWallet extends React.Component {
await bchWalletLib.walletInfoPromise // Wait for wallet to be created. await bchWalletLib.walletInfoPromise // Wait for wallet to be created.
const walletInfo = bchWalletLib.walletInfo const walletInfo = bchWalletLib.walletInfo
walletInfo.from = "created" walletInfo.from = 'created'
const myBalance = await bchWalletLib.getBalance() const myBalance = await bchWalletLib.getBalance()
@@ -88,6 +88,6 @@ NewWallet.propTypes = {
walletInfo: PropTypes.object.isRequired, walletInfo: PropTypes.object.isRequired,
setWalletInfo: PropTypes.func.isRequired, setWalletInfo: PropTypes.func.isRequired,
updateBalance: PropTypes.func.isRequired, updateBalance: PropTypes.func.isRequired,
setBchWallet: PropTypes.func.isRequired, setBchWallet: PropTypes.func.isRequired
} }
export default NewWallet export default NewWallet
src/components/admin-lte/wallet/import.js
+52 -49
View File
@@ -1,8 +1,8 @@
import React from "react" import React from 'react'
import PropTypes from "prop-types" import PropTypes from 'prop-types'
import { Row, Col, Box, Button, Inputs } from "adminlte-2-react" import { Row, Col, Box, Button, Inputs } from 'adminlte-2-react'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import BchWallet from "minimal-slp-wallet" import BchWallet from 'minimal-slp-wallet'
const { Text } = Inputs const { Text } = Inputs
@@ -14,65 +14,65 @@ class ImportWallet extends React.Component {
_this = this _this = this
this.state = { this.state = {
mnemonic: "", mnemonic: '',
privateKey: "", privateKey: '',
errMsg: "", errMsg: ''
} }
_this.BchWallet = BchWallet _this.BchWallet = BchWallet
} }
render () { render () {
return ( return (
<Row className=""> <Row className=''>
<Col sm={2} /> <Col sm={2} />
<Col sm={8}> <Col sm={8}>
<Box className="hover-shadow border-none mt-2"> <Box className='hover-shadow border-none mt-2'>
<Row> <Row>
<Col sm={12} className="text-center"> <Col sm={12} className='text-center'>
<h1> <h1>
<FontAwesomeIcon <FontAwesomeIcon
className="title-icon" className='title-icon'
size="xs" size='xs'
icon={"file-import"} icon='file-import'
/> />
<span>Import Wallet</span> <span>Import Wallet</span>
</h1> </h1>
</Col> </Col>
<Col sm={12} className="text-center mt-2 mb-2"> <Col sm={12} className='text-center mt-2 mb-2'>
<Row className="flex justify-content-center"> <Row className='flex justify-content-center'>
<Col sm={8}> <Col sm={8}>
<div> <div>
<Text <Text
id="import-mnemonic" id='import-mnemonic'
name="mnemonic" name='mnemonic'
placeholder="12 word mnemonic" placeholder='12 word mnemonic'
label="12 word mnemonic" label='12 word mnemonic'
labelPosition="above" labelPosition='above'
onChange={_this.handleUpdate} onChange={_this.handleUpdate}
/> />
<Text <Text
id="privateKey" id='privateKey'
name="privateKey" name='privateKey'
placeholder="Private Key" placeholder='Private Key'
label="Private Key" label='Private Key'
labelPosition="above" labelPosition='above'
onChange={_this.handleUpdate} onChange={_this.handleUpdate}
/> />
</div> </div>
</Col> </Col>
</Row> </Row>
</Col> </Col>
<Col sm={12} className="text-center"> <Col sm={12} className='text-center'>
{_this.state.errMsg && ( {_this.state.errMsg && (
<p className="error-color">{_this.state.errMsg}</p> <p className='error-color'>{_this.state.errMsg}</p>
)} )}
</Col> </Col>
<Col sm={12} className="text-center mt-2 mb-2"> <Col sm={12} className='text-center mt-2 mb-2'>
<Button <Button
text="Import" text='Import'
type="primary" type='primary'
className="btn-lg" className='btn-lg'
onClick={_this.importWallet} onClick={_this.importWallet}
/> />
</Col> </Col>
@@ -83,19 +83,22 @@ class ImportWallet extends React.Component {
</Row> </Row>
) )
} }
componentDidMount () { componentDidMount () {
// add max length property to mnemonic input // add max length property to mnemonic input
// document.getElementById("import-mnemonic").maxLength = "12" // document.getElementById("import-mnemonic").maxLength = "12"
} }
handleUpdate (event) { handleUpdate (event) {
let value = event.target.value let value = event.target.value
if (event.target.name === "mnemonic") { if (event.target.name === 'mnemonic') {
value = value.toLowerCase() value = value.toLowerCase()
} }
_this.setState({ _this.setState({
[event.target.name]: value, [event.target.name]: value
}) })
} }
async importWallet () { async importWallet () {
try { try {
_this.validateInputs() _this.validateInputs()
@@ -103,7 +106,7 @@ class ImportWallet extends React.Component {
const currentWallet = _this.props.walletInfo const currentWallet = _this.props.walletInfo
if (currentWallet.mnemonic) { if (currentWallet.mnemonic) {
console.warn("Wallet already exists") console.warn('Wallet already exists')
/* /*
* TODO: notify the user that it has an existing wallet, * TODO: notify the user that it has an existing wallet,
* and it will get overwritten * and it will get overwritten
@@ -120,7 +123,7 @@ class ImportWallet extends React.Component {
await bchWalletLib.walletInfoPromise // Wait for wallet to be created. await bchWalletLib.walletInfoPromise // Wait for wallet to be created.
const walletInfo = bchWalletLib.walletInfo const walletInfo = bchWalletLib.walletInfo
walletInfo.from = "imported" walletInfo.from = 'imported'
const myBalance = await bchWalletLib.getBalance() const myBalance = await bchWalletLib.getBalance()
@@ -134,7 +137,7 @@ class ImportWallet extends React.Component {
} catch (error) { } catch (error) {
console.warn(error) console.warn(error)
_this.setState({ _this.setState({
errMsg: error.message, errMsg: error.message
}) })
} }
} }
@@ -142,29 +145,29 @@ class ImportWallet extends React.Component {
// Reset form and component state // Reset form and component state
resetValues () { resetValues () {
_this.setState({ _this.setState({
mnemonic: "", mnemonic: '',
privateKey: "", privateKey: '',
errMsg: "", errMsg: ''
}) })
const mnemonicEle = document.getElementById("import-mnemonic") const mnemonicEle = document.getElementById('import-mnemonic')
mnemonicEle.value = "" mnemonicEle.value = ''
const privateKeyEle = document.getElementById("privateKey") const privateKeyEle = document.getElementById('privateKey')
privateKeyEle.value = "" privateKeyEle.value = ''
} }
validateInputs () { validateInputs () {
try { try {
const { mnemonic } = _this.state const { mnemonic } = _this.state
if (mnemonic) { if (mnemonic) {
const spaceCount = mnemonic.split(" ").length //mnemonic.match(/ /g).length const spaceCount = mnemonic.split(' ').length // mnemonic.match(/ /g).length
if (spaceCount !== 12) { if (spaceCount !== 12) {
console.log("reject") console.log('reject')
throw new Error("mnemonic must contain 12 words") throw new Error('mnemonic must contain 12 words')
} }
} else { } else {
throw new Error("12 word mnemonic is required") throw new Error('12 word mnemonic is required')
} }
} catch (error) { } catch (error) {
throw error throw error
@@ -175,6 +178,6 @@ ImportWallet.propTypes = {
walletInfo: PropTypes.object.isRequired, walletInfo: PropTypes.object.isRequired,
setWalletInfo: PropTypes.func.isRequired, setWalletInfo: PropTypes.func.isRequired,
updateBalance: PropTypes.func.isRequired, updateBalance: PropTypes.func.isRequired,
setBchWallet: PropTypes.func.isRequired, setBchWallet: PropTypes.func.isRequired
} }
export default ImportWallet export default ImportWallet
src/components/admin-lte/wallet/index.js
+10 -11
View File
@@ -1,10 +1,10 @@
import React from "react" import React from 'react'
import PropTypes from "prop-types" import PropTypes from 'prop-types'
import { Content } from "adminlte-2-react" import { Content } from 'adminlte-2-react'
import ImportWallet from "./import" import ImportWallet from './import'
import NewWallet from "./create" import NewWallet from './create'
import InfoWallets from "./info" import InfoWallets from './info'
import WalletInfo from "./wallet-info" import WalletInfo from './wallet-info'
let _this let _this
class Wallet extends React.Component { class Wallet extends React.Component {
@@ -26,7 +26,7 @@ class Wallet extends React.Component {
/> />
{_this.props.walletInfo.mnemonic && {_this.props.walletInfo.mnemonic &&
_this.props.walletInfo.from === "created" && ( _this.props.walletInfo.from === 'created' && (
<WalletInfo walletInfo={_this.props.walletInfo} /> <WalletInfo walletInfo={_this.props.walletInfo} />
)} )}
@@ -38,7 +38,7 @@ class Wallet extends React.Component {
/> />
{_this.props.walletInfo.mnemonic && {_this.props.walletInfo.mnemonic &&
_this.props.walletInfo.from === "imported" && ( _this.props.walletInfo.from === 'imported' && (
<WalletInfo walletInfo={_this.props.walletInfo} /> <WalletInfo walletInfo={_this.props.walletInfo} />
)} )}
@@ -47,13 +47,12 @@ class Wallet extends React.Component {
</> </>
) )
} }
} }
Wallet.propTypes = { Wallet.propTypes = {
setWalletInfo: PropTypes.func.isRequired, setWalletInfo: PropTypes.func.isRequired,
walletInfo: PropTypes.object.isRequired, walletInfo: PropTypes.object.isRequired,
updateBalance: PropTypes.func.isRequired, updateBalance: PropTypes.func.isRequired,
setBchWallet: PropTypes.func.isRequired, setBchWallet: PropTypes.func.isRequired
} }
export default Wallet export default Wallet
src/components/admin-lte/wallet/wallet-info.js
+61 -59
View File
@@ -1,9 +1,9 @@
import React from "react" import React from 'react'
import PropTypes from "prop-types" import PropTypes from 'prop-types'
import { Row, Col, Box } from "adminlte-2-react" import { Row, Col, Box } from 'adminlte-2-react'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import "./wallet.css" import './wallet.css'
let _this let _this
class WalletInfo extends React.Component { class WalletInfo extends React.Component {
constructor (props) { constructor (props) {
@@ -11,13 +11,13 @@ class WalletInfo extends React.Component {
_this = this _this = this
this.state = { this.state = {
walletInfo: _this.props.walletInfo, walletInfo: _this.props.walletInfo,
mnemonic: "", mnemonic: '',
privateKey: "", privateKey: '',
cashAddress: "", cashAddress: '',
address: "", address: '',
slpAddress: "", slpAddress: '',
legacyAddress: "", legacyAddress: '',
hdPath: "", hdPath: ''
} }
} }
@@ -26,21 +26,21 @@ class WalletInfo extends React.Component {
<Row> <Row>
<Col sm={2} /> <Col sm={2} />
<Col sm={8}> <Col sm={8}>
<Box className="hover-shadow border-none mt-2"> <Box className='hover-shadow border-none mt-2'>
<Row> <Row>
<Col sm={12} className="text-center"> <Col sm={12} className='text-center'>
<h1> <h1>
<FontAwesomeIcon <FontAwesomeIcon
className="title-icon" className='title-icon'
size="xs" size='xs'
icon={"wallet"} icon='wallet'
/> />
<span>My Wallet</span> <span>My Wallet</span>
</h1> </h1>
</Col> </Col>
<Col sm={12} className="text-center wallet-info-container"> <Col sm={12} className='text-center wallet-info-container'>
<Row className="wallet-info-content mt-1 text-left"> <Row className='wallet-info-content mt-1 text-left'>
<Col xs={10} sm={11}> <Col xs={10} sm={11}>
<span> <span>
<b>Mnemonic:</b> {_this.state.mnemonic} <b>Mnemonic:</b> {_this.state.mnemonic}
@@ -48,14 +48,14 @@ class WalletInfo extends React.Component {
</Col> </Col>
<Col xs={2} sm={1}> <Col xs={2} sm={1}>
<FontAwesomeIcon <FontAwesomeIcon
className="icon btn-animation" className='icon btn-animation'
size="lg" size='lg'
onClick={() => _this.copyToClipBoard("mnemonic")} onClick={() => _this.copyToClipBoard('mnemonic')}
icon={"copy"} icon='copy'
/> />
</Col> </Col>
</Row> </Row>
<Row className="wallet-info-content mt-1 text-left"> <Row className='wallet-info-content mt-1 text-left'>
<Col xs={10} sm={11}> <Col xs={10} sm={11}>
<span> <span>
<b>Private Key: </b> {_this.state.privateKey} <b>Private Key: </b> {_this.state.privateKey}
@@ -63,14 +63,14 @@ class WalletInfo extends React.Component {
</Col> </Col>
<Col xs={2} sm={1}> <Col xs={2} sm={1}>
<FontAwesomeIcon <FontAwesomeIcon
className="icon btn-animation" className='icon btn-animation'
size="lg" size='lg'
onClick={() => _this.copyToClipBoard("privateKey")} onClick={() => _this.copyToClipBoard('privateKey')}
icon={"copy"} icon='copy'
/> />
</Col> </Col>
</Row> </Row>
<Row className="wallet-info-content mt-1 text-left"> <Row className='wallet-info-content mt-1 text-left'>
<Col xs={10} sm={11}> <Col xs={10} sm={11}>
<span> <span>
<b>Cash Address: </b> {_this.state.cashAddress} <b>Cash Address: </b> {_this.state.cashAddress}
@@ -78,14 +78,14 @@ class WalletInfo extends React.Component {
</Col> </Col>
<Col xs={2} sm={1}> <Col xs={2} sm={1}>
<FontAwesomeIcon <FontAwesomeIcon
className="icon btn-animation" className='icon btn-animation'
size="lg" size='lg'
onClick={() => _this.copyToClipBoard("cashAddress")} onClick={() => _this.copyToClipBoard('cashAddress')}
icon={"copy"} icon='copy'
/> />
</Col> </Col>
</Row> </Row>
<Row className="wallet-info-content mt-1 text-left"> <Row className='wallet-info-content mt-1 text-left'>
<Col xs={10} sm={11}> <Col xs={10} sm={11}>
<span> <span>
<b>Address: </b> {_this.state.address} <b>Address: </b> {_this.state.address}
@@ -93,14 +93,14 @@ class WalletInfo extends React.Component {
</Col> </Col>
<Col xs={2} sm={1}> <Col xs={2} sm={1}>
<FontAwesomeIcon <FontAwesomeIcon
className="icon btn-animation" className='icon btn-animation'
size="lg" size='lg'
onClick={() => _this.copyToClipBoard("address")} onClick={() => _this.copyToClipBoard('address')}
icon={"copy"} icon='copy'
/> />
</Col> </Col>
</Row> </Row>
<Row className="wallet-info-content mt-1 text-left"> <Row className='wallet-info-content mt-1 text-left'>
<Col xs={10} sm={11}> <Col xs={10} sm={11}>
<span> <span>
<b>Slp Address: </b> {_this.state.slpAddress} <b>Slp Address: </b> {_this.state.slpAddress}
@@ -108,14 +108,14 @@ class WalletInfo extends React.Component {
</Col> </Col>
<Col xs={2} sm={1}> <Col xs={2} sm={1}>
<FontAwesomeIcon <FontAwesomeIcon
className="icon btn-animation" className='icon btn-animation'
size="lg" size='lg'
onClick={() => _this.copyToClipBoard("slpAddress")} onClick={() => _this.copyToClipBoard('slpAddress')}
icon={"copy"} icon='copy'
/> />
</Col> </Col>
</Row> </Row>
<Row className="wallet-info-content mt-1 text-left"> <Row className='wallet-info-content mt-1 text-left'>
<Col xs={10} sm={11}> <Col xs={10} sm={11}>
<span> <span>
<b>Legacy Address: </b> {_this.state.legacyAddress} <b>Legacy Address: </b> {_this.state.legacyAddress}
@@ -123,26 +123,26 @@ class WalletInfo extends React.Component {
</Col> </Col>
<Col xs={2} sm={1}> <Col xs={2} sm={1}>
<FontAwesomeIcon <FontAwesomeIcon
className="icon btn-animation" className='icon btn-animation'
size="lg" size='lg'
onClick={() => _this.copyToClipBoard("legacyAddress")} onClick={() => _this.copyToClipBoard('legacyAddress')}
icon={"copy"} icon='copy'
/> />
</Col> </Col>
</Row> </Row>
<Row className="wallet-info-content mt-1 text-left"> <Row className='wallet-info-content mt-1 text-left'>
<Col xs={10} sm={11}> <Col xs={10} sm={11}>
<span> <span>
<b>HD Path: </b> <b>HD Path: </b>
<span id="hdpathValue">{_this.state.hdPath}</span> <span id='hdpathValue'>{_this.state.hdPath}</span>
</span> </span>
</Col> </Col>
<Col xs={2} sm={1}> <Col xs={2} sm={1}>
<FontAwesomeIcon <FontAwesomeIcon
className="icon btn-animation" className='icon btn-animation'
size="lg" size='lg'
onClick={() => _this.copyToClipBoard("hdPath")} onClick={() => _this.copyToClipBoard('hdPath')}
icon={"copy"} icon='copy'
/> />
</Col> </Col>
</Row> </Row>
@@ -154,14 +154,15 @@ class WalletInfo extends React.Component {
</Row> </Row>
) )
} }
// copy info to clipboard // copy info to clipboard
copyToClipBoard (key) { copyToClipBoard (key) {
const val = _this.state[key] const val = _this.state[key]
var textArea = document.createElement("textarea") var textArea = document.createElement('textarea')
textArea.value = val // copyText.textContent; textArea.value = val // copyText.textContent;
document.body.appendChild(textArea) document.body.appendChild(textArea)
textArea.select() textArea.select()
document.execCommand("Copy") document.execCommand('Copy')
textArea.remove() textArea.remove()
} }
@@ -170,24 +171,25 @@ class WalletInfo extends React.Component {
const wallet = _this.props.walletInfo const wallet = _this.props.walletInfo
Object.entries(wallet).forEach(([key, value]) => { Object.entries(wallet).forEach(([key, value]) => {
_this.setState({ _this.setState({
[key]: value, [key]: value
}) })
}) })
} }
componentDidUpdate () { componentDidUpdate () {
// set component state // set component state
if (_this.props.walletInfo.mnemonic !== _this.state.mnemonic) { if (_this.props.walletInfo.mnemonic !== _this.state.mnemonic) {
const wallet = _this.props.walletInfo const wallet = _this.props.walletInfo
Object.entries(wallet).forEach(([key, value]) => { Object.entries(wallet).forEach(([key, value]) => {
_this.setState({ _this.setState({
[key]: value, [key]: value
}) })
}) })
} }
} }
} }
WalletInfo.propTypes = { WalletInfo.propTypes = {
walletInfo: PropTypes.object.isRequired, walletInfo: PropTypes.object.isRequired
} }
export default WalletInfo export default WalletInfo
src/components/footer/index.js
+27 -27
View File
@@ -1,72 +1,72 @@
import React from "react" import React from 'react'
import "./footer.css" import './footer.css'
import { Row, Col } from "adminlte-2-react" import { Row, Col } from 'adminlte-2-react'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faGithub } from "@fortawesome/free-brands-svg-icons" import { faGithub } from '@fortawesome/free-brands-svg-icons'
class Footer extends React.Component { class Footer extends React.Component {
render () { render () {
return ( return (
<section id="footer"> <section id='footer'>
<Row className="footer-container"> <Row className='footer-container'>
<Col md={5} className="footer-section"> <Col md={5} className='footer-section'>
<Row> <Row>
<Col md={12} className="mb-1"> <Col md={12} className='mb-1'>
<p className="section-tittle">Produced By</p> <p className='section-tittle'>Produced By</p>
<a <a
href="https://psfoundation.cash/" href='https://psfoundation.cash/'
target="_blank" target='_blank'
rel="noreferrer" rel='noreferrer'
> >
Permissionless Software Foundation Permissionless Software Foundation
</a> </a>
</Col> </Col>
<Col md={12}> <Col md={12}>
<p className="section-tittle">Source Code</p> <p className='section-tittle'>Source Code</p>
<FontAwesomeIcon className="" size="lg" icon={faGithub} /> <FontAwesomeIcon className='' size='lg' icon={faGithub} />
<a <a
href="https://github.com/Permissionless-Software-Foundation/gatsby-ipfs-web-wallet" href='https://github.com/Permissionless-Software-Foundation/gatsby-ipfs-web-wallet'
target="_blank" target='_blank'
rel="noreferrer" rel='noreferrer'
> >
Github Github
</a> </a>
</Col> </Col>
</Row> </Row>
</Col> </Col>
<Col md={7} className="footer-section"> <Col md={7} className='footer-section'>
<div className="pull-right"> <div className='pull-right'>
<span className="section-tittle"> <span className='section-tittle'>
Ways to access this web-app Ways to access this web-app
</span> </span>
<ul> <ul>
<li id="web"> <li id='web'>
<span> <span>
<b>Web</b> <b>Web</b>
</span> </span>
<b>|</b> <b>|</b>
<a href="https://wallet.fullstack.cash"> <a href='https://wallet.fullstack.cash'>
wallet.fullstack.cash wallet.fullstack.cash
</a> </a>
</li> </li>
<li id="tor"> <li id='tor'>
<span> <span>
<b>Tor</b> <b>Tor</b>
</span> </span>
<b>|</b> <b>|</b>
<a href="http://puh2fyj2ly5b4p5m.onion/"> <a href='http://puh2fyj2ly5b4p5m.onion/'>
puh2fyj2ly5b4p5m.onion puh2fyj2ly5b4p5m.onion
</a> </a>
</li> </li>
<li id="ipfs"> <li id='ipfs'>
<span> <span>
<b>IPFS</b> <b>IPFS</b>
</span> </span>
<b>|</b> <b>|</b>
<a href="https://ipfs.io/ipfs/QmTMpYt66SGSjckXTHF6bPip6h1V5fXT23tEUJgy7pyTkf/"> <a href='https://ipfs.io/ipfs/QmTMpYt66SGSjckXTHF6bPip6h1V5fXT23tEUJgy7pyTkf/'>
QmTMpYt66SGSjckXTHF6bPip6h1V5fXT23tEUJgy7pyTkf QmTMpYt66SGSjckXTHF6bPip6h1V5fXT23tEUJgy7pyTkf
</a> </a>
</li> </li>
src/components/header.js
+12 -12
View File
@@ -1,27 +1,27 @@
import { Link } from "gatsby" import { Link } from 'gatsby'
import PropTypes from "prop-types" import PropTypes from 'prop-types'
import React from "react" import React from 'react'
const Header = ({ siteTitle }) => ( const Header = ({ siteTitle }) => (
<header <header
style={{ style={{
background: `rebeccapurple`, background: 'rebeccapurple',
marginBottom: `1.45rem`, marginBottom: '1.45rem'
}} }}
> >
<div <div
style={{ style={{
margin: `0 auto`, margin: '0 auto',
maxWidth: 960, maxWidth: 960,
padding: `1.45rem 1.0875rem`, padding: '1.45rem 1.0875rem'
}} }}
> >
<h1 style={{ margin: 0 }}> <h1 style={{ margin: 0 }}>
<Link <Link
to="/" to='/'
style={{ style={{
color: `white`, color: 'white',
textDecoration: `none`, textDecoration: 'none'
}} }}
> >
{siteTitle} {siteTitle}
@@ -32,11 +32,11 @@ const Header = ({ siteTitle }) => (
) )
Header.propTypes = { Header.propTypes = {
siteTitle: PropTypes.string, siteTitle: PropTypes.string
} }
Header.defaultProps = { Header.defaultProps = {
siteTitle: ``, siteTitle: ''
} }
export default Header export default Header
src/components/image.js
+3 -3
View File
@@ -1,6 +1,6 @@
import React from "react" import React from 'react'
import { useStaticQuery, graphql } from "gatsby" import { useStaticQuery, graphql } from 'gatsby'
import Img from "gatsby-image" import Img from 'gatsby-image'
/* /*
* This component is built using `gatsby-image` to automatically serve optimized * This component is built using `gatsby-image` to automatically serve optimized
src/components/layout.js
+7 -7
View File
@@ -5,15 +5,15 @@
* See: https://www.gatsbyjs.org/docs/use-static-query/ * See: https://www.gatsbyjs.org/docs/use-static-query/
*/ */
import React from "react" import React from 'react'
import PropTypes from "prop-types" import PropTypes from 'prop-types'
// import { useStaticQuery, graphql } from "gatsby" // import { useStaticQuery, graphql } from "gatsby"
// import Header from "./header" // import Header from "./header"
import "./app-colors.css" import './app-colors.css'
import "./layout.css" import './layout.css'
let Footer = typeof window !== `undefined` ? require("./footer").default : null const Footer = typeof window !== 'undefined' ? require('./footer').default : null
// import Footer from "./footer" // import Footer from "./footer"
const Layout = ({ children }) => { const Layout = ({ children }) => {
@@ -30,12 +30,12 @@ const Layout = ({ children }) => {
return ( return (
<> <>
<main>{children}</main> <main>{children}</main>
{Footer && <Footer />}{" "} {Footer && <Footer />}{' '}
</> </>
) )
} }
Layout.propTypes = { Layout.propTypes = {
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired
} }
export default Layout export default Layout
src/components/localWallet.js
+2 -3
View File
@@ -1,10 +1,9 @@
// Local storage handler // Local storage handler
const localStorageWalletKey = 'fullstack-wallet-info'
const localStorageWalletKey = "fullstack-wallet-info"
// Detect if the app is running in a browser. // Detect if the app is running in a browser.
export const isBrowser = () => typeof window !== "undefined" export const isBrowser = () => typeof window !== 'undefined'
export const getWalletInfo = () => export const getWalletInfo = () =>
isBrowser() && window.localStorage.getItem(localStorageWalletKey) isBrowser() && window.localStorage.getItem(localStorageWalletKey)
src/components/menuComponents.js
+1 -2
View File
@@ -2,5 +2,4 @@ const MenuComponents = () => {
} }
export default MenuComponents; export default MenuComponents
src/components/seo.js
+25 -25
View File
@@ -5,10 +5,10 @@
* See: https://www.gatsbyjs.org/docs/use-static-query/ * See: https://www.gatsbyjs.org/docs/use-static-query/
*/ */
import React from "react" import React from 'react'
import PropTypes from "prop-types" import PropTypes from 'prop-types'
import { Helmet } from "react-helmet" import { Helmet } from 'react-helmet'
import { useStaticQuery, graphql } from "gatsby" import { useStaticQuery, graphql } from 'gatsby'
function SEO ({ description, lang, meta, title }) { function SEO ({ description, lang, meta, title }) {
const { site } = useStaticQuery( const { site } = useStaticQuery(
@@ -30,59 +30,59 @@ function SEO({ description, lang, meta, title }) {
return ( return (
<Helmet <Helmet
htmlAttributes={{ htmlAttributes={{
lang, lang
}} }}
title={title} title={title}
titleTemplate={`%s | ${site.siteMetadata.title}`} titleTemplate={`%s | ${site.siteMetadata.title}`}
meta={[ meta={[
{ {
name: `description`, name: 'description',
content: metaDescription, content: metaDescription
}, },
{ {
property: `og:title`, property: 'og:title',
content: title, content: title
}, },
{ {
property: `og:description`, property: 'og:description',
content: metaDescription, content: metaDescription
}, },
{ {
property: `og:type`, property: 'og:type',
content: `website`, content: 'website'
}, },
{ {
name: `twitter:card`, name: 'twitter:card',
content: `summary`, content: 'summary'
}, },
{ {
name: `twitter:creator`, name: 'twitter:creator',
content: site.siteMetadata.author, content: site.siteMetadata.author
}, },
{ {
name: `twitter:title`, name: 'twitter:title',
content: title, content: title
}, },
{ {
name: `twitter:description`, name: 'twitter:description',
content: metaDescription, content: metaDescription
}, }
].concat(meta)} ].concat(meta)}
/> />
) )
} }
SEO.defaultProps = { SEO.defaultProps = {
lang: `en`, lang: 'en',
meta: [], meta: [],
description: ``, description: ''
} }
SEO.propTypes = { SEO.propTypes = {
description: PropTypes.string, description: PropTypes.string,
lang: PropTypes.string, lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object), meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired
} }
export default SEO export default SEO
src/components/version-status.js
+2 -5
View File
@@ -1,17 +1,15 @@
import React from "react" import React from 'react'
class VersionStatus extends React.Component { class VersionStatus extends React.Component {
constructor (props) { constructor (props) {
super(props) super(props)
this.state = {} this.state = {}
} }
render () { render () {
return ( return (
<> <>
<div className="version-status"> <div className='version-status'>
<div> <div>
<p><b>Warning: Open Alpha - things will break</b></p> <p><b>Warning: Open Alpha - things will break</b></p>
</div> </div>
@@ -19,7 +17,6 @@ class VersionStatus extends React.Component {
</> </>
) )
} }
} }
export default VersionStatus export default VersionStatus
src/html.js
+19 -19
View File
@@ -1,30 +1,30 @@
import React from "react" import React from 'react'
import PropTypes from "prop-types" import PropTypes from 'prop-types'
import Loader from "./images/loader.gif" //https://loading.io/ import Loader from './images/loader.gif' // https://loading.io/
export default function HTML (props) { export default function HTML (props) {
return ( return (
<html {...props.htmlAttributes}> <html {...props.htmlAttributes}>
<head> <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 <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'
/> />
{props.headComponents} {props.headComponents}
</head> </head>
<body {...props.bodyAttributes}> <body {...props.bodyAttributes}>
{props.preBodyComponents} {props.preBodyComponents}
<div <div
key={`loader`} key='loader'
id="___loader" id='___loader'
style={{ style={{
alignItems: "center", alignItems: 'center',
backgroundColor: "white", backgroundColor: 'white',
display: "flex", display: 'flex',
justifyContent: "center", justifyContent: 'center',
position: "absolute", position: 'absolute',
left: 0, left: 0,
top: 0, top: 0,
right: 0, right: 0,
@@ -33,12 +33,12 @@ export default function HTML(props) {
flexDirection: 'column' flexDirection: 'column'
}} }}
> >
<img src={Loader} alt="" width="150" /> <img src={Loader} alt='' width='150' />
<span>Loading...</span> <span>Loading...</span>
</div> </div>
<div <div
key={`body`} key='body'
id="___gatsby" id='___gatsby'
dangerouslySetInnerHTML={{ __html: props.body }} dangerouslySetInnerHTML={{ __html: props.body }}
/> />
{props.postBodyComponents} {props.postBodyComponents}
@@ -48,7 +48,7 @@ export default function HTML(props) {
setTimeout(function() { setTimeout(function() {
document.getElementById("___loader").style.display = "none" document.getElementById("___loader").style.display = "none"
}, 1500) }, 1500)
`, `
}} }}
/> />
</body> </body>
@@ -62,5 +62,5 @@ HTML.propTypes = {
bodyAttributes: PropTypes.object, bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array, preBodyComponents: PropTypes.array,
body: PropTypes.string, body: PropTypes.string,
postBodyComponents: PropTypes.array, postBodyComponents: PropTypes.array
} }
src/pages/404.js
+4 -4
View File
@@ -1,11 +1,11 @@
import React from "react" import React from 'react'
import Layout from "../components/layout" import Layout from '../components/layout'
import SEO from "../components/seo" import SEO from '../components/seo'
const NotFoundPage = () => ( const NotFoundPage = () => (
<Layout> <Layout>
<SEO title="404: Not found" /> <SEO title='404: Not found' />
<h1>NOT FOUND</h1> <h1>NOT FOUND</h1>
<p>You just hit a route that doesn&#39;t exist... the sadness.</p> <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
</Layout> </Layout>
src/pages/index.js
+9 -9
View File
@@ -1,10 +1,10 @@
import React from "react" import React from 'react'
import { connect } from "react-redux" import { connect } from 'react-redux'
let AdminLTE = const AdminLTE =
typeof window !== `undefined` typeof window !== 'undefined'
? require("../components/admin-lte").default ? require('../components/admin-lte').default
: null : null
// Maps the props that are going to be sended // Maps the props that are going to be sended
@@ -17,14 +17,14 @@ const mapStateToProps = ({ walletInfo, bchBalance, bchWallet }) => {
// to the component connected with Redux // to the component connected with Redux
const mapDispatchToProps = dispatch => { const mapDispatchToProps = dispatch => {
return { return {
setWalletInfo: value => dispatch({ type: `SET_WALLET_INFO`, value }), setWalletInfo: value => dispatch({ type: 'SET_WALLET_INFO', value }),
updateBalance: value => dispatch({ type: `UPDATE_BALANCE`, value }), updateBalance: value => dispatch({ type: 'UPDATE_BALANCE', value }),
setBchWallet: value => dispatch({ type: `SET_BCH_WALLET`, value }), setBchWallet: value => dispatch({ type: 'SET_BCH_WALLET', value })
} }
} }
// Component connected with redux // Component connected with redux
let ConnectedDashboard = AdminLTE const ConnectedDashboard = AdminLTE
? connect(mapStateToProps, mapDispatchToProps)(AdminLTE) ? connect(mapStateToProps, mapDispatchToProps)(AdminLTE)
: null : null
src/pages/page-2.js
+6 -6
View File
@@ -1,15 +1,15 @@
import React from "react" import React from 'react'
import { Link } from "gatsby" import { Link } from 'gatsby'
import Layout from "../components/layout" import Layout from '../components/layout'
import SEO from "../components/seo" import SEO from '../components/seo'
const SecondPage = () => ( const SecondPage = () => (
<Layout> <Layout>
<SEO title="Page two" /> <SEO title='Page two' />
<h1>Hi from the second page</h1> <h1>Hi from the second page</h1>
<p>Welcome to page 2</p> <p>Welcome to page 2</p>
<Link to="/">Go back to the homepage</Link> <Link to='/'>Go back to the homepage</Link>
</Layout> </Layout>
) )
src/redux/createStore.js
+10 -13
View File
@@ -1,12 +1,11 @@
import { createStore as reduxCreateStore } from "redux" import { createStore as reduxCreateStore } from 'redux'
// Wallet from localStorage // Wallet from localStorage
import { getWalletInfo, setWalletInfo } from "../components/localWallet" import { getWalletInfo, setWalletInfo } from '../components/localWallet'
import BchWallet from "minimal-slp-wallet" import BchWallet from 'minimal-slp-wallet'
const reducer = (state, action) => { const reducer = (state, action) => {
// Update walletInfo state property // Update walletInfo state property
if (action.type === `SET_WALLET_INFO`) { if (action.type === 'SET_WALLET_INFO') {
const walletInfo = action.value const walletInfo = action.value
// persist JWT when create or import wallet // persist JWT when create or import wallet
@@ -17,26 +16,24 @@ const reducer = (state, action) => {
setWalletInfo(walletInfo) // Add wallet to local storage setWalletInfo(walletInfo) // Add wallet to local storage
return Object.assign({}, state, { return Object.assign({}, state, {
walletInfo: walletInfo, walletInfo: walletInfo
}) })
} }
// Update bchBalance state property // Update bchBalance state property
if (action.type === `UPDATE_BALANCE`) { if (action.type === 'UPDATE_BALANCE') {
// Convert satoshis to bch // Convert satoshis to bch
const satoshis = action.value const satoshis = action.value
const bch = satoshis / 100000000 const bch = satoshis / 100000000
return Object.assign({}, state, { return Object.assign({}, state, {
bchBalance: Number(bch.toFixed(8)), bchBalance: Number(bch.toFixed(8))
}) })
} }
// Adds the minimal-slp-wallet instance to the Redux state // Adds the minimal-slp-wallet instance to the Redux state
if (action.type === `SET_BCH_WALLET`) { if (action.type === 'SET_BCH_WALLET') {
return Object.assign({}, state, { return Object.assign({}, state, {
bchWallet: action.value, bchWallet: action.value
}) })
} }
@@ -67,7 +64,7 @@ const instanceWallet = () => {
const initialState = { const initialState = {
walletInfo: localWallet.mnemonic ? localWallet : {}, // Object wallet info walletInfo: localWallet.mnemonic ? localWallet : {}, // Object wallet info
bchBalance: 0, // Wallet Balance bchBalance: 0, // Wallet Balance
bchWallet: instanceWallet(), // minimal-slp-wallet instance bchWallet: instanceWallet() // minimal-slp-wallet instance
} }
const createStore = () => reduxCreateStore(reducer, initialState) const createStore = () => reduxCreateStore(reducer, initialState)
wrap-with-provider.js
+3 -3
View File
@@ -1,7 +1,7 @@
import React from "react" import React from 'react'
import { Provider } from "react-redux" import { Provider } from 'react-redux'
import createStore from "./src/redux/createStore" import createStore from './src/redux/createStore'
// eslint-disable-next-line react/display-name,react/prop-types // eslint-disable-next-line react/display-name,react/prop-types
export default ({ element }) => { export default ({ element }) => {