slice-so · jjranalli · Oct 28, 2022 · Oct 28, 2022 · Oct 29, 2022
diff --git a/.gitignore b/.gitignore
@@ -33,3 +33,5 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+.vscode
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,44 @@
+"use client" // TODO: To remove
+
+import { ThemeProvider } from "next-themes"
+import Head from "@components/common/Head"
+import { Background, Layout } from "@components/ui"
+import "../styles/global/styles.scss"
+import { AppWrapper } from "@components/ui/context"
+
+import { SessionProvider } from "next-auth/react"
+
+import { Rubik } from "@next/font/google"
+import WalletProvider from "@components/client/WalletProvider"
+
+const rubik = Rubik()
+
+export default function RootLayout({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={rubik.className}>
+      <Head />
+      <body>
+        <ThemeProvider
+          attribute="class"
+          storageKey="nightwind-mode"
+          defaultTheme="dark"
+        >
+          <WalletProvider>
+            <SessionProvider>
+              <AppWrapper>
+                <Layout>
+                  <Background />
+                  {children}
+                </Layout>
+              </AppWrapper>
+            </SessionProvider>
+          </WalletProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,5 @@
+import HomePage from "../components/client/Homepage"
+
+export default async function Page() {
+  return <HomePage />
+}
diff --git a/pages/index.tsx → components/client/Homepage.tsx b/pages/index.tsx → components/client/Homepage.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { NextSeo } from "next-seo"
 import { Container, DoubleText, Main } from "@components/ui"
 import {

diff --git a/components/client/WalletProvider.tsx b/components/client/WalletProvider.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit"
+import { alchemyProvider } from "wagmi/providers/alchemy"
+import { publicProvider } from "wagmi/providers/public"
+import { chain, createClient, configureChains, WagmiConfig } from "wagmi"
+import "@rainbow-me/rainbowkit/styles.css"
+
+const defaultChains = [chain[process.env.NEXT_PUBLIC_ENV]]
+
+const { chains, provider } = configureChains(defaultChains, [
+  alchemyProvider({ apiKey: process.env.NEXT_PUBLIC_ALCHEMY_ID }),
+  publicProvider()
+])
+
+const { connectors } = getDefaultWallets({
+  appName: "Merge to earn",
+  chains
+})
+
+const wagmiClient = createClient({
+  autoConnect: true,
+  connectors,
+  provider
+})
+
+export default function WalletProvider({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <WagmiConfig client={wagmiClient}>
+      <RainbowKitProvider
+        chains={chains}
+        coolMode
+        showRecentTransactions={true}
+      >
+        {children}
+      </RainbowKitProvider>
+    </WagmiConfig>
+  )
+}
diff --git a/components/common/Head.tsx b/components/common/Head.tsx
@@ -52,12 +52,6 @@ const Head: FC = () => {
         />
         <link rel="shortcut icon" href="/favicon/apple-touch-icon.png" />
         <link rel="manifest" href="/favicon/site.webmanifest" />
-        <Script
-          id="sa_event"
-          dangerouslySetInnerHTML={{
-            __html: `window.sa_event=window.sa_event||function(){var a=[].slice.call(arguments);window.sa_event.q?window.sa_event.q.push(a):window.sa_event.q=[a]};`
-          }}
-        />
       </NextHead>
     </>
   )

diff --git a/components/icons/Nightwind.tsx b/components/icons/Nightwind.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { useTheme } from "next-themes"
 import nightwind from "nightwind/helper"
 

diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx
@@ -36,7 +36,7 @@ const Button: FC<ButtonProps> = (props) => {
 
   return href ? (
     !external ? (
-      <Link href={href} passHref>
+      <Link href={href}>
         <button className={rootClassName}>{label}</button>
       </Link>
     ) : targetBlank ? (

diff --git a/components/ui/ConnectBlock/ConnectBlock.tsx b/components/ui/ConnectBlock/ConnectBlock.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { useAppContext } from "@components/ui/context"
 import { ConnectButton } from "@rainbow-me/rainbowkit"
 import saEvent from "@utils/saEvent"

diff --git a/components/ui/DoubleText/DoubleText.tsx b/components/ui/DoubleText/DoubleText.tsx
@@ -37,14 +37,13 @@ const DoubleText: FC<Props> = ({
           {logoText}
         </span>
       ) : (
-        <Link href="/">
-          <a
-            className={`${
-              inverted ? "text-white" : "text-black"
-            } relative z-10 !font-black ${size || "text-2xl md:text-3xl"}`}
-          >
-            {logoText}
-          </a>
+        <Link
+          href="/"
+          className={`${
+            inverted ? "text-white" : "text-black"
+          } relative z-10 !font-black ${size || "text-2xl md:text-3xl"}`}
+        >
+          {logoText}
         </Link>
       )}
       <span

diff --git a/components/ui/DropdownMenuElement/DropdownMenuElement.tsx b/components/ui/DropdownMenuElement/DropdownMenuElement.tsx
@@ -12,12 +12,10 @@ function DropdownMenuElement({ href, image, label, onClick }: Props) {
     <div onClick={onClick}>
       {href ? (
         <Link href={href}>
-          <a>
-            <div className="p-3 dark:text-white items-center rounded-md hover:bg-red-100 dark:hover:!bg-red-900 dark:hover:!text-red-100 hover:text-white flex">
-              <div className="ml-3">{image}</div>
-              <p className="ml-4 font-normal">{label}</p>
-            </div>
-          </a>
+          <div className="p-3 dark:text-white items-center rounded-md hover:bg-red-100 dark:hover:!bg-red-900 dark:hover:!text-red-100 hover:text-white flex">
+            <div className="ml-3">{image}</div>
+            <p className="ml-4 font-normal">{label}</p>
+          </div>
         </Link>
       ) : (
         <div className="p-3 dark:text-white items-center rounded-md hover:bg-red-50 dark:hover:!bg-red-900 dark:hover:!text-red-100 hover:text-red-600 flex cursor-pointer">

diff --git a/components/ui/ExpandItem/ExpandItem.tsx b/components/ui/ExpandItem/ExpandItem.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import Chevron from "@components/icons/Chevron"
 import { useState } from "react"
 

diff --git a/components/ui/FormSlicer/FormSlicer.tsx b/components/ui/FormSlicer/FormSlicer.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import Add from "@components/icons/Add"
 import { FormSlicerCurrencies, FormSlicerInput, Question } from "@components/ui"
 import { Dispatch, SetStateAction, useEffect } from "react"

diff --git a/components/ui/FormSlicerCurrencies/FormSlicerCurrencies.tsx b/components/ui/FormSlicerCurrencies/FormSlicerCurrencies.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import React, { Dispatch, SetStateAction } from "react"
 import Add from "@components/icons/Add"
 import FormSlicerCurrencyAddress from "../FormSlicerCurrencyAddress"

diff --git a/components/ui/FormSlicerCurrencyAddress/FormSlicerCurrencyAddress.tsx b/components/ui/FormSlicerCurrencyAddress/FormSlicerCurrencyAddress.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import Delete from "@components/icons/Delete"
 import { Dispatch, SetStateAction, useState } from "react"
 import InputAddress from "../InputAddress"

diff --git a/components/ui/FormSlicerInput/FormSlicerInput.tsx b/components/ui/FormSlicerInput/FormSlicerInput.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { Dispatch, SetStateAction, useState } from "react"
 import { Input } from "@components/ui"
 import Delete from "@components/icons/Delete"

diff --git a/components/ui/InputAddress/InputAddress.tsx b/components/ui/InputAddress/InputAddress.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import resolveEns from "utils/resolveEns"
 import React, {
   Dispatch,

diff --git a/components/ui/Main/Main.tsx b/components/ui/Main/Main.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import {
   Button,
   ConnectBlock,

diff --git a/components/ui/Navbar/Navbar.tsx b/components/ui/Navbar/Navbar.tsx
@@ -1,10 +1,12 @@
+"use client"
+
 import Link from "next/link"
 import Logo from "@components/icons/Logo"
 import Nightwind from "@components/icons/Nightwind"
 import { Container } from "@components/ui"
 import { ConnectButton } from "@rainbow-me/rainbowkit"
 import { useSession } from "next-auth/react"
-import Image from "next/future/image"
+import Image from "next/image"
 import Chevron from "@components/icons/Chevron"
 import dynamic from "next/dynamic"
 import { useState } from "react"
@@ -22,10 +24,8 @@ const Navbar = () => {
       <Container>
         <nav className="relative px-3 sm:px-6 h-[4.25rem] items-center mx-auto flex justify-between">
           <div className="flex items-center w-6 h-6">
-            <Link href="/">
-              <a aria-label="Merge to earn logo">
-                <Logo />
-              </a>
+            <Link href="/" aria-label="Merge to earn logo">
+              <Logo />
             </Link>
           </div>
           <div className="relative z-10 flex items-center space-x-4 sm:space-x-6">

diff --git a/components/ui/Question/Question.tsx b/components/ui/Question/Question.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { useState } from "react"
 import QuestionMark from "@components/icons/QuestionMark"
 

diff --git a/components/ui/context.tsx b/components/ui/context.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { createContext, useContext, useEffect, useState } from "react"
 import { View } from "@lib/content/modals"
 import { useAccount, useProvider } from "wagmi"

diff --git a/next.config.js b/next.config.js
@@ -1,5 +1,10 @@
 module.exports = {
-  swcMinify: true,
+  experimental: {
+    appDir: true,
+    fontLoaders: [
+      { loader: "@next/font/google", options: { subsets: ["latin"] } }
+    ]
+  },
   images: {
     remotePatterns: [
       {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -33,3 +33,5 @@ yarn-error.log*

		# vercel
		.vercel

		.vscode