View on GitHub
File Changes
  isMainnet: boolean,
  buildLabel: string,
  timestamp: string,
+
  createdAt: Date,
  messages: {
    walletAddressLabel: string,
    recoveryPhraseLabel: string,
      hasSpendingPassword,
      spendingPasswordLastUpdate,
      syncState,
+
      createdAt,
    } = data;

                      
    return new Wallet({
      passwordUpdateDate: new Date(`${spendingPasswordLastUpdate}Z`),
      syncState,
      isLegacy: false,
+
      createdAt,
    });
  }
);
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 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,

                      
  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,
.component {
+
  color: #5e6066;
  font-family: var(--font-light);
+
  line-height: 1.38;
  margin-bottom: 14px;

                      
  h2 {
    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;
+
    }
  }
}
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
-
import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
+
// 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({
-
  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.',
-
  },
-
});
+
// 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 = {
-
  mnemonicsConfirmationDate: Date,
+
  onContinue: Date,
};

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

                      
    const actions = [
      {
        className: isSubmitting ? styles.isSubmitting : null,
-
        label: 'hey there',
+
        label: 'Continue',
        primary: true,
        onClick: this.submit,
      },
        title="Wallet recovery phrase verification"
        actions={actions}
        closeOnOverlayClick
-
        onClose={() => {}}
+
        onClose={onContinue}
        closeButton={<DialogCloseButton />}
      >
        <p>
import styles from './WalletRecoveryPhraseStep1.scss';

                      
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.',
  },
