Skip to content
Permalink
Browse files

Merge 0496802 into 184fdc8

  • Loading branch information...
daniloprates committed Sep 11, 2019
2 parents 184fdc8 + 0496802 commit 99d0d9f95028ea3c0027db92fee31330b003c4e2
Showing with 1,929 additions and 109 deletions.
  1. +1 −0 CHANGELOG.md
  2. +1 −0 source/common/types/paper-wallet-request.types.js
  3. +2 −0 source/renderer/app/api/api.js
  4. +3 −0 source/renderer/app/assets/images/mnemonics-verification-notification.inline.svg
  5. +3 −0 source/renderer/app/assets/images/mnemonics-verification-ok.inline.svg
  6. +3 −0 source/renderer/app/assets/images/mnemonics-verification-warning.inline.svg
  7. +234 −0 source/renderer/app/components/wallet/settings/WalletRecoveryPhrase.js
  8. +68 −0 source/renderer/app/components/wallet/settings/WalletRecoveryPhrase.scss
  9. +3 −0 source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStep1.scss
  10. +101 −0 source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStep1Dialog.js
  11. +102 −0 source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStep2Dialog.js
  12. +98 −0 source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStep3Dialog.js
  13. +72 −0 source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStep4Dialog.js
  14. +23 −0 source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStepDialogs.scss
  15. +32 −0 source/renderer/app/components/wallet/settings/WalletSettings.js
  16. +5 −0 source/renderer/app/config/walletsConfig.js
  17. +52 −7 source/renderer/app/containers/wallet/WalletSettingsPage.js
  18. +35 −0 source/renderer/app/containers/wallet/dialogs/settings/WalletRecoveryPhraseStep1Container.js
  19. +39 −0 source/renderer/app/containers/wallet/dialogs/settings/WalletRecoveryPhraseStep2Container.js
  20. +25 −0 source/renderer/app/containers/wallet/dialogs/settings/WalletRecoveryPhraseStep3Container.js
  21. +35 −0 source/renderer/app/containers/wallet/dialogs/settings/WalletRecoveryPhraseStep4Container.js
  22. +3 −0 source/renderer/app/domains/Wallet.js
  23. +25 −0 source/renderer/app/i18n/locales/de-DE.json
  24. +387 −12 source/renderer/app/i18n/locales/defaultMessages.json
  25. +25 −0 source/renderer/app/i18n/locales/en-US.json
  26. +25 −0 source/renderer/app/i18n/locales/hr-HR.json
  27. +25 −0 source/renderer/app/i18n/locales/ja-JP.json
  28. +25 −0 source/renderer/app/i18n/locales/ko-KR.json
  29. +25 −0 source/renderer/app/i18n/locales/zh-CN.json
  30. +203 −0 source/renderer/app/utils/walletLocalStorage.js
  31. +240 −90 storybook/stories/WalletScreens-Settings.stories.js
  32. +8 −0 storybook/stories/support/StoryProvider.js
  33. +1 −0 storybook/stories/support/utils.js
@@ -5,6 +5,7 @@ Changelog

### Features

