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,24 +22,19 @@ type Props = Actions & {
   activeTokens: List<Token>,
 }
 
-type State = {
-  activeScreen: string,
-}
-
-class Tokens extends React.Component<Props, State> {
-  state = {
-    activeScreen: 'tokenList',
-  }
-
-  setActiveScreen = (activeScreen: string) => this.setState({
-    activeScreen,
-  })
-
-  render() {
+const Tokens = (props: Props) => {
+  const [activeScreen, setActiveScreen] = useState<string>('tokenList')
   const {
-      onClose, classes, tokens, activeTokens, fetchTokens, updateActiveTokens, safeAddress, addToken,
-    } = this.props
-    const { activeScreen } = this.state
+    onClose,
+    classes,
+    tokens,
+    activeTokens,
+    fetchTokens,
+    updateActiveTokens,
+    safeAddress,
+    addToken,
+    activateTokenForAllSafes,
+  } = props
 
   return (
     <React.Fragment>
@@ -59,24 +54,24 @@ class Tokens extends React.Component<Props, State> {
           fetchTokens={fetchTokens}
           updateActiveTokens={updateActiveTokens}
           safeAddress={safeAddress}
-            setActiveScreen={this.setActiveScreen}
+          setActiveScreen={setActiveScreen}
         />
       )}
       {activeScreen === 'addCustomToken' && (
         <AddCustomToken
-            setActiveScreen={this.setActiveScreen}
+          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)
+    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