WA-232 Adding button to move funds in Safe's BalanceInfo component

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

@@ -13,12 +13,14 @@ 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 Button from '~/components/layout/Button'
 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 & WithStyles & {
   balances: Map<string, Balance>,
+  onMoveFunds: (balance: Balance) => void,
 }
 
 const styles = {
@@ -27,8 +29,10 @@ const styles = {
   },
 }
 
+export const MOVE_FUNDS_BUTTON_TEXT = 'Move Funds'
+
 const BalanceComponent = openHoc(({
-  open, toggle, balances, classes,
+  open, toggle, balances, classes, onMoveFunds,
 }: Props) => (
   <React.Fragment>
     <ListItem onClick={toggle}>
@@ -48,6 +52,8 @@ const BalanceComponent = openHoc(({
         {balances.valueSeq().map((balance: Balance) => {
           const symbol = balance.get('symbol')
           const name = balance.get('name')
+          const disabled = Number(balance.get('funds')) === 0
+          const onMoveFundsClick = () => onMoveFunds(balance)
 
           return (
             <ListItem key={symbol} className={classes.nested}>
@@ -55,6 +61,9 @@ const BalanceComponent = openHoc(({
                 <Img src={balance.get('logoUrl')} height={30} alt={name} />
               </ListItemIcon>
               <ListItemText primary={name} secondary={`${balance.get('funds')} ${symbol}`} />
+              <Button variant="raised" color="primary" onClick={onMoveFundsClick} disabled={disabled}>
+                {MOVE_FUNDS_BUTTON_TEXT}
+              </Button>
             </ListItem>
           )
         })}