merge preprod <> master (#67)

* add dropdown

* simplify selector and add all token option

* feat: change allPage value to Infinity

* feat: estimate the fully rented rent

* feat: add fully rented estimation to asset cards

* refactor: move hook calls to top of the page

* fix: propInfo definition

* fix: last rent condition

* feat: add estimation for property with not fully rented history

* feat: get fully rented APR

* apply max APR method

* rename variable and functions

* feat: add RWA token

* feat: re-enable property onClick

* feat: add rwa valuation on the rwa card

* fix: missing property

* feat: add rwa to summary card

* define useRWA

* take into account user currency

* feat: add RWA value to net value calculation

* remove comment

* refactor: clean imports

* feat: include RWA on Ethereum

* fix: en communs

* feat: update filter to support RWA token

* fix: prettier

* fix: other prettier errors

* let prettier add strange semi-column

* fix: imports

* use hook

* add fallback

* switch for a useMemo

* feat: add real time fully rented APR

* feat: add gloabl metric fully rented APR

* feat: add disclaimer

* feat: add disclaimer

* feat: update disclaimer message

* fix: disclaimer message

* improve message

* feat: create yam statics stics page

* feat: add yam statistics for all RealT Tokens on Gnosis (who have Gnosis chain contract prop)

* feat: mask tokens with no volume

* fix: add token name

* feat: add pagination

* feat: improve style

* feat: change token per page to 100

* feat: add fully rented APR to asset grid

* refactor: remove logs

* feat: add fully rented APR to property details

* fix: reset current page when tokens changed

* fix: reset current page when user change page size

* feat: add translation for YAM statistics hearder label

* fix: yamStatistics: use selected currency for token price

* feat: yamStatistics: add owned | all filter

* feat: yamStatistics: add subsidized, fullySubsidized and notSubsidized filters

* add additional fallbacks RPC URLs

* fix: RPC initialization on currencies file

---------

Co-authored-by: Nandy Bâ <[email protected]>

.prettierrc.js

@@ -14,7 +14,7 @@ module.exports = {
     '^i18next(.*)',
     '^(?!(src|../|./))(.*)',
     '^src(.*)$',
-    '^(.*)$'
+    '^(.*)$',
   ],
   importOrderSeparation: true,
   importOrderSortSpecifiers: true,

next.config.js

@@ -11,11 +11,11 @@ const nextConfig = {
     outputStandalone: true,
   },
   images: {
-    domains: ['realt.co']
+    domains: ['realt.co'],
   },
   publicRuntimeConfig: {
     version,
   },
-};
+}
 
-module.exports = nextConfig;
+module.exports = nextConfig

postcss.config.cjs

@@ -11,4 +11,4 @@ module.exports = {
       },
     },
   },
-};
+}

src/components/assetPage/assetPagePropertyTab.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { useCurrencyValue } from 'src/hooks/useCurrencyValue'
+import { useFullyRentedAPR } from 'src/hooks/useFullyRentedAPR'
 import { UserRealtoken } from 'src/store/features/wallets/walletsSelector'
 import { RealTokenRentalType } from 'src/types/RealToken'
 
@@ -44,6 +45,8 @@ export const AssetPagePropertyTab: FC<{
   const propertyStories = realtoken.propertyStories
     ? tNumbers('integer', { value: realtoken.propertyStories })
     : '-'
+  const fullyRentedAPR = useFullyRentedAPR(realtoken)
+  const fullyRentedAPRValue = tNumbers('percent', { value: fullyRentedAPR })
 
   return (
     <>
@@ -106,6 +109,10 @@ export const AssetPagePropertyTab: FC<{
             label: t('annualYield'),
             value: annualYield,
           },
+          {
+            label: t('fullyRentedAPR'),
+            value: fullyRentedAPRValue,
+          },
         ]}
       />
 

src/components/assetsView/AssetsView.tsx

@@ -3,6 +3,7 @@ import { useSelector } from 'react-redux'
 
 import { Grid } from '@mantine/core'
 
