placeholder wip

src/components/forms/SelectField/index.jsx

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

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

@@ -1,6 +1,5 @@
 // @flow
-
-import React from 'react'
+import React, { useState } from 'react'
 import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
 import MenuItem from '@material-ui/core/MenuItem'
@@ -20,28 +19,47 @@ type SelectFieldProps = {
 }
 
 type SelectedTokenProps = {
-  token: Token,
+  token?: Token,
   classes: Object,
 }
 
 const SelectedToken = ({ token, classes }: SelectedTokenProps) => (
-  <MenuItem className={classes.container} key={token.address} value={token.address}>
+  <MenuItem className={classes.container}>
+    {token ? (
+      <>
         <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}`} />
+        <ListItemText
+          className={classes.tokenData}
+          primary={token.name}
+          secondary={`${token.balance} ${token.symbol}`}
+        />
+      </>
+    ) : (
+      'Select an asset'
+    )}
   </MenuItem>
 )
 
 const SelectedTokenStyled = withStyles(selectedTokenStyles)(SelectedToken)
 
-const TokenSelectField = ({ tokens, classes }: SelectFieldProps) => (
+const TokenSelectField = ({ tokens, classes }: SelectFieldProps) => {
+  const [selectedToken, setSelectedToken] = useState('')
+  const onSelect = (event) => {
+    setSelectedToken(event.target.value)
+  }
+
+  return (
     <Field
       name="token"
       component={SelectField}
       classes={{ selectMenu: classes.selectMenu }}
       validate={composeValidators(required)}
       renderValue={token => <SelectedTokenStyled token={token} />}
+      value={selectedToken}
+      onChange={onSelect}
+      displayEmpty
     >
       {tokens.map(token => (
         <MenuItem key={token.address} value={token}>
@@ -53,5 +71,6 @@ const TokenSelectField = ({ tokens, classes }: SelectFieldProps) => (
       ))}
     </Field>
   )
+}
 
 export default withStyles(selectStyles)(TokenSelectField)