feat: add product type filter (#94)

* feat: add product type filter

* refactor: change filter file name

* feat: add product type i18n translations

* feat: update REG and RWA type to support new filter

* feat: automatically activate other assets fetch it equity token filter is selected

* feat: add default value for product type filter if user un-checked it

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<ContextModalProps> = ({
   const [filterModel, setFilterModel] =
     useState<AssetsViewFilterType>(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<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,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 (
+    <Select
+      label={t('label')}
+      data={viewOptions}
+      value={filter.productType}
+      onChange={(value) =>
+        onChange({
+          productType:
+            (value as AssetProductType) ?? assetsViewDefaultFilter.productType,
+        })
+      }
+      classNames={inputClasses}
+    />
+  )
+}
+AssetsViewProductTypeFilter.displayName = 'AssetsViewProductTypeFilter'
+
+export function useAssetsViewProductTypeFilter(filter: AssetsViewFilterType) {
+  function assetProductTypeFilterFunction(
+    asset: UserRealtoken | OtherRealtoken,
+  ) {
+    switch (filter.productType) {
+      case AssetProductType.ALL:
+        return true
+      case AssetProductType.REAL_EASTATE_RENTAL:
+        return asset.productType === APIRealTokenProductType.RealEstateRental
+      case AssetProductType.LOAN_INCOME:
+        return asset.productType === APIRealTokenProductType.LoanIncome
+      case AssetProductType.EQUITY_TOKEN:
+        return asset.productType === APIRealTokenProductType.EquityToken
+    }
+  }
+
+  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/hooks/useREG.ts

@@ -13,6 +13,7 @@ import {
   selectUserIncludesEth,
 } from 'src/store/features/settings/settingsSelector'
 import { REGRealtoken } from 'src/store/features/wallets/walletsSelector'
+import { APIRealTokenProductType } from 'src/types/APIRealToken'
 import { Currency } from 'src/types/Currencies'
 import { ERC20ABI } from 'src/utils/blockchain/abi/ERC20ABI'
 import {
@@ -147,6 +148,7 @@ const getREG = async (
     id: `${REG_asset_ID}`,
     fullName: 'RealToken Ecosystem Governance',
     shortName: 'REG',
+    productType: APIRealTokenProductType.EquityToken,
     amount,
     tokenPrice,
     totalTokens,

src/hooks/useREGVotingPower.ts

@@ -6,6 +6,7 @@ import { Contract } from 'ethers'
 import { initializeProviders } from 'src/repositories/RpcProvider'
 import { selectUserAddressList } from 'src/store/features/settings/settingsSelector'
 import { REGVotingPowertoken } from 'src/store/features/wallets/walletsSelector'
+import { APIRealTokenProductType } from 'src/types/APIRealToken'
 import { ERC20ABI } from 'src/utils/blockchain/abi/ERC20ABI'
 import {
   DEFAULT_REGVotingPower_PRICE,
@@ -44,6 +45,7 @@ const getRegVotingPower = async (
     id: `${REGVotingPower_asset_ID}`,
     fullName: 'REG Voting Power Registry',
     shortName: 'REG VOTING POWER',
+    productType: APIRealTokenProductType.EquityToken,
     amount,
     tokenPrice,
     totalTokens,

src/hooks/useRWA.ts

@@ -12,6 +12,7 @@ import {
   selectUserAddressList, // selectUserIncludesEth,
 } from 'src/store/features/settings/settingsSelector'
 import { RWARealtoken } from 'src/store/features/wallets/walletsSelector'
+import { APIRealTokenProductType } from 'src/types/APIRealToken'
 import { Currency } from 'src/types/Currencies'
 import { ERC20ABI } from 'src/utils/blockchain/abi/ERC20ABI'
 import {
@@ -98,6 +99,7 @@ const getRWA = async (
     shortName: 'RWA',
     amount,
     tokenPrice,
+    productType: APIRealTokenProductType.EquityToken,
     totalTokens,
     imageLink: [
       'https://realt.co/wp-content/uploads/2024/02/Equity_FinalDesign-2000px-800x542.png',

src/i18next/locales/en/common.json

@@ -169,6 +169,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

@@ -169,6 +169,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,

src/store/features/wallets/walletsSelector.ts

@@ -5,10 +5,14 @@ import _max from 'lodash/max'
 import _sumBy from 'lodash/sumBy'
 import moment from 'moment'
 
+import { AssetProductType } from 'src/components/assetsView'
 import { WalletBalances, WalletType } from 'src/repositories'
 import { UserRealTokenTransfer } from 'src/repositories/transfers/transfers.type'
 import { RootState } from 'src/store/store'
-import { APIRealTokenDate } from 'src/types/APIRealToken'
+import {
+  APIRealTokenDate,
+  APIRealTokenProductType,
+} from 'src/types/APIRealToken'
 import { RealToken, RealTokenCanal } from 'src/types/RealToken'
 import {
   RentCalculation,
@@ -42,6 +46,7 @@ export interface OtherRealtoken {
   id: string
   fullName: string
   shortName: string
+  productType: APIRealTokenProductType
   amount: number
   value: number
   tokenPrice: number