WA-232 Adding dummy token list to safe view

src/routes/safe/component/Layout.jsx

@@ -7,11 +7,11 @@ import GnoSafe from './Safe'
 type Props = SelectorProps
 
 const Layout = ({
-  safe, balance, provider, userAddress,
+  safe, balances, provider, userAddress,
 }: Props) => (
   <React.Fragment>
     { safe
-      ? <GnoSafe safe={safe} balance={balance} userAddress={userAddress} />
+      ? <GnoSafe safe={safe} balances={balances} userAddress={userAddress} />
       : <NoSafe provider={provider} text="Not found safe" />
     }
   </React.Fragment>

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

@@ -1,8 +1,10 @@
 // @flow
 import { storiesOf } from '@storybook/react'
 import * as React from 'react'
+import { Map } from 'immutable'
 import styles from '~/components/layout/PageFrame/index.scss'
 import { SafeFactory } from '~/routes/safe/store/test/builder/safe.builder'
+import { makeBalance } from '~/routes/safe/store/model/balance'
 import Component from './Layout'
 
 
@@ -12,6 +14,15 @@ const FrameDecorator = story => (
   </div>
 )
 
+const ethBalance = makeBalance({
+  address: '0',
+  name: 'Ether',
+  symbol: 'ETH',
+  decimals: 18,
+  logoUrl: 'assets/icons/icon_etherTokens.svg',
+  funds: '2',
+})
+
 storiesOf('Routes /safe:address', module)
   .addDecorator(FrameDecorator)
   .add('Safe undefined being connected', () => (
@@ -19,7 +30,7 @@ storiesOf('Routes /safe:address', module)
       userAddress="foo"
       safe={undefined}
       provider="METAMASK"
-      balance="0"
+      balances={Map()}
       fetchBalance={() => {}}
     />
   ))
@@ -28,7 +39,7 @@ storiesOf('Routes /safe:address', module)
       userAddress="foo"
       safe={undefined}
       provider=""
-      balance="0"
+      balances={Map()}
       fetchBalance={() => {}}
     />
   ))
@@ -40,7 +51,7 @@ storiesOf('Routes /safe:address', module)
         userAddress="foo"
         safe={safe}
         provider="METAMASK"
-        balance="2"
+        balances={Map().set('ETH', ethBalance)}
         fetchBalance={() => {}}
       />
     )
@@ -53,7 +64,7 @@ storiesOf('Routes /safe:address', module)
         userAddress="foo"
         safe={safe}
         provider="METAMASK"
-        balance="2"
+        balances={Map().set('ETH', ethBalance)}
         fetchBalance={() => {}}
       />
     )

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

@@ -1,21 +0,0 @@
-// @flow
-import * as React from 'react'
-import ListItem from '@material-ui/core/ListItem'
-import ListItemText from '@material-ui/core/ListItemText'
-import Avatar from '@material-ui/core/Avatar'
-import AccountBalance from '@material-ui/icons/AccountBalance'
-
-type Props = {
-  balance: string,
-}
-
-const Balance = ({ balance }: Props) => (
-  <ListItem>
-    <Avatar>
-      <AccountBalance />
-    </Avatar>
-    <ListItemText primary="Balance" secondary={`${balance} ETH`} />
-  </ListItem>
-)
-
-export default Balance

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

