Merge pull request #19 from MyEtherWallet/cleanup-v2

Cleanup round #2
This commit is contained in:
Daniel Ternyak 2017-06-20 18:48:06 -05:00 committed by GitHub
commit 59b0d446f2
10 changed files with 322 additions and 316 deletions

View File

@ -1,21 +1,22 @@
export const GENERATE_WALLET_SHOW_PASSWORD = 'GENERATE_WALLET_SHOW_PASSWORD';
export const GENERATE_WALLET_FILE = 'GENERATE_WALLET_FILE'
export const GENERATE_WALLET_HAS_DOWNLOADED_FILE = 'GENERATE_WALLET_HAS_DOWNLOADED_FILE'
export const GENERATE_WALLET_CONTINUE_TO_PAPER = 'GENERATE_WALLET_CONTINUE_TO_PAPER'
import {
GENERATE_WALLET_CONFIRM_CONTINUE_TO_PAPER,
GENERATE_WALLET_FILE,
GENERATE_WALLET_DOWNLOAD_FILE,
GENERATE_WALLET_SHOW_PASSWORD
} from 'actions/generateWalletConstants';
export const showPasswordGenerateWallet = () => {
return { type: GENERATE_WALLET_SHOW_PASSWORD };
};
export const SHOW_GENERATE_WALLET_PASSWORD_ACTION = () => Object ({
type: GENERATE_WALLET_SHOW_PASSWORD
})
export const generateFileGenerateWallet = () => {
return { type: GENERATE_WALLET_FILE };
};
export const GENERATE_WALLET_FILE_ACTION = () => Object ({
type: GENERATE_WALLET_FILE
})
export const downloadFileGenerateWallet = () => {
return { type: GENERATE_WALLET_DOWNLOAD_FILE };
};
export const GENERATE_WALLET_HAS_DOWNLOADED_FILE_ACTION = () => Object ({
type: GENERATE_WALLET_HAS_DOWNLOADED_FILE
})
export const GENERATE_WALLET_CONTINUE_TO_PAPER_ACTION = () => Object ({
type: GENERATE_WALLET_CONTINUE_TO_PAPER
})
export const confirmContinueToPaperGenerateWallet = () => {
return { type: GENERATE_WALLET_CONFIRM_CONTINUE_TO_PAPER };
};

View File

@ -0,0 +1,5 @@
export const GENERATE_WALLET_SHOW_PASSWORD = 'GENERATE_WALLET_SHOW_PASSWORD';
export const GENERATE_WALLET_FILE = 'GENERATE_WALLET_FILE';
export const GENERATE_WALLET_DOWNLOAD_FILE = 'GENERATE_WALLET_DOWNLOAD_FILE';
export const GENERATE_WALLET_CONFIRM_CONTINUE_TO_PAPER =
'GENERATE_WALLET_CONFIRM_CONTINUE_TO_PAPER';

View File

