Skip to content
Permalink
Browse files

[DDW-893] Dialogs - containers and buttons

  • Loading branch information...
daniloprates committed Sep 11, 2019
1 parent fd8b7fa commit 2af4c76104696b318cd3dd951ba087cb71c2396b
@@ -17,6 +17,8 @@ import {
} from '../../../config/walletsConfig';
import WalletRecoveryPhraseStep1Dialog from './WalletRecoveryPhraseStep1Dialog';
import WalletRecoveryPhraseStep2Dialog from './WalletRecoveryPhraseStep2Dialog';
import WalletRecoveryPhraseStep3Dialog from './WalletRecoveryPhraseStep3Dialog';
import WalletRecoveryPhraseStep4Dialog from './WalletRecoveryPhraseStep4Dialog';

export const messages = defineMessages({
recoveryPhraseValidationTitle: {
@@ -89,6 +91,8 @@ type Props = {
isDialogOpen: Function,
walletRecoveryPhraseStep1Container: Node,
walletRecoveryPhraseStep2Container: Node,
walletRecoveryPhraseStep3Container: Node,
walletRecoveryPhraseStep4Container: Node,
};

@observer
@@ -162,6 +166,8 @@ export default class WalletRecoveryPhrase extends Component<Props> {
isDialogOpen,
walletRecoveryPhraseStep1Container,
walletRecoveryPhraseStep2Container,
walletRecoveryPhraseStep3Container,
walletRecoveryPhraseStep4Container,
} = this.props;
const {
icon,
@@ -214,6 +220,14 @@ export default class WalletRecoveryPhrase extends Component<Props> {
{isDialogOpen(WalletRecoveryPhraseStep2Dialog)
? walletRecoveryPhraseStep2Container
: false}

{isDialogOpen(WalletRecoveryPhraseStep3Dialog)
? walletRecoveryPhraseStep3Container
: false}

{isDialogOpen(WalletRecoveryPhraseStep4Dialog)
? walletRecoveryPhraseStep4Container
: false}
</div>
);
}
@@ -52,15 +52,21 @@ export default class WalletRecoveryPhraseStep1 extends Component<Props, State> {

render() {
// const { intl } = this.context;
const { onClose } = this.props;
const { onClose, onVerify } = this.props;
const { isVeryfying } = this.state;

const actions = [
{
className: isVeryfying ? styles.isVeryfying : null,
label: 'Verify',
label: 'Verify - successfuly',
primary: true,
onClick: this.submit,
onClick: () => onVerify(true),
disabled: isVeryfying,
},
{
className: isVeryfying ? styles.isVeryfying : null,
label: 'Verify - failure',
onClick: () => onVerify(false),
disabled: isVeryfying,
},
];
@@ -75,14 +81,10 @@ export default class WalletRecoveryPhraseStep1 extends Component<Props, State> {
closeButton={<DialogCloseButton />}
>
<p>
To verify that you have the correct recovery phrase for this wallet
you can enter your 12-word wallet recovery phrase on the following
screen.
</p>
<p>
Are you being watched? Please make sure that nobody can see your
screen while you are entering your wallet recovery phrase.
Please enter your 12-word wallet recovery phrase. Make sure you enter
the words in the correct order.
</p>
<h3>Recovery phrase</h3>
</Dialog>
);
}
@@ -0,0 +1,70 @@
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
// import { defineMessages, intlShape } from 'react-intl';
import DialogCloseButton from '../../widgets/DialogCloseButton';
import Dialog from '../../widgets/Dialog';
import styles from './WalletRecoveryPhraseStep1Dialog.scss';

// export const messages = defineMessages({
// recoveryPhraseStep1Title: {
// id: 'wallet.settings.recoveryPhraseStep1Title',
// defaultMessage: '!!!Wallet recovery phrase verification',
// description: 'Label for the recoveryPhraseStep1Title on wallet settings.',
// },
// recoveryPhraseStep1Paragraph1: {
// id: 'wallet.settings.recoveryPhraseStep1Paragraph1',
// defaultMessage: '!!!To verify that you have the correct recovery phrase for this wallet you can enter your 12-word wallet recovery phrase on the following screen.',
// description: 'Label for the recoveryPhraseStep1Paragraph1 on wallet settings.',
// },
// recoveryPhraseStep1Paragraph2: {
// id: 'wallet.settings.recoveryPhraseStep1Paragraph2',
// defaultMessage: '!!!Are you being watched? Please make sure that nobody can see your screen while you are entering your wallet recovery phrase.',
// description: 'Label for the recoveryPhraseStep1Paragraph2 on wallet settings.',
// },
// });

type Props = {
onClose: Function,
};

@observer
export default class WalletRecoveryPhraseStep1 extends Component<Props> {
// static contextTypes = {
// intl: intlShape.isRequired,
// };
render() {
// const { intl } = this.context;
const { onClose } = this.props;

const actions = [
{
label: 'Continue',
primary: true,
onClick: onClose,
},
];

return (
<Dialog
className={styles.dialog}
title="verification successful"
actions={actions}
closeOnOverlayClick
onClose={onClose}
closeButton={<DialogCloseButton />}
>
<p>
You have verified the recovery phrase for this wallet. You can use it
at any time to recover the funds in this wallet on another computer,
even if using a different version of Daedalus.
</p>
<p>
Please make sure to keep the paper with your wallet recovery phrase in
a safe place. Anyone with access to your wallet recovery phrase can
take control of your funds.
</p>
</Dialog>
);
}
}
@@ -0,0 +1,74 @@
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
// import { defineMessages, intlShape } from 'react-intl';
import DialogCloseButton from '../../widgets/DialogCloseButton';
import Dialog from '../../widgets/Dialog';
import styles from './WalletRecoveryPhraseStep1Dialog.scss';

// export const messages = defineMessages({
// recoveryPhraseStep1Title: {
// id: 'wallet.settings.recoveryPhraseStep1Title',
// defaultMessage: '!!!Wallet recovery phrase verification',
// description: 'Label for the recoveryPhraseStep1Title on wallet settings.',
// },
// recoveryPhraseStep1Paragraph1: {
// id: 'wallet.settings.recoveryPhraseStep1Paragraph1',
// defaultMessage: '!!!To verify that you have the correct recovery phrase for this wallet you can enter your 12-word wallet recovery phrase on the following screen.',
// description: 'Label for the recoveryPhraseStep1Paragraph1 on wallet settings.',
// },
// recoveryPhraseStep1Paragraph2: {
// id: 'wallet.settings.recoveryPhraseStep1Paragraph2',
// defaultMessage: '!!!Are you being watched? Please make sure that nobody can see your screen while you are entering your wallet recovery phrase.',
// description: 'Label for the recoveryPhraseStep1Paragraph2 on wallet settings.',
// },
// });

type Props = {
onClose: Function,
onVerifyAgain: Function,
};

@observer
export default class WalletRecoveryPhraseStep1 extends Component<Props> {
// static contextTypes = {
// intl: intlShape.isRequired,
// };
render() {
// const { intl } = this.context;
const { onClose, onVerifyAgain } = this.props;

const actions = [
{
label: 'Verify recovery phrase again',
primary: true,
onClick: onVerifyAgain,
},
];

return (
<Dialog
className={styles.dialog}
title="verification failure"
actions={actions}
closeOnOverlayClick
onClose={onClose}
closeButton={<DialogCloseButton />}
>
<p>
The wallet recovery phrase you have entered does not match the
recovery phrase associated with this wallet. Make sure you have
entered the wallet recovery phrase which was written down during the
wallet creation process for this wallet and make sure the words are in
the correct order.
</p>
<p>
If you are unable to verify your wallet recovery phrase you should
create a new wallet and move all of the funds from this wallet to the
new wallet. If you do this, make sure you keep the wallet recovery
phrase for the new wallet safe and secure.
</p>
</Dialog>
);
}
}
@@ -77,6 +77,8 @@ type Props = {
exportWalletDialogContainer: Node,
walletRecoveryPhraseStep1Container: Node,
walletRecoveryPhraseStep2Container: Node,
walletRecoveryPhraseStep3Container: Node,
walletRecoveryPhraseStep4Container: Node,
mnemonicsConfirmationDate?: Date,
};

@@ -122,6 +124,8 @@ export default class WalletSettings extends Component<Props> {
exportWalletDialogContainer,
walletRecoveryPhraseStep1Container,
walletRecoveryPhraseStep2Container,
walletRecoveryPhraseStep3Container,
walletRecoveryPhraseStep4Container,
mnemonicsConfirmationDate,
} = this.props;

@@ -193,6 +197,12 @@ export default class WalletSettings extends Component<Props> {
walletRecoveryPhraseStep2Container={
walletRecoveryPhraseStep2Container
}
walletRecoveryPhraseStep3Container={
walletRecoveryPhraseStep3Container
}
walletRecoveryPhraseStep4Container={
walletRecoveryPhraseStep4Container
}
/>

{error && <p className={styles.error}>{intl.formatMessage(error)}</p>}
@@ -10,6 +10,8 @@ import DeleteWalletDialogContainer from './dialogs/settings/DeleteWalletDialogCo
import ExportWalletToFileDialogContainer from './dialogs/settings/ExportWalletToFileDialogContainer';
import WalletRecoveryPhraseStep1Container from './dialogs/settings/WalletRecoveryPhraseStep1Container';
import WalletRecoveryPhraseStep2Container from './dialogs/settings/WalletRecoveryPhraseStep2Container';
import WalletRecoveryPhraseStep3Container from './dialogs/settings/WalletRecoveryPhraseStep3Container';
import WalletRecoveryPhraseStep4Container from './dialogs/settings/WalletRecoveryPhraseStep4Container';

type Props = InjectedProps;

@@ -104,6 +106,12 @@ export default class WalletSettingsPage extends Component<Props, State> {
walletRecoveryPhraseStep2Container={
<WalletRecoveryPhraseStep2Container />
}
walletRecoveryPhraseStep3Container={
<WalletRecoveryPhraseStep3Container />
}
walletRecoveryPhraseStep4Container={
<WalletRecoveryPhraseStep4Container />
}
/>
);
}
@@ -1,18 +1,34 @@
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { observer, inject } from 'mobx-react';
import WalletRecoveryPhraseStep1Dialog from '../../../../components/wallet/settings/WalletRecoveryPhraseStep1Dialog';
import WalletRecoveryPhraseStep2Dialog from '../../../../components/wallet/settings/WalletRecoveryPhraseStep2Dialog';
import type { InjectedDialogContainerProps } from '../../../../types/injectedPropsType';

type Props = InjectedDialogContainerProps;

@inject('stores', 'actions')
@observer
export default class WalletRecoveryPhraseStep1Container extends Component {
handleContinue = () => {};
export default class WalletRecoveryPhraseStep1Container extends Component<Props> {
static defaultProps = {
actions: null,
stores: null,
children: null,
onClose: () => {},
};

handleContinue = () => {
this.props.actions.dialogs.open.trigger({
dialog: WalletRecoveryPhraseStep2Dialog,
});
};

render() {
// daedalus.actions.dialogs.closeActiveDialog
const { closeActiveDialog } = this.props.actions.dialogs;
return (
<WalletRecoveryPhraseStep1Dialog
onContinue={this.handleContinue}
onClose={() => {}}
onClose={closeActiveDialog.trigger}
/>
);
}
@@ -2,6 +2,8 @@
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import WalletRecoveryPhraseStep2Dialog from '../../../../components/wallet/settings/WalletRecoveryPhraseStep2Dialog';
import WalletRecoveryPhraseStep3Dialog from '../../../../components/wallet/settings/WalletRecoveryPhraseStep3Dialog';
import WalletRecoveryPhraseStep4Dialog from '../../../../components/wallet/settings/WalletRecoveryPhraseStep4Dialog';
import type { InjectedDialogContainerProps } from '../../../../types/injectedPropsType';

type Props = InjectedDialogContainerProps;
@@ -16,13 +18,22 @@ export default class WalletRecoveryPhraseStep2Container extends Component<Props>
onClose: () => {},
};

handleContinue = () => {};
handleVerify = successful => {
const dialog = successful
? WalletRecoveryPhraseStep3Dialog
: WalletRecoveryPhraseStep4Dialog;
this.props.actions.dialogs.open.trigger({
dialog,
});
};

render() {
// const { wallets, walletSettings } = this.props.stores;
// const activeWallet = wallets.active;
// const { exportWalletToFileRequest } = walletSettings;

return <WalletRecoveryPhraseStep2Dialog onContinue={this.handleContinue} />;
const { closeActiveDialog } = this.props.actions.dialogs;
return (
<WalletRecoveryPhraseStep2Dialog
onVerify={this.handleVerify}
onClose={closeActiveDialog.trigger}
/>
);
}
}
@@ -0,0 +1,25 @@
// @flow
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import WalletRecoveryPhraseStep3Dialog from '../../../../components/wallet/settings/WalletRecoveryPhraseStep3Dialog';
import type { InjectedDialogContainerProps } from '../../../../types/injectedPropsType';

type Props = InjectedDialogContainerProps;

@inject('stores', 'actions')
@observer
export default class WalletRecoveryPhraseStep2Container extends Component<Props> {
static defaultProps = {
actions: null,
stores: null,
children: null,
onClose: () => {},
};

render() {
const { closeActiveDialog } = this.props.actions.dialogs;
return (
<WalletRecoveryPhraseStep3Dialog onClose={closeActiveDialog.trigger} />
);
}
}

0 comments on commit 2af4c76

Please sign in to comment.
You can’t perform that action at this time.