WA-232 Showing Token icons and their balance

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

@@ -5,20 +5,31 @@ 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 Img from '~/components/layout/Img'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
 import ListItemText from '@material-ui/core/ListItemText'
+import { withStyles } from '@material-ui/core/styles'
 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 WithStyles } from '~/theme/mui'
 import { type Balance } from '~/routes/safe/store/model/balance'
 
-type Props = Open & {
+type Props = Open & WithStyles & {
   balances: Map<string, Balance>,
 }
 
-const BalanceComponent = ({ open, toggle, balances }: Props) => (
+const styles = {
+  nested: {
+    paddingLeft: '40px',
+  },
+}
+
+const BalanceComponent = openHoc(({
+  open, toggle, balances, classes,
+}: Props) => (
   <React.Fragment>
     <ListItem onClick={toggle}>
       <Avatar>
@@ -32,18 +43,28 @@ const BalanceComponent = ({ open, toggle, balances }: Props) => (
         }
       </ListItemIcon>
     </ListItem>
-    <Collapse in={open} timeout="auto" unmountOnExit>
+    <Collapse in={open} timeout="auto">
       <List component="div" disablePadding>
         {balances.valueSeq().map((balance: Balance) => {
           const symbol = balance.get('symbol')
+          const name = balance.get('name')
 
           return (
-            <div key={symbol}>{symbol}</div>
+            <ListItem key={symbol} className={classes.nested}>
+              <ListItemIcon>
+                <Img src={balance.get('logoUrl')} height={30} alt={name} />
+              </ListItemIcon>
+              <ListItemText
+                cut
+                primary={name}
+                secondary={`${balance.get('funds')} ${symbol}`}
+              />
+            </ListItem>
           )
         })}
       </List>
     </Collapse>
   </React.Fragment>
-)
+))
 
-export default openHoc(BalanceComponent)
+export default withStyles(styles)(BalanceComponent)

src/routes/safe/store/actions/fetchBalances.js

@@ -6,6 +6,7 @@ import StandardToken from '@gnosis.pm/util-contracts/build/contracts/StandardTok
 import { getBalanceInEtherOf, getWeb3 } from '~/wallets/getWeb3'
 import { type GlobalState } from '~/store/index'
 import { makeBalance, type Balance, type BalanceProps } from '~/routes/safe/store/model/balance'
+import logo from '~/assets/icons/icon_etherTokens.svg'
 import addBalances from './addBalances'
 
 export const calculateBalanceOf = async (tokenAddress: string, address: string) => {
@@ -25,7 +26,7 @@ export const fetchBalances = (safeAddress: string) => async (dispatch: ReduxDisp
     name: 'Ether',
     symbol: 'ETH',
     decimals: 18,
-    logoUrl: 'assets/icons/icon_etherTokens.svg',
+    logoUrl: logo,
     funds: balance,
   })