Skip to content
Permalink
Browse files

[DDW-893] UI - progress

  • Loading branch information...
daniloprates committed Sep 11, 2019
1 parent 2246b2d commit f15b3d5d74e723c0be6b0c4e9c20e1c5f17b1d35
@@ -1,20 +1,21 @@
// @flow
import React, { Component } from 'react';
import type { Node } from 'react';
import { observer } from 'mobx-react';
import classnames from 'classnames';
import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
import moment from 'moment';
import SVGInline from 'react-svg-inline';
import { Tooltip } from 'react-polymorph/lib/components/Tooltip';
import { TooltipSkin } from 'react-polymorph/lib/skins/simple/TooltipSkin';
import iconMnemonicsOk from '../../../assets/images/mnemonics-verification-ok.inline.svg';
import iconMnemonicsWarning from '../../../assets/images/mnemonics-verification-warning.inline.svg';
import iconMnemonicsNotification from '../../../assets/images/mnemonics-verification-notification.inline.svg';
import styles from './WalletSettingsRecoveryPhrase.scss';
import styles from './WalletRecoveryPhrase.scss';
import {
MNEMONICS_CHECKING_WARNING,
MNEMONICS_CHECKING_NOTIFICATION,
} from '../../../config/walletsConfig';
import WalletRecoveryPhraseStep1Dialog from './WalletRecoveryPhraseStep1Dialog';
import WalletRecoveryPhraseStep2Dialog from './WalletRecoveryPhraseStep2Dialog';

