mirror of
https://github.com/fullstack-cash/fullstack-gatsby-theme-bch-wallet.git
synced 2026-09-22 01:02:06 -07:00
feat(send): Added Send Max button to token send
This commit is contained in:
Daniel Gonzalez
@@ -33,112 +33,113 @@ class Configure extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<Content>
|
||||
{MenuComponents.length > 0 &&
|
||||
<ButtonGroup margin>
|
||||
<Button margin
|
||||
text='General'
|
||||
type='primary'
|
||||
className='btn-md mt-1'
|
||||
onClick={() => _this.setState({ menuItem: 'Configure' })}
|
||||
{MenuComponents.length > 0 &&
|
||||
<ButtonGroup margin>
|
||||
<Button
|
||||
margin
|
||||
text='General'
|
||||
type='primary'
|
||||
className='btn-md mt-1'
|
||||
onClick={() => _this.setState({ menuItem: 'Configure' })}
|
||||
/>
|
||||
|
||||
{MenuComponents.map(menuItem => <Button key={menuItem.key} margin className='btn-md mt-1' type="primary" onClick={() => _this.setState({ menuItem: menuItem.key })} text={menuItem.key}/>)}
|
||||
</ButtonGroup>}
|
||||
{_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'
|
||||
/>
|
||||
<span>Configure</span>
|
||||
</h1>
|
||||
<Box className='border-none'>
|
||||
<h3>
|
||||
<FontAwesomeIcon
|
||||
className='title-icon'
|
||||
size='xs'
|
||||
icon='exclamation-triangle'
|
||||
/>
|
||||
{MenuComponents.map(menuItem => <Button key={menuItem.key} margin className='btn-md mt-1' type='primary' onClick={() => _this.setState({ menuItem: menuItem.key })} text={menuItem.key} />)}
|
||||
</ButtonGroup>}
|
||||
{_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'
|
||||
/>
|
||||
<span>Configure</span>
|
||||
</h1>
|
||||
<Box className='border-none'>
|
||||
<h3>
|
||||
<FontAwesomeIcon
|
||||
className='title-icon'
|
||||
size='xs'
|
||||
icon='exclamation-triangle'
|
||||
/>
|
||||
Be Careful
|
||||
</h3>
|
||||
<p>
|
||||
</h3>
|
||||
<p>
|
||||
Backup your wallet first. Updating the configuration will
|
||||
restart the app.
|
||||
</p>
|
||||
<p>
|
||||
</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'
|
||||
>
|
||||
<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}
|
||||
setBchWallet={_this.props.setBchWallet}
|
||||
/>
|
||||
</>}
|
||||
{_this.state.menuItem !== 'Configure' && MenuComponents.filter(menuItem => menuItem.key === _this.state.menuItem)[0].component}
|
||||
</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}
|
||||
setBchWallet={_this.props.setBchWallet}
|
||||
/>
|
||||
</>}
|
||||
{_this.state.menuItem !== 'Configure' && MenuComponents.filter(menuItem => menuItem.key === _this.state.menuItem)[0].component}
|
||||
</Content>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -24,7 +24,8 @@ class SendTokens extends React.Component {
|
||||
errMsg: '',
|
||||
txId: '',
|
||||
showScan: false,
|
||||
inFetch: false
|
||||
inFetch: false,
|
||||
tokenId: ''
|
||||
}
|
||||
_this.BchWallet = BchWallet
|
||||
}
|
||||
@@ -66,21 +67,37 @@ class SendTokens extends React.Component {
|
||||
name='amountSat'
|
||||
placeholder='Enter amount to send'
|
||||
label='Amount'
|
||||
value={_this.state.amountSat}
|
||||
labelPosition='above'
|
||||
onChange={_this.handleUpdate}
|
||||
/>
|
||||
<Button
|
||||
text='Close'
|
||||
type='primary'
|
||||
className='btn-lg mr-2'
|
||||
onClick={_this.props.handleBack}
|
||||
/>
|
||||
<Button
|
||||
text='Send'
|
||||
type='primary'
|
||||
className='btn-lg '
|
||||
onClick={_this.handleSend}
|
||||
/>
|
||||
<Row className='token-botton-container'>
|
||||
<Col xs={12} sm={4}>
|
||||
<Button
|
||||
text='Send'
|
||||
type='primary'
|
||||
className='btn-lg btn-send-token mr-1 ml-1 mt-1'
|
||||
onClick={_this.handleSend}
|
||||
/>
|
||||
</Col>
|
||||
<Col xs={12} sm={4}>
|
||||
<Button
|
||||
text='Send Max'
|
||||
type='primary'
|
||||
className='btn-lg btn-send-token mr-1 ml-1 mt-1'
|
||||
onClick={_this.handleSendMax}
|
||||
/>
|
||||
</Col>
|
||||
<Col xs={12} sm={4}>
|
||||
<Button
|
||||
text='Close'
|
||||
type='primary'
|
||||
className='btn-lg btn-send-token mr-1 ml-1 mt-1'
|
||||
onClick={_this.props.handleBack}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
</Box>
|
||||
</Col>
|
||||
<Col sm={12} className='text-center'>
|
||||
@@ -126,6 +143,13 @@ class SendTokens extends React.Component {
|
||||
// console.log(_this.state)
|
||||
}
|
||||
|
||||
async handleSendMax () {
|
||||
const { qty } = _this.props.selectedToken
|
||||
_this.setState({
|
||||
amountSat: qty
|
||||
})
|
||||
}
|
||||
|
||||
async handleSend () {
|
||||
try {
|
||||
_this.setState({
|
||||
@@ -307,6 +331,22 @@ class SendTokens extends React.Component {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
_this.setState({
|
||||
tokenId: _this.props.selectedToken.tokenId
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
componentDidUpdate () {
|
||||
if (_this.props.selectedToken.tokenId !== _this.state.tokenId) {
|
||||
_this.setState({
|
||||
tokenId: _this.props.selectedToken.tokenId,
|
||||
amountSat: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
SendTokens.propTypes = {
|
||||
walletInfo: PropTypes.object.isRequired, // wallet info
|
||||
|
||||
@@ -9,6 +9,9 @@
|
||||
#token-card .info-container .info-content b{
|
||||
margin-right: 15px;
|
||||
}
|
||||
#token-card .info-container .info-content span{
|
||||
text-align: end;
|
||||
}
|
||||
#token-card .divider{
|
||||
width: 100%;
|
||||
border-bottom: 1px solid black;
|
||||
@@ -47,4 +50,25 @@
|
||||
width: 100%!important;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.btn-send-token{
|
||||
width: 120px;
|
||||
}
|
||||
.token-botton-container{
|
||||
max-width: 70%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.btn-send-token{
|
||||
min-width: 100%;
|
||||
}
|
||||
@media (max-width: 740px) {
|
||||
.token-botton-container{
|
||||
max-width: 100%;
|
||||
}
|
||||
.btn-send-token{
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user