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,38 +19,58 @@ 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}>
-    <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 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}`}
+        />
+      </>
+    ) : (
+      'Select an asset'
+    )}
   </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>
-)
+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}>
+          <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)