move side effects out from tokens reducer, wip rounding bug in tokens balances (should be 1.1 but bignumber returns 1)

package.json

@@ -74,8 +74,8 @@
     "immutable": "^4.0.0-rc.9",
     "material-ui-search-bar": "^1.0.0-beta.13",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "react": "^16.4.0",
+    "react": "^16.8.5",
-    "react-dom": "^16.4.0",
+    "react-dom": "^16.8.5",
     "react-final-form": "^4.1.0",
     "react-hot-loader": "^4.8.0",
     "react-infinite-scroll-component": "^4.5.2",
@@ -114,10 +114,10 @@
     "@babel/preset-flow": "^7.0.0-beta.40",
     "@babel/preset-react": "^7.0.0-beta.40",
     "@sambego/storybook-state": "^1.0.7",
-    "@storybook/addon-actions": "^5.0.0",
+    "@storybook/addon-actions": "^5.0.5",
-    "@storybook/addon-knobs": "^5.0.0",
+    "@storybook/addon-knobs": "^5.0.5",
-    "@storybook/addon-links": "^5.0.0",
+    "@storybook/addon-links": "^5.0.5",
-    "@storybook/react": "^5.0.0",
+    "@storybook/react": "^5.0.5",
     "autoprefixer": "^9.4.10",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
@@ -154,9 +154,9 @@
     "storybook-host": "^5.0.3",
     "storybook-router": "^0.3.3",
     "style-loader": "^0.23.1",
-    "truffle": "^5.0.6",
+    "truffle": "^5.0.9",
-    "truffle-contract": "^4.0.7",
+    "truffle-contract": "^4.0.10",
-    "truffle-solidity-loader": "^0.1.6",
+    "truffle-solidity-loader": "^0.1.9",
     "uglifyjs-webpack-plugin": "^2.1.2",
     "webpack": "^4.1.1",
     "webpack-bundle-analyzer": "^3.1.0",

src/logic/tokens/store/actions/disableToken.js

@@ -1,15 +1,25 @@
 // @flow
 import { createAction } from 'redux-actions'
 import { type Token } from '~/logic/tokens/store/model/token'
