-
Notifications
You must be signed in to change notification settings - Fork 295
/
WalletRecoveryPhraseDisplayDialog.tsx
95 lines (88 loc) · 3.03 KB
/
WalletRecoveryPhraseDisplayDialog.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import classnames from 'classnames';
import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
import WalletRecoveryPhraseMnemonic from './WalletRecoveryPhraseMnemonic';
import DialogCloseButton from '../../widgets/DialogCloseButton';
import Dialog from '../../widgets/Dialog';
import WalletRecoveryInstructions from './WalletRecoveryInstructions';
import globalMessages from '../../../i18n/global-messages';
import styles from './WalletRecoveryPhraseDisplayDialog.scss';
import { WALLET_RECOVERY_PHRASE_WORD_COUNT } from '../../../config/cryptoConfig';
import LoadingSpinner from '../../widgets/LoadingSpinner';
const messages = defineMessages({
backupInstructions: {
id: 'wallet.backup.recovery.phrase.display.dialog.backup.instructions',
defaultMessage:
'!!!Please make sure you write down the {walletRecoveryPhraseWordCount} words of your wallet recovery phrase <strong>on a piece of paper in the exact order shown here</strong>.',
description:
'Instructions for backing up wallet recovery phrase on dialog that displays wallet recovery phrase.',
},
buttonLabelIHaveWrittenItDown: {
id:
'wallet.backup.recovery.phrase.display.dialog.button.label.iHaveWrittenItDown',
defaultMessage: '!!!Yes, I have written down my wallet recovery phrase.',
description:
'Label for button "Yes, I have written down my wallet recovery phrase." on wallet backup dialog',
},
});
type Props = {
recoveryPhrase: string,
onStartWalletBackup: Function,
onCancelBackup: Function,
isSubmitting: boolean,
};
@observer
export default class WalletRecoveryPhraseDisplayDialog extends Component<Props> {
static contextTypes = {
intl: intlShape.isRequired,
};
render() {
const { intl } = this.context;
const {
recoveryPhrase,
onStartWalletBackup,
onCancelBackup,
isSubmitting,
} = this.props;
const dialogClasses = classnames([
styles.component,
'WalletRecoveryPhraseDisplayDialog',
]);
const buttonLabel = !isSubmitting ? (
intl.formatMessage(messages.buttonLabelIHaveWrittenItDown)
) : (
<LoadingSpinner />
);
const actions = [
{
label: buttonLabel,
onClick: onStartWalletBackup,
primary: true,
},
];
return (
<Dialog
className={dialogClasses}
title={intl.formatMessage(globalMessages.recoveryPhraseDialogTitle)}
actions={actions}
onClose={onCancelBackup}
closeOnOverlayClick={false}
closeButton={<DialogCloseButton onClose={onCancelBackup} />}
>
<WalletRecoveryInstructions
instructionsText={
<FormattedHTMLMessage
{...messages.backupInstructions}
values={{
walletRecoveryPhraseWordCount: WALLET_RECOVERY_PHRASE_WORD_COUNT,
}}
/>
}
/>
<WalletRecoveryPhraseMnemonic phrase={recoveryPhrase} />
</Dialog>
);
}
}