2017-09-25 02:06:28 +00:00
|
|
|
import {
|
|
|
|
setWallet,
|
|
|
|
unlockKeystore,
|
|
|
|
UnlockKeystoreAction,
|
|
|
|
unlockMnemonic,
|
|
|
|
UnlockMnemonicAction,
|
|
|
|
unlockPrivateKey,
|
2017-11-10 03:30:20 +00:00
|
|
|
UnlockPrivateKeyAction,
|
|
|
|
unlockWeb3
|
2017-09-25 02:06:28 +00:00
|
|
|
} from 'actions/wallet';
|
|
|
|
import isEmpty from 'lodash/isEmpty';
|
|
|
|
import map from 'lodash/map';
|
2017-06-29 23:03:11 +00:00
|
|
|
import React, { Component } from 'react';
|
2017-09-25 02:06:28 +00:00
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import { Dispatch } from 'redux';
|
2017-06-29 23:03:11 +00:00
|
|
|
import translate from 'translations';
|
|
|
|
import KeystoreDecrypt from './Keystore';
|
|
|
|
import LedgerNanoSDecrypt from './LedgerNano';
|
2017-09-25 02:06:28 +00:00
|
|
|
import MnemonicDecrypt from './Mnemonic';
|
|
|
|
import PrivateKeyDecrypt, { PrivateKeyValue } from './PrivateKey';
|
2017-06-29 23:03:11 +00:00
|
|
|
import TrezorDecrypt from './Trezor';
|
|
|
|
import ViewOnlyDecrypt from './ViewOnly';
|
2017-10-11 05:04:49 +00:00
|
|
|
import { AppState } from 'reducers';
|
2017-11-10 03:30:20 +00:00
|
|
|
import Web3Decrypt from './Web3';
|
2017-11-21 18:33:20 +00:00
|
|
|
import Help from 'components/ui/Help';
|
2017-06-29 23:03:11 +00:00
|
|
|
|
|
|
|
const WALLETS = {
|
2017-11-22 00:32:20 +00:00
|
|
|
web3: {
|
|
|
|
lid: 'x_MetaMask',
|
|
|
|
component: Web3Decrypt,
|
2017-09-15 19:29:38 +00:00
|
|
|
initialParams: {},
|
2017-11-22 00:32:20 +00:00
|
|
|
unlock: unlockWeb3,
|
2017-11-21 18:33:20 +00:00
|
|
|
disabled: false,
|
|
|
|
helpLink:
|
2017-11-22 00:32:20 +00:00
|
|
|
'https://myetherwallet.github.io/knowledge-base/migration/moving-from-private-key-to-metamask.html'
|
2017-07-04 03:21:19 +00:00
|
|
|
},
|
|
|
|
'ledger-nano-s': {
|
|
|
|
lid: 'x_Ledger',
|
2017-08-25 07:37:36 +00:00
|
|
|
component: LedgerNanoSDecrypt,
|
2017-10-05 23:29:14 +00:00
|
|
|
initialParams: {},
|
|
|
|
unlock: setWallet,
|
2017-11-21 18:33:20 +00:00
|
|
|
disabled: false,
|
|
|
|
helpLink:
|
|
|
|
'https://ledger.zendesk.com/hc/en-us/articles/115005200009-How-to-use-MyEtherWallet-with-Ledger'
|
2017-07-04 03:21:19 +00:00
|
|
|
},
|
|
|
|
trezor: {
|
|
|
|
lid: 'x_Trezor',
|
2017-08-25 07:37:36 +00:00
|
|
|
component: TrezorDecrypt,
|
2017-08-28 17:43:57 +00:00
|
|
|
initialParams: {},
|
2017-09-25 02:06:28 +00:00
|
|
|
unlock: setWallet,
|
2017-11-21 18:33:20 +00:00
|
|
|
disabled: false,
|
|
|
|
helpLink: 'https://doc.satoshilabs.com/trezor-apps/mew.html'
|
2017-07-04 03:21:19 +00:00
|
|
|
},
|
2017-11-22 00:32:20 +00:00
|
|
|
'keystore-file': {
|
|
|
|
lid: 'x_Keystore2',
|
|
|
|
component: KeystoreDecrypt,
|
|
|
|
initialParams: {
|
|
|
|
file: '',
|
|
|
|
password: ''
|
|
|
|
},
|
|
|
|
unlock: unlockKeystore,
|
|
|
|
disabled: false,
|
|
|
|
helpLink:
|
|
|
|
'https://myetherwallet.github.io/knowledge-base/private-keys-passwords/difference-beween-private-key-and-keystore-file.html'
|
|
|
|
},
|
|
|
|
'mnemonic-phrase': {
|
|
|
|
lid: 'x_Mnemonic',
|
|
|
|
component: MnemonicDecrypt,
|
2017-11-10 03:30:20 +00:00
|
|
|
initialParams: {},
|
2017-11-22 00:32:20 +00:00
|
|
|
unlock: unlockMnemonic,
|
2017-11-21 18:33:20 +00:00
|
|
|
disabled: false,
|
|
|
|
helpLink:
|
2017-11-22 00:32:20 +00:00
|
|
|
'https://myetherwallet.github.io/knowledge-base/private-keys-passwords/difference-beween-private-key-and-keystore-file.html'
|
|
|
|
},
|
|
|
|
'private-key': {
|
|
|
|
lid: 'x_PrivKey2',
|
|
|
|
component: PrivateKeyDecrypt,
|
|
|
|
initialParams: {
|
|
|
|
key: '',
|
|
|
|
password: ''
|
|
|
|
},
|
|
|
|
unlock: unlockPrivateKey,
|
|
|
|
disabled: false,
|
|
|
|
helpLink:
|
|
|
|
'https://myetherwallet.github.io/knowledge-base/private-keys-passwords/difference-beween-private-key-and-keystore-file.html'
|
2017-11-10 03:30:20 +00:00
|
|
|
},
|
2017-07-04 03:21:19 +00:00
|
|
|
'view-only': {
|
|
|
|
lid: 'View with Address Only',
|
2017-08-25 07:37:36 +00:00
|
|
|
component: ViewOnlyDecrypt,
|
2017-11-21 18:33:20 +00:00
|
|
|
disabled: true,
|
|
|
|
helpLink: ''
|
2017-07-04 03:21:19 +00:00
|
|
|
}
|
2017-06-29 23:03:11 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
type UnlockParams = {} | PrivateKeyValue;
|
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
interface Props {
|
|
|
|
// FIXME
|
|
|
|
dispatch: Dispatch<
|
|
|
|
UnlockKeystoreAction | UnlockMnemonicAction | UnlockPrivateKeyAction
|
|
|
|
>;
|
2017-10-11 05:04:49 +00:00
|
|
|
offline: boolean;
|
2017-09-25 02:06:28 +00:00
|
|
|
}
|
2017-06-29 23:03:11 +00:00
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
interface State {
|
|
|
|
selectedWalletKey: string;
|
|
|
|
value: UnlockParams;
|
|
|
|
}
|
|
|
|
|
|
|
|
export class WalletDecrypt extends Component<Props, State> {
|
|
|
|
public state: State = {
|
2017-07-04 03:21:19 +00:00
|
|
|
selectedWalletKey: 'keystore-file',
|
|
|
|
value: WALLETS['keystore-file'].initialParams
|
|
|
|
};
|
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
public getDecryptionComponent() {
|
2017-07-04 03:21:19 +00:00
|
|
|
const { selectedWalletKey, value } = this.state;
|
|
|
|
const selectedWallet = WALLETS[selectedWalletKey];
|
|
|
|
|
|
|
|
if (!selectedWallet) {
|
|
|
|
return null;
|
2017-06-29 23:03:11 +00:00
|
|
|
}
|
|
|
|
|
2017-07-04 03:21:19 +00:00
|
|
|
return (
|
|
|
|
<selectedWallet.component
|
|
|
|
value={value}
|
|
|
|
onChange={this.onChange}
|
|
|
|
onUnlock={this.onUnlock}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-10-11 05:04:49 +00:00
|
|
|
public isOnlineRequiredWalletAndOffline(selectedWalletKey) {
|
|
|
|
const onlineRequiredWallets = ['trezor', 'ledger-nano-s'];
|
|
|
|
return (
|
|
|
|
this.props.offline && onlineRequiredWallets.includes(selectedWalletKey)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
public buildWalletOptions() {
|
2017-07-04 03:21:19 +00:00
|
|
|
return map(WALLETS, (wallet, key) => {
|
|
|
|
const isSelected = this.state.selectedWalletKey === key;
|
2017-11-21 18:33:20 +00:00
|
|
|
const { helpLink } = wallet;
|
2017-07-04 03:21:19 +00:00
|
|
|
return (
|
|
|
|
<label className="radio" key={key}>
|
|
|
|
<input
|
|
|
|
aria-flowto={`aria-${key}`}
|
|
|
|
aria-labelledby={`${key}-label`}
|
|
|
|
type="radio"
|
|
|
|
name="decryption-choice-radio-group"
|
|
|
|
value={key}
|
|
|
|
checked={isSelected}
|
|
|
|
onChange={this.handleDecryptionChoiceChange}
|
2017-10-11 05:04:49 +00:00
|
|
|
disabled={
|
|
|
|
wallet.disabled || this.isOnlineRequiredWalletAndOffline(key)
|
|
|
|
}
|
2017-07-04 03:21:19 +00:00
|
|
|
/>
|
2017-10-05 23:29:14 +00:00
|
|
|
<span id={`${key}-label`}>{translate(wallet.lid)}</span>
|
2017-11-21 18:33:20 +00:00
|
|
|
{helpLink ? <Help link={helpLink} /> : null}
|
2017-07-04 03:21:19 +00:00
|
|
|
</label>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
public handleDecryptionChoiceChange = (
|
|
|
|
event: React.SyntheticEvent<HTMLInputElement>
|
|
|
|
) => {
|
|
|
|
const wallet = WALLETS[(event.target as HTMLInputElement).value];
|
2017-07-04 03:21:19 +00:00
|
|
|
|
|
|
|
if (!wallet) {
|
|
|
|
return;
|
2017-06-29 23:03:11 +00:00
|
|
|
}
|
|
|
|
|
2017-07-04 03:21:19 +00:00
|
|
|
this.setState({
|
2017-09-25 02:06:28 +00:00
|
|
|
selectedWalletKey: (event.target as HTMLInputElement).value,
|
2017-07-04 03:21:19 +00:00
|
|
|
value: wallet.initialParams
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
public render() {
|
2017-07-04 03:21:19 +00:00
|
|
|
const decryptionComponent = this.getDecryptionComponent();
|
|
|
|
|
|
|
|
return (
|
v3 Style Import (#151)
* Convert bootstrap to sass instead of checked in and less
* Darken body, adjust header.
* First pass at tab styles, each tab will need a lot of individual love tho.
* Update footer to main site content, improve responsiveness.
* Missing key added.
* Fix dropdowns.
* Convert GenerateWallet HTML over, still needs styling.
* Send form.
* Current rates styled.
* CurrencySwap form styles.
* SwapInfoHeader styled.
* Finish up swap restyling, minor usability improvements for mobile.
* Fix up notifications / alert customizations
* Import v3 variables.
* Fix notification spacing.
* Align input height base with buttons.
* Revert height base, add additional bootstrap overrides.
* Grid overrides.
* Move overrides to their own folder. Adjust naming.
* Fix inconsistencies.
* Style generate wallet pt 1.
* Style generate wallet pt 2
* Style generate wallet pt 3
* Fix swap
* Added some missing overries, fixed the fallout.
* Remove header text, indicate alpha version.
* Fix radio / checkbox weights.
* Bind => arrow
* Convert simpledropdown to proper form select, instead of weirdly implemented nonfuncitoning dropdown.
* Fix token balances buttons, footr icons.
2017-09-05 19:52:01 +00:00
|
|
|
<article className="Tab-content-pane row">
|
2017-07-04 03:21:19 +00:00
|
|
|
<section className="col-md-4 col-sm-6">
|
2017-10-05 23:29:14 +00:00
|
|
|
<h4>{translate('decrypt_Access')}</h4>
|
2017-07-04 03:21:19 +00:00
|
|
|
|
|
|
|
{this.buildWalletOptions()}
|
|
|
|
</section>
|
|
|
|
|
|
|
|
{decryptionComponent}
|
2017-10-05 23:29:14 +00:00
|
|
|
{!!(this.state.value as PrivateKeyValue).valid && (
|
2017-07-04 03:21:19 +00:00
|
|
|
<section className="col-md-4 col-sm-6">
|
2017-10-05 23:29:14 +00:00
|
|
|
<h4 id="uploadbtntxt-wallet">{translate('ADD_Label_6')}</h4>
|
2017-07-04 03:21:19 +00:00
|
|
|
<div className="form-group">
|
|
|
|
<a
|
2017-09-25 02:06:28 +00:00
|
|
|
tabIndex={0}
|
2017-07-04 03:21:19 +00:00
|
|
|
role="button"
|
|
|
|
className="btn btn-primary btn-block"
|
|
|
|
onClick={this.onUnlock}
|
|
|
|
>
|
|
|
|
{translate('ADD_Label_6_short')}
|
|
|
|
</a>
|
|
|
|
</div>
|
2017-10-05 23:29:14 +00:00
|
|
|
</section>
|
|
|
|
)}
|
2017-07-04 03:21:19 +00:00
|
|
|
</article>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
public onChange = (value: UnlockParams) => {
|
2017-07-04 03:21:19 +00:00
|
|
|
this.setState({ value });
|
|
|
|
};
|
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
public onUnlock = (payload: any) => {
|
2017-09-12 01:29:07 +00:00
|
|
|
// some components (TrezorDecrypt) don't take an onChange prop, and thus this.state.value will remain unpopulated.
|
|
|
|
// in this case, we can expect the payload to contain the unlocked wallet info.
|
|
|
|
const unlockValue =
|
|
|
|
this.state.value && !isEmpty(this.state.value)
|
|
|
|
? this.state.value
|
|
|
|
: payload;
|
2017-07-04 03:21:19 +00:00
|
|
|
this.props.dispatch(
|
2017-09-12 01:29:07 +00:00
|
|
|
WALLETS[this.state.selectedWalletKey].unlock(unlockValue)
|
2017-07-04 03:21:19 +00:00
|
|
|
);
|
|
|
|
};
|
2017-06-29 23:03:11 +00:00
|
|
|
}
|
|
|
|
|
2017-10-11 05:04:49 +00:00
|
|
|
function mapStateToProps(state: AppState) {
|
|
|
|
return {
|
|
|
|
offline: state.config.offline
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
export default connect(mapStateToProps)(WalletDecrypt);
|