Make import from seed, QR & JSON options available on first-start (#419)

* Make import from seed, QR & JSON options available on first-start

* Cleanups

CHANGELOG.md

@@ -10,6 +10,7 @@ Contributed:
 
 Changes:
 
+- Make import from seed, QR & JSON options available on first-start
 - Latest upstream polkadot-js dependencies
 
 

packages/extension-ui/src/Popup/Accounts/AddAccount.tsx

@@ -18,13 +18,14 @@ interface Props extends ThemeProps {
 function AddAccount ({ className }: Props): React.ReactElement<Props> {
   const onAction = useContext(ActionContext);
   const _onClick = useCallback(
-    (): void => onAction('/account/create'),
+    () => onAction('/account/create'),
     [onAction]
   );
 
   return (
     <>
       <Header
+        showAdd
         showSettings
         text='Add Account'
       />

packages/extension-ui/src/Popup/Authorize/Request.tsx

@@ -23,11 +23,11 @@ function Request ({ authId, className, isFirst, request: { origin }, url }: Prop
   const onAction = useContext(ActionContext);
   const _onApprove = (): Promise<void> =>
     approveAuthRequest(authId)
-      .then((): void => onAction())
+      .then(() => onAction())
       .catch((error: Error) => console.error(error));
   const _onReject = (): Promise<void> =>
     rejectAuthRequest(authId)
-      .then((): void => onAction())
+      .then(() => onAction())
       .catch((error: Error) => console.error(error));
 
   return (

packages/extension-ui/src/Popup/CreateAccount/index.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { ActionContext, Loading } from '../../components';
 import { createAccountSuri, createSeed } from '../../messaging';
 import { HeaderWithSteps } from '../../partials';
@@ -22,21 +22,24 @@ export default function CreateAccount (): React.ReactElement {
   }, []);
 
   // FIXME Duplicated between here and Import.tsx
-  const _onCreate = (name: string, password: string): void => {
-    // this should always be the case
-    if (name && password && account) {
-      setIsBusy(true);
-      createAccountSuri(name, password, account.seed)
-        .then((): void => onAction('/'))
-        .catch((error: Error): void => {
-          setIsBusy(false);
-          console.error(error);
-        });
-    }
-  };
+  const _onCreate = useCallback(
+    (name: string, password: string): void => {
+      // this should always be the case
+      if (name && password && account) {
+        setIsBusy(true);
+        createAccountSuri(name, password, account.seed)
+          .then(() => onAction('/'))
+          .catch((error: Error): void => {
+            setIsBusy(false);
+            console.error(error);
+          });
+      }
+    },
+    [account, onAction]
+  );
 
-  const _onNextStep = (): void => setStep(step + 1);
-  const _onPreviousStep = (): void => setStep(step - 1);
+  const _onNextStep = useCallback(() => setStep((step) => step + 1), []);
+  const _onPreviousStep = useCallback(() => setStep((step) => step - 1), []);
 
   return (
     <>
@@ -44,21 +47,22 @@ export default function CreateAccount (): React.ReactElement {
         step={step}
         text='Create an account:&nbsp;'
       />
-      <Loading>{account && (step === 1
-        ? (
-          <Mnemonic
-            onNextStep={_onNextStep}
-            seed={account.seed}
-          />
-        )
-        : (
-          <AccountName
-            address={account.address}
-            isBusy={isBusy}
-            onBackClick={_onPreviousStep}
-            onCreate={_onCreate}
-          />
-        )
+      <Loading>{account && (
+        step === 1
+          ? (
+            <Mnemonic
+              onNextStep={_onNextStep}
+              seed={account.seed}
+            />
+          )
+          : (
+            <AccountName
+              address={account.address}
+              isBusy={isBusy}
+              onBackClick={_onPreviousStep}
+              onCreate={_onCreate}
+            />
+          )
       )}</Loading>
     </>
   );

packages/extension-ui/src/Popup/Derive/SelectParent.tsx

@@ -31,7 +31,7 @@ export function SelectParent ({ isLocked, onDerivationConfirmed, parentAddress }
   const passwordInputRef = useRef<HTMLDivElement>(null);
 
   const _goCreate = useCallback(
-    (): void => onAction('/account/create'),
+    () => onAction('/account/create'),
     [onAction]
   );
 

packages/extension-ui/src/Popup/Export.tsx

@@ -21,7 +21,7 @@ function Export ({ match: { params: { address } } }: Props): React.ReactElement<
   const [wrongPasswordHighlight, setWrongPasswordHighlight] = useState(false);
 
   const _goHome = useCallback(
-    (): void => onAction('/'),
+    () => onAction('/'),
     [onAction]
   );
 

packages/extension-ui/src/Popup/Forget.tsx

@@ -16,14 +16,14 @@ function Forget ({ match: { params: { address } } }: Props): React.ReactElement<
   const onAction = useContext(ActionContext);
 
   const _goHome = useCallback(
-    (): void => onAction('/'),
+    () => onAction('/'),
     [onAction]
   );
 
   const _onClick = useCallback(
     (): Promise<void> =>
       forgetAccount(address)
-        .then((): void => onAction('/'))
+        .then(() => onAction('/'))
         .catch((error: Error) => console.error(error)),
     [address, onAction]
   );

packages/extension-ui/src/Popup/ImportQr.tsx

@@ -18,7 +18,7 @@ export default function ImportQr (): React.ReactElement {
   const _onCreate = (): void => {
     if (account && name) {
       createAccountExternal(name, account.content, account.genesisHash)
-        .then((): void => onAction('/'))
+        .then(() => onAction('/'))
         .catch((error: Error) => console.error(error));
     }
   };

packages/extension-ui/src/Popup/Signing/Request.tsx

@@ -63,18 +63,18 @@ export default function Request ({ account: { isExternal }, buttonText, isFirst,
 
   const _onCancel = (): Promise<void> =>
     cancelSignRequest(signId)
-      .then((): void => onAction())
+      .then(() => onAction())
       .catch((error: Error) => console.error(error));
   const _onSign = (password: string): Promise<void> =>
     approveSignPassword(signId, password)
-      .then((): void => onAction())
+      .then(() => onAction())
       .catch((error: Error): void => {
         setError(error.message);
         console.error(error);
       });
   const _onSignature = ({ signature }: { signature: string }): Promise<void> =>
     approveSignSignature(signId, signature)
-      .then((): void => onAction())
+      .then(() => onAction())
       .catch((error: Error): void => {
         setError(error.message);
         console.error(error);

packages/extension-ui/src/partials/MenuAdd.tsx

@@ -37,7 +37,11 @@ function MenuAdd ({ className, reference }: Props): React.ReactElement<Props> {
       <MenuItem className='menuItem'>
         <Link to={master ? `/account/derive/${master.address}` : '/account/create'}>
           <Svg src={plusIcon} />
-          <span>Create new account (root or derived)</span>
+          <span>{
+            master
+              ? 'Create new account (root or derived)'
+              : 'Create new account'
+          }</span>
         </Link>
       </MenuItem>
       <MenuDivider />