Added logic for changing of decryption selections.

common/containers/Tabs/WalletDecrypt/index.jsx

@@ -1,54 +1,65 @@
 import React, {Component} from 'react';
 import translate from 'translations';
-/*import KeystoreDecrypt from './KeystoreDecrypt';
+import KeystoreDecrypt from './KeystoreDecrypt';
 import PrivateKeyDecrypt from './PrivateKeyDecrypt';
 import MnemonicDecrypt from './MnemonicDecrypt';
 import LedgerNanoSDecrypt from './LedgerNanoSDecrypt';
 import TrezorDecrypt from './TrezorDecrypt';
-import ViewOnlyDecrypt from './ViewOnlyDecrypt';*/
+import ViewOnlyDecrypt from './ViewOnlyDecrypt';
 
-export default class WalletDecrypt extends Component {
-    buildDecryptionChoices() {
-        const decryptionChoices = [
+const decryptionChoices = [
     {
         name: 'keystore-file',
         lid: 'x_Keystore2',
-                // component: KeystoreDecrypt
+        component: KeystoreDecrypt
     },
     {
         name: 'private-key',
         lid: 'x_PrivKey2',
-                // component: PrivateKeyDecrypt
+        component: PrivateKeyDecrypt
     },
     {
         name: 'mnemonic-phrase',
         lid: 'x_Mnemonic',
-                // component: MnemonicDecrypt
+        component: MnemonicDecrypt
     },
     {
         name: 'ledger-nano-s',
         lid: 'x_Ledger',
-                // component: LedgerNanoSDecrypt
+        component: LedgerNanoSDecrypt
     },
     {
         name: 'trezor',
         lid: 'x_Trezor',
-                // component: TrezorDecrypt
+        component: TrezorDecrypt
     },
     {
         name: 'view-only',
         lid: 'View with Address Only',
-                // component: ViewOnlyDecrypt
+        component: ViewOnlyDecrypt
     }
-        ];
+];
 
+export default class WalletDecrypt extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            decryptionComponent: null
+        };
+    }
+
+    buildDecryptionChoices() {
         return decryptionChoices.map((decryptionChoice, idx) => {
             return (
-                <label className="radio">
+                <label className="radio" key={decryptionChoice.name}>
                     <input
                         aria-flowto={`aria${idx}`}
                         aria-labelledby={`${decryptionChoice.name}-label`}
                         type="radio"
+                        name="decryption-choice-radio-group"
+                        value={decryptionChoice.name}
+                        onChange={this.handleDecryptionChoiceChange.bind(this)}
                     />
                     <span id={`${decryptionChoice.name}-label`}>
                         {translate(decryptionChoice.lid)}
@@ -58,7 +69,23 @@ export default class WalletDecrypt extends Component {
         });
     }
 
+    handleDecryptionChoiceChange(event)
+    {
+        const choiceObject = decryptionChoices.find(decryptionChoice => {
+            return (decryptionChoice.name === event.target.value) ? decryptionChoice.component : false;
+        });
+        const decryptionComponent = choiceObject.component;
+
+        this.setState({
+            decryptionComponent
+        });
+    }
+
     render() {
+        const decryptionComponent = this.state.decryptionComponent ?
+            <this.state.decryptionComponent /> :
+            <div />;
+
         return (
             <section className="container">
                 <div className="tab-content">
@@ -74,7 +101,10 @@ export default class WalletDecrypt extends Component {
                                         <h4>{translate('decrypt_Access')}</h4>
 
                                         {this.buildDecryptionChoices()}
+
                                     </section>
+
+                                    {decryptionComponent}
                                 </article>
                             </div>
                         </article>