add executor label to owners list in exapnded tx view

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,10 +33,7 @@ const openIconStyle = {
   color: secondary,
 }
 
-const OwnersList = ({ owners, classes }: Props) => (
-  <>
-    <MuiList className={classes.ownersList}>
-      {owners.map(owner => (
+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} />
@@ -43,7 +48,16 @@ const OwnersList = ({ owners, classes }: Props) => (
         </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 => (
+        <OwnerComponent key={owner.address} owner={owner} />
       ))}
     </MuiList>
     <Hairline color="#c8ced4" />

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)) {
+    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

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',