activate token for all safes functionality

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

@@ -2,15 +2,18 @@
 import fetchTokens from '~/logic/tokens/store/actions/fetchTokens'
 import { addToken } from '~/logic/tokens/store/actions/addToken'
 import updateActiveTokens from '~/routes/safe/store/actions/updateActiveTokens'
+import activateTokenForAllSafes from '~/routes/safe/store/actions/activateTokenForAllSafes'
 
 export type Actions = {
   fetchTokens: Function,
   updateActiveTokens: Function,
   addToken: Function,
+  activateTokenForAllSafes: Function,
 }
 
 export default {
   fetchTokens,
   addToken,
   updateActiveTokens,
+  activateTokenForAllSafes,
 }

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

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react'
+import React, { useState } from 'react'
 import { connect } from 'react-redux'
 import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
@@ -22,60 +22,55 @@ type Props = Actions & {
   activeTokens: List<Token>,
 }
 
-type State = {
-  activeScreen: string,
-}
+const Tokens = (props: Props) => {
+  const [activeScreen, setActiveScreen] = useState<string>('tokenList')
+  const {
+    onClose,
+    classes,
+    tokens,
+    activeTokens,
+    fetchTokens,
+    updateActiveTokens,
+    safeAddress,
+    addToken,
+    activateTokenForAllSafes,
+  } = props
 
-class Tokens extends React.Component<Props, State> {
-  state = {
-    activeScreen: 'tokenList',
-  }
-
-  setActiveScreen = (activeScreen: string) => this.setState({
-    activeScreen,
-  })
-
-  render() {
-    const {
-      onClose, classes, tokens, activeTokens, fetchTokens, updateActiveTokens, safeAddress, addToken,
-    } = this.props
-    const { activeScreen } = this.state
-
-    return (
-      <React.Fragment>
-        <Row align="center" grow className={classes.heading}>
-          <Paragraph className={classes.manage} noMargin>
-            Manage Tokens
-          </Paragraph>
-          <IconButton onClick={onClose} disableRipple>
-            <Close className={classes.close} />
-          </IconButton>
-        </Row>
-        <Hairline />
-        {activeScreen === 'tokenList' && (
-          <TokenList
-            tokens={tokens}
-            activeTokens={activeTokens}
-            fetchTokens={fetchTokens}
-            updateActiveTokens={updateActiveTokens}
-            safeAddress={safeAddress}
-            setActiveScreen={this.setActiveScreen}
-          />
-        )}
-        {activeScreen === 'addCustomToken' && (
-          <AddCustomToken
-            setActiveScreen={this.setActiveScreen}
-            onClose={onClose}
-            addToken={addToken}
-            safeAddress={safeAddress}
-            activeTokens={activeTokens}
-            updateActiveTokens={updateActiveTokens}
-            tokens={tokens}
-          />
-        )}
-      </React.Fragment>
-    )
-  }
+  return (
+    <React.Fragment>
+      <Row align="center" grow className={classes.heading}>
+        <Paragraph className={classes.manage} noMargin>
+          Manage Tokens
+        </Paragraph>
+        <IconButton onClick={onClose} disableRipple>
+          <Close className={classes.close} />
+        </IconButton>
+      </Row>
+      <Hairline />
+      {activeScreen === 'tokenList' && (
+        <TokenList
+          tokens={tokens}
+          activeTokens={activeTokens}
+          fetchTokens={fetchTokens}
+          updateActiveTokens={updateActiveTokens}
+          safeAddress={safeAddress}
+          setActiveScreen={setActiveScreen}
+        />
+      )}
+      {activeScreen === 'addCustomToken' && (
+        <AddCustomToken
+          setActiveScreen={setActiveScreen}
+          onClose={onClose}
+          addToken={addToken}
+          safeAddress={safeAddress}
+          activeTokens={activeTokens}
+          updateActiveTokens={updateActiveTokens}
+          activateTokenForAllSafes={activateTokenForAllSafes}
+          tokens={tokens}
+        />
+      )}
+    </React.Fragment>
+  )
 }
 
 const TokenComponent = withStyles(styles)(Tokens)

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

@@ -32,6 +32,7 @@ type Props = {
   tokens: List<Token>,
   setActiveScreen: Function,
   onClose: Function,
+  activateTokenForAllSafes: Function,
 }
 
 const INITIAL_FORM_STATE = {
@@ -43,12 +44,11 @@ const INITIAL_FORM_STATE = {
 
 const AddCustomToken = (props: Props) => {
   const {
-    classes, setActiveScreen, onClose, addToken, updateActiveTokens, safeAddress, activeTokens, tokens,
+    classes, setActiveScreen, onClose, addToken, updateActiveTokens, safeAddress, activeTokens, tokens, activateTokenForAllSafes,
   } = props
   const [formValues, setFormValues] = useState(INITIAL_FORM_STATE)
 
   const handleSubmit = (values) => {
-    const activeTokensAddresses = activeTokens.map(({ address }) => address)
     const token = {
       address: values.address,
       decimals: values.decimals,
@@ -57,7 +57,13 @@ const AddCustomToken = (props: Props) => {
     }
 
     addToken(token)
-    updateActiveTokens(safeAddress, activeTokensAddresses.push(token.address))
+    if (values.showForAllSafes) {
+      activateTokenForAllSafes(token.address)
+    } else {
+      const activeTokensAddresses = activeTokens.map(({ address }) => address)
+      updateActiveTokens(safeAddress, activeTokensAddresses.push(token.address))
+    }
+
     onClose()
   }
 

src/routes/safe/store/middleware/safeStorage.js

@@ -9,8 +9,9 @@ import { getActiveTokensAddressesForAllSafes } from '~/routes/safe/store/selecto
 import { tokensSelector } from '~/logic/tokens/store/selectors'
 import type { Token } from '~/logic/tokens/store/model/token'
 import { saveActiveTokens } from '~/logic/tokens/utils/tokensStorage'
+import { ACTIVATE_TOKEN_FOR_ALL_SAFES } from '~/routes/safe/store/actions/activateTokenForAllSafes';
 
-const watchedActions = [ADD_SAFE, UPDATE_SAFE]
+const watchedActions = [ADD_SAFE, UPDATE_SAFE, ACTIVATE_TOKEN_FOR_ALL_SAFES]
 
 const safeStorageMware = (store: Store<GlobalState>) => (next: Function) => async (action: AnyAction) => {
   const handledAction = next(action)
@@ -21,7 +22,7 @@ const safeStorageMware = (store: Store<GlobalState>) => (next: Function) => asyn
     saveSafes(safes.toJSON())
 
     // recalculate active tokens
-    if (action.payload.activeTokens) {
+    if (action.payload.activeTokens || action.type === ACTIVATE_TOKEN_FOR_ALL_SAFES) {
       const tokens = tokensSelector(state)
       const activeTokenAddresses = getActiveTokensAddressesForAllSafes(state)
 

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

@@ -67,7 +67,17 @@ export default handleActions<State, *>(
     [ACTIVATE_TOKEN_FOR_ALL_SAFES]: (state: State, action: ActionType<Function>): State => {
       const tokenAddress = action.payload
 
-      return state
+      const newState = state.withMutations((map) => {
+        console.log(map.keys())
+        map.keySeq().forEach((safeAddress) => {
+          const safeActiveTokens = map.getIn([safeAddress, 'activeTokens'])
+          const activeTokens = safeActiveTokens.push(tokenAddress)
+
+          map.update(safeAddress, prevSafe => prevSafe.merge({ activeTokens }))
+        })
+      })
+
+      return newState
     },
     [ADD_SAFE]: (state: State, action: ActionType<Function>): State => {
       const { safe }: { safe: SafeProps } = action.payload