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