draft - fixing Import Account error messages (#16895)

app/scripts/account-import-strategies/index.js

@@ -1,9 +1,10 @@
-import log from 'loglevel';
+import { bufferToHex, isValidPrivate, toBuffer } from 'ethereumjs-util';
 import Wallet from 'ethereumjs-wallet';
 import importers from 'ethereumjs-wallet/thirdparty';
-import { toBuffer, isValidPrivate, bufferToHex } from 'ethereumjs-util';
-import { addHexPrefix } from '../lib/util';
+import { ethers } from 'ethers';
+import log from 'loglevel';
 import { stripHexPrefix } from '../../../shared/modules/hexstring-utils';
+import { addHexPrefix } from '../lib/util';
 
 const accountImporter = {
   async importAccount(strategy, args) {
@@ -15,14 +16,30 @@ const accountImporter = {
   strategies: {
     'Private Key': (privateKey) => {
       if (!privateKey) {
-        throw new Error('Cannot import an empty key.');
+        throw new Error('Cannot import an empty key.'); // It should never get here, because this should be stopped in the UI
+      }
+
+      // Check if the user has entered an SRP by mistake instead of a private key
+      if (ethers.utils.isValidMnemonic(privateKey.trim())){
+        throw new Error('t(importAccountErrorIsSRP)');
       }
 
+      privateKey = privateKey.replace(/\s+/g, ''); // Remove all whitespace
+
       const prefixed = addHexPrefix(privateKey);
-      const buffer = toBuffer(prefixed);
+      let buffer;
+      try {
+        buffer = toBuffer(prefixed);
+      } catch (e) {
+        throw new Error('t(importAccountErrorNotHexadecimal)');
+      }
 
-      if (!isValidPrivate(buffer)) {
-        throw new Error('Cannot import invalid private key.');
+      try {
+        if (!isValidPrivate(buffer)) {
+          throw new Error('t(importAccountErrorNotAValidPrivateKey)');
+        }
+      } catch (e) {
+        throw new Error('t(importAccountErrorNotAValidPrivateKey)');
       }
 
       const stripped = stripHexPrefix(prefixed);

test/e2e/tests/from-import-ui.spec.js

@@ -315,7 +315,7 @@ describe('MetaMask Import UI', function () {
         await driver.clickElement('.account-menu__icon');
         await driver.clickElement({ text: 'Import account', tag: 'div' });
 
-        await driver.clickElement('.new-account-import-form__select');
+        await driver.clickElement('#new-account-import-form__select');
         await driver.clickElement({ text: 'JSON File', tag: 'option' });
 
         const fileInput = await driver.findElement('input[type="file"]');

ui/pages/create-account/create-account.component.js

@@ -1,39 +1,36 @@
-import React, { Component } from 'react';
-import { Switch, Route } from 'react-router-dom';
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import Box from '../../components/ui/box';
 
 import {
-  NEW_ACCOUNT_ROUTE,
-  IMPORT_ACCOUNT_ROUTE,
   CONNECT_HARDWARE_ROUTE,
+  IMPORT_ACCOUNT_ROUTE,
+  NEW_ACCOUNT_ROUTE
 } from '../../helpers/constants/routes';
-import NewAccountCreateForm from './new-account.container';
-import NewAccountImportForm from './import-account';
 import ConnectHardwareForm from './connect-hardware';
+import NewAccountImportForm from './import-account';
+import NewAccountCreateForm from './new-account.container';
 
-export default class CreateAccountPage extends Component {
-  render() {
-    return (
-      <div className="new-account">
-        <div className="new-account__form">
-          <Switch>
-            <Route
-              exact
-              path={NEW_ACCOUNT_ROUTE}
-              component={NewAccountCreateForm}
-            />
-            <Route
-              exact
-              path={IMPORT_ACCOUNT_ROUTE}
-              component={NewAccountImportForm}
-            />
-            <Route
-              exact
-              path={CONNECT_HARDWARE_ROUTE}
-              component={ConnectHardwareForm}
-            />
-          </Switch>
-        </div>
-      </div>
-    );
-  }
+export default function CreateAccountPage() {
+  return (
+    <Box className="new-account">
+      <Switch>
+        <Route
+          exact
+          path={NEW_ACCOUNT_ROUTE}
+          component={NewAccountCreateForm}
+        />
+        <Route
+          exact
+          path={IMPORT_ACCOUNT_ROUTE}
+          component={NewAccountImportForm}
+        />
+        <Route
+          exact
+          path={CONNECT_HARDWARE_ROUTE}
+          component={ConnectHardwareForm}
+        />
+      </Switch>
+    </Box>
+  );
 }

ui/pages/create-account/import-account/bottom-buttons.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  ButtonPrimary,
+  ButtonSecondary,
+} from '../../../components/component-library';
+import Box from '../../../components/ui/box/box';
+import {
+  BLOCK_SIZES,
+  JustifyContent,
+} from '../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import * as actions from '../../../store/actions';
+
+export default function BottomButtons({
+  importAccountFunc,
+  isPrimaryDisabled,
+}) {
+  const t = useI18nContext();
+  const dispatch = useDispatch();
+  const warning = useSelector((state) => state.appState.warning);
+
+  return (
+    <Box
+      justifyContent={JustifyContent.spaceBetween}
+      marginTop={warning ? 0 : 8} // These buttons need a margin on the top only if there's no warning message
+    >
+      <ButtonSecondary
+        width={BLOCK_SIZES.FIVE_TWELFTHS}
+        onClick={() => {
+          dispatch(actions.hideWarning());
+          history.back();
+        }}
+      >
+        {t('cancel')}
+      </ButtonSecondary>
+      <ButtonPrimary
+        width={BLOCK_SIZES.FIVE_TWELFTHS}
+        onClick={importAccountFunc}
+        disabled={isPrimaryDisabled}
+      >
+        {t('import')}
+      </ButtonPrimary>
+    </Box>
+  );
+}

ui/pages/create-account/import-account/import-account.stories.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import NewAccountImportForm from '.';
+import Box from '../../../components/ui/box';
+import { _setBackgroundConnection } from '../../../store/action-queue';
+
+export default {
+  title: 'Pages/CreateAccount/ImportAccount',
+};
+
+export const DefaultStory = (args) => {
+  return (
+    <Box className="new-account">
+      <NewAccountImportForm {...args} />
+    </Box>
+  );
+};
+
+DefaultStory.storyName = 'Default';