From a19faf26f6b3c536b04020900da74015b1a74bb0 Mon Sep 17 00:00:00 2001
From: Austin Quinn <sdkay@sdkay.pw>
Date: Fri, 3 Feb 2023 12:14:31 -0600
Subject: [PATCH] Next mig start point

---
 next.config.js                       |   5 +
 package.json                         |   8 +-
 {src/static => public}/dyad-logo.svg |   0
 {src/static => public}/dyad.jpg      | Bin
 src/components/Leaderboard.jsx       |  33 ++++---
 src/components/LoadingCore.jsx       |   2 +-
 src/components/LoadingInplace.jsx    |   2 +-
 src/components/Menu.jsx              |   8 +-
 src/components/Navbar.jsx            |  27 ++++--
 src/components/NavbarLogo.jsx        |  12 ++-
 src/components/Pagination.jsx        |   1 +
 src/components/ProgressBar.jsx       |   4 +-
 src/components/Skeletion.jsx         |  22 ++---
 src/hooks/useAvgMintedFromIndexer.js |   2 +-
 src/hooks/useMinXpFromIndexer.js     |   2 +-
 src/hooks/useNftSyncSimulation.js    |   8 +-
 src/pages/_app.jsx                   |  20 ++++
 src/pages/_document.jsx              |  29 ++++++
 src/pages/index.jsx                  |  41 +++++++++
 src/pages/leaderboard.jsx            |  41 +++++++++
 src/utils/supabase.js                |   4 +-
 src/utils/wagmi-config.js            |   2 +-
 yarn.lock                            | 133 +++++++++++++++++++++++++++
 23 files changed, 350 insertions(+), 56 deletions(-)
 create mode 100644 next.config.js
 rename {src/static => public}/dyad-logo.svg (100%)
 rename {src/static => public}/dyad.jpg (100%)
 create mode 100644 src/pages/_app.jsx
 create mode 100644 src/pages/_document.jsx
 create mode 100644 src/pages/index.jsx
 create mode 100644 src/pages/leaderboard.jsx

diff --git a/next.config.js b/next.config.js
new file mode 100644
index 0000000..ffdd99a
--- /dev/null
+++ b/next.config.js
@@ -0,0 +1,5 @@
+const nextConfig = {
+  /* config options here */
+};
+
+module.exports = nextConfig;
diff --git a/package.json b/package.json
index 25aa74c..7c70e1e 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "ethers": "^5.7.0",
     "framer-motion": "^7.2.1",
     "lodash": "^4.17.21",
