WA-232 Showing Token icons and their balance

This commit is contained in:
apanizo 2018-06-29 13:50:46 +02:00
parent cc1cd84c1f
commit 06e8b0153e
2 changed files with 29 additions and 7 deletions

View File

@ -5,20 +5,31 @@ import Avatar from '@material-ui/core/Avatar'
import Collapse from '@material-ui/core/Collapse' import Collapse from '@material-ui/core/Collapse'
import IconButton from '@material-ui/core/IconButton' import IconButton from '@material-ui/core/IconButton'
import List from '@material-ui/core/List' import List from '@material-ui/core/List'
import Img from '~/components/layout/Img'
import ListItem from '@material-ui/core/ListItem' import ListItem from '@material-ui/core/ListItem'
import ListItemIcon from '@material-ui/core/ListItemIcon' import ListItemIcon from '@material-ui/core/ListItemIcon'
import ListItemText from '@material-ui/core/ListItemText' import ListItemText from '@material-ui/core/ListItemText'
import { withStyles } from '@material-ui/core/styles'
import ExpandLess from '@material-ui/icons/ExpandLess' import ExpandLess from '@material-ui/icons/ExpandLess'
import ExpandMore from '@material-ui/icons/ExpandMore' import ExpandMore from '@material-ui/icons/ExpandMore'
import { Map } from 'immutable' import { Map } from 'immutable'
import openHoc, { type Open } from '~/components/hoc/OpenHoc' import openHoc, { type Open } from '~/components/hoc/OpenHoc'
import { type WithStyles } from '~/theme/mui'
import { type Balance } from '~/routes/safe/store/model/balance' import { type Balance } from '~/routes/safe/store/model/balance'
type Props = Open & { type Props = Open & WithStyles & {
balances: Map<string, Balance>, 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> <React.Fragment>
<ListItem onClick={toggle}> <ListItem onClick={toggle}>
<Avatar> <Avatar>
@ -32,18 +43,28 @@ const BalanceComponent = ({ open, toggle, balances }: Props) => (
} }
</ListItemIcon> </ListItemIcon>
</ListItem> </ListItem>
<Collapse in={open} timeout="auto" unmountOnExit> <Collapse in={open} timeout="auto">
<List component="div" disablePadding> <List component="div" disablePadding>
{balances.valueSeq().map((balance: Balance) => { {balances.valueSeq().map((balance: Balance) => {
const symbol = balance.get('symbol') const symbol = balance.get('symbol')
const name = balance.get('name')
return ( 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> </List>
</Collapse> </Collapse>
</React.Fragment> </React.Fragment>
) ))
export default openHoc(BalanceComponent) export default withStyles(styles)(BalanceComponent)

View File

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