Merge pull request #3335 from MetaMask/ImportAccountMessageV2

Import account disclaimer and change loose label to imported.

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Current Master
 
+- Change Loose label to Imported.
+- Add Imported Account disclaimer.
+- Allow adding custom tokens to classic ui when balance is 0
+- Allow editing of symbol and decimal info when adding custom token in new-ui
+- NewUI shapeshift form can select all coins (not just BTC)
+- Add most of Microsoft Edge support.
 - Replace "Unlock" wording with "Log In".
 - Allow adding custom tokens to classic ui when balance is 0
 - Allow editing of symbol and decimal info when adding custom token in new-ui

old-ui/app/accounts/import/index.js

@@ -34,10 +34,7 @@ AccountImportSubview.prototype.render = function () {
   const { type } = state
 
   return (
-    h('div', {
-      style: {
-      },
-    }, [
+    h('div', [
       h('.section-title.flex-row.flex-center', [
         h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
           onClick: (event) => {
@@ -46,6 +43,27 @@ AccountImportSubview.prototype.render = function () {
         }),
         h('h2.page-subtitle', 'Import Accounts'),
       ]),
+      h('.error', {
+        style: {
+          display: 'inline-block',
+          alignItems: 'center',
+          padding: '5px 15px 0px 15px',
+        },
+      }, [
+        h('span', 'Imported accounts will not be associated with your originally created MetaMask account seedphrase. Learn more about imported accounts '),
+        h('span', {
+          style: {
+            color: 'rgba(247, 134, 28, 1)',
+            cursor: 'pointer',
+            textDecoration: 'underline',
+          },
+          onClick: () => {
+            global.platform.openWindow({
+              url: 'https://metamask.helpscoutdocs.com/article/17-what-are-loose-accounts',
+            })
+          },
+        }, 'here.'),
+      ]),
       h('div', {
         style: {
           padding: '10px',

old-ui/app/components/account-dropdowns.js

@@ -79,7 +79,7 @@ class AccountDropdowns extends Component {
     try { // Sometimes keyrings aren't loaded yet:
       const type = keyring.type
       const isLoose = type !== 'HD Key Tree'
-      return isLoose ? h('.keyring-label', 'LOOSE') : null
+      return isLoose ? h('.keyring-label', 'IMPORTED') : null
     } catch (e) { return }
   }
 

old-ui/app/css/lib.css

@@ -217,7 +217,7 @@ hr.horizontal-line {
   background: rgba(255,0,0,0.8);
   color: white;
   bottom: 0px;
-  left: -8px;
+  left: -18px;
   border-radius: 10px;
   height: 20px;
   min-width: 20px;

ui/app/accounts/import/index.js

@@ -35,6 +35,21 @@ AccountImportSubview.prototype.render = function () {
   return (
     h('div.new-account-import-form', [
 
+      h('.new-account-import-disclaimer', [
+        h('span', 'Imported accounts will not be associated with your originally created MetaMask account seedphrase. Learn more about imported accounts '),
+        h('span', {
+          style: {
+            cursor: 'pointer',
+            textDecoration: 'underline',
+          },
+          onClick: () => {
+            global.platform.openWindow({
+              url: 'https://metamask.helpscoutdocs.com/article/17-what-are-loose-accounts',
+            })
+          },
+        }, 'here'),
+      ]),
+
       h('div.new-account-import-form__select-section', [
 
         h('div.new-account-import-form__select-label', 'Select Type'),

ui/app/components/dropdowns/components/account-dropdowns.js

@@ -134,22 +134,6 @@ class AccountDropdowns extends Component {
             ]),
 
           ]),
-// =======
-//             },
-//           ),
-//           this.indicateIfLoose(keyring),
-//           h('span', {
-//             style: {
-//               marginLeft: '20px',
-//               fontSize: '24px',
-//               maxWidth: '145px',
-//               whiteSpace: 'nowrap',
-//               overflow: 'hidden',
-//               textOverflow: 'ellipsis',
-//             },
-//           }, identity.name || ''),
-//           h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
-// >>>>>>> master:ui/app/components/account-dropdowns.js
         ]
       )
     })
@@ -159,7 +143,7 @@ class AccountDropdowns extends Component {
     try { // Sometimes keyrings aren't loaded yet:
       const type = keyring.type
       const isLoose = type !== 'HD Key Tree'
-      return isLoose ? h('.keyring-label', 'LOOSE') : null
+      return isLoose ? h('.keyring-label', 'IMPORTED') : null
     } catch (e) { return }
   }
 

ui/app/css/itcss/components/account-menu.scss

@@ -66,8 +66,9 @@
 
     .keyring-label {
       margin-top: 5px;
-      background-color: $black;
-      color: $dusty-gray;
+      background-color: $dusty-gray;
+      color: $black;
+      font-weight: normal;
     }
   }
 

ui/app/css/itcss/components/new-account.scss

@@ -54,6 +54,16 @@
 
 }
 
+.new-account-import-disclaimer {
+  width: 120%;
+  background-color: #F4F9FC;
+  display: inline-block;
+  align-items: center;
+  padding: 20px 30px 20px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
 .new-account-import-form {
   display: flex;
   flex-flow: column;