From ccee257a3983c54d04ff682b18d90c0f929eddc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= <germaga92@gmail.com>
Date: Tue, 11 Jun 2019 09:47:52 +0200
Subject: [PATCH] Add review screen in modal for replace an owner

---
 .../screens/Review/index.jsx                  | 207 ++++++++++++++++++
 .../ReplaceOwnerModal/screens/Review/style.js |  83 +++++++
 2 files changed, 290 insertions(+)
 create mode 100644 src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx
 create mode 100644 src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.js

diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx
new file mode 100644
index 00000000..6302e690
--- /dev/null
+++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx
@@ -0,0 +1,207 @@
+// @flow
+import React from 'react'
+import { List } from 'immutable'
+import classNames from 'classnames'
+import { withStyles } from '@material-ui/core/styles'
+import OpenInNew from '@material-ui/icons/OpenInNew'
+import Close from '@material-ui/icons/Close'
+import IconButton from '@material-ui/core/IconButton'
+import Identicon from '~/components/Identicon'
+import Link from '~/components/layout/Link'
+import Paragraph from '~/components/layout/Paragraph'
+import Row from '~/components/layout/Row'
+import GnoForm from '~/components/forms/GnoForm'
+import Col from '~/components/layout/Col'
+import Button from '~/components/layout/Button'
+import Block from '~/components/layout/Block'
+import Hairline from '~/components/layout/Hairline'
+import Field from '~/components/forms/Field'
+import TextField from '~/components/forms/TextField'
+import type { Owner } from '~/routes/safe/store/models/owner'
+import { getEtherScanLink } from '~/logic/wallets/getWeb3'
+import { secondary } from '~/theme/variables'
+import { styles } from './style'
+
+const openIconStyle = {
+  height: '16px',
+  color: secondary,
+}
+
+type Props = {
+  onClose: () => void,
+  classes: Object,
+  safeName: string,
+  owners: List<Owner>,
+  network: string,
+  values: Object,
+  ownerAddress: string,
+  ownerName: string,
+  onClickBack: Function,
+  onSubmit: Function,
+}
+
+const ReviewRemoveOwner = ({
+  classes,
+  onClose,
+  safeName,
+  owners,
+  network,
+  values,
+  ownerAddress,
+  ownerName,
+  onClickBack,
+  onSubmit,
+}: Props) => {
+  const handleSubmit = () => {
+    onSubmit()
+  }
+
+  return (
+    <React.Fragment>
+      <Row align="center" grow className={classes.heading}>
+        <Paragraph weight="bolder" className={classes.manage} noMargin>
+          Replace owner
+        </Paragraph>
+        <Paragraph className={classes.annotation}>2 of 2</Paragraph>
+        <IconButton onClick={onClose} disableRipple>
+          <Close className={classes.closeIcon} />
+        </IconButton>
+      </Row>
+      <Hairline />
+      <Block className={classes.formContainer}>
+        <Row className={classes.root}>
+          <Col xs={4} layout="column">
+            <Block className={classes.details}>
+              <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}>
+                  {values.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.get('address') != ownerAddress && (
+              <React.Fragment key={owner.get('address')}>
+                <Row className={classes.owner}>
+                  <Col xs={1} align="center">
+                    <Identicon address={owner.get('address')} diameter={32} />
+                  </Col>
+                  <Col xs={11}>
+                    <Block className={classNames(classes.name, classes.userName)}>
+                      <Paragraph weight="bolder" size="lg" noMargin>
+                        {owner.get('name')}
+                      </Paragraph>
+                      <Block align="center" className={classes.user}>
+                        <Paragraph size="md" color="disabled" noMargin>
+                          {owner.get('address')}
+                        </Paragraph>
+                        <Link className={classes.open} to={getEtherScanLink(owner.get('address'), network)} target="_blank">
+                          <OpenInNew style={openIconStyle} />
+                        </Link>
+                      </Block>
+                    </Block>
+                  </Col>
+                </Row>
+                <Hairline />
+              </React.Fragment>
+            ))}
+            <Row className={classes.info} align="center">
+              <Paragraph weight="bolder" noMargin color="primary" size="md">
+                REMOVING OWNER &darr;
+              </Paragraph>
+            </Row>
+            <Hairline />
+            <Row className={classes.selectedOwnerRemoved}>
+              <Col xs={1} align="center">
+                <Identicon address={ownerAddress} diameter={32} />
+              </Col>
+              <Col xs={11}>
+                <Block className={classNames(classes.name, classes.userName)}>
+                  <Paragraph weight="bolder" size="lg" noMargin>
+                    {ownerName}
+                  </Paragraph>
+                  <Block align="center" className={classes.user}>
+                    <Paragraph size="md" color="disabled" noMargin>
+                      {ownerAddress}
+                    </Paragraph>
+                    <Link className={classes.open} to={getEtherScanLink(ownerAddress, network)} target="_blank">
+                      <OpenInNew style={openIconStyle} />
+                    </Link>
+                  </Block>
+                </Block>
+              </Col>
+            </Row>
+            <Row className={classes.info} align="center">
+              <Paragraph weight="bolder" noMargin color="primary" size="md">
+                ADDING NEW OWNER &darr;
+              </Paragraph>
+            </Row>
+            <Hairline />
+            <Row className={classes.selectedOwnerAdded}>
+              <Col xs={1} align="center">
+                <Identicon address={values.ownerAddress} diameter={32} />
+              </Col>
+              <Col xs={11}>
+                <Block className={classNames(classes.name, classes.userName)}>
+                  <Paragraph weight="bolder" size="lg" noMargin>
+                    {values.ownerName}
+                  </Paragraph>
+                  <Block align="center" className={classes.user}>
+                    <Paragraph size="md" color="disabled" noMargin>
+                      {values.ownerAddress}
+                    </Paragraph>
+                    <Link className={classes.open} to={getEtherScanLink(values.ownerAddress, network)} target="_blank">
+                      <OpenInNew style={openIconStyle} />
+                    </Link>
+                  </Block>
+                </Block>
+              </Col>
+            </Row>
+            <Hairline />
+          </Col>
+        </Row>
+      </Block>
+      <Hairline />
+      <Row align="center" className={classes.buttonRow}>
+        <Button className={classes.button} minWidth={140} onClick={onClickBack}>
+          Back
+        </Button>
+        <Button
+          type="submit"
+          onClick={handleSubmit}
+          className={classes.button}
+          variant="contained"
+          minWidth={140}
+          color="primary"
+          data-testid="review-tx-btn"
+        >
+          Submit
+        </Button>
+      </Row>
+    </React.Fragment>
+  )
+}
+
+export default withStyles(styles)(ReviewRemoveOwner)
diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.js b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.js
new file mode 100644
index 00000000..29241ceb
--- /dev/null
+++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.js
@@ -0,0 +1,83 @@
+// @flow
+import {
+  lg, md, sm, border, background,
+} from '~/theme/variables'
+
+export const styles = () => ({
+  root: {
+    height: '372px',
+  },
+  heading: {
+    padding: `${sm} ${lg}`,
+    justifyContent: 'flex-start',
+    boxSizing: 'border-box',
+    maxHeight: '75px',
+  },
+  annotation: {
+    letterSpacing: '-1px',
+    color: '#a2a8ba',
+    marginRight: 'auto',
+    marginLeft: '20px',
+  },
+  manage: {
+    fontSize: '24px',
+  },
+  closeIcon: {
+    height: '35px',
+    width: '35px',
+  },
+  info: {
+    backgroundColor: background,
+    padding: sm,
+    justifyContent: 'center',
+    textAlign: 'center',
+    flexDirection: 'column',
+  },
+  buttonRow: {
+    height: '84px',
+    justifyContent: 'center',
+  },
+  details: {
+    padding: lg,
+    borderRight: `solid 1px ${border}`,
+    height: '100%',
+  },
+  owners: {
+    overflow: 'auto',
+    height: '100%',
+  },
+  ownersTitle: {
+    padding: lg,
+  },
+  owner: {
+    padding: sm,
+    alignItems: 'center',
+  },
+  name: {
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  },
+  userName: {
+    whiteSpace: 'nowrap',
+  },
+  selectedOwnerRemoved: {
+    padding: sm,
+    alignItems: 'center',
+    backgroundColor: '#ffe6ea',
+  },
+  selectedOwnerAdded: {
+    padding: sm,
+    alignItems: 'center',
+    backgroundColor: '#fff3e2',
+  },
+  user: {
+    justifyContent: 'left',
+  },
+  open: {
+    paddingLeft: sm,
+    width: 'auto',
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  },
+})