Skip to content
Permalink
Browse files

feat(ui): implement backup setup UI

  • Loading branch information...
korhaliv committed May 15, 2019
1 parent 67ede98 commit 30b4482883dee7642cb7e2a26c3fd5e007be7155
@@ -19,6 +19,7 @@ import {
SeedView,
WalletCreate,
WalletRecover,
SetupBackup,
} from './Steps'
import messages from './messages'

@@ -50,6 +51,7 @@ class Onboarding extends React.Component {
createWallet: PropTypes.func.isRequired,
createWalletError: PropTypes.string,
fetchSeed: PropTypes.func.isRequired,
initBackupService: PropTypes.func.isRequired,
isCreatingWallet: PropTypes.bool,
isFetchingSeed: PropTypes.bool,
isLightningGrpcActive: PropTypes.bool,
@@ -61,6 +63,7 @@ class Onboarding extends React.Component {
resetOnboarding: PropTypes.func.isRequired,
seed: PropTypes.array,
setAutopilot: PropTypes.func.isRequired,
setBackupProvider: PropTypes.func.isRequired,
setConnectionCert: PropTypes.func.isRequired,
setConnectionHost: PropTypes.func.isRequired,
setConnectionMacaroon: PropTypes.func.isRequired,
@@ -143,6 +146,8 @@ class Onboarding extends React.Component {
createWallet,
stopLnd,
unlockWallet,
initBackupService,
setBackupProvider,
} = this.props

let formSteps = []
@@ -163,6 +168,7 @@ class Onboarding extends React.Component {
<Wizard.Step key="Name" component={Name} {...{ name, setName }} />,
<Wizard.Step key="Network" component={Network} {...{ network, setNetwork }} />,
<Wizard.Step key="Autopilot" component={Autopilot} {...{ autopilot, setAutopilot }} />,
<Wizard.Step key="SetupBackup" component={SetupBackup} {...{ setBackupProvider }} />,
<Wizard.Step
key="WalletCreate"
component={WalletCreate}
@@ -171,6 +177,7 @@ class Onboarding extends React.Component {
isCreatingWallet,
createWallet,
createWalletError,
initBackupService,
}}
/>,
]
@@ -186,7 +193,7 @@ class Onboarding extends React.Component {
<Wizard.Step key="Password" component={Password} {...{ setPassword }} />,
<Wizard.Step key="Name" component={Name} {...{ name, setName }} />,
<Wizard.Step key="Network" component={Network} {...{ network, setNetwork }} />,
<Wizard.Step key="Autopilot" component={Autopilot} {...{ autopilot, setAutopilot }} />,

<Wizard.Step
key="WalletRecover"
component={WalletRecover}
@@ -3,9 +3,8 @@ import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'
import { withFieldApi } from 'informed'
import styled from 'styled-components'
import { Box, Flex } from 'rebass'
import { Flex } from 'rebass'
import { Form, RadioGroup, Heading, Bar } from 'components/UI'
import ZapLogo from 'components/Icon/ZapLogoBolt'
import BaseBackupTypeItem from './BackupTypeItem'
import messages from './messages'

@@ -18,9 +17,8 @@ const Container = styled(Flex)`
visibility: ${props => (props.lndConnect ? 'hidden' : 'visible')};
`

class BackupType extends React.Component {
class SetupBackup extends React.Component {
static propTypes = {
resetOnboarding: PropTypes.func.isRequired,
setBackupProvider: PropTypes.func.isRequired,
wizardApi: PropTypes.object,
wizardState: PropTypes.object,
@@ -46,11 +44,7 @@ class BackupType extends React.Component {
const { currentItem } = wizardState

return (
<Container alignItems="center" flexDirection="column" justifyContent="center" pb={7}>
<Box mb={5} mt={2}>
<ZapLogo height={60} width={60} />
</Box>

<Container alignItems="center" flexDirection="column" justifyContent="center" mt={3}>
<Form
{...rest}
getApi={formApi => {
@@ -105,4 +99,4 @@ class BackupType extends React.Component {
}
}

export default BackupType
export default SetupBackup
@@ -7,6 +7,7 @@ class WalletCreate extends React.Component {
clearCreateWalletError: PropTypes.func.isRequired,
createWallet: PropTypes.func.isRequired,
createWalletError: PropTypes.string,
initBackupService: PropTypes.func.isRequired,
isCreatingWallet: PropTypes.bool,
wizardApi: PropTypes.object,
wizardState: PropTypes.object,
@@ -38,9 +39,13 @@ class WalletCreate extends React.Component {
clearCreateWalletError()
}

handleSubmit = () => {
const { createWallet } = this.props
createWallet()
handleSubmit = async () => {
const { createWallet, initBackupService } = this.props
// wait until wallet creation is complete to obtain id
const config = await createWallet()
if (config) {
initBackupService(config.id)
}
}

setFormApi = formApi => {
@@ -55,6 +60,7 @@ class WalletCreate extends React.Component {
clearCreateWalletError,
createWalletError,
isCreatingWallet,
initBackupService,
...rest
} = this.props
const { getApi, onChange, onSubmitFailure } = wizardApi
@@ -13,3 +13,4 @@ export SeedView from './SeedView'
export WalletCreate from './WalletCreate'
export WalletRecover from './WalletRecover'
export ConnectionTypeItem from './ConnectionTypeItem'
export SetupBackup from './SetupBackup'
@@ -55,9 +55,11 @@ const RadioCard = ({ fieldApi, icons, value, label, isDisabled, description, ...
<Heading.h1 color={isDisabled ? 'gray' : 'primaryText'} mb={2} mt={3}>
{label}
</Heading.h1>
<Text color="gray" textAlign="center">
{description}
</Text>
{description && (
<Text color="gray" textAlign="center">
{description}
</Text>
)}
{isSelected && (
<Transition
enter={{ opacity: 1 }}
@@ -83,7 +85,7 @@ const RadioCard = ({ fieldApi, icons, value, label, isDisabled, description, ...
RadioCard.displayName = 'RadioCard'

RadioCard.propTypes = {
description: PropTypes.object.isRequired,
description: PropTypes.object,
fieldApi: PropTypes.object.isRequired,
icons: PropTypes.object.isRequired,
isDisabled: PropTypes.bool,
@@ -36,6 +36,8 @@ import {
lndSelectors,
} from 'reducers/lnd'

import { initBackupService, setBackupProvider } from 'reducers/backup'

const mapStateToProps = state => ({
alias: state.onboarding.alias,
name: state.onboarding.name,
@@ -86,6 +88,8 @@ const mapDispatchToProps = {
createWallet,
resetOnboarding,
unlockWallet,
initBackupService,
setBackupProvider,
}

const OnboardingContainer = connect(

0 comments on commit 30b4482

Please sign in to comment.
You can’t perform that action at this time.