grassrootseconomics/openethereum
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update FirstRun for UI-2 (#7195)

Browse Source 
* WIP

* Update after @parity/ui update

* Update to latest

* Update semver for @parity

* Update & -> &
This commit is contained in:
Jaco Greeff
2017-12-05 10:44:34 +01:00
committed by GitHub
parent e08893fcf1
commit 1291a24e4e
8 changed files with 135 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
js/src/Application/application.js
View File

@@ -36,7 +36,6 @@ import Status from '../Status';
import UpgradeParity from '../UpgradeParity';
import { appLogoDark as parityLogo } from '../config';
import Store from './store';
import styles from './application.css';
const inFrame = window.parent !== window && window.parent.frames.length !== 0;
@@ -54,7 +53,6 @@ class Application extends Component {
pending: PropTypes.array
}
store = new Store(this.context.api);
hwstore = HardwareStore.get(this.context.api);
upgradeStore = UpgradeStore.get(this.context.api);
@@ -114,10 +112,7 @@ class Application extends Component {
return (
<div className={ styles.container }>
<Extension />
<FirstRun
onClose={ this.store.closeFirstrun }
visible={ this.store.firstrunVisible }
/>
<FirstRun />
<Snackbar />
<UpgradeParity upgradeStore={ this.upgradeStore } />
<Errors />

95
js/src/Application/store.js
View File

@@ -1,95 +0,0 @@
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import { action, observable } from 'mobx';
import store from 'store';
const OLD_LS_FIRST_RUN_KEY = 'showFirstRun';
const LS_FIRST_RUN_KEY = '_parity::showFirstRun';
export default class Store {
@observable firstrunVisible = false;
constructor (api) {
// Migrate the old key to the new one
this._migrateStore();
this._api = api;
// Show the first run the storage doesn't hold `false` value
const firstrunVisible = store.get(LS_FIRST_RUN_KEY) !== false;
// Only check accounts if we might show the first run
if (firstrunVisible) {
api.transport.once('open', () => {
this._checkAccounts();
});
} else {
this.firstrunVisible = false;
}
}
@action closeFirstrun = () => {
this.toggleFirstrun(false);
}
@action toggleFirstrun = (visible = false) => {
this.firstrunVisible = visible;
// There's no need to write to storage that the
// First Run should be visible
if (!visible) {
store.set(LS_FIRST_RUN_KEY, !!visible);
}
}
/**
* Migrate the old LocalStorage key format
* to the new one
*/
_migrateStore () {
const oldValue = store.get(OLD_LS_FIRST_RUN_KEY);
const newValue = store.get(LS_FIRST_RUN_KEY);
if (newValue === undefined && oldValue !== undefined) {
store.set(LS_FIRST_RUN_KEY, oldValue);
store.remove(OLD_LS_FIRST_RUN_KEY);
}
}
_checkAccounts () {
return Promise
.all([
this._api.parity.listVaults(),
this._api.parity.allAccountsInfo()
])
.then(([ vaults, info ]) => {
const accounts = Object.keys(info)
.filter((address) => info[address].uuid)
// In DEV mode, the empty phrase account is already added
.filter((address) => address.toLowerCase() !== '0x00a329c0648769a73afac7f9381e08fb43dbea72');
// Has accounts if any vaults or accounts
const hasAccounts = (accounts && accounts.length > 0) || (vaults && vaults.length > 0);
// Show First Run if no accounts and no vaults
this.toggleFirstrun(!hasAccounts);
})
.catch((error) => {
console.error('checkAccounts', error);
});
}
}

9
js/src/FirstRun/TnC/tnc.js
View File

@@ -21,19 +21,16 @@ import ReactMarkdown from 'react-markdown';
import Checkbox from '@parity/ui/lib/Form/Checkbox';
import tnc from './tnc.md';
import styles from '../firstRun.css';
let tnc = '';
if (process.env.NODE_ENV !== 'test') {
tnc = require('./tnc.md');
}
export default function TnC ({ hasAccepted, onAccept }) {
return (
<div className={ styles.tnc }>
<ReactMarkdown
className={ styles.markdown }
escapeHtml={ false }
source={ tnc }
/>
<Checkbox

348
js/src/FirstRun/firstRun.js
View File

@@ -16,289 +16,56 @@
import { observer } from 'mobx-react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { createIdentityImg } from '@parity/api/lib/util/identity';
import { newError } from '@parity/shared/lib/redux/actions';
import Button from '@parity/ui/lib/Button';
import Portal from '@parity/ui/lib/Portal';
import { CheckIcon, DoneIcon, NextIcon, PrintIcon, ReplayIcon } from '@parity/ui/lib/Icons';
import { DoneIcon } from '@parity/ui/lib/Icons';
import { appLogoDarkNoText as parityLogo } from '../config';
import { NewAccount, AccountDetails } from '@parity/dapp-accounts/src/CreateAccount';
import print from '@parity/dapp-accounts/src/CreateAccount/print';
import recoveryPage from '@parity/dapp-accounts/src/CreateAccount/recoveryPage.ejs';
import CreateStore from '@parity/dapp-accounts/src/CreateAccount/store';
import Completed from './Completed';
import Store from './store';
import TnC from './TnC';
import Welcome from './Welcome';
const STAGE_NAMES = [
<FormattedMessage
id='firstRun.title.welcome'
defaultMessage='welcome'
/>,
<FormattedMessage
id='firstRun.title.terms'
defaultMessage='terms'
/>,
<FormattedMessage
id='firstRun.title.newAccount'
defaultMessage='new account'
/>,
<FormattedMessage
id='firstRun.title.recovery'
defaultMessage='recovery'
/>,
<FormattedMessage
id='firstRun.title.confirmation'
defaultMessage='confirmation'
/>,
<FormattedMessage
id='firstRun.title.completed'
defaultMessage='completed'
/>
];
const BUTTON_LABEL_NEXT = (
<FormattedMessage
id='firstRun.button.next'
defaultMessage='Next'
/>
);
@observer
class FirstRun extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
}
static propTypes = {
hasAccounts: PropTypes.bool.isRequired,
newError: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
visible: PropTypes.bool.isRequired
}
createStore = new CreateStore(this.context.api, {}, true, false);
export default class FirstRun extends Component {
state = {
stage: 0,
hasAcceptedTnc: false
}
render () {
const { visible } = this.props;
const { stage } = this.state;
store = new Store();
if (!visible) {
render () {
const { hasAcceptedTnc } = this.state;
if (!this.store.visible) {
return null;
}
return (
<Portal
buttons={ this.renderDialogActions() }
activeStep={ stage }
hideClose
steps={ STAGE_NAMES }
open
>
{ this.renderStage() }
</Portal>
);
}
renderStage () {
const { stage, hasAcceptedTnc } = this.state;
switch (stage) {
case 0:
return (
<Welcome />
);
case 1:
return (
<TnC
hasAccepted={ hasAcceptedTnc }
onAccept={ this.onAcceptTnC }
/>
);
case 2:
return (
<NewAccount
newError={ this.props.newError }
createStore={ this.createStore }
/>
);
case 3:
return (
<AccountDetails
createStore={ this.createStore }
withRequiredBackup
/>
);
case 4:
return (
<AccountDetails
createStore={ this.createStore }
isConfirming
/>
);
case 5:
return (
<Completed />
);
}
}
renderDialogActions () {
const { hasAccounts } = this.props;
const { stage, hasAcceptedTnc } = this.state;
const { canCreate, phraseBackedUpError } = this.createStore;
switch (stage) {
case 0:
return (
<Button
icon={ <NextIcon /> }
key='next'
label={ BUTTON_LABEL_NEXT }
onClick={ this.onNext }
/>
);
case 1:
return (
buttons={
<Button
disabled={ !hasAcceptedTnc }
icon={ <NextIcon /> }
key='next'
label={ BUTTON_LABEL_NEXT }
onClick={ this.onNext }
/>
);
case 2:
const buttons = [
<Button
disabled={ !canCreate }
icon={ <NextIcon /> }
key='next'
label={ BUTTON_LABEL_NEXT }
onClick={ this.onNext }
/>
];
if (hasAccounts) {
buttons.unshift(
<Button
icon={ <NextIcon /> }
key='skip'
label={
<FormattedMessage
id='firstRun.button.skip'
defaultMessage='Skip'
/>
}
onClick={ this.skipAccountCreation }
/>
);
}
return buttons;
case 3:
return [
<Button
icon={ <PrintIcon /> }
key='print'
label={
<FormattedMessage
id='firstRun.button.print'
defaultMessage='Print Phrase'
/>
}
onClick={ this.printPhrase }
/>,
<Button
disabled={ !!phraseBackedUpError }
icon={ <NextIcon /> }
key='next'
label={ BUTTON_LABEL_NEXT }
onClick={ this.onConfirmPhraseBackup }
/>
];
case 4:
return [
<Button
icon={ <ReplayIcon /> }
key='restart'
label={
<FormattedMessage
id='firstRun.button.restart'
defaultMessage='Start Over'
/>
}
onClick={ this.onStartOver }
/>,
<Button
icon={ <CheckIcon /> }
key='create'
label={
<FormattedMessage
id='firstRun.button.create'
defaultMessage='Create'
/>
}
onClick={ this.onCreate }
/>
];
case 5:
return (
<Button
icon={ <DoneIcon /> }
key='close'
label={
<FormattedMessage
id='firstRun.button.close'
defaultMessage='Close'
/>
}
onClick={ this.onClose }
key='accept'
label='Close'
onClick={ this.store.close }
/>
);
}
}
onClose = () => {
const { onClose } = this.props;
this.setState({
stage: 0
}, onClose);
}
onConfirmPhraseBackup = () => {
this.createStore.clearPhrase();
this.onNext();
}
onNext = () => {
const { stage } = this.state;
this.setState({
stage: stage + 1
});
}
onStartOver = () => {
this.setState({
stage: 2
});
}
hideClose
title={
<FormattedMessage
id='firstRun.title.termsOnly'
defaultMessage='Terms &amp; Conditions'
/>
}
open
>
<TnC
hasAccepted={ hasAcceptedTnc }
onAccept={ this.onAcceptTnC }
/>
</Portal>
);
}
onAcceptTnC = () => {
@@ -306,63 +73,4 @@ class FirstRun extends Component {
hasAcceptedTnc: !this.state.hasAcceptedTnc
});
}
onCreate = () => {
this.createStore.setBusy(true);
this.createStore.computeBackupPhraseAddress()
.then(err => {
if (err) {
this.createStore.setBusy(false);
return;
}
return this.createStore.createAccount()
.then(() => {
this.createStore.clearPhrase();
this.createStore.setBusy(false);
this.onNext();
});
})
.catch((error) => {
this.createStore.setBusy(false);
this.props.newError(error);
});
}
skipAccountCreation = () => {
this.setState({ stage: this.state.stage + 3 });
}
printPhrase = () => {
const { address, phrase, name } = this.createStore;
const identity = createIdentityImg(address);
print(recoveryPage({
address,
identity,
logo: parityLogo,
name,
phrase
}));
}
}
function mapStateToProps (state) {
const { hasAccounts } = state.personal;
return {
hasAccounts
};
}
function mapDispatchToProps (dispatch) {
return bindActionCreators({
newError
}, dispatch);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(FirstRun);

34
js/src/FirstRun/firstRun.spec.js
View File

@@ -23,44 +23,14 @@ import FirstRun from './';
let component;
let onClose;
function createApi () {
return {};
}
function createRedux () {
return {
dispatch: sinon.stub(),
subscribe: sinon.stub(),
getState: () => {
return {
personal: {
hasAccounts: false
},
nodeStatus: {
isTest: false
}
};
}
};
}
function render (props = { visible: true }) {
onClose = sinon.stub();
component = shallow(
<FirstRun
{ ...props }
onClose={ onClose }
/>,
{
context: {
store: createRedux()
}
}
).find('FirstRun').shallow({
context: {
api: createApi()
}
});
/>
);
return component;
}

42
js/src/FirstRun/store.js Normal file
View File

@@ -0,0 +1,42 @@
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import { action, observable } from 'mobx';
import store from 'store';
const LS_FIRST_RUN_KEY = '_parity::showFirstRun';
export default class Store {
@observable visible = false;
constructor (api) {
this.toggle(store.get(LS_FIRST_RUN_KEY) !== false);
}
@action close = () => {
this.toggle(false);
}
@action toggle = (visible = false) => {
this.visible = visible;
// There's no need to write to storage that the
// First Run should be visible
if (!visible) {
store.set(LS_FIRST_RUN_KEY, !!visible);
}
}
}