add switching to add custom token screen

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

@@ -9,6 +9,7 @@ import Paragraph from '~/components/layout/Paragraph'
 import Hairline from '~/components/layout/Hairline'
 import Row from '~/components/layout/Row'
 import TokenList from '~/routes/safe/components/Balances/Tokens/screens/TokenList'
+import AddCustomToken from '~/routes/safe/components/Balances/Tokens/screens/AddCustomToken'
 import { type Token } from '~/logic/tokens/store/model/token'
 import actions, { type Actions } from './actions'
 import { styles } from './style'
@@ -30,6 +31,10 @@ class Tokens extends React.Component<Props, State> {
     activeScreen: 'tokenList',
   }
 
+  setActiveScreen = (activeScreen: string) => this.setState({
+    activeScreen,
+  })
+
   render() {
     const {
       onClose, classes, tokens, activeTokens, fetchTokens, updateActiveTokens, safeAddress,
@@ -54,8 +59,10 @@ class Tokens extends React.Component<Props, State> {
             fetchTokens={fetchTokens}
             updateActiveTokens={updateActiveTokens}
             safeAddress={safeAddress}
+            setActiveScreen={this.setActiveScreen}
           />
         )}
+        {activeScreen === 'addCustomToken' && <AddCustomToken />}
       </React.Fragment>
     )
   }

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

@@ -0,0 +1,14 @@
+// @flow
+import React, { Component } from 'react'
+
+class AddCustomToken extends Component {
+  render() {
+    return (
+      <div>
+        Add a token :)
+      </div>
+    )
+  }
+}
+
+export default AddCustomToken

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

@@ -30,6 +30,7 @@ type Props = {
   activeTokens: List<Token>,
   fetchTokens: Function,
   updateActiveTokens: Function,
+  setActiveScreen: Function,
 }
 
 type State = {
@@ -106,7 +107,7 @@ class Tokens extends React.Component<Props, State> {
   }
 
   render() {
-    const { classes, tokens } = this.props
+    const { classes, tokens, setActiveScreen } = this.props
     const { filter, activeTokensAddresses } = this.state
     const searchClasses = {
       input: classes.searchInput,
@@ -114,6 +115,7 @@ class Tokens extends React.Component<Props, State> {
       iconButton: classes.searchIcon,
       searchContainer: classes.searchContainer,
     }
+    const switchToAddCustomTokenScreen = () => setActiveScreen('addCustomToken')
 
     const filteredTokens = filterBy(filter, tokens)
 
@@ -132,7 +134,13 @@ class Tokens extends React.Component<Props, State> {
             <Spacer />
             <Divider />
             <Spacer />
-            <Button variant="contained" size="small" color="secondary" className={classes.add}>
+            <Button
+              variant="contained"
+              size="small"
+              color="secondary"
+              className={classes.add}
+              onClick={switchToAddCustomTokenScreen}
+            >
               + ADD CUSTOM TOKEN
             </Button>
           </Row>