implement add custom token modal

src/components/layout/Button/index.jsx

@@ -10,7 +10,7 @@ const styles = {
 }
 
 type Props = {
-  minWidth?: number
+  minWidth?: number,
 }
 
 const calculateStyleBased = minWidth => ({

src/logic/tokens/store/actions/addToken.js

@@ -1,14 +1,10 @@
 // @flow
 import { createAction } from 'redux-actions'
 import { type Token } from '~/logic/tokens/store/model/token'
-import { saveActiveTokens, getActiveTokens, setToken } from '~/logic/tokens/utils/tokensStorage'
-import type { Dispatch as ReduxDispatch } from 'redux'
-import { type GlobalState } from '~/store/'
 
 export const ADD_TOKEN = 'ADD_TOKEN'
 
 type AddTokenProps = {
-  safeAddress: string,
   token: Token,
 }
 
@@ -18,13 +14,3 @@ export const addToken = createAction<string, *, *>(
     token,
   }),
 )
-
-const saveToken = (safeAddress: string, token: Token) => async (dispatch: ReduxDispatch<GlobalState>) => {
-  dispatch(addToken(token))
-
-  const activeTokens = await getActiveTokens(safeAddress)
-  await saveActiveTokens(safeAddress, activeTokens.push(token.toJS()))
-  setToken(safeAddress, token)
-}
-
-export default saveToken

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

@@ -62,7 +62,7 @@ class Tokens extends React.Component<Props, State> {
             setActiveScreen={this.setActiveScreen}
           />
         )}
-        {activeScreen === 'addCustomToken' && <AddCustomToken />}
+        {activeScreen === 'addCustomToken' && <AddCustomToken setActiveScreen={this.setActiveScreen} />}
       </React.Fragment>
     )
   }

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

@@ -6,72 +6,90 @@ import Paragraph from '~/components/layout/Paragraph'
 import Row from '~/components/layout/Row'
 import Col from '~/components/layout/Col'
 import Img from '~/components/layout/Img'
+import Button from '~/components/layout/Button'
 import Field from '~/components/forms/Field'
 import Checkbox from '~/components/forms/Checkbox'
 import GnoForm from '~/components/forms/GnoForm'
 import TextField from '~/components/forms/TextField'
-import { composeValidators, required, mustBeEthereumAddress } from '~/components/forms/validator'
+import Hairline from '~/components/layout/Hairline'
+import {
+  composeValidators, required, mustBeEthereumAddress, mustBeInteger,
+} from '~/components/forms/validator'
 import TokenPlaceholder from '~/routes/safe/components/Balances/assets/token_placeholder.svg'
 import { styles } from './style'
 
 class AddCustomToken extends Component {
-  handleSubmit = () => {
+  handleSubmit = (values) => {
-    console.log('form submitted')
+    console.log(values)
   }
 
   render() {
-    const { classes } = this.props
+    const { classes, setActiveScreen } = this.props
+    const goBackToTokenList = () => {
+      setActiveScreen('tokenList')
+    }
 
     return (
       <React.Fragment>
-        <Paragraph noMargin className={classes.title} weight="bolder" size="lg">
-          Add custom token
-        </Paragraph>
         <GnoForm onSubmit={this.handleSubmit}>
           {(submitting: boolean, validating: boolean, ...rest: any) => (
-            <Block className={classes.formContainer}>
+            <React.Fragment>
-              <Field
+              <Block className={classes.formContainer}>
-                name="tokenAddress"
+                <Paragraph noMargin className={classes.title} weight="bolder" size="lg">
-                component={TextField}
+                  Add custom token
-                type="text"
+                </Paragraph>
-                validate={composeValidators(required, mustBeEthereumAddress)}
+                <Field
-                placeholder="Token contract address*"
+                  name="tokenAddress"
-                text="Token contract address*"
+                  component={TextField}
-                className={classes.addressInput}
+                  type="text"
-              />
+                  validate={composeValidators(required, mustBeEthereumAddress)}
-              <Row>
+                  placeholder="Token contract address*"
-                <Col xs={6} layout="column">
+                  text="Token contract address*"
-                  <Field
+                  className={classes.addressInput}
-                    name="tokenSymbol"
+                />
-                    component={TextField}
+                <Row>
-                    type="text"
+                  <Col xs={6} layout="column">
-                    validate={composeValidators(required, mustBeEthereumAddress)}
+                    <Field
-                    placeholder="Token symbol*"
+                      name="tokenSymbol"
-                    text="Token symbol"
+                      component={TextField}
-                    className={classes.addressInput}
+                      type="text"
-                  />
+                      validate={required}
-                  <Field
+                      placeholder="Token symbol*"
-                    name="tokenDecimals"
+                      text="Token symbol"
-                    component={TextField}
+                      className={classes.addressInput}
-                    type="text"
+                    />
-                    validate={composeValidators(required, mustBeEthereumAddress)}
+                    <Field
-                    placeholder="Token decimals*"
+                      name="tokenDecimals"
-                    text="Token decimals*"
+                      component={TextField}
-                    className={classes.addressInput}
+                      type="text"
-                  />
+                      validate={composeValidators(required, mustBeInteger)}
-                  <Block align="left">
+                      placeholder="Token decimals*"
-                    <Field name="showForAllSafes" component={Checkbox} type="checkbox" className={classes.checkbox} />
+                      text="Token decimals*"
-                    <Paragraph weight="bolder" size="md" className={classes.checkboxLabel}>
+                      className={classes.addressInput}
-                      Display token for all safes
+                    />
-                    </Paragraph>
+                    <Block align="left">
-                  </Block>
+                      <Field name="showForAllSafes" component={Checkbox} type="checkbox" className={classes.checkbox} />
-                </Col>
+                      <Paragraph weight="bolder" size="md" className={classes.checkboxLabel}>
-                <Col xs={6} layout="column" align="center">
+                        Display token for all safes
-                  <Paragraph className={classes.tokenImageHeading}>Token Image</Paragraph>
+                      </Paragraph>
-                  <Img src={TokenPlaceholder} alt="Token image" height={100} />
+                    </Block>
-                </Col>
+                  </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>
               </Row>
-            </Block>
+            </React.Fragment>
           )}
         </GnoForm>
       </React.Fragment>

src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/style.js

@@ -3,11 +3,12 @@ import { lg } from '~/theme/variables'
 
 export const styles = () => ({
   title: {
-    padding: `${lg} 20px 20px`,
+    padding: `${lg} 0 20px`,
     fontSize: '16px',
   },
   formContainer: {
     padding: '0 20px',
+    minHeight: '369px',
   },
   addressInput: {
     marginBottom: '15px',
@@ -23,4 +24,11 @@ export const styles = () => ({
   checkboxLabel: {
     letterSpacing: '-0.5px',
   },
+  buttonRow: {
+    height: '84px',
+    justifyContent: 'center',
+  },
+  button: {
+    height: '42px',
+  },
 })