update

cavalier-eth · Sep 22, 2023 · ab90420 · ab90420
1 parent 13e17f7
commit ab90420
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 151 deletions.
diff --git a/public/header.png b/public/header.png
diff --git a/src/App.tsx b/src/App.tsx
diff --git a/src/Footer.tsx b/src/Footer.tsx
@@ -0,0 +1,6 @@
+import { Flex } from '@chakra-ui/layout';
+
+export default function Footer() {
+  // Add simple version of footer
+  return <Flex as="footer"></Flex>;
+}
diff --git a/src/Header.tsx b/src/Header.tsx
@@ -1,21 +1,33 @@
-import { Button } from '@chakra-ui/button';
-import { Flex } from '@chakra-ui/layout';
+import { Image } from '@chakra-ui/image';
+import { Flex, Text } from '@chakra-ui/layout';
 import { Link, useLocation } from 'react-router-dom';
 
 export default function Header() {
   const location = useLocation();
   return (
-    <Flex justifyContent="center" my="4">
-      {location.pathname.includes('leaderboard') && (
-        <Link to="/rules">
-          <Button variant="outline">Rules</Button>
-        </Link>
-      )}
-      {location.pathname.includes('rules') && (
-        <Link to="/leaderboard">
-          <Button variant="outline">Leaderboard</Button>
-        </Link>
-      )}
+    <Flex gap="4" my="4" as="header" px="4">
+      <Link to="/">
+        <Image src="/header.png" cursor="pointer" />
+      </Link>
+      <Link to="/">
+        <Text
+          fontWeight={700}
+          color={location.pathname.length === 1 ? 'white' : 'gray.500'}
+        >
+          Rules
+        </Text>
+      </Link>
+
+      <Link to="/leaderboard">
+        <Text
+          fontWeight={700}
+          color={
+            location.pathname.includes('leaderboard') ? 'white' : 'gray.500'
+          }
+        >
+          Leaderboard
+        </Text>
+      </Link>
     </Flex>
   );
 }
diff --git a/src/Leaderboard.tsx b/src/Leaderboard.tsx
@@ -18,6 +18,7 @@ import { useMemo, useState } from 'react';
 import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
 import Header from './Header';
 import { isAddress } from 'ethers';
+import Footer from './Footer';
 
 export default function Leaderboard() {
   const { data, loading } = useGetLeaderboard();
@@ -207,6 +208,7 @@ export default function Leaderboard() {
           </Box>
         </Box>
       </Flex>
+      <Footer />
     </>
   );
 }
diff --git a/src/Rules.tsx b/src/Rules.tsx
@@ -1,10 +1,12 @@
-import { Button, Flex, Heading, Image, Text } from '@chakra-ui/react';
+import { Box, Button, Flex, Heading, Image, Text } from '@chakra-ui/react';
 import { Kwenta, Polynomial } from './SVGS';
 import Header from './Header';
