render token in select field inside send funds modal

package.json

@@ -65,13 +65,13 @@
     "verbose": true
   },
   "dependencies": {
-    "@gnosis.pm/util-contracts": "^2.0.0",
+    "@gnosis.pm/util-contracts": "2.0.1",
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^3.0.1",
     "axios": "^0.18.0",
     "bignumber.js": "^8.1.1",
     "connected-react-router": "^6.3.1",
-    "final-form": "^4.2.1",
+    "final-form": "4.13.0",
     "history": "^4.7.2",
     "immortal-db": "^1.0.2",
     "immutable": "^4.0.0-rc.9",
@@ -80,8 +80,8 @@
     "qrcode.react": "^0.9.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-final-form": "^4.1.0",
+    "react-final-form": "5.1.0",
-    "react-hot-loader": "4.8.4",
+    "react-hot-loader": "4.8.7",
     "react-infinite-scroll-component": "^4.5.2",
     "react-redux": "7.0.3",
     "react-router-dom": "^4.3.1",
@@ -125,8 +125,8 @@
     "autoprefixer": "9.5.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.1.0",
+    "babel-jest": "24.8.0",
-    "babel-loader": "^8.0.0-beta.0",
+    "babel-loader": "8.0.6",
     "babel-plugin-dynamic-import-node": "^2.2.0",
     "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
     "babel-plugin-transform-es3-property-literals": "^6.22.0",
@@ -135,19 +135,19 @@
     "detect-port": "^1.2.2",
     "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-flowtype": "3.6.1",
+    "eslint-plugin-flowtype": "3.9.0",
     "eslint-plugin-import": "2.17.2",
     "eslint-plugin-jest": "22.5.1",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.7.0",
+    "eslint-plugin-react": "7.13.0",
     "ethereumjs-abi": "^0.6.7",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^3.0.1",
-    "flow-bin": "0.98.0",
+    "flow-bin": "0.98.1",
-    "fs-extra": "^7.0.1",
+    "fs-extra": "8.0.1",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.0.4",
-    "jest": "^24.1.0",
+    "jest": "24.8.0",
     "json-loader": "^0.5.7",
     "mini-css-extract-plugin": "0.6.0",
     "postcss-loader": "^3.0.0",
@@ -159,14 +159,14 @@
     "storybook-host": "^5.0.3",
     "storybook-router": "^0.3.3",
     "style-loader": "^0.23.1",
-    "truffle": "5.0.14",
+    "truffle": "5.0.18",
-    "truffle-contract": "4.0.13",
+    "truffle-contract": "4.0.16",
-    "truffle-solidity-loader": "0.1.14",
+    "truffle-solidity-loader": "0.1.17",
-    "uglifyjs-webpack-plugin": "^2.1.2",
+    "uglifyjs-webpack-plugin": "2.1.3",
-    "webpack": "^4.1.1",
+    "webpack": "4.32.0",
     "webpack-bundle-analyzer": "3.3.2",
-    "webpack-cli": "3.3.1",
+    "webpack-cli": "3.3.2",
-    "webpack-dev-server": "3.3.1",
+    "webpack-dev-server": "3.4.1",
     "webpack-manifest-plugin": "^2.0.0-rc.2"
   }
 }

src/components/forms/SelectField/index.jsx

