implement adding custom token

src/logic/tokens/store/reducer/tokens.js

@@ -1,7 +1,7 @@
 // @flow
 import { Map } from 'immutable'
 import { handleActions, type ActionType } from 'redux-actions'
-import { type Token } from '~/logic/tokens/store/model/token'
+import { type Token, makeToken } from '~/logic/tokens/store/model/token'
 import { ADD_TOKEN } from '~/logic/tokens/store/actions/addToken'
 import { REMOVE_TOKEN } from '~/logic/tokens/store/actions/removeToken'
 import { ADD_TOKENS } from '~/logic/tokens/store/actions/saveTokens'
@@ -27,7 +27,7 @@ export default handleActions<State, *>(
       const { token } = action.payload
       const { address: tokenAddress } = token
 
-      return state.set(tokenAddress, token)
+      return state.set(tokenAddress, makeToken(token))
     },
     [REMOVE_TOKEN]: (state: State, action: ActionType<Function>): State => {
       const { token } = action.payload

src/routes/safe/components/Balances/Tokens/actions.js

@@ -1,13 +1,16 @@
 // @flow
 import fetchTokens from '~/logic/tokens/store/actions/fetchTokens'
+import { addToken } from '~/logic/tokens/store/actions/addToken'
 import updateActiveTokens from '~/routes/safe/store/actions/updateActiveTokens'
 
 export type Actions = {
   fetchTokens: Function,
   updateActiveTokens: Function,
+  addToken: Function,
 }
 
 export default {
   fetchTokens,
+  addToken,
   updateActiveTokens,
 }

src/routes/safe/components/Balances/Tokens/index.jsx

@@ -35,6 +35,23 @@ class Tokens extends React.Component<Props, State> {
     activeScreen,
   })
 
+  onTokenAdd = (formValues) => {
+    const {
+      addToken, updateActiveTokens, safeAddress, activeTokens,
+    } = this.props
+
+    const activeTokensAddresses = List(activeTokens.map(({ address }) => address))
+    const token = {
+      address: formValues.tokenAddress,
+      decimals: formValues.tokenDecimals,
+      symbol: formValues.tokenSymbol,
+      name: formValues.tokenSymbol,
+    }
+
+    addToken(token)
+    updateActiveTokens(safeAddress, activeTokensAddresses.push(token.address))
+  }
+
   render() {
     const {
       onClose, classes, tokens, activeTokens, fetchTokens, updateActiveTokens, safeAddress,
@@ -62,7 +79,9 @@ class Tokens extends React.Component<Props, State> {
             setActiveScreen={this.setActiveScreen}
           />
         )}
-        {activeScreen === 'addCustomToken' && <AddCustomToken setActiveScreen={this.setActiveScreen} />}
+        {activeScreen === 'addCustomToken' && (
+          <AddCustomToken setActiveScreen={this.setActiveScreen} onTokenAdd={this.onTokenAdd} onClose={onClose} />
+        )}
       </React.Fragment>
     )
   }

src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react'
+import React from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import Block from '~/components/layout/Block'
 import Paragraph from '~/components/layout/Paragraph'