@ -6,35 +6,35 @@ import {
SWAP_UPDATE_BITY_RATES
} from './swapConstants';
export const SWAP_ORIGIN_KIND_TO = value => {
export const originKindSwap = value => {
return {
type: SWAP_ORIGIN_KIND,
value
};
};
export const SWAP_DESTINATION_KIND_TO = value => {
export const destinationKindSwap = value => {
return {
type: SWAP_DESTINATION_KIND,
value
};
};
export const SWAP_ORIGIN_AMOUNT_TO = value => {
export const originAmountSwap = value => {
return {
type: SWAP_ORIGIN_AMOUNT,
value
};
};
export const SWAP_DESTINATION_AMOUNT_TO = value => {
export const destinationAmountSwap = value => {
return {
type: SWAP_DESTINATION_AMOUNT,
value
};
};
export const SWAP_UPDATE_BITY_RATES_TO = value => {
export const updateBityRatesSwap = value => {
return {
type: SWAP_UPDATE_BITY_RATES,
value

View File

@ -1,141 +1,159 @@
import React, {Component} from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Field, reduxForm} from 'redux-form';
import { Field, reduxForm } from 'redux-form';
import GenerateWalletPasswordInputComponent from './GenerateWalletPasswordInputComponent';
import LedgerTrezorWarning from './LedgerTrezorWarning';
import translate from 'translations';
// VALIDATORS
const minLength = min => value => {
return value && value.length < min ? `Must be ${min} characters or more` : undefined
return value && value.length < min
? `Must be ${min} characters or more`
: undefined;
};
const minLength9 = minLength(9);
const required = value => value ? undefined : 'Required';
const required = value => (value ? undefined : 'Required');
class GenerateWalletPasswordComponent extends Component {
constructor(props) {
super(props)
}
constructor(props) {
super(props);
}
static propTypes = {
title: PropTypes.string,
body: PropTypes.string,
userId: PropTypes.number,
id: PropTypes.number,
generateWalletPassword: PropTypes.object,
showPassword: PropTypes.bool,
showGenerateWalletPasswordAction: PropTypes.func,
generateWalletFileAction: PropTypes.func,
generateWalletHasDownloadedFileAction: PropTypes.func,
generateWalletFile: PropTypes.bool,
hasDownloadedWalletFile: PropTypes.bool,
generateWalletContinueToPaperAction: PropTypes.func,
canProceedToPaper: PropTypes.bool
};
static propTypes = {
// state
title: PropTypes.string,
body: PropTypes.string,
userId: PropTypes.number,
id: PropTypes.number,
generateWalletPassword: PropTypes.object,
showPassword: PropTypes.bool,
generateWalletFile: PropTypes.bool,
hasDownloadedWalletFile: PropTypes.bool,
canProceedToPaper: PropTypes.bool,
// actions
showPasswordGenerateWallet: PropTypes.func,
generateFileGenerateWallet: PropTypes.func,
downloadFileGenerateWallet: PropTypes.func,
confirmContinueToPaperGenerateWallet: PropTypes.func
};
continueToPaper() {}
continueToPaper() {
}
downloaded() {
let nextState = this.state;
nextState.hasDownloadedWalletFile = true;
this.setState(nextState);
}
downloaded() {
let nextState = this.state;
nextState.hasDownloadedWalletFile = true;
this.setState(nextState)
}
render() {
const {
generateWalletPassword,
showPassword,
generateWalletFile,
hasDownloadedWalletFile,
showPasswordGenerateWallet,
generateFileGenerateWallet,
downloadFileGenerateWallet,
confirmContinueToPaperGenerateWallet
} = this.props;
render() {
const {
// handleSubmit,
// pristine,
// reset,
// submitting,
generateWalletPassword,
showPassword,
showGenerateWalletPasswordAction,
generateWalletFileAction,
generateWalletFile,
hasDownloadedWalletFile,
generateWalletHasDownloadedFileAction,
generateWalletContinueToPaperAction
// canProceedToPaper
} = this.props;
return (
<section className="container" style={{minHeight: '50%'}}>
<div className="tab-content">
<main className="tab-pane active text-center" role="main">
<br/>
{
!generateWalletFile && (
<div>
<section className="row">
<h1 aria-live="polite">{translate('NAV_GenerateWallet')}</h1>
<div className="col-sm-8 col-sm-offset-2">
<h4>{translate('HELP_1_Desc_3')}</h4>
<Field
validate={[required, minLength9]}
component={GenerateWalletPasswordInputComponent}
showPassword={showPassword}
showGenerateWalletPasswordAction={showGenerateWalletPasswordAction}
name="password"
type="text"/>
<br/>
<button onClick={() => generateWalletFileAction()}
disabled={generateWalletPassword ? generateWalletPassword.syncErrors : true}
className="btn btn-primary btn-block">
{translate('NAV_GenerateWallet')}
</button>
</div>
</section>
<LedgerTrezorWarning/>
</div>
)
}
{
generateWalletFile && (
<section role="main" className="row">
<h1>{translate('GEN_Label_2')}</h1>
<br/>
<div className="col-sm-8 col-sm-offset-2">
<div aria-hidden="true" className="account-help-icon"><img
src="https://myetherwallet.com/images/icon-help.svg" className="help-icon"/>
<p className="account-help-text">{translate('x_KeystoreDesc')}</p>
<h4>{translate('x_Keystore2')}</h4>
</div>
<a role="button" className="btn btn-primary btn-block"
href="blob:https://myetherwallet.com/2455ae32-916f-4224-a806-414bbe680168"
download="UTC--2017-04-26T23-07-03.538Z--c5b7fff4e1669e38e8d6bc8fffe7e562b2b70f43"
aria-label="Download Keystore File (UTC / JSON · Recommended · Encrypted)"
aria-describedby="x_KeystoreDesc"
onClick={() => generateWalletHasDownloadedFileAction()}>{translate('x_Download')}</a>
<p className="sr-only" id="x_KeystoreDesc">{translate('x_KeystoreDesc')}</p>
<br/><br/><br/><br/>
</div>
<div className="col-xs-12 alert alert-danger">
<span>
MyEtherWallet.com is not a web wallet &amp; does not store or transmit this secret information at any time. <br/>
<strong>If you do not save your wallet file and password, we cannot recover them.</strong><br/>
Save your wallet file now &amp; back it up in a second location (not on your computer).
<br/><br/>
<a role="button"
className={`btn btn-info ${hasDownloadedWalletFile ? '' : 'disabled'}`}
onClick={() => generateWalletContinueToPaperAction()}> I understand. Continue. </a>
</span>
</div>
</section>
)
}
</main>
return (
<section className="container" style={{ minHeight: '50%' }}>
<div className="tab-content">
<main className="tab-pane active text-center" role="main">
<br />
{!generateWalletFile &&
<div>
<section className="row">
<h1 aria-live="polite">{translate('NAV_GenerateWallet')}</h1>
<div className="col-sm-8 col-sm-offset-2">
<h4>{translate('HELP_1_Desc_3')}</h4>
<Field
validate={[required, minLength9]}
component={GenerateWalletPasswordInputComponent}
showPassword={showPassword}
showPasswordGenerateWallet={showPasswordGenerateWallet}
name="password"
type="text"
/>
<br />
<button
onClick={() => generateFileGenerateWallet()}
disabled={
generateWalletPassword
? generateWalletPassword.syncErrors
: true
}
className="btn btn-primary btn-block"
>
{translate('NAV_GenerateWallet')}
</button>
</div>
</section>
<LedgerTrezorWarning />
</div>}
{generateWalletFile &&
<section role="main" className="row">
<h1>{translate('GEN_Label_2')}</h1>
<br />
<div className="col-sm-8 col-sm-offset-2">
<div aria-hidden="true" className="account-help-icon">
<img
src="https://myetherwallet.com/images/icon-help.svg"
className="help-icon"
/>
<p className="account-help-text">
{translate('x_KeystoreDesc')}
</p>
<h4>{translate('x_Keystore2')}</h4>
</div>
<a
role="button"
className="btn btn-primary btn-block"
href="blob:https://myetherwallet.com/2455ae32-916f-4224-a806-414bbe680168"
download="UTC--2017-04-26T23-07-03.538Z--c5b7fff4e1669e38e8d6bc8fffe7e562b2b70f43"
aria-label="Download Keystore File (UTC / JSON · Recommended · Encrypted)"
aria-describedby="x_KeystoreDesc"
onClick={() => downloadFileGenerateWallet()}
>
{translate('x_Download')}
</a>
<p className="sr-only" id="x_KeystoreDesc">
{translate('x_KeystoreDesc')}
</p>
<br /><br /><br /><br />
</div>
</section>
)
}
<div className="col-xs-12 alert alert-danger">
<span>
MyEtherWallet.com is not a web wallet &amp; does not store
or transmit this secret information at any time. <br />
<strong>
If you do not save your wallet file and password, we
cannot recover them.
</strong>
<br />
Save your wallet file now &amp; back it up in a second
location (not on your computer).
<br /><br />
<a
role="button"
className={`btn btn-info ${hasDownloadedWalletFile
? ''
: 'disabled'}`}
onClick={() => confirmContinueToPaperGenerateWallet()}
>
{' '}I understand. Continue.{' '}
</a>
</span>
</div>
</section>}
</main>
</div>
</section>
);
}
}
export default reduxForm({
form: 'generateWalletPassword' // a unique name for this form
form: 'generateWalletPassword' // a unique name for this form
})(GenerateWalletPasswordComponent);

View File

@ -1,40 +1,44 @@
import React, {Component} from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class GenerateWalletPasswordInputComponent extends Component {
constructor(props) {
super(props)
}
constructor(props) {
super(props);
}
static propTypes = {
showGenerateWalletPasswordAction: PropTypes.func,
showPassword: PropTypes.bool,
input: PropTypes.object,
meta: PropTypes.object
};
render() {
return (
<div>
<div>
<div className="input-group" style={{width: '100%'}}>
<input {...this.props.input}
name="password"
className={this.props.meta.error ? 'form-control is-invalid' : 'form-control'}
type={this.props.showPassword ? 'text' : 'password'}
placeholder="Do NOT forget to save this!"
aria-label="Enter a strong password (at least 9 characters)"/>
<span
onClick={() => this.props.showGenerateWalletPasswordAction()}
aria-label="make password visible"
role="button"
className="input-group-addon eye"/>
</div>
</div>
</div>
)
}
static propTypes = {
showPasswordGenerateWallet: PropTypes.func,
showPassword: PropTypes.bool,
input: PropTypes.object,
meta: PropTypes.object
};
render() {
return (
<div>
<div>
<div className="input-group" style={{ width: '100%' }}>
<input
{...this.props.input}
name="password"
className={
this.props.meta.error
? 'form-control is-invalid'
: 'form-control'
}
type={this.props.showPassword ? 'text' : 'password'}
placeholder="Do NOT forget to save this!"
aria-label="Enter a strong password (at least 9 characters)"
/>
<span
onClick={() => this.props.showPasswordGenerateWallet()}
aria-label="make password visible"
role="button"
className="input-group-addon eye"
/>
</div>
</div>
</div>
);
}
}

View File

@ -1,21 +1,23 @@
import React from 'react';
const LedgerTrezorWarning = () => (
<section className="row">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p className="strong">Ledger &amp; TREZOR users: Do not generate a new
walletyour
hardware device <em> is </em> your wallet.<br/>
<a>You
can connect to your device, see your addresses, or send ETH or Tokens
here.</a>
</p>
</section>
);
const LedgerTrezorWarning = () =>
<section className="row">
<br />
<br />
<br />
<br />
<br />
<br />
<p className="strong">
Ledger &amp; TREZOR users: Do not generate a new
walletyour
hardware device <em> is </em> your wallet.<br />
<a>
You
can connect to your device, see your addresses, or send ETH or Tokens
here.
</a>
</p>
</section>;
export default LedgerTrezorWarning;

View File

@ -1,63 +1,41 @@
import GenerateWalletPasswordComponent from './components/GenerateWalletPasswordComponent';
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {
GENERATE_WALLET_FILE_ACTION,
GENERATE_WALLET_HAS_DOWNLOADED_FILE_ACTION,
SHOW_GENERATE_WALLET_PASSWORD_ACTION,
GENERATE_WALLET_CONTINUE_TO_PAPER_ACTION
} from 'actions/generateWallet';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as generateWalletActions from 'actions/generateWallet';
import PropTypes from 'prop-types';
class GenerateWallet extends Component {
constructor(props) {
super(props)
}
constructor(props) {
super(props);
}
static propTypes = {
generateWalletPassword: PropTypes.object,
showPassword: PropTypes.bool,
hasDownloadedWalletFile: PropTypes.bool,
showGenerateWalletPasswordAction: PropTypes.func,
generateWalletFileAction: PropTypes.func,
generateWalletHasDownloadedFileAction: PropTypes.func,
generateWalletFile: PropTypes.bool,
generateWalletContinueToPaperAction: PropTypes.func,
canProceedToPaper: PropTypes.bool
}
static propTypes = {
// state
generateWalletPassword: PropTypes.object,
showPassword: PropTypes.bool,
hasDownloadedWalletFile: PropTypes.bool,
generateWalletFile: PropTypes.bool,
canProceedToPaper: PropTypes.bool,
// actions
showPasswordGenerateWallet: PropTypes.func,
generateFileGenerateWallet: PropTypes.func,
downloadFileGenerateWallet: PropTypes.func,
confirmContinueToPaperGenerateWallet: PropTypes.func
};
render() {
return (
<GenerateWalletPasswordComponent {...this.props}/>
)
}
render() {
return <GenerateWalletPasswordComponent {...this.props} />;
}
}
function mapStateToProps(state) {
return {
generateWalletPassword: state.form.generateWalletPassword,
generateWalletFile: state.generateWallet.generateWalletFile,
showPassword: state.generateWallet.showPassword,
hasDownloadedWalletFile: state.generateWallet.hasDownloadedWalletFile,
canProceedToPaper: state.generateWallet.canProceedToPaper
}
return {
generateWalletPassword: state.form.generateWalletPassword,
generateWalletFile: state.generateWallet.generateWalletFile,
showPassword: state.generateWallet.showPassword,
hasDownloadedWalletFile: state.generateWallet.hasDownloadedWalletFile,
canProceedToPaper: state.generateWallet.canProceedToPaper
};
}
function mapDispatchToProps(dispatch) {
return {
showGenerateWalletPasswordAction: () => {
dispatch(SHOW_GENERATE_WALLET_PASSWORD_ACTION())
},
generateWalletFileAction: () => {
dispatch(GENERATE_WALLET_FILE_ACTION())
},
generateWalletHasDownloadedFileAction: () => {
dispatch(GENERATE_WALLET_HAS_DOWNLOADED_FILE_ACTION())
},
generateWalletContinueToPaperAction: () => {
dispatch(GENERATE_WALLET_CONTINUE_TO_PAPER_ACTION())
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(GenerateWallet)
export default connect(mapStateToProps, generateWalletActions)(GenerateWallet);

View File

@ -44,10 +44,10 @@ export default class WantToSwapMy extends Component {
destinationKind: PropTypes.string,
destinationKindOptions: PropTypes.array,
originKindOptions: PropTypes.array,
SWAP_ORIGIN_KIND_TO: PropTypes.func,
SWAP_DESTINATION_KIND_TO: PropTypes.func,
SWAP_ORIGIN_AMOUNT_TO: PropTypes.func,
SWAP_DESTINATION_AMOUNT_TO: PropTypes.func
originKindSwap: PropTypes.func,
destinationKindSwap: PropTypes.func,
originAmountSwap: PropTypes.func,
destinationAmountSwap: PropTypes.func
};
onClickStartSwap() {}
@ -60,38 +60,38 @@ export default class WantToSwapMy extends Component {
this.props.destinationKind
);
let bityRate = this.props.bityRates[pairName];
this.props.SWAP_ORIGIN_AMOUNT_TO(originAmountAsNumber);
this.props.SWAP_DESTINATION_AMOUNT_TO(originAmountAsNumber * bityRate);
this.props.originAmountSwap(originAmountAsNumber);
this.props.destinationAmountSwap(originAmountAsNumber * bityRate);
} else {
this.props.SWAP_ORIGIN_AMOUNT_TO('');
this.props.SWAP_DESTINATION_AMOUNT_TO('');
this.props.originAmountSwap('');
this.props.destinationAmountSwap('');
}
};
onChangeDestinationAmount(amount) {
let destinationAmountAsNumber = parseFloat(amount);
if (destinationAmountAsNumber) {
this.props.SWAP_DESTINATION_AMOUNT_TO(destinationAmountAsNumber);
this.props.destinationAmountSwap(destinationAmountAsNumber);
let pairName = combineAndUpper(
this.props.destinationKind,
this.props.originKind
);
let bityRate = this.props.bityRates[pairName];
this.props.SWAP_ORIGIN_AMOUNT_TO(destinationAmountAsNumber * bityRate);
this.props.originAmountSwap(destinationAmountAsNumber * bityRate);
} else {
this.props.SWAP_ORIGIN_AMOUNT_TO('');
this.props.SWAP_DESTINATION_AMOUNT_TO('');
this.props.originAmountSwap('');
this.props.destinationAmountSwap('');
}
}
async onChangeDestinationKind(event) {
let newDestinationKind = event.target.value;
this.props.SWAP_DESTINATION_KIND_TO(newDestinationKind);
this.props.destinationKindSwap(newDestinationKind);
}
async onChangeOriginKind(event) {
let newOriginKind = event.target.value;
this.props.SWAP_ORIGIN_KIND_TO(newOriginKind);
this.props.originKindSwap(newOriginKind);
}
render() {

View File

@ -21,11 +21,11 @@ class Swap extends Component {
destinationKind: PropTypes.string,
destinationKindOptions: PropTypes.array,
originKindOptions: PropTypes.array,
SWAP_ORIGIN_KIND_TO: PropTypes.func,
SWAP_DESTINATION_KIND_TO: PropTypes.func,
SWAP_ORIGIN_AMOUNT_TO: PropTypes.func,
SWAP_DESTINATION_AMOUNT_TO: PropTypes.func,
SWAP_UPDATE_BITY_RATES_TO: PropTypes.func
originKindSwap: PropTypes.func,
destinationKindSwap: PropTypes.func,
originAmountSwap: PropTypes.func,
destinationAmountSwap: PropTypes.func,
updateBityRatesSwap: PropTypes.func
};
componentDidMount() {
@ -38,7 +38,7 @@ class Swap extends Component {
!bityRates.BTCREP
) {
this.bity.getAllRates().then(data => {
this.props.SWAP_UPDATE_BITY_RATES_TO(data);
this.props.updateBityRatesSwap(data);
});
}
}
@ -52,10 +52,10 @@ class Swap extends Component {
destinationKind,
destinationKindOptions,
originKindOptions,
SWAP_ORIGIN_KIND_TO,
SWAP_DESTINATION_KIND_TO,
SWAP_ORIGIN_AMOUNT_TO,
SWAP_DESTINATION_AMOUNT_TO
originKindSwap,
destinationKindSwap,
originAmountSwap,
destinationAmountSwap
} = this.props;
let wantToSwapMyProps = {
@ -66,10 +66,10 @@ class Swap extends Component {
destinationKind,
destinationKindOptions,
originKindOptions,
SWAP_ORIGIN_KIND_TO,
SWAP_DESTINATION_KIND_TO,
SWAP_ORIGIN_AMOUNT_TO,
SWAP_DESTINATION_AMOUNT_TO
originKindSwap,
destinationKindSwap,
originAmountSwap,
destinationAmountSwap
};
return (

View File

@ -1,50 +1,48 @@
import {
GENERATE_WALLET_SHOW_PASSWORD,
GENERATE_WALLET_FILE,
GENERATE_WALLET_HAS_DOWNLOADED_FILE,
GENERATE_WALLET_CONTINUE_TO_PAPER
} from 'actions/generateWallet';
GENERATE_WALLET_SHOW_PASSWORD,
GENERATE_WALLET_FILE,
GENERATE_WALLET_DOWNLOAD_FILE,
GENERATE_WALLET_CONFIRM_CONTINUE_TO_PAPER
} from 'actions/generateWalletConstants';
const initialState = {
showPassword: false,
generateWalletFile: false,
hasDownloadedWalletFile: false,
canProceedToPaper: false
}
showPassword: false,
generateWalletFile: false,
hasDownloadedWalletFile: false,
canProceedToPaper: false
};
export function generateWallet(state = initialState, action) {
switch (action.type) {
case GENERATE_WALLET_SHOW_PASSWORD: {
return {
...state,
showPassword: !state.showPassword
}
}
case GENERATE_WALLET_FILE: {
return {
...state,
generateWalletFile: true
}
}
case GENERATE_WALLET_HAS_DOWNLOADED_FILE: {
return {
...state,
hasDownloadedWalletFile: true
}
}
case GENERATE_WALLET_CONTINUE_TO_PAPER: {
return {
...state,
canProceedToPaper: true
}
}
default:
return state
switch (action.type) {
case GENERATE_WALLET_SHOW_PASSWORD: {
return {
...state,
showPassword: !state.showPassword
};
}
case GENERATE_WALLET_FILE: {
return {
...state,
generateWalletFile: true
};
}
case GENERATE_WALLET_DOWNLOAD_FILE: {
return {
...state,
hasDownloadedWalletFile: true
};
}
case GENERATE_WALLET_CONFIRM_CONTINUE_TO_PAPER: {
return {
...state,
canProceedToPaper: true
};
}
default:
return state;
}
}