Add update Safe name component

This commit is contained in:
Germán Martínez 2019-06-14 17:51:09 +02:00
parent 7c41a564fc
commit f6b2bb098e
3 changed files with 89 additions and 32 deletions

View File

@ -90,7 +90,7 @@ class Layout extends React.Component<Props, State> {
render() { render() {
const { const {
safe, provider, network, classes, granted, tokens, activeTokens, createTransaction, safe, provider, network, classes, granted, tokens, activeTokens, createTransaction, updateSafeName,
} = this.props } = this.props
const { tabIndex } = this.state const { tabIndex } = this.state
@ -151,6 +151,7 @@ class Layout extends React.Component<Props, State> {
threshold={safe.threshold} threshold={safe.threshold}
owners={safe.owners} owners={safe.owners}
createTransaction={createTransaction} createTransaction={createTransaction}
updateSafeName={updateSafeName}
/> />
)} )}
</React.Fragment> </React.Fragment>

View File

@ -1,10 +1,17 @@
// @flow // @flow
import * as React from 'react' import React, { useState } from 'react'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
import Block from '~/components/layout/Block' import Block from '~/components/layout/Block'
import Col from '~/components/layout/Col' import Col from '~/components/layout/Col'
import Field from '~/components/forms/Field'
import {
composeValidators, required, minMaxLength,
} from '~/components/forms/validator'
import TextField from '~/components/forms/TextField'
import GnoForm from '~/components/forms/GnoForm'
import Row from '~/components/layout/Row' import Row from '~/components/layout/Row'
import Paragraph from '~/components/layout/Paragraph' import Paragraph from '~/components/layout/Paragraph'
import Hairline from '~/components/layout/Hairline'
import Button from '~/components/layout/Button' import Button from '~/components/layout/Button'
import { sm, boldFont } from '~/theme/variables' import { sm, boldFont } from '~/theme/variables'
import { styles } from './style' import { styles } from './style'
@ -21,19 +28,45 @@ const saveButtonStyle = {
type Props = { type Props = {
classes: Object, classes: Object,
safeAddress: string,
safeName: string,
updateSafe: Funtion
} }
class UpdateSafeName extends React.Component<Props, State> { const UpdateSafeName = (props: Props) => {
render() { const {
const { classes } = this.props classes,
safeAddress,
safeName,
updateSafeName,
} = props
const handleSubmit = (values) => {
updateSafeName(safeAddress, values.safeName)
}
return ( return (
<React.Fragment> <React.Fragment>
<Block margin="lg"> <GnoForm onSubmit={handleSubmit}>
<Paragraph size="lg" color="primary" noMargin> {() => (
Details <React.Fragment>
<Block className={classes.formContainer}>
<Paragraph noMargin className={classes.title} size="lg">
Modify Safe name
</Paragraph> </Paragraph>
<Block className={classes.root}>
<Field
name="safeName"
component={TextField}
type="text"
validate={composeValidators(required, minMaxLength(1, 50))}
placeholder="Safe name*"
text="Safe name*"
defaultValue={safeName}
/>
</Block> </Block>
</Block>
<Hairline />
<Row style={controlsStyle} align="end" grow> <Row style={controlsStyle} align="end" grow>
<Col end="xs"> <Col end="xs">
<Button <Button
@ -42,15 +75,16 @@ class UpdateSafeName extends React.Component<Props, State> {
size="small" size="small"
variant="contained" variant="contained"
color="primary" color="primary"
onClick={() => {}}
> >
SAVE SAVE
</Button> </Button>
</Col> </Col>
</Row> </Row>
</React.Fragment> </React.Fragment>
)}
</GnoForm>
</React.Fragment>
) )
}
} }
export default withStyles(styles)(UpdateSafeName) export default withStyles(styles)(UpdateSafeName)

View File

@ -2,6 +2,7 @@
import * as React from 'react' import * as React from 'react'
import cn from 'classnames' import cn from 'classnames'
import { List } from 'immutable' import { List } from 'immutable'
import { connect } from 'react-redux'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
import Block from '~/components/layout/Block' import Block from '~/components/layout/Block'
import Col from '~/components/layout/Col' import Col from '~/components/layout/Col'
@ -11,6 +12,8 @@ import Paragraph from '~/components/layout/Paragraph'
import Hairline from '~/components/layout/Hairline' import Hairline from '~/components/layout/Hairline'
import type { Owner } from '~/routes/safe/store/models/owner' import type { Owner } from '~/routes/safe/store/models/owner'
import ThresholdSettings from './ThresholdSettings' import ThresholdSettings from './ThresholdSettings'
import UpdateSafeName from './UpdateSafeName'
import actions, { type Actions } from './actions'
import { styles } from './style' import { styles } from './style'
type State = { type State = {
@ -18,7 +21,7 @@ type State = {
menuOptionIndex: number, menuOptionIndex: number,
} }
type Props = { type Props = Actions & {
classes: Object, classes: Object,
granted: boolean, granted: boolean,
etherScanLink: string, etherScanLink: string,
@ -52,7 +55,15 @@ class Settings extends React.Component<Props, State> {
render() { render() {
const { showRemoveSafe, menuOptionIndex } = this.state const { showRemoveSafe, menuOptionIndex } = this.state
const { const {
classes, granted, etherScanLink, safeAddress, safeName, owners, threshold, createTransaction, classes,
granted,
etherScanLink,
safeAddress,
safeName,
owners,
threshold,
createTransaction,
updateSafeName,
} = this.props } = this.props
return ( return (
@ -113,7 +124,13 @@ class Settings extends React.Component<Props, State> {
</Col> </Col>
<Col xs={9} layout="column"> <Col xs={9} layout="column">
<Block className={classes.container}> <Block className={classes.container}>
{menuOptionIndex === 1 && <p>To be done</p>} {menuOptionIndex === 1 && (
<UpdateSafeName
safeAddress={safeAddress}
safeName={safeName}
updateSafeName={updateSafeName}
/>
)}
{granted && menuOptionIndex === 2 && <p>To be done</p>} {granted && menuOptionIndex === 2 && <p>To be done</p>}
{granted && menuOptionIndex === 3 && ( {granted && menuOptionIndex === 3 && (
<ThresholdSettings <ThresholdSettings
@ -132,4 +149,9 @@ class Settings extends React.Component<Props, State> {
} }
} }
export default withStyles(styles)(Settings) const settingsComponent = withStyles(styles)(Settings)
export default connect(
undefined,
actions,
)(settingsComponent)