78 lines
1.8 KiB
JavaScript
78 lines
1.8 KiB
JavaScript
import { makeStyles } from '@material-ui/core'
|
|
import * as R from 'ramda'
|
|
import React, { useState } from 'react'
|
|
|
|
import Sidebar, { Stepper } from 'src/components/layout/Sidebar'
|
|
import TitleSection from 'src/components/layout/TitleSection'
|
|
import styles from 'src/pages/AddMachine/styles'
|
|
|
|
import AllSet from './AllSet'
|
|
import Blockcypher from './Blockcypher'
|
|
import ChooseCoin from './ChooseCoin'
|
|
import ChooseExchange from './ChooseExchange'
|
|
import ChooseTicker from './ChooseTicker'
|
|
import ChooseWallet from './ChooseWallet'
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const steps = [
|
|
{
|
|
label: 'Choose cryptocurrency',
|
|
component: ChooseCoin
|
|
},
|
|
{
|
|
label: 'Choose wallet',
|
|
component: ChooseWallet
|
|
},
|
|
{
|
|
label: 'Choose ticker',
|
|
component: ChooseTicker
|
|
},
|
|
{
|
|
label: 'Exchange',
|
|
component: ChooseExchange
|
|
},
|
|
{
|
|
label: 'Blockcypher',
|
|
component: Blockcypher
|
|
},
|
|
{
|
|
label: 'All set',
|
|
component: AllSet
|
|
}
|
|
]
|
|
|
|
const Wallet = ({ doContinue }) => {
|
|
const [step, setStep] = useState(0)
|
|
const [data, setData] = useState({})
|
|
|
|
const classes = useStyles()
|
|
const mySteps = data?.coin === 'BTC' ? steps : R.remove(4, 1, steps)
|
|
|
|
const Component = mySteps[step].component
|
|
|
|
const addData = it => {
|
|
setData(R.merge(data, it))
|
|
setStep(step + 1)
|
|
}
|
|
|
|
return (
|
|
<div className={classes.wrapper}>
|
|
<div className={classes.headerDiv}>
|
|
<TitleSection title="Wallet settings"></TitleSection>
|
|
</div>
|
|
<div className={classes.contentDiv}>
|
|
<Sidebar>
|
|
{mySteps.map((it, idx) => (
|
|
<Stepper key={idx} step={step} it={it} idx={idx} steps={mySteps} />
|
|
))}
|
|
</Sidebar>
|
|
<div className={classes.contentWrapper}>
|
|
<Component data={data} addData={addData} doContinue={doContinue} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Wallet
|