diff --git a/common/components/Header/index.tsx b/common/components/Header/index.tsx index 1a40197b..5b0b037c 100644 --- a/common/components/Header/index.tsx +++ b/common/components/Header/index.tsx @@ -116,7 +116,6 @@ export default class Header extends Component {
- {/* TODO - don't hardcode image path*/} { public setupUnblock() { this.unblock = this.injected.history.block(nextLocation => { - if ( - this.props.when && - nextLocation.pathname !== this.injected.location.pathname - ) { + if (this.props.when && nextLocation.pathname !== this.injected.location.pathname) { this.setState({ openModal: true, nextLocation @@ -92,9 +89,7 @@ class NavigationPrompt extends React.Component { handleClose={this.onCancel} buttons={buttons} > -

- Leaving this page will log you out. Are you sure you want to continue? -

+

Leaving this page will log you out. Are you sure you want to continue?

); } diff --git a/common/components/WalletDecrypt/index.tsx b/common/components/WalletDecrypt/index.tsx index ff3db108..0171d8d5 100644 --- a/common/components/WalletDecrypt/index.tsx +++ b/common/components/WalletDecrypt/index.tsx @@ -1,18 +1,21 @@ import { setWallet, + TSetWallet, unlockKeystore, - UnlockKeystoreAction, + TUnlockKeystore, unlockMnemonic, - UnlockMnemonicAction, + TUnlockMnemonic, unlockPrivateKey, - UnlockPrivateKeyAction, - unlockWeb3 + TUnlockPrivateKey, + unlockWeb3, + TUnlockWeb3, + resetWallet, + TResetWallet } from 'actions/wallet'; import isEmpty from 'lodash/isEmpty'; import map from 'lodash/map'; import React, { Component } from 'react'; import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; import translate from 'translations'; import KeystoreDecrypt from './Keystore'; import LedgerNanoSDecrypt from './LedgerNano'; @@ -24,77 +27,20 @@ import { AppState } from 'reducers'; import Web3Decrypt from './Web3'; import Help from 'components/ui/Help'; import { knowledgeBaseURL } from 'config/data'; - -const WALLETS = { - web3: { - lid: 'x_MetaMask', - component: Web3Decrypt, - initialParams: {}, - unlock: unlockWeb3, - helpLink: `${knowledgeBaseURL}/migration/moving-from-private-key-to-metamask` - }, - 'ledger-nano-s': { - lid: 'x_Ledger', - component: LedgerNanoSDecrypt, - initialParams: {}, - unlock: setWallet, - helpLink: - 'https://ledger.zendesk.com/hc/en-us/articles/115005200009-How-to-use-MyEtherWallet-with-Ledger' - }, - trezor: { - lid: 'x_Trezor', - component: TrezorDecrypt, - initialParams: {}, - unlock: setWallet, - helpLink: 'https://doc.satoshilabs.com/trezor-apps/mew.html' - }, - 'keystore-file': { - lid: 'x_Keystore2', - component: KeystoreDecrypt, - initialParams: { - file: '', - password: '' - }, - unlock: unlockKeystore, - helpLink: `${ - knowledgeBaseURL - }/private-keys-passwords/difference-beween-private-key-and-keystore-file.html` - }, - 'mnemonic-phrase': { - lid: 'x_Mnemonic', - component: MnemonicDecrypt, - initialParams: {}, - unlock: unlockMnemonic, - helpLink: `${ - knowledgeBaseURL - }/private-keys-passwords/difference-beween-private-key-and-keystore-file.html` - }, - 'private-key': { - lid: 'x_PrivKey2', - component: PrivateKeyDecrypt, - initialParams: { - key: '', - password: '' - }, - unlock: unlockPrivateKey, - helpLink: `${ - knowledgeBaseURL - }/private-keys-passwords/difference-beween-private-key-and-keystore-file.html` - }, - 'view-only': { - lid: 'View with Address Only', - component: ViewOnlyDecrypt, - initialParams: {}, - unlock: setWallet, - helpLink: '' - } -}; +import NavigationPrompt from './NavigationPrompt'; +import { IWallet } from 'libs/wallet'; type UnlockParams = {} | PrivateKeyValue; interface Props { - // FIXME - dispatch: Dispatch; + unlockKeystore: TUnlockKeystore; + unlockMnemonic: TUnlockMnemonic; + unlockPrivateKey: TUnlockPrivateKey; + setWallet: TSetWallet; + unlockWeb3: TUnlockWeb3; + resetWallet: TResetWallet; + wallet: IWallet; + hidden?: boolean; offline: boolean; allowReadOnly?: boolean; } @@ -105,19 +51,82 @@ interface State { } export class WalletDecrypt extends Component { + public WALLETS = { + web3: { + lid: 'x_MetaMask', + component: Web3Decrypt, + initialParams: {}, + unlock: this.props.unlockWeb3, + helpLink: `${knowledgeBaseURL}/migration/moving-from-private-key-to-metamask` + }, + 'ledger-nano-s': { + lid: 'x_Ledger', + component: LedgerNanoSDecrypt, + initialParams: {}, + unlock: this.props.setWallet, + helpLink: + 'https://ledger.zendesk.com/hc/en-us/articles/115005200009-How-to-use-MyEtherWallet-with-Ledger' + }, + trezor: { + lid: 'x_Trezor', + component: TrezorDecrypt, + initialParams: {}, + unlock: this.props.setWallet, + helpLink: 'https://doc.satoshilabs.com/trezor-apps/mew.html' + }, + 'keystore-file': { + lid: 'x_Keystore2', + component: KeystoreDecrypt, + initialParams: { + file: '', + password: '' + }, + unlock: this.props.unlockKeystore, + helpLink: `${ + knowledgeBaseURL + }/private-keys-passwords/difference-beween-private-key-and-keystore-file.html` + }, + 'mnemonic-phrase': { + lid: 'x_Mnemonic', + component: MnemonicDecrypt, + initialParams: {}, + unlock: this.props.unlockMnemonic, + helpLink: `${ + knowledgeBaseURL + }/private-keys-passwords/difference-beween-private-key-and-keystore-file.html` + }, + 'private-key': { + lid: 'x_PrivKey2', + component: PrivateKeyDecrypt, + initialParams: { + key: '', + password: '' + }, + unlock: this.props.unlockPrivateKey, + helpLink: `${ + knowledgeBaseURL + }/private-keys-passwords/difference-beween-private-key-and-keystore-file.html` + }, + 'view-only': { + lid: 'View with Address Only', + component: ViewOnlyDecrypt, + initialParams: {}, + unlock: this.props.setWallet, + helpLink: '' + } + }; public state: State = { selectedWalletKey: 'keystore-file', - value: WALLETS['keystore-file'].initialParams + value: this.WALLETS['keystore-file'].initialParams }; public getDecryptionComponent() { const { selectedWalletKey, value } = this.state; - const selectedWallet = WALLETS[selectedWalletKey]; + const selectedWallet = this.WALLETS[selectedWalletKey]; if (!selectedWallet) { return null; } - return ( ); @@ -129,7 +138,7 @@ export class WalletDecrypt extends Component { } public buildWalletOptions() { - return map(WALLETS, (wallet, key) => { + return map(this.WALLETS, (wallet, key) => { const { helpLink } = wallet; const isSelected = this.state.selectedWalletKey === key; const isDisabled = @@ -156,7 +165,7 @@ export class WalletDecrypt extends Component { } public handleDecryptionChoiceChange = (event: React.SyntheticEvent) => { - const wallet = WALLETS[(event.target as HTMLInputElement).value]; + const wallet = this.WALLETS[(event.target as HTMLInputElement).value]; if (!wallet) { return; @@ -169,33 +178,37 @@ export class WalletDecrypt extends Component { }; public render() { + const { wallet, hidden } = this.props; const decryptionComponent = this.getDecryptionComponent(); - + const unlocked = !!wallet; return ( -
-
-

{translate('decrypt_Access')}

- - {this.buildWalletOptions()} -
- - {decryptionComponent} - {!!(this.state.value as PrivateKeyValue).valid && ( +
+ + + + {decryptionComponent} + {!!(this.state.value as PrivateKeyValue).valid && ( +
+

{translate('ADD_Label_6')}

+ +
+ )} +
+ ); } @@ -207,14 +220,22 @@ export class WalletDecrypt extends Component { // 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; - this.props.dispatch(WALLETS[this.state.selectedWalletKey].unlock(unlockValue)); + this.WALLETS[this.state.selectedWalletKey].unlock(unlockValue); }; } function mapStateToProps(state: AppState) { return { - offline: state.config.offline + offline: state.config.offline, + wallet: state.wallet.inst }; } -export default connect(mapStateToProps)(WalletDecrypt); +export default connect(mapStateToProps, { + unlockKeystore, + unlockMnemonic, + unlockPrivateKey, + unlockWeb3, + setWallet, + resetWallet +})(WalletDecrypt); diff --git a/common/components/ui/SimpleButton.tsx b/common/components/ui/SimpleButton.tsx index 7ab3cee0..513dcea1 100644 --- a/common/components/ui/SimpleButton.tsx +++ b/common/components/ui/SimpleButton.tsx @@ -4,13 +4,7 @@ import Spinner from './Spinner'; const DEFAULT_BUTTON_TYPE = 'primary'; const DEFAULT_BUTTON_SIZE = 'lg'; -type ButtonType = - | 'default' - | 'primary' - | 'success' - | 'info' - | 'warning' - | 'danger'; +type ButtonType = 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger'; type ButtonSize = 'lg' | 'sm' | 'xs'; interface Props { @@ -25,19 +19,15 @@ interface Props { export default class SimpleButton extends Component { public computedClass = () => { - return `btn btn-${this.props.size || DEFAULT_BUTTON_TYPE} btn-${this.props - .type || DEFAULT_BUTTON_SIZE}`; + return `btn btn-${this.props.size || DEFAULT_BUTTON_TYPE} btn-${this.props.type || + DEFAULT_BUTTON_SIZE}`; }; public render() { const { loading, disabled, loadingText, text, onClick } = this.props; return (
-