- Implemented Wallet mnemonics checker ([PR 1565](https://github.com/input-output-hk/daedalus/pull/1565))
- Removed select dropdown arrow ([PR 1550](https://github.com/input-output-hk/daedalus/pull/1550))
- Implemented automated and manual update flows unification ([PR 1491](https://github.com/input-output-hk/daedalus/pull/1491))
- Updated behavior of system dialogs ([PR 1494](https://github.com/input-output-hk/daedalus/pull/1494))
@@ -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,
});
}
);
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">
<path fill="red" fill-rule="evenodd" d="M14 28C6.268 28 0 21.732 0 14S6.268 0 14 0s14 6.268 14 14-6.268 14-14 14zm-2.121-14l-3.94 3.94 2.122 2.12L14 16.122l3.94 3.94 2.12-2.122L16.122 14l3.94-3.94-2.122-2.12L14 11.878l-3.94-3.94-2.12 2.122L11.878 14z" opacity=".9"/>
</svg>
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">
<path fill="green" fill-rule="evenodd" d="M14 28C6.268 28 0 21.732 0 14S6.268 0 14 0s14 6.268 14 14-6.268 14-14 14zm-2-12.121l-3.94-3.94-2.12 2.122L12 20.12l10.06-10.06-2.12-2.122L12 15.88z" opacity=".9"/>
</svg>
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">
<path fill="#ecde00" fill-rule="evenodd" d="M14 28C6.268 28 0 21.732 0 14S6.268 0 14 0s14 6.268 14 14-6.268 14-14 14zm0-10a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" opacity=".9"/>
</svg>
@@ -0,0 +1,234 @@
// @flow
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';
import SVGInline from 'react-svg-inline';
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 './WalletRecoveryPhrase.scss';
import {
MNEMONICS_CHECKING_WARNING,
MNEMONICS_CHECKING_NOTIFICATION,
} from '../../../config/walletsConfig';
import WalletRecoveryPhraseStep1Dialog from './WalletRecoveryPhraseStep1Dialog';
import WalletRecoveryPhraseStep2Dialog from './WalletRecoveryPhraseStep2Dialog';
import WalletRecoveryPhraseStep3Dialog from './WalletRecoveryPhraseStep3Dialog';
import WalletRecoveryPhraseStep4Dialog from './WalletRecoveryPhraseStep4Dialog';

export const messages = defineMessages({
recoveryPhraseValidationTitle: {
id: 'wallet.settings.recoveryPhraseValidationTitle',
defaultMessage: '!!!Do you have your wallet recovery phrase?',
description:
'Label for the recoveryPhraseValidationTitle on wallet settings.',
},
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 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.',
},
recoveryPhraseValidationCheckedOk: {
id: 'wallet.settings.recoveryPhraseValidationCheckedOk',
defaultMessage:
'!!!You verified the recovery phrase for this wallet <b>{timeAgo}</b>.',
description:
'Label for the recoveryPhraseValidationCheckedOk on wallet settings.',
},
recoveryPhraseValidationCheckedWarning: {
id: 'wallet.settings.recoveryPhraseValidationCheckedWarning',
defaultMessage:
'!!!You verified the recovery phrase for this wallet <b>{timeAgo}</b>.',
description:
'Label for the recoveryPhraseValidationCheckedWarning on wallet settings.',
},
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 recoveryPhraseValidationCheckedNotification on wallet settings.',
},
recoveryPhraseValidationButton: {
id: 'wallet.settings.recoveryPhraseValidationButton',
defaultMessage: '!!!Confirm mnemonics.',
description:
'Label for the recoveryPhraseValidationButton on wallet settings.',
},
});

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

@observer
export default class WalletRecoveryPhrase extends Component<Props> {
static contextTypes = {
intl: intlShape.isRequired,
};

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

get recoveryPhraseStatus() {
const { mnemonicsConfirmationDate, walletCreationDate } = this.props;
const dateToCheck = mnemonicsConfirmationDate || walletCreationDate;
const daysSinceDate = moment().diff(moment(dateToCheck), 'days');
let status = 'ok';
if (daysSinceDate > MNEMONICS_CHECKING_NOTIFICATION)
status = 'notification';
else if (daysSinceDate > MNEMONICS_CHECKING_WARNING) status = 'warning';
const type = mnemonicsConfirmationDate ? 'alreadyChecked' : 'neverChecked';
const statuses = this.statuses[type];
const { icon, message } = statuses[status];
const timeAgo = moment(mnemonicsConfirmationDate).fromNow();
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 {
openDialogAction,
isDialogOpen,
walletRecoveryPhraseStep1Container,
walletRecoveryPhraseStep2Container,
walletRecoveryPhraseStep3Container,
walletRecoveryPhraseStep4Container,
} = this.props;
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.recoveryPhraseValidationTitle)}</h2>
<div className={styles.description}>
{intl.formatMessage(messages.recoveryPhraseValidationDescription)}
</div>
<br />
<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
: false}

{isDialogOpen(WalletRecoveryPhraseStep2Dialog)
? walletRecoveryPhraseStep2Container
: false}

{isDialogOpen(WalletRecoveryPhraseStep3Dialog)
? walletRecoveryPhraseStep3Container
: false}

{isDialogOpen(WalletRecoveryPhraseStep4Dialog)
? walletRecoveryPhraseStep4Container
: false}
</div>
);
}
}
@@ -0,0 +1,68 @@
.component {
color: #5e6066;
font-family: var(--font-light);
line-height: 1.38;
margin-bottom: 14px;

h2 {
color: var(--theme-input-label-color);
font-family: var(--font-medium);
line-height: 1.38;
margin-bottom: 14px;
}
b {
color: var(--theme-input-label-color);
font-family: var(--font-medium);
line-height: 1.38;
}

.validationStatus {
align-items: center;
border-radius: 4px;
display: flex;
font-style: italic;
padding: 10px;
}
.validationStatusIcon {
margin-right: 25px;
svg {
height: 28px;
width: 28px;
}
}
.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-left: 25px;
padding: 0 27px;
white-space: nowrap;
}
.validationStatusOk {
background: rgba(0, 128, 0, 0.1);
.validationStatusButton {
background-color: green;
}
}
.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,0 +1,3 @@
.component {
background: red;
}

0 comments on commit 99d0d9f

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