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