diff options
| -rw-r--r-- | ui/app/components/wallet-view.js | 22 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/wallet-balance.scss | 3 |
2 files changed, 14 insertions, 11 deletions
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 9c11ca4a5..3cb7a8b76 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -43,6 +43,9 @@ function mapDispatchToProps (dispatch) { inherits(WalletView, Component) function WalletView () { Component.call(this) + this.state = { + hasCopied: false, + } } WalletView.prototype.renderWalletBalance = function () { @@ -132,19 +135,18 @@ WalletView.prototype.render = function () { ]), - h('div.wallet-view__address', { onClick: () => copyToClipboard(selectedAddress) }, [ - `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`, + h('div.wallet-view__address', { + onClick: () => { + copyToClipboard(selectedAddress) + this.setState({ hasCopied: true }) + setTimeout(() => this.setState({ hasCopied: false }), 3000) + }, + }, [ + this.state.hasCopied && 'Copied to Clipboard', + !this.state.hasCopied && `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`, h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }), ]), - // 'Wallet' - Title - // Not visible on mobile - h('div.flex-column.wallet-view-title-wrapper', [ - h('span.wallet-view-title', [ - 'Wallet', - ]), - ]), - this.renderWalletBalance(), h(TokenList), diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss index cd44f89bb..64b291b89 100644 --- a/ui/app/css/itcss/components/wallet-balance.scss +++ b/ui/app/css/itcss/components/wallet-balance.scss @@ -1,4 +1,4 @@ -$wallet-balance-bg: $gallery; +$wallet-balance-bg: #e7e7e7; $wallet-balance-breakpoint: 890px; $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})"; @@ -20,6 +20,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( align-items: center; flex: 0 0 auto; cursor: pointer; + border-top: 1px solid $wallet-balance-bg; .balance-container { display: flex; |