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

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