WA-235 Adapting buttton after threshold change

src/components/forms/GnoForm/index.jsx

@@ -29,7 +29,7 @@ const GnoForm = ({
     render={({ handleSubmit, ...rest }) => (
       <form onSubmit={handleSubmit} style={stylesBasedOn(padding)}>
         {render(rest)}
-        {children(rest.submitting)}
+        {children(rest.submitting, rest.submitSucceeded)}
       </form>
     )}
   />

src/routes/safe/component/AddTransaction/createTransactions.js

@@ -80,6 +80,12 @@ const hasOneOwner = (safe: Safe) => {
   return owners.count() === 1
 }
 
+export const getSafeEthereumInstance = async (safeAddress) => {
+  const web3 = getWeb3()
+  const GnosisSafe = await getGnosisSafeContract(web3)
+  return GnosisSafe.at(safeAddress)
+}
+
 export const createTransaction = async (
   safe: Safe,
   txName: string,
@@ -90,10 +96,8 @@ export const createTransaction = async (
   data: string = '0x',
 ) => {
   const web3 = getWeb3()
-  const GnosisSafe = await getGnosisSafeContract(web3)
   const safeAddress = safe.get('address')
-  const gnosisSafe = GnosisSafe.at(safeAddress)
+  const gnosisSafe = await getSafeEthereumInstance(safeAddress)
-
   const valueInWei = web3.toWei(txValue, 'ether')
   const CALL = 0
 

src/routes/safe/component/Safe/index.jsx

@@ -12,6 +12,7 @@ import List from 'material-ui/List'
 import Withdrawn from '~/routes/safe/component/Withdrawn'
 import Transactions from '~/routes/safe/component/Transactions'
 import AddTransaction from '~/routes/safe/component/AddTransaction'
+import Threshold from '~/routes/safe/component/Threshold'
 
 import Address from './Address'
 import Balance from './Balance'
@@ -59,6 +60,12 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
     this.setState({ component: <Transactions safeName={safe.get('name')} safeAddress={safe.get('address')} onAddTx={this.onAddTx} /> })
   }
 
+  onEditThreshold = () => {
+    const { safe } = this.props
+
+    this.setState({ component: <Threshold numOwners={safe.get('owners').count()} safe={safe} /> })
+  }
+
   render() {
     const { safe, balance } = this.props
     const { component } = this.state
@@ -69,7 +76,7 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
           <List style={listStyle}>
             <Balance balance={balance} />
             <Owners owners={safe.owners} />
-            <Confirmations confirmations={safe.get('confirmations')} onEditThreshold={() => {}} />
+            <Confirmations confirmations={safe.get('confirmations')} onEditThreshold={this.onEditThreshold} />
             <Address address={safe.get('address')} />
             <DailyLimit balance={balance} dailyLimit={safe.get('dailyLimit')} onWithdrawn={this.onWithdrawn} />
             <MultisigTx balance={balance} onAddTx={this.onAddTx} onSeeTxs={this.onListTransactions} />

src/routes/safe/component/Threshold/index.jsx

@@ -0,0 +1,98 @@
+// @flow
+import * as React from 'react'
+import Block from '~/components/layout/Block'
+import Heading from '~/components/layout/Heading'
+import Field from '~/components/forms/Field'
+import TextField from '~/components/forms/TextField'
+import GnoForm from '~/components/forms/GnoForm'
+import { connect } from 'react-redux'
+import Button from '~/components/layout/Button'
+import Col from '~/components/layout/Col'
+import Row from '~/components/layout/Row'
+import { composeValidators, minValue, maxValue, mustBeInteger, required } from '~/components/forms/validator'
+import { getSafeEthereumInstance, createTransaction } from '~/routes/safe/component/AddTransaction/createTransactions'
+import { sleep } from '~/utils/timer'
+import selector, { type SelectorProps } from './selector'
+
+type Props = SelectorProps & {
+  numOwners: number,
+  safe: Safe,
+}
+
+const THRESHOLD_PARAM = 'threshold'
+
+const ThresholdComponent = ({ numOwners }: Props) => () => (
+  <Block margin="md">
+    <Heading tag="h2" margin="lg">
+      {'Change safe\'s threshold'}
+    </Heading>
+    <Heading tag="h4" margin="lg">
+      {`Actual number of owners: ${numOwners}`}
+    </Heading>
+    <Block margin="md">
+      <Field
+        name={THRESHOLD_PARAM}
+        component={TextField}
+        type="text"
+        validate={composeValidators(
+          required,
+          mustBeInteger,
+          minValue(1),
+          maxValue(numOwners),
+        )}
+        placeholder="New threshold"
+        text="Safe's threshold"
+      />
+    </Block>
+  </Block>
+)
+
+type State = {
+  initialValues: Object,
+}
+
+class Threshold extends React.PureComponent<Props, State> {
+  state = {
+    initialValues: {},
+  }
+
+  onThreshold = async (values: Object) => {
+    const { safe, userAddress } = this.props // , fetchThreshold } = this.props
+    const newThreshold = values[THRESHOLD_PARAM]
+    const gnosisSafe = await getSafeEthereumInstance(safe.get('address'))
+    const nonce = Date.now()
+    const data = gnosisSafe.contract.changeThreshold.getData(newThreshold)
+    await createTransaction(safe, "Change Safe's threshold", safe.get('address'), 0, nonce, userAddress, data)
+    await sleep(1500)
+    // this.props.fetchThreshold(safe.get('address'))
+  }
+
+  render() {
+    const { numOwners } = this.props
+
+    return (
+      <GnoForm
+        onSubmit={this.onThreshold}
+        render={ThresholdComponent({ numOwners })}
+        initialValues={this.state.initialValues}
+      >
+        {(submitting: boolean, submitSucceeded: boolean) => (
+          <Row align="end" margin="lg" grow>
+            <Col xs={12} center="xs">
+              <Button
+                variant="raised"
+                color="primary"
+                type="submit"
+                disabled={submitting || submitSucceeded}
+              >
+                { submitSucceeded ? 'VISIT TXs' : 'FINISH' }
+              </Button>
+            </Col>
+          </Row>
+        )}
+      </GnoForm>
+    )
+  }
+}
+
+export default connect(selector)(Threshold)

src/routes/safe/component/Threshold/selector.js

@@ -0,0 +1,11 @@
+// @flow
+import { createStructuredSelector } from 'reselect'
+import { userAccountSelector } from '~/wallets/store/selectors/index'
+
+export type SelectorProps = {
+  userAddress: userAccountSelector,
+}
+
+export default createStructuredSelector({
+  userAddress: userAccountSelector,
+})