Merge pull request #44 from akiraonstarknet/combine-pools

fix protocol filter button
strkfarm · Sep 6, 2024 · 428ed88 · 428ed88
2 parents 9af60a6 + e1f89da
commit 428ed88
Show file tree

Hide file tree

Showing 12 changed files with 147 additions and 85 deletions.
diff --git 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/app/globals.css b/src/app/globals.css
@@ -136,4 +136,8 @@ body {
 td, th {
   border-color: var(--chakra-colors-bg) !important;
   vertical-align: top;
+}
+
+th {
+  color: var(--chakra-colors-color2Text) !important;
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,6 +4,7 @@ import tg from '@/assets/tg.svg';
 import { useDotButton } from '@/components/EmblaCarouselDotButton';
 import Pools from '@/components/Pools';
 import Strategies from '@/components/Strategies';
+import TVL from '@/components/TVL';
 import CONSTANTS from '@/constants';
 import { useWindowSize } from '@/utils/useWindowSize';
 
@@ -79,10 +80,10 @@ export default function Home() {
   useEffect(() => {
     (async () => {
       const tab = searchParams.get('tab');
-      if (tab === 'pools') {
-        setTabIndex(0);
-      } else {
+      if (tab === 'strategies') {
         setTabIndex(1);
+      } else {
+        setTabIndex(0);
       }
     })();
   }, [searchParams]);
@@ -172,12 +173,15 @@ export default function Home() {
         </Box>
       </Box>
 
+      <TVL />
+
       <Tabs
         position="relative"
         variant="unstyled"
         width={'100%'}
         index={tabIndex}
         onChange={handleTabsChange}
+        marginTop={'10px'}
       >
         <TabList>
           <Tab

diff --git a/src/app/template.tsx b/src/app/template.tsx
@@ -36,7 +36,7 @@ const theme = extendTheme({
     color1_35p: 'rgba(53, 60, 79, 0.35)',
     color1_light: '#bcc9ff80',
     color2: 'rgba(132, 132, 195, 1)',
-    color2Text: '#7DFACB',
+    color2Text: 'rgb(184 184 239)',
     color2_65p: 'rgba(132, 132, 195, 0.65)',
     color2_50p: 'rgba(132, 132, 195, 0.15)',
     highlight: '#1a1a27', // light grey

diff --git a/src/components/Filters.tsx b/src/components/Filters.tsx
@@ -52,7 +52,7 @@ export function ProtocolFilters() {
             console.log('clicked', p.name);
             // generated list of protocols selected. All means array of all protocols.
             const selectedProtocols = protocolsFilter.includes(ALL_FILTER)
-              ? filters.protocols.map((p) => p.name)
+              ? []
               : protocolsFilter;
 
             let updatedProtocols = [];
@@ -93,7 +93,7 @@ export function ProtocolFilters() {
         size="lg"
         borderRadius="full"
         padding={'2px'}
-        bg="bg"
+        bg="color1"
         marginRight={'5px'}
         as="button"
         marginTop={'1px'}
@@ -198,6 +198,13 @@ export function CategoryFilters() {
     return riskLevelFilters.includes('1') || riskLevelFilters.includes('2');
   }
 
+  function getTextProps(isActive: boolean) {
+    return {
+      fontSize: '14px',
+      color: isActive ? 'bg' : 'color2Text',
+    };
+  }
+
   return (
     <Box width={'100%'}>
       {/* Stable pools */}
@@ -230,11 +237,9 @@ export function CategoryFilters() {
           />
         </AvatarGroup>
         <TagLabel
-          color={
-            categoriesFilter.includes(Category.Stable.valueOf())
-              ? 'bg'
-              : 'color2'
-          }
+          {...getTextProps(
+            categoriesFilter.includes(Category.Stable.valueOf()),
+          )}
         >
           {Category.Stable.valueOf()}
         </TagLabel>
@@ -265,9 +270,7 @@ export function CategoryFilters() {
           />
         </AvatarGroup>
         <TagLabel
-          color={
-            categoriesFilter.includes(Category.STRK.valueOf()) ? 'bg' : 'color2'
-          }
+          {...getTextProps(categoriesFilter.includes(Category.STRK.valueOf()))}
         >
           {Category.STRK.valueOf()}
         </TagLabel>
@@ -297,7 +300,7 @@ export function CategoryFilters() {
             </Avatar>
           ))}
         </AvatarGroup>
-        <TagLabel color={isLowRisk() ? 'bg' : 'color2'}>Low risk</TagLabel>
+        <TagLabel {...getTextProps(isLowRisk())}>Low risk</TagLabel>
       </Tag>
 
       {/* DEXes */}
@@ -319,12 +322,10 @@ export function CategoryFilters() {
         marginBottom={'10px'}
       >
         <TagLabel
-          color={
+          {...getTextProps(
             poolTypeFilters.includes(PoolType.DEXV2.valueOf()) ||
-            poolTypeFilters.includes(PoolType.DEXV3.valueOf())
-              ? 'bg'
-              : 'color2'
-          }
+              poolTypeFilters.includes(PoolType.DEXV3.valueOf()),
+          )}
         >
           DEX Pools
         </TagLabel>
@@ -343,9 +344,7 @@ export function CategoryFilters() {
         bg={poolTypeFilters.includes(PoolType.Lending) ? 'purple' : 'color1'}
         marginBottom={'10px'}
       >
-        <TagLabel
-          color={poolTypeFilters.includes(PoolType.Lending) ? 'bg' : 'color2'}
-        >
+        <TagLabel {...getTextProps(poolTypeFilters.includes(PoolType.Lending))}>
           Lending Pools
         </TagLabel>
       </Tag>
@@ -366,9 +365,7 @@ export function CategoryFilters() {
         marginBottom={'10px'}
       >
         <TagLabel
-          color={
-            poolTypeFilters.includes(PoolType.Derivatives) ? 'bg' : 'color2'
-          }
+          {...getTextProps(poolTypeFilters.includes(PoolType.Derivatives))}
         >
           Derivative Pools
         </TagLabel>
@@ -389,7 +386,7 @@ export function CategoryFilters() {
         }}
         marginBottom={'10px'}
       >
-        <TagLabel color={'color2'}>
+        <TagLabel {...getTextProps(false)}>
           <HStack>
             <Text>Reset</Text> <CloseIcon fontSize={'10px'} />
           </HStack>

diff --git a/src/components/Pools.tsx b/src/components/Pools.tsx
@@ -24,11 +24,7 @@ import {
   PaginationPageGroup,
 } from '@ajna/pagination';
 import { CategoryFilters, ProtocolFilters } from '@/components/Filters';
-import {
-  allPoolsAtomUnSorted,
-  filteredPools,
-  sortPoolsAtom,
-} from '@/store/protocols';
+import { allPoolsAtomUnSorted, filteredPools } from '@/store/protocols';
 import YieldCard from './YieldCard';
 
 export default function Pools() {
@@ -45,7 +41,7 @@ export default function Pools() {
     return _filteredPools.slice(startIndex, startIndex + ITEMS_PER_PAGE);
   }, [_filteredPools, currentPage]);
 
-  const sortedPools = useAtomValue(sortPoolsAtom);
+  // const setSortingOption = useSetAtom(sortAtom);
 
   return (
     <Box float="left" width={'100%'}>
@@ -100,7 +96,16 @@ export default function Pools() {
           <Thead display={{ base: 'none', md: 'table-header-group' }}>
             <Tr fontSize={'18px'} color={'white'} bg="bg">
               <Th>Pool name</Th>
-              <Th textAlign={'right'}>APY</Th>
+              <Th textAlign={'right'}>
+                {/* <HeaderSorter 
+                  heading='APY' 
+                  mainColor='color2Text' inActiveColor='#d9d9f726'
+                  onClick={(order: 'asc' | 'desc') => {
+                    setSortingOption({field: 'APR', order});
+                  }}
+                /> */}
+                APY
+              </Th>
               <Th textAlign={'right'}>Risk</Th>
               <Th textAlign={'right'}>TVL</Th>
             </Tr>

diff --git a/src/components/Strategies.tsx b/src/components/Strategies.tsx
@@ -15,13 +15,8 @@ import {
 } from '@chakra-ui/react';
 import { useAtomValue } from 'jotai';
 import React, { useMemo } from 'react';
-import TVL from './TVL';
 import { userStatsAtom } from '@/store/utils.atoms';
-import {
-  allPoolsAtomUnSorted,
-  filteredPools,
-  sortPoolsAtom,
-} from '@/store/protocols';
+import { allPoolsAtomUnSorted, filteredPools } from '@/store/protocols';
 import { addressAtom } from '@/store/claims.atoms';
 import { usePagination } from '@ajna/pagination';
 import { YieldStrategyCard } from './YieldCard';
@@ -44,11 +39,8 @@ export default function Strategies() {
     return _filteredPools.slice(startIndex, startIndex + ITEMS_PER_PAGE);
   }, [_filteredPools, currentPage]);
 
-  const sortedPools = useAtomValue(sortPoolsAtom);
-
   return (
     <Container width="100%" float={'left'} padding={'0px'} marginTop={'10px'}>
-      <TVL />
       <Text
         marginTop={'15px'}
         color="light_grey"

diff --git a/src/components/TVL.tsx b/src/components/TVL.tsx
@@ -48,7 +48,7 @@ const TVL: React.FC = () => {
       width="100%"
     >
       <GridItem display="flex">
-        <Card width="100%" padding={'15px 30px'} color="white" bg="bg">
+        <Card width="100%" padding={'15px 30px'} color="white" bg="color2_50p">
           <Stat>
             <StatLabel>Total Value locked (TVL)</StatLabel>
             <StatNumber>
@@ -64,7 +64,7 @@ const TVL: React.FC = () => {
       </GridItem>
 
       <GridItem display="flex">
-        <Card width="100%" padding={'15px 30px'} color="white" bg="bg">
+        <Card width="100%" padding={'15px 30px'} color="white" bg="color2_50p">
           <Stat>
             <StatLabel>Your holdings</StatLabel>
             <StatNumber>

diff --git a/src/components/YieldCard.tsx b/src/components/YieldCard.tsx
@@ -19,6 +19,7 @@ import {
   Text,
   Tooltip,
   Tr,
+  VStack,
 } from '@chakra-ui/react';
 import shield from '@/assets/shield.svg';
 import { IStrategyProps, StrategyLiveStatus } from '@/strategies/IStrategy';
@@ -28,6 +29,8 @@ import { addressAtom } from '@/store/claims.atoms';
 import { FaWallet } from 'react-icons/fa';
 import { UserStats, userStatsAtom } from '@/store/utils.atoms';
 import { getPoolInfoFromStrategy } from '@/store/protocols';
+import { TriangleDownIcon, TriangleUpIcon } from '@chakra-ui/icons';
+import { useState } from 'react';
 
 interface YieldCardProps {
   pool: PoolInfo;
@@ -460,3 +463,44 @@ export function YieldStrategyCard(props: {
 
   return <YieldCard pool={pool} index={props.index} showProtocolName={false} />;
 }
+
+export function HeaderSorter(props: {
+  heading: string;
+  mainColor: string;
+  inActiveColor: string;
+  onClick: (order: 'asc' | 'desc') => void;
+}) {
+  const [isAscending, setIsAscending] = useState(false);
+  const [isDescending, setIsDescending] = useState(false);
+
+  return (
+    <HStack
+      as="button"
+      onClick={() => {
+        let order: 'asc' | 'desc' = 'desc';
+        if (!isAscending && !isDescending) {
+          setIsDescending(true);
+        } else if (isDescending) {
+          setIsAscending(true);
+          setIsDescending(false);
+          order = 'asc';
+        } else {
+          setIsAscending(false);
+          setIsDescending(true);
+        }
+        props.onClick(order);
+      }}
+      float={'right'}
+    >
+      <Text color={props.mainColor}>{props.heading.toUpperCase()}</Text>
+      <VStack gap={0} spacing={0}>
+        <TriangleUpIcon
+          color={isAscending ? props.mainColor : props.inActiveColor}
+        />
+        <TriangleDownIcon
+          color={isDescending ? props.mainColor : props.inActiveColor}
+        />
+      </VStack>
+    </HStack>
+  );
+}