Deprecation Warning for Insecure Unlocks (#1526)

common/components/WalletDecrypt/components/DeprecationWarning.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import translate from 'translations';
+
+const DeprecationWarning: React.SFC<{}> = () => {
+  if (process.env.BUILD_DOWNLOADABLE) {
+    return null;
+  }
+
+  return <div className="alert alert-warning">{translate('INSECURE_WALLET_DEPRECATION')}</div>;
+};
+
+export default DeprecationWarning;

common/components/WalletDecrypt/components/Keystore.tsx

@@ -4,6 +4,7 @@ import translate, { translateRaw } from 'translations';
 import Spinner from 'components/ui/Spinner';
 import { TShowNotification } from 'actions/notifications';
 import { Input } from 'components/ui';
+import DeprecationWarning from './DeprecationWarning';
 
 export interface KeystoreValue {
   file: string;
@@ -44,6 +45,7 @@ export class KeystoreDecrypt extends PureComponent {
 
     return (
       <form onSubmit={this.unlock}>
+        <DeprecationWarning />
         <div className="form-group">
           <input
             className="hidden"

common/components/WalletDecrypt/components/Mnemonic.tsx

@@ -9,6 +9,7 @@ import { connect } from 'react-redux';
 import { getSingleDPath, getPaths } from 'selectors/config/wallet';
 import { TogglablePassword } from 'components';
 import { Input } from 'components/ui';
+import DeprecationWarning from './DeprecationWarning';
 
 interface OwnProps {
   onUnlock(param: any): void;
@@ -49,7 +50,8 @@ class MnemonicDecryptClass extends PureComponent<Props, State> {
     const isValidMnemonic = validateMnemonic(formattedPhrase);
 
     return (
-      <div>
+      <React.Fragment>
+        <DeprecationWarning />
         <div id="selectedTypeKey">
           <div className="form-group">
             <TogglablePassword
@@ -92,7 +94,7 @@ class MnemonicDecryptClass extends PureComponent<Props, State> {
           onConfirmAddress={this.handleUnlock}
           onPathChange={this.handlePathChange}
         />
-      </div>
+      </React.Fragment>
     );
   }
 

common/components/WalletDecrypt/components/PrivateKey.tsx

@@ -4,6 +4,7 @@ import React, { PureComponent } from 'react';
 import translate, { translateRaw } from 'translations';
 import { TogglablePassword } from 'components';
 import { Input } from 'components/ui';
+import DeprecationWarning from './DeprecationWarning';
 
 export interface PrivateKeyValue {
   key: string;
@@ -54,6 +55,7 @@ export class PrivateKeyDecrypt extends PureComponent<Props> {
 
     return (
       <form id="selectedTypeKey" onSubmit={this.unlock}>
+        <DeprecationWarning />
         <div className="input-group-wrapper">
           <label className="input-group">
             <TogglablePassword

common/sass/styles/scaffolding.scss

@@ -78,6 +78,10 @@ hr {
   border-top: 1px solid $hr-border;
 }
 
+a {
+  text-decoration-skip-ink: none;
+}
+
 #app {
   overflow-x: hidden;
 }

common/translations/lang/en.json

@@ -451,6 +451,7 @@
     "INSECURE_WALLET_RECOMMEND_1": "Using [MetaMask]($metamask_article) or a [Hardware Wallet]($hardware_wallet_article) to access your wallet",
     "INSECURE_WALLET_RECOMMEND_2": "[Downloading MyCrypto and running it offline & locally]($run_local_article)",
     "INSECURE_WALLET_RECOMMEND_3": "Reading [How to Protect Yourself and Your Funds]($secure_your_eth_article)",
+    "INSECURE_WALLET_DEPRECATION": "**Warning:** Accessing this type of wallet via the web interface will be disabled soon. You’ll need to [run MyCrypto locally](https://download.mycrypto.com) going forward.",
     "DONT_HAVE_WALLET_PROMPT": "Don’t have a wallet?",
     "DL_WALLET_WARNING_1": "**Don't lose it!** It can't be recovered if you lose it.",
     "DL_WALLET_WARNING_2": "**Don't share it!** Your funds will be stolen if you use this file on a malicious site.",