Add update Safe name component

This commit is contained in:
Germán Martínez 2019-06-14 17:51:09 +02:00
parent 27585917aa
commit fae75d7599
3 changed files with 79 additions and 31 deletions

View File

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

View File

@ -1,10 +1,17 @@
// @flow
import * as React from 'react'
import React, { useState } from 'react'
import { withStyles } from '@material-ui/core/styles'
import Block from '~/components/layout/Block'
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 Paragraph from '~/components/layout/Paragraph'
import Hairline from '~/components/layout/Hairline'
import Button from '~/components/layout/Button'
import { sm, boldFont } from '~/theme/variables'
import { styles } from './style'
@ -21,36 +28,63 @@ const saveButtonStyle = {
type Props = {
classes: Object,
safeAddress: string,
safeName: string,
updateSafe: Funtion
}
class UpdateSafeName extends React.Component<Props, State> {
render() {
const { classes } = this.props
const UpdateSafeName = (props: Props) => {
const {
classes,
safeAddress,
safeName,
updateSafeName,
} = props
return (
<React.Fragment>
<Block margin="lg">
<Paragraph size="lg" color="primary" noMargin>
Details
</Paragraph>
</Block>
<Row style={controlsStyle} align="end" grow>
<Col end="xs">
<Button
type="submit"
style={saveButtonStyle}
size="small"
variant="contained"
color="primary"
onClick={() => {}}
>
SAVE
</Button>
</Col>
</Row>
</React.Fragment>
)
const handleSubmit = (values) => {
updateSafeName(safeAddress, values.safeName)
}
return (
<React.Fragment>
<GnoForm onSubmit={handleSubmit}>
{() => (
<React.Fragment>
<Block className={classes.formContainer}>
<Paragraph noMargin className={classes.title} size="lg">
Modify Safe name
</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>
<Hairline />
<Row style={controlsStyle} align="end" grow>
<Col end="xs">
<Button
type="submit"
style={saveButtonStyle}
size="small"
variant="contained"
color="primary"
>
SAVE
</Button>
</Col>
</Row>
</React.Fragment>
)}
</GnoForm>
</React.Fragment>
)
}
export default withStyles(styles)(UpdateSafeName)

View File

@ -1,5 +1,6 @@
// @flow
import * as React from 'react'
import { connect } from 'react-redux'
import { withStyles } from '@material-ui/core/styles'
import Block from '~/components/layout/Block'
import Col from '~/components/layout/Col'
@ -7,13 +8,15 @@ import Row from '~/components/layout/Row'
import RemoveSafeModal from './RemoveSafeModal'
import Paragraph from '~/components/layout/Paragraph'
import Hairline from '~/components/layout/Hairline'
import UpdateSafeName from './UpdateSafeName'
import actions, { type Actions } from './actions'
import { styles } from './style'
type State = {
showRemoveSafe: boolean,
}
type Props = {
type Props = Actions & {
classes: Object,
granted: boolean,
etherScanLink: string,
@ -49,6 +52,7 @@ class Settings extends React.Component<Props, State> {
etherScanLink,
safeAddress,
safeName,
updateSafeName,
} = this.props
return (
@ -98,7 +102,11 @@ class Settings extends React.Component<Props, State> {
<Col xs={9} layout="column">
<Block className={classes.container}>
{menuOptionIndex === 1 && (
<p>To be done</p>
<UpdateSafeName
safeAddress={safeAddress}
safeName={safeName}
updateSafeName={updateSafeName}
/>
)}
{granted && menuOptionIndex === 2 && (
<p>To be done</p>
@ -117,4 +125,9 @@ class Settings extends React.Component<Props, State> {
}
}
export default withStyles(styles)(Settings)
const settingsComponent = withStyles(styles)(Settings)
export default connect(
undefined,
actions,
)(settingsComponent)