Merge pull request #40 from akiraonstarknet/sync-ui-colors

Sync UI colors + Pool/Strategy card new designs
strkfarm · Sep 5, 2024 · 22de6ed · 22de6ed
2 parents 02753dc + 57f31b5
commit 22de6ed
Show file tree

Hide file tree

Showing 27 changed files with 7,441 additions and 7,117 deletions.
diff --git a/.env.sample b/.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=
diff --git a/.husky/_/h b/.husky/_/h
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1 +1 @@
-yarn run lint:fix && yarn run format:fix
+yarn run lint:fix && yarn run format:fix
diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
     "react-device-detect": "2.2.3",
     "react-dom": "18",
     "react-hot-toast": "2.4.1",
+    "react-icons": "^5.3.0",
     "react-mixpanel": "1.0.5",
     "react-pro-sidebar": "1.1.0",
     "react-responsive-carousel": "3.2.23",

diff --git a/src/app/api/tnc/getUser/route.ts → src/app/api/tnc/getUser/[address]/route.ts b/src/app/api/tnc/getUser/route.ts → src/app/api/tnc/getUser/[address]/route.ts
@@ -3,8 +3,9 @@ import { NextResponse } from 'next/server';
 import { db } from '@/db';
 import { standariseAddress } from '@/utils';
 
-export async function POST(req: Request) {
-  const { address } = await req.json();
+export async function GET(_req: Request, context: any) {
+  const { params } = context;
+  const address = params.address;
 
   if (!address) {
     return NextResponse.json({

diff --git a/src/app/globals.css b/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;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -34,6 +34,7 @@ export default function RootLayout({
     <html lang="en">
       <head>
         <link rel="icon" href="/favicon.ico" />
+        <meta name="theme-color" content="#111119" />
       </head>
       <body>
         {children}

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -94,10 +94,12 @@ export default function Home() {
           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"
@@ -180,7 +182,7 @@ export default function Home() {
         <TabList>
           <Tab
             color="light_grey"
-            _selected={{ color: 'color2Text' }}
+            _selected={{ color: 'purple' }}
             onClick={() => {
               mixpanel.track('Strategies opened');
             }}
@@ -189,7 +191,7 @@ export default function Home() {
           </Tab>
           <Tab
             color="light_grey"
-            _selected={{ color: 'color2Text' }}
+            _selected={{ color: 'purple' }}
             onClick={() => {
               mixpanel.track('All pools clicked');
             }}
@@ -200,7 +202,7 @@ export default function Home() {
         <TabIndicator
           mt="-1.5px"
           height="2px"
-          bg="color2Text"
+          bg="purple"
           color="color1"
           borderRadius="1px"
         />

diff --git a/src/app/strategy/[strategyId]/_components/Strategy.tsx b/src/app/strategy/[strategyId]/_components/Strategy.tsx
@@ -101,9 +101,9 @@ const Strategy = ({ params }: StrategyParams) => {
         <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 @@ const Strategy = ({ params }: StrategyParams) => {
                   <TabList>
                     <Tab
                       color="light_grey"
-                      _selected={{ color: 'color2Text' }}
+                      _selected={{ color: 'purple' }}
                       onClick={() => {
                         // mixpanel.track('All pools clicked')
                       }}
@@ -229,7 +229,7 @@ const Strategy = ({ params }: StrategyParams) => {
                     </Tab>
                     <Tab
                       color="light_grey"
-                      _selected={{ color: 'color2Text' }}
+                      _selected={{ color: 'purple' }}
                       onClick={() => {
                         // mixpanel.track('Strategies opened')
                       }}
@@ -240,7 +240,7 @@ const Strategy = ({ params }: StrategyParams) => {
                   <TabIndicator
                     mt="-1.5px"
                     height="2px"
-                    bg="color2Text"
+                    bg="purple"
                     color="color1"
                     borderRadius="1px"
                   />

diff --git a/src/app/strategy/[strategyId]/page.tsx b/src/app/strategy/[strategyId]/page.tsx
@@ -27,12 +27,7 @@ export async function generateMetadata({ params }: StrategyParams) {
 
 export default function StrategyPage({ params }: StrategyParams) {
   return (
-    <Container
-      maxWidth={'1000px'}
-      margin={'0 auto'}
-      padding="30px 10px"
-      fontFamily={'sans-serif'}
-    >
+    <Container maxWidth={'1000px'} margin={'0 auto'} padding="30px 10px">
       <Strategy params={params} />
     </Container>
   );

diff --git a/src/app/strategy/layout.tsx b/src/app/strategy/layout.tsx
diff --git a/src/app/template.tsx b/src/app/template.tsx
@@ -20,6 +20,9 @@ import { Toaster } from 'react-hot-toast';
 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');
 
@@ -40,9 +43,11 @@ const theme = extendTheme({
     light_grey: '#9d9d9d',
     disabled_text: '#818181',
     disabled_bg: '#5f5f5f',
-    purple: '#2F2D5C',
+    purple: '#6e53dc',
     cyan: '#7DFACB',
     bg: '#111119', // dark blue
+    grey_text: '#B6B6B6',
+    yellow: '#EFDB72',
   },
   fontSizes: {
     large: '50px',
@@ -57,10 +62,16 @@ const theme = extendTheme({
     MenuItem: {
       bg: 'highlight',
     },
+    Badge: {
+      baseStyle: {
+        lineHeight: 'initial',
+        borderRadius: '4px',
+      },
+    },
   },
   fonts: {
-    heading: `'Courier New', Courier, monospace`,
-    body: `'Courier New', Courier, monospace`,
+    heading: inter.style.fontFamily,
+    body: inter.style.fontFamily,
   },
 });
 

diff --git a/src/assets/shield.svg b/src/assets/shield.svg
diff --git a/src/components/Filters.tsx b/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

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -159,9 +159,7 @@ export default function Navbar(props: NavbarProps) {
     (async () => {
       if (address) {
         try {
-          const { data } = await axios.post('/api/tnc/getUser', {
-            address,
-          });
+          const { data } = await axios.get(`/api/tnc/getUser/${address}`);
 
           if (data.success && data.user) {
             setReferralCode(data.user.referralCode);
@@ -204,14 +202,9 @@ export default function Navbar(props: NavbarProps) {
       zIndex={999}
       top="0"
     >
-      <Center bg="color2" color="black" padding={0}>
+      <Center bg="bg" color="gray" padding={0}>
         <Link href={CONSTANTS.COMMUNITY_TG} target="_blank">
-          <Text
-            fontSize="12px"
-            textAlign={'center'}
-            padding="0px 5px"
-            fontFamily={'serif'}
-          >
+          <Text fontSize="12px" textAlign={'center'} padding="0px 5px">
             {''}
             <b>Report bugs & share feedback in our Telegram group.</b>
             {''}
@@ -335,7 +328,10 @@ export default function Navbar(props: NavbarProps) {
                   {address ? (
                     <Center display="flex" alignItems="center" gap=".5rem">
                       <Image
-                        src={starkProfile?.profilePicture}
+                        src={
+                          starkProfile?.profilePicture ||
+                          'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQa5dG19ABS0ge6iFAgpsvE_ULDUa4fJyT7hg&s'
+                        }
                         alt="pfp"
                         width={30}
                         height={30}