Refactor add owner modal window
This commit is contained in:
parent
f619905b11
commit
fcbb02e56f
|
@ -65,14 +65,14 @@ const AddOwner = ({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const ownerSubmited = (newValues: Object) => {
|
const ownerSubmitted = (newValues: Object) => {
|
||||||
values.ownerName = newValues.ownerName
|
values.ownerName = newValues.ownerName
|
||||||
values.ownerAddress = newValues.ownerAddress
|
values.ownerAddress = newValues.ownerAddress
|
||||||
setValues(values)
|
setValues(values)
|
||||||
setActiveScreen('selectThreshold')
|
setActiveScreen('selectThreshold')
|
||||||
}
|
}
|
||||||
|
|
||||||
const thresholdSubmited = (newValues: Object) => {
|
const thresholdSubmitted = (newValues: Object) => {
|
||||||
values.threshold = newValues.threshold
|
values.threshold = newValues.threshold
|
||||||
setValues(values)
|
setValues(values)
|
||||||
setActiveScreen('reviewAddOwner')
|
setActiveScreen('reviewAddOwner')
|
||||||
|
@ -95,8 +95,8 @@ const AddOwner = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
title="Send Tokens"
|
title="Add owner to Safe"
|
||||||
description="Send Tokens Form"
|
description="Add owner to Safe"
|
||||||
handleClose={onClose}
|
handleClose={onClose}
|
||||||
open={isOpen}
|
open={isOpen}
|
||||||
paperClassName={classes.biggerModalWindow}
|
paperClassName={classes.biggerModalWindow}
|
||||||
|
@ -105,22 +105,16 @@ const AddOwner = ({
|
||||||
{activeScreen === 'selectOwner' && (
|
{activeScreen === 'selectOwner' && (
|
||||||
<OwnerForm
|
<OwnerForm
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
setActiveScreen={setActiveScreen}
|
onSubmit={ownerSubmitted}
|
||||||
safeAddress={safeAddress}
|
|
||||||
safeName={safeName}
|
|
||||||
onSubmit={ownerSubmited}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{activeScreen === 'selectThreshold' && (
|
{activeScreen === 'selectThreshold' && (
|
||||||
<ThresholdForm
|
<ThresholdForm
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
setActiveScreen={setActiveScreen}
|
|
||||||
safeAddress={safeAddress}
|
|
||||||
safeName={safeName}
|
|
||||||
owners={owners}
|
owners={owners}
|
||||||
threshold={threshold}
|
threshold={threshold}
|
||||||
onClickBack={onClickBack}
|
onClickBack={onClickBack}
|
||||||
onSubmit={thresholdSubmited}
|
onSubmit={thresholdSubmitted}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{activeScreen === 'reviewAddOwner' && (
|
{activeScreen === 'reviewAddOwner' && (
|
||||||
|
|
|
@ -24,16 +24,12 @@ import { styles } from './style'
|
||||||
type Props = {
|
type Props = {
|
||||||
onClose: () => void,
|
onClose: () => void,
|
||||||
classes: Object,
|
classes: Object,
|
||||||
safeAddress: string,
|
|
||||||
safeName: string,
|
|
||||||
onSubmit: Function,
|
onSubmit: Function,
|
||||||
}
|
}
|
||||||
|
|
||||||
const OwnerForm = ({
|
const OwnerForm = ({
|
||||||
classes,
|
classes,
|
||||||
onClose,
|
onClose,
|
||||||
safeAddress,
|
|
||||||
safeName,
|
|
||||||
onSubmit,
|
onSubmit,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
const handleSubmit = (values) => {
|
const handleSubmit = (values) => {
|
||||||
|
|
|
@ -93,7 +93,7 @@ const ReviewAddOwner = ({
|
||||||
<Col xs={8} layout="column" className={classes.owners}>
|
<Col xs={8} layout="column" className={classes.owners}>
|
||||||
<Row className={classes.ownersTitle}>
|
<Row className={classes.ownersTitle}>
|
||||||
<Paragraph size="lg" color="primary" noMargin>
|
<Paragraph size="lg" color="primary" noMargin>
|
||||||
{owners.size + 1} Safe owners
|
{owners.size + 1} Safe owner(s)
|
||||||
</Paragraph>
|
</Paragraph>
|
||||||
</Row>
|
</Row>
|
||||||
<Hairline />
|
<Hairline />
|
||||||
|
@ -128,7 +128,7 @@ const ReviewAddOwner = ({
|
||||||
</Paragraph>
|
</Paragraph>
|
||||||
</Row>
|
</Row>
|
||||||
<Hairline />
|
<Hairline />
|
||||||
<Row className={classes.newOwner}>
|
<Row className={classes.selectedOwner}>
|
||||||
<Col xs={1} align="center">
|
<Col xs={1} align="center">
|
||||||
<Identicon address={values.ownerAddress} diameter={32} />
|
<Identicon address={values.ownerAddress} diameter={32} />
|
||||||
</Col>
|
</Col>
|
||||||
|
@ -166,7 +166,7 @@ const ReviewAddOwner = ({
|
||||||
color="primary"
|
color="primary"
|
||||||
data-testid="review-tx-btn"
|
data-testid="review-tx-btn"
|
||||||
>
|
>
|
||||||
Next
|
Submit
|
||||||
</Button>
|
</Button>
|
||||||
</Row>
|
</Row>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
|
|
|
@ -60,7 +60,7 @@ export const styles = () => ({
|
||||||
userName: {
|
userName: {
|
||||||
whiteSpace: 'nowrap',
|
whiteSpace: 'nowrap',
|
||||||
},
|
},
|
||||||
newOwner: {
|
selectedOwner: {
|
||||||
padding: sm,
|
padding: sm,
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
backgroundColor: '#fff3e2',
|
backgroundColor: '#fff3e2',
|
||||||
|
|
|
@ -28,8 +28,6 @@ import { styles } from './style'
|
||||||
type Props = {
|
type Props = {
|
||||||
onClose: () => void,
|
onClose: () => void,
|
||||||
classes: Object,
|
classes: Object,
|
||||||
safeAddress: string,
|
|
||||||
safeName: string,
|
|
||||||
owners: List<Owner>,
|
owners: List<Owner>,
|
||||||
threshold: number,
|
threshold: number,
|
||||||
onClickBack: Function,
|
onClickBack: Function,
|
||||||
|
@ -39,8 +37,6 @@ type Props = {
|
||||||
const ThresholdForm = ({
|
const ThresholdForm = ({
|
||||||
classes,
|
classes,
|
||||||
onClose,
|
onClose,
|
||||||
safeAddress,
|
|
||||||
safeName,
|
|
||||||
owners,
|
owners,
|
||||||
threshold,
|
threshold,
|
||||||
onClickBack,
|
onClickBack,
|
||||||
|
@ -127,7 +123,7 @@ const ThresholdForm = ({
|
||||||
color="primary"
|
color="primary"
|
||||||
data-testid="review-tx-btn"
|
data-testid="review-tx-btn"
|
||||||
>
|
>
|
||||||
Next
|
Review
|
||||||
</Button>
|
</Button>
|
||||||
</Row>
|
</Row>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
|
|
Loading…
Reference in New Issue