Replaced component with key in wallet-decrypt state.

This commit is contained in:
Daniel Kaspo 2017-06-13 19:56:27 -04:00
parent 6d48e5b36b
commit 91c854f2e1
1 changed files with 52 additions and 47 deletions

View File

@ -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.
// https://github.com/goatslacker/alt/issues/283#issuecomment-107463147
this.handleDecryptionChoiceChange = this.handleDecryptionChoiceChange.bind(this);
this.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
}
];
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)
{
const choiceObject = decryptionChoices.find(decryptionChoice => {
handleDecryptionChoiceChange = (event) => {
const choiceObject = this.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 ?
<this.state.decryptionComponent /> :
null;
const DecryptionComponent = this.getDecryptionComponent();
return (
<section className="container">
@ -108,7 +113,7 @@ export default class WalletDecrypt extends Component {
</section>
{decryptionComponent}
<DecryptionComponent />
</article>
</div>
</article>