import React from 'react' import PropTypes from 'prop-types' import { Redirect } from 'react-router-dom' import { FormattedMessage } from 'react-intl' import { Box } from 'rebass' import messages from './messages' import FormContainer from './FormContainer' import ConnectionType from './ConnectionType' import ConnectionDetails from './ConnectionDetails' import ConnectionConfirm from './ConnectionConfirm' import BtcPayServer from './BtcPayServer' import Alias from './Alias' import Autopilot from './Autopilot' import Login from './Login' import Signup from './Signup' import RecoverForm from './RecoverForm' import NewWalletSeed from './NewWalletSeed' import ReEnterSeed from './ReEnterSeed' import NewWalletPassword from './NewWalletPassword' const Onboarding = ({ onboarding: { step, previousStep, connectionType, connectionString, connectionHost, connectionCert, connectionMacaroon, alias, autopilot, createWalletPassword, seed, onboarded }, theme, connectionTypeProps, connectionDetailProps, connectionConfirmProps, changeStep, startLnd, submitNewWallet, recoverOldWallet, aliasProps, initWalletProps, autopilotProps, recoverFormProps, newWalletSeedProps, newWalletPasswordProps, reEnterSeedProps }) => { const renderStep = () => { switch (step) { case 0.1: return ( } description={} theme={theme} back={null} next={() => { switch (connectionType) { case 'custom': changeStep(0.2) break case 'btcpayserver': changeStep(0.3) break default: changeStep(1) } }} > ) case 0.2: return ( } description={} theme={theme} back={() => changeStep(0.1)} next={() => { // dont allow the user to move on if we don't at least have a hostname. if (!connectionDetailProps.connectionHostIsValid) { return } changeStep(0.4) }} > ) case 0.3: return ( } description={} theme={theme} back={() => changeStep(0.1)} next={() => { // dont allow the user to move on if the connection string is invalid. if (!connectionDetailProps.connectionStringIsValid) { return } changeStep(0.4) }} > ) case 0.4: return ( } description={} theme={theme} back={() => changeStep(previousStep)} next={() => { startLnd({ type: connectionType, string: connectionString, host: connectionHost, cert: connectionCert, macaroon: connectionMacaroon }) }} > ) case 1: return ( } description={} theme={theme} back={() => changeStep(0.1)} next={() => changeStep(2)} > ) case 2: return ( } description={} theme={theme} back={() => changeStep(1)} next={() => startLnd({ type: connectionType, alias, autopilot })} > ) case 3: return ( } description={ } theme={theme} back={null} next={null} > ) case 4: return ( } description={} theme={theme} back={null} next={() => { // dont allow the user to move on if the confirmation password doesnt match the original password // if the password is less than 8 characters or empty dont allow users to proceed if ( newWalletPasswordProps.passwordMinCharsError || !newWalletPasswordProps.createWalletPassword || !newWalletPasswordProps.createWalletPasswordConfirmation || newWalletPasswordProps.showCreateWalletPasswordConfirmationError ) { return } changeStep(5) }} > ) case 5: return ( } description={} theme={theme} back={() => changeStep(4)} next={() => { // require the user to select create wallet or import wallet if ( !initWalletProps.signupProps.signupForm.create && !initWalletProps.signupProps.signupForm.import ) { return } changeStep(initWalletProps.signupProps.signupForm.create ? 6 : 5.1) }} > ) case 5.1: return ( } description={} theme={theme} back={() => changeStep(5)} next={() => { const recoverySeed = recoverFormProps.recoverSeedInput.map(input => input.word) recoverOldWallet(createWalletPassword, recoverySeed) }} > ) case 6: return ( } description={} theme={theme} back={() => changeStep(5)} next={() => changeStep(7)} > ) case 7: return ( } description={ } theme={theme} back={() => changeStep(6)} next={() => { // don't allow them to move on if they havent re-entered the seed correctly if (!reEnterSeedProps.reEnterSeedChecker) { return } submitNewWallet(createWalletPassword, seed) }} > ) } } return ( {renderStep()} {onboarded && } ) } Onboarding.propTypes = { onboarding: PropTypes.object.isRequired, connectionTypeProps: PropTypes.object.isRequired, connectionDetailProps: PropTypes.object.isRequired, connectionConfirmProps: PropTypes.object.isRequired, aliasProps: PropTypes.object.isRequired, autopilotProps: PropTypes.object.isRequired, initWalletProps: PropTypes.object.isRequired, newWalletSeedProps: PropTypes.object.isRequired, newWalletPasswordProps: PropTypes.object.isRequired, recoverFormProps: PropTypes.object.isRequired, reEnterSeedProps: PropTypes.object.isRequired, changeStep: PropTypes.func.isRequired, startLnd: PropTypes.func.isRequired, submitNewWallet: PropTypes.func.isRequired, recoverOldWallet: PropTypes.func.isRequired } export default Onboarding