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

Add etherscan/copy buttons to replace owner flow

This commit is contained in:
Mikhail Mikheev 2019-10-09 17:47:19 +04:00
parent e583b041a0
commit 85151687e8
4 changed files with 146 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/index.jsx
View File

@ -5,7 +5,8 @@ import { List } from 'immutable'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
import Close from '@material-ui/icons/Close' import Close from '@material-ui/icons/Close'
import IconButton from '@material-ui/core/IconButton' import IconButton from '@material-ui/core/IconButton'
import OpenInNew from '@material-ui/icons/OpenInNew' import EtherscanBtn from '~/components/EtherscanBtn'
import CopyBtn from '~/components/CopyBtn'
import Paragraph from '~/components/layout/Paragraph' import Paragraph from '~/components/layout/Paragraph'
import Row from '~/components/layout/Row' import Row from '~/components/layout/Row'
import GnoForm from '~/components/forms/GnoForm' import GnoForm from '~/components/forms/GnoForm'
@ -17,24 +18,16 @@ import Hairline from '~/components/layout/Hairline'
import Field from '~/components/forms/Field' import Field from '~/components/forms/Field'
import TextField from '~/components/forms/TextField' import TextField from '~/components/forms/TextField'
import Identicon from '~/components/Identicon' import Identicon from '~/components/Identicon'
import Link from '~/components/layout/Link'
import { getEtherScanLink } from '~/logic/wallets/getWeb3'
import { type Owner } from '~/routes/safe/store/models/owner' import { type Owner } from '~/routes/safe/store/models/owner'
import { import {
composeValidators, required, minMaxLength, uniqueAddress, composeValidators, required, minMaxLength, uniqueAddress,
} from '~/components/forms/validator' } from '~/components/forms/validator'
import { styles } from './style' import { styles } from './style'
import { secondary } from '~/theme/variables'
export const REPLACE_OWNER_NAME_INPUT_TEST_ID = 'replace-owner-name-input' export const REPLACE_OWNER_NAME_INPUT_TEST_ID = 'replace-owner-name-input'
export const REPLACE_OWNER_ADDRESS_INPUT_TEST_ID = 'replace-owner-address-testid' export const REPLACE_OWNER_ADDRESS_INPUT_TEST_ID = 'replace-owner-address-testid'
export const REPLACE_OWNER_NEXT_BTN_TEST_ID = 'replace-owner-next-btn' export const REPLACE_OWNER_NEXT_BTN_TEST_ID = 'replace-owner-next-btn'
const openIconStyle = {
height: '16px',
color: secondary,
}
const formMutators = { const formMutators = {
setOwnerAddress: (args, state, utils) => { setOwnerAddress: (args, state, utils) => {
utils.changeValue(state, 'ownerAddress', () => args[0]) utils.changeValue(state, 'ownerAddress', () => args[0])
@ -96,16 +89,11 @@ const OwnerForm = ({
{ownerName} {ownerName}
</Paragraph> </Paragraph>
<Block justify="center" className={classes.user}> <Block justify="center" className={classes.user}>
<Paragraph size="md" color="disabled" noMargin> <Paragraph size="md" className={classes.address} color="disabled" noMargin>
{ownerAddress} {ownerAddress}
</Paragraph> </Paragraph>
<Link <CopyBtn content={ownerAddress} />
className={classes.open} <EtherscanBtn type="address" value={ownerAddress} />
to={getEtherScanLink('address', ownerAddress)}
target="_blank"
>
<OpenInNew style={openIconStyle} />
</Link>
</Block> </Block>
</Block> </Block>
</Col> </Col>

3
src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/style.js
View File

@ -16,6 +16,9 @@ export const styles = () => ({
marginLeft: '20px', marginLeft: '20px',
lineHeight: 'normal', lineHeight: 'normal',
}, },
address: {
marginRight: sm,
},
manage: { manage: {
fontSize: '24px', fontSize: '24px',
}, },

292
src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx
View File

@ -3,11 +3,11 @@ import React from 'react'
import { List } from 'immutable' import { List } from 'immutable'
import classNames from 'classnames' import classNames from 'classnames'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
import OpenInNew from '@material-ui/icons/OpenInNew'
import Close from '@material-ui/icons/Close' import Close from '@material-ui/icons/Close'
import IconButton from '@material-ui/core/IconButton' import IconButton from '@material-ui/core/IconButton'
import EtherscanBtn from '~/components/EtherscanBtn'
import CopyBtn from '~/components/CopyBtn'
import Identicon from '~/components/Identicon' import Identicon from '~/components/Identicon'
import Link from '~/components/layout/Link'
import Paragraph from '~/components/layout/Paragraph' import Paragraph from '~/components/layout/Paragraph'
import Row from '~/components/layout/Row' import Row from '~/components/layout/Row'
import Col from '~/components/layout/Col' import Col from '~/components/layout/Col'
@ -15,17 +15,10 @@ import Button from '~/components/layout/Button'
import Block from '~/components/layout/Block' import Block from '~/components/layout/Block'
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 { getEtherScanLink } from '~/logic/wallets/getWeb3'
import { secondary } from '~/theme/variables'
import { styles } from './style' import { styles } from './style'
export const REPLACE_OWNER_SUBMIT_BTN_TEST_ID = 'replace-owner-submit-btn' export const REPLACE_OWNER_SUBMIT_BTN_TEST_ID = 'replace-owner-submit-btn'
const openIconStyle = {
height: '16px',
color: secondary,
}
type Props = { type Props = {
onClose: () => void, onClose: () => void,
classes: Object, classes: Object,
@ -50,165 +43,150 @@ const ReviewRemoveOwner = ({
onClickBack, onClickBack,
threshold, threshold,
onSubmit, onSubmit,
}: Props) => { }: Props) => (
const handleSubmit = () => { <>
onSubmit() <Row align="center" grow className={classes.heading}>
} <Paragraph weight="bolder" className={classes.manage} noMargin>
return (
<>
<Row align="center" grow className={classes.heading}>
<Paragraph weight="bolder" className={classes.manage} noMargin>
Replace owner Replace owner
</Paragraph> </Paragraph>
<Paragraph className={classes.annotation}>2 of 2</Paragraph> <Paragraph className={classes.annotation}>2 of 2</Paragraph>
<IconButton onClick={onClose} disableRipple> <IconButton onClick={onClose} disableRipple>
<Close className={classes.closeIcon} /> <Close className={classes.closeIcon} />
</IconButton> </IconButton>
</Row> </Row>
<Hairline /> <Hairline />
<Block className={classes.formContainer}> <Block className={classes.formContainer}>
<Row className={classes.root}> <Row className={classes.root}>
<Col xs={4} layout="column"> <Col xs={4} layout="column">
<Block className={classes.details}> <Block className={classes.details}>
<Block margin="lg"> <Block margin="lg">
<Paragraph size="lg" color="primary" noMargin>
Details
</Paragraph>
</Block>
<Block margin="lg">
<Paragraph size="sm" color="disabled" noMargin>
Safe name
</Paragraph>
<Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}>
{safeName}
</Paragraph>
</Block>
<Block margin="lg">
<Paragraph size="sm" color="disabled" noMargin>
Any transaction requires the confirmation of:
</Paragraph>
<Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}>
{`${threshold} out of ${owners.size} owner(s)`}
</Paragraph>
</Block>
</Block>
</Col>
<Col xs={8} layout="column" className={classes.owners}>
<Row className={classes.ownersTitle}>
<Paragraph size="lg" color="primary" noMargin> <Paragraph size="lg" color="primary" noMargin>
{owners.size} Details
{' '}
Safe owner(s)
</Paragraph> </Paragraph>
</Row> </Block>
<Hairline /> <Block margin="lg">
{owners.map( <Paragraph size="sm" color="disabled" noMargin>
(owner) => owner.address !== ownerAddress && ( Safe name
<React.Fragment key={owner.address}> </Paragraph>
<Row className={classes.owner}> <Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}>
<Col xs={1} align="center"> {safeName}
<Identicon address={owner.address} diameter={32} /> </Paragraph>
</Col> </Block>
<Col xs={11}> <Block margin="lg">
<Block className={classNames(classes.name, classes.userName)}> <Paragraph size="sm" color="disabled" noMargin>
<Paragraph weight="bolder" size="lg" noMargin> Any transaction requires the confirmation of:
{owner.name} </Paragraph>
<Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}>
{`${threshold} out of ${owners.size} owner(s)`}
</Paragraph>
</Block>
</Block>
</Col>
<Col xs={8} layout="column" className={classes.owners}>
<Row className={classes.ownersTitle}>
<Paragraph size="lg" color="primary" noMargin>
{`${owners.size} Safe owner(s)`}
</Paragraph>
</Row>
<Hairline />
{owners.map(
(owner) => owner.address !== ownerAddress && (
<React.Fragment key={owner.address}>
<Row className={classes.owner}>
<Col xs={1} align="center">
<Identicon address={owner.address} diameter={32} />
</Col>
<Col xs={11}>
<Block className={classNames(classes.name, classes.userName)}>
<Paragraph weight="bolder" size="lg" noMargin>
{owner.name}
</Paragraph>
<Block justify="center" className={classes.user}>
<Paragraph size="md" color="disabled" className={classes.address} noMargin>
{owner.address}
</Paragraph> </Paragraph>
<Block justify="center" className={classes.user}> <CopyBtn content={owner.address} />
<Paragraph size="md" color="disabled" noMargin> <EtherscanBtn type="address" value={owner.address} />
{owner.address}
</Paragraph>
<Link
className={classes.open}
to={getEtherScanLink('address', owner.address)}
target="_blank"
>
<OpenInNew style={openIconStyle} />
</Link>
</Block>
</Block> </Block>
</Col> </Block>
</Row> </Col>
<Hairline /> </Row>
</React.Fragment> <Hairline />
), </React.Fragment>
)} ),
<Row className={classes.info} align="center"> )}
<Paragraph weight="bolder" noMargin color="primary" size="md"> <Row className={classes.info} align="center">
<Paragraph weight="bolder" noMargin color="primary" size="md">
REMOVING OWNER &darr; REMOVING OWNER &darr;
</Paragraph> </Paragraph>
</Row> </Row>
<Hairline /> <Hairline />
<Row className={classes.selectedOwnerRemoved}> <Row className={classes.selectedOwnerRemoved}>
<Col xs={1} align="center"> <Col xs={1} align="center">
<Identicon address={ownerAddress} diameter={32} /> <Identicon address={ownerAddress} diameter={32} />
</Col> </Col>
<Col xs={11}> <Col xs={11}>
<Block className={classNames(classes.name, classes.userName)}> <Block className={classNames(classes.name, classes.userName)}>
<Paragraph weight="bolder" size="lg" noMargin> <Paragraph weight="bolder" size="lg" noMargin>
{ownerName} {ownerName}
</Paragraph>
<Block justify="center" className={classes.user}>
<Paragraph size="md" color="disabled" className={classes.address} noMargin>
{ownerAddress}
</Paragraph> </Paragraph>
<Block justify="center" className={classes.user}> <CopyBtn content={ownerAddress} />
<Paragraph size="md" color="disabled" noMargin> <EtherscanBtn type="address" value={ownerAddress} />
{ownerAddress}
</Paragraph>
<Link className={classes.open} to={getEtherScanLink('address', ownerAddress)} target="_blank">
<OpenInNew style={openIconStyle} />
</Link>
</Block>
</Block> </Block>
</Col> </Block>
</Row> </Col>
<Row className={classes.info} align="center"> </Row>
<Paragraph weight="bolder" noMargin color="primary" size="md"> <Row className={classes.info} align="center">
<Paragraph weight="bolder" noMargin color="primary" size="md">
ADDING NEW OWNER &darr; ADDING NEW OWNER &darr;
</Paragraph> </Paragraph>
</Row> </Row>
<Hairline /> <Hairline />
<Row className={classes.selectedOwnerAdded}> <Row className={classes.selectedOwnerAdded}>
<Col xs={1} align="center"> <Col xs={1} align="center">
<Identicon address={values.ownerAddress} diameter={32} /> <Identicon address={values.ownerAddress} diameter={32} />
</Col> </Col>
<Col xs={11}> <Col xs={11}>
<Block className={classNames(classes.name, classes.userName)}> <Block className={classNames(classes.name, classes.userName)}>
<Paragraph weight="bolder" size="lg" noMargin> <Paragraph weight="bolder" size="lg" noMargin>
{values.ownerName} {values.ownerName}
</Paragraph>
<Block justify="center" className={classes.user}>
<Paragraph size="md" color="disabled" className={classes.address} noMargin>
{values.ownerAddress}
</Paragraph> </Paragraph>
<Block justify="center" className={classes.user}> <CopyBtn content={values.ownerAddress} />
<Paragraph size="md" color="disabled" noMargin> <EtherscanBtn type="address" value={values.ownerAddress} />
{values.ownerAddress}
</Paragraph>
<Link className={classes.open} to={getEtherScanLink('address', values.ownerAddress)} target="_blank">
<OpenInNew style={openIconStyle} />
</Link>
</Block>
</Block> </Block>
</Col> </Block>
</Row> </Col>
<Hairline /> </Row>
</Col> <Hairline />
</Row> </Col>
</Block>
<Hairline />
<Row align="center" className={classes.buttonRow}>
<Button minWidth={140} minHeight={42} onClick={onClickBack}>
Back
</Button>
<Button
type="submit"
onClick={handleSubmit}
variant="contained"
minHeight={42}
minWidth={140}
color="primary"
testId={REPLACE_OWNER_SUBMIT_BTN_TEST_ID}
>
Submit
</Button>
</Row> </Row>
</> </Block>
) <Hairline />
} <Row align="center" className={classes.buttonRow}>
<Button minWidth={140} minHeight={42} onClick={onClickBack}>
Back
</Button>
<Button
type="submit"
onClick={onSubmit}
variant="contained"
minHeight={42}
minWidth={140}
color="primary"
testId={REPLACE_OWNER_SUBMIT_BTN_TEST_ID}
>
Submit
</Button>
</Row>
</>
)
export default withStyles(styles)(ReviewRemoveOwner) export default withStyles(styles)(ReviewRemoveOwner)

3
src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.js
View File

@ -22,6 +22,9 @@ export const styles = () => ({
manage: { manage: {
fontSize: '24px', fontSize: '24px',
}, },
address: {
marginRight: sm,
},
closeIcon: { closeIcon: {
height: '35px', height: '35px',
width: '35px', width: '35px',