Feature: new assets REG, REG Vote Power, RWA realtime price, Settings updates

.gitignore

@@ -36,3 +36,4 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+pnpm-lock.yaml

.nvmrc

@@ -0,0 +1 @@
+v18.20.4

next.config.js

@@ -11,7 +11,7 @@ const nextConfig = {
     outputStandalone: true,
   },
   images: {
-    domains: ['realt.co'],
+    domains: ['realt.co', 'static.debank.com'],
   },
   publicRuntimeConfig: {
     version,

package.json

@@ -10,7 +10,11 @@
     "prettier:check": "prettier --check src/.",
     "prettier:format": "prettier --write src/.",
     "export": "next build && next export",
-    "docker:local": "docker compose -f docker-compose.local.yml up --force-recreate --build"
+    "docker:local": "docker compose -f docker-compose.local.yml up --force-recreate --build",
+    "clean:cache": "del-cli .next",
+    "clean:mod": "del-cli node_modules",
+    "clean:all": "npm run clean:cache && npm run clean:mod",
+    "clean:build": "npm run clean:cache && npm run build"
   },
   "dependencies": {
     "@apollo/client": "^3.9.5",
@@ -27,6 +31,7 @@
     "cookies-next": "^2.0.5",
     "date-fns": "^3.3.1",
     "dayjs": "^1.11.11",
+    "del-cli": "^6.0.0",
     "dexie": "^3.2.5",
     "ethers": "^6.11.1",
     "graphql": "^16.6.0",

src/components/assetsView/AssetsView.tsx

@@ -3,8 +3,11 @@ 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 { selectUserIncludesOtherAssets } from 'src/store/features/settings/settingsSelector'
+import {
+  OtherRealtoken,
+  UserRealtoken,
+} from 'src/store/features/wallets/walletsSelector'
 
 import { AssetsViewSearch, useAssetsViewSearch } from './AssetsViewSearch'
 import { AssetsViewSelect, useAssetsViewSelect } from './assetsViewSelect'
@@ -14,20 +17,37 @@ import { RealtimeIndicator } from './indicators/RealtimeIndicator'
 import { AssetViewType } from './types'
 import { AssetGrid, AssetTable } from './views'
 
-export const AssetsView: FC = () => {
+interface AssetsViewProps {
+  allAssetsData: (UserRealtoken | OtherRealtoken)[]
+}
+
+export const AssetsView: FC<AssetsViewProps> = ({
+  allAssetsData: assetsData,
+}) => {
   const { assetsViewFilterFunction } = useAssetsViewFilters()
   const { assetSearchFunction, assetSearchProps } = useAssetsViewSearch()
   const { choosenAssetView } = useAssetsViewSelect()
+  const showOtherAssets = useSelector(selectUserIncludesOtherAssets)
 
-  const realtokens = useSelector(selectUserRealtokens)
-  const rwa = useRWA()
+  // Check if asset is a UserRealtoken or OtherRealtoken
+  const isOtherAsset = (asset: UserRealtoken | OtherRealtoken) => {
+    return !asset.hasOwnProperty('rentStatus') // rely on rentStatus to determine if it's a UserRealtoken
+  }
 
-  const data = useMemo(() => {
-    const assets = rwa ? [...realtokens, rwa] : realtokens
-    return assetsViewFilterFunction(assets.filter(assetSearchFunction))
-  }, [realtokens, rwa, assetSearchFunction, assetsViewFilterFunction])
+  // Apply search and filter functions
+  const filteredData = useMemo(() => {
+    // First filter by user advanced filters
+    const advancedFilteredAssets = assetsViewFilterFunction(
+      assetsData.filter(assetSearchFunction),
+    )
+    // Then filter out OtherRealtoken
+    const othersAssetsFiltering = showOtherAssets
+      ? advancedFilteredAssets
+      : advancedFilteredAssets.filter((asset) => !isOtherAsset(asset))
+    return othersAssetsFiltering
+  }, [assetsData, assetSearchFunction, assetsViewFilterFunction])
 
-  return realtokens.length ? (
+  return assetsData.length ? (
     <>
       <Grid align={'center'}>
         <Grid.Col
@@ -45,10 +65,10 @@ export const AssetsView: FC = () => {
         </Grid.Col>
       </Grid>
       {choosenAssetView == AssetViewType.TABLE && (
-        <AssetTable key={'table'} realtokens={data} />
+        <AssetTable key={'table'} realtokens={filteredData} />
       )}
       {choosenAssetView == AssetViewType.GRID && (
-        <AssetGrid key={'grid'} realtokens={data} />
+        <AssetGrid key={'grid'} realtokens={filteredData} />
       )}
     </>
   ) : null

src/components/assetsView/AssetsViewSearch.tsx

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

src/components/assetsView/filters/AssetsViewRentStatusFilter.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { Select } from '@mantine/core'
 
 import {
-  RWARealtoken,
+  OtherRealtoken,
   UserRealtoken,
 } from 'src/store/features/wallets/walletsSelector'
 
@@ -61,7 +61,9 @@ AssetsViewRentStatusFilter.displayName = 'AssetsViewRentStatusFilter'
 export function useAssetsViewRentStatusFilter(
   filter: AssetsViewRentStatusFilterModel,
 ) {
-  function assetRentStatusFilterFunction(asset: UserRealtoken | RWARealtoken) {
+  function assetRentStatusFilterFunction(
+    asset: UserRealtoken | OtherRealtoken,
+  ) {
     const Asset = asset as UserRealtoken
     switch (filter.rentStatus) {
       case AssetRentStatusType.ALL:

src/components/assetsView/filters/AssetsViewRmmStatusFilter.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { Select } from '@mantine/core'
 
 import {
-  RWARealtoken,
+  OtherRealtoken,
   UserRealtoken,
 } from 'src/store/features/wallets/walletsSelector'
 
@@ -56,7 +56,7 @@ AssetsViewRmmStatusFilter.displayName = 'AssetsViewRmmStatusFilter'
 export function useAssetsViewRmmStatusFilter(
   filter: AssetsViewRmmStatusFilterModel,
 ) {
-  function assetRmmStatusFilterFunction(asset: UserRealtoken | RWARealtoken) {
+  function assetRmmStatusFilterFunction(asset: UserRealtoken | OtherRealtoken) {
     const Asset = asset as UserRealtoken
     switch (filter.rmmStatus) {
       case AssetRmmStatusType.ALL:

src/components/assetsView/filters/AssetsViewSort.tsx

@@ -6,7 +6,7 @@ import { Grid, Select, Switch } from '@mantine/core'
 
 import { selectTransfersIsLoaded } from 'src/store/features/transfers/transfersSelector'
 import {
-  RWARealtoken,
+  OtherRealtoken,
   UserRealtoken,
 } from 'src/store/features/wallets/walletsSelector'
 
@@ -92,51 +92,58 @@ export const AssetsViewSort: FC<AssetsViewSortProps> = ({
 }
 AssetsViewSort.displayName = 'AssetsViewSort'
 
+type MixedRealtoken = Partial<UserRealtoken> &
+  Partial<OtherRealtoken> &
+  Pick<UserRealtoken, keyof OtherRealtoken>
+
 export function useAssetsViewSort(filter: AssetsViewSortFilter) {
   function assetSortFunction(
-    a: UserRealtoken | RWARealtoken,
-    b: UserRealtoken | RWARealtoken,
+    a: UserRealtoken | OtherRealtoken,
+    b: UserRealtoken | OtherRealtoken,
   ) {
     const value = getAssetSortValue(a, b)
     return filter.sortReverse ? value * -1 : value
   }
-  function getAssetSortValue(
-    a: UserRealtoken | RWARealtoken,
-    b: UserRealtoken | RWARealtoken,
-  ) {
-    const A = a as UserRealtoken
-    const B = b as UserRealtoken
+  function getAssetSortValue(a: MixedRealtoken, b: MixedRealtoken) {
     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 ?? 0) - (a.annualPercentageYield ?? 0)
       case AssetSortType.RENT:
-        return B.amount * B.netRentDayPerToken - A.amount * A.netRentDayPerToken
+        return (
+          b.amount * (b.netRentDayPerToken ?? 0) -
+          a.amount * (a.netRentDayPerToken ?? 0)
+        )
       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 ?? 0) - (a.totalUnits ?? 0)
       case AssetSortType.RENTED_UNIT:
-        return B.rentedUnits - A.rentedUnits
+        return (b.rentedUnits ?? 0) - (a.rentedUnits ?? 0)
       case AssetSortType.OCCUPANCY:
-        return B.rentedUnits / B.totalUnits - A.rentedUnits / A.totalUnits
+        return (
+          (b.rentedUnits ?? 0) / (b.totalUnits ?? 1) -
+          (a.rentedUnits ?? 0) / (a.totalUnits ?? 1)
+        )
       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 ?? '')
     }
   }
 

src/components/assetsView/filters/AssetsViewSubsidyFilter.tsx

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

src/components/assetsView/filters/AssetsViewUserProtocolFilter.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { Select } from '@mantine/core'
 
 import {
-  RWARealtoken,
+  OtherRealtoken,
   UserRealtoken,
 } from 'src/store/features/wallets/walletsSelector'
 
@@ -66,20 +66,20 @@ export function useAssetsViewUserProtocolFilter(
   filter: AssetsViewUserProtocolFilterModel,
 ) {
   function assetUserProtocolFilterFunction(
-    asset: UserRealtoken | RWARealtoken,
+    asset: UserRealtoken | OtherRealtoken,
   ) {
     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

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { Select } from '@mantine/core'
 
 import {
-  RWARealtoken,
+  OtherRealtoken,
   UserRealtoken,
 } from 'src/store/features/wallets/walletsSelector'
 
@@ -69,7 +69,9 @@ AssetsViewUserStatusFilter.displayName = 'AssetsViewUserStatusFilter'
 export function useAssetsViewUserStatusFilter(
   filter: AssetsViewUserStatusFilterModel,
 ) {
-  function assetUserStatusFilterFunction(asset: UserRealtoken | RWARealtoken) {
+  function assetUserStatusFilterFunction(
+    asset: UserRealtoken | OtherRealtoken,
+  ) {
     const Asset = asset as UserRealtoken
     switch (filter.userStatus) {
       case AssetUserStatusType.ALL:

src/components/assetsView/filters/useFilters.ts

@@ -2,7 +2,7 @@ import { useAtom } from 'jotai'
 
 import { assetsViewDefaultFilter, assetsViewFilterAtom } from 'src/states'
 import {
-  RWARealtoken,
+  OtherRealtoken,
   UserRealtoken,
 } from 'src/store/features/wallets/walletsSelector'
 
@@ -30,7 +30,7 @@ export function useAssetsViewFilters() {
     useAssetsViewUserProtocolFilter(activeFilter)
 
   function assetsViewFilterFunction(
-    tokenList: (UserRealtoken | RWARealtoken)[],
+    tokenList: (UserRealtoken | OtherRealtoken)[],
   ) {
     return tokenList
       .filter(assetUserStatusFilterFunction)