show confirmations(threshold) settings in RO mode

src/routes/safe/components/Settings/ManageOwners/index.jsx

@@ -20,7 +20,11 @@ import EditOwnerModal from './EditOwnerModal'
 import OwnerAddressTableCell from './OwnerAddressTableCell'
 import type { Owner } from '~/routes/safe/store/models/owner'
 import {
-  getOwnerData, generateColumns, OWNERS_TABLE_NAME_ID, OWNERS_TABLE_ADDRESS_ID, type OwnerRow,
+  getOwnerData,
+  generateColumns,
+  OWNERS_TABLE_NAME_ID,
+  OWNERS_TABLE_ADDRESS_ID,
+  type OwnerRow,
 } from './dataFetcher'
 import { lg, sm, boldFont } from '~/theme/variables'
 import { styles } from './style'
@@ -76,13 +80,17 @@ type State = {
 type Action = 'AddOwner' | 'EditOwner' | 'ReplaceOwner' | 'RemoveOwner'
 
 class ManageOwners extends React.Component<Props, State> {
-  state = {
-    selectedOwnerAddress: undefined,
-    selectedOwnerName: undefined,
-    showAddOwner: false,
-    showRemoveOwner: false,
-    showReplaceOwner: false,
-    showEditOwner: false,
+  constructor(props) {
+    super(props)
+  
+    this.state = {
+      selectedOwnerAddress: undefined,
+      selectedOwnerName: undefined,
+      showAddOwner: false,
+      showRemoveOwner: false,
+      showReplaceOwner: false,
+      showEditOwner: false,
+    }
   }
 
   onShow = (action: Action, row?: Object) => () => {
@@ -127,13 +135,15 @@ class ManageOwners extends React.Component<Props, State> {
     } = this.state
 
     const columns = generateColumns()
-    const autoColumns = columns.filter(c => !c.custom)
+    const autoColumns = columns.filter((c) => !c.custom)
     const ownerData = getOwnerData(owners)
 
     return (
-      <React.Fragment>
+      <>
         <Block className={classes.formContainer}>
-          <Heading tag="h3" style={title}>Manage Safe Owners</Heading>
+          <Heading tag="h3" style={title}>
+            Manage Safe Owners
+          </Heading>
           <Table
             label="Owners"
             defaultOrderBy={OWNERS_TABLE_NAME_ID}
@@ -184,12 +194,11 @@ class ManageOwners extends React.Component<Props, State> {
                   )}
                 </TableCell>
               </TableRow>
-            ))
-            }
+            ))}
           </Table>
         </Block>
         {granted && (
-          <React.Fragment>
+          <>
             <Hairline />
             <Row style={controlsStyle} align="end" grow>
               <Col end="xs">
@@ -205,7 +214,7 @@ class ManageOwners extends React.Component<Props, State> {
                 </Button>
               </Col>
             </Row>
-          </React.Fragment>
+          </>
         )}
         <AddOwnerModal
           onClose={this.onHide('AddOwner')}
@@ -257,7 +266,7 @@ class ManageOwners extends React.Component<Props, State> {
           network={network}
           editSafeOwner={editSafeOwner}
         />
-      </React.Fragment>
+      </>
     )
   }
 }

src/routes/safe/components/Settings/ThresholdSettings/index.jsx

@@ -21,19 +21,20 @@ type Props = {
   classes: Object,
   createTransaction: Function,
   safeAddress: string,
+  granted: Boolean,
 }
 
 const ThresholdSettings = ({
-  owners, threshold, classes, createTransaction, safeAddress,
+  owners, threshold, classes, createTransaction, safeAddress, granted,
 }: Props) => {
   const [isModalOpen, setModalOpen] = useState(false)
 
   const toggleModal = () => {
-    setModalOpen(prevOpen => !prevOpen)
+    setModalOpen((prevOpen) => !prevOpen)
   }
 
   return (
-    <React.Fragment>
+    <>
       <SharedSnackbarConsumer>
         {({ openSnackbar }) => {
           const onChangeThreshold = async (newThreshold) => {
@@ -62,7 +63,7 @@ const ThresholdSettings = ({
                   {' '}
                   owners
                 </Paragraph>
-                {owners.size > 1 && (
+                {owners.size > 1 && granted && (
                   <Row align="center" className={classes.buttonRow}>
                     <Button
                       color="primary"
@@ -93,7 +94,7 @@ const ThresholdSettings = ({
           )
         }}
       </SharedSnackbarConsumer>
-    </React.Fragment>
+    </>
   )
 }
 

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

@@ -39,6 +39,7 @@ type Props = Actions & {
   createTransaction: Function,
   addSafeOwner: Function,
   removeSafeOwner: Function,
+  updateSafe: Function,
   replaceSafeOwner: Function,
   editSafeOwner: Function,
   userAddress: string,
@@ -47,12 +48,16 @@ type Props = Actions & {
 type Action = 'RemoveSafe'
 
 class Settings extends React.Component<Props, State> {
-  state = {
-    showRemoveSafe: false,
-    menuOptionIndex: 1,
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      showRemoveSafe: false,
+      menuOptionIndex: 1,
+    }
   }
 
-  handleChange = menuOptionIndex => () => {
+  handleChange = (menuOptionIndex) => () => {
     this.setState({ menuOptionIndex })
   }
 
@@ -85,7 +90,7 @@ class Settings extends React.Component<Props, State> {
     } = this.props
 
     return (
-      <React.Fragment>
+      <>
         <Row align="center" className={classes.message}>
           <Col xs={6}>
             <Paragraph className={classes.settings} size="lg" weight="bolder">
@@ -94,9 +99,7 @@ class Settings extends React.Component<Props, State> {
           </Col>
           <Col xs={6} end="sm">
             <Paragraph noMargin size="md" color="error" onClick={this.onShow('RemoveSafe')}>
-              <Span className={cn(classes.links, classes.removeSafeText)}>
-                Remove Safe
-              </Span>
+              <Span className={cn(classes.links, classes.removeSafeText)}>Remove Safe</Span>
               <Img alt="Trash Icon" className={classes.removeSafeIcon} src={RemoveSafeIcon} />
             </Paragraph>
             <RemoveSafeModal
@@ -125,20 +128,16 @@ class Settings extends React.Component<Props, State> {
               >
                 Owners (
                 {owners.size}
-)
+                )
+              </Row>
+              <Hairline />
+              <Row
+                className={cn(classes.menuOption, menuOptionIndex === 3 && classes.active)}
+                onClick={this.handleChange(3)}
+              >
+                Required confirmations
               </Row>
               <Hairline />
-              {granted && (
-                <React.Fragment>
-                  <Row
-                    className={cn(classes.menuOption, menuOptionIndex === 3 && classes.active)}
-                    onClick={this.handleChange(3)}
-                  >
-                    Required confirmations
-                  </Row>
-                  <Hairline />
-                </React.Fragment>
-              )}
             </Block>
           </Col>
           <Col xs={9} layout="column">
@@ -162,18 +161,19 @@ class Settings extends React.Component<Props, State> {
                   granted={granted}
                 />
               )}
-              {granted && menuOptionIndex === 3 && (
+              {menuOptionIndex === 3 && (
                 <ThresholdSettings
                   owners={owners}
                   threshold={threshold}
                   createTransaction={createTransaction}
                   safeAddress={safeAddress}
+                  granted={granted}
                 />
               )}
             </Block>
           </Col>
         </Block>
-      </React.Fragment>
+      </>
     )
   }
 }