DO NOT MERGE: PR for preview purposes — Litepaper RC

components/Footer/index.tsx

@@ -23,8 +23,10 @@ const EtherScanLink: React.FC<{ href: string }> = ({ href, children }) => {
       {typeof children === "string" ? (
         <Text
           as="a"
+          target="_blank"
+          rel="noreferrer noopener"
           css={{
-            color: "$primary",
+            color: "$link",
             textDecoration: "none",
             "&:hover": {
               color: "$text",
@@ -115,34 +117,18 @@ const Footer = () => {
               },
             }}
           >
-            <EtherScanLink href="/">
+            <EtherScanLink href="https://etherscan.io/token/0xbf900809f4C73e5a3476eb183d8b06a27e61F8E5">
               $VNL ERC-20 Contract on Etherscan
             </EtherScanLink>
-            <EtherScanLink href="/">Vanilla Router on Etherscan</EtherScanLink>
-            <EtherScanLink href="/">VanillaDAO on Etherscan</EtherScanLink>
-          </Stack>
-          <Stack
-            css={{
-              flexDirection: "column",
-              textAlign: "right",
-              marginLeft: "auto",
-              alignSelf: "flex-start",
-              width: "50%",
-              order: 3,
-              "@md": {
-                order: 2,
-              },
-            }}
-          >
-            <RegularLink css={{ justifyContent: "flex-end" }} href="/">
-              Bug bounty
-            </RegularLink>
-            <RegularLink css={{ justifyContent: "flex-end" }} href="/">
-              Terms of Use
-            </RegularLink>
-            <RegularLink css={{ justifyContent: "flex-end" }} href="/">
-              Privacy Policy
-            </RegularLink>
+            <EtherScanLink href="https://etherscan.io/address/0x72C8B3aA6eD2fF68022691ecD21AEb1517CfAEa6">
+              Vanilla Router on Etherscan
+            </EtherScanLink>
+            <EtherScanLink href="https://etherscan.io/address/0xa135f339B5acd1f4eCB1C6eEd69a31482f878545">
+              VanillaDAO on Etherscan
+            </EtherScanLink>
+            <EtherScanLink href="https://vanilladefi.com">
+              Vanilla V1.1 Trading
+            </EtherScanLink>
           </Stack>
 
           <Stack
@@ -180,12 +166,7 @@ const Footer = () => {
               </Flex>
               Discord
             </RegularLink>
-            <RegularLink href="/" css={{ mr: "$3" }}>
-              <Flex color="text" css={{ mr: "$2" }}>
-                <Notebook size="24px" weight="fill" />
-              </Flex>
-              Blog
-            </RegularLink>
+
             <RegularLink href="https://t.me/vanilladefi" css={{ mr: "$3" }}>
               <Flex color="text" css={{ mr: "$2" }}>
                 <TelegramLogo size="24px" weight="fill" />

components/Navigation/index.tsx

@@ -5,9 +5,7 @@ import { ArrowUpRight, DotsThreeVertical, Moon, Sun, X } from "phosphor-react";
 import { useEffect, useState } from "react";
 import Box from "../Box";
 import Container from "../Container";
-import NavLink from "../NavLink";
 import Stack from "../Stack";
-import WalletButton from "../Wallet";
 
 const ThemeChanger = () => {
   const { theme, setTheme } = useTheme();
@@ -51,12 +49,14 @@ const DesktopNavigation = () => {
         display: "flex",
         color: "$text",
         borderBottom: "1px solid $extraMuted",
+        py: "$2",
       }}
     >
       <Container
         css={{
           display: "flex",
           alignItems: "center",
+          justifyContent: "space-between",
         }}
       >
         <Link href="/" passHref>
@@ -81,36 +81,11 @@ const DesktopNavigation = () => {
 
         <Stack
           css={{
-            alignItems: "center",
             mx: "$5",
-            flex: 1,
-            gap: "$8",
-            flexShrink: 0,
           }}
         >
-          <NavLink css={{ py: "$8" }} href="/">
-            Home
-          </NavLink>
-          <NavLink css={{ py: "$8" }} href="/stake">
-            stake
-          </NavLink>
-          <NavLink css={{ py: "$8" }} href="/invest">
-            Invest
-            <ArrowUpRight
-              weight="bold"
-              style={{ marginBottom: "3px", marginLeft: "5px" }}
-              size="15px"
-            />
-          </NavLink>
-          <NavLink css={{ py: "$8" }} href="/faq">
-            FAQ
-          </NavLink>
-          <NavLink css={{ py: "$8" }} href="/community">
-            Community
-          </NavLink>
           <ThemeChanger />
         </Stack>
-        <WalletButton css={{ marginLeft: "auto" }} />
       </Container>
     </Box>
   );
@@ -169,72 +144,7 @@ const MobileNavigation = () => {
           }}
         ></Stack>
         <ThemeChanger />
-        <Box
-          color="muted"
-          css={{
-            color: "$muted",
-            cursor: "pointer",
-            ml: "auto",
-            display: "flex",
-          }}
-          onClick={() => setIsOpen((curr) => !curr)}
-        >
-          {isOpen ? <X size="30px" /> : <DotsThreeVertical size="30px" />}
-        </Box>
       </Container>
-      <Box
-        css={{
-          display: isOpen ? "flex" : "none",
-          position: "absolute",
-          flexDirection: "column",
-          top: "calc(100% + 1px)",
-          left: 0,
-          right: 0,
-          zIndex: 999,
-          backgroundColor: "$backgroundA",
-          borderBottom: "1px solid $extraMuted",
-          backdropFilter: "blur(8px)",
-        }}
-      >
-        <Container
-          css={{
-            display: "flex",
-            flexDirection: "column",
-          }}
-        >
-          <Stack
-            css={{
-              flexDirection: "row",
-              justifyContent: "center",
-              alignItems: "center",
-              display: "flex",
-              flex: 1,
-              flexShrink: 0,
-              mb: "$2",
-            }}
-          >
-            <NavLink css={{ py: "$4" }} href="/stake">
-              Stake
-            </NavLink>
-            <NavLink css={{ py: "$4" }} href="/invest">
-              Invest
-              <ArrowUpRight
-                weight="bold"
-                style={{ marginBottom: "3px", marginLeft: "5px" }}
-                size="15px"
-              />
-            </NavLink>
-            <NavLink css={{ py: "$5", alignItems: "center" }} href="/faq">
-              FAQ
-            </NavLink>
-            <NavLink css={{ py: "$5", alignItems: "center" }} href="/community">
-              Community
-            </NavLink>
-          </Stack>
-
-          <WalletButton css={{ marginLeft: "auto", pb: "$3", width: "100%" }} />
-        </Container>
-      </Box>
     </Box>
   );
 };

pages/_app.tsx

@@ -12,14 +12,6 @@ import { darkTheme } from "../stitches.config";
 import "../styles/globals.css";
 import client from "../urql";
 
-const ActiveWallet = dynamic(
-  () => import("../components/Wallet/ActiveWallet"),
-  { ssr: false }
-);
-const WalletModal = dynamic(() => import("../components/Wallet/WalletModal"), {
-  ssr: false,
-});
-
 function MyApp({ Component, pageProps }: AppProps) {
   const router = useRouter();
   const origin = useOrigin();
@@ -30,6 +22,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         <meta charSet="utf-8" />
 
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+        <meta name="format-detection" content="telephone=no" />
         <meta property="og:url" content={`${origin}${router.asPath}`} />
         <meta
           property="og:title"
@@ -113,8 +106,6 @@ function MyApp({ Component, pageProps }: AppProps) {
           }}
         >
           <Box>
-            <WalletModal />
-            <ActiveWallet />
             <Navigation />
             <Component {...pageProps} />
             <Footer />