feat: add product type filter

src/components/assetsView/filters/AssetsViewFilterModal.tsx

@@ -12,6 +12,7 @@ import {
   assetsViewFilterAtom,
 } from 'src/states'
 
+import { AssetsViewProductTypeFilter } from './AssetsViewFilterProductType'
 import { AssetsViewRentStatusFilter } from './AssetsViewRentStatusFilter'
 import { AssetsViewRmmStatusFilter } from './AssetsViewRmmStatusFilter'
 import { AssetsViewSort } from './AssetsViewSort'
@@ -76,6 +77,12 @@ export const AssetsViewFilterModal: FC<ContextModalProps> = ({
             setFilterModel({ ...filterModel, ...value })
           }}
         />
+        <AssetsViewProductTypeFilter
+          filter={filterModel}
+          onChange={(value) => {
+            setFilterModel({ ...filterModel, ...value })
+          }}
+        />
         <AssetsViewUserProtocolFilter
           filter={filterModel}
           onChange={(value) => {

src/components/assetsView/filters/AssetsViewFilterProductType.tsx

@@ -0,0 +1,77 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Select } from '@mantine/core'
+
+import {
+  RWARealtoken,
+  UserRealtoken,
+} from 'src/store/features/wallets/walletsSelector'
+
+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 (
+    <Select
+      label={t('label')}
+      data={viewOptions}
+      value={filter.productType}
+      onChange={(value) => onChange({ productType: value as AssetProductType })}
+      classNames={inputClasses}
+    />
+  )
+}
+AssetsViewProductTypeFilter.displayName = 'AssetsViewProductTypeFilter'
+
+export function useAssetsViewProductTypeFilter(filter: AssetsViewFilterType) {
+  function assetProductTypeFilterFunction(asset: UserRealtoken | RWARealtoken) {
+    const Asset = asset as UserRealtoken
+    switch (filter.productType) {
+      case AssetProductType.ALL:
+        return true
+      case AssetProductType.REAL_EASTATE_RENTAL:
+        return (
+          String(Asset.productType) === AssetProductType.REAL_EASTATE_RENTAL
+        )
+      case AssetProductType.LOAN_INCOME:
+        return String(Asset.productType) === AssetProductType.LOAN_INCOME
+      case AssetProductType.EQUITY_TOKEN:
+        return String(Asset.productType) === AssetProductType.EQUITY_TOKEN
+    }
+  }
+
+  return { assetProductTypeFilterFunction }
+}

src/components/assetsView/filters/useFilters.ts

@@ -6,6 +6,7 @@ import {
   UserRealtoken,
 } from 'src/store/features/wallets/walletsSelector'
 
+import { useAssetsViewProductTypeFilter } from './AssetsViewFilterProductType'
 import { useAssetsViewRentStatusFilter } from './AssetsViewRentStatusFilter'
 import { useAssetsViewRmmStatusFilter } from './AssetsViewRmmStatusFilter'
 import { useAssetsViewSort } from './AssetsViewSort'
@@ -22,6 +23,8 @@ export function useAssetsViewFilters() {
     useAssetsViewSubsidyFilter(activeFilter)
   const { assetUserStatusFilterFunction } =
     useAssetsViewUserStatusFilter(activeFilter)
+  const { assetProductTypeFilterFunction } =
+    useAssetsViewProductTypeFilter(activeFilter)
   const { assetRentStatusFilterFunction } =
     useAssetsViewRentStatusFilter(activeFilter)
   const { assetRmmStatusFilterFunction } =
@@ -35,6 +38,7 @@ export function useAssetsViewFilters() {
     return tokenList
       .filter(assetUserStatusFilterFunction)
       .filter(assetUserProtocolFilterFunction)
+      .filter(assetProductTypeFilterFunction)
       .filter(assetRentStatusFilterFunction)
       .filter(assetSubsidyFilterFunction)
       .filter(assetRmmStatusFilterFunction)

src/components/assetsView/types/assetProduct.type.ts

@@ -0,0 +1,6 @@
+export enum AssetProductType {
+  ALL = 'all',
+  REAL_EASTATE_RENTAL = 'real_estate_rental',
+  EQUITY_TOKEN = 'equity_token',
+  LOAN_INCOME = 'loan_income',
+}

src/components/assetsView/types/index.ts

@@ -5,3 +5,4 @@ export * from './assetUserStatus.type'
 export * from './assetRentStatus.type'
 export * from './assetRmmStatus.type'
 export * from './assetUserProtocol.type'
+export * from './assetProduct.type'

src/i18next/locales/en/common.json

@@ -159,6 +159,15 @@
       "notWhitelisted": "Not whitelisted"
     }
   },
+  "assetProductType": {
+    "label": "Product type",
+    "options": {
+      "all": "All",
+      "realEstateRental": "Real estate rental",
+      "loanIncome": "Loan income",
+      "equityToken": "Equity token"
+    }
+  },
   "assetRentStatus": {
     "label": "Rent",
     "options": {

src/i18next/locales/fr/common.json

@@ -159,6 +159,15 @@
       "notWhitelisted": "Non whitelistées"
     }
   },
+  "assetProductType": {
+    "label": "Type de propriété",
+    "options": {
+      "all": "Tous",
+      "realEstateRental": "Location immobilière",
+      "loanIncome": "Revenu de prêt",
+      "equityToken": "Token d'équité"
+    }
+  },
   "assetRentStatus": {
     "label": "Loyers",
     "options": {

src/states/index.ts

@@ -1,6 +1,7 @@
 import { atomWithStorage } from 'jotai/utils'
 
 import {
+  AssetProductType,
   AssetRentStatusType,
   AssetRmmStatusType,
   AssetSortType,
@@ -20,6 +21,7 @@ export interface AssetsViewFilterType {
   sortReverse: boolean
   subsidy: AssetSubsidyType
   userStatus: AssetUserStatusType
+  productType: AssetProductType
   rentStatus: AssetRentStatusType
   rmmStatus: AssetRmmStatusType
   userProtocol: AssetUserProtocolType
@@ -30,6 +32,7 @@ export const assetsViewDefaultFilter: AssetsViewFilterType = {
   sortReverse: false,
   subsidy: AssetSubsidyType.ALL,
   userStatus: AssetUserStatusType.OWNED,
+  productType: AssetProductType.ALL,
   rentStatus: AssetRentStatusType.ALL,
   rmmStatus: AssetRmmStatusType.ALL,
   userProtocol: AssetUserProtocolType.ALL,