View on GitHub
File Changes
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
-
// import { defineMessages, intlShape } from 'react-intl';
+
import { defineMessages, intlShape } from 'react-intl';
+
import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
+
import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
import DialogCloseButton from '../../widgets/DialogCloseButton';
import Dialog from '../../widgets/Dialog';
-
import styles from './WalletRecoveryPhraseStep1Dialog.scss';
+
import styles from './WalletRecoveryPhraseStepDialogs.scss';

                      
-
// 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.',
-
//   },
-
// });
+
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 = {
  onContinue: Function,
  onClose: Function,
+
  onToggleSafetyAgreement: Function,
+
  safetyAgreement: boolean,
};

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

                      
    const actions = [
        label: 'Continue',
        primary: true,
        onClick: onContinue,
+
        disabled: !safetyAgreement,
      },
    ];

                      
          you can enter your 12-word wallet recovery phrase on the following
          screen.
        </p>
-
        <p>
+
        <p className={styles.checkboxContainer}>
+
          <Checkbox
+
            onChange={onToggleSafetyAgreement}
+
            checked={safetyAgreement}
+
            skin={CheckboxSkin}
+
            className={styles.checkbox}
+
          />
          Are you being watched? Please make sure that nobody can see your
          screen while you are entering your wallet recovery phrase.
        </p>
-
.dialog {
-
  // background: red;
-
  // height: 100%;
-
  // width: 100%;
-
}
// import { defineMessages, intlShape } from 'react-intl';
import DialogCloseButton from '../../widgets/DialogCloseButton';
import Dialog from '../../widgets/Dialog';
-
import styles from './WalletRecoveryPhraseStep1Dialog.scss';
+
import styles from './WalletRecoveryPhraseStepDialogs.scss';

                      
// export const messages = defineMessages({
//   recoveryPhraseStep1Title: {
          Please enter your 12-word wallet recovery phrase. Make sure you enter
          the words in the correct order.
        </p>
-
        <h3>Recovery phrase</h3>
+
        <div className={styles.subtitle}>
+
          <h2>Recovery phrase</h2>
+
        </div>
      </Dialog>
    );
  }
import React, { Component } from 'react';
import { observer } from 'mobx-react';
// import { defineMessages, intlShape } from 'react-intl';
+
import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
+
import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
import DialogCloseButton from '../../widgets/DialogCloseButton';
import Dialog from '../../widgets/Dialog';
-
import styles from './WalletRecoveryPhraseStep1Dialog.scss';
+
import styles from './WalletRecoveryPhraseStepDialogs.scss';

                      
// export const messages = defineMessages({
//   recoveryPhraseStep1Title: {

                      
type Props = {
  onClose: Function,
+
  onToggleSafetyAgreement: Function,
+
  safetyAgreement: boolean,
};

                      
@observer
  // };
  render() {
    // const { intl } = this.context;
-
    const { onClose } = this.props;
+
    const { onClose, onToggleSafetyAgreement, safetyAgreement } = this.props;

                      
    const actions = [
      {
        label: 'Continue',
        primary: true,
        onClick: onClose,
+
        disabled: !safetyAgreement,
      },
    ];

                      
          at any time to recover the funds in this wallet on another computer,
          even if using a different version of Daedalus.
        </p>
-
        <p>
+
        <p className={styles.checkboxContainer}>
+
          <Checkbox
+
            onChange={onToggleSafetyAgreement}
+
            checked={safetyAgreement}
+
            skin={CheckboxSkin}
+
            className={styles.checkbox}
+
          />
          Please make sure to keep the paper with your wallet recovery phrase in
          a safe place. Anyone with access to your wallet recovery phrase can
          take control of your funds.
// import { defineMessages, intlShape } from 'react-intl';
import DialogCloseButton from '../../widgets/DialogCloseButton';
import Dialog from '../../widgets/Dialog';
-
import styles from './WalletRecoveryPhraseStep1Dialog.scss';
+
import styles from './WalletRecoveryPhraseStepDialogs.scss';

                      
// export const messages = defineMessages({
//   recoveryPhraseStep1Title: {
+
.dialog {
+
  p {
+
    color: #5e6066;
+
    font-family: var(--font-light);
+
    line-height: 1.38;
+
    &:first-child {
+
      margin-bottom: 20px;
+
    }
+
  }
+
}
+
.subtitle h2 {
+
  color: #5e6066;
+
  font-family: var(--font-regular);
+
  font-size: 16px;
+
  font-weight: 500;
+
  line-height: 1.38;
+
}
+
.checkboxContainer {
+
  display: flex;
+
}
+
.checkbox {
+
  margin-right: 20px;
+
}

                      
type Props = InjectedDialogContainerProps;

                      
+
type State = {
+
  safetyAgreement: boolean,
+
};
+

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

                      
+
  state = {
+
    safetyAgreement: false,
+
  };
+

                      
+
  handleToggleSafetyAgreement = checked => {
+
    this.setState({
+
      safetyAgreement: checked,
+
    });
+
  };
+

                      
  handleContinue = () => {
    this.props.actions.dialogs.open.trigger({
      dialog: WalletRecoveryPhraseStep2Dialog,

                      
  render() {
    const { closeActiveDialog } = this.props.actions.dialogs;
+
    const { safetyAgreement } = this.state;
    return (
      <WalletRecoveryPhraseStep1Dialog
        onContinue={this.handleContinue}
        onClose={closeActiveDialog.trigger}
+
        safetyAgreement={safetyAgreement}
+
        onToggleSafetyAgreement={this.handleToggleSafetyAgreement}
      />
    );
  }

                      
type Props = InjectedDialogContainerProps;

                      
+
type State = {
+
  safetyAgreement: boolean,
+
};
+

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

                      
+
  state = {
+
    safetyAgreement: false,
+
  };
+

                      
+
  handleToggleSafetyAgreement = checked => {
+
    this.setState({
+
      safetyAgreement: checked,
+
    });
+
  };
+

                      
  render() {
    const { closeActiveDialog } = this.props.actions.dialogs;
+
    const { safetyAgreement } = this.state;
    return (
-
      <WalletRecoveryPhraseStep3Dialog onClose={closeActiveDialog.trigger} />
+
      <WalletRecoveryPhraseStep3Dialog
+
        onClose={closeActiveDialog.trigger}
+
        safetyAgreement={safetyAgreement}
+
        onToggleSafetyAgreement={this.handleToggleSafetyAgreement}
+
      />
    );
  }
}