diff --git a/src/components/assetsView/filters/AssetsViewFilterModal.tsx b/src/components/assetsView/filters/AssetsViewFilterModal.tsx index 8125e21e..5bcd75fd 100644 --- a/src/components/assetsView/filters/AssetsViewFilterModal.tsx +++ b/src/components/assetsView/filters/AssetsViewFilterModal.tsx @@ -1,5 +1,7 @@ import { FC, useCallback, useState } from 'react' import { useTranslation } from 'react-i18next' +import { useSelector } from 'react-redux' +import { useDispatch } from 'react-redux' import { Button, Flex, Stack } from '@mantine/core' import { ContextModalProps } from '@mantine/modals' @@ -11,7 +13,11 @@ import { assetsViewDefaultFilter, assetsViewFilterAtom, } from 'src/states' +import { selectUserIncludesOtherAssets } from 'src/store/features/settings/settingsSelector' +import { userIncludesOtherAssetsChanged } from 'src/store/features/settings/settingsSlice' +import { AssetProductType } from '../types' +import { AssetsViewProductTypeFilter } from './AssetsViewFilterProductType' import { AssetsViewRentStatusFilter } from './AssetsViewRentStatusFilter' import { AssetsViewRmmStatusFilter } from './AssetsViewRmmStatusFilter' import { AssetsViewSort } from './AssetsViewSort' @@ -49,11 +55,22 @@ export const AssetsViewFilterModal: FC = ({ const [filterModel, setFilterModel] = useState(activeFilter) + const userIncludesOtherAssets = useSelector(selectUserIncludesOtherAssets) + const dispatch = useDispatch() + const setUserIncludesOtherAssets = (value: boolean) => + dispatch(userIncludesOtherAssetsChanged(value)) + const onClose = useCallback(() => { context.closeModal(id) }, [context, id]) const onSubmit = () => { + if ( + filterModel.productType === AssetProductType.EQUITY_TOKEN && + !userIncludesOtherAssets + ) { + setUserIncludesOtherAssets(true) // as all equity token are part of other assets we automatically activate their fetch if the user selects equity token + } applyFilter(filterModel) onClose() } @@ -76,6 +93,12 @@ export const AssetsViewFilterModal: FC = ({ setFilterModel({ ...filterModel, ...value }) }} /> + { + setFilterModel({ ...filterModel, ...value }) + }} + /> { diff --git a/src/components/assetsView/filters/AssetsViewFilterProductType.tsx b/src/components/assetsView/filters/AssetsViewFilterProductType.tsx new file mode 100644 index 00000000..197a3aef --- /dev/null +++ b/src/components/assetsView/filters/AssetsViewFilterProductType.tsx @@ -0,0 +1,83 @@ +import { FC } from 'react' +import { useTranslation } from 'react-i18next' + +import { Select } from '@mantine/core' + +import { assetsViewDefaultFilter } from 'src/states' +import { + OtherRealtoken, + UserRealtoken, +} from 'src/store/features/wallets/walletsSelector' +import { APIRealTokenProductType } from 'src/types/APIRealToken' + +import { useInputStyles } from '../../inputs/useInputStyles' +import { AssetProductType } from '../types' + +interface AssetsViewFilterType { + productType: AssetProductType +} + +interface AssetsViewProductTypeFilterProps { + filter: AssetsViewFilterType + onChange: (value: AssetsViewFilterType) => void +} +export const AssetsViewProductTypeFilter: FC< + AssetsViewProductTypeFilterProps +> = ({ filter, onChange }) => { + const { t } = useTranslation('common', { keyPrefix: 'assetProductType' }) + const { classes: inputClasses } = useInputStyles() + + const viewOptions = [ + { + value: AssetProductType.ALL, + label: t('options.all'), + }, + { + value: AssetProductType.REAL_EASTATE_RENTAL, + label: t('options.realEstateRental'), + }, + { + value: AssetProductType.LOAN_INCOME, + label: t('options.loanIncome'), + }, + { + value: AssetProductType.EQUITY_TOKEN, + label: t('options.equityToken'), + }, + ] + + return ( +