Enabling and disabling Tokens logic

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

@@ -0,0 +1,13 @@
+// @flow
+import enableToken from '~/routes/tokens/store/actions/enableToken'
+import disableToken from '~/routes/tokens/store/actions/disableToken'
+
+export type Actions = {
+  enableToken: typeof enableToken,
+  disableToken: typeof disableToken,
+}
+
+export default {
+  enableToken,
+  disableToken,
+}

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

@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react'
+import { connect } from 'react-redux'
 import { List } from 'immutable'
 import classNames from 'classnames/bind'
 import SearchBar from 'material-ui-search-bar'
@@ -23,6 +24,7 @@ import Spacer from '~/components/Spacer'
 import Row from '~/components/layout/Row'
 import { lg, md, sm, xs, mediumFontSize, border } from '~/theme/variables'
 import { type Token } from '~/routes/tokens/store/model/token'
+import actions, { type Actions } from './actions'
 
 const styles = () => ({
   root: {
@@ -96,10 +98,11 @@ const styles = () => ({
   },
 })
 
-type Props = {
+type Props = Actions & {
   onClose: () => void,
   classes: Object,
   tokens: List<Token>,
+  safeAddress: string,
 }
 
 type State = {
@@ -122,6 +125,19 @@ class Tokens extends React.Component<Props, State> {
     this.setState(() => ({ filter: value }))
   }
 
+  onSwitch = (token: Token) => (e: SyntheticInputEvent<HTMLInputElement>) => {
+    const { checked } = e.target
+    const { safeAddress, enableToken, disableToken } = this.props
+
+    if (checked) {
+      enableToken(safeAddress, token)
+
+      return
+    }
+
+    disableToken(safeAddress, token)
+  }
+
   render() {
     const { onClose, classes, tokens } = this.props
     const searchClasses = {
@@ -170,8 +186,8 @@ class Tokens extends React.Component<Props, State> {
               <ListItemText primary={token.get('symbol')} secondary={token.get('name')} />
               <ListItemSecondaryAction>
                 <Switch
-                  onChange={undefined}
+                  onChange={this.onSwitch(token)}
-                  checked
+                  checked={token.get('status')}
                 />
               </ListItemSecondaryAction>
             </ListItem>
@@ -182,4 +198,7 @@ class Tokens extends React.Component<Props, State> {
   }
 }
 
-export default withStyles(styles)(Tokens)
+const TokenComponent = withStyles(styles)(Tokens)
+
+export default connect(undefined, actions)(TokenComponent)
+

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

@@ -33,6 +33,7 @@ type Props = {
   classes: Object,
   granted: boolean,
   tokens: List<Token>,
+  safeAddress: string,
 }
 
 type Action = 'Token' | 'Send' | 'Receive'
@@ -63,7 +64,9 @@ class Balances extends React.Component<Props, State> {
     const {
       hideZero, showToken, showReceive, showSend,
     } = this.state
-    const { classes, granted, tokens } = this.props
+    const {
+      classes, granted, tokens, safeAddress,
+    } = this.props
 
     const columns = generateColumns()
     const autoColumns = columns.filter(c => !c.custom)
@@ -96,7 +99,7 @@ class Balances extends React.Component<Props, State> {
               handleClose={this.onHide('Token')}
               open={showToken}
             >
-              <Tokens tokens={tokens} onClose={this.onHide('Token')} />
+              <Tokens tokens={tokens} onClose={this.onHide('Token')} safeAddress={safeAddress} />
             </Modal>
           </Col>
         </Row>

src/routes/safe/component/Layout.jsx

@@ -122,7 +122,13 @@ class Layout extends React.Component<Props, State> {
           </Tabs>
         </Row>
         <Hairline color="#c8ced4" />
-        {value === 0 && <Balances tokens={tokens} activeTokens={activeTokens} granted={granted} />}
+        {value === 0 &&
+          <Balances
+            tokens={tokens}
+            activeTokens={activeTokens}
+            granted={granted}
+            safeAddress={address}
+          />}
       </React.Fragment>
     )
   }