Check for appropriate keystore file type on upload (#646)

* Check for appropriate keystore file type on upload.

* Pass props to component.

* Add typing for rawFile

common/components/WalletDecrypt/Keystore.tsx

@@ -1,6 +1,7 @@
 import { isKeystorePassRequired } from 'libs/wallet';
 import React, { Component } from 'react';
 import translate, { translateRaw } from 'translations';
+import { TShowNotification } from 'actions/notifications';
 
 export interface KeystoreValue {
   file: string;
@@ -8,6 +9,13 @@ export interface KeystoreValue {
   valid: boolean;
 }
 
+interface Props {
+  value: KeystoreValue;
+  onChange(value: KeystoreValue): void;
+  onUnlock(): void;
+  showNotification(level: string, message: string): TShowNotification;
+}
+
 function isPassRequired(file: string): boolean {
   let passReq = false;
   try {
@@ -18,13 +26,12 @@ function isPassRequired(file: string): boolean {
   return passReq;
 }
 
-export default class KeystoreDecrypt extends Component {
-  public props: {
-    value: KeystoreValue;
-    onChange(value: KeystoreValue): void;
-    onUnlock(): void;
-  };
+function isValidFile(rawFile: File): boolean {
+  const fileType = rawFile.type;
+  return fileType === '' || fileType === 'application/json';
+}
 
+export default class KeystoreDecrypt extends Component<Props> {
   public render() {
     const { file, password } = this.props.value;
     const passReq = isPassRequired(file);
@@ -96,6 +103,10 @@ export default class KeystoreDecrypt extends Component {
       });
     };
 
-    fileReader.readAsText(inputFile, 'utf-8');
+    if (isValidFile(inputFile)) {
+      fileReader.readAsText(inputFile, 'utf-8');
+    } else {
+      this.props.showNotification('danger', translateRaw('ERROR_3'));
+    }
   };
 }

common/components/WalletDecrypt/index.tsx

@@ -30,6 +30,7 @@ import Help from 'components/ui/Help';
 import { knowledgeBaseURL } from 'config/data';
 import NavigationPrompt from './NavigationPrompt';
 import { IWallet } from 'libs/wallet';
+import { showNotification, TShowNotification } from 'actions/notifications';
 
 type UnlockParams = {} | PrivateKeyValue;
 
@@ -41,6 +42,7 @@ interface Props {
   setWallet: TSetWallet;
   unlockWeb3: TUnlockWeb3;
   resetWallet: TResetWallet;
+  showNotification: TShowNotification;
   wallet: IWallet;
   hidden?: boolean;
   offline: boolean;
@@ -125,7 +127,12 @@ export class WalletDecrypt extends Component<Props, State> {
       return null;
     }
     return (
-      <selectedWallet.component value={value} onChange={this.onChange} onUnlock={this.onUnlock} />
+      <selectedWallet.component
+        value={value}
+        onChange={this.onChange}
+        onUnlock={this.onUnlock}
+        showNotification={this.props.showNotification}
+      />
     );
   }
 
@@ -246,5 +253,6 @@ export default connect(mapStateToProps, {
   unlockWeb3,
   setWallet,
   resetWallet,
-  resetTransactionState: reset
+  resetTransactionState: reset,
+  showNotification
 })(WalletDecrypt);