refactor createTRansaction method to accept safe settings txs wip

src/routes/safe/components/Layout.jsx

@@ -18,6 +18,7 @@ import {
   sm, xs, secondary, smallFontSize,
 } from '~/theme/variables'
 import { copyToClipboard } from '~/utils/clipboard'
+import type { Safe } from '~/routes/safe/store/models/safe'
 import Balances from './Balances'
 import Settings from './Settings'
 
@@ -150,6 +151,7 @@ class Layout extends React.Component<Props, State> {
             etherScanLink={etherScanLink}
             threshold={safe.threshold}
             owners={safe.owners}
+            createTransaction={createTransaction}
           />
         )}
       </React.Fragment>

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

@@ -25,12 +25,19 @@ type Props = {
   classes: Object,
   threshold: number,
   owners: List<Owner>,
+  onChangeThreshold: Function,
 }
 
+const THRESHOLD_FIELD_NAME = 'threshold'
+
 const ChangeThreshold = ({
-  onClose, owners, threshold, classes,
+  onClose, owners, threshold, classes, onChangeThreshold,
 }: Props) => {
-  const handleSubmit = () => ({})
+  const handleSubmit = (values) => {
+    const newThreshold = values[THRESHOLD_FIELD_NAME]
+
+    onChangeThreshold(newThreshold)
+  }
 
   return (
     <React.Fragment>
@@ -61,7 +68,7 @@ const ChangeThreshold = ({
               <Row margin="xl" align="center">
                 <Col xs={2}>
                   <Field
-                    name="threshold"
+                    name={THRESHOLD_FIELD_NAME}
                     component={SelectField}
                     validate={composeValidators(required, mustBeInteger, minValue(1))}
                     data-testid="threshold-select-input"
@@ -74,7 +81,7 @@ const ChangeThreshold = ({
                   </Field>
                 </Col>
                 <Col xs={10}>
-                  <Paragraph size="lg" color="primary" noMargin className={classes.owners}>
+                  <Paragraph size="lg" color="primary" noMargin className={classes.ownersText}>
                     out of
                     {' '}
                     {owners.size}

src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/style.js

@@ -24,7 +24,7 @@ export const styles = () => ({
   modalContent: {
     padding: `${md} ${lg}`,
   },
-  amount: {
+  ownersText: {
     marginLeft: sm,
   },
   buttonRow: {

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

@@ -12,20 +12,33 @@ import Paragraph from '~/components/layout/Paragraph'
 import ChangeThreshold from './ChangeThreshold'
 import type { Owner } from '~/routes/safe/store/models/owner'
 import { styles } from './style'
+import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
+import { ZERO_ADDRESS } from '~/logic/wallets/ethAddresses'
 
 type Props = {
   owners: List<Owner>,
   threshold: number,
   classes: Object,
+  createTransaction: Function,
+  safeAddress: string,
 }
 
-const ThresholdSettings = ({ owners, threshold, classes }: Props) => {
+const ThresholdSettings = ({
+  owners, threshold, classes, createTransaction, safeAddress,
+}: Props) => {
   const [isModalOpen, setModalOpen] = useState(false)
 
   const toggleModal = () => {
     setModalOpen(prevOpen => !prevOpen)
   }
 
+  const onChangeThreshold = async (newThreshold) => {
+    const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
+    const data = safeInstance.contract.changeThreshold(newThreshold).encodeABI()
+
+    createTransaction(safeInstance, safeAddress, 0, ZERO_ADDRESS)
+  }
+
   return (
     <React.Fragment>
       <Block className={classes.container}>
@@ -66,6 +79,7 @@ owners
           onClose={toggleModal}
           owners={owners}
           threshold={threshold}
+          onChangeThreshold={onChangeThreshold}
         />
       </Modal>
     </React.Fragment>

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

@@ -26,6 +26,7 @@ type Props = {
   safeName: string,
   owners: List<Owner>,
   threshold: number,
+  createTransaction: Function,
 }
 
 type Action = 'RemoveSafe'
@@ -51,7 +52,7 @@ class Settings extends React.Component<Props, State> {
   render() {
     const { showRemoveSafe, menuOptionIndex } = this.state
     const {
-      classes, granted, etherScanLink, safeAddress, safeName, owners, threshold,
+      classes, granted, etherScanLink, safeAddress, safeName, owners, threshold, createTransaction,
     } = this.props
 
     return (
@@ -114,7 +115,14 @@ class Settings extends React.Component<Props, State> {
             <Block className={classes.container}>
               {menuOptionIndex === 1 && <p>To be done</p>}
               {granted && menuOptionIndex === 2 && <p>To be done</p>}
-              {granted && menuOptionIndex === 3 && <ThresholdSettings owners={owners} threshold={threshold} />}
+              {granted && menuOptionIndex === 3 && (
+                <ThresholdSettings
+                  owners={owners}
+                  threshold={threshold}
+                  createTransaction={createTransaction}
+                  safeAddress={safeAddress}
+                />
+              )}
               {granted && menuOptionIndex === 4 && <p>To be done</p>}
             </Block>
           </Col>

src/routes/safe/store/actions/createTransaction.js

@@ -20,6 +20,7 @@ const createTransaction = (
   valueInEth: string,
   token: Token,
   openSnackbar: Function,
+  txData: string = EMPTY_DATA,
 ) => async (dispatch: ReduxDispatch<GlobalState>, getState: GetState<GlobalState>) => {
   const isSendingETH = isEther(token.symbol)
   const state: GlobalState = getState()