fix checkbox displaying in manage tokens modal

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

@@ -65,8 +65,7 @@ class Tokens extends React.Component<Props, State> {
     this.setState(() => ({ filter: value }))
   }
 
-  onSwitch = (token: Token) => (e: SyntheticInputEvent<HTMLInputElement>) => {
+  onSwitch = (token: Token) => () => {
-    const { checked } = e.target
     const { safeAddress, updateActiveTokens } = this.props
 
     updateActiveTokens(safeAddress, token.address)
@@ -78,7 +77,9 @@ class Tokens extends React.Component<Props, State> {
   }
 
   render() {
-    const { onClose, classes, tokens } = this.props
+    const {
+      onClose, classes, tokens, activeTokens,
+    } = this.props
     const { filter } = this.state
     const searchClasses = {
       input: classes.searchInput,
@@ -120,19 +121,23 @@ class Tokens extends React.Component<Props, State> {
           <Hairline />
         </Block>
         <MuiList className={classes.list}>
-          {filteredTokens.map((token: Token) => (
+          {filteredTokens.map((token: Token) => {
-            <ListItem key={token.address} className={classes.token}>
+            const isActive = activeTokens.findIndex(({ address }) => address === token.address) !== -1
-              <ListItemIcon>
+
-                <Img src={token.logoUri} height={28} alt={token.name} onError={this.setImageToPlaceholder} />
+            return (
-              </ListItemIcon>
+              <ListItem key={token.address} className={classes.token}>
-              <ListItemText primary={token.symbol} secondary={token.name} />
+                <ListItemIcon>
-              {token.address !== ETH_ADDRESS && (
+                  <Img src={token.logoUri} height={28} alt={token.name} onError={this.setImageToPlaceholder} />
-                <ListItemSecondaryAction>
+                </ListItemIcon>
-                  <Switch onChange={this.onSwitch(token)} checked={token.status} />
+                <ListItemText primary={token.symbol} secondary={token.name} />
-                </ListItemSecondaryAction>
+                {token.address !== ETH_ADDRESS && (
-              )}
+                  <ListItemSecondaryAction>
-            </ListItem>
+                    <Switch onChange={this.onSwitch(token)} checked={isActive} />
-          ))}
+                  </ListItemSecondaryAction>
+                )}
+              </ListItem>
+            )
+          })}
         </MuiList>
       </React.Fragment>
     )

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

@@ -102,7 +102,12 @@ class Balances extends React.Component<Props, State> {
               handleClose={this.onHide('Token')}
               open={showToken}
             >
-              <Tokens tokens={tokens} onClose={this.onHide('Token')} safeAddress={safeAddress} />
+              <Tokens
+                tokens={tokens}
+                onClose={this.onHide('Token')}
+                safeAddress={safeAddress}
+                activeTokens={activeTokens}
+              />
             </Modal>
           </Col>
         </Row>

src/routes/safe/store/reducer/safe.js

@@ -25,7 +25,7 @@ export const buildSafe = (storedSafe: SafeProps) => {
     owners,
   }
 
-  return SafeRecord(safe)
+  return safe
 }
 
 const buildSafesFrom = (loadedSafes: Object): Map<string, Safe> => {
@@ -36,7 +36,7 @@ const buildSafesFrom = (loadedSafes: Object): Map<string, Safe> => {
     const safeRecords = keys.map((address: string) => buildSafe(loadedSafes[address]))
 
     return safes.withMutations(async (map) => {
-      safeRecords.forEach((safe: Safe) => map.set(safe.get('address'), safe))
+      safeRecords.forEach((safe: SafeProps) => map.set(safe.address, safe))
     })
   } catch (err) {
     // eslint-disable-next-line