+import { useRWA } from 'src/hooks/useRWA'
 import { selectUserRealtokens } from 'src/store/features/wallets/walletsSelector'
 
 import { AssetsViewSearch, useAssetsViewSearch } from './AssetsViewSearch'
@@ -19,11 +20,12 @@ export const AssetsView: FC = () => {
   const { choosenAssetView } = useAssetsViewSelect()
 
   const realtokens = useSelector(selectUserRealtokens)
+  const rwa = useRWA()
 
-  const data = useMemo(
-    () => assetsViewFilterFunction(realtokens.filter(assetSearchFunction)),
-    [realtokens, assetSearchFunction, assetsViewFilterFunction],
-  )
+  const data = useMemo(() => {
+    const assets = rwa ? [...realtokens, rwa] : realtokens
+    return assetsViewFilterFunction(assets.filter(assetSearchFunction))
+  }, [realtokens, rwa, assetSearchFunction, assetsViewFilterFunction])
 
   return realtokens.length ? (
     <>

src/components/assetsView/AssetsViewSearch.tsx

@@ -3,7 +3,10 @@ import { useTranslation } from 'react-i18next'
 
 import { TextInput } from '@mantine/core'
 
-import { UserRealtoken } from 'src/store/features/wallets/walletsSelector'
+import {
+  RWARealtoken,
+  UserRealtoken,
+} from 'src/store/features/wallets/walletsSelector'
 
 import { useInputStyles } from '../inputs/useInputStyles'
 
@@ -36,11 +39,11 @@ export function useAssetsViewSearch() {
     [assetSearch],
   )
 
-  function assetSearchFunction(realtoken: UserRealtoken) {
+  function assetSearchFunction(asset: UserRealtoken | RWARealtoken) {
     return (
       !cleanSearch ||
-      realtoken.shortName.toLowerCase().includes(cleanSearch) ||
-      realtoken.fullName.toLowerCase().includes(cleanSearch)
+      asset.shortName.toLowerCase().includes(cleanSearch) ||
+      asset.fullName.toLowerCase().includes(cleanSearch)
     )
   }
 

src/components/assetsView/filters/AssetsViewRentStatusFilter.tsx

@@ -3,7 +3,10 @@ import { useTranslation } from 'react-i18next'
 
 import { Select } from '@mantine/core'
 
-import { UserRealtoken } from 'src/store/features/wallets/walletsSelector'
+import {
+  RWARealtoken,
+  UserRealtoken,
+} from 'src/store/features/wallets/walletsSelector'
 
 import { useInputStyles } from '../../inputs/useInputStyles'
 import { AssetRentStatusType } from '../types'
@@ -58,16 +61,17 @@ AssetsViewRentStatusFilter.displayName = 'AssetsViewRentStatusFilter'
 export function useAssetsViewRentStatusFilter(
   filter: AssetsViewRentStatusFilterModel,
 ) {
-  function assetRentStatusFilterFunction(asset: UserRealtoken) {
+  function assetRentStatusFilterFunction(asset: UserRealtoken | RWARealtoken) {
+    const Asset = asset as UserRealtoken
     switch (filter.rentStatus) {
       case AssetRentStatusType.ALL:
         return true
       case AssetRentStatusType.RENTED:
-        return asset.rentStatus === 'full'
+        return Asset.rentStatus === 'full'
       case AssetRentStatusType.PARTIALLY_RENTED:
-        return asset.rentStatus === 'partial'
+        return Asset.rentStatus === 'partial'
       case AssetRentStatusType.NOT_RENTED:
-        return asset.rentStatus === 'none'
+        return Asset.rentStatus === 'none'
     }
   }
 

src/components/assetsView/filters/AssetsViewRmmStatusFilter.tsx

@@ -3,7 +3,10 @@ import { useTranslation } from 'react-i18next'
 
 import { Select } from '@mantine/core'
 
-import { UserRealtoken } from 'src/store/features/wallets/walletsSelector'
+import {
+  RWARealtoken,
+  UserRealtoken,
+} from 'src/store/features/wallets/walletsSelector'
 
 import { useInputStyles } from '../../inputs/useInputStyles'
 import { AssetRmmStatusType } from '../types'
@@ -53,14 +56,15 @@ AssetsViewRmmStatusFilter.displayName = 'AssetsViewRmmStatusFilter'
 export function useAssetsViewRmmStatusFilter(
   filter: AssetsViewRmmStatusFilterModel,
 ) {
-  function assetRmmStatusFilterFunction(asset: UserRealtoken) {
+  function assetRmmStatusFilterFunction(asset: UserRealtoken | RWARealtoken) {
+    const Asset = asset as UserRealtoken
     switch (filter.rmmStatus) {
       case AssetRmmStatusType.ALL:
         return true
       case AssetRmmStatusType.AVAILABLE:
-        return asset.isRmmAvailable
+        return Asset.isRmmAvailable
       case AssetRmmStatusType.NOT_AVAILABLE:
-        return !asset.isRmmAvailable
+        return !Asset.isRmmAvailable
     }
   }
 

src/components/assetsView/filters/AssetsViewSort.tsx

@@ -5,7 +5,10 @@ import { useSelector } from 'react-redux'
 import { Grid, Select, Switch } from '@mantine/core'
 
 import { selectTransfersIsLoaded } from 'src/store/features/transfers/transfersSelector'
-import { UserRealtoken } from 'src/store/features/wallets/walletsSelector'
+import {
+  RWARealtoken,
+  UserRealtoken,
+} from 'src/store/features/wallets/walletsSelector'
 
 import { useInputStyles } from '../../inputs/useInputStyles'
 import { AssetSortType } from '../types'
@@ -90,42 +93,50 @@ export const AssetsViewSort: FC<AssetsViewSortProps> = ({
 AssetsViewSort.displayName = 'AssetsViewSort'
 
 export function useAssetsViewSort(filter: AssetsViewSortFilter) {
-  function assetSortFunction(a: UserRealtoken, b: UserRealtoken) {
+  function assetSortFunction(
+    a: UserRealtoken | RWARealtoken,
+    b: UserRealtoken | RWARealtoken,
+  ) {
     const value = getAssetSortValue(a, b)
     return filter.sortReverse ? value * -1 : value
   }
-  function getAssetSortValue(a: UserRealtoken, b: UserRealtoken) {
+  function getAssetSortValue(
+    a: UserRealtoken | RWARealtoken,
+    b: UserRealtoken | RWARealtoken,
+  ) {
+    const A = a as UserRealtoken
+    const B = b as UserRealtoken
     switch (filter.sortBy) {
       case AssetSortType.VALUE:
-        return b.value - a.value
+        return B.value - A.value
       case AssetSortType.APR:
-        return b.annualPercentageYield - a.annualPercentageYield
+        return B.annualPercentageYield - A.annualPercentageYield
       case AssetSortType.RENT:
-        return b.amount * b.netRentDayPerToken - a.amount * a.netRentDayPerToken
+        return B.amount * B.netRentDayPerToken - A.amount * A.netRentDayPerToken
       case AssetSortType.RENT_START:
-        return b.rentStartDate.date.localeCompare(a.rentStartDate.date)
+        return B.rentStartDate.date.localeCompare(A.rentStartDate.date)
       case AssetSortType.NAME:
-        return a.shortName.localeCompare(b.shortName)
+        return A.shortName.localeCompare(b.shortName)
       case AssetSortType.SUPPLY:
-        return b.totalInvestment - a.totalInvestment
+        return B.totalInvestment - A.totalInvestment
       case AssetSortType.TOKEN:
-        return b.amount - a.amount
+        return B.amount - A.amount
       case AssetSortType.TOTAL_UNIT:
-        return b.totalUnits - a.totalUnits
+        return B.totalUnits - A.totalUnits
       case AssetSortType.RENTED_UNIT:
-        return b.rentedUnits - a.rentedUnits
+        return B.rentedUnits - A.rentedUnits
       case AssetSortType.OCCUPANCY:
-        return b.rentedUnits / b.totalUnits - a.rentedUnits / a.totalUnits
+        return B.rentedUnits / B.totalUnits - A.rentedUnits / A.totalUnits
       case AssetSortType.INITIAL_LAUNCH:
-        return b.initialLaunchDate?.date.localeCompare(
-          a.initialLaunchDate?.date,
+        return B.initialLaunchDate?.date.localeCompare(
+          A.initialLaunchDate?.date,
         )
       case AssetSortType.UNIT_PRICE_COST:
-        return (b.unitPriceCost ?? 0) - (a.unitPriceCost ?? 0)
+        return (B.unitPriceCost ?? 0) - (A.unitPriceCost ?? 0)
       case AssetSortType.UNREALIZED_CAPITAL_GAIN:
-        return (b.unrealizedCapitalGain ?? 0) - (a.unrealizedCapitalGain ?? 0)
+        return (B.unrealizedCapitalGain ?? 0) - (A.unrealizedCapitalGain ?? 0)
       case AssetSortType.LAST_CHANGE:
-        return b.lastChanges.localeCompare(a.lastChanges) ?? 0
+        return B.lastChanges.localeCompare(A.lastChanges) ?? 0
     }
   }
 

src/components/assetsView/filters/AssetsViewSubsidyFilter.tsx

@@ -3,7 +3,10 @@ import { useTranslation } from 'react-i18next'
 
 import { Select } from '@mantine/core'
 
-import { UserRealtoken } from 'src/store/features/wallets/walletsSelector'
+import {
+  RWARealtoken,
+  UserRealtoken,
+} from 'src/store/features/wallets/walletsSelector'
 
 import { useInputStyles } from '../../inputs/useInputStyles'
 import { AssetSubsidyType } from '../types'
@@ -73,27 +76,28 @@ AssetsViewSubsidyFilter.displayName = 'AssetsViewSubsidyFilter'
 export function useAssetsViewSubsidyFilter(
   filter: AssetsViewSubsidyFilterModel,
 ) {
-  function assetSubsidyFilterFunction(asset: UserRealtoken) {
+  function assetSubsidyFilterFunction(asset: UserRealtoken | RWARealtoken) {
+    const Asset = asset as UserRealtoken
     switch (filter.subsidy) {
       case AssetSubsidyType.ALL:
         return true
       case AssetSubsidyType.SUBSIDIZED:
-        return asset.subsidyStatus !== 'no'
+        return Asset.subsidyStatus !== 'no'
       case AssetSubsidyType.FULLY_SUBSIDIZED:
-        return asset.subsidyStatus === 'yes' && !!asset.subsidyStatusValue
+        return Asset.subsidyStatus === 'yes' && !!Asset.subsidyStatusValue
       case AssetSubsidyType.PARTIALLY_SUBSIDIZED:
-        return asset.subsidyStatus !== 'no' && !!asset.subsidyStatusValue
+        return Asset.subsidyStatus !== 'no' && !!Asset.subsidyStatusValue
       case AssetSubsidyType.SECTION_8:
-        return asset.subsidyStatus !== 'no' && asset.subsidyBy === 'Section 8'
+        return Asset.subsidyStatus !== 'no' && Asset.subsidyBy === 'Section 8'
       case AssetSubsidyType.SECTION_42:
-        return asset.subsidyStatus !== 'no' && asset.subsidyBy === 'Section 42'
+        return Asset.subsidyStatus !== 'no' && Asset.subsidyBy === 'Section 42'
       case AssetSubsidyType.OTHER_SUBSIDY:
         return (
-          asset.subsidyStatus !== 'no' &&
-          !['Section 8', 'Section 42'].includes(asset.subsidyBy ?? '')
+          Asset.subsidyStatus !== 'no' &&
+          !['Section 8', 'Section 42'].includes(Asset.subsidyBy ?? '')
         )
       case AssetSubsidyType.NOT_SUBSIDIZED:
-        return !asset.subsidyStatus || asset.subsidyStatus === 'no'
+        return !Asset.subsidyStatus || Asset.subsidyStatus === 'no'
     }
   }
 

src/components/assetsView/filters/AssetsViewUserProtocolFilter.tsx

@@ -3,7 +3,10 @@ import { useTranslation } from 'react-i18next'
 
 import { Select } from '@mantine/core'
 
-import { UserRealtoken } from 'src/store/features/wallets/walletsSelector'
+import {
+  RWARealtoken,
+  UserRealtoken,
+} from 'src/store/features/wallets/walletsSelector'
 
 import { useInputStyles } from '../../inputs/useInputStyles'
 import { AssetUserProtocolType } from '../types'
@@ -62,18 +65,21 @@ AssetsViewUserProtocolFilter.displayName = 'AssetsViewUserProtocolFilter'
 export function useAssetsViewUserProtocolFilter(
   filter: AssetsViewUserProtocolFilterModel,
 ) {
-  function assetUserProtocolFilterFunction(asset: UserRealtoken) {
+  function assetUserProtocolFilterFunction(
+    asset: UserRealtoken | RWARealtoken,
+  ) {
+    const Asset = asset as UserRealtoken
     switch (filter.userProtocol) {
       case AssetUserProtocolType.ALL:
         return true
       case AssetUserProtocolType.ETHEREUM:
-        return asset.balance.ethereum.amount > 0
+        return Asset.balance.ethereum.amount > 0
       case AssetUserProtocolType.GNOSIS:
-        return asset.balance.gnosis.amount > 0
+        return Asset.balance.gnosis.amount > 0
       case AssetUserProtocolType.RMM:
-        return asset.balance.rmm.amount > 0
+        return Asset.balance.rmm.amount > 0
       case AssetUserProtocolType.LEVINSWAP:
-        return asset.balance.levinSwap.amount > 0
+        return Asset.balance.levinSwap.amount > 0
     }
   }
 

src/components/assetsView/filters/AssetsViewUserStatusFilter.tsx

@@ -3,7 +3,10 @@ import { useTranslation } from 'react-i18next'
 
 import { Select } from '@mantine/core'
 
-import { UserRealtoken } from 'src/store/features/wallets/walletsSelector'
+import {
+  RWARealtoken,
+  UserRealtoken,
+} from 'src/store/features/wallets/walletsSelector'
 
 import { useInputStyles } from '../../inputs/useInputStyles'
 import { AssetUserStatusType } from '../types'
@@ -66,20 +69,21 @@ AssetsViewUserStatusFilter.displayName = 'AssetsViewUserStatusFilter'
 export function useAssetsViewUserStatusFilter(
   filter: AssetsViewUserStatusFilterModel,
 ) {
-  function assetUserStatusFilterFunction(asset: UserRealtoken) {
+  function assetUserStatusFilterFunction(asset: UserRealtoken | RWARealtoken) {
+    const Asset = asset as UserRealtoken
     switch (filter.userStatus) {
       case AssetUserStatusType.ALL:
         return true
       case AssetUserStatusType.OWNED:
-        return asset.amount > 0
+        return Asset.amount > 0
       case AssetUserStatusType.WHITELISTED:
-        return asset.isWhitelisted
+        return Asset.isWhitelisted
       case AssetUserStatusType.WHITELISTED_NOT_OWNED:
-        return asset.isWhitelisted && asset.amount === 0
+        return Asset.isWhitelisted && Asset.amount === 0
       case AssetUserStatusType.NOT_OWNED:
-        return asset.amount === 0
+        return Asset.amount === 0
       case AssetUserStatusType.NOT_WHITELISTED:
-        return !asset.isWhitelisted
+        return !Asset.isWhitelisted
     }
   }