Feat: update ux of pool and strategy cards

.env.sample

@@ -1,4 +1,4 @@
-NEXT_PUBLIC_RPC_URL=https://starknet-mainnet.public.blastapi.io/
-RPC_URL=https://starknet-mainnet.public.blastapi.io/
+NEXT_PUBLIC_RPC_URL=
+RPC_URL=
 
 DATABASE_URL=

.husky/_/h

@@ -1,22 +1,22 @@
-#!/usr/bin/env sh
-[ "$HUSKY" = "2" ] && set -x
-n=$(basename "$0")
-s=$(dirname "$(dirname "$0")")/$n
-
-[ ! -f "$s" ] && exit 0
-
-if [ -f "$HOME/.huskyrc" ]; then
-	echo "husky - '~/.huskyrc' is DEPRECATED, please move your code to ~/.config/husky/init.sh"
-fi
-i="${XDG_CONFIG_HOME:-$HOME/.config}/husky/init.sh"
-[ -f "$i" ] && . "$i"
-
-[ "${HUSKY-}" = "0" ] && exit 0
-
-export PATH="node_modules/.bin:$PATH"
-sh -e "$s" "$@"
-c=$?
-
-[ $c != 0 ] && echo "husky - $n script failed (code $c)"
-[ $c = 127 ] && echo "husky - command not found in PATH=$PATH"
-exit $c
+#!/usr/bin/env sh
+[ "$HUSKY" = "2" ] && set -x
+n=$(basename "$0")
+s=$(dirname "$(dirname "$0")")/$n
+
+[ ! -f "$s" ] && exit 0
+
+if [ -f "$HOME/.huskyrc" ]; then
+	echo "husky - '~/.huskyrc' is DEPRECATED, please move your code to ~/.config/husky/init.sh"
+fi
+i="${XDG_CONFIG_HOME:-$HOME/.config}/husky/init.sh"
+[ -f "$i" ] && . "$i"
+
+[ "${HUSKY-}" = "0" ] && exit 0
+
+export PATH="node_modules/.bin:$PATH"
+sh -e "$s" "$@"
+c=$?
+
+[ $c != 0 ] && echo "husky - $n script failed (code $c)"
+[ $c = 127 ] && echo "husky - command not found in PATH=$PATH"
+exit $c

.husky/pre-commit

@@ -1 +1 @@
-yarn run lint:fix && yarn run format:fix
+yarn run lint:fix && yarn run format:fix

src/app/globals.css

@@ -126,3 +126,9 @@ body {
   width: 95%;
   flex: 0 0 100%;
 }
+
+.theme-gradient-text {
+  background: linear-gradient(to right, var(--chakra-colors-purple) 10%, var(--chakra-colors-cyan) 50%, var(--chakra-colors-cyan) 100%);
+  -webkit-background-clip: text;
+  color: transparent;
+}

src/app/page.tsx

