WIP: add `Advanced` settings

there's a lot of duplicated code, just copying functionalities and building basic structure for the section

src/routes/safe/components/Settings/Advanced/ChangeThreshold/index.tsx

@@ -0,0 +1,128 @@
+import IconButton from '@material-ui/core/IconButton'
+import MenuItem from '@material-ui/core/MenuItem'
+import { withStyles } from '@material-ui/core/styles'
+import Close from '@material-ui/icons/Close'
+import React, { useEffect, useState } from 'react'
+
+import { styles } from './style'
+
+import Field from 'src/components/forms/Field'
+import GnoForm from 'src/components/forms/GnoForm'
+import SelectField from 'src/components/forms/SelectField'
+import { composeValidators, differentFrom, minValue, mustBeInteger, required } from 'src/components/forms/validator'
+import Block from 'src/components/layout/Block'
+import Button from 'src/components/layout/Button'
+import Col from 'src/components/layout/Col'
+import Hairline from 'src/components/layout/Hairline'
+import Paragraph from 'src/components/layout/Paragraph'
+import Row from 'src/components/layout/Row'
+import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
+import { estimateTxGasCosts } from 'src/logic/safe/transactions/gasNew'
+import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
+import { getWeb3 } from 'src/logic/wallets/getWeb3'
+
+const THRESHOLD_FIELD_NAME = 'threshold'
+
+const ChangeThreshold = ({ classes, onChangeThreshold, onClose, owners, safeAddress, threshold }) => {
+  const [gasCosts, setGasCosts] = useState('< 0.001')
+
+  useEffect(() => {
+    let isCurrent = true
+    const estimateGasCosts = async () => {
+      const web3 = getWeb3()
+      const { fromWei, toBN } = web3.utils
+      const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
+      const txData = safeInstance.contract.methods.changeThreshold('1').encodeABI()
+      const estimatedGasCosts = await estimateTxGasCosts(safeAddress, safeAddress, txData)
+      const gasCostsAsEth = fromWei(toBN(estimatedGasCosts), 'ether')
+      const formattedGasCosts = formatAmount(gasCostsAsEth)
+      if (isCurrent) {
+        setGasCosts(formattedGasCosts)
+      }
+    }
+
+    estimateGasCosts()
+
+    return () => {
+      isCurrent = false
+    }
+  }, [safeAddress])
+
+  const handleSubmit = (values) => {
+    const newThreshold = values[THRESHOLD_FIELD_NAME]
+
+    onClose()
+    onChangeThreshold(newThreshold)
+  }
+
+  return (
+    <>
+      <Row align="center" className={classes.heading} grow>
+        <Paragraph className={classes.headingText} noMargin weight="bolder">
+          Change required confirmations
+        </Paragraph>
+        <IconButton disableRipple onClick={onClose}>
+          <Close className={classes.close} />
+        </IconButton>
+      </Row>
+      <Hairline />
+      <GnoForm initialValues={{ threshold: threshold.toString() }} onSubmit={handleSubmit}>
+        {() => (
+          <>
+            <Block className={classes.modalContent}>
+              <Row>
+                <Paragraph weight="bolder">Any transaction requires the confirmation of:</Paragraph>
+              </Row>
+              <Row align="center" className={classes.inputRow} margin="xl">
+                <Col xs={2}>
+                  <Field
+                    data-testid="threshold-select-input"
+                    name={THRESHOLD_FIELD_NAME}
+                    render={(props) => (
+                      <>
+                        <SelectField {...props} disableError>
+                          {[...Array(Number(owners.size))].map((x, index) => (
+                            <MenuItem key={index} value={`${index + 1}`}>
+                              {index + 1}
+                            </MenuItem>
+                          ))}
+                        </SelectField>
+                        {props.meta.error && props.meta.touched && (
+                          <Paragraph className={classes.errorText} color="error" noMargin>
+                            {props.meta.error}
+                          </Paragraph>
+                        )}
+                      </>
+                    )}
+                    validate={composeValidators(required, mustBeInteger, minValue(1), differentFrom(threshold))}
+                  />
+                </Col>
+                <Col xs={10}>
+                  <Paragraph className={classes.ownersText} color="primary" noMargin size="lg">
+                    {`out of ${owners.size} owner(s)`}
+                  </Paragraph>
+                </Col>
+              </Row>
+              <Row>
+                <Paragraph>
+                  {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCosts} (fee price) ETH in this wallet to fund this confirmation.`}
+                </Paragraph>
+              </Row>
+            </Block>
+            <Hairline style={{ position: 'absolute', bottom: 85 }} />
+            <Row align="center" className={classes.buttonRow}>
+              <Button minWidth={140} onClick={onClose}>
+                BACK
+              </Button>
+              <Button color="primary" minWidth={140} type="submit" variant="contained">
+                CHANGE
+              </Button>
+            </Row>
+          </>
+        )}
+      </GnoForm>
+    </>
+  )
+}
+
+export default withStyles(styles as any)(ChangeThreshold)

src/routes/safe/components/Settings/Advanced/ChangeThreshold/style.ts

@@ -0,0 +1,43 @@
+import { lg, md, secondaryText, sm } from 'src/theme/variables'
+
+export const styles = () => ({
+  heading: {
+    padding: `${sm} ${lg}`,
+    justifyContent: 'space-between',
+    boxSizing: 'border-box',
+    maxHeight: '75px',
+  },
+  annotation: {
+    letterSpacing: '-1px',
+    color: secondaryText,
+    marginRight: 'auto',
+    marginLeft: '20px',
+  },
+  headingText: {
+    fontSize: '20px',
+  },
+  close: {
+    height: '35px',
+    width: '35px',
+  },
+  modalContent: {
+    padding: `${md} ${lg}`,
+  },
+  ownersText: {
+    marginLeft: sm,
+  },
+  buttonRow: {
+    height: '84px',
+    justifyContent: 'center',
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+  },
+  inputRow: {
+    position: 'relative',
+  },
+  errorText: {
+    position: 'absolute',
+    bottom: '-25px',
+  },
+})

src/routes/safe/components/Settings/Advanced/dataFetcher.ts

@@ -0,0 +1,40 @@
+import { List, Set } from 'immutable'
+
+export const MODULES_TABLE_ADDRESS_ID = 'address'
+export const MODULES_TABLE_ACTIONS_ID = 'actions'
+
+export const getModuleData = (modules: Set<string>): List<{ [MODULES_TABLE_ADDRESS_ID]: string }> => {
+  return modules.toList().map((module) => ({
+    [MODULES_TABLE_ADDRESS_ID]: module,
+  }))
+}
+
+interface TableColumn {
+  id: string
+  order: boolean
+  disablePadding: boolean
+  label: string
+  custom: boolean
+  align?: string
+}
+
+export const generateColumns = (): List<TableColumn> => {
+  const addressColumn: TableColumn = {
+    id: MODULES_TABLE_ADDRESS_ID,
+    order: false,
+    disablePadding: false,
+    label: 'Address',
+    custom: false,
+    align: 'left',
+  }
+
+  const actionsColumn: TableColumn = {
+    id: MODULES_TABLE_ACTIONS_ID,
+    order: false,
+    disablePadding: false,
+    label: '',
+    custom: true,
+  }
+
+  return List([addressColumn, actionsColumn])
+}

src/routes/safe/components/Settings/Advanced/index.tsx

@@ -0,0 +1,196 @@
+import { Set } from 'immutable'
+import { makeStyles } from '@material-ui/core/styles'
+// import { useSnackbar } from 'notistack'
+import React, { useState } from 'react'
+import { /*useDispatch, */ useSelector } from 'react-redux'
+import cn from 'classnames'
+
+// import ChangeThreshold from './ChangeThreshold'
+import { styles } from './style'
+
+import Modal from 'src/components/Modal'
+import Block from 'src/components/layout/Block'
+import Bold from 'src/components/layout/Bold'
+// import Button from 'src/components/layout/Button'
+import Heading from 'src/components/layout/Heading'
+import Paragraph from 'src/components/layout/Paragraph'
+// import Row from 'src/components/layout/Row'
+// import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
+// import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
+// import { grantedSelector } from 'src/routes/safe/container/selector'
+// import createTransaction from 'src/routes/safe/store/actions/createTransaction'
+import {
+  // safeOwnersSelector,
+  // safeParamAddressFromStateSelector,
+  // safeThresholdSelector,
+  safeNonceSelector,
+  safeModulesSelector,
+} from 'src/routes/safe/store/selectors'
+import DividerLine from 'src/components/DividerLine'
+import TableContainer from '@material-ui/core/TableContainer'
+import Table from '../../../../../components/Table'
+import TableRow from '@material-ui/core/TableRow'
+import TableCell from '@material-ui/core/TableCell'
+import { cellWidth } from '../../../../../components/Table/TableHead'
+import OwnerAddressTableCell from '../ManageOwners/OwnerAddressTableCell'
+import Row from '../../../../../components/layout/Row'
+import Img from '../../../../../components/layout/Img'
+// import RenameOwnerIcon from '../ManageOwners/assets/icons/rename-owner.svg'
+// import ReplaceOwnerIcon from '../ManageOwners/assets/icons/replace-owner.svg'
+import RemoveOwnerIcon from '../assets/icons/bin.svg'
+import { generateColumns, MODULES_TABLE_ADDRESS_ID, getModuleData } from './dataFetcher'
+import { grantedSelector } from '../../../container/selector'
+// import RemoveOwnerModal from '../ManageOwners/RemoveOwnerModal'
+// import { getOwnersWithNameFromAddressBook } from '../../../../../logic/addressBook/utils'
+// import { getOwnerData } from '../ManageOwners/dataFetcher'
+
+export const REMOVE_MODULE_BTN_TEST_ID = 'remove-module-btn'
+export const MODULES_ROW_TEST_ID = 'owners-row'
+
+const useStyles = makeStyles(styles)
+
+const useToggle = (initialOn = false) => {
+  const [on, setOn] = useState(initialOn)
+  const toggle = () => setOn(!on)
+
+  return { on, toggle }
+}
+
+const Advanced: React.FC = () => {
+  const classes = useStyles()
+  const columns = generateColumns()
+  const autoColumns = columns.filter(({ custom }) => !custom)
+
+  // const { enqueueSnackbar, closeSnackbar } = useSnackbar()
+  // const dispatch = useDispatch()
+
+  const { on, toggle } = useToggle()
+
+  const nonce = useSelector(safeNonceSelector)
+  const granted = useSelector(grantedSelector)
+  const modules = useSelector(safeModulesSelector)
+  console.log(modules)
+  const moduleData = getModuleData(Set(modules))
+  // const ownersAdbk = getOwnersWithNameFromAddressBook(addressBook, owners)
+  // const ownerData = getOwnerData(ownersAdbk)
+
+  // const safeAddress = useSelector(safeParamAddressFromStateSelector)
+  // const owners = useSelector(safeOwnersSelector)
+
+  // const onChangeThreshold = async (newThreshold) => {
+  //   const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
+  //   const txData = safeInstance.contract.methods.changeThreshold(newThreshold).encodeABI()
+  //
+  //   dispatch(
+  //     createTransaction({
+  //       safeAddress,
+  //       to: safeAddress,
+  //       valueInWei: 0,
+  //       txData,
+  //       notifiedTransaction: TX_NOTIFICATION_TYPES.SETTINGS_CHANGE_TX,
+  //       enqueueSnackbar,
+  //       closeSnackbar,
+  //     } as any),
+  //   )
+  // }
+
+  return (
+    <>
+      <Block className={classes.container}>
+        <Heading tag="h2">Safe Nonce</Heading>
+        <Paragraph>
+          For security reasons, transactions made with the Safe need to be executed in order. The nonce shows you which
+          transaction was executed most recently. You can find the nonce for a transaction in the transaction details.
+        </Paragraph>
+        <Paragraph className={classes.ownersText} size="lg">
+          Current Nonce: <Bold>{nonce}</Bold>
+        </Paragraph>
+      </Block>
+      <DividerLine withArrow={false} />
+      <Block className={classes.container}>
+        <Heading tag="h2">Safe Modules</Heading>
+        <Paragraph>
+          Modules allow you to customize the access-control logic of your Safe. Modules are potentially risky, so make
+          sure to only use modules from trusted sources. Learn more about modules{' '}
+          <a
+            href="https://docs.gnosis.io/safe/docs/contracts_architecture/#3-module-management"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            here
+          </a>
+          .
+        </Paragraph>
+        {moduleData.size === 0 ? (
+          <Paragraph className={classes.ownersText} size="lg">
+            No modules enabled
+          </Paragraph>
+        ) : (
+          <TableContainer>
+            <Table
+              columns={columns}
+              data={moduleData}
+              defaultFixed
+              defaultOrderBy={MODULES_TABLE_ADDRESS_ID}
+              disablePagination
+              label="Modules"
+              noBorder
+              size={moduleData.size}
+            >
+              {(sortedData) =>
+                sortedData.map((row, index) => (
+                  <TableRow
+                    className={cn(classes.hide, index >= 3 && index === sortedData.size - 1 && classes.noBorderBottom)}
+                    data-testid={MODULES_ROW_TEST_ID}
+                    key={index}
+                    tabIndex={-1}
+                  >
+                    {autoColumns.map((column: any) => (
+                      <TableCell align={column.align} component="td" key={column.id} style={cellWidth(column.width)}>
+                        {column.id === MODULES_TABLE_ADDRESS_ID ? (
+                          <OwnerAddressTableCell address={row[column.id]} showLinks />
+                        ) : (
+                          row[column.id]
+                        )}
+                      </TableCell>
+                    ))}
+                    <TableCell component="td">
+                      <Row align="end" className={classes.actions}>
+                        {granted && (
+                          <Img
+                            alt="Remove module"
+                            className={classes.removeModuleIcon}
+                            onClick={toggle}
+                            src={RemoveOwnerIcon}
+                            testId={REMOVE_MODULE_BTN_TEST_ID}
+                          />
+                        )}
+                      </Row>
+                    </TableCell>
+                  </TableRow>
+                ))
+              }
+            </Table>
+          </TableContainer>
+        )}
+      </Block>
+      {/*<RemoveModuleModal*/}
+      {/*  isOpen={showRemoveModal}*/}
+      {/*  onClose={onHide('RemoveModal')}*/}
+      {/*  ownerAddress={selectedModalAddress}*/}
+      {/*  ownerName={selectedModalName}*/}
+      {/*/>*/}
+      <Modal description="Disable Module" handleClose={toggle} open={on} title="Disable Module">
+        {/*<ChangeThreshold*/}
+        {/*  onChangeThreshold={onChangeThreshold}*/}
+        {/*  onClose={toggle}*/}
+        {/*  owners={owners}*/}
+        {/*  safeAddress={safeAddress}*/}
+        {/*  threshold={threshold}*/}
+        {/*/>*/}
+      </Modal>
+    </>
+  )
+}
+
+export default Advanced

src/routes/safe/components/Settings/Advanced/style.ts

@@ -0,0 +1,57 @@
+import { createStyles } from '@material-ui/core'
+import { border, fontColor, lg, secondaryText, smallFontSize, xl } from 'src/theme/variables'
+
+export const styles = createStyles({
+  title: {
+    padding: lg,
+    paddingBottom: 0,
+  },
+  hide: {
+    '&:hover': {
+      backgroundColor: '#fff3e2',
+    },
+    '&:hover $actions': {
+      visibility: 'initial',
+    },
+  },
+  actions: {
+    justifyContent: 'flex-end',
+    visibility: 'hidden',
+    minWidth: '100px',
+  },
+  noBorderBottom: {
+    '& > td': {
+      borderBottom: 'none',
+    },
+  },
+  annotation: {
+    paddingLeft: lg,
+  },
+  ownersText: {
+    color: secondaryText,
+    '& b': {
+      color: fontColor,
+    },
+  },
+  container: {
+    padding: lg,
+  },
+  buttonRow: {
+    padding: lg,
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    boxSizing: 'border-box',
+    width: '100%',
+    justifyContent: 'flex-end',
+    borderTop: `2px solid ${border}`,
+  },
+  modifyBtn: {
+    height: xl,
+    fontSize: smallFontSize,
+  },
+  removeModuleIcon: {
+    marginLeft: lg,
+    cursor: 'pointer',
+  },
+})

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

@@ -1,10 +1,11 @@
 import Badge from '@material-ui/core/Badge'
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import cn from 'classnames'
 import * as React from 'react'
 import { useState } from 'react'
 import { useSelector } from 'react-redux'
 
+import Advanced from './Advanced'
 import ManageOwners from './ManageOwners'
 import { RemoveSafeModal } from './RemoveSafeModal'
 import SafeDetails from './SafeDetails'
@@ -36,7 +37,10 @@ const INITIAL_STATE = {
   menuOptionIndex: 1,
 }
 
-const Settings = (props) => {
+const useStyles = makeStyles(styles)
+
+const Settings: React.FC = () => {
+  const classes = useStyles()
   const [state, setState] = useState(INITIAL_STATE)
   const owners = useSelector(safeOwnersSelector)
   const needsUpdate = useSelector(safeNeedsUpdate)
@@ -56,7 +60,6 @@ const Settings = (props) => {
   }
 
   const { menuOptionIndex, showRemoveSafe } = state
-  const { classes } = props
 
   return !owners ? (
     <Loader />
@@ -102,6 +105,11 @@ const Settings = (props) => {
               Policies
             </Row>
             <Hairline className={classes.hairline} />
+            <Row className={cn(classes.menuOption, menuOptionIndex === 4 && classes.active)} onClick={handleChange(4)}>
+              <RequiredConfirmationsIcon />
+              Advanced
+            </Row>
+            <Hairline className={classes.hairline} />
           </Block>
         </Col>
         <Col className={classes.contents} layout="column">
@@ -109,6 +117,7 @@ const Settings = (props) => {
             {menuOptionIndex === 1 && <SafeDetails />}
             {menuOptionIndex === 2 && <ManageOwners addressBook={addressBook} granted={granted} owners={owners} />}
             {menuOptionIndex === 3 && <ThresholdSettings />}
+            {menuOptionIndex === 4 && <Advanced />}
           </Block>
         </Col>
       </Block>
@@ -116,4 +125,4 @@ const Settings = (props) => {
   )
 }
 
-export default withStyles(styles as any)(Settings)
+export default Settings

src/routes/safe/components/Settings/style.ts

@@ -1,3 +1,5 @@
+import { createStyles } from '@material-ui/core'
+
 import {
   background,
   bolderFont,
@@ -11,7 +13,7 @@ import {
   xs,
 } from 'src/theme/variables'
 
-export const styles = () => ({
+export const styles = createStyles({
   root: {
     backgroundColor: 'white',
     borderRadius: sm,
@@ -31,7 +33,7 @@ export const styles = () => ({
   menuWrapper: {
     display: 'flex',
     flexDirection: 'row',
-    flexGrow: '0',
+    flexGrow: 0,
     maxWidth: '100%',
 
     [`@media (min-width: ${screenSm}px)`]: {
@@ -43,7 +45,7 @@ export const styles = () => ({
     borderBottom: `solid 2px ${border}`,
     display: 'flex',
     flexDirection: 'row',
-    flexGrow: '1',
+    flexGrow: 1,
     height: '100%',
     width: '100%',
 
@@ -59,8 +61,8 @@ export const styles = () => ({
     borderRight: `solid 1px ${border}`,
     boxSizing: 'border-box',
     cursor: 'pointer',
-    flexGrow: '1',
+    flexGrow: 1,
-    flexShrink: '1',
+    flexShrink: 1,
     fontSize: '13px',
     justifyContent: 'center',
     lineHeight: '1.2',
@@ -113,7 +115,7 @@ export const styles = () => ({
     },
   },
   container: {
-    flexGrow: '1',
+    flexGrow: 1,
     height: '100%',
     position: 'relative',
   },