+import { Link } from 'react-router-dom';
+import Footer from './Footer';
 
 export default function Rules() {
   return (
-    <>
+    <Box overflow="hidden" position="relative">
       <Header />
       <Image
         src="/header-image.png"
@@ -52,14 +54,16 @@ export default function Rules() {
           2.&nbsp;
           <Text color="gray.500" fontWeight={'bold'}>
             Use{' '}
-            <Text
-              display="inline"
-              bg="linear-gradient(73.6deg, #34EDB3 2.11%, #00D1FF 100%)"
-              backgroundClip="text"
-              text-fill-color="transparent"
-            >
-              Spot Tab
-            </Text>{' '}
+            <Link to="https://synthetix-markets-prototype.vercel.app/spot/markets/ETH">
+              <Text
+                display="inline"
+                bg="linear-gradient(73.6deg, #34EDB3 2.11%, #00D1FF 100%)"
+                backgroundClip="text"
+                text-fill-color="transparent"
+              >
+                Spot Tab
+              </Text>{' '}
+            </Link>
             to trade sUSD into other synths
           </Text>
         </Text>
@@ -71,64 +75,68 @@ export default function Rules() {
         </Text>
 
         <Flex gap="2">
-          <Flex
-            h="270px"
-            gap="5"
-            bg="navy.700"
-            flexDir="column"
-            p="4"
-            borderWidth="1px"
-            borderStyle="solid"
-            borderColor="gray.900"
-            rounded={'base'}
-          >
-            <Flex justifyContent="space-between">
-              <Kwenta />
-              <Text
-                fontSize="xs"
-                bg="gray.700"
-                rounded="base"
-                h="fit-content"
-                p="1"
-              >
-                Perps
+          <Link to="https://v3-perps.kwenta.io/market/?asset=sETH&accountType=cross_margin">
+            <Flex
+              h="270px"
+              gap="5"
+              bg="navy.700"
+              flexDir="column"
+              p="4"
+              borderWidth="1px"
+              borderStyle="solid"
+              borderColor="gray.900"
+              rounded={'base'}
+            >
+              <Flex justifyContent="space-between">
+                <Kwenta />
+                <Text
+                  fontSize="xs"
+                  bg="gray.700"
+                  rounded="base"
+                  h="fit-content"
+                  p="1"
+                >
+                  Perps
+                </Text>
+              </Flex>
+              <Heading>Kwenta</Heading>
+              <Text color="gray.500">
+                Trade crypto, forex, and commodities with up to 50x leverage and
+                deep liquidity.
               </Text>
             </Flex>
-            <Heading>Kwenta</Heading>
-            <Text color="gray.500">
-              Trade crypto, forex, and commodities with up to 50x leverage and
-              deep liquidity.
-            </Text>
-          </Flex>
-          <Flex
-            h="270px"
-            gap="5"
-            bg="navy.700"
-            flexDir="column"
-            p="4"
-            borderWidth="1px"
-            borderStyle="solid"
-            borderColor="gray.900"
-            rounded={'base'}
-          >
-            <Flex justifyContent="space-between">
-              <Polynomial />
-              <Text
-                fontSize="xs"
-                bg="gray.700"
-                rounded="base"
-                h="fit-content"
-                p="1"
-              >
-                Perps
+          </Link>
+          <Link to="https://trade.polynomial.finance/">
+            <Flex
+              h="270px"
+              gap="5"
+              bg="navy.700"
+              flexDir="column"
+              p="4"
+              borderWidth="1px"
+              borderStyle="solid"
+              borderColor="gray.900"
+              rounded={'base'}
+            >
+              <Flex justifyContent="space-between">
+                <Polynomial />
+                <Text
+                  fontSize="xs"
+                  bg="gray.700"
+                  rounded="base"
+                  h="fit-content"
+                  p="1"
+                >
+                  Perps
+                </Text>
+              </Flex>
+              <Heading>Polynomial</Heading>
+              <Text color="gray.500">
+                Trade perps with Polynomial's smart wallet to access up to 50x
+                leverage.
               </Text>
             </Flex>
-            <Heading>Polynomial</Heading>
-            <Text color="gray.500">
-              Trade perps with Polynomial's smart wallet to access up to 50x
-              leverage.
-            </Text>
-          </Flex>
+          </Link>
         </Flex>
 
         <Flex flexDir="column" my="16" gap="4">
@@ -212,7 +220,7 @@ export default function Rules() {
           rounded={'base'}
         >
           <Image src="/circle.png" w="300px" h="100%" />
-          <Flex flexDirection="column">
+          <Flex flexDirection="column" p="4">
             <Heading fontSize="36px" mb="2">
               Prizes
             </Heading>
@@ -270,13 +278,20 @@ export default function Rules() {
               Bounties/Bugs/Feedback
             </Text>
             <Text>
-              For contracts, using the Synthetix Immunify program scheme, with a
-              discount of 90% For frontends, talk to respective integrator For
-              keepers, no bounties
+              For contracts, using the{' '}
+              <Link
+                to="https://immunefi.com/bounty/synthetix/"
+                style={{ textDecoration: 'underline' }}
+              >
+                Synthetix Immunify
+              </Link>{' '}
+              program scheme, with a discount of 90% For frontends, talk to
+              respective integrator For keepers, no bounties
             </Text>
           </Flex>
         </Flex>
       </Flex>
-    </>
+      <Footer />
+    </Box>
   );
 }
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
 import { ChakraProvider, useColorMode } from '@chakra-ui/react';
 import { theme } from './theme.ts';
 import { Global } from '@emotion/react';
@@ -9,9 +8,8 @@ import Rules from './Rules.tsx';
 import Leaderboard from './Leaderboard.tsx';
 
 const router = createBrowserRouter([
-  { path: '/', element: <App /> },
   {
-    path: '/rules',
+    path: '/',
     element: <Rules />,
   },
   {

diff --git a/vercel.json b/vercel.json
@@ -0,0 +1,3 @@
+{
+  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
+}