Permalink
Browse files

Extract seed phrase into own component (#567)

Fixes #551
  • Loading branch information...
kevva authored and sindresorhus committed Nov 5, 2018
1 parent fb553e0 commit be63d250e049fb6d75e2d35e9bc3dc8bcb44048c
@@ -0,0 +1,80 @@
import React from 'react';
import PropTypes from 'prop-types';
import CopyButton from 'components/CopyButton';
import ReloadButton from 'components/ReloadButton';
import Tooltip from 'components/Tooltip';
import WrapWidth from 'components/WrapWidth';
import {translate} from '../translate';
import './SeedPhrase.scss';
const t = translate(['common']);
class SeedPhrase extends React.Component {
static propTypes = {
onReload: PropTypes.func,
showCopy: PropTypes.bool,
showReload: PropTypes.bool,
value: PropTypes.string,
}
static defaultProps = {
showCopy: true,
}
state = {
isCopied: false,
}
handleClose = () => {
this.setState({isCopied: false});
}
handleCopy = () => {
this.setState({isCopied: true});
}
handleReload = event => {
const {onReload} = this.props;
this.setState({isCopied: false});
if (typeof onReload === 'function') {
onReload(event);
}
}
render() {
const {showCopy, showReload, value} = this.props;
const {isCopied} = this.state;
return (
<div className="SeedPhrase">
{showReload && (
<div className="section section--reload">
<ReloadButton onClick={this.handleReload}/>
</div>
)}
<div className="section section--value">
<WrapWidth wordsPerLine={6}>
{value}
</WrapWidth>
</div>
{showCopy && (
<div className="section section--copy">
<Tooltip
content={isCopied ? t('copied') : t('copy')}
onClose={this.handleClose}
>
<CopyButton
value={value}
onClick={this.handleCopy}
/>
</Tooltip>
</div>
)}
</div>
);
}
}
export default SeedPhrase;
@@ -0,0 +1,31 @@
.SeedPhrase {
align-items: center;
background-color: rgba(248, 7, 89, 0.05);
border: 1px solid var(--error-color);
color: var(--error-color);
display: flex;
border-radius: 4px;
padding: 10px 0;
text-align: center;
.section {
display: flex;
flex-basis: 30px;
}
.section--value {
flex: 1;
font-size: 17px;
justify-content: center;
}
.section--reload {
padding-left: 12px;
justify-content: flex-start;
}
.section--copy {
justify-content: flex-end;
padding-right: 12px;
}
}
@@ -1,37 +1,6 @@
@import '../../styles/variables';
.CreatePortfolio {
.generated-seed-phrase-container {
align-items: center;
background-color: rgba(248, 7, 89, 0.05);
border: 1px solid var(--error-color);
color: var(--error-color);
display: flex;
border-radius: 4px;
padding: 10px 0;
.button {
display: flex;
flex-basis: 60px;
padding: 0 12px;
}
.button--reload {
justify-content: flex-start;
}
.button--copy {
justify-content: flex-end;
}
.seed-phrase {
display: flex;
flex: 1;
font-size: 17px;
justify-content: center;
}
}
.warning-box {
display: flex;
margin-top: 18px;
@@ -2,57 +2,30 @@ import React from 'react';
import {Trans} from 'react-i18next';
import Button from 'components/Button';
import LoginBackButton from 'components/LoginBackButton';
import ReloadButton from 'components/ReloadButton';
import CopyButton from 'components/CopyButton';
import WrapWidth from 'components/WrapWidth';
import ExternalLink from 'components/ExternalLink';
import Tooltip from 'components/Tooltip';
import SeedPhrase from 'components/SeedPhrase';
import container from 'containers/CreatePortfolio';
import {withState} from 'containers/SuperContainer';
import {instance, translate} from '../../translate';
import './CreatePortfolio.scss';
const t = translate(['portfolio', 'common']);
const t = translate(['portfolio']);
const CreatePortfolioStep2 = ({setState, ...props}) => {
const CreatePortfolioStep2 = () => {
// TODO(sindresorhus): Fill in the link to security best practices
const {isCopied} = props.state;
const {state} = container;
return (
<div className="CreatePortfolio">
<LoginBackButton view="CreatePortfolioStep1" progress={0.25}/>
<h1>{t('create.seedPhrase')}</h1>
<div className="form-group" style={{width: '460px', marginTop: '20px'}}>
<div className="generated-seed-phrase-container">
<div className="button button--reload">
<ReloadButton onClick={() => {
container.generateSeedPhrase();
setState({isCopied: false});
}}/>
</div>
<div className="seed-phrase">
<WrapWidth wordsPerLine={6}>
{state.generatedSeedPhrase}
</WrapWidth>
</div>
<div className="button button--copy">
<Tooltip
content={isCopied ? t('copied') : t('copy')}
onClose={() => {
setState({isCopied: false});
}}
>
<CopyButton
value={state.generatedSeedPhrase}
onClick={() => {
setState({isCopied: true});
}}
/>
</Tooltip>
</div>
</div>
<SeedPhrase
showReload
value={state.generatedSeedPhrase}
onReload={() => {
container.generateSeedPhrase();
}}
/>
<div className="warning-box">
<img className="icon" src="/assets/warning-icon.svg" width="30" height="30"/>
<div className="content">
@@ -74,4 +47,4 @@ const CreatePortfolioStep2 = ({setState, ...props}) => {
);
};
export default withState(CreatePortfolioStep2, {isCopied: false});
export default CreatePortfolioStep2;
@@ -3,7 +3,7 @@ import appContainer from 'containers/App';
import Button from 'components/Button';
import Input from 'components/Input';
import Modal from 'components/Modal';
import WrapWidth from 'components/WrapWidth';
import SeedPhrase from 'components/SeedPhrase';
import {translate} from '../../translate';
import './SeedPhraseModal.scss';
@@ -79,14 +79,10 @@ class SeedPhraseModal extends React.Component {
open={this.state.isOpen}
onClose={this.handleClose}
didClose={this.handleDidClose}
width="445px"
width="470px"
>
{({modalRef}) => this.state.seedPhrase.length > 0 ? (
<div className="seed-phrase">
<WrapWidth wordsPerLine={6}>
{this.state.seedPhrase}
</WrapWidth>
</div>
<SeedPhrase value={this.state.seedPhrase}/>
) : (
<form onSubmit={this.handleSubmit(modalRef)}>
<div className="form-group">
@@ -1,13 +1,11 @@
.SeedPhraseModal {
.seed-phrase {
border-radius: 4px;
.SeedPhrase {
border: 1px solid var(--primary-color);
color: var(--primary-color);
display: flex;
font-size: 17px;
justify-content: center;
padding: 10px 0;
text-align: center;
}
.CopyButton {
color: var(--primary-color);
}
.Input--error {

0 comments on commit be63d25

Please sign in to comment.