View on GitHub
File Changes
// @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: {
  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.',
  },

                      
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,
  };
      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,
      },
    };
  }
      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)}
            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>
    );
  }
+
.component {
+
  background: red;
+
}
+
// @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>
+
    );
+
  }
+
}
+
.dialog {
+
  // background: red;
+
  // height: 100%;
+
  // width: 100%;
+
}
+
// @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>
+
    );
+
  }
+
}
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: {
  changeSpendingPasswordDialog: Node,
  deleteWalletDialogContainer: Node,
  exportWalletDialogContainer: Node,
+
  walletRecoveryPhraseStep1Container: Node,
+
  walletRecoveryPhraseStep2Container: Node,
  mnemonicsConfirmationDate: Date,
};

                      
      deleteWalletDialogContainer,
      exportWalletDialogContainer,
      mnemonicsConfirmationDate,
+
      walletRecoveryPhraseStep1Container,
+
      walletRecoveryPhraseStep2Container,
    } = this.props;

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

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

                      
          {error && <p className={styles.error}>{intl.formatMessage(error)}</p>}
import ChangeSpendingPasswordDialogContainer from './dialogs/settings/ChangeSpendingPasswordDialogContainer';
import DeleteWalletDialogContainer from './dialogs/settings/DeleteWalletDialogContainer';
import ExportWalletToFileDialogContainer from './dialogs/settings/ExportWalletToFileDialogContainer';
+
import WalletRecoveryPhraseStep1Container from './dialogs/settings/WalletRecoveryPhraseStep1Container';
+
import WalletRecoveryPhraseStep2Container from './dialogs/settings/WalletRecoveryPhraseStep2Container';

                      
type Props = InjectedProps;

                      
        changeSpendingPasswordDialog={<ChangeSpendingPasswordDialogContainer />}
        deleteWalletDialogContainer={<DeleteWalletDialogContainer />}
        exportWalletDialogContainer={<ExportWalletToFileDialogContainer />}
+
        walletRecoveryPhraseStep1Container={
+
          <WalletRecoveryPhraseStep1Container />
+
        }
+
        walletRecoveryPhraseStep2Container={
+
          <WalletRecoveryPhraseStep2Container />
+
        }
      />
    );
  }
+
// @flow
+
import React, { Component } from 'react';
+
import { observer } from 'mobx-react';
+
import WalletRecoveryPhraseStep1Dialog from '../../../../components/wallet/settings/WalletRecoveryPhraseStep1Dialog';
+

                      
+
@observer
+
export default class WalletRecoveryPhraseStep1Container extends Component {
+
  handleContinue = () => {};
+

                      
+
  render() {
+
    return <div>KJHFKDFHKHDK</div>;
+
    return <WalletRecoveryPhraseStep1Dialog onContinue={this.handleContinue} />;
+
  }
+
}
+
// @flow
+
import React, { Component } from 'react';
+
import { observer, inject } from 'mobx-react';
+
import WalletRecoveryPhraseStep2Dialog from '../../../../components/wallet/settings/WalletRecoveryPhraseStep2Dialog';
+
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: () => {},
+
  };
+

                      
+
  handleContinue = () => {};
+

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

                      
+
    return <WalletRecoveryPhraseStep2Dialog onContinue={this.handleContinue} />;
+
  }
+
}
  "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 a wallet recovery phrase. You can re-enter your wallet recovery phrase to confirm that you have the correct recovery phrase for this wallet.",
+
  "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",
import ChangeSpendingPasswordDialog from '../../source/renderer/app/components/wallet/settings/ChangeSpendingPasswordDialog';
import DeleteWalletConfirmationDialog from '../../source/renderer/app/components/wallet/settings/DeleteWalletConfirmationDialog';
import ExportWalletToFileDialog from '../../source/renderer/app/components/wallet/settings/ExportWalletToFileDialog';
+
import WalletRecoveryPhraseStep1Dialog from '../../source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStep1Dialog';
+
import WalletRecoveryPhraseStep2Dialog from '../../source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStep2Dialog';
import {
  MNEMONICS_CHECKING_WARNING,
  MNEMONICS_CHECKING_NOTIFICATION,
    .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);
+
      }
+
      if (dialog === ExportWalletToFileDialog) {
+
        return boolean('Export Wallet - Show dialog', false, exportWalletId);
+
      }
