Wallet-Decrypt/Send Tooltips (#436)

* Update Help component && Fix some css errors

common/assets/images/icon-help-3.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92"><path fill="#0e97c0" d="M45.386.004C19.983.344-.333 21.215.005 46.619c.34 25.393 21.209 45.715 46.611 45.377 25.398-.342 45.718-21.213 45.38-46.615-.34-25.395-21.21-45.716-46.61-45.377zM45.25 74l-.254-.004c-3.912-.116-6.67-2.998-6.559-6.852.109-3.788 2.934-6.538 6.717-6.538l.227.004c4.021.119 6.748 2.972 6.635 6.937C51.904 71.346 49.123 74 45.25 74zm16.455-32.659c-.92 1.307-2.943 2.93-5.492 4.916l-2.807 1.938c-1.541 1.198-2.471 2.325-2.82 3.434-.275.873-.41 1.104-.434 2.88l-.004.451H39.43l.031-.907c.131-3.728.223-5.921 1.768-7.733 2.424-2.846 7.771-6.289 7.998-6.435.766-.577 1.412-1.234 1.893-1.936 1.125-1.551 1.623-2.772 1.623-3.972a7.74 7.74 0 0 0-1.471-4.576c-.939-1.323-2.723-1.993-5.303-1.993-2.559 0-4.311.812-5.359 2.478-1.078 1.713-1.623 3.512-1.623 5.35v.457H27.936l.02-.477c.285-6.769 2.701-11.643 7.178-14.487C37.947 18.918 41.447 18 45.531 18c5.346 0 9.859 1.299 13.412 3.861 3.6 2.596 5.426 6.484 5.426 11.556 0 2.837-.896 5.502-2.664 7.924z"/></svg>

common/assets/styles/etherwallet-custom.less

@@ -135,52 +135,6 @@ textarea {
   }
 }
 