export const messages = defineMessages({
mnemonicsValidationTitle: {
@@ -25,7 +26,7 @@ export const messages = defineMessages({
mnemonicsValidationDescription: {
id: 'wallet.settings.mnemonicsValidationDescription',
defaultMessage:
'!!!Funds in this wallet can only be recovered on another computer using a wallet recovery phrase. You can re-enter your wallet recovery phrase to confirm that you have the correct recovery phrase for this wallet.',
'!!!Funds in this wallet can only be recovered on another computer using the correct wallet recovery phrase. You can re-enter your wallet recovery phrase to verify that you have the correct recovery phrase for this wallet.',
description:
'Label for the mnemonicsValidationDescription on wallet settings.',
},
@@ -58,10 +59,14 @@ export const messages = defineMessages({

type Props = {
mnemonicsConfirmationDate: Date,
openDialogAction: Function,
isDialogOpen: Function,
walletRecoveryPhraseStep1Container: Node,
walletRecoveryPhraseStep2Container: Node,
};

@observer
export default class WalletSettingsRecoveryPhrase extends Component<Props> {
export default class WalletRecoveryPhrase extends Component<Props> {
static contextTypes = {
intl: intlShape.isRequired,
};
@@ -71,20 +76,14 @@ export default class WalletSettingsRecoveryPhrase extends Component<Props> {
ok: {
icon: iconMnemonicsOk,
message: messages.mnemonicsValidationConfirmed,
tooltip: messages.mnemonicsValidationConfirmed,
tooltipClassname: styles.tooltipOk,
},
warning: {
icon: iconMnemonicsWarning,
message: messages.mnemonicsValidationConfirmed,
tooltip: messages.mnemonicsValidationConfirmed,
tooltipClassname: styles.tooltipWarning,
},
notification: {
icon: iconMnemonicsNotification,
message: messages.mnemonicsValidationNotification,
tooltip: messages.mnemonicsValidationNotification,
tooltipClassname: styles.tooltipNotification,
},
};
}
@@ -100,43 +99,30 @@ export default class WalletSettingsRecoveryPhrase extends Component<Props> {
status = 'notification';
else if (daysSinceLastCheck > MNEMONICS_CHECKING_WARNING)
status = 'warning';
const { icon, message, tooltip, tooltipClassname } = this.statuses[status];

const tooltipClassnameStyles = classnames([
tooltipClassname,
styles.tooltipClassname,
]);
const { icon, message } = this.statuses[status];

return {
icon,
message,
tooltip,
tooltipClassname: tooltipClassnameStyles,
};
}

render() {
const { intl } = this.context;
const { mnemonicsConfirmationDate } = this.props;
const {
icon,
message,
tooltip,
tooltipClassname,
} = this.recoveryPhraseStatus;
mnemonicsConfirmationDate,
openDialogAction,
isDialogOpen,
walletRecoveryPhraseStep1Container,
walletRecoveryPhraseStep2Container,
} = this.props;
const { icon, message } = this.recoveryPhraseStatus;

return (
<div className={styles.component}>
<h2>
{intl.formatMessage(messages.mnemonicsValidationTitle)}
<Tooltip
skin={TooltipSkin}
themeOverrides1="{tooltipStyles}"
tip={intl.formatMessage(tooltip)}
className={tooltipClassname}
>
<SVGInline svg={icon} className={styles.mnemonicsValidationIcon} />
</Tooltip>
<SVGInline svg={icon} className={styles.mnemonicsValidationIcon} />
</h2>
<div className={styles.description}>
{intl.formatMessage(messages.mnemonicsValidationDescription)}
@@ -148,9 +134,24 @@ export default class WalletSettingsRecoveryPhrase extends Component<Props> {
timeAgo: moment(mnemonicsConfirmationDate).fromNow(),
}}
/>
<button className={styles.mnemonicsValidationButton} onClick={() => {}}>
<button
className={styles.mnemonicsValidationButton}
onClick={() => {
openDialogAction({
dialog: WalletRecoveryPhraseStep1Dialog,
});
}}
>
{intl.formatMessage(messages.mnemonicsValidationButton)}
</button>

{isDialogOpen(WalletRecoveryPhraseStep1Dialog)
? walletRecoveryPhraseStep1Container
: false}

{isDialogOpen(WalletRecoveryPhraseStep2Dialog)
? walletRecoveryPhraseStep2Container
: false}
</div>
);
}
@@ -0,0 +1,3 @@
.component {
background: red;
}
@@ -0,0 +1,93 @@
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
import DialogCloseButton from '../../widgets/DialogCloseButton';
import Dialog from '../../widgets/Dialog';
import styles from './WalletRecoveryPhraseStep1Dialog.scss';

export const messages = defineMessages({
mnemonicsValidationTitle: {
id: 'wallet.settings.mnemonicsValidationTitle',
defaultMessage: '!!!Do you have your wallet recovery phrase?',
description: 'Label for the mnemonicsValidationTitle on wallet settings.',
},
mnemonicsValidationDescription: {
id: 'wallet.settings.mnemonicsValidationDescription',
defaultMessage:
'!!!Funds in this wallet can only be recovered on another computer using the correct wallet recovery phrase. You can re-enter your wallet recovery phrase to verify that you have the correct recovery phrase for this wallet.',
description:
'Label for the mnemonicsValidationDescription on wallet settings.',
},
mnemonicsValidationConfirmed: {
id: 'wallet.settings.mnemonicsValidationConfirmed',
defaultMessage:
'!!!You confirmed that you still have recovery phrase for this wallet <b>{timeAgo}</b>.',
description:
'Label for the mnemonicsValidationConfirmed on wallet settings.',
},
mnemonicsValidationNotConfirmed: {
id: 'wallet.settings.mnemonicsValidationNotConfirmed',
defaultMessage:
'!!!You never confirmed that you still have recovery phrase for this wallet.',
description:
'Label for the mnemonicsValidationNotConfirmed on wallet settings.',
},
mnemonicsValidationNotification: {
id: 'wallet.settings.mnemonicsValidationNotification',
defaultMessage: '!!!We recommend that you check your recovery phrase.',
description:
'Label for the mnemonicsValidationNotConfirmed on wallet settings.',
},
mnemonicsValidationButton: {
id: 'wallet.settings.mnemonicsValidationButton',
defaultMessage: '!!!Confirm mnemonics.',
description: 'Label for the mnemonicsValidationButton on wallet settings.',
},
});

type Props = {
mnemonicsConfirmationDate: Date,
};

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

const actions = [
{
className: isSubmitting ? styles.isSubmitting : null,
label: 'hey there',
primary: true,
onClick: this.submit,
},
];

return (
<Dialog
className={styles.dialog}
title="Wallet recovery phrase verification"
actions={actions}
closeOnOverlayClick
onClose={() => {}}
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.
</p>
</Dialog>
);
}
}
@@ -0,0 +1,5 @@
.dialog {
// background: red;
// height: 100%;
// width: 100%;
}
@@ -0,0 +1,85 @@
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
import DialogCloseButton from '../../widgets/DialogCloseButton';
import Dialog from '../../widgets/Dialog';
import styles from './WalletRecoveryPhraseStep1.scss';

export const messages = defineMessages({
mnemonicsValidationTitle: {
id: 'wallet.settings.mnemonicsValidationTitle',
defaultMessage: '!!!Do you have your wallet recovery phrase?',
description: 'Label for the mnemonicsValidationTitle on wallet settings.',
},
mnemonicsValidationDescription: {
id: 'wallet.settings.mnemonicsValidationDescription',
defaultMessage:
'!!!Funds in this wallet can only be recovered on another computer using the correct wallet recovery phrase. You can re-enter your wallet recovery phrase to verify that you have the correct recovery phrase for this wallet.',
description:
'Label for the mnemonicsValidationDescription on wallet settings.',
},
mnemonicsValidationConfirmed: {
id: 'wallet.settings.mnemonicsValidationConfirmed',
defaultMessage:
'!!!You confirmed that you still have recovery phrase for this wallet <b>{timeAgo}</b>.',
description:
'Label for the mnemonicsValidationConfirmed on wallet settings.',
},
mnemonicsValidationNotConfirmed: {
id: 'wallet.settings.mnemonicsValidationNotConfirmed',
defaultMessage:
'!!!You never confirmed that you still have recovery phrase for this wallet.',
description:
'Label for the mnemonicsValidationNotConfirmed on wallet settings.',
},
mnemonicsValidationNotification: {
id: 'wallet.settings.mnemonicsValidationNotification',
defaultMessage: '!!!We recommend that you check your recovery phrase.',
description:
'Label for the mnemonicsValidationNotConfirmed on wallet settings.',
},
mnemonicsValidationButton: {
id: 'wallet.settings.mnemonicsValidationButton',
defaultMessage: '!!!Confirm mnemonics.',
description: 'Label for the mnemonicsValidationButton on wallet settings.',
},
});

type Props = {
mnemonicsConfirmationDate: Date,
};

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

const actions = [
{
className: isSubmitting ? styles.isSubmitting : null,
label: intl.formatMessage(messages.exportButtonLabel),
primary: true,
onClick: this.submit,
},
];

return (
<Dialog
className={styles.component}
title={intl.formatMessage(messages.mnemonicsValidationTitle)}
actions={actions}
closeOnOverlayClick
onClose={() => {}}
closeButton={<DialogCloseButton />}
>
WalletRecoveryPhraseStep1
</Dialog>
);
}
}
@@ -16,7 +16,7 @@ import type { ReactIntlMessage } from '../../../types/i18nTypes';
import ChangeSpendingPasswordDialog from './ChangeSpendingPasswordDialog';
import globalMessages from '../../../i18n/global-messages';
import styles from './WalletSettings.scss';
import WalletSettingsRecoveryPhrase from './WalletSettingsRecoveryPhrase';
import WalletRecoveryPhrase from './WalletRecoveryPhrase';

export const messages = defineMessages({
name: {
@@ -74,6 +74,8 @@ type Props = {
changeSpendingPasswordDialog: Node,
deleteWalletDialogContainer: Node,
exportWalletDialogContainer: Node,
walletRecoveryPhraseStep1Container: Node,
walletRecoveryPhraseStep2Container: Node,
mnemonicsConfirmationDate: Date,
};

@@ -117,6 +119,8 @@ export default class WalletSettings extends Component<Props> {
deleteWalletDialogContainer,
exportWalletDialogContainer,
mnemonicsConfirmationDate,
walletRecoveryPhraseStep1Container,
walletRecoveryPhraseStep2Container,
} = this.props;

const assuranceLevelOptions = assuranceLevels.map(assurance => ({
@@ -176,8 +180,16 @@ export default class WalletSettings extends Component<Props> {
}
/>

<WalletSettingsRecoveryPhrase
<WalletRecoveryPhrase
mnemonicsConfirmationDate={mnemonicsConfirmationDate}
openDialogAction={openDialogAction}
isDialogOpen={isDialogOpen}
walletRecoveryPhraseStep1Container={
walletRecoveryPhraseStep1Container
}
walletRecoveryPhraseStep2Container={
walletRecoveryPhraseStep2Container
}
/>

{error && <p className={styles.error}>{intl.formatMessage(error)}</p>}

0 comments on commit f15b3d5

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