_this.copyToClipBoard('tokenId')}
+ icon='copy'
+ />
+ )}
@@ -155,6 +172,19 @@ class TokenModal extends React.Component {
textArea.select()
document.execCommand('Copy')
textArea.remove()
+
+ _this.handleCopySuccess(key)
+ }
+
+ handleCopySuccess (key) {
+ _this.setState({
+ copySuccess: key
+ })
+ setTimeout(() => {
+ _this.setState({
+ copySuccess: ''
+ })
+ }, 1000)
}
}
TokenModal.propTypes = {
diff --git a/src/components/admin-lte/tokens/token.css b/src/components/admin-lte/tokens/token.css
index cd6b642..d8499cf 100644
--- a/src/components/admin-lte/tokens/token.css
+++ b/src/components/admin-lte/tokens/token.css
@@ -95,4 +95,13 @@
.txIdContainer button:focus {
border: none;
outline: none;
-}
\ No newline at end of file
+}
+
+.copied-text{
+ width: 100%;
+ text-align: center;
+ color: var(--main-color);
+ }
+.nopadding{
+ padding: 0!important;
+ }
\ No newline at end of file
diff --git a/src/components/admin-lte/wallet/index.js b/src/components/admin-lte/wallet/index.js
index ac6c681..1e138e0 100644
--- a/src/components/admin-lte/wallet/index.js
+++ b/src/components/admin-lte/wallet/index.js
@@ -20,24 +20,31 @@ class Wallet extends React.Component {
return (
-
+ {/* Show wallet info is this exists */}
{_this.props.walletInfo.mnemonic && (
)}
-
+ {/** Shows the 'create' and 'import' cards
+ * if there's not a wallet created
+ */}
+ {!_this.props.walletInfo.mnemonic && (
+ <>
+
-
+
+ >
+ )}
{this.props.importComponents}
diff --git a/src/components/admin-lte/wallet/info.js b/src/components/admin-lte/wallet/info.js
index 6e01ceb..3393182 100644
--- a/src/components/admin-lte/wallet/info.js
+++ b/src/components/admin-lte/wallet/info.js
@@ -28,7 +28,8 @@ class InfoWallets extends React.Component {
This is an open source, non-custodial web wallet
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.{' '}
Storing large amounts of money on a web wallet is not
recommended!
diff --git a/src/components/admin-lte/wallet/wallet-info.js b/src/components/admin-lte/wallet/wallet-info.js
index 3893b1d..7b8d8a0 100644
--- a/src/components/admin-lte/wallet/wallet-info.js
+++ b/src/components/admin-lte/wallet/wallet-info.js
@@ -19,7 +19,8 @@ class WalletInfo extends React.Component {
legacyAddress: '',
hdPath: '',
blurredMnemonic: true,
- blurredPrivateKey: true
+ blurredPrivateKey: true,
+ copySuccess: ''
}
}
@@ -50,43 +51,77 @@ class WalletInfo extends React.Component {
- Mnemonic: {_this.state.mnemonic}
+ Mnemonic:{' '}
+
+ {' '}
+ {_this.state.mnemonic}{' '}
+
- _this.blurMnemonic()}
- icon={eyeIcon.mnemonic}
- />
- _this.copyToClipBoard('mnemonic')}
- icon='copy'
- />
+ {_this.state.copySuccess === 'mnemonic'
+ ? (
+
+ Copied!
+
+ )
+ : (
+ <>
+ _this.blurMnemonic()}
+ icon={eyeIcon.mnemonic}
+ />
+ _this.copyToClipBoard('mnemonic')}
+ icon='copy'
+ />
+ >
+ )}
- Private Key: {_this.state.privateKey}
+ Private Key: {' '}
+
+ {' '}
+ {_this.state.privateKey}{' '}
+
- _this.blurPrivateKey()}
- icon={eyeIcon.privateKey}
- />
- _this.copyToClipBoard('privateKey')}
- icon='copy'
- />
+ {_this.state.copySuccess === 'privateKey'
+ ? (
+
+ Copied!
+
+ )
+ : (
+ <>
+ _this.blurPrivateKey()}
+ icon={eyeIcon.privateKey}
+ />
+ _this.copyToClipBoard('privateKey')}
+ icon='copy'
+ />
+ >
+ )}
@@ -96,12 +131,20 @@ class WalletInfo extends React.Component {
- _this.copyToClipBoard('cashAddress')}
- icon='copy'
- />
+ {_this.state.copySuccess === 'cashAddress'
+ ? (
+
+ Copied!
+
+ )
+ : (
+ _this.copyToClipBoard('cashAddress')}
+ icon='copy'
+ />
+ )}
@@ -111,12 +154,20 @@ class WalletInfo extends React.Component {
- _this.copyToClipBoard('address')}
- icon='copy'
- />
+ {_this.state.copySuccess === 'address'
+ ? (
+
+ Copied!
+
+ )
+ : (
+ _this.copyToClipBoard('address')}
+ icon='copy'
+ />
+ )}
@@ -126,12 +177,20 @@ class WalletInfo extends React.Component {
- _this.copyToClipBoard('slpAddress')}
- icon='copy'
- />
+ {_this.state.copySuccess === 'slpAddress'
+ ? (
+
+ Copied!
+
+ )
+ : (
+ _this.copyToClipBoard('slpAddress')}
+ icon='copy'
+ />
+ )}
@@ -141,12 +200,20 @@ class WalletInfo extends React.Component {
- _this.copyToClipBoard('legacyAddress')}
- icon='copy'
- />
+ {_this.state.copySuccess === 'legacyAddress'
+ ? (
+
+ Copied!
+
+ )
+ : (
+ _this.copyToClipBoard('legacyAddress')}
+ icon='copy'
+ />
+ )}
@@ -157,12 +224,20 @@ class WalletInfo extends React.Component {
- _this.copyToClipBoard('hdPath')}
- icon='copy'
- />
+ {_this.state.copySuccess === 'hdPath'
+ ? (
+
+ Copied!
+
+ )
+ : (
+ _this.copyToClipBoard('hdPath')}
+ icon='copy'
+ />
+ )}
@@ -176,13 +251,13 @@ class WalletInfo extends React.Component {
blurMnemonic () {
_this.setState({
- blurredMnemonic: (!_this.state.blurredMnemonic)
+ blurredMnemonic: !_this.state.blurredMnemonic
})
}
blurPrivateKey () {
_this.setState({
- blurredPrivateKey: (!_this.state.blurredPrivateKey)
+ blurredPrivateKey: !_this.state.blurredPrivateKey
})
}
@@ -195,6 +270,19 @@ class WalletInfo extends React.Component {
textArea.select()
document.execCommand('Copy')
textArea.remove()
+
+ _this.handleCopySuccess(key)
+ }
+
+ handleCopySuccess (key) {
+ _this.setState({
+ copySuccess: key
+ })
+ setTimeout(() => {
+ _this.setState({
+ copySuccess: ''
+ })
+ }, 1000)
}
componentDidMount () {
diff --git a/src/components/admin-lte/wallet/wallet.css b/src/components/admin-lte/wallet/wallet.css
index b3b5044..8ffb636 100644
--- a/src/components/admin-lte/wallet/wallet.css
+++ b/src/components/admin-lte/wallet/wallet.css
@@ -19,4 +19,10 @@
.blurred {
filter: blur(2.7px);
-webkit-filter: blur(2.7px);
+}
+
+.copied-text{
+ width: 100%;
+ text-align: center;
+ color: var(--main-color);
}
\ No newline at end of file