diff --git a/frontend/src/components/templates/contracts-create/index.tsx b/frontend/src/components/templates/contracts-create/index.tsx index 18fe774a..e87d0a1e 100644 --- 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 = ({
handleForm(data))}> - Vault* + Vault = ({ - Asset* + Asset = ({ gap="1.5rem" > - Minimum Deposit* + Minimum Deposit = ({ - Term* + Term = ({ > - Yield Rate*{' '} + Yield Rate{' '} @@ -269,7 +269,7 @@ export const ContractsCreateTemplate: React.FC = ({ - Early Redemption Penalty Rate* + Early Redemption Penalty Rate @@ -309,7 +309,7 @@ export const ContractsCreateTemplate: React.FC = ({ _dark={{ bg: 'black.600' }} > - Interest type* + Interest type ({ +const createOption = ( + label: string, + value: number, + disabled?: boolean +): IOption => ({ label, value: value, + disabled: disabled ?? false, }) export const SelectCategory: React.FC = ({ @@ -24,10 +29,11 @@ export const SelectCategory: React.FC = ({ createVaultCategory, setCategorySelected, categorySelected, - clearErrors + clearErrors, }) => { const [isLoading, setIsLoading] = useState(false) const [options, setOptions] = useState([]) + const [value, setValue] = useState() const { colorMode } = useColorMode() @@ -41,14 +47,16 @@ export const SelectCategory: React.FC = ({ 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 = ({ 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 = ({ ...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 index 6d5d331a..44d38eae 100644 --- 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 = ({ }) => { 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(vault.name)