-
  mnemonicsValidationConfirmed: {
-
    id: 'wallet.settings.mnemonicsValidationConfirmed',
+
  recoveryPhraseValidationConfirmed: {
+
    id: 'wallet.settings.recoveryPhraseValidationConfirmed',
    defaultMessage:
      '!!!You confirmed that you still have recovery phrase for this wallet <b>{timeAgo}</b>.',
    description:
-
      'Label for the mnemonicsValidationConfirmed on wallet settings.',
+
      'Label for the recoveryPhraseValidationConfirmed on wallet settings.',
  },
-
  mnemonicsValidationNotConfirmed: {
-
    id: 'wallet.settings.mnemonicsValidationNotConfirmed',
+
  recoveryPhraseValidationNotConfirmed: {
+
    id: 'wallet.settings.recoveryPhraseValidationNotConfirmed',
    defaultMessage:
      '!!!You never confirmed that you still have recovery phrase for this wallet.',
    description:
-
      'Label for the mnemonicsValidationNotConfirmed on wallet settings.',
+
      'Label for the recoveryPhraseValidationNotConfirmed on wallet settings.',
  },
-
  mnemonicsValidationNotification: {
-
    id: 'wallet.settings.mnemonicsValidationNotification',
+
  recoveryPhraseValidationNotification: {
+
    id: 'wallet.settings.recoveryPhraseValidationNotification',
    defaultMessage: '!!!We recommend that you check your recovery phrase.',
    description:
-
      'Label for the mnemonicsValidationNotConfirmed on wallet settings.',
+
      'Label for the recoveryPhraseValidationNotConfirmed 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.',
  },
});

                      
    return (
      <Dialog
        className={styles.component}
-
        title={intl.formatMessage(messages.mnemonicsValidationTitle)}
+
        title={intl.formatMessage(messages.recoveryPhraseValidationTitle)}
        actions={actions}
        closeOnOverlayClick
        onClose={() => {}}
type Props = {
  assuranceLevels: Array<{ value: string, label: ReactIntlMessage }>,
  walletName: string,
+
  walletCreationDate: Date,
  walletAssurance: string,
  isSpendingPasswordSet: boolean,
  spendingPasswordUpdateDate: ?Date,
  exportWalletDialogContainer: Node,
  walletRecoveryPhraseStep1Container: Node,
  walletRecoveryPhraseStep2Container: Node,
-
  mnemonicsConfirmationDate: Date,
+
  mnemonicsConfirmationDate?: Date,
};

                      
@observer
      assuranceLevels,
      walletAssurance,
      walletName,
+
      walletCreationDate,
      isSpendingPasswordSet,
      spendingPasswordUpdateDate,
      error,
      changeSpendingPasswordDialog,
      deleteWalletDialogContainer,
      exportWalletDialogContainer,
-
      mnemonicsConfirmationDate,
      walletRecoveryPhraseStep1Container,
      walletRecoveryPhraseStep2Container,
+
      mnemonicsConfirmationDate,
    } = this.props;

                      
    const assuranceLevelOptions = assuranceLevels.map(assurance => ({

                      
          <WalletRecoveryPhrase
            mnemonicsConfirmationDate={mnemonicsConfirmationDate}
+
            walletCreationDate={walletCreationDate}
            openDialogAction={openDialogAction}
            isDialogOpen={isDialogOpen}
            walletRecoveryPhraseStep1Container={
import WalletSettings from '../../components/wallet/settings/WalletSettings';
import type { InjectedProps } from '../../types/injectedPropsType';
import { isValidWalletName } from '../../utils/validations';
+
import { getWalletLocalData } from '../../utils/walletLocalStorage.js';
import ChangeSpendingPasswordDialogContainer from './dialogs/settings/ChangeSpendingPasswordDialogContainer';
import DeleteWalletDialogContainer from './dialogs/settings/DeleteWalletDialogContainer';
import ExportWalletToFileDialogContainer from './dialogs/settings/ExportWalletToFileDialogContainer';

                      
type Props = InjectedProps;

                      
+
type State = {
+
  mnemonicsConfirmationDate?: Date,
+
};
+

                      
@inject('stores', 'actions')
@observer
-
export default class WalletSettingsPage extends Component<Props> {
+
export default class WalletSettingsPage extends Component<Props, State> {
  static defaultProps = { actions: null, stores: null };

                      
+
  state = {
+
    mnemonicsConfirmationDate: null,
+
  };
+

                      
+
  componentDidMount() {
+
    this.getWalletLocalData();
+
  }
+

                      
+
  getWalletLocalData = async () => {
+
    const { id } = this.activeWallet;
+
    const { mnemonicsConfirmationDate } = await getWalletLocalData(id);
+
    this.setState({ mnemonicsConfirmationDate });
+
  };
+

                      
+
  get activeWallet() {
+
    const { active: activeWallet } = this.props.stores.wallets;
+

                      
+
    // Guard against potential null values
+
    if (!activeWallet)
+
      throw new Error('Active wallet required for WalletSettingsPage.');
+

                      
+
    return activeWallet;
+
  }
+

                      
  render() {
-
    const { uiDialogs, wallets, walletSettings, app } = this.props.stores;
+
    const { uiDialogs, walletSettings, app } = this.props.stores;
    const { actions } = this.props;
    const {
      environment: { isProduction },
    } = app;
-
    const activeWallet = wallets.active;
+
    const { activeWallet } = this;
    const {
      WALLET_ASSURANCE_LEVEL_OPTIONS,
      updateWalletRequest,
      cancelEditingWalletField,
      updateWalletField,
    } = actions.walletSettings;
-

                      
-
    // Guard against potential null values
-
    if (!activeWallet)
-
      throw new Error('Active wallet required for WalletSettingsPage.');
+
    const { mnemonicsConfirmationDate } = this.state;

                      
    return (
      <WalletSettings
        openDialogAction={actions.dialogs.open.trigger}
        isSpendingPasswordSet={activeWallet.hasPassword}
        spendingPasswordUpdateDate={activeWallet.passwordUpdateDate}
+
        mnemonicsConfirmationDate={mnemonicsConfirmationDate}
        isDialogOpen={uiDialogs.isOpen}
+
        walletId={activeWallet.id}
        walletName={activeWallet.name}
+
        walletCreationDate={activeWallet.createdAt}
        isSubmitting={updateWalletRequest.isExecuting}
        isInvalid={
          updateWalletRequest.wasExecuted &&
  handleContinue = () => {};

                      
  render() {
-
    return <div>KJHFKDFHKHDK</div>;
    return <WalletRecoveryPhraseStep1Dialog onContinue={this.handleContinue} />;
  }
}
  inactiveStakePercentage?: number,
  isDelegated?: boolean,
  delegatedStakePool?: StakePool,
+
  createdAt: Date,
};

                      
export default class Wallet {
  @observable inactiveStakePercentage: ?number;
  @observable isDelegated: ?boolean;
  @observable delegatedStakePool: ?StakePool;
+
  @observable createdAt: Date;

                      
  constructor(data: WalletProps) {
    Object.assign(this, data);
        'inactiveStakePercentage',
        'isDelegated',
        'delegatedStakePool',
+
        'createdAt',
      ])
    );
  }
  "wallet.settings.exportToFile.dialog.introduction": "You are exporting <strong>{walletName}</strong> to a file.",
  "wallet.settings.exportToFile.dialog.submit.label": "Export",
  "wallet.settings.exportWalletButtonLabel": "Export wallet",
-
  "wallet.settings.mnemonicsValidationTitle": "Do you have your wallet recovery phrase?",
-
  "wallet.settings.mnemonicsValidationDescription": "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.",
-
  "wallet.settings.mnemonicsValidationConfirmed": "You confirmed that you still have recovery phrase for this wallet <b>{timeAgo}</b>.",
-
  "wallet.settings.mnemonicsValidationNotConfirmed": "You never confirmed that you still have recovery phrase for this wallet.",
-
  "wallet.settings.mnemonicsValidationButton": "Confirm mnemonics",
+
  "wallet.settings.recoveryPhraseValidationTitle": "Do you have your wallet recovery phrase?",
+
  "wallet.settings.recoveryPhraseValidationDescription": "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.",
+
  "wallet.settings.recoveryPhraseValidationNeverOk": "We recommend that you verify your wallet recovery phrase in <b>{timeUntilWarning}</b>",
+
  "wallet.settings.recoveryPhraseValidationNeverWarning": "We recommend that you verify your wallet recovery phrase in <b>{timeUntilNotification}</b>.",
+
  "wallet.settings.recoveryPhraseValidationNeverNotification": "We recommend that you verify your wallet recovery phrase.",
+
  "wallet.settings.recoveryPhraseValidationCheckedOk": "You verified the recovery phrase for this wallet <b>{timeAgo}</b>.",
+
  "wallet.settings.recoveryPhraseValidationCheckedWarning": "You verified the recovery phrase for this wallet <b>{timeAgo}</b>.",
+
  "wallet.settings.recoveryPhraseValidationCheckedNotification": "You verified the recovery phrase for this wallet <b>{timeAgo}</b>. We recommend that you verify your wallet recovery phrase again.",
+
  "wallet.settings.recoveryPhraseValidationButton": "Confirm mnemonics",
  "wallet.settings.name.label": "Name",
  "wallet.settings.password": "Password",
  "wallet.settings.passwordLastUpdated": "Last updated {lastUpdated}",
// @flow

                      
const { electronStore, environment } = global;
-
const { NETWORK } = environment;
+
const { network } = environment;

                      
-
const networkForLocalStorage = String(NETWORK);
+
const networkForLocalStorage = String(network);
const storageKeys = {
  WALLETS: `${networkForLocalStorage}-WALLETS`,
};
      if (!walletData) {
        walletData = {
          id: walletId,
-
          mnemonicsConfirmationDate: new Date(),
        };
        setWalletLocalData(walletData);
      }
// @flow
import React from 'react';
-
import { text, boolean, number, select } from '@storybook/addon-knobs';
+
import { text, boolean, number, select, radios } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import moment from 'moment';

                      

                      
/* eslint-disable react/display-name  */

                      
-
const mnemonicsConfirmationDateOptions = {
-
  Ok: new Date(),
-
  Warning: moment()
-
    .subtract(MNEMONICS_CHECKING_WARNING + 10, 'days')
-
    .toDate(),
-
  Notification: moment()
-
    .subtract(MNEMONICS_CHECKING_NOTIFICATION + 10, 'days')
-
    .toDate(),
-
};
-

                      
const basicSettingsId = 'Basic Settings';
const changePasswordId = 'Change Password';
const deleteWalletId = 'Delete Wallet';
const exportWalletId = 'Export Wallet';
const recoveryPhraseId = 'Recovery Phrase';

                      
-
export default () => (
-
  <WalletSettings
-
    isDialogOpen={dialog => {
-
      if (dialog === ChangeSpendingPasswordDialog) {
-
        return boolean(
-
          'Change Password - Show dialog',
-
          false,
-
          changePasswordId
-
        );
-
      }
-
      if (dialog === DeleteWalletConfirmationDialog) {
-
        return boolean('Delete Wallet - Show dialog', false, deleteWalletId);
+
const mnemonicsConfirmationDateOptions = {
+
  'Never Checked - Ok': {
+
    type: 'neverChecked',
+
    status: 'ok',
+
  },
+
  'Never Checked - Warning': {
+
    type: 'neverChecked',
+
    status: 'warning',
+
  },
+
  'Never Checked - Notification': {
+
    type: 'neverChecked',
+
    status: 'notification',
+
  },
+
  'Already Checked - Ok': {
+
    type: 'alreadyChecked',
+
    status: 'ok',
+
  },
+
  'Already Checked - Warning': {
+
    type: 'alreadyChecked',
+
    status: 'warning',
+
  },
+
  'Already Checked - Notification': {
+
    type: 'alreadyChecked',
+
    status: 'notification',
+
  },
+
};
+

                      
+
const recoveryDialogOptions = {
+
  None: 0,
+
  'Step 1 - Explanation': 1,
+
  'Step 2 - Verification': 2,
+
  'Step 3 - Verification successful': 3,
+
  'Step 4 - Verification failure': 4,
+
};
+

                      
+
const getWalletDates = (type: string, status: string) => {
+
  let date = new Date();
+
  if (status === 'warning')
+
    date = moment()
+
      .subtract(MNEMONICS_CHECKING_WARNING + 10, 'days')
+
      .toDate();
+
  else if (status === 'notification')
+
    date = moment()
+
      .subtract(MNEMONICS_CHECKING_NOTIFICATION + 10, 'days')
+
      .toDate();
+

                      
+
  let walletCreationDate;
+
  let mnemonicsConfirmationDate;
+

                      
+
  if (type === 'alreadyChecked') mnemonicsConfirmationDate = date;
+
  else walletCreationDate = date;
+

                      
+
  return {
+
    mnemonicsConfirmationDate,
+
    walletCreationDate,
+
  };
+
};
+

                      
+
export default () => {
+
  const { type, status } = select(
+
    'Wallet Recovery Phrase Verification',
+
    mnemonicsConfirmationDateOptions,
+
    'Already Checked - Ok',
+
    recoveryPhraseId
+
  );
+

                      
+
  const { mnemonicsConfirmationDate, walletCreationDate } = getWalletDates(
+
    type,
+
    status
+
  );
+

                      
+
  const recoveryDialog = select(
+
    'Active dialog',
+
    recoveryDialogOptions,
+
    'None',
+
    recoveryPhraseId
+
  );
+

                      
+
  return (
+
    <WalletSettings
+
      isDialogOpen={dialog => {
+
        if (dialog === ChangeSpendingPasswordDialog) {
+
          return boolean(
+
            'Change Password - Show dialog',
+
            false,
+
            changePasswordId
+
          );
+
        }
+
        if (dialog === DeleteWalletConfirmationDialog) {
+
          return boolean('Delete Wallet - Show dialog', false, deleteWalletId);
+
        }
+
        if (dialog === ExportWalletToFileDialog) {
+
          return boolean('Export Wallet - Show dialog', false, exportWalletId);
+
        }
+
        if (dialog === WalletRecoveryPhraseStep1Dialog) {
+
          return recoveryDialog === 1;
+
        }
+
        // if (dialog === WalletRecoveryPhraseStep2Dialog) {
+
        //   return boolean('Recovery Phrase - Step 2 Dialog', false, recoveryPhraseId);
+
        // }
+
        return false;
+
      }}
+
      activeField={null}
+
      assuranceLevels={[
+
        {
+
          value: WalletAssuranceModeOptions.NORMAL,
+
          label: {
+
            id: 'global.assuranceLevel.normal',
+
            defaultMessage: '!!!Normal',
+
            description: '',
+
          },
+
        },
+
        {
+
          value: WalletAssuranceModeOptions.STRICT,
+
          label: {
+
            id: 'global.assuranceLevel.strict',
+
            defaultMessage: '!!!Strict',
+
            description: '',
+
          },
+
        },
+
      ]}
+
      isInvalid={false}
+
      isSubmitting={false}
+
      lastUpdatedField={null}
+
      nameValidator={() => true}
+
      onCancelEditing={() => {}}
+
      onFieldValueChange={() => {}}
+
      onStartEditing={() => {}}
+
      onStopEditing={() => {}}
+
      openDialogAction={() => {}}
+
      walletAssurance={WalletAssuranceModeOptions.NORMAL}
+
      walletName={text('Wallet Name', 'Wallet Name', basicSettingsId)}
+
      spendingPasswordUpdateDate={moment()
+
        .subtract(1, 'month')
+
        .toDate()}
+
      isSpendingPasswordSet={boolean(
+
        'isSpendingPasswordSet',
+
        false,
+
        changePasswordId
+
      )}
+
      changeSpendingPasswordDialog={
+
        <ChangeSpendingPasswordDialog
+
          currentPasswordValue="current"
+
          newPasswordValue="new"
+
          repeatedPasswordValue="new"
+
          isSpendingPasswordSet={boolean(
+
            'isSpendingPasswordSet',
+
            false,
+
            changePasswordId
+
          )}
+
          onSave={action('Change Password - onSave')}
+
          onCancel={action('Change Password - onCancel')}
+
          onPasswordSwitchToggle={action(
+
            'Change Password - onPasswordSwitchToggle'
+
          )}
+
          onDataChange={action('Change Password - onDataChange')}
+
          isSubmitting={boolean(
+
            'Change Password - isSubmitting',
+
            false,
+
            changePasswordId