use CurrencySelect in CreateProject

src/components/base/CurrencySelect.jsx

@@ -16,7 +16,9 @@ CurrencySelect.propTypes = {
   onBlur: PropTypes.func.isRequired,
   value: PropTypes.string,
   showBalances: PropTypes.bool,
-  enableToggles: PropTypes.bool
+  enableToggles: PropTypes.bool,
+  className: PropTypes.string,
+  InputProps: PropTypes.object
 }
 
 function CurrencySelect({
@@ -26,7 +28,9 @@ function CurrencySelect({
   onBlur,
   value,
   showBalances,
-  enableToggles
+  enableToggles,
+  className,
+  InputProps
 }) {
   const context = useContext(FundingContext)
   const { account } = context
@@ -69,6 +73,8 @@ function CurrencySelect({
 
   return (
     <TextField
+      className={className}
+      InputProps={InputProps}
       id={id}
       name={id}
       select

src/components/projects/CreateProject.jsx

@@ -3,7 +3,6 @@ import React, { createRef, useState, useContext } from 'react'
 import { Formik } from 'formik'
 import LiquidPledging from '../../embarkArtifacts/contracts/LiquidPledging'
 import TextField from '@material-ui/core/TextField'
-import MenuItem from '@material-ui/core/MenuItem'
 import Divider from '@material-ui/core/Divider'
 import FormControlLabel from '@material-ui/core/FormControlLabel'
 import Switch from '@material-ui/core/Switch'
@@ -12,9 +11,9 @@ import InputAdornment from '@material-ui/core/InputAdornment'
 import CloudUpload from '@material-ui/icons/CloudUpload'
 import { withStyles } from '@material-ui/core/styles'
 import { formatForIpfs, uploadToIpfs, formatMedia, isWeb } from '../../utils/ipfs'
-import { currencies, TOKEN_ICON_API } from '../../utils/currencies'
 import { FundingContext } from '../../context'
 import {ZERO_ADDRESS} from '../../utils/address'
+import CurrencySelect from '../base/CurrencySelect'
 
 const { addProject } = LiquidPledging.methods
 
@@ -316,7 +315,7 @@ const SubmissionSection = ({ classes, history }) => {
               onBlur={handleBlur}
               value={values.goal || ''}
             />
-            <TextField
+            <CurrencySelect
               className={classes.textField}
               InputProps={{
                 classes: {
@@ -324,28 +323,11 @@ const SubmissionSection = ({ classes, history }) => {
                 }
               }}
               id="goalToken"
-              name="goalToken"
-              select
               label="Select Token"
-              placeholder="Select Token"
-              margin="normal"
-              variant="outlined"
               onChange={handleChange}
               onBlur={handleBlur}
-              value={values.goalToken || ''}
+              value={values.goalToken}
-            >
+            />
-              {currencies.map((option) => (
-                <MenuItem style={{display: 'flex', alignItems: 'center'}} key={option.value} value={option.value}>
-                  <div style={{display: 'flex', alignItems: 'center'}}>
-                    {option.icon || <img
-                      src={option.img || `${TOKEN_ICON_API}/${option.value}.png`}
-                      style={{width: option.width, marginRight: '3%'}}
-                    />}
-                    {option.label}
-                  </div>
-                </MenuItem>
-              ))}
-            </TextField>
             <TextField
               className={classes.textField}
               InputProps={{