Replaced component with key in wallet-decrypt state.

common/containers/Tabs/WalletDecrypt/index.jsx

@@ -7,54 +7,60 @@ import LedgerNanoSDecrypt from './LedgerNanoSDecrypt';
 import TrezorDecrypt from './TrezorDecrypt';
 import ViewOnlyDecrypt from './ViewOnlyDecrypt';
 
-const decryptionChoices = [
-    {
-        name: 'keystore-file',
-        lid: 'x_Keystore2',
-        component: KeystoreDecrypt
-    },
-    {
-        name: 'private-key',
-        lid: 'x_PrivKey2',
-        component: PrivateKeyDecrypt
-    },
-    {
-        name: 'mnemonic-phrase',
-        lid: 'x_Mnemonic',
-        component: MnemonicDecrypt
-    },
-    {
-        name: 'ledger-nano-s',
-        lid: 'x_Ledger',
-        component: LedgerNanoSDecrypt
-    },
-    {
-        name: 'trezor',
-        lid: 'x_Trezor',
-        component: TrezorDecrypt
-    },
-    {
-        name: 'view-only',
-        lid: 'View with Address Only',
-        component: ViewOnlyDecrypt
-    }
-];
-
 export default class WalletDecrypt extends Component {
     constructor(props) {
         super(props);
 
-        // functions called by things like onChange need to be bound in this way.
+        this.decryptionChoices = [
-        // https://github.com/goatslacker/alt/issues/283#issuecomment-107463147
+            {
-        this.handleDecryptionChoiceChange = this.handleDecryptionChoiceChange.bind(this);
+                name: 'keystore-file',
+                lid: 'x_Keystore2',
+                component: KeystoreDecrypt
+            },
+            {
+                name: 'private-key',
+                lid: 'x_PrivKey2',
+                component: PrivateKeyDecrypt
+            },
+            {
+                name: 'mnemonic-phrase',
+                lid: 'x_Mnemonic',
+                component: MnemonicDecrypt
+            },
+            {
+                name: 'ledger-nano-s',
+                lid: 'x_Ledger',
+                component: LedgerNanoSDecrypt
+            },
+            {
+                name: 'trezor',
+                lid: 'x_Trezor',
+                component: TrezorDecrypt
+            },
+            {
+                name: 'view-only',
+                lid: 'View with Address Only',
+                component: ViewOnlyDecrypt
+            }
+        ];
 
         this.state = {
-            decryptionComponent: null
+            decryptionChoice: this.decryptionChoices[0].name // auto-select first option.
         };
     }
 
+    getDecryptionComponent() {
+        const selectedDecryptionChoice = this.decryptionChoices.find((decryptionChoice) => {
+            return this.state.decryptionChoice === decryptionChoice.name;
+        });
+
+        return selectedDecryptionChoice.component;
+    }
+
     buildDecryptionChoices() {
-        return decryptionChoices.map((decryptionChoice, idx) => {
+        return this.decryptionChoices.map((decryptionChoice, idx) => {
+            const isSelected = this.state.decryptionChoice === decryptionChoice.name;
+
             return (
                 <label className="radio" key={decryptionChoice.name}>
                     <input
@@ -63,6 +69,7 @@ export default class WalletDecrypt extends Component {
                         type="radio"
                         name="decryption-choice-radio-group"
                         value={decryptionChoice.name}
+                        checked={isSelected}
                         onChange={this.handleDecryptionChoiceChange}
                     />
                     <span id={`${decryptionChoice.name}-label`}>
@@ -73,22 +80,20 @@ export default class WalletDecrypt extends Component {
         });
     }
 
-    handleDecryptionChoiceChange(event)
+    handleDecryptionChoiceChange = (event) => {
-    {
+        const choiceObject = this.decryptionChoices.find(decryptionChoice => {
-        const choiceObject = decryptionChoices.find(decryptionChoice => {
             return (decryptionChoice.name === event.target.value) ? decryptionChoice.component : false;
         });
-        const decryptionComponent = choiceObject.component;
+
+        const decryptionChoice = choiceObject.name;
 
         this.setState({
-            decryptionComponent
+            decryptionChoice
         });
     }
 
     render() {
-        const decryptionComponent = this.state.decryptionComponent ?
+        const DecryptionComponent = this.getDecryptionComponent();
-            <this.state.decryptionComponent /> :
-            null;
 
         return (
             <section className="container">
@@ -108,7 +113,7 @@ export default class WalletDecrypt extends Component {
 
                                     </section>
 
-                                    {decryptionComponent}
+                                    <DecryptionComponent />
                                 </article>
                             </div>
                         </article>