Skip to content
Permalink
Browse files

[DDW-893] Wallet Settings page UI and logic

  • Loading branch information...
daniloprates committed Sep 11, 2019
1 parent f15b3d5 commit 76e88922263bb627554926d96e7987934c1419cf
@@ -6,6 +6,7 @@ export type GeneratePaperWalletParams = {
isMainnet: boolean,
buildLabel: string,
timestamp: string,
createdAt: Date,
messages: {
walletAddressLabel: string,
recoveryPhraseLabel: string,
@@ -1035,6 +1035,7 @@ const _createWalletFromServerData = action(
hasSpendingPassword,
spendingPasswordLastUpdate,
syncState,
createdAt,
} = data;

return new Wallet({
@@ -1046,6 +1047,7 @@ const _createWalletFromServerData = action(
passwordUpdateDate: new Date(`${spendingPasswordLastUpdate}Z`),
syncState,
isLegacy: false,
createdAt,
});
}
);
@@ -2,6 +2,7 @@
import React, { Component } from 'react';
import type { Node } from 'react';
import { observer } from 'mobx-react';
import { capitalize } from 'lodash';
import classnames from 'classnames';
import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
import moment from 'moment';
@@ -18,47 +19,72 @@ import WalletRecoveryPhraseStep1Dialog from './WalletRecoveryPhraseStep1Dialog';
import WalletRecoveryPhraseStep2Dialog from './WalletRecoveryPhraseStep2Dialog';

export const messages = defineMessages({
mnemonicsValidationTitle: {
id: 'wallet.settings.mnemonicsValidationTitle',
recoveryPhraseValidationTitle: {
id: 'wallet.settings.recoveryPhraseValidationTitle',
defaultMessage: '!!!Do you have your wallet recovery phrase?',
description: 'Label for the mnemonicsValidationTitle on wallet settings.',
description:
'Label for the recoveryPhraseValidationTitle on wallet settings.',
},
mnemonicsValidationDescription: {
id: 'wallet.settings.mnemonicsValidationDescription',
recoveryPhraseValidationDescription: {
id: 'wallet.settings.recoveryPhraseValidationDescription',
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.',
'Label for the recoveryPhraseValidationDescription on wallet settings.',
},
recoveryPhraseValidationNeverOk: {
id: 'wallet.settings.recoveryPhraseValidationNeverOk',
defaultMessage:
'!!!We recommend that you verify your wallet recovery phrase in <b>{timeUntilWarning}</b>',
description:
'Label for the recoveryPhraseValidationNeverOk on wallet settings.',
},
recoveryPhraseValidationNeverWarning: {
id: 'wallet.settings.recoveryPhraseValidationNeverWarning',
defaultMessage:
'!!!We recommend that you verify your wallet recovery phrase in <b>{timeUntilNotification}</b>.',
description:
'Label for the recoveryPhraseValidationNeverWarning on wallet settings.',
},
recoveryPhraseValidationNeverNotification: {
id: 'wallet.settings.recoveryPhraseValidationNeverNotification',
defaultMessage:
'!!!We recommend that you verify your wallet recovery phrase.',
description:
'Label for the recoveryPhraseValidationNeverNotification on wallet settings.',
},
mnemonicsValidationConfirmed: {
id: 'wallet.settings.mnemonicsValidationConfirmed',
recoveryPhraseValidationCheckedOk: {
id: 'wallet.settings.recoveryPhraseValidationCheckedOk',
defaultMessage:
'!!!You confirmed that you still have recovery phrase for this wallet <b>{timeAgo}</b>.',
'!!!You verified the recovery phrase for this wallet <b>{timeAgo}</b>.',
description:
'Label for the mnemonicsValidationConfirmed on wallet settings.',
'Label for the recoveryPhraseValidationCheckedOk on wallet settings.',
},
mnemonicsValidationNotConfirmed: {
id: 'wallet.settings.mnemonicsValidationNotConfirmed',
recoveryPhraseValidationCheckedWarning: {
id: 'wallet.settings.recoveryPhraseValidationCheckedWarning',
defaultMessage:
'!!!You never confirmed that you still have recovery phrase for this wallet.',
'!!!You verified the recovery phrase for this wallet <b>{timeAgo}</b>.',
description:
'Label for the mnemonicsValidationNotConfirmed on wallet settings.',
'Label for the recoveryPhraseValidationCheckedWarning on wallet settings.',
},
mnemonicsValidationNotification: {
id: 'wallet.settings.mnemonicsValidationNotification',
defaultMessage: '!!!We recommend that you check your recovery phrase.',
recoveryPhraseValidationCheckedNotification: {
id: 'wallet.settings.recoveryPhraseValidationCheckedNotification',
defaultMessage:
'!!!You verified the recovery phrase for this wallet <b>{timeAgo}</b>. We recommend that you verify your wallet recovery phrase again.',
description:
'Label for the mnemonicsValidationNotConfirmed on wallet settings.',
'Label for the recoveryPhraseValidationCheckedNotification on wallet settings.',
},
mnemonicsValidationButton: {
id: 'wallet.settings.mnemonicsValidationButton',
recoveryPhraseValidationButton: {
id: 'wallet.settings.recoveryPhraseValidationButton',
defaultMessage: '!!!Confirm mnemonics.',
description: 'Label for the mnemonicsValidationButton on wallet settings.',
description:
'Label for the recoveryPhraseValidationButton on wallet settings.',
},
});

type Props = {
mnemonicsConfirmationDate: Date,
walletCreationDate: Date,
openDialogAction: Function,
isDialogOpen: Function,
walletRecoveryPhraseStep1Container: Node,
@@ -73,77 +99,116 @@ export default class WalletRecoveryPhrase extends Component<Props> {

get statuses() {
return {
ok: {
icon: iconMnemonicsOk,
message: messages.mnemonicsValidationConfirmed,
},
warning: {
icon: iconMnemonicsWarning,
message: messages.mnemonicsValidationConfirmed,
neverChecked: {
ok: {
icon: iconMnemonicsOk,
message: messages.recoveryPhraseValidationNeverOk,
},
warning: {
icon: iconMnemonicsWarning,
message: messages.recoveryPhraseValidationNeverWarning,
},
notification: {
icon: iconMnemonicsNotification,
message: messages.recoveryPhraseValidationNeverNotification,
},
},
notification: {
icon: iconMnemonicsNotification,
message: messages.mnemonicsValidationNotification,
alreadyChecked: {
ok: {
icon: iconMnemonicsOk,
message: messages.recoveryPhraseValidationCheckedOk,
},
warning: {
icon: iconMnemonicsWarning,
message: messages.recoveryPhraseValidationCheckedWarning,
},
notification: {
icon: iconMnemonicsNotification,
message: messages.recoveryPhraseValidationCheckedNotification,
},
},
};
}

get recoveryPhraseStatus() {
const { mnemonicsConfirmationDate } = this.props;
const daysSinceLastCheck = moment().diff(
moment(mnemonicsConfirmationDate),
'days'
);
const { mnemonicsConfirmationDate, walletCreationDate } = this.props;
console.log('mnemonicsConfirmationDate 1', mnemonicsConfirmationDate);
const dateToCheck = mnemonicsConfirmationDate || walletCreationDate;
const daysSinceDate = moment().diff(moment(dateToCheck), 'days');
let status = 'ok';
if (daysSinceLastCheck > MNEMONICS_CHECKING_NOTIFICATION)
if (daysSinceDate > MNEMONICS_CHECKING_NOTIFICATION)
status = 'notification';
else if (daysSinceLastCheck > MNEMONICS_CHECKING_WARNING)
status = 'warning';
const { icon, message } = this.statuses[status];

else if (daysSinceDate > MNEMONICS_CHECKING_WARNING) status = 'warning';
const type = mnemonicsConfirmationDate ? 'alreadyChecked' : 'neverChecked';
console.log('2');
const statuses = this.statuses[type];
const { icon, message } = statuses[status];
const timeAgo = moment(mnemonicsConfirmationDate).fromNow();
console.log('3');
const timeUntilWarning = 'few months, more or less';
const timeUntilNotification = 'couple of days, more or less';
return {
icon,
message,
type,
status,
timeAgo,
timeUntilWarning,
timeUntilNotification,
};
}

render() {
const { intl } = this.context;
const {
mnemonicsConfirmationDate,
openDialogAction,
isDialogOpen,
walletRecoveryPhraseStep1Container,
walletRecoveryPhraseStep2Container,
} = this.props;
const { icon, message } = this.recoveryPhraseStatus;
const {
icon,
message,
status,
timeAgo,
timeUntilWarning,
timeUntilNotification,
} = this.recoveryPhraseStatus;

const validationStatusStyles = classnames([
styles.validationStatus,
styles[`validationStatus${capitalize(status)}`],
]);

return (
<div className={styles.component}>
<h2>
{intl.formatMessage(messages.mnemonicsValidationTitle)}
<SVGInline svg={icon} className={styles.mnemonicsValidationIcon} />
</h2>
<h2>{intl.formatMessage(messages.recoveryPhraseValidationTitle)}</h2>
<div className={styles.description}>
{intl.formatMessage(messages.mnemonicsValidationDescription)}
{intl.formatMessage(messages.recoveryPhraseValidationDescription)}
</div>
<br />
<FormattedHTMLMessage
{...message}
values={{
timeAgo: moment(mnemonicsConfirmationDate).fromNow(),
}}
/>
<button
className={styles.mnemonicsValidationButton}
onClick={() => {
openDialogAction({
dialog: WalletRecoveryPhraseStep1Dialog,
});
}}
>
{intl.formatMessage(messages.mnemonicsValidationButton)}
</button>
<div className={validationStatusStyles}>
<SVGInline svg={icon} className={styles.validationStatusIcon} />
<FormattedHTMLMessage
{...message}
className={styles.validationStatusMessage}
values={{
timeAgo,
timeUntilWarning,
timeUntilNotification,
}}
/>
<button
className={styles.validationStatusButton}
onClick={() => {
openDialogAction({
dialog: WalletRecoveryPhraseStep1Dialog,
});
}}
>
{intl.formatMessage(messages.recoveryPhraseValidationButton)}
</button>
</div>

{isDialogOpen(WalletRecoveryPhraseStep1Dialog)
? walletRecoveryPhraseStep1Container
@@ -1,5 +1,7 @@
.component {
color: #5e6066;
font-family: var(--font-light);
line-height: 1.38;
margin-bottom: 14px;

h2 {
@@ -13,34 +15,54 @@
font-family: var(--font-medium);
line-height: 1.38;
}
.mnemonicsValidationIcon {
margin-left: 6px;
vertical-align: middle;

.validationStatus {
align-items: center;
border-radius: 4px;
display: flex;
font-style: italic;
padding: 10px;
}
.validationStatusIcon {
margin-right: 25px;
svg {
height: 14px;
width: 14px;
height: 28px;
width: 28px;
}
}
.mnemonicsValidationButton {
background-color: rgba(68, 91, 124, 0.05);
border-radius: 5px;
.validationStatusMessage {
background: pink;
color: #5e6066;
}
.validationStatusButton {
border-radius: 5px;
color: #fafbfc;
cursor: pointer;
display: block;
font-size: 14px;
font-weight: 500;
height: 36px;
line-height: 1.36;
margin: 30px auto 0;
margin-left: 25px;
padding: 0 27px;
white-space: nowrap;
}

.tooltipClassname {
display: inline-block;
.validationStatusOk {
background: rgba(0, 128, 0, 0.1);
.validationStatusButton {
background-color: green;
}
}

.tooltipOk {
// background: green;
// ba
.validationStatusWarning {
background: rgba(228, 225, 4, 0.1);
.validationStatusButton {
background-color: #d2a80e;
}
}
.validationStatusNotification {
background-color: rgba(234, 76, 91, 0.1);
.validationStatusButton {
background-color: #ea4c5b;
}
}
}

0 comments on commit 76e8892

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