+    "next": "^13.1.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
@@ -30,10 +31,9 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
   },
   "eslintConfig": {
     "extends": [
diff --git a/src/static/dyad-logo.svg b/public/dyad-logo.svg
similarity index 100%
rename from src/static/dyad-logo.svg
rename to public/dyad-logo.svg
diff --git a/src/static/dyad.jpg b/public/dyad.jpg
similarity index 100%
rename from src/static/dyad.jpg
rename to public/dyad.jpg
diff --git a/src/components/Leaderboard.jsx b/src/components/Leaderboard.jsx
index 5fb3f08..f22310d 100644
--- a/src/components/Leaderboard.jsx
+++ b/src/components/Leaderboard.jsx
@@ -65,20 +65,25 @@ export default function Leaderboard() {
               </div>
             )}
             <table className="leaderboard">
-              {nfts.length > 0 && (
-                <TableHeader sortBy={sortBy} setSortBy={setSortBy} />
-              )}
-              {nfts.map((nft) => {
-                return (
-                  <Row
-                    nft={nft}
-                    ensName={nft.ensName}
-                    version={lastSyncVersion}
-                    ownerAddress={nft.owner}
-                    refetch={refetch}
-                  />
-                );
-              })}
+              <thead>
+                {nfts.length > 0 && (
+                  <TableHeader sortBy={sortBy} setSortBy={setSortBy} />
+                )}
+              </thead>
+              <tbody>
+                {nfts.map((nft) => {
+                  return (
+                    <Row
+                      key={`leaderboardnft-${nft.tokenId}`}
+                      nft={nft}
+                      ensName={nft.ensName}
+                      version={lastSyncVersion}
+                      ownerAddress={nft.owner}
+                      refetch={refetch}
+                    />
+                  );
+                })}
+              </tbody>
             </table>
             {count > DEFAULT_ROWS_PER_PAGE && (
               <Footer
diff --git a/src/components/LoadingCore.jsx b/src/components/LoadingCore.jsx
index 87cd565..949341d 100644
--- a/src/components/LoadingCore.jsx
+++ b/src/components/LoadingCore.jsx
@@ -8,7 +8,7 @@ export default function LoadingCore({
       {isLoading && (
         <svg
           aria-hidden="true"
-          class={`${
+          className={`${
             style ? style : "mr-2 w-[7rem] mt-3 mb-4 h-20"
           } text-gray-200 animate-spin dark:text-gray-600`}
           viewBox="0 0 100 101"
diff --git a/src/components/LoadingInplace.jsx b/src/components/LoadingInplace.jsx
index 7a704ee..2279de2 100644
--- a/src/components/LoadingInplace.jsx
+++ b/src/components/LoadingInplace.jsx
@@ -8,7 +8,7 @@ export default function LoadingInplace({ isLoading, style }) {
         <div className="loader2">
           <div role="status">
             <LoadingCore style={style} isLoading />
-            <span class="sr-only">Loading...</span>
+            <span className="sr-only">Loading...</span>
           </div>
         </div>
       )}
diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx
index ed2f9f9..e4710db 100644
--- a/src/components/Menu.jsx
+++ b/src/components/Menu.jsx
@@ -1,11 +1,11 @@
 import { MenuOutlined } from "@ant-design/icons";
 import { Button, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
+import { useRouter } from "next/router";
 import React from "react";
-import { useNavigate } from "react-router-dom";
 import { DOCS_URL } from "../consts/consts";
 
 export default function MenuCustom() {
-  const navigate = useNavigate();
+  const router = useRouter();
 
   const MENU_ITEM_STYLE = {
     backgroundColor: "black",
@@ -17,12 +17,12 @@ export default function MenuCustom() {
         <MenuOutlined style={{ height: "1.5rem" }} />
       </MenuButton>
       <MenuList style={{ backgroundColor: "black" }}>
-        <MenuItem style={MENU_ITEM_STYLE} onClick={() => navigate("/")}>
+        <MenuItem style={MENU_ITEM_STYLE} onClick={() => router.push("/")}>
           Home
         </MenuItem>
         <MenuItem
           style={MENU_ITEM_STYLE}
-          onClick={() => navigate("/leaderboard")}
+          onClick={() => router.push("/leaderboard")}
         >
           Leaderboard
         </MenuItem>
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 3f2d2e9..7cddb59 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -28,18 +28,33 @@ export default function Navbar() {
         borderBottom: "0.02rem solid #1f2937",
       }}
     >
-      <div className="flex md:gap-16 items-center justiy-center cursor-pointer">
+      <div className="flex items-center cursor-pointer md:gap-16 justiy-center">
         <Logo />
         {isSafetyModeActivated && <SafetyModeWarning />}
       </div>
-      <div className="gap-2 flex items-center justify-center">
+      <div
+        className="flex items-center justify-center gap-2"
+        suppressHydrationWarning
+      >
         {isConnected && (
-          <div className="hidden lg:flex gap-8 items-center justify-center mr-6">
-            <Stat name="TVL" value={formatUSD(ethInPool * ethPrice)} />
+          <div className="items-center justify-center hidden gap-8 mr-6 lg:flex">
+            <Stat
+              name="TVL"
+              value={formatUSD(ethInPool * ethPrice)}
+              suppressHydrationWarning
+            />
             <Divider />
-            <Stat name="ETH Price Δ" value={formatUSD(ethDelta)} />
+            <Stat
+              name="ETH Price Δ"
+              value={formatUSD(ethDelta)}
+              suppressHydrationWarning
+            />
             <Divider />
-            <Stat name="CR" value={`${round(cr, 0)}%`} />
+            <Stat
+              name="CR"
+              value={`${round(cr, 0)}%`}
+              suppressHydrationWarning
+            />
             <Divider />
           </div>
         )}
diff --git a/src/components/NavbarLogo.jsx b/src/components/NavbarLogo.jsx
index 90f7a0a..787c0f5 100644
--- a/src/components/NavbarLogo.jsx
+++ b/src/components/NavbarLogo.jsx
@@ -1,10 +1,14 @@
-import logo from "../static/dyad-logo.svg";
-import { useNavigate } from "react-router-dom";
+import { useRouter } from "next/router";
 
 export default function NavbarLogo() {
-  let navigate = useNavigate();
+  let router = useRouter();
 
   return (
-    <img src={logo} alt="logo" className="w-14" onClick={() => navigate("/")} />
+    <img
+      src={"./dyad-logo.svg"}
+      alt={"logo"}
+      className="w-14"
+      onClick={() => router.push("/")}
+    />
   );
 }
diff --git a/src/components/Pagination.jsx b/src/components/Pagination.jsx
index 1fb0be5..73bfd88 100644
--- a/src/components/Pagination.jsx
+++ b/src/components/Pagination.jsx
@@ -12,6 +12,7 @@ export default function CustomPagination({ totalRows, rowsPerPage, setRange }) {
   function renderPage(i) {
     return (
       <div
+        key={`pagination-${i}`}
         className={`${
           i !== "..." &&
           "border-[1px] border-white pl-1 pr-1 hover:cursor-pointer"
diff --git a/src/components/ProgressBar.jsx b/src/components/ProgressBar.jsx
index 5039481..893f128 100644
--- a/src/components/ProgressBar.jsx
+++ b/src/components/ProgressBar.jsx
@@ -25,7 +25,7 @@ export default function ProgressBar({ percent, fullWidth = false }) {
       {colors && (
         <div
           data-tip={`${round(percent, 2)}%` || "0%"}
-          class={`w-[6rem] border-2 border-[#737E76]  min-w-[${
+          className={`w-[6rem] border-2 border-[#737E76]  min-w-[${
             fullWidth ? "100%" : "6rem"
           }] max-w-[6rem] pr-[2px]`}
           style={{
@@ -38,7 +38,7 @@ export default function ProgressBar({ percent, fullWidth = false }) {
               width: `${isNaN(percent) ? 0 : percent > 100 ? 100 : percent}%`,
               backgroundColor: colors[0],
             }}
-            class={`stripes m-[1px] h-[0.5rem] `}
+            className={`stripes m-[1px] h-[0.5rem] `}
           ></div>
         </div>
       )}
diff --git a/src/components/Skeletion.jsx b/src/components/Skeletion.jsx
index 5837495..64f5935 100644
--- a/src/components/Skeletion.jsx
+++ b/src/components/Skeletion.jsx
@@ -2,11 +2,11 @@ export default function Skeleton() {
   return (
     <div
       role="status"
-      class="md:w-[70rem] space-y-8 animate-pulse md:space-y-0 md:space-x-8 md:flex md:items-center"
+      className="md:w-[70rem] space-y-8 animate-pulse md:space-y-0 md:space-x-8 md:flex md:items-center"
     >
-      <div class="flex justify-center items-center w-20 h-10 bg-gray-300 rounded sm:w-20 dark:bg-gray-700">
+      <div className="flex items-center justify-center w-20 h-10 bg-gray-300 rounded sm:w-20 dark:bg-gray-700">
         <svg
-          class="w-8 h-8 text-gray-200"
+          className="w-8 h-8 text-gray-200"
           xmlns="http://www.w3.org/2000/svg"
           aria-hidden="true"
           fill="currentColor"
@@ -15,15 +15,15 @@ export default function Skeleton() {
           <path d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z" />
         </svg>
       </div>
-      <div class="w-full">
-        <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
-        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[480px] mb-2.5"></div>
-        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
-        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[440px] mb-2.5"></div>
-        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[460px] mb-2.5"></div>
-        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
+      <div className="w-full">
+        <div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
+        <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[480px] mb-2.5"></div>
+        <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
+        <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[440px] mb-2.5"></div>
+        <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[460px] mb-2.5"></div>
+        <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
       </div>
-      <span class="sr-only">Loading...</span>
+      <span className="sr-only">Loading...</span>
     </div>
   );
 }
diff --git a/src/hooks/useAvgMintedFromIndexer.js b/src/hooks/useAvgMintedFromIndexer.js
index 5780154..ea02906 100644
--- a/src/hooks/useAvgMintedFromIndexer.js
+++ b/src/hooks/useAvgMintedFromIndexer.js
@@ -15,7 +15,7 @@ export default function useAvgMintedFromIndexer() {
       .eq("version_id", lastSyncVersion)
       .then((res) => {
         let minted = [];
-        res.data.forEach((nft) => {
+        res?.data?.forEach((nft) => {
           minted.push(parseInt(nft.deposit) + parseInt(nft.withdrawn));
         });
         setAvgMinted(minted.reduce((a, b) => a + b, 0) / minted.length);
diff --git a/src/hooks/useMinXpFromIndexer.js b/src/hooks/useMinXpFromIndexer.js
index 3fae77d..51eb03d 100644
--- a/src/hooks/useMinXpFromIndexer.js
+++ b/src/hooks/useMinXpFromIndexer.js
@@ -18,7 +18,7 @@ export default function useXpMinFromIndexer() {
       })
       .limit(1)
       .then((res) => {
-        setMinXp(res.data[0].xp);
+        setMinXp(res?.data?.[0]?.xp);
       });
   }, [lastSyncVersion]);
 
diff --git a/src/hooks/useNftSyncSimulation.js b/src/hooks/useNftSyncSimulation.js
index 9909c9b..c4e59bb 100644
--- a/src/hooks/useNftSyncSimulation.js
+++ b/src/hooks/useNftSyncSimulation.js
@@ -7,11 +7,11 @@ import dnftABI from "../abi/dNFT.json";
 import { CONTRACT_POOL, CONTRACT_dNFT } from "../consts/contract";
 import { useAccount } from "wagmi";
 
-const TENDERLY_FORK_API = `https://api.tenderly.co/api/v1/account/${process.env.REACT_APP_TENDERLY_USER}/project/${process.env.REACT_APP_TENDERLY_PROJECT}/fork`;
+const TENDERLY_FORK_API = `https://api.tenderly.co/api/v1/account/${process.env.NEXT_PUBLIC_TENDERLY_USER}/project/${process.env.NEXT_PUBLIC_TENDERLY_PROJECT}/fork`;
 
 const opts = {
   headers: {
-    "X-Access-Key": process.env.REACT_APP_TENDERLY_ACCESS_KEY,
+    "X-Access-Key": process.env.NEXT_PUBLIC_TENDERLY_ACCESS_KEY,
   },
 };
 
@@ -27,7 +27,7 @@ export default function useNftSyncSimulation(tokenId) {
 
       setIsLoading(true);
       const gp = new ethers.providers.JsonRpcProvider(
-        `https://${CURRENT_NETWORK}.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}`
+        `https://${CURRENT_NETWORK}.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_KEY}`
       );
       const blockNumber = await gp.getBlockNumber();
       const body = {
@@ -69,7 +69,7 @@ export default function useNftSyncSimulation(tokenId) {
       setNftAfterSimulation(res);
       setIsLoading(false);
 
-      const TENDERLY_FORK_ACCESS_URL = `https://api.tenderly.co/api/v1/account/${process.env.REACT_APP_TENDERLY_USER}/project/${process.env.REACT_APP_TENDERLY_PROJECT}/fork/${forkId}`;
+      const TENDERLY_FORK_ACCESS_URL = `https://api.tenderly.co/api/v1/account/${process.env.NEXT_PUBLIC_TENDERLY_USER}/project/${process.env.NEXT_PUBLIC_TENDERLY_PROJECT}/fork/${forkId}`;
       await axios.delete(TENDERLY_FORK_ACCESS_URL, opts);
     }
     updateXP();
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
new file mode 100644
index 0000000..318befb
--- /dev/null
+++ b/src/pages/_app.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { client, chains } from "../utils/wagmi-config";
+import { ChakraProvider } from "@chakra-ui/react";
+import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import { WagmiConfig } from "wagmi";
+import "../App.css";
+import "../index.css";
+import "@rainbow-me/rainbowkit/styles.css";
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <ChakraProvider>
+      <WagmiConfig client={client}>
+        <RainbowKitProvider chains={chains}>
+          <Component {...pageProps} />
+        </RainbowKitProvider>
+      </WagmiConfig>
+    </ChakraProvider>
+  );
+}
diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx
new file mode 100644
index 0000000..2e2dc23
--- /dev/null
+++ b/src/pages/_document.jsx
@@ -0,0 +1,29 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head>
+          <link rel="preconnect" href="https://fonts.googleapis.com" />
+          <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap"
+            rel="stylesheet"
+          />
+        </Head>
+        <body className={"antialiased"} id={"modalBody"}>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
new file mode 100644
index 0000000..102f15a
--- /dev/null
+++ b/src/pages/index.jsx
@@ -0,0 +1,41 @@
+import Home from "../components/Home";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import { CURRENT_NETWORK } from "../consts/consts";
+import Button from "../components/Button";
+import { useAccount, useNetwork, useSwitchNetwork } from "wagmi";
+
+export default function App() {
+  const { isConnected } = useAccount();
+  const { chain } = useNetwork();
+  const { switchNetwork } = useSwitchNetwork();
+
+  return (
+    <>
+      <div className="font-serif font-bold text-white page-container content-wrap">
+        <Navbar />
+        {isConnected ? (
+          <>
+            {chain.id === CURRENT_NETWORK.id ? (
+              <div className="flex flex-col ">
+                <Home />
+              </div>
+            ) : (
+              <div className="flex justify-center gap-2 mt-10">
+                Please switch to the {CURRENT_NETWORK.name} Network!
+                <Button onClick={() => switchNetwork(CURRENT_NETWORK.id)}>
+                  Switch
+                </Button>
+              </div>
+            )}
+          </>
+        ) : (
+          <div className="flex justify-center mt-10">Connect your wallet!</div>
+        )}
+        <div className="footer">
+          <Footer />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/pages/leaderboard.jsx b/src/pages/leaderboard.jsx
new file mode 100644
index 0000000..75e9b2f
--- /dev/null
+++ b/src/pages/leaderboard.jsx
@@ -0,0 +1,41 @@
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import Leaderboard from "../components/Leaderboard";
+import { CURRENT_NETWORK } from "../consts/consts";
+import Button from "../components/Button";
+import { useAccount, useNetwork, useSwitchNetwork } from "wagmi";
+
+export default function App() {
+  const { isConnected } = useAccount();
+  const { chain } = useNetwork();
+  const { switchNetwork } = useSwitchNetwork();
+
+  return (
+    <>
+      <div className="font-serif font-bold text-white page-container content-wrap">
+        <Navbar />
+        {isConnected ? (
+          <>
+            {chain.id === CURRENT_NETWORK.id ? (
+              <div className="flex flex-col ">
+                <Leaderboard />
+              </div>
+            ) : (
+              <div className="flex justify-center gap-2 mt-10">
+                Please switch to the {CURRENT_NETWORK.name} Network!
+                <Button onClick={() => switchNetwork(CURRENT_NETWORK.id)}>
+                  Switch
+                </Button>
+              </div>
+            )}
+          </>
+        ) : (
+          <div className="flex justify-center mt-10">Connect your wallet!</div>
+        )}
+        <div className="footer">
+          <Footer />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/utils/supabase.js b/src/utils/supabase.js
index f79c1b9..6497556 100644
--- a/src/utils/supabase.js
+++ b/src/utils/supabase.js
@@ -1,6 +1,6 @@
 import { createClient } from "@supabase/supabase-js";
 
-const supabaseUrl = process.env.REACT_APP_SUPABASE_URL;
-const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY;
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
 
 export const supabase = createClient(supabaseUrl, supabaseAnonKey);
diff --git a/src/utils/wagmi-config.js b/src/utils/wagmi-config.js
index 088d48c..ab20609 100644
--- a/src/utils/wagmi-config.js
+++ b/src/utils/wagmi-config.js
@@ -13,7 +13,7 @@ import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";
 export const { chains, provider, webSocketProvider } = configureChains(
   // [chain.mainnet, chain.polygon, chain.rinkeby, chain.goerli],
   [chain.mainnet, chain.goerli],
-  [infuraProvider({ apiKey: process.env.REACT_APP_INFURA_KEY })]
+  [infuraProvider({ apiKey: process.env.NEXT_PUBLIC_INFURA_KEY })]
 );
 
 const { connectors } = getDefaultWallets({
diff --git a/yarn.lock b/yarn.lock
index cc28881..74cae6e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2925,6 +2925,76 @@
     hey-listen "^1.0.8"
     tslib "^2.3.1"
 
+"@next/env@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.1.6.tgz#c4925609f16142ded1a5cb833359ab17359b7a93"
+  integrity sha512-s+W9Fdqh5MFk6ECrbnVmmAOwxKQuhGMT7xXHrkYIBMBcTiOqNWhv5KbJIboKR5STXxNXl32hllnvKaffzFaWQg==
+
+"@next/swc-android-arm-eabi@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.1.6.tgz#d766dfc10e27814d947b20f052067c239913dbcc"
+  integrity sha512-F3/6Z8LH/pGlPzR1AcjPFxx35mPqjE5xZcf+IL+KgbW9tMkp7CYi1y7qKrEWU7W4AumxX/8OINnDQWLiwLasLQ==
+
+"@next/swc-android-arm64@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-13.1.6.tgz#f37a98d5f18927d8c9970d750d516ac779465176"
+  integrity sha512-cMwQjnB8vrYkWyK/H0Rf2c2pKIH4RGjpKUDvbjVAit6SbwPDpmaijLio0LWFV3/tOnY6kvzbL62lndVA0mkYpw==
+
+"@next/swc-darwin-arm64@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.1.6.tgz#ec1b90fd9bf809d8b81004c5182e254dced4ad96"
+  integrity sha512-KKRQH4DDE4kONXCvFMNBZGDb499Hs+xcFAwvj+rfSUssIDrZOlyfJNy55rH5t2Qxed1e4K80KEJgsxKQN1/fyw==
+
+"@next/swc-darwin-x64@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.1.6.tgz#e869ac75d16995eee733a7d1550322d9051c1eb4"
+  integrity sha512-/uOky5PaZDoaU99ohjtNcDTJ6ks/gZ5ykTQDvNZDjIoCxFe3+t06bxsTPY6tAO6uEAw5f6vVFX5H5KLwhrkZCA==
+
+"@next/swc-freebsd-x64@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.1.6.tgz#84a7b2e423a2904afc2edca21c2f1ba6b53fa4c1"
+  integrity sha512-qaEALZeV7to6weSXk3Br80wtFQ7cFTpos/q+m9XVRFggu+8Ib895XhMWdJBzew6aaOcMvYR6KQ6JmHA2/eMzWw==
+
+"@next/swc-linux-arm-gnueabihf@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.1.6.tgz#980eed1f655ff8a72187d8a6ef9e73ac39d20d23"
+  integrity sha512-OybkbC58A1wJ+JrJSOjGDvZzrVEQA4sprJejGqMwiZyLqhr9Eo8FXF0y6HL+m1CPCpPhXEHz/2xKoYsl16kNqw==
+
+"@next/swc-linux-arm64-gnu@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.1.6.tgz#87a71db21cded3f7c63d1d19079845c59813c53d"
+  integrity sha512-yCH+yDr7/4FDuWv6+GiYrPI9kcTAO3y48UmaIbrKy8ZJpi7RehJe3vIBRUmLrLaNDH3rY1rwoHi471NvR5J5NQ==
+
+"@next/swc-linux-arm64-musl@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.1.6.tgz#c5aac8619331b9fd030603bbe2b36052011e11de"
+  integrity sha512-ECagB8LGX25P9Mrmlc7Q/TQBb9rGScxHbv/kLqqIWs2fIXy6Y/EiBBiM72NTwuXUFCNrWR4sjUPSooVBJJ3ESQ==
+
+"@next/swc-linux-x64-gnu@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.1.6.tgz#9513d36d540bbfea575576746736054c31aacdea"
+  integrity sha512-GT5w2mruk90V/I5g6ScuueE7fqj/d8Bui2qxdw6lFxmuTgMeol5rnzAv4uAoVQgClOUO/MULilzlODg9Ib3Y4Q==
+
+"@next/swc-linux-x64-musl@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.1.6.tgz#d61fc6884899f5957251f4ce3f522e34a2c479b7"
+  integrity sha512-keFD6KvwOPzmat4TCnlnuxJCQepPN+8j3Nw876FtULxo8005Y9Ghcl7ACcR8GoiKoddAq8gxNBrpjoxjQRHeAQ==
+
+"@next/swc-win32-arm64-msvc@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.1.6.tgz#fac2077a8ae9768e31444c9ae90807e64117cda7"
+  integrity sha512-OwertslIiGQluFvHyRDzBCIB07qJjqabAmINlXUYt7/sY7Q7QPE8xVi5beBxX/rxTGPIbtyIe3faBE6Z2KywhQ==
+
+"@next/swc-win32-ia32-msvc@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.1.6.tgz#498bc11c91b4c482a625bf4b978f98ae91111e46"
+  integrity sha512-g8zowiuP8FxUR9zslPmlju7qYbs2XBtTLVSxVikPtUDQedhcls39uKYLvOOd1JZg0ehyhopobRoH1q+MHlIN/w==
+
+"@next/swc-win32-x64-msvc@13.1.6":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.1.6.tgz#17ed919c723426b7d0ce1cd73d40ce3dcd342089"
+  integrity sha512-Ls2OL9hi3YlJKGNdKv8k3X/lLgc3VmLG3a/DeTkAd+lAituJp8ZHmRmm9f9SL84fT3CotlzcgbdaCDfFwFA6bA==
+
 "@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
   version "5.1.1-v1"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"
@@ -3361,6 +3431,13 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
+"@swc/helpers@0.4.14":
+  version "0.4.14"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74"
+  integrity sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==
+  dependencies:
+    tslib "^2.4.0"
+
 "@tanstack/query-core@4.24.4":
   version "4.24.4"
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.24.4.tgz#6fe78777286fdd805ac319c7c743df4935e18ee2"
@@ -5230,6 +5307,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001426, caniuse-lite@^1.0.30001449:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001449.tgz#a8d11f6a814c75c9ce9d851dc53eb1d1dfbcd657"
   integrity sha512-CPB+UL9XMT/Av+pJxCKGhdx+yg1hzplvFJQlJ2n68PyQGMz9L/E2zCyLdOL8uasbouTUgnPl+y0tccI/se+BEw==
 
+caniuse-lite@^1.0.30001406:
+  version "1.0.30001450"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001450.tgz#022225b91200589196b814b51b1bbe45144cf74f"
+  integrity sha512-qMBmvmQmFXaSxexkjjfMvD5rnDL0+m+dUMZKoDYsGG8iZN29RuYh9eRoMvKsT6uMAWlyUUGDEQGJJYjzCIO9ew==
+
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"
   resolved "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz"
@@ -5325,6 +5407,11 @@ clean-css@^5.2.2:
   dependencies:
     source-map "~0.6.0"
 
+client-only@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
 cliui@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz"
@@ -9287,6 +9374,31 @@ next-tick@^1.1.0:
   resolved "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz"
   integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
 
+next@^13.1.6:
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/next/-/next-13.1.6.tgz#054babe20b601f21f682f197063c9b0b32f1a27c"
+  integrity sha512-hHlbhKPj9pW+Cymvfzc15lvhaOZ54l+8sXDXJWm3OBNBzgrVj6hwGPmqqsXg40xO1Leq+kXpllzRPuncpC0Phw==
+  dependencies:
+    "@next/env" "13.1.6"
+    "@swc/helpers" "0.4.14"
+    caniuse-lite "^1.0.30001406"
+    postcss "8.4.14"
+    styled-jsx "5.1.1"
+  optionalDependencies:
+    "@next/swc-android-arm-eabi" "13.1.6"
+    "@next/swc-android-arm64" "13.1.6"
+    "@next/swc-darwin-arm64" "13.1.6"
+    "@next/swc-darwin-x64" "13.1.6"
+    "@next/swc-freebsd-x64" "13.1.6"
+    "@next/swc-linux-arm-gnueabihf" "13.1.6"
+    "@next/swc-linux-arm64-gnu" "13.1.6"
+    "@next/swc-linux-arm64-musl" "13.1.6"
+    "@next/swc-linux-x64-gnu" "13.1.6"
+    "@next/swc-linux-x64-musl" "13.1.6"
+    "@next/swc-win32-arm64-msvc" "13.1.6"
+    "@next/swc-win32-ia32-msvc" "13.1.6"
+    "@next/swc-win32-x64-msvc" "13.1.6"
+
 no-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz"
@@ -10256,6 +10368,15 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
+postcss@8.4.14:
+  version "8.4.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
+  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 postcss@^7.0.35:
   version "7.0.39"
   resolved "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz"
@@ -11975,6 +12096,13 @@ style-loader@^3.3.1:
   resolved "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz"
   integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
 
+styled-jsx@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f"
+  integrity sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==
+  dependencies:
+    client-only "0.0.1"
+
 stylehacks@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.1.tgz#7934a34eb59d7152149fa69d6e9e56f2fc34bcc9"
@@ -12272,6 +12400,11 @@ tslib@2.4.0, tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.1:
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
+tslib@^2.4.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
+  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz"