From 2a6da690e2b43c59b2d0a7e4ed2375efbeb3f7db Mon Sep 17 00:00:00 2001
From: Jycssu <contact@jycssu.com>
Date: Sat, 18 Nov 2023 14:16:12 +0100
Subject: [PATCH] feat: allow to filter on owned protocol

---
 .../filters/AssetsViewFilterModal.tsx         |  7 ++
 .../filters/AssetsViewUserProtocolFilter.tsx  | 81 +++++++++++++++++++
 .../assetsView/filters/useFilters.ts          |  4 +
 .../types/assetUserProtocol.type.ts           |  7 ++
 src/components/assetsView/types/index.ts      |  1 +
 src/i18next/locales/en/common.json            | 10 +++
 src/i18next/locales/fr/common.json            | 10 +++
 src/states/index.ts                           |  3 +
 8 files changed, 123 insertions(+)
 create mode 100644 src/components/assetsView/filters/AssetsViewUserProtocolFilter.tsx
 create mode 100644 src/components/assetsView/types/assetUserProtocol.type.ts

diff --git a/src/components/assetsView/filters/AssetsViewFilterModal.tsx b/src/components/assetsView/filters/AssetsViewFilterModal.tsx
index de4246f..22474be 100644
--- a/src/components/assetsView/filters/AssetsViewFilterModal.tsx
+++ b/src/components/assetsView/filters/AssetsViewFilterModal.tsx
@@ -16,6 +16,7 @@ import { AssetsViewRentStatusFilter } from './AssetsViewRentStatusFilter'
 import { AssetsViewRmmStatusFilter } from './AssetsViewRmmStatusFilter'
 import { AssetsViewSort } from './AssetsViewSort'
 import { AssetsViewSubsidyFilter } from './AssetsViewSubsidyFilter'
+import { AssetsViewUserProtocolFilter } from './AssetsViewUserProtocolFilter'
 import { AssetsViewUserStatusFilter } from './AssetsViewUserStatusFilter'
 
 export const AssetsViewFilterModal: FC<ContextModalProps> = ({
@@ -56,6 +57,12 @@ export const AssetsViewFilterModal: FC<ContextModalProps> = ({
             setFilterModel({ ...filterModel, ...value })
           }}
         />
+        <AssetsViewUserProtocolFilter
+          filter={filterModel}
+          onChange={(value) => {
+            setFilterModel({ ...filterModel, ...value })
+          }}
+        />
         <AssetsViewRentStatusFilter
           filter={filterModel}
           onChange={(value) => {
diff --git a/src/components/assetsView/filters/AssetsViewUserProtocolFilter.tsx b/src/components/assetsView/filters/AssetsViewUserProtocolFilter.tsx
new file mode 100644
index 0000000..c7b883d
--- /dev/null
+++ b/src/components/assetsView/filters/AssetsViewUserProtocolFilter.tsx
@@ -0,0 +1,81 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Select } from '@mantine/core'
+
+import { UserRealtoken } from 'src/store/features/wallets/walletsSelector'
+
+import { useInputStyles } from '../../inputs/useInputStyles'
+import { AssetUserProtocolType } from '../types'
+
+interface AssetsViewUserProtocolFilterModel {
+  userProtocol: AssetUserProtocolType
+}
+
+interface AssetsViewUserProtocolFilterProps {
+  filter: AssetsViewUserProtocolFilterModel
+  onChange: (value: AssetsViewUserProtocolFilterModel) => void
+}
+export const AssetsViewUserProtocolFilter: FC<
+  AssetsViewUserProtocolFilterProps
+> = ({ filter, onChange }) => {
+  const { t } = useTranslation('common', { keyPrefix: 'assetUserProtocol' })
+  const { classes: inputClasses } = useInputStyles()
+
+  const viewOptions = [
+    {
+      value: AssetUserProtocolType.ALL,
+      label: t('options.all'),
+    },
+    {
+      value: AssetUserProtocolType.ETHEREUM,
+      label: t('options.ethereum'),
+    },
+    {
+      value: AssetUserProtocolType.GNOSIS,
+      label: t('options.gnosis'),
+    },
+    {
+      value: AssetUserProtocolType.RMM,
+      label: t('options.rmm'),
+    },
+    {
+      value: AssetUserProtocolType.LEVINSWAP,
+      label: t('options.levinSwap'),
+    },
+  ]
+
+  return (
+    <Select
+      label={t('label')}
+      data={viewOptions}
+      value={filter.userProtocol}
+      onChange={(value: AssetUserProtocolType) =>
+        onChange({ userProtocol: value })
+      }
+      classNames={inputClasses}
+    />
+  )
+}
+AssetsViewUserProtocolFilter.displayName = 'AssetsViewUserProtocolFilter'
+
+export function useAssetsViewUserProtocolFilter(
+  filter: AssetsViewUserProtocolFilterModel
+) {
+  function assetUserProtocolFilterFunction(asset: UserRealtoken) {
+    switch (filter.userProtocol) {
+      case AssetUserProtocolType.ALL:
+        return true
+      case AssetUserProtocolType.ETHEREUM:
+        return asset.balance.ethereum.amount > 0
+      case AssetUserProtocolType.GNOSIS:
+        return asset.balance.gnosis.amount > 0
+      case AssetUserProtocolType.RMM:
+        return asset.balance.rmm.amount > 0
+      case AssetUserProtocolType.LEVINSWAP:
+        return asset.balance.levinSwap.amount > 0
+    }
+  }
+
+  return { assetUserProtocolFilterFunction }
+}
diff --git a/src/components/assetsView/filters/useFilters.ts b/src/components/assetsView/filters/useFilters.ts
index 1c3f300..2cb2a05 100644
--- a/src/components/assetsView/filters/useFilters.ts
+++ b/src/components/assetsView/filters/useFilters.ts
@@ -7,6 +7,7 @@ import { useAssetsViewRentStatusFilter } from './AssetsViewRentStatusFilter'
 import { useAssetsViewRmmStatusFilter } from './AssetsViewRmmStatusFilter'
 import { useAssetsViewSort } from './AssetsViewSort'
 import { useAssetsViewSubsidyFilter } from './AssetsViewSubsidyFilter'
+import { useAssetsViewUserProtocolFilter } from './AssetsViewUserProtocolFilter'
 import { useAssetsViewUserStatusFilter } from './AssetsViewUserStatusFilter'
 
 export function useAssetsViewFilters() {
@@ -22,10 +23,13 @@ export function useAssetsViewFilters() {
     useAssetsViewRentStatusFilter(activeFilter)
   const { assetRmmStatusFilterFunction } =
     useAssetsViewRmmStatusFilter(activeFilter)
+  const { assetUserProtocolFilterFunction } =
+    useAssetsViewUserProtocolFilter(activeFilter)
 
   function assetsViewFilterFunction(tokenList: UserRealtoken[]) {
     return tokenList
       .filter(assetUserStatusFilterFunction)
+      .filter(assetUserProtocolFilterFunction)
       .filter(assetRentStatusFilterFunction)
       .filter(assetSubsidyFilterFunction)
       .filter(assetRmmStatusFilterFunction)
diff --git a/src/components/assetsView/types/assetUserProtocol.type.ts b/src/components/assetsView/types/assetUserProtocol.type.ts
new file mode 100644
index 0000000..ac8fb90
--- /dev/null
+++ b/src/components/assetsView/types/assetUserProtocol.type.ts
@@ -0,0 +1,7 @@
+export enum AssetUserProtocolType {
+  ALL = 'all',
+  ETHEREUM = 'ethereum',
+  GNOSIS = 'gnosis',
+  RMM = 'rmm',
+  LEVINSWAP = 'levinSwap',
+}
diff --git a/src/components/assetsView/types/index.ts b/src/components/assetsView/types/index.ts
index 735edff..e18ec40 100644
--- a/src/components/assetsView/types/index.ts
+++ b/src/components/assetsView/types/index.ts
@@ -4,3 +4,4 @@ export * from './assetSubsidy.type'
 export * from './assetUserStatus.type'
 export * from './assetRentStatus.type'
 export * from './assetRmmStatus.type'
+export * from './assetUserProtocol.type'
diff --git a/src/i18next/locales/en/common.json b/src/i18next/locales/en/common.json
index 8958c50..fe30b03 100644
--- a/src/i18next/locales/en/common.json
+++ b/src/i18next/locales/en/common.json
@@ -127,6 +127,16 @@
       "notAvailable": "No"
     }
   },
+  "assetUserProtocol": {
+    "label": "Owned on",
+    "options": {
+      "all": "All",
+      "ethereum": "Ethereum",
+      "gnosis": "Gnosis",
+      "rmm": "RMM",
+      "levinSwap": "LevinSwap"
+    }
+  },
   "assetCard": {
     "tokens": "Tokens",
     "apr": "APR",
diff --git a/src/i18next/locales/fr/common.json b/src/i18next/locales/fr/common.json
index 860621e..6d0136c 100644
--- a/src/i18next/locales/fr/common.json
+++ b/src/i18next/locales/fr/common.json
@@ -127,6 +127,16 @@
       "notAvailable": "Non"
     }
   },
+  "assetUserProtocol": {
+    "label": "Possédées sur",
+    "options": {
+      "all": "Tous",
+      "ethereum": "Ethereum",
+      "gnosis": "Gnosis",
+      "rmm": "RMM",
+      "levinSwap": "LevinSwap"
+    }
+  },
   "assetCard": {
     "tokens": "Tokens",
     "apr": "Rendement annuel",
diff --git a/src/states/index.ts b/src/states/index.ts
index dab3ab1..04bd5a6 100644
--- a/src/states/index.ts
+++ b/src/states/index.ts
@@ -5,6 +5,7 @@ import {
   AssetRmmStatusType,
   AssetSortType,
   AssetSubsidyType,
+  AssetUserProtocolType,
   AssetUserStatusType,
   AssetViewType,
 } from 'src/components/assetsView/types'
@@ -21,6 +22,7 @@ export interface AssetsViewFilterType {
   userStatus: AssetUserStatusType
   rentStatus: AssetRentStatusType
   rmmStatus: AssetRmmStatusType
+  userProtocol: AssetUserProtocolType
 }
 
 export const assetsViewDefaultFilter: AssetsViewFilterType = {
@@ -30,6 +32,7 @@ export const assetsViewDefaultFilter: AssetsViewFilterType = {
   userStatus: AssetUserStatusType.OWNED,
   rentStatus: AssetRentStatusType.ALL,
   rmmStatus: AssetRmmStatusType.ALL,
+  userProtocol: AssetUserProtocolType.ALL,
 }
 
 export const assetsViewFilterAtom = atomWithStorage<AssetsViewFilterType>(