Merge develop into preprod

.env.sample

@@ -2,4 +2,6 @@ BUILD_ENV=
 COMMUNITY_API_KEY=
 THEGRAPH_API_KEY=
 REALTOKENAPI='https://api.realtoken.community/v1/token'
-REALTOKENAPI_HISTORY='https://history.api.realtoken.community/'
+REALTOKENAPI_HISTORY='https://history.api.realtoken.community/'
+MATOMO_URL='https://data.realtoken.community/'
+MATOMO_SITE_ID=

.github/workflows/branch-check-master.yml

@@ -0,0 +1,17 @@
+name: Restrict merges to master
+
+on:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  check-branch-master:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check if the source branch is preprod
+        run: |
+          if [ "${{ github.event.pull_request.head.ref }}" != "preprod" ]; then
+            echo "Pull requests to master must come from preprod branch."
+            exit 1
+          fi

.github/workflows/branch.yml

@@ -80,5 +80,7 @@ jobs:
           COMMUNITY_API_KEY=${{ secrets.COMMUNITY_API_KEY }} \
           REALTOKENAPI=https://api.realtoken.community/v1/token \
           REALTOKENAPI_HISTORY=https://history.api.realtoken.community/ \
+          MATOMO_URL=https://data.realtoken.community/ \
+          MATOMO_SITE_ID=${{ github.ref_name == 'master' && secrets.MATOMO_ID_PROD || github.ref_name == 'preprod' && secrets.MATOMO_ID_PREPROD || secrets.MATOMO_ID_DEVELOP }} \
           HOSTNAME=${{ github.ref_name == 'master' && 'dashboard.realtoken.community' || 'dashboard.${DOCKER_BRANCH}.realtoken.community' }} \
           docker compose --project-name ${{ github.ref_name }}-dashboard --file docker-compose-branch.yml up -d'

README.md

@@ -14,19 +14,11 @@
 
 ### <a name="env">Environment</a>
 
-To run the project you will need to set-up a `.env` file in the root folder:
-
-```
-COMMUNITY_API_KEY=XXXXXXXXXXXX
-THEGRAPH_API_KEY=XXXXXXXXXXXX
-
-REALTOKENAPI='https://api.realtoken.community/v1/token'
-REALTOKENAPI_HISTORY='https://history.api.realtoken.community/'
-```
+To run the project you will need to set-up a `.env` file in the root folder, by copy/paste `.env.sample` file.
 
 To get a `COMMUNITY_API_KEY`, join the dedicated [telegram dev channel](https://t.me/+XQyoaFfmN61yk7X0) then ask for.
 
-To get a THEGRAPH_API_KEY, you need to create an account on thegraph.com [Thegraph docs](https://thegraph.com/docs/en/querying/managing-api-keys/)
+To get a `THEGRAPH_API_KEY`, you need to create an account on [thegraph](https://thegraph.com/docs/en/querying/managing-api-keys/)
 
 ### Node.js version
 

docker-compose-branch.yml

@@ -7,6 +7,8 @@ services:
       - COMMUNITY_API_KEY=$COMMUNITY_API_KEY
       - REALTOKENAPI=$REALTOKENAPI
       - REALTOKENAPI_HISTORY=$REALTOKENAPI_HISTORY
+      - MATOMO_URL=$MATOMO_URL
+      - MATOMO_SITE_ID=$MATOMO_SITE_ID
     networks:
       - traefik-realt
     labels:

package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.9.5",
+    "@bgd-labs/aave-address-book": "^4.7.3",
     "@mantine/core": "^7.5.3",
     "@mantine/dates": "^7.5.3",
     "@mantine/form": "^7.5.3",
@@ -26,6 +27,7 @@
     "@mantine/notifications": "^7.5.3",
     "@realtoken/realt-commons": "1.4.6",
     "@reduxjs/toolkit": "^2.2.1",
+    "@socialgouv/matomo-next": "^1.9.2",
     "@tabler/icons": "^1.74.0",
     "@web3-react/core": "^8.0.35-beta.0",
     "cookies-next": "^2.0.5",

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,89 @@
+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_ESTATE_RENTAL,
+      label: t('options.realEstateRental'),
+    },
+    {
+      value: AssetProductType.LOAN_INCOME,
+      label: t('options.loanIncome'),
+    },
+    {
+      value: AssetProductType.EQUITY_TOKEN,
+      label: t('options.equityToken'),
+    },
+    {
+      value: AssetProductType.FACTORING,
+      label: t('options.factoring'),
+    },
+  ]
+
+  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_ESTATE_RENTAL:
+        return asset.productType === APIRealTokenProductType.RealEstateRental
+      case AssetProductType.LOAN_INCOME:
+        return asset.productType === APIRealTokenProductType.LoanIncome
+      case AssetProductType.EQUITY_TOKEN:
+        return asset.productType === APIRealTokenProductType.EquityToken
+      case AssetProductType.FACTORING:
+        return asset.productType === APIRealTokenProductType.Factoring
+    }
+  }
+
+  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,7 @@
+export enum AssetProductType {
+  ALL = 'all',
+  REAL_ESTATE_RENTAL = 'real_estate_rental',
+  EQUITY_TOKEN = 'equity_token',
+  LOAN_INCOME = 'loan_income',
+  FACTORING = 'factoring_profitshare',
+}

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/components/layouts/SettingsMenu.tsx