@@ -45,7 +45,7 @@
 export default function Home() {
   const [tabIndex, setTabIndex] = useState(0);
 
   const { address } = useAccount();
   const searchParams = useSearchParams();
   const size = useWindowSize();
   const router = useRouter();
@@ -94,10 +94,9 @@
           fontSize={{ base: '28px', md: '35px' }}
           lineHeight={'30px'}
           marginBottom={'10px'}
-          color={'cyan'}
           textAlign={'center'}
         >
-          <b>Starknet&apos;s Yield Powerhouse🚀</b>
+          <b className="theme-gradient-text">Starknet&apos;s Yield Powerhouse</b>🚀
         </Text>
         <Text
           color="color2"
@@ -123,12 +122,12 @@
               <Link href={banner.link} isExternal>
                 <ChakraImage
                   src={
                     (!isMobile && size.width > 450) || size.width == 0
                       ? banner.desktop
                       : banner.mobile
                   }
                   height={'auto'}
-                  boxShadow={'0px 0px 2px #484848'}
+                  boxShadow={'none'}
                   width="100%"
                   alt="Banner"
                   style={{ objectFit: 'cover', borderRadius: '10px' }}
@@ -180,7 +179,7 @@
         <TabList>
           <Tab
             color="light_grey"
-            _selected={{ color: 'color2Text' }}
+            _selected={{ color: 'purple' }}
             onClick={() => {
               mixpanel.track('Strategies opened');
             }}
@@ -189,7 +188,7 @@
           </Tab>
           <Tab
             color="light_grey"
-            _selected={{ color: 'color2Text' }}
+            _selected={{ color: 'purple' }}
             onClick={() => {
               mixpanel.track('All pools clicked');
             }}
@@ -200,7 +199,7 @@
         <TabIndicator
           mt="-1.5px"
           height="2px"
-          bg="color2Text"
+          bg="purple"
           color="color1"
           borderRadius="1px"
         />

src/app/strategy/[strategyId]/_components/Strategy.tsx

@@ -66,7 +66,7 @@
 
   useEffect(() => {
     setBalQueryEnable(true);
   }, []);
 
   // const balAtom = getBalanceAtom(strategy?.holdingTokens[0]);
   const balData = useAtomValue(strategy?.balanceAtom || DUMMY_BAL_ATOM);
@@ -101,9 +101,9 @@
         <Avatar marginRight={'5px'} src={strategy?.holdingTokens[0].logo} />
         <Text
           marginTop={'6px'}
-          color="white"
           fontSize={{ base: '18px', md: '25px' }}
           fontWeight={'bold'}
+          color='white'
         >
           {strategy ? strategy.name : 'Strategy Not found'}
         </Text>
@@ -220,7 +220,7 @@
                   <TabList>
                     <Tab
                       color="light_grey"
-                      _selected={{ color: 'color2Text' }}
+                      _selected={{ color: 'purple' }}
                       onClick={() => {
                         // mixpanel.track('All pools clicked')
                       }}
@@ -229,7 +229,7 @@
                     </Tab>
                     <Tab
                       color="light_grey"
-                      _selected={{ color: 'color2Text' }}
+                      _selected={{ color: 'purple' }}
                       onClick={() => {
                         // mixpanel.track('Strategies opened')
                       }}
@@ -240,7 +240,7 @@
                   <TabIndicator
                     mt="-1.5px"
                     height="2px"
-                    bg="color2Text"
+                    bg="purple"
                     color="color1"
                     borderRadius="1px"
                   />
@@ -391,7 +391,7 @@
             </Text>
 
             {/* If more than 1 filtered tx */}
             {transactions.filter((tx) => tx.info.strategyId == strategy.id)
               .length > 0 && (
               <>
                 <Text
@@ -405,7 +405,7 @@
                 </Text>
 
                 {transactions
                   .filter((tx) => tx.info.strategyId == strategy.id)
                   .map((tx, index) => {
                     return (
                       <Box
@@ -442,8 +442,8 @@
             )}
 
             {/* If no filtered tx */}
             {transactions.filter((tx) => tx.info.strategyId == strategy.id)
               .length == 0 && (
               <Text fontSize={'14px'} textAlign={'center'} color="light_grey">
                 No transactions recorded since this feature was added. We use
                 your {"browser's"} storage to save your transaction history.

src/app/strategy/[strategyId]/page.tsx

@@ -31,7 +31,6 @@ export default function StrategyPage({ params }: StrategyParams) {
       maxWidth={'1000px'}
       margin={'0 auto'}
       padding="30px 10px"
-      fontFamily={'sans-serif'}
     >
       <Strategy params={params} />
     </Container>

src/app/template.tsx

@@ -20,29 +20,34 @@
 import { RpcProviderOptions, constants } from 'starknet';
 import { ArgentMobileConnector } from 'starknetkit/argentMobile';
 import { InjectedConnector } from 'starknetkit/injected';
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
 
 mixpanel.init('118f29da6a372f0ccb6f541079cad56b');
 
 const theme = extendTheme({
   colors: {
     transparent: 'rgba(0, 0, 0, 0)',
     opacity_50p: 'rgba(0, 0, 0, 0.5)',
-    color1: 'rgba(86, 118, 254, 1)',
-    color1_65p: 'rgba(86, 118, 254, 0.65)',
-    color1_50p: 'rgba(86, 118, 254, 0.5)',
-    color1_35p: 'rgba(86, 118, 254, 0.35)',
+    color1: 'rgba(53, 60, 79, 1)',
+    color1_65p: 'rgba(53, 60, 79, 0.65)',
+    color1_50p: 'rgba(53, 60, 79, 0.5)',
+    color1_35p: 'rgba(53, 60, 79, 0.35)',
     color1_light: '#bcc9ff80',
-    color2: 'rgb(127 73 229)',
-    color2Text: 'rgb(165 118 255)',
-    color2_65p: 'rgba(104, 51, 205, 0.65)',
-    color2_50p: 'rgba(104, 51, 205, 0.5)',
-    highlight: '#272932', // light grey
+    color2: 'rgba(132, 132, 195, 1)',
+    color2Text: '#7DFACB',
+    color2_65p: 'rgba(132, 132, 195, 0.65)',
+    color2_50p: 'rgba(132, 132, 195, 0.15)',
+    highlight: '#1a1a27', // light grey
     light_grey: '#9d9d9d',
     disabled_text: '#818181',
     disabled_bg: '#5f5f5f',
-    purple: '#6F4FF2',
-    cyan: '#22F3DF',
-    bg: '#1A1C26', // dark blue
+    purple: '#6e53dc',
+    cyan: '#7DFACB',
+    bg: '#111119', // dark blue
+    grey_text: '#B6B6B6',
+    yellow: '#EFDB72'
   },
   fontSizes: {
     large: '50px',
@@ -57,10 +62,16 @@
     MenuItem: {
       bg: 'highlight',
     },
+    Badge: {
+      baseStyle: {
+        lineHeight: 'initial',
+        borderRadius: '4px',
+      },
+    },
   },
   fonts: {
     heading: `'Courier New', Courier, monospace`,
-    body: `'Courier New', Courier, monospace`,
+    body: inter.style.fontFamily,
   },
 });
 

src/components/Deposit.tsx

@@ -151,7 +151,7 @@ export default function Deposit(props: DepositProps) {
           <Button
             size={'sm'}
             marginLeft={'5px'}
-            color="purple"
+            color="color2"
             bg="highlight"
             padding="0"
             maxHeight={'25px'}
@@ -196,7 +196,7 @@ export default function Deposit(props: DepositProps) {
               bgColor={'highlight'}
               borderColor={'bg'}
               borderWidth={'1px'}
-              color="color2Text"
+              color="color2"
               _hover={{
                 bg: 'bg',
               }}
@@ -324,10 +324,10 @@ export default function Deposit(props: DepositProps) {
 
       <Box width="100%" marginTop={'15px'}>
         <Flex justifyContent="space-between">
-          <Text fontSize={'12px'} color="color2Text" fontWeight={'bold'}>
+          <Text fontSize={'12px'} color="color2" fontWeight={'bold'}>
             Current TVL Limit:
           </Text>
-          <Text fontSize={'12px'} color="color2Text">
+          <Text fontSize={'12px'} color="color2">
             {!tvlInfo || !tvlInfo?.data ? (
               <Spinner size="2xs" />
             ) : (
@@ -339,7 +339,7 @@ export default function Deposit(props: DepositProps) {
           </Text>
         </Flex>
         <Progress
-          colorScheme="green"
+          colorScheme="gray"
           bg="bg"
           value={
             (100 *

src/components/Filters.tsx

@@ -62,19 +62,19 @@ const colourStyles: StylesConfig<Option, true> = {
   dropdownIndicator: (styles) => {
     return {
       ...styles,
-      color: 'var(--chakra-colors-color2Text)',
+      color: 'var(--chakra-colors-purple)',
     };
   },
   clearIndicator: (styles) => {
     return {
       ...styles,
-      color: 'var(--chakra-colors-color2Text)',
+      color: 'var(--chakra-colors-purple)',
     };
   },
   indicatorSeparator: (styles) => {
     return {
       ...styles,
-      backgroundColor: 'var(--chakra-colors-color2Text)',
+      backgroundColor: 'var(--chakra-colors-purple)',
     };
   },
   menu: (styles) => {
@@ -112,7 +112,7 @@ export default function Filters() {
   // const colors: readonly string[] = ['#00B8D9', '#407cd5', '#7967e5', '#FF5630',
   // '#FF8B00','#FFC400', '#36B37E', '#00875A', '#253858', '#666666']
 
-  const colors = ['rgba(86, 118, 254, 1)', 'rgb(127 73 229)'];
+  const colors = ['rgba(132, 132, 195, 1)'];
   const updateFilters = useSetAtom(updateFiltersAtom);
 
   const protocolOptions: readonly Option[] = filters.protocols.map(
@@ -137,16 +137,16 @@ export default function Filters() {
               as="span"
               flex="1"
               textAlign="right"
-              color="color2Text"
+              color="purple"
               marginRight="10px"
             >
               Filters
             </Box>
-            <HamburgerIcon color="color2Text" />
+            <HamburgerIcon color="purple" />
           </AccordionButton>
         </h2>
         <AccordionPanel pb={4} bg="highlight" overflow={'visible'}>
-          <Text color="light_grey" fontSize={'14px'} width="100%">
+          <Text color="purple" fontSize={'14px'} width="100%">
             Protocols:
           </Text>
           <Select
@@ -171,7 +171,7 @@ export default function Filters() {
 
           <Stack marginTop={'5px'} direction={{ base: 'column', md: 'row' }}>
             <Box width={{ base: '100%', md: '50%' }}>
-              <Text color="light_grey" fontSize={'14px'} width="100%">
+              <Text color="purple" fontSize={'14px'} width="100%">
                 Categories:
               </Text>
               <Select
@@ -191,7 +191,7 @@ export default function Filters() {
               />
             </Box>
             <Box width={{ base: '100%', md: '50%' }}>
-              <Text color="light_grey" fontSize={'14px'} width="100%">
+              <Text color="purple" fontSize={'14px'} width="100%">
                 Protocol types:
               </Text>
               <Select

src/components/Navbar.tsx

@@ -199,18 +199,23 @@ export default function Navbar(props: NavbarProps) {
     <Container
       width={'100%'}
       padding={'0'}
-      borderBottom={'1px solid var(--chakra-colors-color2)'}
       position={'fixed'}
-      bg="bg"
+      bg="black"
       zIndex={999}
       top="0"
     >
-      <Center bg="highlight" color="orange" padding={0}>
-        <Text fontSize="12px" textAlign={'center'} padding="0px 5px">
-          {''}
-          <b>Report bugs & share feedback in our Telegram group.</b>
-          {''}
-        </Text>
+      <Center bg="bg" color="gray" padding={0}>
+        <Link href={CONSTANTS.COMMUNITY_TG} target="_blank">
+          <Text
+            fontSize="12px"
+            textAlign={'center'}
+            padding="0px 5px"
+          >
+            {''}
+            <b>Report bugs & share feedback in our Telegram group.</b>
+            {''}
+          </Text>
+        </Link>
       </Center>
       <Box
         width={'100%'}