Skip to content

Commit be63d25

Browse files
kevvasindresorhus
kevva
authored and
sindresorhus
committed
Extract seed phrase into own component (#567)
Fixes #551
1 parent fb553e0 commit be63d25

File tree

6 files changed

+130
-83
lines changed

6 files changed

+130
-83
lines changed

‎app/renderer/components/SeedPhrase.js

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import CopyButton from 'components/CopyButton';
4+
import ReloadButton from 'components/ReloadButton';
5+
import Tooltip from 'components/Tooltip';
6+
import WrapWidth from 'components/WrapWidth';
7+
import {translate} from '../translate';
8+
import './SeedPhrase.scss';
9+
10+
const t = translate(['common']);
11+
12+
class SeedPhrase extends React.Component {
13+
static propTypes = {
14+
onReload: PropTypes.func,
15+
showCopy: PropTypes.bool,
16+
showReload: PropTypes.bool,
17+
value: PropTypes.string,
18+
}
19+
20+
static defaultProps = {
21+
showCopy: true,
22+
}
23+
24+
state = {
25+
isCopied: false,
26+
}
27+
28+
handleClose = () => {
29+
this.setState({isCopied: false});
30+
}
31+
32+
handleCopy = () => {
33+
this.setState({isCopied: true});
34+
}
35+
36+
handleReload = event => {
37+
const {onReload} = this.props;
38+
39+
this.setState({isCopied: false});
40+
41+
if (typeof onReload === 'function') {
42+
onReload(event);
43+
}
44+
}
45+
46+
render() {
47+
const {showCopy, showReload, value} = this.props;
48+
const {isCopied} = this.state;
49+
50+
return (
51+
<div className="SeedPhrase">
52+
{showReload && (
53+
<div className="section section--reload">
54+
<ReloadButton onClick={this.handleReload}/>
55+
</div>
56+
)}
57+
<div className="section section--value">
58+
<WrapWidth wordsPerLine={6}>
59+
{value}
60+
</WrapWidth>
61+
</div>
62+
{showCopy && (
63+
<div className="section section--copy">
64+
<Tooltip
65+
content={isCopied ? t('copied') : t('copy')}
66+
onClose={this.handleClose}
67+
>
68+
<CopyButton
69+
value={value}
70+
onClick={this.handleCopy}
71+
/>
72+
</Tooltip>
73+
</div>
74+
)}
75+
</div>
76+
);
77+
}
78+
}
79+
80+
export default SeedPhrase;

‎app/renderer/components/SeedPhrase.scss

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.SeedPhrase {
2+
align-items: center;
3+
background-color: rgba(248, 7, 89, 0.05);
4+
border: 1px solid var(--error-color);
5+
color: var(--error-color);
6+
display: flex;
7+
border-radius: 4px;
8+
padding: 10px 0;
9+
text-align: center;
10+
11+
.section {
12+
display: flex;
13+
flex-basis: 30px;
14+
}
15+
16+
.section--value {
17+
flex: 1;
18+
font-size: 17px;
19+
justify-content: center;
20+
}
21+
22+
.section--reload {
23+
padding-left: 12px;
24+
justify-content: flex-start;
25+
}
26+
27+
.section--copy {
28+
justify-content: flex-end;
29+
padding-right: 12px;
30+
}
31+
}

‎app/renderer/views/CreatePortfolio/CreatePortfolio.scss

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,6 @@
11
@import '../../styles/variables';
22

33
.CreatePortfolio {
4-
.generated-seed-phrase-container {
5-
align-items: center;
6-
background-color: rgba(248, 7, 89, 0.05);
7-
border: 1px solid var(--error-color);
8-
color: var(--error-color);
9-
display: flex;
10-
border-radius: 4px;
11-
padding: 10px 0;
12-
13-
.button {
14-
display: flex;
15-
flex-basis: 60px;
16-
padding: 0 12px;
17-
}
18-
19-
.button--reload {
20-
justify-content: flex-start;
21-
}
22-
23-
.button--copy {
24-
justify-content: flex-end;
25-
}
26-
27-
.seed-phrase {
28-
display: flex;
29-
flex: 1;
30-
font-size: 17px;
31-
justify-content: center;
32-
}
33-
}
34-
354
.warning-box {
365
display: flex;
376
margin-top: 18px;

‎app/renderer/views/CreatePortfolio/Step2.js

Lines changed: 11 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,57 +2,30 @@ import React from 'react';
22
import {Trans} from 'react-i18next';
33
import Button from 'components/Button';
44
import LoginBackButton from 'components/LoginBackButton';
5-
import ReloadButton from 'components/ReloadButton';
6-
import CopyButton from 'components/CopyButton';
7-
import WrapWidth from 'components/WrapWidth';
85
import ExternalLink from 'components/ExternalLink';
9-
import Tooltip from 'components/Tooltip';
6+
import SeedPhrase from 'components/SeedPhrase';
107
import container from 'containers/CreatePortfolio';
11-
import {withState} from 'containers/SuperContainer';
128
import {instance, translate} from '../../translate';
139
import './CreatePortfolio.scss';
1410

15-
const t = translate(['portfolio', 'common']);
11+
const t = translate(['portfolio']);
1612

17-
const CreatePortfolioStep2 = ({setState, ...props}) => {
13+
const CreatePortfolioStep2 = () => {
1814
// TODO(sindresorhus): Fill in the link to security best practices
19-
20-
const {isCopied} = props.state;
2115
const {state} = container;
2216

2317
return (
2418
<div className="CreatePortfolio">
2519
<LoginBackButton view="CreatePortfolioStep1" progress={0.25}/>
2620
<h1>{t('create.seedPhrase')}</h1>
2721
<div className="form-group" style={{width: '460px', marginTop: '20px'}}>
28-
<div className="generated-seed-phrase-container">
29-
<div className="button button--reload">
30-
<ReloadButton onClick={() => {
31-
container.generateSeedPhrase();
32-
setState({isCopied: false});
33-
}}/>
34-
</div>
35-
<div className="seed-phrase">
36-
<WrapWidth wordsPerLine={6}>
37-
{state.generatedSeedPhrase}
38-
</WrapWidth>
39-
</div>
40-
<div className="button button--copy">
41-
<Tooltip
42-
content={isCopied ? t('copied') : t('copy')}
43-
onClose={() => {
44-
setState({isCopied: false});
45-
}}
46-
>
47-
<CopyButton
48-
value={state.generatedSeedPhrase}
49-
onClick={() => {
50-
setState({isCopied: true});
51-
}}
52-
/>
53-
</Tooltip>
54-
</div>
55-
</div>
22+
<SeedPhrase
23+
showReload
24+
value={state.generatedSeedPhrase}
25+
onReload={() => {
26+
container.generateSeedPhrase();
27+
}}
28+
/>
5629
<div className="warning-box">
5730
<img className="icon" src="/assets/warning-icon.svg" width="30" height="30"/>
5831
<div className="content">
@@ -74,4 +47,4 @@ const CreatePortfolioStep2 = ({setState, ...props}) => {
7447
);
7548
};
7649

77-
export default withState(CreatePortfolioStep2, {isCopied: false});
50+
export default CreatePortfolioStep2;

‎app/renderer/views/Settings/SeedPhraseModal.js

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import appContainer from 'containers/App';
33
import Button from 'components/Button';
44
import Input from 'components/Input';
55
import Modal from 'components/Modal';
6-
import WrapWidth from 'components/WrapWidth';
6+
import SeedPhrase from 'components/SeedPhrase';
77
import {translate} from '../../translate';
88
import './SeedPhraseModal.scss';
99

@@ -79,14 +79,10 @@ class SeedPhraseModal extends React.Component {
7979
open={this.state.isOpen}
8080
onClose={this.handleClose}
8181
didClose={this.handleDidClose}
82-
width="445px"
82+
width="470px"
8383
>
8484
{({modalRef}) => this.state.seedPhrase.length > 0 ? (
85-
<div className="seed-phrase">
86-
<WrapWidth wordsPerLine={6}>
87-
{this.state.seedPhrase}
88-
</WrapWidth>
89-
</div>
85+
<SeedPhrase value={this.state.seedPhrase}/>
9086
) : (
9187
<form onSubmit={this.handleSubmit(modalRef)}>
9288
<div className="form-group">

‎app/renderer/views/Settings/SeedPhraseModal.scss

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
.SeedPhraseModal {
2-
.seed-phrase {
3-
border-radius: 4px;
2+
.SeedPhrase {
43
border: 1px solid var(--primary-color);
54
color: var(--primary-color);
6-
display: flex;
7-
font-size: 17px;
8-
justify-content: center;
9-
padding: 10px 0;
10-
text-align: center;
5+
}
6+
7+
.CopyButton {
8+
color: var(--primary-color);
119
}
1210

1311
.Input--error {

0 commit comments

Comments
 (0)