mirror of
https://github.com/fullstack-cash/fullstack-gatsby-theme-bch-wallet.git
synced 2026-09-21 16:52:06 -07:00
refactor(configure): Converted configure cards into components
This commit is contained in:
Daniel Gonzalez
@@ -1,13 +1,12 @@
|
||||
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 { Content } from 'adminlte-2-react'
|
||||
import MenuComponents from './menu-components'
|
||||
import Servers from './servers'
|
||||
import { setWalletInfo } from '../../localWallet'
|
||||
import TabsMenu from './TabsMenu'
|
||||
import JsonWebTokens from './jwt'
|
||||
import ConfigureInfo from './info'
|
||||
|
||||
const { Text } = Inputs
|
||||
import TabsMenu from './TabsMenu'
|
||||
|
||||
const BchWallet = typeof window !== 'undefined' ? window.SlpWallet : null
|
||||
|
||||
@@ -19,9 +18,7 @@ class Configure extends React.Component {
|
||||
_this = this
|
||||
|
||||
this.state = {
|
||||
menuItem: 'Configure',
|
||||
JWT: '',
|
||||
errMsg: ''
|
||||
menuItem: 'Configure'
|
||||
}
|
||||
|
||||
_this.BchWallet = BchWallet
|
||||
@@ -37,93 +34,14 @@ class Configure extends React.Component {
|
||||
<TabsMenu onSelect={this.handleSelect} />
|
||||
{_this.state.menuItem === 'Configure' && (
|
||||
<>
|
||||
<Row>
|
||||
<Col sm={12}>
|
||||
<Box className='hover-shadow border-none mt-2'>
|
||||
<Row>
|
||||
<Col sm={12} className='text-center'>
|
||||
<h1>
|
||||
<FontAwesomeIcon
|
||||
className='title-icon'
|
||||
size='xs'
|
||||
icon='cog'
|
||||
<ConfigureInfo />
|
||||
|
||||
<JsonWebTokens
|
||||
setWalletInfo={_this.props.setWalletInfo}
|
||||
walletInfo={_this.props.walletInfo}
|
||||
setBchWallet={_this.props.setBchWallet}
|
||||
/>
|
||||
<span>Configure</span>
|
||||
</h1>
|
||||
<Box className='border-none'>
|
||||
<h3>
|
||||
<FontAwesomeIcon
|
||||
className='title-icon'
|
||||
size='xs'
|
||||
icon='exclamation-triangle'
|
||||
/>
|
||||
Be Careful
|
||||
</h3>
|
||||
<p>
|
||||
Backup your wallet first. Updating the configuration
|
||||
will restart the app.
|
||||
</p>
|
||||
<p>
|
||||
This is just a placeholder. This View will allow the
|
||||
user to pick alternate back-end servers. The default
|
||||
will be{' '}
|
||||
<a
|
||||
href='https://fullstack.cash'
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
>
|
||||
FullStack.cash
|
||||
</a>
|
||||
</p>
|
||||
<Button
|
||||
text='Clear LocalStorage'
|
||||
type='primary'
|
||||
className='btn-lg mt-1'
|
||||
onClick={_this.handleClearLocalStorage}
|
||||
/>
|
||||
</Box>
|
||||
</Col>
|
||||
</Row>
|
||||
</Box>
|
||||
</Col>
|
||||
<Col sm={12}>
|
||||
<Box className='hover-shadow border-none mt-2'>
|
||||
<Row>
|
||||
<Col sm={12} className='text-center'>
|
||||
<h1>
|
||||
<FontAwesomeIcon
|
||||
className='title-icon'
|
||||
size='xs'
|
||||
icon='coins'
|
||||
/>
|
||||
<span>JWT</span>
|
||||
</h1>
|
||||
<Box className='border-none'>
|
||||
<Text
|
||||
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.handleUpdateJWT}
|
||||
/>
|
||||
</Box>
|
||||
</Col>
|
||||
<Col sm={12} className='text-center'>
|
||||
{_this.state.errMsg && (
|
||||
<p className='error-color'>{_this.state.errMsg}</p>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
</Box>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Servers
|
||||
setWalletInfo={_this.props.setWalletInfo}
|
||||
walletInfo={_this.props.walletInfo}
|
||||
@@ -138,76 +56,8 @@ class Configure extends React.Component {
|
||||
</Content>
|
||||
)
|
||||
}
|
||||
|
||||
// Clear localstorage info
|
||||
handleClearLocalStorage () {
|
||||
setWalletInfo({})
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
_this.setJwt()
|
||||
}
|
||||
|
||||
setJwt () {
|
||||
const { JWT } = _this.props.walletInfo
|
||||
if (JWT) {
|
||||
const jwtElem = document.getElementById('jwt')
|
||||
jwtElem.value = JWT
|
||||
}
|
||||
}
|
||||
|
||||
handleUpdate (event) {
|
||||
const value = event.target.value
|
||||
_this.setState({
|
||||
[event.target.name]: value
|
||||
})
|
||||
}
|
||||
|
||||
async handleUpdateJWT () {
|
||||
try {
|
||||
const { mnemonic, selectedServer } = _this.props.walletInfo
|
||||
const apiToken = _this.state.JWT
|
||||
|
||||
// Update instance with JWT
|
||||
if (mnemonic) {
|
||||
const bchjsOptions = { apiToken: apiToken }
|
||||
if (selectedServer) {
|
||||
bchjsOptions.restURL = selectedServer
|
||||
}
|
||||
|
||||
// console.log('bchjs options : ', bchjsOptions)
|
||||
const bchWalletLib = new _this.BchWallet(mnemonic, bchjsOptions)
|
||||
|
||||
// Update bchjs instances of minimal-slp-wallet libraries
|
||||
bchWalletLib.tokens.sendBch.bchjs = new bchWalletLib.BCHJS(bchjsOptions)
|
||||
bchWalletLib.tokens.utxos.bchjs = new bchWalletLib.BCHJS(bchjsOptions)
|
||||
|
||||
_this.props.setBchWallet(bchWalletLib)
|
||||
}
|
||||
|
||||
const walletInfo = _this.props.walletInfo
|
||||
|
||||
walletInfo.JWT = apiToken
|
||||
|
||||
_this.props.setWalletInfo(walletInfo)
|
||||
} catch (error) {
|
||||
_this.setState({
|
||||
errMsg: error.message
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Reset form and component state
|
||||
resetValues () {
|
||||
_this.setState({
|
||||
JWT: '',
|
||||
errMsg: ''
|
||||
})
|
||||
const jwtElem = document.getElementById('jwt')
|
||||
jwtElem.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
Configure.propTypes = {
|
||||
setWalletInfo: PropTypes.func.isRequired,
|
||||
walletInfo: PropTypes.object.isRequired,
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
import React from 'react'
|
||||
import { Row, Col, Box, Button } from 'adminlte-2-react'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { setWalletInfo } from '../../localWallet'
|
||||
|
||||
// import BchWallet from 'minimal-slp-wallet'
|
||||
|
||||
const BchWallet =
|
||||
typeof window !== 'undefined'
|
||||
? window.SlpWallet
|
||||
: null
|
||||
|
||||
let _this
|
||||
class ConfigureInfo extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
_this = this
|
||||
|
||||
this.state = {
|
||||
|
||||
}
|
||||
|
||||
_this.BchWallet = BchWallet
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<Row>
|
||||
<Col sm={12}>
|
||||
<Box className='hover-shadow border-none mt-2'>
|
||||
<Row>
|
||||
<Col sm={12} className='text-center'>
|
||||
<h1>
|
||||
<FontAwesomeIcon
|
||||
className='title-icon'
|
||||
size='xs'
|
||||
icon='cog'
|
||||
/>
|
||||
<span>Configure</span>
|
||||
</h1>
|
||||
<Box className='border-none'>
|
||||
<h3>
|
||||
<FontAwesomeIcon
|
||||
className='title-icon'
|
||||
size='xs'
|
||||
icon='exclamation-triangle'
|
||||
/>
|
||||
Be Careful
|
||||
</h3>
|
||||
<p>
|
||||
Backup your wallet first. Updating the configuration
|
||||
will restart the app.
|
||||
</p>
|
||||
<p>
|
||||
This is just a placeholder. This View will allow the
|
||||
user to pick alternate back-end servers. The default
|
||||
will be{' '}
|
||||
<a
|
||||
href='https://fullstack.cash'
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
>
|
||||
FullStack.cash
|
||||
</a>
|
||||
</p>
|
||||
<Button
|
||||
text='Clear LocalStorage'
|
||||
type='primary'
|
||||
className='btn-lg mt-1'
|
||||
onClick={_this.handleClearLocalStorage}
|
||||
/>
|
||||
</Box>
|
||||
</Col>
|
||||
</Row>
|
||||
</Box>
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
||||
// Clear localstorage info
|
||||
handleClearLocalStorage () {
|
||||
setWalletInfo({})
|
||||
window.location.reload()
|
||||
}
|
||||
}
|
||||
|
||||
export default ConfigureInfo
|
||||
@@ -0,0 +1,142 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Row, Col, Box, Inputs, Button } from 'adminlte-2-react'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
// import BchWallet from 'minimal-slp-wallet'
|
||||
|
||||
const BchWallet =
|
||||
typeof window !== 'undefined'
|
||||
? window.SlpWallet
|
||||
: null
|
||||
|
||||
const { Text } = Inputs
|
||||
|
||||
let _this
|
||||
class JsonWebTokens extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
_this = this
|
||||
|
||||
this.state = {
|
||||
JWT: '',
|
||||
errMsg: ''
|
||||
}
|
||||
|
||||
_this.BchWallet = BchWallet
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<Row>
|
||||
<Col sm={12}>
|
||||
<Box className='hover-shadow border-none mt-2'>
|
||||
<Row>
|
||||
<Col sm={12} className='text-center'>
|
||||
<h1>
|
||||
<FontAwesomeIcon
|
||||
className='title-icon'
|
||||
size='xs'
|
||||
icon='coins'
|
||||
/>
|
||||
<span>JWT</span>
|
||||
</h1>
|
||||
<Box className='border-none'>
|
||||
<Text
|
||||
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.handleUpdateJWT}
|
||||
/>
|
||||
</Box>
|
||||
</Col>
|
||||
<Col sm={12} className='text-center'>
|
||||
{_this.state.errMsg && (
|
||||
<p className='error-color'>{_this.state.errMsg}</p>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
</Box>
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
||||
setJwt () {
|
||||
const { JWT } = _this.props.walletInfo
|
||||
if (JWT) {
|
||||
const jwtElem = document.getElementById('jwt')
|
||||
jwtElem.value = JWT
|
||||
}
|
||||
}
|
||||
|
||||
handleUpdate (event) {
|
||||
const value = event.target.value
|
||||
_this.setState({
|
||||
[event.target.name]: value
|
||||
})
|
||||
}
|
||||
|
||||
async handleUpdateJWT () {
|
||||
try {
|
||||
const { mnemonic, selectedServer } = _this.props.walletInfo
|
||||
const apiToken = _this.state.JWT
|
||||
|
||||
// Update instance with JWT
|
||||
if (mnemonic) {
|
||||
const bchjsOptions = { apiToken: apiToken }
|
||||
if (selectedServer) {
|
||||
bchjsOptions.restURL = selectedServer
|
||||
}
|
||||
|
||||
// console.log('bchjs options : ', bchjsOptions)
|
||||
const bchWalletLib = new _this.BchWallet(mnemonic, bchjsOptions)
|
||||
|
||||
// Update bchjs instances of minimal-slp-wallet libraries
|
||||
bchWalletLib.tokens.sendBch.bchjs = new bchWalletLib.BCHJS(bchjsOptions)
|
||||
bchWalletLib.tokens.utxos.bchjs = new bchWalletLib.BCHJS(bchjsOptions)
|
||||
|
||||
_this.props.setBchWallet(bchWalletLib)
|
||||
}
|
||||
|
||||
const walletInfo = _this.props.walletInfo
|
||||
|
||||
walletInfo.JWT = apiToken
|
||||
|
||||
_this.props.setWalletInfo(walletInfo)
|
||||
} catch (error) {
|
||||
_this.setState({
|
||||
errMsg: error.message
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Reset form and component state
|
||||
resetValues () {
|
||||
_this.setState({
|
||||
JWT: '',
|
||||
errMsg: ''
|
||||
})
|
||||
const jwtElem = document.getElementById('jwt')
|
||||
jwtElem.value = ''
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
_this.setJwt()
|
||||
}
|
||||
}
|
||||
JsonWebTokens.propTypes = {
|
||||
setWalletInfo: PropTypes.func.isRequired,
|
||||
walletInfo: PropTypes.object.isRequired,
|
||||
setBchWallet: PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
export default JsonWebTokens
|
||||
Reference in New Issue
Block a user