Show warning on JSON import to store accounts externally (#3728)

CHANGELOG.md

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## 0.60.0-beta.x
+
+Changes:
+
+- Show warning on JSON import to store accounts externally (same as create)
+
+
 ## 0.59.1 Sep 21, 2020
 
 Contributed:

packages/page-accounts/src/modals/Create.tsx

@@ -20,6 +20,7 @@ import { getEnvironment } from '@polkadot/react-api/util';
 
 import { useTranslation } from '../translate';
 import CreateConfirmation from './CreateConfirmation';
+import ExternalWarning from './ExternalWarning';
 import PasswordInput from './PasswordInput';
 
 interface Props extends ModalProps {
@@ -54,7 +55,6 @@ interface DeriveValidationOutput {
 }
 
 const DEFAULT_PAIR_TYPE = 'sr25519';
-const isElectron = navigator.userAgent.toLowerCase().indexOf(' electron/') > -1;
 
 function deriveValidate (seed: string, seedType: SeedType, derivePath: string, pairType: KeypairType): DeriveValidationOutput {
   try {
@@ -339,11 +339,7 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ
               onChange={_onPasswordChange}
               onEnter={_onCommit}
             />
-            {!isElectron && (
-              <article className='warning'>
-                <p>{t<string>('Consider storing your account in a signer such as a browser extension, hardware device, QR-capable phone wallet (non-connected) or desktop application for optimal account security.')}&nbsp;{t<string>('Future versions of the web-only interface will drop support for non-external accounts, much like the IPFS version.')}</p>
-              </article>
-            )}
+            <ExternalWarning />
             <Expander
               className='accounts--Creator-advanced'
               isPadded

packages/page-accounts/src/modals/ExternalWarning.tsx

@@ -0,0 +1,24 @@
+// Copyright 2017-2020 @polkadot/app-accounts authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { useTranslation } from '../translate';
+
+const isElectron = navigator.userAgent.toLowerCase().indexOf(' electron/') > -1;
+
+function ExternalWarning (): React.ReactElement | null {
+  const { t } = useTranslation();
+
+  if (isElectron) {
+    return null;
+  }
+
+  return (
+    <article className='warning'>
+      <p>{t<string>('Consider storing your account in a signer such as a browser extension, hardware device, QR-capable phone wallet (non-connected) or desktop application for optimal account security.')}&nbsp;{t<string>('Future versions of the web-only interface will drop support for non-external accounts, much like the IPFS version.')}</p>
+    </article>
+  );
+}
+
+export default React.memo(ExternalWarning);

packages/page-accounts/src/modals/Import.tsx

@@ -12,6 +12,7 @@ import { blake2AsU8a } from '@polkadot/util-crypto';
 import keyring from '@polkadot/ui-keyring';
 
 import { useTranslation } from '../translate';
+import ExternalWarning from './ExternalWarning';
 
 interface Props extends ModalProps {
   className?: string;
@@ -163,6 +164,7 @@ function Import ({ className = '', onClose, onStatusChange }: Props): React.Reac
             <p>{t<string>('The password previously used to encrypt this account.')}</p>
           </Modal.Column>
         </Modal.Columns>
+        <ExternalWarning />
       </Modal.Content>
       <Modal.Actions onCancel={onClose}>
         <Button