complete wallet page

src/components/common/combo-box.tsx

@@ -12,9 +12,10 @@ const value = [
 
 type Props = {
     field?: any
+    placeholder?: string
 }
 
-export const ComboBox: FC<Props> = ({ field }) => {
+export const ComboBox: FC<Props> = ({ field, placeholder }) => {
     const [query, setQuery] = useState('')
 
     const filteredValue =
@@ -25,15 +26,16 @@ export const ComboBox: FC<Props> = ({ field }) => {
             })
 
     return (
-        <Combobox value={field.value} onChange={field.onChange} onClose={() => setQuery('')}>
+        <Combobox value={field && field.value} onChange={field && field.onChange} onClose={() => setQuery('')}>
             <div className="relative w-full">
                 <ComboboxInput
+                    placeholder={placeholder}
                     className="input-style min-w-full"
                     displayValue={(person: any) => person?.name}
                     onChange={(event) => setQuery(event.target.value)}
-                    ref={field.ref}
-                    name={field.name}
-                    onBlur={field.onBlur}
+                    ref={field && field.ref}
+                    name={field && field.name}
+                    onBlur={field && field.onBlur}
                 />
                 <ComboboxButton className="absolute top-0 min-w-full h-full bg-transparent">
                     <ArrowDown2 className="size-5 absolute left-5 top-5 p-0 text-secondary-text-color/70" />