+import type { Dispatch as ReduxDispatch } from 'redux'
+import { type GlobalState } from '~/store/index'
+import { removeFromActiveTokens } from '~/logic/tokens/utils/activeTokensStorage'
 
 export const DISABLE_TOKEN = 'DISABLE_TOKEN'
 
 const disableToken = createAction(
   DISABLE_TOKEN,
-  (safeAddress: string, token: Token) => ({
+  (safeAddress: string, tokenAddress: string) => ({
     safeAddress,
-    address: token.get('address'),
+    tokenAddress,
   }),
 )
 
-export default disableToken
+const hideToken = (safeAddress: string, token: Token) => (dispatch: ReduxDispatch<GlobalState>) => {
+  const { address } = token
+  dispatch(disableToken(safeAddress, address))
+
+  removeFromActiveTokens(safeAddress, address)
+}
+
+export default hideToken

src/logic/tokens/store/actions/enableToken.js

@@ -1,16 +1,23 @@
 // @flow
 import { createAction } from 'redux-actions'
+import type { Dispatch as ReduxDispatch } from 'redux'
+import { type GlobalState } from '~/store/index'
 import { type Token } from '~/logic/tokens/store/model/token'
+import { setActiveTokenAddresses, getActiveTokenAddresses } from '~/logic/tokens/utils/activeTokensStorage'
 
 export const ENABLE_TOKEN = 'ENABLE_TOKEN'
 
-const enableToken = createAction(ENABLE_TOKEN, (safeAddress: string, token: Token) => ({
+const enableToken = createAction(ENABLE_TOKEN, (safeAddress: string, tokenAddress: string) => ({
   safeAddress,
-  address: token.get('address'),
+  tokenAddress,
 }))
 
 const setTokenEnabled = (safeAddress: string, token: Token) => (dispatch: ReduxDispatch<GlobalState>) => {
-  dispatch(enableToken(safeAddress, token))
+  const { address } = token
+  dispatch(enableToken(safeAddress, address))
+
+  const activeTokens = getActiveTokenAddresses(safeAddress)
+  setActiveTokenAddresses(safeAddress, activeTokens.push(address))
 }
 
 export default setTokenEnabled

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

@@ -45,9 +45,19 @@ export const calculateBalanceOf = async (tokenAddress: string, address: string,
     console.error('Failed to fetch token balances: ', err)
   }
 
+  console.log(
+    tokenAddress,
+    balance.toString(),
+    10 ** decimals,
+    web3.utils
+      .toBN(balance)
+      .div(web3.utils.toBN(10).pow(web3.utils.toBN(decimals)))
+      .toString(),
+  )
+
   return web3.utils
     .toBN(balance)
-    .div(web3.utils.toBN(10 ** decimals))
+    .div(web3.utils.toBN(10).pow(web3.utils.toBN(decimals)))
     .toString()
 }
 

src/logic/tokens/store/reducer/tokens.js

@@ -7,11 +7,6 @@ import addTokens, { ADD_TOKENS } from '~/logic/tokens/store/actions/addTokens'
 import { type Token } from '~/logic/tokens/store/model/token'
 import disableToken, { DISABLE_TOKEN } from '~/logic/tokens/store/actions/disableToken'
 import enableToken, { ENABLE_TOKEN } from '~/logic/tokens/store/actions/enableToken'
-import {
-  setActiveTokenAddresses,
-  getActiveTokenAddresses,
-  removeFromActiveTokens,
-} from '~/logic/tokens/utils/activeTokensStorage'
 
 export const TOKEN_REDUCER_ID = 'tokens'
 
@@ -32,30 +27,25 @@ export default handleActions(
     },
     [ADD_TOKEN]: (state: State, action: ActionType<typeof addToken>): State => {
       const { safeAddress, token } = action.payload
+      const { address: tokenAddress } = token
 
-      const tokenAddress = token.get('address')
       return state.setIn([safeAddress, tokenAddress], token)
     },
     [REMOVE_TOKEN]: (state: State, action: ActionType<typeof removeToken>): State => {
       const { safeAddress, token } = action.payload
+      const { address: tokenAddress } = token
 
-      const tokenAddress = token.get('address')
       return state.removeIn([safeAddress, tokenAddress])
     },
     [DISABLE_TOKEN]: (state: State, action: ActionType<typeof disableToken>): State => {
-      const { address, safeAddress } = action.payload
+      const { tokenAddress, safeAddress } = action.payload
 
-      removeFromActiveTokens(safeAddress, address)
+      return state.setIn([safeAddress, tokenAddress, 'status'], false)
-
-      return state.setIn([safeAddress, address, 'status'], false)
     },
     [ENABLE_TOKEN]: (state: State, action: ActionType<typeof enableToken>): State => {
-      const { address, safeAddress } = action.payload
+      const { tokenAddress, safeAddress } = action.payload
 
-      const activeTokens = getActiveTokenAddresses(safeAddress)
+      return state.setIn([safeAddress, tokenAddress, 'status'], true)
-      setActiveTokenAddresses(safeAddress, activeTokens.push(address))
-
-      return state.setIn([safeAddress, address, 'status'], true)
     },
   },
   Map(),

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

@@ -47,13 +47,19 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
   onListTransactions = () => {
     const { safe } = this.props
 
-    this.setState({ component: <Transactions threshold={safe.get('threshold')} safeName={safe.get('name')} safeAddress={safe.get('address')} /> })
+    this.setState({
+      component: (
+        <Transactions threshold={safe.get('threshold')} safeName={safe.get('name')} safeAddress={safe.get('address')} />
+      ),
+    })
   }
 
   onEditThreshold = () => {
     const { safe } = this.props
 
-    this.setState({ component: <Threshold numOwners={safe.get('owners').count()} safe={safe} onReset={this.onListTransactions} /> })
+    this.setState({
+      component: <Threshold numOwners={safe.get('owners').count()} safe={safe} onReset={this.onListTransactions} />,
+    })
   }
 
   onAddOwner = (e: SyntheticEvent<HTMLButtonElement>) => {
@@ -65,19 +71,26 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
   onRemoveOwner = (name: string, address: string) => {
     const { safe } = this.props
 
-    this.setState({ component: <RemoveOwner safeAddress={safe.get('address')} threshold={safe.get('threshold')} safe={safe} name={name} userToRemove={address} /> })
+    this.setState({
+      component: (
+        <RemoveOwner
+          safeAddress={safe.get('address')}
+          threshold={safe.get('threshold')}
+          safe={safe}
+          name={name}
+          userToRemove={address}
+        />
+      ),
+    })
   }
 
   onMoveTokens = (ercToken: Token) => {
     const { safe } = this.props
 
     this.setState({
-      component: <SendToken
+      component: (
-        safe={safe}
+        <SendToken safe={safe} token={ercToken} key={ercToken.get('address')} onReset={this.onListTransactions} />
-        token={ercToken}
+      ),
-        key={ercToken.get('address')}
-        onReset={this.onListTransactions}
-      />,
     })
   }
 
@@ -110,7 +123,7 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
           </Block>
           <Row grow>
             <Col sm={12} center={component ? undefined : 'sm'} middle={component ? undefined : 'sm'} layout="column">
-              { component || <Img alt="Safe Icon" src={safeIcon} height={330} /> }
+              {component || <Img alt="Safe Icon" src={safeIcon} height={330} />}
             </Col>
           </Row>
         </Col>