@@ -0,0 +1,49 @@
+// @flow
+import * as React from 'react'
+import AccountBalance from '@material-ui/icons/AccountBalance'
+import Avatar from '@material-ui/core/Avatar'
+import Collapse from '@material-ui/core/Collapse'
+import IconButton from '@material-ui/core/IconButton'
+import List from '@material-ui/core/List'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemText from '@material-ui/core/ListItemText'
+import ExpandLess from '@material-ui/icons/ExpandLess'
+import ExpandMore from '@material-ui/icons/ExpandMore'
+import { Map } from 'immutable'
+import openHoc, { type Open } from '~/components/hoc/OpenHoc'
+import { type Balance } from '~/routes/safe/store/model/balance'
+
+type Props = Open & {
+  balances: Map<string, Balance>,
+}
+
+const BalanceComponent = ({ open, toggle, balances }: Props) => (
+  <React.Fragment>
+    <ListItem onClick={toggle}>
+      <Avatar>
+        <AccountBalance />
+      </Avatar>
+      <ListItemText primary="Balance" secondary="List of different token balances" />
+      <ListItemIcon>
+        {open
+          ? <IconButton disableRipple><ExpandLess /></IconButton>
+          : <IconButton disableRipple><ExpandMore /></IconButton>
+        }
+      </ListItemIcon>
+    </ListItem>
+    <Collapse in={open} timeout="auto" unmountOnExit>
+      <List component="div" disablePadding>
+        {balances.valueSeq().map((balance: Balance) => {
+          const symbol = balance.get('symbol')
+
+          return (
+            <div key={symbol}>{symbol}</div>
+          )
+        })}
+      </List>
+    </Collapse>
+  </React.Fragment>
+)
+
+export default openHoc(BalanceComponent)

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

@@ -11,7 +11,7 @@ type Props = {
   dailyLimit: DailyLimit,
   onWithdraw: () => void,
   onEditDailyLimit: () => void,
-  balance: string,
+  balance: number,
 }
 export const EDIT_WITHDRAW = 'Edit'
 export const WITHDRAW_BUTTON_TEXT = 'Withdraw'
