Merge pull request #97 from CheesecakeLabs/T1AS-141_vault_category_au…

…to_select vault category auto select
CheesecakeLabs · Jan 25, 2024 · 30995e3 · 30995e3
2 parents 95f22af + f46a894
commit 30995e3
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 13 deletions.
diff --git a/frontend/src/components/templates/contracts-create/index.tsx b/frontend/src/components/templates/contracts-create/index.tsx
@@ -158,7 +158,7 @@ export const ContractsCreateTemplate: React.FC<IContractsCreateTemplate> = ({
               <form onSubmit={handleSubmit(data => handleForm(data))}>
                 <Flex flexDir={{ base: 'column', md: 'row' }} gap="1.5rem">
                   <FormControl isInvalid={errors?.vault !== undefined}>
-                    <FormLabel>Vault*</FormLabel>
+                    <FormLabel>Vault</FormLabel>
                     <SelectVault
                       vaults={vaults}
                       setVault={setVault}
@@ -172,7 +172,7 @@ export const ContractsCreateTemplate: React.FC<IContractsCreateTemplate> = ({
                   </FormControl>
 
                   <FormControl isInvalid={errors?.asset !== undefined}>
-                    <FormLabel>Asset*</FormLabel>
+                    <FormLabel>Asset</FormLabel>
                     <SelectAsset
                       assets={filteredAssets()}
                       setAsset={setAsset}
@@ -197,7 +197,7 @@ export const ContractsCreateTemplate: React.FC<IContractsCreateTemplate> = ({
                     gap="1.5rem"
                   >
                     <FormControl isInvalid={errors?.min_deposit !== undefined}>
-                      <FormLabel>Minimum Deposit*</FormLabel>
+                      <FormLabel>Minimum Deposit</FormLabel>
                       <Input
                         as={NumericFormat}
                         decimalScale={7}
@@ -216,7 +216,7 @@ export const ContractsCreateTemplate: React.FC<IContractsCreateTemplate> = ({
                     </FormControl>
 
                     <FormControl isInvalid={errors?.term !== undefined}>
-                      <FormLabel>Term*</FormLabel>
+                      <FormLabel>Term</FormLabel>
                       <InputGroup>
                         <Input
                           as={NumericFormat}
@@ -244,7 +244,7 @@ export const ContractsCreateTemplate: React.FC<IContractsCreateTemplate> = ({
                   >
                     <FormControl isInvalid={errors?.yield_rate !== undefined}>
                       <FormLabel display="flex" alignItems="center" gap={2}>
-                        Yield Rate*{' '}
+                        Yield Rate{' '}
                         <Tooltip label={TooltipsData.yieldRate}>
                           <HelpIcon width="14px" />
                         </Tooltip>
@@ -269,7 +269,7 @@ export const ContractsCreateTemplate: React.FC<IContractsCreateTemplate> = ({
 
                     <FormControl isInvalid={errors?.penalty_rate !== undefined}>
                       <FormLabel display="flex" alignItems="center" gap={2}>
-                        Early Redemption Penalty Rate*
+                        Early Redemption Penalty Rate
                         <Tooltip label={TooltipsData.penaltyRate}>
                           <HelpIcon width="14px" />
                         </Tooltip>
@@ -309,7 +309,7 @@ export const ContractsCreateTemplate: React.FC<IContractsCreateTemplate> = ({
                   _dark={{ bg: 'black.600' }}
                 >
                   <FormControl w="full">
-                    <FormLabel>Interest type*</FormLabel>
+                    <FormLabel>Interest type</FormLabel>
                     <SelectCompoundType
                       compoundType={compoundType}
                       setCompoundType={setCompoundType}

diff --git a/frontend/src/components/templates/vault-create/index.tsx b/frontend/src/components/templates/vault-create/index.tsx
@@ -19,6 +19,7 @@ import { SelectCategory } from './select-category'
 export interface IOption {
   readonly label: string
   readonly value: number
+  readonly disabled: boolean
 }
 
 interface IVaultCreateTemplate {

diff --git a/frontend/src/components/templates/vault-create/select-category/index.tsx b/frontend/src/components/templates/vault-create/select-category/index.tsx
@@ -14,20 +14,26 @@ interface ISelectCategory {
   clearErrors?(): void
 }
 
-const createOption = (label: string, value: number): IOption => ({
+const createOption = (
+  label: string,
+  value: number,
+  disabled?: boolean
+): IOption => ({
   label,
   value: value,
+  disabled: disabled ?? false,
 })
 
 export const SelectCategory: React.FC<ISelectCategory> = ({
   vaultCategories,
   createVaultCategory,
   setCategorySelected,
   categorySelected,
-  clearErrors
+  clearErrors,
 }) => {
   const [isLoading, setIsLoading] = useState(false)
   const [options, setOptions] = useState<IOption[]>([])
+  const [value, setValue] = useState<IOption>()
 
   const { colorMode } = useColorMode()
 
@@ -41,14 +47,16 @@ export const SelectCategory: React.FC<ISelectCategory> = ({
       setIsLoading(false)
       setOptions(prev => [...prev, newOption])
       setCategorySelected(newOption)
+      setValue(newOption)
     }, 1000)
   }
 
   useEffect(() => {
-    const ops = vaultCategories?.map(
+    let ops = vaultCategories?.map(
       (vaultCategory: Hooks.UseVaultsTypes.IVaultCategory) =>
         createOption(vaultCategory.name, vaultCategory.id)
     )
+    ops = [...(ops || []), createOption('Type to create...', 0, true)]
     setOptions(ops || [])
   }, [vaultCategories])
 
@@ -59,13 +67,19 @@ export const SelectCategory: React.FC<ISelectCategory> = ({
       isLoading={isLoading}
       onCreateOption={handleVaultCategory}
       options={options}
+      value={value}
+      isOptionDisabled={(option): boolean => option.disabled}
       onChange={(newValue): void => {
         if (clearErrors) clearErrors()
         setCategorySelected(newValue)
       }}
       defaultValue={
         categorySelected
-          ? { value: categorySelected.value, label: categorySelected.label }
+          ? {
+              value: categorySelected.value,
+              label: categorySelected.label,
+              disabled: false,
+            }
           : undefined
       }
       styles={{
@@ -80,9 +94,10 @@ export const SelectCategory: React.FC<ISelectCategory> = ({
           ...base,
           backgroundColor: colorMode === 'dark' ? '#303448' : undefined,
         }),
-        option: (styles, { isFocused, isSelected }) => ({
+        option: (styles, { isFocused, isSelected, isDisabled }) => ({
           ...styles,
           color: colorMode === 'dark' ? 'white' : 'black',
+          opacity: isDisabled ? '0.5' : undefined,
           background: isFocused
             ? colorMode === 'dark'
               ? '#292d3e'

diff --git a/frontend/src/components/templates/vault-detail/components/header/index.tsx b/frontend/src/components/templates/vault-detail/components/header/index.tsx
@@ -59,7 +59,7 @@ const Form: React.FC<IHeader> = ({
 }) => {
   const [categorySelected, setCategorySelected] = useState<
     IOption | null | undefined
-  >(category && { label: category?.name, value: category?.id })
+  >(category && { label: category?.name, value: category?.id, disabled: false })
 
   const [name, setName] = useState<string | undefined>(vault.name)