From 2db4f69ae5a038f890d199eb6071e1088ce58241 Mon Sep 17 00:00:00 2001
From: akiraonstarknet <zkdice@proton.me>
Date: Sat, 7 Sep 2024 11:01:58 +0530
Subject: [PATCH] Fix filters bug

---
 next.config.mjs              |  6 +++---
 src/components/Filters.tsx   |  6 ++++++
 src/components/Pools.tsx     | 12 +++++++----
 src/components/YieldCard.tsx | 24 ++++++++++++++++++---
 src/store/protocols.ts       | 42 +++++++++++++++++-------------------
 5 files changed, 58 insertions(+), 32 deletions(-)

diff --git a/next.config.mjs b/next.config.mjs
index c7615d2..0c0fa0a 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,9 +2,9 @@
 const nextConfig = {
   // output: 'export',
   compiler: {
-    removeConsole: {
-      exclude: ['error'],
-    },
+    // removeConsole: {
+    //   exclude: ['error'],
+    // },
   },
   async rewrites() {
     return [
diff --git a/src/components/Filters.tsx b/src/components/Filters.tsx
index 5b4d4db..b693e1b 100755
--- a/src/components/Filters.tsx
+++ b/src/components/Filters.tsx
@@ -135,6 +135,7 @@ export function ProtocolFilters() {
 
 export function CategoryFilters() {
   const updateFilters = useSetAtom(updateFiltersAtom);
+  const protocolFilters = useAtomValue(filterAtoms.protocolsAtom);
   const categoriesFilter = useAtomValue(filterAtoms.categoriesAtom);
   const riskLevelFilters = useAtomValue(filterAtoms.riskAtom);
   const poolTypeFilters = useAtomValue(filterAtoms.typesAtom);
@@ -207,6 +208,11 @@ export function CategoryFilters() {
 
   return (
     <Box width={'100%'}>
+      {/* <Text color={'white'}>Protocols: {JSON.stringify(protocolFilters)}</Text>
+      <Text color={'white'}>Category: {JSON.stringify(categoriesFilter)}</Text>
+      <Text color={'white'}>Risk: {JSON.stringify(riskLevelFilters)}</Text>
+      <Text color={'white'}>Types: {JSON.stringify(poolTypeFilters)}</Text> */}
+
       {/* Stable pools */}
       <Tag
         size="lg"
diff --git a/src/components/Pools.tsx b/src/components/Pools.tsx
index afa8b12..1e083f1 100755
--- a/src/components/Pools.tsx
+++ b/src/components/Pools.tsx
@@ -12,7 +12,7 @@ import {
   Thead,
   Tr,
 } from '@chakra-ui/react';
-import { useAtomValue } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
 import { useMemo } from 'react';
 import {
   Pagination,
@@ -24,7 +24,11 @@ import {
   PaginationPageGroup,
 } from '@ajna/pagination';
 import { CategoryFilters, ProtocolFilters } from '@/components/Filters';
-import { allPoolsAtomUnSorted, filteredPools } from '@/store/protocols';
+import {
+  allPoolsAtomUnSorted,
+  filteredPools,
+  sortAtom,
+} from '@/store/protocols';
 import YieldCard from './YieldCard';
 
 export default function Pools() {
@@ -41,7 +45,7 @@ export default function Pools() {
     return _filteredPools.slice(startIndex, startIndex + ITEMS_PER_PAGE);
   }, [_filteredPools, currentPage]);
 
-  // const setSortingOption = useSetAtom(sortAtom);
+  const setSortingOption = useSetAtom(sortAtom);
 
   return (
     <Box float="left" width={'100%'}>
@@ -97,7 +101,7 @@ export default function Pools() {
             <Tr fontSize={'18px'} color={'white'} bg="bg">
               <Th>Pool name</Th>
               <Th textAlign={'right'}>
-                {/* <HeaderSorter 
+                {/* <HeaderSorter
                   heading='APY' 
                   mainColor='color2Text' inActiveColor='#d9d9f726'
                   onClick={(order: 'asc' | 'desc') => {
diff --git a/src/components/YieldCard.tsx b/src/components/YieldCard.tsx
index 3659ad6..dc8a2f5 100644
--- a/src/components/YieldCard.tsx
+++ b/src/components/YieldCard.tsx
@@ -31,6 +31,7 @@ import { UserStats, userStatsAtom } from '@/store/utils.atoms';
 import { getPoolInfoFromStrategy } from '@/store/protocols';
 import { TriangleDownIcon, TriangleUpIcon } from '@chakra-ui/icons';
 import { useState } from 'react';
+import mixpanel from 'mixpanel-browser';
 
 interface YieldCardProps {
   pool: PoolInfo;
@@ -363,6 +364,8 @@ function StrategyMobileCard(props: YieldCardProps) {
       padding={'20px'}
       gap={2}
       borderBottom={'1px solid var(--chakra-colors-bg)'}
+      as={'a'}
+      {...getLinkProps(pool, props.showProtocolName)}
     >
       <GridItem colSpan={3} rowSpan={props.showProtocolName ? 2 : 1}>
         <StrategyInfo
@@ -410,6 +413,22 @@ function StrategyMobileCard(props: YieldCardProps) {
   );
 }
 
+function getLinkProps(pool: PoolInfo, showProtocolName?: boolean) {
+  return {
+    href: pool.protocol.link,
+    target: '_blank',
+    onClick: () => {
+      mixpanel.track('Pool clicked', {
+        pool: pool.pool.name,
+        protocol: pool.protocol.name,
+        yield: pool.apr,
+        risk: pool.additional.riskFactor,
+        tvl: pool.tvl,
+        showProtocolName,
+      });
+    },
+  };
+}
 export default function YieldCard(props: YieldCardProps) {
   const { pool, index } = props;
 
@@ -419,9 +438,8 @@ export default function YieldCard(props: YieldCardProps) {
         color={'white'}
         bg={index % 2 == 0 ? 'color1_50p' : 'color2_50p'}
         display={{ base: 'none', md: 'table-row' }}
-        as="a"
-        href={pool.protocol.link}
-        target="_blank"
+        as={'a'}
+        {...getLinkProps(pool, props.showProtocolName)}
       >
         <Td>
           <StrategyInfo
diff --git a/src/store/protocols.ts b/src/store/protocols.ts
index 580de1f..f456769 100644
--- a/src/store/protocols.ts
+++ b/src/store/protocols.ts
@@ -208,18 +208,10 @@ export const allPoolsAtomWithStrategiesUnSorted = atom((get) => {
 
 const SORT_OPTIONS = ['DEFAULT', 'APR', 'TVL', 'RISK'];
 
-export const sortAtom = atom(
-  {
-    field: SORT_OPTIONS[0],
-    order: 'asc',
-    loading: false,
-  },
-  (get, set, args: { field: string; order: 'asc' | 'desc' }) => {
-    console.log('sorting', 'triggered');
-    set(sortAtom, args);
-    get(filteredPools);
-  },
-);
+export const sortAtom = atom({
+  field: SORT_OPTIONS[0],
+  order: 'asc',
+});
 
 export const sortPoolsAtom = atom((get) => {
   const pools = get(allPoolsAtomWithStrategiesUnSorted);
@@ -261,26 +253,32 @@ export const filteredPools = atom((get) => {
 
   return pools.filter((pool) => {
     // category filter
-    if (categories.includes(ALL_FILTER)) return true;
-    if (categories.includes(pool.category.valueOf())) return true;
+    if (
+      !categories.includes(ALL_FILTER) &&
+      !categories.includes(pool.category.valueOf())
+    )
+      return false;
 
     // type filter
-    if (types.includes(ALL_FILTER)) return true;
-    if (types.includes(pool.type.valueOf())) return true;
+    if (!types.includes(ALL_FILTER) && !types.includes(pool.type.valueOf()))
+      return false;
 
     // protocol filter
-    if (protocols.includes(ALL_FILTER)) return true;
-    if (protocols.includes(pool.protocol.name)) return true;
+    if (
+      !protocols.includes(ALL_FILTER) &&
+      !protocols.includes(pool.protocol.name)
+    )
+      return false;
 
     // risk filter
-    if (riskLevels.includes(ALL_FILTER)) return true;
     if (
-      riskLevels.includes(
+      !riskLevels.includes(ALL_FILTER) &&
+      !riskLevels.includes(
         Math.round(pool.additional.riskFactor).toFixed(0).toString(),
       )
     ) {
-      return true;
+      return false;
     }
-    return false;
+    return true;
   });
 });