WA-238 Multisig transaction form

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

@@ -10,6 +10,7 @@ import { type Safe } from '~/routes/safe/store/model/safe'
 import List from 'material-ui/List'
 
 import Withdrawn from '~/routes/safe/component/Withdrawn'
+import Transactions from '~/routes/safe/component/Transactions'
 
 import Address from './Address'
 import Balance from './Balance'
@@ -45,9 +46,7 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
   }
 
   onAddTx = () => {
-    const { safe } = this.props
-
-    this.setState({ component: <Withdrawn safeAddress={safe.get('address')} dailyLimit={safe.get('dailyLimit')} /> })
+    this.setState({ component: <Transactions balance={Number(this.props.balance)} onReset={this.onSeeTxs} /> })
   }
 
   onSeeTxs = () => {

src/routes/safe/component/Transactions/MultisigForm/MultisigForm.stories.js

@@ -0,0 +1,21 @@
+// @flow
+import { storiesOf } from '@storybook/react'
+import * as React from 'react'
+import Stepper from '~/components/Stepper'
+import styles from '~/components/layout/PageFrame/index.scss'
+import MultisigForm from './index'
+
+
+const FrameDecorator = story => (
+  <div className={styles.frame}>
+    { story() }
+  </div>
+)
+
+storiesOf('Components', module)
+  .addDecorator(FrameDecorator)
+  .add('MultisigForm', () => (
+    <Stepper.Page>
+      { MultisigForm }
+    </Stepper.Page>
+  ))

src/routes/safe/component/Transactions/MultisigForm/index.jsx

@@ -0,0 +1,77 @@
+// @flow
+import * as React from 'react'
+import Field from '~/components/forms/Field'
+import TextField from '~/components/forms/TextField'
+import { composeValidators, mustBeNumber, required, greaterThan, mustBeEthereumAddress } from '~/components/forms/validator'
+import Block from '~/components/layout/Block'
+import Heading from '~/components/layout/Heading'
+import { TX_NAME_PARAM, TX_DESTINATION_PARAM, TX_VALUE_PARAM } from '~/routes/safe/component/Transactions/transactions'
+
+export const CONFIRMATIONS_ERROR = 'Number of confirmations can not be higher than the number of owners'
+
+export const safeFieldsValidation = (values: Object) => {
+  const errors = {}
+
+  if (Number.parseInt(values.owners, 10) < Number.parseInt(values.confirmations, 10)) {
+    errors.confirmations = CONFIRMATIONS_ERROR
+  }
+
+  return errors
+}
+
+type Props = {
+  balance: number,
+}
+
+export const inLimit = (limit: number, spentToday: number) => (value: string) => {
+  const amount = Number(value)
+  const max = limit - spentToday
+  if (amount <= max) {
+    return undefined
+  }
+
+  return `Should not exceed ${max} ETH (amount to reach available balance)`
+}
+
+const WithdrawnForm = ({ balance }: Props) => () => (
+  <Block margin="md">
+    <Heading tag="h2" margin="lg">
+      Multisig Transaction
+    </Heading>
+    <Heading tag="h4" margin="lg">
+      {`Available balance: ${balance} ETH`}
+    </Heading>
+    <Block margin="md">
+      <Field
+        name={TX_NAME_PARAM}
+        component={TextField}
+        type="text"
+        validate={required}
+        placeholder="Transaction name"
+        text="Transaction name"
+      />
+    </Block>
+    <Block margin="md">
+      <Field
+        name={TX_DESTINATION_PARAM}
+        component={TextField}
+        type="text"
+        validate={composeValidators(required, mustBeEthereumAddress)}
+        placeholder="Destination*"
+        text="Destination"
+      />
+    </Block>
+    <Block margin="md">
+      <Field
+        name={TX_VALUE_PARAM}
+        component={TextField}
+        type="text"
+        validate={composeValidators(required, mustBeNumber, greaterThan(0), inLimit(balance, 0))}
+        placeholder="Amount in ETH*"
+        text="Amount in ETH"
+      />
+    </Block>
+  </Block>
+)
+
+export default WithdrawnForm

src/routes/safe/component/Transactions/ReviewTx/index.jsx

@@ -0,0 +1,8 @@
+// @flow
+import * as React from 'react'
+
+const ReviewTx = () => () => (
+  <div>ReviewTx</div>
+)
+
+export default ReviewTx

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

@@ -0,0 +1,72 @@
+// @flow
+import * as React from 'react'
+import Stepper from '~/components/Stepper'
+import MultisigForm from './MultisigForm'
+import ReviewTx from './ReviewTx'
+
+const getSteps = () => [
+  'Fill Mutlisig Tx form', 'Review Tx',
+]
+
+/*
+type Props = SelectorProps & Actions & {
+  safeAddress: string,
+  dailyLimit: DailyLimit,
+}
+*/
+
+type Props = {
+  balance: number,
+  onReset: () => void,
+}
+
+type State = {
+  done: boolean,
+}
+
+export const SEE_TXS_BUTTON_TEXT = 'VISIT TXS'
+
+class Transactions extends React.Component<Props, State> {
+  state = {
+    done: false,
+  }
+
+  onTransaction = async (values: Object) => {
+    // eslint-disable-next-line
+    console.log("Executing transaction with params " + JSON.stringify(values))
+  }
+
+  onReset = () => {
+    this.setState({ done: false })
+    this.props.onReset() // This is for show the TX list component
+  }
+
+  render() {
+    const { done } = this.state
+    const { balance } = this.props
+    const steps = getSteps()
+    const finishedButton = <Stepper.FinishButton title={SEE_TXS_BUTTON_TEXT} />
+
+    return (
+      <React.Fragment>
+        <Stepper
+          finishedTransaction={done}
+          finishedButton={finishedButton}
+          onSubmit={this.onTransaction}
+          steps={steps}
+          onReset={this.onReset}
+        >
+          <Stepper.Page balance={balance}>
+            { MultisigForm }
+          </Stepper.Page>
+          <Stepper.Page>
+            { ReviewTx }
+          </Stepper.Page>
+        </Stepper>
+      </React.Fragment>
+    )
+  }
+}
+
+export default Transactions
+

src/routes/safe/component/Transactions/transactions.js

@@ -5,6 +5,10 @@ import { load, TX_KEY } from '~/utils/localStorage'
 import { type Confirmation, makeConfirmation } from '~/routes/safe/store/model/confirmation'
 import { makeTransaction, type Transaction, type TransactionProps } from '~/routes/safe/store/model/transaction'
 
+export const TX_NAME_PARAM = 'txName'
+export const TX_DESTINATION_PARAM = 'txDestination'
+export const TX_VALUE_PARAM = 'txValue'
+
 const buildConfirmationsFrom = (owners: List<Owner>, creator: string): List<Confirmation> => {
   if (!owners) {
     throw new Error('This safe has no owners')