diff --git a/src/routes/safe/component/Safe/BalanceInfo.jsx b/src/routes/safe/component/Safe/BalanceInfo.jsx index 6cd1d4b7..94d7087e 100644 --- a/src/routes/safe/component/Safe/BalanceInfo.jsx +++ b/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, } -const BalanceComponent = ({ open, toggle, balances }: Props) => ( +const styles = { + nested: { + paddingLeft: '40px', + }, +} + +const BalanceComponent = openHoc(({ + open, toggle, balances, classes, +}: Props) => ( @@ -32,18 +43,28 @@ const BalanceComponent = ({ open, toggle, balances }: Props) => ( } - + {balances.valueSeq().map((balance: Balance) => { const symbol = balance.get('symbol') + const name = balance.get('name') return ( -
{symbol}
+ + + {name} + + + ) })}
-) +)) -export default openHoc(BalanceComponent) +export default withStyles(styles)(BalanceComponent) diff --git a/src/routes/safe/store/actions/fetchBalances.js b/src/routes/safe/store/actions/fetchBalances.js index edb2f325..3275b7af 100644 --- a/src/routes/safe/store/actions/fetchBalances.js +++ b/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, })