You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
3.0 KiB
105 lines
3.0 KiB
/* eslint-disable react/no-multi-comp */
|
|
|
|
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { FormattedMessage, injectIntl } from 'react-intl'
|
|
import bip39 from 'bip39-en'
|
|
import { Flex } from 'rebass'
|
|
import { Bar, Form, Header, Input, Label } from 'components/UI'
|
|
import messages from './messages'
|
|
|
|
class SeedWord extends React.Component {
|
|
static propTypes = {
|
|
index: PropTypes.number.isRequired,
|
|
intl: PropTypes.object.isRequired,
|
|
word: PropTypes.string
|
|
}
|
|
|
|
validateWord = value => {
|
|
return !value || !bip39.includes(value) ? 'incorrect' : null
|
|
}
|
|
|
|
render() {
|
|
const { index, intl, word } = this.props
|
|
return (
|
|
<Flex key={`word${index}`} justifyContent="flex-start" alignItems="center" as="li" my={1}>
|
|
<Label htmlFor={`word${index}`} width={35} mb={0}>
|
|
{index}
|
|
</Label>
|
|
<Input
|
|
initialValue={word}
|
|
field={`word${index}`}
|
|
validate={this.validateWord}
|
|
variant="thin"
|
|
validateOnChange
|
|
placeholder={intl.formatMessage({ ...messages.word_placeholder })}
|
|
showMessage={false}
|
|
/>
|
|
</Flex>
|
|
)
|
|
}
|
|
}
|
|
|
|
const SeedWordWithIntl = injectIntl(SeedWord)
|
|
|
|
class SeedView extends React.Component {
|
|
static propTypes = {
|
|
wizardApi: PropTypes.object,
|
|
wizardState: PropTypes.object,
|
|
seed: PropTypes.array.isRequired
|
|
}
|
|
|
|
static defaultProps = {
|
|
wizardApi: {},
|
|
wizardState: {}
|
|
}
|
|
|
|
render() {
|
|
const { wizardApi, wizardState, seed, intl, ...rest } = this.props
|
|
const { getApi, preSubmit, onSubmit, onSubmitFailure } = wizardApi
|
|
const indexes = Array.from(Array(24).keys())
|
|
|
|
return (
|
|
<Form
|
|
{...rest}
|
|
getApi={getApi}
|
|
preSubmit={preSubmit}
|
|
onSubmit={onSubmit}
|
|
onSubmitFailure={onSubmitFailure}
|
|
>
|
|
<Header
|
|
title={<FormattedMessage {...messages.import_title} />}
|
|
subtitle={<FormattedMessage {...messages.import_description} />}
|
|
align="left"
|
|
/>
|
|
|
|
<Bar my={4} />
|
|
|
|
<Flex justifyContent="space-between">
|
|
<Flex flexDirection="column" as="ul" mr={2}>
|
|
{indexes.slice(0, 6).map(word => (
|
|
<SeedWordWithIntl key={word + 1} index={word + 1} word={seed[word]} />
|
|
))}
|
|
</Flex>
|
|
<Flex flexDirection="column" as="ul" mx={2}>
|
|
{indexes.slice(6, 12).map(word => (
|
|
<SeedWordWithIntl key={word + 1} index={word + 1} word={seed[word]} />
|
|
))}
|
|
</Flex>
|
|
<Flex flexDirection="column" as="ul" mx={2}>
|
|
{indexes.slice(12, 18).map(word => (
|
|
<SeedWordWithIntl key={word + 1} index={word + 1} word={seed[word]} />
|
|
))}
|
|
</Flex>
|
|
<Flex flexDirection="column" as="ul" ml={2}>
|
|
{indexes.slice(18, 24).map(word => (
|
|
<SeedWordWithIntl key={word + 1} index={word + 1} word={seed[word]} />
|
|
))}
|
|
</Flex>
|
|
</Flex>
|
|
</Form>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default injectIntl(SeedView)
|
|
|