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