status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Adding back button and tittle on route open's layout

This commit is contained in:
apanizo 2018-09-07 16:37:46 +02:00
parent 750e7289ed
commit cf91879c31
1 changed files with 35 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/routes/open/components/Layout.jsx
View File

@ -2,10 +2,16 @@
import * as React from 'react' import * as React from 'react'
import Stepper from '~/components/Stepper' import Stepper from '~/components/Stepper'
import Confirmation from '~/routes/open/components/FormConfirmation' import Confirmation from '~/routes/open/components/FormConfirmation'
import Block from '~/components/layout/Block'
import Heading from '~/components/layout/Heading'
import Row from '~/components/layout/Row'
import IconButton from '@material-ui/core/IconButton'
import Review from '~/routes/open/components/ReviewInformation' import Review from '~/routes/open/components/ReviewInformation'
import ChevronLeft from '@material-ui/icons/ChevronLeft'
import SafeFields, { safeFieldsValidation } from '~/routes/open/components/SafeForm' import SafeFields, { safeFieldsValidation } from '~/routes/open/components/SafeForm'
import { SAFELIST_ADDRESS } from '~/routes/routes' import { SAFELIST_ADDRESS } from '~/routes/routes'
import Link from '~/components/layout/Link' import Link from '~/components/layout/Link'
import { secondary } from '~/theme/variables'
const getSteps = () => [ const getSteps = () => [
'Fill Safe Form', 'Review Information', 'Deploy it', 'Fill Safe Form', 'Review Information', 'Deploy it',
@ -23,6 +29,10 @@ type Props = {
onCallSafeContractSubmit: (values: Object) => Promise<void>, onCallSafeContractSubmit: (values: Object) => Promise<void>,
} }
const iconStyle = {
color: secondary,
}
const Layout = ({ const Layout = ({
provider, userAccount, safeAddress, safeTx, onCallSafeContractSubmit, provider, userAccount, safeAddress, safeTx, onCallSafeContractSubmit,
}: Props) => { }: Props) => {
@ -34,23 +44,31 @@ const Layout = ({
<React.Fragment> <React.Fragment>
{ provider { provider
? ( ? (
<Stepper <Block>
finishedButton={finishedButton} <Row align="center">
finishedTransaction={!!safeAddress} <IconButton style={iconStyle} disableRipple>
onSubmit={onCallSafeContractSubmit} <ChevronLeft />
steps={steps} </IconButton>
initialValues={initialValues} <Heading tag="h3">Create New Safe</Heading>
> </Row>
<Stepper.Page validate={safeFieldsValidation}> <Stepper
{ SafeFields } finishedButton={finishedButton}
</Stepper.Page> finishedTransaction={!!safeAddress}
<Stepper.Page> onSubmit={onCallSafeContractSubmit}
{ Review } steps={steps}
</Stepper.Page> initialValues={initialValues}
<Stepper.Page address={safeAddress} tx={safeTx}> >
{ Confirmation } <Stepper.Page validate={safeFieldsValidation}>
</Stepper.Page> { SafeFields }
</Stepper> </Stepper.Page>
<Stepper.Page>
{ Review }
</Stepper.Page>
<Stepper.Page address={safeAddress} tx={safeTx}>
{ Confirmation }
</Stepper.Page>
</Stepper>
</Block>
) )
: <div>No metamask detected</div> : <div>No metamask detected</div>
} }