@@ -146,10 +146,12 @@ const RealtimeRentMenuItem: FC = () => {
   )
 }
 
-const RealtimeRentMenuSelectDate: FC = () => {
+const RealtimeRentMenuSelectDate: FC<{
+  isCalendarOpen: boolean
+  setIsCalendarOpen: (open: boolean) => void
+}> = ({ isCalendarOpen, setIsCalendarOpen }) => {
   const dispatch = useDispatch()
   const rentCalculation = useSelector(selectUserRentCalculation)
-
   const { i18n, t } = useTranslation('common', { keyPrefix: 'settings' })
 
   if (rentCalculation.state !== RentCalculationState.Realtime) return null
@@ -162,28 +164,39 @@ const RealtimeRentMenuSelectDate: FC = () => {
       }),
     )
   }
+  const toggleIsCalendarOpen = () => setIsCalendarOpen(!isCalendarOpen)
 
   return (
     <>
       <Menu.Label pb={0}>{t('date')}</Menu.Label>
       <DatePickerInput
         p={5}
+        onClick={() => toggleIsCalendarOpen()}
         locale={i18n.language}
         valueFormat={t('dateFormat')}
         value={new Date(rentCalculation.date)}
-        onChange={(value) => handleDateChange(value as Date)}
+        onChange={(value) => {
+          handleDateChange(value as Date)
+          toggleIsCalendarOpen()
+        }}
         defaultDate={new Date()}
       />
       <Menu.Divider />
     </>
   )
 }
 
-const RealtimeRentMenu = () => {
+const RealtimeRentMenu: FC<{
+  isCalendarOpen: boolean
+  setIsCalendarOpen: (open: boolean) => void
+}> = ({ isCalendarOpen, setIsCalendarOpen }) => {
   return (
     <>
       <RealtimeRentMenuItem />
-      <RealtimeRentMenuSelectDate />
+      <RealtimeRentMenuSelectDate
+        isCalendarOpen={isCalendarOpen}
+        setIsCalendarOpen={setIsCalendarOpen}
+      />
       <Menu.Divider />
     </>
   )
@@ -341,10 +354,13 @@ const RefreshDataButton: FC = () => {
 export const SettingsMenu: FC = () => {
   const [isOpen, handlers] = useDisclosure(false)
   const version = useSelector(selectVersion)
+  // Prevent menu from closing when the calendar is open
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false)
 
   return (
     <Menu
       closeOnItemClick={false}
+      closeOnClickOutside={!isCalendarOpen}
       opened={isOpen}
       onOpen={handlers.open}
       onClose={handlers.close}
@@ -359,7 +375,10 @@ export const SettingsMenu: FC = () => {
         <Menu.Divider />
         <CurrencySelect />
         <Menu.Divider />
-        <RealtimeRentMenu />
+        <RealtimeRentMenu
+          isCalendarOpen={isCalendarOpen}
+          setIsCalendarOpen={setIsCalendarOpen}
+        />
         <ColorSchemeMenuItem />
         <Menu.Divider />
         <FetchDataSettings />