+
      if (dialog === WalletRecoveryPhraseStep1Dialog) {
+
        return boolean(
+
          'Recovery Phrase - Step 1 Dialog',
+
          false,
+
          recoveryPhraseId
+
        );
+
      }
+
      // if (dialog === WalletRecoveryPhraseStep2Dialog) {
+
      //   return boolean('Recovery Phrase - Step 2 Dialog', false, recoveryPhraseId);
+
      // }
+
      return false;
+
    }}
    activeField={null}
    assuranceLevels={[
      {
        },
      },
    ]}
-
    isDialogOpen={dialog => {
-
      if (dialog === ChangeSpendingPasswordDialog) {
-
        return boolean('Change Password - Show dialog', false);
-
      }
-
      if (dialog === DeleteWalletConfirmationDialog) {
-
        return boolean('Delete Wallet - Show dialog', false);
-
      }
-
      if (dialog === ExportWalletToFileDialog) {
-
        return boolean('Export Wallet - Show dialog', false);
-
      }
-
      return false;
-
    }}
    isInvalid={false}
    isSubmitting={false}
-
    isSpendingPasswordSet={boolean('isSpendingPasswordSet', false)}
    lastUpdatedField={null}
    nameValidator={() => true}
    onCancelEditing={() => {}}
    onStopEditing={() => {}}
    openDialogAction={() => {}}
    walletAssurance={WalletAssuranceModeOptions.NORMAL}
-
    walletName={text('Wallet Name', 'Wallet Name')}
+
    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)}
+
        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)}
+
        isSubmitting={boolean(
+
          'Change Password - isSubmitting',
+
          false,
+
          changePasswordId
+
        )}
        error={null}
      />
    }
    deleteWalletDialogContainer={
      <DeleteWalletConfirmationDialog
        walletName={text(
          'DeleteWalletConfirmationDialog: Wallet Name',
-
          'Wallet To Delete'
+
          'Wallet To Delete',
+
          deleteWalletId
+
        )}
+
        hasWalletFunds={boolean('hasWalletFunds', false, basicSettingsId)}
+
        countdownFn={() => number('Delete Wallet Countdown', 9, deleteWalletId)}
+
        isBackupNoticeAccepted={boolean(
+
          'isBackupNoticeAccepted',
+
          false,
+
          basicSettingsId
        )}
-
        hasWalletFunds={boolean('hasWalletFunds', false)}
-
        countdownFn={() => number('Delete Wallet Countdown', 9)}
-
        isBackupNoticeAccepted={boolean('isBackupNoticeAccepted', false)}
        onAcceptBackupNotice={action('Delete Wallet - onAcceptBackupNotice')}
        onContinue={action('Delete Wallet - onContinue')}
        onCancel={action('Delete Wallet - onCancel')}
-
        confirmationValue={text('Delete Wallet Confirmation Value')}
+
        confirmationValue={text(
+
          'Delete Wallet Confirmation Value',
+
          'Wallet name',
+
          deleteWalletId
+
        )}
        onConfirmationValueChange={action(
          'Delete Wallet - onConfirmationValueChange'
        )}
-
        isSubmitting={boolean('Delete Wallet - isSubmitting', false)}
+
        isSubmitting={boolean(
+
          'Delete Wallet - isSubmitting',
+
          false,
+
          deleteWalletId
+
        )}
      />
    }
    exportWalletDialogContainer={
      <ExportWalletToFileDialog
        walletName={text('Wallet Name', 'Wallet Name')}
-
        hasSpendingPassword={boolean('isSpendingPasswordSet', false)}
-
        isSubmitting={boolean('Export Wallet - isSubmitting', false)}
+
        hasSpendingPassword={boolean(
+
          'isSpendingPasswordSet',
+
          false,
+
          basicSettingsId
+
        )}
+
        isSubmitting={boolean(
+
          'Export Wallet - isSubmitting',
+
          false,
+
          exportWalletId
+
        )}
        onSubmit={action('Export Wallet - onSubmit')}
        onClose={action('Export Wallet - onClose')}
      />
    }
+
    walletRecoveryPhraseStep1Container={<WalletRecoveryPhraseStep1Dialog />}
+
    walletRecoveryPhraseStep2Container={<WalletRecoveryPhraseStep2Dialog />}
    mnemonicsConfirmationDate={select(
      'mnemonicsConfirmationDate',
-
      mnemonicsConfirmationDateOptions
+
      mnemonicsConfirmationDateOptions,
+
      'Ok',
+
      recoveryPhraseId
    )}
  />
);