add tokens menuitem

src/components/forms/SelectField/index.jsx

@@ -20,13 +20,12 @@ const SelectInput = ({
 }: SelectFieldProps) => {
   const showError = ((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) && meta.touched
   const inputProps = { ...restInput, name }
-  const inputRootProps = { style: { borderRadius: '5px' } }
 
   return (
     <FormControl {...formControlProps} error={showError} style={style}>
       <InputLabel htmlFor={name}>{label}</InputLabel>
       {/* eslint-disable-next-line */}
-      <Select {...rest} onChange={onChange} inputProps={inputProps} InputProps={inputRootProps} value={value} />
+      <Select {...rest} onChange={onChange} inputProps={inputProps} value={value} />
       {showError && <FormHelperText>{meta.error || meta.submitError}</FormHelperText>}
     </FormControl>
   )

src/routes/safe/components/Balances/SendModal/index.jsx

@@ -1,5 +1,7 @@
 // @flow
 import React, { useState } from 'react'
+import { List } from 'immutable'
+import { type Token } from '~/logic/tokens/store/model/token'
 import cn from 'classnames'
 import { withStyles } from '@material-ui/core/styles'
 import Modal from '~/components/Modal'
@@ -14,6 +16,7 @@ type Props = {
   etherScanLink: string,
   safeName: string,
   ethBalance: string,
+  tokens: List<Token>,
 }
 type ActiveScreen = 'chooseTxType' | 'sendFunds'
 
@@ -25,7 +28,7 @@ const styles = () => ({
 })
 
 const Send = ({
-  onClose, isOpen, classes, safeAddress, etherScanLink, safeName, ethBalance,
+  onClose, isOpen, classes, safeAddress, etherScanLink, safeName, ethBalance, tokens,
 }: Props) => {
   const [activeScreen, setActiveScreen] = useState<ActiveScreen>('sendFunds')
   const smallerModalSize = activeScreen === 'chooseTxType'
@@ -56,6 +59,7 @@ const Send = ({
             etherScanLink={etherScanLink}
             safeName={safeName}
             ethBalance={ethBalance}
+            tokens={tokens}
           />
         )}
       </React.Fragment>

src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx

@@ -1,15 +1,19 @@
 // @flow
 import * as React from 'react'
+import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import IconButton from '@material-ui/core/IconButton'
 import OpenInNew from '@material-ui/icons/OpenInNew'
 import MenuItem from '@material-ui/core/MenuItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemText from '@material-ui/core/ListItemText'
 import Identicon from '~/components/Identicon'
 import Paragraph from '~/components/layout/Paragraph'
 import Row from '~/components/layout/Row'
 import GnoForm from '~/components/forms/GnoForm'
 import Link from '~/components/layout/Link'
+import Img from '~/components/layout/Img'
 import Col from '~/components/layout/Col'
 import Field from '~/components/forms/Field'
 import TextField from '~/components/forms/TextField'
@@ -20,7 +24,9 @@ import Hairline from '~/components/layout/Hairline'
 import {
   lg, md, sm, secondary, xs,
 } from '~/theme/variables'
+import { type Token } from '~/logic/tokens/store/model/token'
 import { composeValidators, required, mustBeEthereumAddress } from '~/components/forms/validator'
+import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
 import { copyToClipboard } from '~/utils/clipboard'
 import ArrowDown from './assets/arrow-down.svg'
 
@@ -65,10 +71,11 @@ type Props = {
   etherScanLink: string,
   safeName: string,
   ethBalance: string,
+  tokens: List<Token>,
 }
 
 const SendFunds = ({
-  classes, onClose, safeAddress, etherScanLink, safeName, ethBalance,
+  classes, onClose, safeAddress, etherScanLink, safeName, ethBalance, tokens,
 }: Props) => {
   const handleSubmit = () => {}
 
@@ -138,12 +145,14 @@ ETH
               <Row>
                 <Col>
                   <Field name="token" component={SelectField} validate={composeValidators(required)}>
-                    <MenuItem>
+                    {tokens.map(token => (
-                      1
+                      <MenuItem key={token.address}>
-                    </MenuItem>
+                        <ListItemIcon>
-                    <MenuItem>
+                          <Img src={token.logoUri} height={28} alt={token.name} onError={setImageToPlaceholder} />
-                      2
+                        </ListItemIcon>
-                    </MenuItem>
+                        <ListItemText primary={token.name} secondary={`${token.balance} ${token.symbol}`} />
+                      </MenuItem>
+                    ))}
                   </Field>
                 </Col>
               </Row>

src/routes/safe/components/Balances/index.jsx

@@ -167,6 +167,7 @@ class Balances extends React.Component<Props, State> {
           safeAddress={safeAddress}
           safeName={safeName}
           ethBalance={ethBalance}
+          tokens={activeTokens}
         />
         <Modal
           title="Receive Tokens"