WA-232 updating new Flow token property in Safe component

src/routes/safe/component/Layout.stories.js

@@ -1,7 +1,7 @@
 // @flow
 import { storiesOf } from '@storybook/react'
 import * as React from 'react'
-import { Map } from 'immutable'
+import { List } from 'immutable'
 import styles from '~/components/layout/PageFrame/index.scss'
 import { SafeFactory } from '~/routes/safe/store/test/builder/safe.builder'
 import { makeToken } from '~/routes/tokens/store/model/token'
@@ -30,7 +30,7 @@ storiesOf('Routes /safe:address', module)
       userAddress="foo"
       safe={undefined}
       provider="METAMASK"
-      activeTokens={Map()}
+      activeTokens={List([])}
       fetchBalance={() => {}}
     />
   ))
@@ -39,7 +39,7 @@ storiesOf('Routes /safe:address', module)
       userAddress="foo"
       safe={undefined}
       provider=""
-      activeTokens={Map()}
+      activeTokens={List([])}
       fetchBalance={() => {}}
     />
   ))
@@ -51,7 +51,7 @@ storiesOf('Routes /safe:address', module)
         userAddress="foo"
         safe={safe}
         provider="METAMASK"
-        activeTokens={Map().set('ETH', ethBalance)}
+        activeTokens={List([]).push(ethBalance)}
         fetchBalance={() => {}}
       />
     )
@@ -64,7 +64,7 @@ storiesOf('Routes /safe:address', module)
         userAddress="foo"
         safe={safe}
         provider="METAMASK"
-        activeTokens={Map().set('ETH', ethBalance)}
+        activeTokens={List([]).push(ethBalance)}
         fetchBalance={() => {}}
       />
     )

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

@@ -1,7 +1,7 @@
 // @flow
-import List from '@material-ui/core/List'
+import ListComponent from '@material-ui/core/List'
 import * as React from 'react'
-import { Map } from 'immutable'
+import { List } from 'immutable'
 import Block from '~/components/layout/Block'
 import Col from '~/components/layout/Col'
 import Bold from '~/components/layout/Bold'
@@ -30,7 +30,7 @@ const safeIcon = require('./assets/gnosis_safe.svg')
 
 type SafeProps = {
   safe: Safe,
-  tokens: Map<string, Token>,
+  tokens: List<Token>,
   userAddress: string,
 }
 
@@ -43,12 +43,17 @@ const listStyle = {
 }
 
 const getEthBalanceFrom = (tokens: List<Token>) => {
-  const ethToken = tokens.filter(token => token.get('symbol') === 'ETH')
+  const filteredTokens = tokens.filter(token => token.get('symbol') === 'ETH')
-  if (ethToken.count() === 0) {
+  if (filteredTokens.count() === 0) {
     return 0
   }
 
-  return Number(ethToken.get(0).get('funds'))
+  const ethToken = filteredTokens.get(0)
+  if (!ethToken) {
+    return 0
+  }
+
+  return Number(ethToken.get('funds'))
 }
 
 class GnoSafe extends React.PureComponent<SafeProps, State> {
@@ -115,7 +120,7 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
     return (
       <Row grow>
         <Col sm={12} top="xs" md={5} margin="xl" overflow>
-          <List style={listStyle}>
+          <ListComponent style={listStyle}>
             <BalanceInfo tokens={tokens} onMoveFunds={this.onMoveTokens} safeAddress={address} />
             <Owners
               owners={safe.owners}
@@ -127,7 +132,7 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
             <Address address={address} />
             <DailyLimit balance={ethBalance} dailyLimit={safe.get('dailyLimit')} onWithdraw={this.onWithdraw} onEditDailyLimit={this.onEditDailyLimit} />
             <MultisigTx onSeeTxs={this.onListTransactions} />
-          </List>
+          </ListComponent>
         </Col>
         <Col sm={12} center="xs" md={7} margin="xl" layout="column">
           <Block margin="xl">

src/routes/safe/container/selector.js

@@ -1,5 +1,5 @@
 // @flow
-import { List, Map } from 'immutable'
+import { List } from 'immutable'
 import { createSelector, createStructuredSelector, type Selector } from 'reselect'
 import { safeSelector, type RouterProps, type SafeSelectorProps } from '~/routes/safe/store/selectors'
 import { providerNameSelector, userAccountSelector } from '~/wallets/store/selectors/index'
@@ -13,7 +13,7 @@ import { type Token } from '~/routes/tokens/store/model/token'
 export type SelectorProps = {
   safe: SafeSelectorProps,
   provider: string,
-  activeTokens: Map<string, Token>,
+  activeTokens: List<Token>,
   userAddress: string,
 }
 

src/routes/tokens/container/selector.js

@@ -8,7 +8,7 @@ import { type Token } from '~/routes/tokens/store/model/token'
 
 export type SelectorProps = {
   tokens: List<Token>,
-  addresses: List<String>,
+  addresses: List<string>,
   safe: Safe,
   safeAddress: string,
 }