@@ -26,7 +26,7 @@ const DailyLimitComponent = ({
   const limit = dailyLimit.get('value')
   const spentToday = dailyLimit.get('spentToday')
 
-  const disabled = spentToday >= limit || Number(balance) === 0
+  const disabled = spentToday >= limit || balance === 0
   const text = `${limit} ETH (spent today: ${spentToday} ETH)`
 
   return (

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

@@ -7,7 +7,7 @@ import Button from '~/components/layout/Button'
 import ListItemText from '~/components/List/ListItemText'
 
 type Props = {
-  balance: string,
+  balance: number,
   onAddTx: () => void,
   onSeeTxs: () => void,
 }
@@ -21,7 +21,7 @@ const addStyle = {
 
 const DailyLimitComponent = ({ balance, onAddTx, onSeeTxs }: Props) => {
   const text = `Available ${balance} ETH`
-  const disabled = Number(balance) <= 0
+  const disabled = balance <= 0
 
   return (
     <ListItem>

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

@@ -1,5 +1,7 @@
 // @flow
+import List from '@material-ui/core/List'
 import * as React from 'react'
+import { Map } from 'immutable'
 import Block from '~/components/layout/Block'
 import Col from '~/components/layout/Col'
 import Bold from '~/components/layout/Bold'
@@ -7,7 +9,7 @@ import Img from '~/components/layout/Img'
 import Paragraph from '~/components/layout/Paragraph'
 import Row from '~/components/layout/Row'
 import { type Safe } from '~/routes/safe/store/model/safe'
-import List from '@material-ui/core/List'
+import { type Balance } from '~/routes/safe/store/model/balance'
 
 import Withdraw from '~/routes/safe/component/Withdraw'
 import Transactions from '~/routes/safe/component/Transactions'
@@ -18,7 +20,7 @@ import RemoveOwner from '~/routes/safe/component/RemoveOwner'
 import EditDailyLimit from '~/routes/safe/component/EditDailyLimit'
 
 import Address from './Address'
-import Balance from './Balance'
+import BalanceInfo from './BalanceInfo'
 import Owners from './Owners'
 import Confirmations from './Confirmations'
 import DailyLimit from './DailyLimit'
@@ -28,7 +30,7 @@ const safeIcon = require('./assets/gnosis_safe.svg')
 
 type SafeProps = {
   safe: Safe,
-  balance: string,
+  balances: Map<string, Balance>,
   userAddress: string,
 }
 
@@ -40,6 +42,15 @@ const listStyle = {
   width: '100%',
 }
 
+const getEthBalanceFrom = (balances: Map<string, Balance>) => {
+  const ethBalance = balances.get('ETH')
+  if (!ethBalance) {
+    return 0
+  }
+
+  return Number(ethBalance.get('funds'))
+}
+
 class GnoSafe extends React.PureComponent<SafeProps, State> {
   state = {
     component: undefined,
@@ -59,9 +70,11 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
   }
 
   onAddTx = () => {
-    const { balance, safe } = this.props
+    const { balances, safe } = this.props
+    const ethBalance = getEthBalanceFrom(balances)
+
     this.setState({
-      component: <AddTransaction safe={safe} balance={Number(balance)} onReset={this.onListTransactions} />,
+      component: <AddTransaction safe={safe} balance={Number(ethBalance)} onReset={this.onListTransactions} />,
     })
   }
 
@@ -90,14 +103,15 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
   }
 
   render() {
-    const { safe, balance, userAddress } = this.props
+    const { safe, balances, userAddress } = this.props
     const { component } = this.state
+    const ethBalance = getEthBalanceFrom(balances)
 
     return (
       <Row grow>
         <Col sm={12} top="xs" md={5} margin="xl" overflow>
           <List style={listStyle}>
-            <Balance balance={balance} />
+            <BalanceInfo balances={balances} />
             <Owners
               owners={safe.owners}
               onAddOwner={this.onAddOwner}
@@ -106,8 +120,8 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
             />
             <Confirmations confirmations={safe.get('threshold')} onEditThreshold={this.onEditThreshold} />
             <Address address={safe.get('address')} />
-            <DailyLimit balance={balance} dailyLimit={safe.get('dailyLimit')} onWithdraw={this.onWithdraw} onEditDailyLimit={this.onEditDailyLimit} />
-            <MultisigTx balance={balance} onAddTx={this.onAddTx} onSeeTxs={this.onListTransactions} />
+            <DailyLimit balance={ethBalance} dailyLimit={safe.get('dailyLimit')} onWithdraw={this.onWithdraw} onEditDailyLimit={this.onEditDailyLimit} />
+            <MultisigTx balance={ethBalance} onAddTx={this.onAddTx} onSeeTxs={this.onListTransactions} />
           </List>
         </Col>
         <Col sm={12} center="xs" md={7} margin="xl" layout="column">

src/routes/safe/container/index.jsx

@@ -45,13 +45,11 @@ class SafeView extends React.PureComponent<Props> {
     const {
       safe, provider, balances, granted, userAddress,
     } = this.props
-    const ethBalance = balances.get('ETH')
-    const balance = ethBalance ? ethBalance.get('funds') : '0'
 
     return (
       <Page>
         { granted
-          ? <Layout balance={balance} provider={provider} safe={safe} userAddress={userAddress} />
+          ? <Layout balances={balances} provider={provider} safe={safe} userAddress={userAddress} />
           : <NoRights />
         }
       </Page>

src/routes/safe/container/selector.js

@@ -1,5 +1,5 @@
 // @flow
-import { List } from 'immutable'
+import { List, Map } from 'immutable'
 import { createSelector, createStructuredSelector, type Selector } from 'reselect'
 import { balanceSelector, safeSelector, type RouterProps, type SafeSelectorProps } from '~/routes/safe/store/selectors'
 import { providerNameSelector, userAccountSelector } from '~/wallets/store/selectors/index'
@@ -7,6 +7,7 @@ import { type Safe } from '~/routes/safe/store/model/safe'
 import { type Owner } from '~/routes/safe/store/model/owner'
 import { type GlobalState } from '~/store/index'
 import { sameAddress } from '~/wallets/ethAddresses'
+import { type Balance } from '~/routes/safe/store/model/balance'
 
 export type SelectorProps = {
   safe: SafeSelectorProps,