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 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 } from 'adminlte-2-react'
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
||||||
import MenuComponents from './menu-components'
|
import MenuComponents from './menu-components'
|
||||||
import Servers from './servers'
|
import Servers from './servers'
|
||||||
import { setWalletInfo } from '../../localWallet'
|
import JsonWebTokens from './jwt'
|
||||||
import TabsMenu from './TabsMenu'
|
import ConfigureInfo from './info'
|
||||||
|
|
||||||
const { Text } = Inputs
|
import TabsMenu from './TabsMenu'
|
||||||
|
|
||||||
const BchWallet = typeof window !== 'undefined' ? window.SlpWallet : null
|
const BchWallet = typeof window !== 'undefined' ? window.SlpWallet : null
|
||||||
|
|
||||||
@@ -19,9 +18,7 @@ class Configure extends React.Component {
|
|||||||
_this = this
|
_this = this
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
menuItem: 'Configure',
|
menuItem: 'Configure'
|
||||||
JWT: '',
|
|
||||||
errMsg: ''
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_this.BchWallet = BchWallet
|
_this.BchWallet = BchWallet
|
||||||
@@ -37,93 +34,14 @@ class Configure extends React.Component {
|
|||||||
<TabsMenu onSelect={this.handleSelect} />
|
<TabsMenu onSelect={this.handleSelect} />
|
||||||
{_this.state.menuItem === 'Configure' && (
|
{_this.state.menuItem === 'Configure' && (
|
||||||
<>
|
<>
|
||||||
<Row>
|
<ConfigureInfo />
|
||||||
<Col sm={12}>
|
|
||||||
<Box className='hover-shadow border-none mt-2'>
|
<JsonWebTokens
|
||||||
<Row>
|
setWalletInfo={_this.props.setWalletInfo}
|
||||||
<Col sm={12} className='text-center'>
|
walletInfo={_this.props.walletInfo}
|
||||||
<h1>
|
setBchWallet={_this.props.setBchWallet}
|
||||||
<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>
|
|
||||||
<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
|
<Servers
|
||||||
setWalletInfo={_this.props.setWalletInfo}
|
setWalletInfo={_this.props.setWalletInfo}
|
||||||
walletInfo={_this.props.walletInfo}
|
walletInfo={_this.props.walletInfo}
|
||||||
@@ -138,76 +56,8 @@ class Configure extends React.Component {
|
|||||||
</Content>
|
</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 = {
|
Configure.propTypes = {
|
||||||
setWalletInfo: PropTypes.func.isRequired,
|
setWalletInfo: PropTypes.func.isRequired,
|
||||||
walletInfo: PropTypes.object.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