@@ -18,83 +18,91 @@ import {
 import TokenPlaceholder from '~/routes/safe/components/Balances/assets/token_placeholder.svg'
 import { styles } from './style'
 
-class AddCustomToken extends Component {
-  handleSubmit = (values) => {
-    console.log(values)
+type Props = {
+  classes: Object,
+  onTokenAdd: Function,
+  setActiveScreen: Function,
+  onClose: Function,
+}
+
+const AddCustomToken = (props: Props) => {
+  const {
+    classes, setActiveScreen, onTokenAdd, onClose,
+  } = props
+
+  const goBackToTokenList = () => {
+    setActiveScreen('tokenList')
+  }
+  const handleSubmit = (values) => {
+    onTokenAdd(values)
+    onClose()
   }
 
-  render() {
-    const { classes, setActiveScreen } = this.props
-    const goBackToTokenList = () => {
-      setActiveScreen('tokenList')
-    }
-
-    return (
-      <React.Fragment>
-        <GnoForm onSubmit={this.handleSubmit}>
-          {(submitting: boolean, validating: boolean, ...rest: any) => (
-            <React.Fragment>
-              <Block className={classes.formContainer}>
-                <Paragraph noMargin className={classes.title} weight="bolder" size="lg">
-                  Add custom token
-                </Paragraph>
-                <Field
-                  name="tokenAddress"
-                  component={TextField}
-                  type="text"
-                  validate={composeValidators(required, mustBeEthereumAddress)}
-                  placeholder="Token contract address*"
-                  text="Token contract address*"
-                  className={classes.addressInput}
-                />
-                <Row>
-                  <Col xs={6} layout="column">
-                    <Field
-                      name="tokenSymbol"
-                      component={TextField}
-                      type="text"
-                      validate={required}
-                      placeholder="Token symbol*"
-                      text="Token symbol"
-                      className={classes.addressInput}
-                    />
-                    <Field
-                      name="tokenDecimals"
-                      component={TextField}
-                      type="text"
-                      validate={composeValidators(required, mustBeInteger)}
-                      placeholder="Token decimals*"
-                      text="Token decimals*"
-                      className={classes.addressInput}
-                    />
-                    <Block align="left">
-                      <Field name="showForAllSafes" component={Checkbox} type="checkbox" className={classes.checkbox} />
-                      <Paragraph weight="bolder" size="md" className={classes.checkboxLabel}>
-                        Display token for all safes
-                      </Paragraph>
-                    </Block>
-                  </Col>
-                  <Col xs={6} layout="column" align="center">
-                    <Paragraph className={classes.tokenImageHeading}>Token Image</Paragraph>
-                    <Img src={TokenPlaceholder} alt="Token image" height={100} />
-                  </Col>
-                </Row>
-              </Block>
-              <Hairline />
-              <Row align="center" className={classes.buttonRow}>
-                <Button className={classes.button} minWidth={140} onClick={goBackToTokenList}>
-                  Cancel
-                </Button>
-                <Button type="submit" className={classes.button} variant="contained" minWidth={140} color="primary">
-                  Save
-                </Button>
+  return (
+    <React.Fragment>
+      <GnoForm onSubmit={handleSubmit}>
+        {() => (
+          <React.Fragment>
+            <Block className={classes.formContainer}>
+              <Paragraph noMargin className={classes.title} weight="bolder" size="lg">
+                Add custom token
+              </Paragraph>
+              <Field
+                name="tokenAddress"
+                component={TextField}
+                type="text"
+                validate={composeValidators(required, mustBeEthereumAddress)}
+                placeholder="Token contract address*"
+                text="Token contract address*"
+                className={classes.addressInput}
+              />
+              <Row>
+                <Col xs={6} layout="column">
+                  <Field
+                    name="tokenSymbol"
+                    component={TextField}
+                    type="text"
+                    validate={required}
+                    placeholder="Token symbol*"
+                    text="Token symbol"
+                    className={classes.addressInput}
+                  />
+                  <Field
+                    name="tokenDecimals"
+                    component={TextField}
+                    type="text"
+                    validate={composeValidators(required, mustBeInteger)}
+                    placeholder="Token decimals*"
+                    text="Token decimals*"
+                    className={classes.addressInput}
+                  />
+                  <Block align="left">
+                    <Field name="showForAllSafes" component={Checkbox} type="checkbox" className={classes.checkbox} />
+                    <Paragraph weight="bolder" size="md" className={classes.checkboxLabel}>
+                      Display token for all safes
+                    </Paragraph>
+                  </Block>
+                </Col>
+                <Col xs={6} layout="column" align="center">
+                  <Paragraph className={classes.tokenImageHeading}>Token Image</Paragraph>
+                  <Img src={TokenPlaceholder} alt="Token image" height={100} />
+                </Col>
               </Row>
-            </React.Fragment>
-          )}
-        </GnoForm>
-      </React.Fragment>
-    )
-  }
+            </Block>
+            <Hairline />
+            <Row align="center" className={classes.buttonRow}>
+              <Button className={classes.button} minWidth={140} onClick={goBackToTokenList}>
+                Cancel
+              </Button>
+              <Button type="submit" className={classes.button} variant="contained" minWidth={140} color="primary">
+                Save
+              </Button>
+            </Row>
+          </React.Fragment>
+        )}
+      </GnoForm>
+    </React.Fragment>
+  )
 }
 
 const AddCustomTokenComponent = withStyles(styles)(AddCustomToken)