show confirm button only if an owner has not confirmed tx, show button row only to owners

src/routes/safe/components/Layout.jsx

@@ -25,9 +25,14 @@ import Settings from './Settings'
 export const SETTINGS_TAB_BTN_TESTID = 'settings-tab-btn'
 export const SAFE_VIEW_NAME_HEADING_TESTID = 'safe-name-heading'
 
+type State = {
+  tabIndex: number,
+}
+
 type Props = SelectorProps & {
   classes: Object,
   granted: boolean,
+  updateSafe: Function,
   createTransaction: Function,
   fetchTransactions: Function,
 }
@@ -102,6 +107,7 @@ class Layout extends React.Component<Props, State> {
       fetchTransactions,
       updateSafe,
       transactions,
+      userAddress,
     } = this.props
     const { tabIndex } = this.state
 
@@ -160,6 +166,8 @@ class Layout extends React.Component<Props, State> {
             transactions={transactions}
             fetchTransactions={fetchTransactions}
             safeAddress={address}
+            userAddress={userAddress}
+            granted={granted}
           />
         )}
         {tabIndex === 2 && (

src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/ButtonRow/index.jsx

@@ -11,6 +11,7 @@ type Props = {
   onTxConfirm: Function,
   onTxCancel: Function,
   classes: Object,
+  showConfirmBtn: boolean,
 }
 
 const styles = () => ({
@@ -32,18 +33,22 @@ const styles = () => ({
   },
 })
 
-const ButtonRow = ({ classes, onTxCancel, onTxConfirm }: Props) => (
+const ButtonRow = ({
+  classes, onTxCancel, onTxConfirm, showConfirmBtn,
+}: Props) => (
   <Row align="center" className={classes.buttonRow}>
     <Button className={classes.button} variant="contained" minWidth={140} color="secondary" onClick={onTxCancel}>
       <BlockIcon className={classes.icon} />
       {' '}
-      Cancel TX
-    </Button>
-    <Button className={classes.button} variant="contained" minWidth={140} color="primary" onClick={onTxConfirm}>
-      <EditIcon className={classes.icon} />
-      {' '}
-      Confirm TX
+Cancel TX
     </Button>
+    {showConfirmBtn && (
+      <Button className={classes.button} variant="contained" minWidth={140} color="primary" onClick={onTxConfirm}>
+        <EditIcon className={classes.icon} />
+        {' '}
+Confirm TX
+      </Button>
+    )}
   </Row>
 )
 

src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx

@@ -32,6 +32,8 @@ type Props = {
   tx: Transaction,
   threshold: number,
   owners: List<Owner>,
+  granted: boolean,
+  userAddress: string,
 }
 
 type OpenModal = 'cancelTx' | 'approveTx' | null
@@ -47,7 +49,7 @@ const txStatusToLabel = {
 }
 
 const ExpandedTx = ({
-  classes, tx, threshold, owners,
+  classes, tx, threshold, owners, granted, userAddress,
 }: Props) => {
   const [tabIndex, setTabIndex] = useState<number>(0)
   const [openModal, setOpenModal] = useState<OpenModal>(null)
@@ -61,9 +63,15 @@ const ExpandedTx = ({
 
   const ownersWhoConfirmed = []
   const ownersUnconfirmed = []
+
+  let currentUserAlreadyConfirmed = false
   owners.forEach((owner) => {
     if (tx.confirmations.find(conf => conf.owner.address === owner.address)) {
       ownersWhoConfirmed.push(owner)
+
+      if (owner.address === userAddress) {
+        currentUserAlreadyConfirmed = true
+      }
     } else {
       ownersUnconfirmed.push(owner)
     }
@@ -117,7 +125,7 @@ const ExpandedTx = ({
                   {' '}
                   {tx.symbol}
                   {' '}
-                  to:
+to:
                 </Bold>
                 <br />
                 <a href={getEtherScanLink(tx.recipient, 'rinkeby')} target="_blank" rel="noopener noreferrer">
@@ -137,7 +145,13 @@ const ExpandedTx = ({
             </Row>
             <Row>{tabIndex === 0 && <OwnersList owners={ownersWhoConfirmed} />}</Row>
             <Row>{tabIndex === 1 && <OwnersList owners={ownersUnconfirmed} />}</Row>
-            <ButtonRow onTxConfirm={openApproveModal} onTxCancel={openCancelModal} />
+            {granted && (
+              <ButtonRow
+                onTxConfirm={openApproveModal}
+                onTxCancel={openCancelModal}
+                showConfirmBtn={!currentUserAlreadyConfirmed}
+              />
+            )}
           </Col>
         </Row>
       </Block>

src/routes/safe/components/TransactionsNew/TxsTable/index.jsx

@@ -32,12 +32,13 @@ type Props = {
   transactions: List<Transaction>,
   threshold: number,
   owners: List<Owner>,
+  userAddress: string,
+  granted: boolean,
 }
 
-const TxsTable = (props: Props) => {
-  const {
-    classes, transactions, threshold, owners,
-  } = props
+const TxsTable = ({
+  classes, transactions, threshold, owners, granted, userAddress,
+}: Props) => {
   const [expandedTx, setExpandedTx] = useState<string | null>(null)
 
   const handleTxExpand = (nonce) => {
@@ -100,6 +101,8 @@ const TxsTable = (props: Props) => {
                   tx={row[TX_TABLE_RAW_TX_ID]}
                   threshold={threshold}
                   owners={owners}
+                  granted={granted}
+                  userAddress={userAddress}
                 />
               </TableCell>
             </TableRow>

src/routes/safe/components/TransactionsNew/index.jsx

@@ -12,6 +12,8 @@ type Props = {
   fetchTransactions: Function,
   transactions: List<Transaction>,
   owners: List<Owner>,
+  userAddress: string,
+  granted: boolean,
 }
 
 class Transactions extends React.Component<Props, {}> {
@@ -22,13 +24,21 @@ class Transactions extends React.Component<Props, {}> {
   }
 
   render() {
-    const { transactions, owners, threshold } = this.props
+    const {
+      transactions, owners, threshold, userAddress, granted,
+    } = this.props
     const hasTransactions = transactions.size > 0
 
     return (
       <React.Fragment>
         {hasTransactions ? (
-          <TxsTable transactions={transactions} threshold={threshold} owners={owners} />
+          <TxsTable
+            transactions={transactions}
+            threshold={threshold}
+            owners={owners}
+            userAddress={userAddress}
+            granted={granted}
+          />
         ) : (
           <NoTransactions />
         )}