Copy address touchups (#1215)

* Checksum address, adjust styles.

* Pull up address

common/components/BalanceSidebar/AccountInfo.scss

@@ -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;
     }

common/components/BalanceSidebar/AccountInfo.tsx

@@ -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>