diff --git a/app/components/Onboarding/Onboarding.js b/app/components/Onboarding/Onboarding.js index f686ae3c..811e79e0 100644 --- a/app/components/Onboarding/Onboarding.js +++ b/app/components/Onboarding/Onboarding.js @@ -163,7 +163,7 @@ const Onboarding = ({ description="Enter your cipherseed passphrase (or just submit if you don't have one)" back={() => changeStep(5)} next={() => { - const recoverySeed = recoverFormProps.seedInput.map(input => input.word) + const recoverySeed = recoverFormProps.recoverSeedInput.map(input => input.word) submitNewWallet(createWalletPassword, recoverySeed, aezeedPassword) }} @@ -185,8 +185,11 @@ const Onboarding = ({ case 7: return ( changeStep(6)} next={() => { // don't allow them to move on if they havent re-entered the seed correctly diff --git a/app/components/Onboarding/ReEnterSeed.js b/app/components/Onboarding/ReEnterSeed.js index 8f1a2fc5..3a6b7298 100644 --- a/app/components/Onboarding/ReEnterSeed.js +++ b/app/components/Onboarding/ReEnterSeed.js @@ -2,36 +2,49 @@ import React from 'react' import PropTypes from 'prop-types' import styles from './ReEnterSeed.scss' -const ReEnterSeed = ({ seed, seedInput, updateSeedInput }) => ( -
- -
-) +class ReEnterSeed extends React.Component { + componentWillMount() { + this.props.setReEnterSeedIndexes() + } + + render() { + const { seed, reEnterSeedInput, updateReEnterSeedInput, seedIndexesArr } = this.props + + return ( +
+ +
+ ) + } +} ReEnterSeed.propTypes = { seed: PropTypes.array.isRequired, - seedInput: PropTypes.array.isRequired, - updateSeedInput: PropTypes.func.isRequired + reEnterSeedInput: PropTypes.object.isRequired, + updateReEnterSeedInput: PropTypes.func.isRequired, + setReEnterSeedIndexes: PropTypes.func.isRequired, + seedIndexesArr: PropTypes.array.isRequired } export default ReEnterSeed diff --git a/app/components/Onboarding/ReEnterSeed.scss b/app/components/Onboarding/ReEnterSeed.scss index 4c794ac5..d7e19505 100644 --- a/app/components/Onboarding/ReEnterSeed.scss +++ b/app/components/Onboarding/ReEnterSeed.scss @@ -1,14 +1,19 @@ @import '../../variables.scss'; .seedContainer { - position: relative; - display: inline-block; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; font-size: 12px; + margin-top: 10%; li { display: inline-block; - margin: 5px 0; + margin: 10px; width: 25%; + border: 0.2px solid #ccc; + padding: 5px 10px; section { display: inline-block; @@ -16,30 +21,25 @@ color: $white; &:nth-child(1) { - width: 15%; text-align: center; opacity: 0.5; } &:nth-child(2) { - width: calc(85% - 10px); margin: 0 5px; } } } } - - .word { margin: 0 3px; - background-color: #1c1e26; + background-color: inherit; outline: 0; border: none; padding: 5px 10px; color: $white; - font-family: courier; - font-family: 'Courier'; + font-family: 'Courier', courier, sans-serif; &.valid { color: $green; diff --git a/app/components/Onboarding/RecoverForm.js b/app/components/Onboarding/RecoverForm.js index 4e92b3f3..ca926331 100644 --- a/app/components/Onboarding/RecoverForm.js +++ b/app/components/Onboarding/RecoverForm.js @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import styles from './RecoverForm.scss' -const RecoverForm = ({ seedInput, updateSeedInput }) => ( +const RecoverForm = ({ recoverSeedInput, updateRecoverSeedInput }) => (