From e863bc5376b814d68942cdec4f9506b067ee29b2 Mon Sep 17 00:00:00 2001
From: mmv <mmvsha73@gmail.com>
Date: Mon, 8 Jul 2019 19:05:57 +0400
Subject: [PATCH] add executor label to owners list in exapnded tx view

---
 .../TxsTable/ExpandedTx/OwnersList/index.jsx  | 48 ++++++++++++-------
 .../TxsTable/ExpandedTx/index.jsx             | 16 +++++--
 src/theme/mui.js                              |  5 ++
 3 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/OwnersList/index.jsx b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/OwnersList/index.jsx
index 5e2761ab..adc1be68 100644
--- a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/OwnersList/index.jsx
+++ b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/OwnersList/index.jsx
@@ -7,6 +7,7 @@ import MuiList from '@material-ui/core/List'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
 import ListItemText from '@material-ui/core/ListItemText'
+import Chip from '@material-ui/core/Chip';
 import Identicon from '~/components/Identicon'
 import Hairline from '~/components/layout/Hairline'
 import { type Owner } from '~/routes/safe/store/models/owner'
@@ -15,9 +16,16 @@ import { secondary } from '~/theme/variables'
 import { shortVersionOf } from '~/logic/wallets/ethAddresses'
 import { styles } from './style'
 
-type Props = {
+type ListProps = {
   owners: List<Owner>,
   classes: Object,
+  executionConfirmation?: Owner,
+}
+
+type OwnerProps = {
+  owner: Owner,
+  classes: Object,
+  isExecutor?: boolean,
 }
 
 const openIconStyle = {
@@ -25,25 +33,31 @@ const openIconStyle = {
   color: secondary,
 }
 
-const OwnersList = ({ owners, classes }: Props) => (
+const OwnerComponent = withStyles(styles)(({ owner, classes, isExecutor }: OwnerProps) => (
+  <ListItem key={owner.address} className={classes.owner}>
+    <ListItemIcon>
+      <Identicon address={owner.address} diameter={32} className={classes.icon} />
+    </ListItemIcon>
+    <ListItemText
+      primary={owner.name}
+      secondary={(
+        <a href={getEtherScanLink(owner.address, 'rinkeby')} target="_blank" rel="noopener noreferrer">
+          {shortVersionOf(owner.address, 4)}
+          {' '}
+          <OpenInNew style={openIconStyle} />
+        </a>
+      )}
+    />
+    {isExecutor && <Chip label="EXECUTOR" color="secondary" />}
+  </ListItem>
+))
+
+const OwnersList = ({ owners, classes, executionConfirmation }: ListProps) => (
   <>
     <MuiList className={classes.ownersList}>
+      {executionConfirmation && <OwnerComponent owner={executionConfirmation} isExecutor />}
       {owners.map(owner => (
-        <ListItem key={owner.address} className={classes.owner}>
-          <ListItemIcon>
-            <Identicon address={owner.address} diameter={32} className={classes.icon} />
-          </ListItemIcon>
-          <ListItemText
-            primary={owner.name}
-            secondary={(
-              <a href={getEtherScanLink(owner.address, 'rinkeby')} target="_blank" rel="noopener noreferrer">
-                {shortVersionOf(owner.address, 4)}
-                {' '}
-                <OpenInNew style={openIconStyle} />
-              </a>
-            )}
-          />
-        </ListItem>
+        <OwnerComponent key={owner.address} owner={owner} />
       ))}
     </MuiList>
     <Hairline color="#c8ced4" />
diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx
index e2d4aad6..9c65de04 100644
--- a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx
+++ b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx
@@ -84,9 +84,15 @@ const ExpandedTx = ({
   const ownersUnconfirmed = []
 
   let currentUserAlreadyConfirmed = false
+  let executionConfirmation
   owners.forEach((owner) => {
-    if (tx.confirmations.find(conf => conf.owner.address === owner.address)) {
-      ownersWhoConfirmed.push(owner)
+    const ownerConfirmation = tx.confirmations.find(conf => conf.owner.address === owner.address)
+    if (ownerConfirmation) {
+      if (ownerConfirmation.type === TX_TYPE_CONFIRMATION) {
+        ownersWhoConfirmed.push(owner)
+      } else {
+        executionConfirmation = owner
+      }
 
       if (owner.address === userAddress) {
         currentUserAlreadyConfirmed = true
@@ -175,7 +181,11 @@ to:
               </Tabs>
               <Hairline color="#c8ced4" />
             </Row>
-            <Row>{tabIndex === 0 && <OwnersList owners={ownersWhoConfirmed} />}</Row>
+            <Row>
+              {tabIndex === 0 && (
+                <OwnersList owners={ownersWhoConfirmed} executionConfirmation={executionConfirmation} />
+              )}
+            </Row>
             <Row>{tabIndex === 1 && <OwnersList owners={ownersUnconfirmed} />}</Row>
             {granted && displayButtonRow && (
               <ButtonRow
diff --git a/src/theme/mui.js b/src/theme/mui.js
index a575ff23..14f32c67 100644
--- a/src/theme/mui.js
+++ b/src/theme/mui.js
@@ -84,6 +84,11 @@ export default createMuiTheme({
         padding: '24px 0 0 15px',
       },
     },
+    MuiChip: {
+      root: {
+        fontFamily: 'Roboto Mono, monospace',
+      },
+    },
     MuiStepIcon: {
       root: {
         fontSize: '22px',