(Feature) Remove spam tokens / Deactivate tokens refresh fix

src/logic/currencyValues/api/fetchTokenCurrenciesBalances.ts

@@ -11,9 +11,12 @@ export type BalanceEndpoint = {
   usdConversion: string
 }
 
-const fetchTokenCurrenciesBalances = (safeAddress: string): Promise<AxiosResponse<BalanceEndpoint[]>> => {
+const fetchTokenCurrenciesBalances = (
+  safeAddress: string,
+  excludeSpamTokens = true,
+): Promise<AxiosResponse<BalanceEndpoint[]>> => {
   const apiUrl = getTxServiceHost()
-  const url = `${apiUrl}safes/${safeAddress}/balances/usd/`
+  const url = `${apiUrl}safes/${safeAddress}/balances/usd/?exclude_spam=${excludeSpamTokens}`
 
   return axios.get(url, {
     params: {

src/logic/currencyValues/store/actions/setCurrencyBalances.ts

@@ -1,9 +1,12 @@
 import { createAction } from 'redux-actions'
+import { BalanceCurrencyList } from 'src/logic/currencyValues/store/model/currencyValues'
 
 export const SET_CURRENCY_BALANCES = 'SET_CURRENCY_BALANCES'
 
-// eslint-disable-next-line max-len
-export const setCurrencyBalances = createAction(SET_CURRENCY_BALANCES, (safeAddress, currencyBalances) => ({
-  safeAddress,
-  currencyBalances,
-}))
+export const setCurrencyBalances = createAction(
+  SET_CURRENCY_BALANCES,
+  (safeAddress: string, currencyBalances: BalanceCurrencyList) => ({
+    safeAddress,
+    currencyBalances,
+  }),
+)

src/logic/safe/store/actions/updateActiveTokens.ts

@@ -1,4 +1,6 @@
 import updateSafe from './updateSafe'
+import { Set } from 'immutable'
+import { Dispatch } from 'redux'
 
 // the selector uses ownProps argument/router props to get the address of the safe
 // so in order to use it I had to recreate the same structure
@@ -10,7 +12,7 @@ import updateSafe from './updateSafe'
 //   },
 // })
 
-const updateActiveTokens = (safeAddress, activeTokens) => async (dispatch) => {
+const updateActiveTokens = (safeAddress: string, activeTokens: Set<string>) => (dispatch: Dispatch): void => {
   dispatch(updateSafe({ address: safeAddress, activeTokens }))
 }
 

src/logic/safe/store/actions/updateBlacklistedTokens.ts

@@ -1,6 +1,8 @@
 import updateSafe from './updateSafe'
+import { Dispatch } from 'redux'
+import { Set } from 'immutable'
 
-const updateBlacklistedTokens = (safeAddress, blacklistedTokens) => async (dispatch) => {
+const updateBlacklistedTokens = (safeAddress: string, blacklistedTokens: Set<string>) => (dispatch: Dispatch): void => {
   dispatch(updateSafe({ address: safeAddress, blacklistedTokens }))
 }
 

src/logic/safe/store/reducer/safe.ts

@@ -77,7 +77,7 @@ export default handleActions(
       // with initial props and it would overwrite existing ones
 
       if (state.hasIn(['safes', safe.address])) {
-        return state.updateIn(['safes', safe.address], (prevSafe) => prevSafe.merge(safe))
+        return state.updateIn(['safes', safe.address], (prevSafe) => prevSafe.mergeDeep(safe))
       }
 
       return state.setIn(['safes', safe.address], makeSafe(safe))

src/logic/safe/store/selectors/index.ts

@@ -36,7 +36,7 @@ const cancellationTransactionsSelector = (state: AppReduxState) => state[CANCELL
 
 const incomingTransactionsSelector = (state: AppReduxState) => state[INCOMING_TRANSACTIONS_REDUCER_ID]
 
-export const safeParamAddressFromStateSelector = (state: AppReduxState): string | undefined => {
+export const safeParamAddressFromStateSelector = (state: AppReduxState): string => {
   const match = matchPath<{ safeAddress: string }>(state.router.location.pathname, {
     path: `${SAFELIST_ADDRESS}/:safeAddress`,
   })
@@ -45,7 +45,7 @@ export const safeParamAddressFromStateSelector = (state: AppReduxState): string
     return checksumAddress(match.params.safeAddress)
   }
 
-  return undefined
+  return ''
 }
 
 export const safeParamAddressSelector = (

src/logic/tokens/store/actions/fetchTokens.ts

@@ -12,8 +12,10 @@ import { fetchTokenList } from 'src/logic/tokens/api'
 import { makeToken, Token } from 'src/logic/tokens/store/model/token'
 import { tokensSelector } from 'src/logic/tokens/store/selectors'
 import { getWeb3 } from 'src/logic/wallets/getWeb3'
-import { store } from 'src/store'
+import { AppReduxState, store } from 'src/store'
 import { ensureOnce } from 'src/utils/singleton'
+import { ThunkDispatch } from 'redux-thunk'
+import { AnyAction } from 'redux'
 
 const createStandardTokenContract = async () => {
   const web3 = getWeb3()
@@ -43,7 +45,7 @@ export const getStandardTokenContract = ensureOnce(createStandardTokenContract)
 
 export const getERC721TokenContract = ensureOnce(createERC721TokenContract)
 
-export const containsMethodByHash = async (contractAddress, methodHash) => {
+export const containsMethodByHash = async (contractAddress: string, methodHash: string): Promise<boolean> => {
   const web3 = getWeb3()
   const byteCode = await web3.eth.getCode(contractAddress)
 
@@ -87,7 +89,10 @@ export const getTokenInfos = async (tokenAddress: string): Promise<Token | undef
   return token
 }
 
-export const fetchTokens = () => async (dispatch, getState) => {
+export const fetchTokens = () => async (
+  dispatch: ThunkDispatch<AppReduxState, undefined, AnyAction>,
+  getState: () => AppReduxState,
+): Promise<void> => {
   try {
     const currentSavedTokens = tokensSelector(getState())
 

src/routes/safe/components/Balances/Coins/index.tsx

@@ -9,8 +9,6 @@ import { Skeleton } from '@material-ui/lab'
 
 import InfoIcon from 'src/assets/icons/info.svg'
 
-import { useStyles } from './styles'
-
 import Img from 'src/components/layout/Img'
 import Table from 'src/components/Table'
 import { cellWidth } from 'src/components/Table/TableHead'
@@ -33,25 +31,16 @@ import {
 } from 'src/routes/safe/components/Balances/dataFetcher'
 import { extendedSafeTokensSelector, grantedSelector } from 'src/routes/safe/container/selector'
 import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
+import { makeStyles } from '@material-ui/core/styles'
+import { styles } from './styles'
+
+const useStyles = makeStyles(styles)
 
 type Props = {
   showReceiveFunds: () => void
   showSendFunds: (tokenAddress: string) => void
 }
 
-export type BalanceDataRow = List<{
-  asset: {
-    name: string
-    address: string
-    logoUri: string
-  }
-  assetOrder: string
-  balance: string
-  balanceOrder: number
-  fixed: boolean
-  value: string
-}>
-
 type CurrencyTooltipProps = {
   valueWithCurrency: string
   balanceWithSymbol: string
@@ -84,16 +73,16 @@ const Coins = (props: Props): React.ReactElement => {
   const activeTokens = useSelector(extendedSafeTokensSelector)
   const currencyValues = useSelector(safeFiatBalancesListSelector)
   const granted = useSelector(grantedSelector)
-  const [filteredData, setFilteredData] = React.useState<List<BalanceData>>(List())
   const { trackEvent } = useAnalytics()
 
   useEffect(() => {
     trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Coins' })
   }, [trackEvent])
 
-  useMemo(() => {
-    setFilteredData(getBalanceData(activeTokens, selectedCurrency, currencyValues, currencyRate))
-  }, [activeTokens, selectedCurrency, currencyValues, currencyRate])
+  const filteredData: List<BalanceData> = useMemo(
+    () => getBalanceData(activeTokens, selectedCurrency, currencyValues, currencyRate),
+    [activeTokens, selectedCurrency, currencyValues, currencyRate],
+  )
 
   return (
     <TableContainer>

src/routes/safe/components/Balances/Coins/styles.ts

@@ -1,7 +1,7 @@
-import { makeStyles } from '@material-ui/core/styles'
 import { sm, xs } from 'src/theme/variables'
+import { createStyles } from '@material-ui/core'
 
-export const useStyles = makeStyles({
+export const styles = createStyles({
   iconSmall: {
     fontSize: 16,
   },

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

@@ -1,11 +1,10 @@
 import IconButton from '@material-ui/core/IconButton'
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 
 import React, { useState } from 'react'
-import { connect, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 
-import actions from './actions'
 import { styles } from './style'
 
 import Hairline from 'src/components/layout/Hairline'
@@ -16,27 +15,27 @@ import { orderedTokenListSelector } from 'src/logic/tokens/store/selectors'
 import AddCustomAssetComponent from 'src/routes/safe/components/Balances/Tokens/screens/AddCustomAsset'
 import AddCustomToken from 'src/routes/safe/components/Balances/Tokens/screens/AddCustomToken'
 import AssetsList from 'src/routes/safe/components/Balances/Tokens/screens/AssetsList'
-import TokenList from 'src/routes/safe/components/Balances/Tokens/screens/TokenList'
+
 import { extendedSafeTokensSelector } from 'src/routes/safe/container/selector'
 import { safeBlacklistedTokensSelector } from 'src/logic/safe/store/selectors'
+import { TokenList } from 'src/routes/safe/components/Balances/Tokens/screens/TokenList'
 
 export const MANAGE_TOKENS_MODAL_CLOSE_BUTTON_TEST_ID = 'manage-tokens-close-modal-btn'
 
-const Tokens = (props) => {
-  const {
-    activateTokenForAllSafes,
-    addToken,
-    classes,
-    fetchTokens,
-    modalScreen,
-    onClose,
-    safeAddress,
-    updateActiveTokens,
-    updateBlacklistedTokens,
-  } = props
+const useStyles = makeStyles(styles)
+
+type Props = {
+  safeAddress: string
+  modalScreen: string
+  onClose: () => void
+}
+
+const Tokens = (props: Props): React.ReactElement => {
+  const { modalScreen, onClose, safeAddress } = props
   const tokens = useSelector(orderedTokenListSelector)
   const activeTokens = useSelector(extendedSafeTokensSelector)
   const blacklistedTokens = useSelector(safeBlacklistedTokensSelector)
+  const classes = useStyles()
   const [activeScreen, setActiveScreen] = useState(modalScreen)
 
   return (
@@ -54,26 +53,20 @@ const Tokens = (props) => {
         <TokenList
           activeTokens={activeTokens}
           blacklistedTokens={blacklistedTokens}
-          fetchTokens={fetchTokens}
           safeAddress={safeAddress}
           setActiveScreen={setActiveScreen}
           tokens={tokens}
-          updateActiveTokens={updateActiveTokens}
-          updateBlacklistedTokens={updateBlacklistedTokens}
         />
       )}
       {activeScreen === 'assetsList' && <AssetsList setActiveScreen={setActiveScreen} />}
       {activeScreen === 'addCustomToken' && (
         <AddCustomToken
-          activateTokenForAllSafes={activateTokenForAllSafes}
           activeTokens={activeTokens}
-          addToken={addToken}
           onClose={onClose}
           parentList={'tokenList'}
           safeAddress={safeAddress}
           setActiveScreen={setActiveScreen}
           tokens={tokens}
-          updateActiveTokens={updateActiveTokens}
         />
       )}
       {activeScreen === 'addCustomAsset' && (
@@ -83,6 +76,4 @@ const Tokens = (props) => {
   )
 }
 
-const TokenComponent = withStyles(styles as any)(Tokens)
-
-export default connect(undefined, actions)(TokenComponent)
+export default Tokens

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

@@ -1,4 +1,4 @@
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import React, { useState } from 'react'
 import { FormSpy } from 'react-final-form'
 
@@ -22,6 +22,12 @@ import Row from 'src/components/layout/Row'
 import TokenPlaceholder from 'src/routes/safe/components/Balances/assets/token_placeholder.svg'
 import { checksumAddress } from 'src/utils/checksumAddress'
 import { Checkbox } from '@gnosis.pm/safe-react-components'
+import { useDispatch } from 'react-redux'
+import { addToken } from 'src/logic/tokens/store/actions/addToken'
+import updateActiveTokens from 'src/logic/safe/store/actions/updateActiveTokens'
+import activateTokenForAllSafes from 'src/logic/safe/store/actions/activateTokenForAllSafes'
+import { Token } from 'src/logic/tokens/store/model/token'
+import { List, Set } from 'immutable'
 
 export const ADD_CUSTOM_TOKEN_ADDRESS_INPUT_TEST_ID = 'add-custom-token-address-input'
 export const ADD_CUSTOM_TOKEN_SYMBOLS_INPUT_TEST_ID = 'add-custom-token-symbols-input'
@@ -35,20 +41,22 @@ const INITIAL_FORM_STATE = {
   logoUri: '',
 }
 
-const AddCustomToken = (props) => {
-  const {
-    activateTokenForAllSafes,
-    activeTokens,
-    addToken,
-    classes,
-    onClose,
-    parentList,
-    safeAddress,
-    setActiveScreen,
-    tokens,
-    updateActiveTokens,
-  } = props
+const useStyles = makeStyles(styles)
+
+type Props = {
+  activeTokens: List<Token>
+  onClose: () => void
+  parentList: string
+  safeAddress: string
+  setActiveScreen: (screen: string) => void
+  tokens: List<Token>
+}
+
+const AddCustomToken = (props: Props): React.ReactElement => {
+  const { activeTokens, onClose, parentList, safeAddress, setActiveScreen, tokens } = props
   const [formValues, setFormValues] = useState(INITIAL_FORM_STATE)
+  const classes = useStyles()
+  const dispatch = useDispatch()
 
   const handleSubmit = (values) => {
     const address = checksumAddress(values.address)
@@ -59,12 +67,12 @@ const AddCustomToken = (props) => {
       name: values.symbol,
     }
 
-    addToken(token)
+    dispatch(addToken(token))
     if (values.showForAllSafes) {
-      activateTokenForAllSafes(token.address)
+      dispatch(activateTokenForAllSafes(token.address))
     } else {
-      const activeTokensAddresses = activeTokens.map(({ address }) => address)
-      updateActiveTokens(safeAddress, activeTokensAddresses.push(token.address))
+      const activeTokensAddresses = Set(activeTokens.map(({ address }) => address))
+      dispatch(updateActiveTokens(safeAddress, activeTokensAddresses.add(token.address)))
     }
 
     onClose()
@@ -203,6 +211,4 @@ const AddCustomToken = (props) => {
   )
 }
 
-const AddCustomTokenComponent = withStyles(styles as any)(AddCustomToken)
-
-export default AddCustomTokenComponent
+export default AddCustomToken

src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/style.ts

@@ -1,6 +1,7 @@
 import { lg, md } from 'src/theme/variables'
+import { createStyles } from '@material-ui/core'
 
-export const styles = () => ({
+export const styles = createStyles({
   title: {
     padding: `${lg} 0 20px`,
     fontSize: md,