Copy address touchups (#1215)

* Checksum address, adjust styles.

* Pull up address
This commit is contained in:
William O'Beirne 2018-03-01 14:36:30 -05:00 committed by Daniel Ternyak
parent 9ef1920fe0
commit 653c363279
2 changed files with 28 additions and 22 deletions

View File

@ -2,24 +2,28 @@
@import 'common/sass/mixins';
.AccountInfo {
&-copy-icon{
display: inline;
color: $gray-light;
.fa{
margin-right: 3px;
}
&-copied{
color: $brand-success;
cursor: pointer;
.fa{
margin-right: 3px;
}
}
&-copy {
display: inline-block;
cursor: pointer;
color: $text-color;
font-size: $font-size-xs;
opacity: 0.5;
transition: $transition;
&:hover{
cursor: pointer;
color: $text-color;
opacity: 1;
}
&.is-copied{
color: $brand-success;
opacity: 1;
}
.fa {
margin-right: $space-xs;
}
}
&-section {
margin-top: $space * 1.5;
@ -81,6 +85,7 @@
}
&-addr {
margin-top: -$space-xs;
word-wrap: break-word;
@include mono;
}

View File

@ -1,15 +1,16 @@
import React from 'react';
import { connect } from 'react-redux';
import { toChecksumAddress } from 'ethereumjs-util';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Identicon, UnitDisplay, Address, NewTabLink } from 'components/ui';
import { IWallet, Balance, TrezorWallet, LedgerWallet } from 'libs/wallet';
import React from 'react';
import translate from 'translations';
import './AccountInfo.scss';
import Spinner from 'components/ui/Spinner';
import { getNetworkConfig, getOffline } from 'selectors/config';
import { AppState } from 'reducers';
import { connect } from 'react-redux';
import { NetworkConfig } from 'types/network';
import { TSetAccountBalance, setAccountBalance } from 'actions/wallet';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import './AccountInfo.scss';
interface OwnProps {
wallet: IWallet;
@ -106,10 +107,10 @@ class AccountInfo extends React.Component<Props, State> {
<div className="AccountInfo-address-addr">
<Address address={address} />
</div>
<CopyToClipboard onCopy={this.onCopy} text={address}>
<CopyToClipboard onCopy={this.onCopy} text={toChecksumAddress(address)}>
<div
className={`AccountInfo-copy-icon${this.state.copied ? '-copied' : ''}`}
title="Copy To Clipboard"
className={`AccountInfo-copy ${this.state.copied ? 'is-copied' : ''}`}
title="Copy To clipboard"
>
<i className="fa fa-copy" />
<span>{this.state.copied ? 'copied!' : 'copy address'}</span>