@@ -16,16 +16,25 @@ const SelectInput = ({
   meta,
   label,
   formControlProps,
+  classes,
+  renderValue,
   ...rest
 }: SelectFieldProps) => {
   const showError = ((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) && meta.touched
   const inputProps = { ...restInput, name }
-
+  console.log(classes)
   return (
     <FormControl {...formControlProps} error={showError} style={style}>
       <InputLabel htmlFor={name}>{label}</InputLabel>
       {/* eslint-disable-next-line */}
-      <Select {...rest} onChange={onChange} inputProps={inputProps} value={value} />
+      <Select
+        classes={classes}
+        onChange={onChange}
+        renderValue={renderValue}
+        inputProps={inputProps}
+        value={value}
+        {...rest}
+      />
       {showError && <FormHelperText>{meta.error || meta.submitError}</FormHelperText>}
     </FormControl>
   )

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

@@ -0,0 +1,57 @@
+// @flow
+
+import React from 'react'
+import { List } from 'immutable'
+import { withStyles } from '@material-ui/core/styles'
+import MenuItem from '@material-ui/core/MenuItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemText from '@material-ui/core/ListItemText'
+import Field from '~/components/forms/Field'
+import Img from '~/components/layout/Img'
+import SelectField from '~/components/forms/SelectField'
+import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
+import { composeValidators, required } from '~/components/forms/validator'
+import { type Token } from '~/logic/tokens/store/model/token'
+import { selectedTokenStyles, selectStyles } from './style'
+
+type SelectFieldProps = {
+  tokens: List<Token>,
+  classes: Object,
+}
+
+type SelectedTokenProps = {
+  token: Token,
+  classes: Object,
+}
+
+const SelectedToken = ({ token, classes }: SelectedTokenProps) => (
+  <MenuItem className={classes.container} key={token.address} value={token.address}>
+    <ListItemIcon className={classes.tokenImage}>
+      <Img src={token.logoUri} height={28} alt={token.name} onError={setImageToPlaceholder} />
+    </ListItemIcon>
+    <ListItemText className={classes.tokenData} primary={token.name} secondary={`${token.balance} ${token.symbol}`} />
+  </MenuItem>
+)
+
+const SelectedTokenStyled = withStyles(selectedTokenStyles)(SelectedToken)
+
+const TokenSelectField = ({ tokens, classes }: SelectFieldProps) => (
+  <Field
+    name="token"
+    component={SelectField}
+    classes={{ selectMenu: classes.selectMenu }}
+    validate={composeValidators(required)}
+    renderValue={token => <SelectedTokenStyled token={token} />}
+  >
+    {tokens.map(token => (
+      <MenuItem key={token.address} value={token}>
+        <ListItemIcon>
+          <Img src={token.logoUri} height={28} alt={token.name} onError={setImageToPlaceholder} />
+        </ListItemIcon>
+        <ListItemText primary={token.name} secondary={`${token.balance} ${token.symbol}`} />
+      </MenuItem>
+    ))}
+  </Field>
+)
+
+export default withStyles(selectStyles)(TokenSelectField)

src/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField/style.js

@@ -0,0 +1,22 @@
+// @flow
+import { sm } from '~/theme/variables'
+
+export const selectedTokenStyles = () => ({
+  container: {
+    minHeight: '55px',
+    padding: 0,
+    width: '100%',
+  },
+  tokenData: {
+    padding: 0,
+  },
+  tokenImage: {
+    marginRight: sm,
+  },
+})
+
+export const selectStyles = () => ({
+  selectMenu: {
+    paddingRight: 0,
+  },
+})

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

@@ -5,19 +5,14 @@ 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'
-import SelectField from '~/components/forms/SelectField'
 import Block from '~/components/layout/Block'
 import Bold from '~/components/layout/Bold'
 import Hairline from '~/components/layout/Hairline'
@@ -26,7 +21,7 @@ import {
 } 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 TokenSelectField from '~/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField'
 import { copyToClipboard } from '~/utils/clipboard'
 import ArrowDown from './assets/arrow-down.svg'
 
@@ -112,7 +107,7 @@ const SendFunds = ({
                 <Bold>
                   {ethBalance}
                   {' '}
-ETH
+                  ETH
                 </Bold>
               </Paragraph>
             </Block>
@@ -144,16 +139,7 @@ ETH
               </Row>
               <Row>
                 <Col>
-                  <Field name="token" component={SelectField} validate={composeValidators(required)}>
+                  <TokenSelectField tokens={tokens} />
-                    {tokens.map(token => (
-                      <MenuItem key={token.address}>
-                        <ListItemIcon>
-                          <Img src={token.logoUri} height={28} alt={token.name} onError={setImageToPlaceholder} />
-                        </ListItemIcon>
-                        <ListItemText primary={token.name} secondary={`${token.balance} ${token.symbol}`} />
-                      </MenuItem>
-                    ))}
-                  </Field>
                 </Col>
               </Row>
             </React.Fragment>