clean updated strategy and pool cards, sync with new UI

strkfarm · Sep 5, 2024 · 57f31b5 · 57f31b5
1 parent 48fce4f
commit 57f31b5
Show file tree

Hide file tree

Showing 18 changed files with 159 additions and 120 deletions.
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/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
@@ -96,7 +96,10 @@ export default function Home() {
           marginBottom={'10px'}
           textAlign={'center'}
         >
-          <b className="theme-gradient-text">Starknet&apos;s Yield Powerhouse</b>🚀
+          <b className="theme-gradient-text">
+            Starknet&apos;s Yield Powerhouse
+          </b>
+          🚀
         </Text>
         <Text
           color="color2"

diff --git a/src/app/strategy/[strategyId]/_components/Strategy.tsx b/src/app/strategy/[strategyId]/_components/Strategy.tsx
@@ -103,7 +103,7 @@ const Strategy = ({ params }: StrategyParams) => {
           marginTop={'6px'}
           fontSize={{ base: '18px', md: '25px' }}
           fontWeight={'bold'}
-          color='white'
+          color="white"
         >
           {strategy ? strategy.name : 'Strategy Not found'}
         </Text>

diff --git a/src/app/strategy/[strategyId]/page.tsx b/src/app/strategy/[strategyId]/page.tsx
@@ -27,11 +27,7 @@ export async function generateMetadata({ params }: StrategyParams) {
 
 export default function StrategyPage({ params }: StrategyParams) {
   return (
-    <Container
-      maxWidth={'1000px'}
-      margin={'0 auto'}
-      padding="30px 10px"
-    >
+    <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,9 +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'
+import { Inter } from 'next/font/google';
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ['latin'] });
 
 mixpanel.init('118f29da6a372f0ccb6f541079cad56b');
 
@@ -47,7 +47,7 @@ const theme = extendTheme({
     cyan: '#7DFACB',
     bg: '#111119', // dark blue
     grey_text: '#B6B6B6',
-    yellow: '#EFDB72'
+    yellow: '#EFDB72',
   },
   fontSizes: {
     large: '50px',

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);
@@ -206,11 +204,7 @@ export default function Navbar(props: NavbarProps) {
     >
       <Center bg="bg" color="gray" padding={0}>
         <Link href={CONSTANTS.COMMUNITY_TG} target="_blank">
-          <Text
-            fontSize="12px"
-            textAlign={'center'}
-            padding="0px 5px"
-          >
+          <Text fontSize="12px" textAlign={'center'} padding="0px 5px">
             {''}
             <b>Report bugs & share feedback in our Telegram group.</b>
             {''}
@@ -334,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}

diff --git a/src/components/Pools.tsx b/src/components/Pools.tsx
@@ -62,6 +62,7 @@ export default function Pools() {
 
   function GetRiskLevel(poolName: string) {
     let color = '';
+    let bgColor = '';
     let count = 0;
     let tooltipLabel = '';
     const checkToken = (tokens: string[]) => {
@@ -70,16 +71,19 @@ export default function Pools() {
     };
 
     if (checkToken(['eth', 'strk'])) {
-      color = '#FF9200';
+      color = 'rgba(255, 146, 0, 1)';
+      bgColor = 'rgba(255, 146, 0, 0.3)';
       count = 3;
       tooltipLabel = 'Medium risk';
     } else if (checkToken(['usdt', 'usdc'])) {
-      color = '#83F14D';
-      count = 5;
+      color = 'rgba(131, 241, 77, 1)';
+      bgColor = 'rgba(131, 241, 77, 0.3)';
+      count = 1;
       tooltipLabel = 'Low risk';
     } else {
-      color = '#FF2020';
-      count = 1;
+      color = 'rgba(255, 32, 32, 1)';
+      bgColor = 'rgba(255, 32, 32, 0.3)';
+      count = 5;
       tooltipLabel = 'High risk';
     }
 
@@ -119,7 +123,7 @@ export default function Pools() {
               </Box>
               <Box
                 position={'absolute'}
-                backgroundColor={color}
+                backgroundColor={bgColor}
                 opacity={0.3}
                 filter={'blur(30.549999237060547px)'}
                 right={{ base: '-50', md: '-37px' }}
@@ -202,7 +206,11 @@ export default function Pools() {
             }}
           >
             <PaginationContainer align="right" float={'right'} p={4}>
-              <PaginationPrevious marginRight="4px" bg="highlight" color="purple">
+              <PaginationPrevious
+                marginRight="4px"
+                bg="highlight"
+                color="purple"
+              >
                 <Text>{'<'}</Text>
               </PaginationPrevious>
               <PaginationPageGroup>
@@ -233,7 +241,10 @@ export default function Pools() {
                 direction={{ base: 'column', md: 'row' }}
                 width={{ base: '50%', md: '60%' }}
               >
-                <Heading width={{ base: '50%', md: '33%' }} size="md">
+                <Heading
+                  width={{ base: '50%', md: '33%' }}
+                  size={{ base: 'xs', md: 'md' }}
+                >
                   Pool
                 </Heading>
                 <Heading
@@ -251,7 +262,7 @@ export default function Pools() {
               >
                 <Heading
                   width={'100%'}
-                  size="md"
+                  size="xs"
                   textAlign={'right'}
                   display={{ base: 'block', md: 'none' }}
                 >
@@ -263,11 +274,11 @@ export default function Pools() {
                   textAlign={'center'}
                   display={{ base: 'none', md: 'block' }}
                 >
-                  SAFETY SCORE
+                  Risk
                 </Heading>
                 <Heading
                   width={{ base: '100%', md: '50%' }}
-                  size="sm"
+                  size={{ base: 'xs', md: 'md' }}
                   textAlign={'right'}
                 >
                   TVL($)