-.account-help-icon {
-  h3,
-  h4,
-  h5,
-  h6,
-  img {
-    display: inline-block;
-  }
-  img:hover + .account-help-text {
-    display: block;
-  }
-  img {
-    margin-left: -30px;
-    margin-right: 3px;
-  }
-}
-
-.account-help-text {
-  background: white;
-  border-radius: @border-radius;
-  border: 1px solid #cdcdcd;
-  box-shadow: 0 0 @space-sm rgba(100, 100, 100, .2);
-  display: none;
-  font-size: @font-size-xs;
-  font-weight: 400;
-  padding: @space-xs;
-  position: absolute;
-  width: 18rem;
-  z-index: 999;
-  ul& {
-    padding-left: 1.6rem;
-  }
-  li {
-    font-size: @font-size-xs;
-    font-weight: 400;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .account-help-icon li,
-  .account-help-icon img,
-  .account-help-icon p {
-    display: none;
-  }
-}
-
 // monospace things
 .mono,
 .form-control,
@@ -283,7 +237,7 @@ input[type="password"] + .eye {
 
 .m-addresses td:first-child {
   max-width: 50px;
-  min-widht: 50px;
+  min-width: 50px;
 }
 
 .m-addresses td:last-child {

common/components/WalletDecrypt/Web3.tsx

@@ -13,7 +13,7 @@ export default class Web3Decrypt extends Component<Props> {
       <section className="Web3Decrypt col-md-4 col-sm-6">
         <div>
           <button
-            className="Web3Decrypt btn btn-primary btn-lg"
+            className="Web3Decrypt-decrypt btn btn-primary btn-lg"
             onClick={this.props.onUnlock}
           >
             {translate('ADD_MetaMask')}

common/components/WalletDecrypt/index.tsx

@@ -22,6 +22,7 @@ import TrezorDecrypt from './Trezor';
 import ViewOnlyDecrypt from './ViewOnly';
 import { AppState } from 'reducers';
 import Web3Decrypt from './Web3';
+import Help from 'components/ui/Help';
 
 const WALLETS = {
   'keystore-file': {
@@ -32,7 +33,9 @@ const WALLETS = {
       password: ''
     },
     unlock: unlockKeystore,
-    disabled: false
+    disabled: false,
+    helpLink:
+      'https://myetherwallet.github.io/knowledge-base/private-keys-passwords/difference-beween-private-key-and-keystore-file.html'
   },
   'private-key': {
     lid: 'x_PrivKey2',
@@ -42,40 +45,50 @@ const WALLETS = {
       password: ''
     },
     unlock: unlockPrivateKey,
-    disabled: false
+    disabled: false,
+    helpLink:
+      'https://myetherwallet.github.io/knowledge-base/private-keys-passwords/difference-beween-private-key-and-keystore-file.html'
   },
   'mnemonic-phrase': {
     lid: 'x_Mnemonic',
     component: MnemonicDecrypt,
     initialParams: {},
     unlock: unlockMnemonic,
-    disabled: false
+    disabled: false,
+    helpLink:
+      'https://myetherwallet.github.io/knowledge-base/private-keys-passwords/difference-beween-private-key-and-keystore-file.html'
   },
   'ledger-nano-s': {
     lid: 'x_Ledger',
     component: LedgerNanoSDecrypt,
     initialParams: {},
     unlock: setWallet,
-    disabled: false
+    disabled: false,
+    helpLink:
+      'https://ledger.zendesk.com/hc/en-us/articles/115005200009-How-to-use-MyEtherWallet-with-Ledger'
   },
   trezor: {
     lid: 'x_Trezor',
     component: TrezorDecrypt,
     initialParams: {},
     unlock: setWallet,
-    disabled: false
+    disabled: false,
+    helpLink: 'https://doc.satoshilabs.com/trezor-apps/mew.html'
   },
   web3: {
     lid: 'x_MetaMask',
     component: Web3Decrypt,
     initialParams: {},
     unlock: unlockWeb3,
-    disabled: false
+    disabled: false,
+    helpLink:
+      'https://myetherwallet.github.io/knowledge-base/migration/moving-from-private-key-to-metamask.html'
   },
   'view-only': {
     lid: 'View with Address Only',
     component: ViewOnlyDecrypt,
-    disabled: true
+    disabled: true,
+    helpLink: ''
   }
 };
 
@@ -127,7 +140,7 @@ export class WalletDecrypt extends Component<Props, State> {
   public buildWalletOptions() {
     return map(WALLETS, (wallet, key) => {
       const isSelected = this.state.selectedWalletKey === key;
-
+      const { helpLink } = wallet;
       return (
         <label className="radio" key={key}>
           <input
@@ -143,6 +156,7 @@ export class WalletDecrypt extends Component<Props, State> {
             }
           />
           <span id={`${key}-label`}>{translate(wallet.lid)}</span>
+          {helpLink ? <Help link={helpLink} /> : null}
         </label>
       );
     });

common/components/ui/Help.scss

@@ -0,0 +1,30 @@
+.Help {
+  display: inline-block;
+  margin-left: 8px;
+  padding: 4px;
+  box-sizing: content-box;
+  line-height: inherit;
+  vertical-align: top;
+  transition: opacity 0.3s;
+
+  & img {
+    display: block;
+    height: inherit;
+    width: inherit;
+  }
+
+  &-x1 {
+    height: 16px;
+    width: 16px;
+  }
+
+  &-x2 {
+    height: 24px;
+    width: 24px;
+  }
+
+  &-x3 {
+    height: 36px;
+    width: 36px;
+  }
+}

common/components/ui/Help.tsx

@@ -1,36 +1,18 @@
 import React from 'react';
-import helpIcon from 'assets/images/icon-help.svg';
+import icon from 'assets/images/icon-help-3.svg';
+import './Help.scss';
 
-type sizeType = 'small' | 'medium' | 'large';
+type Size = 'x1' | 'x2' | 'x3';
 
-interface HelpProps {
+interface Props {
   link: string;
-  size?: sizeType;
+  size?: Size;
-  helpText?: string;
 }
 
-const Help = ({ size, link, helpText }: HelpProps) => {
+const Help = ({ size = 'x1', link }: Props) => {
-  let width = 30;
-  let height = 12;
-
-  switch (size) {
-    case 'medium':
-      width = width * 3;
-      height = height * 3;
-      break;
-    case 'large':
-      width = width * 4;
-      height = height * 4;
-      break;
-    default:
-      break;
-  }
-
   return (
-    <a href={link} className={'account-help-icon'} target={'_blank'}>
+    <a href={link} className={`Help Help-${size}`} target={'_blank'}>
-      <img src={helpIcon} width={width} height={height} />
+      <img src={icon} />
-
-      {helpText && <p className="account-help-text">{helpText}</p>}
     </a>
   );
 };

common/containers/Tabs/SendTransaction/components/NonceField.tsx

@@ -27,17 +27,16 @@ export default class NonceField extends React.Component<PublicProps, {}> {
     return (
       <div className="row form-group">
         <div className="col-xs-11">
+          <label>Nonce</label>
           <Help
-            size={'small'}
             link={
               'https://myetherwallet.github.io/knowledge-base/transactions/what-is-nonce.html'
             }
           />
-          <label>Nonce</label>
           <input
-            className={`form-control ${isValidNonce(strValue)
+            className={`form-control ${
-              ? 'is-valid'
+              isValidNonce(strValue) ? 'is-valid' : 'is-invalid'
-              : 'is-invalid'}`}
+            }`}
             type="number"
             value={strValue}
             placeholder={placeholder}

common/sass/styles/overrides/forms.scss

@@ -2,7 +2,6 @@
 @import 'common/sass/variables';
 
 label {
-  margin-top: $space-sm;
   margin-bottom: $space-xs;
   font-size: $font-size-bump-more;
 }
@@ -39,7 +38,7 @@ input[readonly] {
 
 .form-group {
   display: block;
-  margin-top: $form-group-margin-bottom;
+  margin-top: $form-group-margin-bottom * 2;
   margin-bottom: $form-group-margin-bottom;
 }