Fix/ux papercuts account details issue #12292 (#12399)

* account details - updating ui

* account details - updating ui - version 2

* update qr-code scss in details account view

* account detail screen - create local eng label

* account detail update copy state

app/_locales/en/messages.json

@@ -901,6 +901,9 @@
   "etherscanView": {
     "message": "View account on Etherscan"
   },
+  "etherscanViewOn": {
+    "message": "View on Etherscan"
+  },
   "expandView": {
     "message": "Expand view"
   },

ui/components/app/modals/account-details-modal/account-details-modal.component.js

@@ -84,9 +84,7 @@ export default class AccountDetailsModal extends Component {
             ? this.context.t('blockExplorerView', [
                 getURLHostName(rpcPrefs.blockExplorerUrl),
               ])
-            : this.context.t('viewOnEtherscan', [
-                this.context.t('blockExplorerAccountAction'),
-              ])}
+            : this.context.t('etherscanViewOn')}
         </Button>
 
         {exportPrivateKeyFeatureEnabled ? (

ui/components/app/modals/account-details-modal/index.scss

@@ -8,13 +8,13 @@
   & &__button {
     margin-top: 17px;
     padding: 10px 22px;
-    width: 286px;
+    width: 284px;
   }
 
   &__divider {
     width: 100%;
     height: 1px;
-    margin: 19px 0 8px 0;
+    margin: 16px 0 8px 0;
     background-color: $alto;
   }
 

ui/components/app/modals/modal.js

@@ -64,7 +64,7 @@ const accountModalStyle = {
     margin: '0 auto',
   },
   laptopModalStyle: {
-    width: '360px',
+    width: '335px',
     // top: 'calc(33% + 45px)',
     boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
     borderRadius: '4px',

ui/components/ui/qr-code/index.scss

@@ -25,10 +25,41 @@
     margin-bottom: 9px;
   }
 
+  &__address-container {
+    display: flex;
+    justify-content: center;
+
+    &__tooltip-wrapper {
+      width: 100%;
+    }
+
+    &:hover {
+      cursor: pointer;
+
+      .qr-code__copy-icon__svg {
+        fill: $primary-1;
+      }
+    }
+  }
+
   &__address {
     @include H7;
 
-    background-color: $ui-1;
-    padding: 12px;
+    background-color: $Grey-000;
+    width: 76%;
+    padding: 8px 12px;
+    word-break: break-all;
+    text-align: center;
+  }
+
+  &__copy-icon {
+    height: 13px;
+    padding: 17px 0;
+    position: absolute;
+    right: 24px;
+
+    &__svg {
+      fill: $ui-5;
+    }
   }
 }

ui/components/ui/qr-code/qr-code.js

@@ -3,7 +3,11 @@ import React from 'react';
 import qrCode from 'qrcode-generator';
 import { connect } from 'react-redux';
 import { isHexPrefixed } from 'ethereumjs-util';
+import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
+import Tooltip from '../tooltip';
+import CopyIcon from '../icon/copy-icon.component';
+import { useI18nContext } from '../../../hooks/useI18nContext';
 
 export default connect(mapStateToProps)(QrCodeView);
 
@@ -22,6 +26,8 @@ function QrCodeView(props) {
   const address = `${
     isHexPrefixed(data) ? 'ethereum:' : ''
   }${toChecksumHexAddress(data)}`;
+  const [copied, handleCopy] = useCopyToClipboard();
+  const t = useI18nContext();
   const qrImage = qrCode(4, 'M');
   qrImage.addData(address);
   qrImage.make();
@@ -50,7 +56,23 @@ function QrCodeView(props) {
           __html: qrImage.createTableTag(4),
         }}
       />
-      <div className="qr-code__address">{toChecksumHexAddress(data)}</div>
+      <Tooltip
+        wrapperClassName="qr-code__address-container__tooltip-wrapper"
+        position="bottom"
+        title={copied ? t('copiedExclamation') : t('copyToClipboard')}
+      >
+        <div
+          className="qr-code__address-container"
+          onClick={() => {
+            handleCopy(toChecksumHexAddress(data));
+          }}
+        >
+          <div className="qr-code__address">{toChecksumHexAddress(data)}</div>
+          <div className="qr-code__copy-icon">
+            <CopyIcon size={11} className="qr-code__copy-icon__svg" color="" />
+          </div>
+        </div>
+      </Tooltip>
     </div>
   );
 }

ui/css/design-system/colors.scss

@@ -103,6 +103,7 @@ $ui-1: #f2f3f4;
 $ui-2: #d6d9dc;
 $ui-3: #bbc0c5;
 $ui-4: #6a737d;
+$ui-5: #c4c4c4;
 
 $mainnet: #29b6af;
 $ropsten: #ff4a8d;
@@ -116,6 +117,7 @@ $color-map: (
   'ui-2': $ui-2,
   'ui-3': $ui-3,
   'ui-4': $ui-4,
+  'ui-5': $ui-5,
   'white': $ui-white,
   'black': $ui-black,
   'grey': $ui-grey,