Merge branch 'master' into patch-1

src/Footer.tsx

@@ -0,0 +1,30 @@
+import { Image } from '@chakra-ui/image';
+import { Flex } from '@chakra-ui/layout';
+import { Link } from 'react-router-dom';
+
+export default function Footer() {
+  return (
+    <Flex
+      as="footer"
+      w="100%"
+      p="12"
+      borderTop="1px solid"
+      borderTopColor="gray.900"
+      justifyContent="space-between"
+    >
+      <Image src="snx.png" />
+
+      <Flex gap="4">
+        <Link to="https://discord.com/invite/AEdUHzt">
+          <Image src="discord.png" />
+        </Link>
+        <Link to="https://twitter.com/synthetix_io">
+          <Image src="twitter.png" />
+        </Link>
+        <Link to="https://github.com/synthetixio">
+          <Image src="github.png" />
+        </Link>
+      </Flex>
+    </Flex>
+  );
+}

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>
   );
 }

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 />
     </>
   );
 }

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,6 +54,7 @@ export default function Rules() {
           2.&nbsp;
           <Text color="gray.500" fontWeight={'bold'}>
             Swap sUSD in the{' '}
+                  <Link to="https://synthetix-markets-prototype.vercel.app/spot/markets/ETH">
             <Text
               display="inline"
               bg="linear-gradient(73.6deg, #34EDB3 2.11%, #00D1FF 100%)"
@@ -60,6 +63,7 @@ export default function Rules() {
             >
               Spot Market
             </Text>{' '}
+            </Link>
             if you'd like to trade with coin margin
           </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">
@@ -211,7 +219,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>
@@ -269,13 +277,17 @@ export default function Rules() {
               Bounties/Bugs/Feedback
             </Text>
             <Text>
-              For contracts, the Synthetix Immunify program applies, with a
+              For contracts, the     <Link
+                to="https://immunefi.com/bounty/synthetix/"
+                style={{ textDecoration: 'underline' }}
+              >Synthetix Immunify</Link> program applies, with a
               discount of 90%. For frontends, discuss with respective integrator. For
               keepers, there are no bounties.
             </Text>
           </Flex>
         </Flex>
       </Flex>
-    </>
+      <Footer />
+    </Box>
   );
 }

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 />,
   },
   {

vercel.json

@@ -0,0 +1,3 @@
+{
+  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
+}