WA-232 Adding add Token button

src/routes/tokens/component/Layout.jsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import Block from '~/components/layout/Block'
 import Col from '~/components/layout/Col'
 import AccountBalanceWallet from '@material-ui/icons/AccountBalanceWallet'
+import AddCircle from '@material-ui/icons/AddCircle'
 import Link from '~/components/layout/Link'
 import Bold from '~/components/layout/Bold'
 import Img from '~/components/layout/Img'
@@ -14,8 +15,8 @@ import { type Token } from '~/routes/tokens/store/model/token'
 import { type SelectorProps } from '~/routes/tokens/container/selector'
 import { type Actions } from '~/routes/tokens/container/actions'
 import { SAFELIST_ADDRESS } from '~/routes/routes'
+import AddToken from '~/routes/tokens/component/AddToken'
 import TokenComponent from './Token'
-// import AddToken from '~/routes/tokens/component/AddToken'
 // import RemoveToken from '~/routes/tokens/component/RemoveToken'
 
 const safeIcon = require('~/routes/safe/component/Safe/assets/gnosis_safe.svg')
@@ -35,12 +36,13 @@ class TokenLayout extends React.PureComponent<TokenProps, State> {
   state = {
     component: undefined,
   }
-  /*
-    onAddToken = () => {
-      const { addresses } = this.props
-      this.setState({ component: <AddToken/> })
-    }
 
+  onAddToken = () => () => {
+    const { addresses, safeAddress } = this.props
+    this.setState({ component: <AddToken tokens={addresses.toArray()} safeAddress={safeAddress} /> })
+  }
+
+  /*
     onRemoveToken = () => {
       this.setState({ component: <RemoveToken /> })
     }
@@ -82,6 +84,9 @@ class TokenLayout extends React.PureComponent<TokenProps, State> {
               <IconButton to={`${SAFELIST_ADDRESS}/${safeAddress}`} component={Link}>
                 <AccountBalanceWallet />
               </IconButton>
+              <IconButton onClick={this.onAddToken}>
+                <AddCircle />
+              </IconButton>
               <Bold>{name}</Bold>
             </Paragraph>
           </Block>