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

Merge branch 'master' into dh-slp-scans

Browse Source
This commit is contained in:
Chris Troutner
2021-02-15 17:45:50 -08:00
parent a1473c7a68 aeb5a21a3b
commit 1650f9cb97
6 changed files with 224 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/admin-lte/tokens/token-modal.js
+39 -9
View File
@@ -9,7 +9,9 @@ class TokenModal extends React.Component {
constructor (props) { constructor (props) {
super(props) super(props)
_this = this _this = this
this.state = {} this.state = {
copySuccess: ''
}
this.modalFooter = ( this.modalFooter = (
<> <>
@@ -44,16 +46,31 @@ class TokenModal extends React.Component {
<Col xs={12} sm={3}> <Col xs={12} sm={3}>
<b>TokenId:</b> <b>TokenId:</b>
</Col> </Col>
<Col xs={10} sm={8}> <Col xs={9} sm={7}>
{token.tokenId} {token.tokenId}
</Col> </Col>
<Col xs={2} sm={1}> <Col
<FontAwesomeIcon xs={3}
className='icon btn-animation' sm={2}
size='lg' className={
onClick={() => _this.copyToClipBoard('tokenId')} _this.state.copySuccess ? 'nopadding' : ''
icon='copy' }
/> >
{_this.state.copySuccess === 'tokenId'
? (
<div className='copied-text'>
<span>Copied!</span>
</div>
)
: (
<FontAwesomeIcon
className='icon btn-animation'
style={{ cssFloat: 'right' }}
size='lg'
onClick={() => _this.copyToClipBoard('tokenId')}
icon='copy'
/>
)}
</Col> </Col>
</Row> </Row>
</Col> </Col>
@@ -155,6 +172,19 @@ class TokenModal extends React.Component {
textArea.select() textArea.select()
document.execCommand('Copy') document.execCommand('Copy')
textArea.remove() textArea.remove()
_this.handleCopySuccess(key)
}
handleCopySuccess (key) {
_this.setState({
copySuccess: key
})
setTimeout(() => {
_this.setState({
copySuccess: ''
})
}, 1000)
} }
} }
TokenModal.propTypes = { TokenModal.propTypes = {
src/components/admin-lte/tokens/token.css
+10 -1
View File
@@ -95,4 +95,13 @@
.txIdContainer button:focus { .txIdContainer button:focus {
border: none; border: none;
outline: none; outline: none;
} }
.copied-text{
width: 100%;
text-align: center;
color: var(--main-color);
}
.nopadding{
padding: 0!important;
}
src/components/admin-lte/wallet/index.js
+20 -13
View File
@@ -20,24 +20,31 @@ class Wallet extends React.Component {
return ( return (
<Content> <Content>
<InfoWallets /> <InfoWallets />
{/* Show wallet info is this exists */}
{_this.props.walletInfo.mnemonic && ( {_this.props.walletInfo.mnemonic && (
<WalletInfo walletInfo={_this.props.walletInfo} /> <WalletInfo walletInfo={_this.props.walletInfo} />
)} )}
<NewWallet {/** Shows the 'create' and 'import' cards
updateBalance={_this.props.updateBalance} * if there's not a wallet created
setWalletInfo={_this.props.setWalletInfo} */}
setBchWallet={_this.props.setBchWallet} {!_this.props.walletInfo.mnemonic && (
walletInfo={_this.props.walletInfo} <>
/> <NewWallet
updateBalance={_this.props.updateBalance}
setWalletInfo={_this.props.setWalletInfo}
setBchWallet={_this.props.setBchWallet}
walletInfo={_this.props.walletInfo}
/>
<ImportWallet <ImportWallet
updateBalance={_this.props.updateBalance} updateBalance={_this.props.updateBalance}
setWalletInfo={_this.props.setWalletInfo} setWalletInfo={_this.props.setWalletInfo}
setBchWallet={_this.props.setBchWallet} setBchWallet={_this.props.setBchWallet}
walletInfo={_this.props.walletInfo} walletInfo={_this.props.walletInfo}
/> />
</>
)}
{this.props.importComponents} {this.props.importComponents}
</Content> </Content>
src/components/admin-lte/wallet/info.js
+2 -1
View File
@@ -28,7 +28,8 @@ class InfoWallets extends React.Component {
<p> <p>
This is an open source, non-custodial web wallet This is an open source, non-custodial web wallet
supporting Bitcoin Cash (BCH) and SLP tokens. Web wallets supporting Bitcoin Cash (BCH) and SLP tokens. Web wallets
offer user convenience, by they are inherently insecure.{' '} offer user convenience, but they are inherently insecure and
bad for privacy.{' '}
<b>Storing large amounts of money on a web wallet is not <b>Storing large amounts of money on a web wallet is not
recommended! recommended!
</b> </b>
src/components/admin-lte/wallet/wallet-info.js
+147 -59
View File
@@ -19,7 +19,8 @@ class WalletInfo extends React.Component {
legacyAddress: '', legacyAddress: '',
hdPath: '', hdPath: '',
blurredMnemonic: true, blurredMnemonic: true,
blurredPrivateKey: true blurredPrivateKey: true,
copySuccess: ''
} }
} }
@@ -50,43 +51,77 @@ class WalletInfo extends React.Component {
<Row className='wallet-info-content mt-1 text-left'> <Row className='wallet-info-content mt-1 text-left'>
<Col xs={8} sm={9} lg={10}> <Col xs={8} sm={9} lg={10}>
<span> <span>
<b>Mnemonic:</b> <span className={_this.state.blurredMnemonic ? 'blurred' : ''}> {_this.state.mnemonic} </span> <b>Mnemonic:</b>{' '}
<span
className={_this.state.blurredMnemonic ? 'blurred' : ''}
>
{' '}
{_this.state.mnemonic}{' '}
</span>
</span> </span>
</Col> </Col>
<Col xs={4} sm={3} lg={2} className='text-right'> <Col xs={4} sm={3} lg={2} className='text-right'>
<FontAwesomeIcon {_this.state.copySuccess === 'mnemonic'
className='icon btn-animation' ? (
size='lg' <div className='copied-text'>
onClick={() => _this.blurMnemonic()} <span>Copied!</span>
icon={eyeIcon.mnemonic} </div>
/> )
<FontAwesomeIcon : (
className='icon btn-animation ml-1' <>
size='lg' <FontAwesomeIcon
onClick={() => _this.copyToClipBoard('mnemonic')} className='icon btn-animation'
icon='copy' size='lg'
/> onClick={() => _this.blurMnemonic()}
icon={eyeIcon.mnemonic}
/>
<FontAwesomeIcon
className='icon btn-animation ml-1'
size='lg'
onClick={() => _this.copyToClipBoard('mnemonic')}
icon='copy'
/>
</>
)}
</Col> </Col>
</Row> </Row>
<Row className='wallet-info-content mt-1 text-left'> <Row className='wallet-info-content mt-1 text-left'>
<Col xs={8} sm={9} lg={10}> <Col xs={8} sm={9} lg={10}>
<span> <span>
<b>Private Key: </b> <span className={_this.state.blurredPrivateKey ? 'blurred' : ''}> {_this.state.privateKey} </span> <b>Private Key: </b>{' '}
<span
className={
_this.state.blurredPrivateKey ? 'blurred' : ''
}
>
{' '}
{_this.state.privateKey}{' '}
</span>
</span> </span>
</Col> </Col>
<Col xs={4} sm={3} lg={2} className='text-right'> <Col xs={4} sm={3} lg={2} className='text-right'>
<FontAwesomeIcon {_this.state.copySuccess === 'privateKey'
className='icon btn-animation' ? (
size='lg' <div className='copied-text'>
onClick={() => _this.blurPrivateKey()} <span>Copied!</span>
icon={eyeIcon.privateKey} </div>
/> )
<FontAwesomeIcon : (
className='icon btn-animation ml-1' <>
size='lg' <FontAwesomeIcon
onClick={() => _this.copyToClipBoard('privateKey')} className='icon btn-animation'
icon='copy' size='lg'
/> onClick={() => _this.blurPrivateKey()}
icon={eyeIcon.privateKey}
/>
<FontAwesomeIcon
className='icon btn-animation ml-1'
size='lg'
onClick={() => _this.copyToClipBoard('privateKey')}
icon='copy'
/>
</>
)}
</Col> </Col>
</Row> </Row>
<Row className='wallet-info-content mt-1 text-left'> <Row className='wallet-info-content mt-1 text-left'>
@@ -96,12 +131,20 @@ class WalletInfo extends React.Component {
</span> </span>
</Col> </Col>
<Col xs={4} sm={3} lg={2} className='text-right'> <Col xs={4} sm={3} lg={2} className='text-right'>
<FontAwesomeIcon {_this.state.copySuccess === 'cashAddress'
className='icon btn-animation' ? (
size='lg' <div className='copied-text'>
onClick={() => _this.copyToClipBoard('cashAddress')} <span>Copied!</span>
icon='copy' </div>
/> )
: (
<FontAwesomeIcon
className='icon btn-animation'
size='lg'
onClick={() => _this.copyToClipBoard('cashAddress')}
icon='copy'
/>
)}
</Col> </Col>
</Row> </Row>
<Row className='wallet-info-content mt-1 text-left'> <Row className='wallet-info-content mt-1 text-left'>
@@ -111,12 +154,20 @@ class WalletInfo extends React.Component {
</span> </span>
</Col> </Col>
<Col xs={4} sm={3} lg={2} className='text-right'> <Col xs={4} sm={3} lg={2} className='text-right'>
<FontAwesomeIcon {_this.state.copySuccess === 'address'
className='icon btn-animation' ? (
size='lg' <div className='copied-text'>
onClick={() => _this.copyToClipBoard('address')} <span>Copied!</span>
icon='copy' </div>
/> )
: (
<FontAwesomeIcon
className='icon btn-animation'
size='lg'
onClick={() => _this.copyToClipBoard('address')}
icon='copy'
/>
)}
</Col> </Col>
</Row> </Row>
<Row className='wallet-info-content mt-1 text-left'> <Row className='wallet-info-content mt-1 text-left'>
@@ -126,12 +177,20 @@ class WalletInfo extends React.Component {
</span> </span>
</Col> </Col>
<Col xs={4} sm={3} lg={2} className='text-right'> <Col xs={4} sm={3} lg={2} className='text-right'>
<FontAwesomeIcon {_this.state.copySuccess === 'slpAddress'
className='icon btn-animation' ? (
size='lg' <div className='copied-text'>
onClick={() => _this.copyToClipBoard('slpAddress')} <span>Copied!</span>
icon='copy' </div>
/> )
: (
<FontAwesomeIcon
className='icon btn-animation'
size='lg'
onClick={() => _this.copyToClipBoard('slpAddress')}
icon='copy'
/>
)}
</Col> </Col>
</Row> </Row>
<Row className='wallet-info-content mt-1 text-left'> <Row className='wallet-info-content mt-1 text-left'>
@@ -141,12 +200,20 @@ class WalletInfo extends React.Component {
</span> </span>
</Col> </Col>
<Col xs={4} sm={3} lg={2} className='text-right'> <Col xs={4} sm={3} lg={2} className='text-right'>
<FontAwesomeIcon {_this.state.copySuccess === 'legacyAddress'
className='icon btn-animation' ? (
size='lg' <div className='copied-text'>
onClick={() => _this.copyToClipBoard('legacyAddress')} <span>Copied!</span>
icon='copy' </div>
/> )
: (
<FontAwesomeIcon
className='icon btn-animation'
size='lg'
onClick={() => _this.copyToClipBoard('legacyAddress')}
icon='copy'
/>
)}
</Col> </Col>
</Row> </Row>
<Row className='wallet-info-content mt-1 text-left'> <Row className='wallet-info-content mt-1 text-left'>
@@ -157,12 +224,20 @@ class WalletInfo extends React.Component {
</span> </span>
</Col> </Col>
<Col xs={4} sm={3} lg={2} className='text-right'> <Col xs={4} sm={3} lg={2} className='text-right'>
<FontAwesomeIcon {_this.state.copySuccess === 'hdPath'
className='icon btn-animation' ? (
size='lg' <div className='copied-text'>
onClick={() => _this.copyToClipBoard('hdPath')} <span>Copied!</span>
icon='copy' </div>
/> )
: (
<FontAwesomeIcon
className='icon btn-animation'
size='lg'
onClick={() => _this.copyToClipBoard('hdPath')}
icon='copy'
/>
)}
</Col> </Col>
</Row> </Row>
</Col> </Col>
@@ -176,13 +251,13 @@ class WalletInfo extends React.Component {
blurMnemonic () { blurMnemonic () {
_this.setState({ _this.setState({
blurredMnemonic: (!_this.state.blurredMnemonic) blurredMnemonic: !_this.state.blurredMnemonic
}) })
} }
blurPrivateKey () { blurPrivateKey () {
_this.setState({ _this.setState({
blurredPrivateKey: (!_this.state.blurredPrivateKey) blurredPrivateKey: !_this.state.blurredPrivateKey
}) })
} }
@@ -195,6 +270,19 @@ class WalletInfo extends React.Component {
textArea.select() textArea.select()
document.execCommand('Copy') document.execCommand('Copy')
textArea.remove() textArea.remove()
_this.handleCopySuccess(key)
}
handleCopySuccess (key) {
_this.setState({
copySuccess: key
})
setTimeout(() => {
_this.setState({
copySuccess: ''
})
}, 1000)
} }
componentDidMount () { componentDidMount () {
src/components/admin-lte/wallet/wallet.css
+6
View File
@@ -19,4 +19,10 @@
.blurred { .blurred {
filter: blur(2.7px); filter: blur(2.7px);
-webkit-filter: blur(2.7px); -webkit-filter: blur(2.7px);
}
.copied-text{
width: 100%;
text-align: center;
color: var(--main-color);
} }