feat: move to nextjs

impersonator-eth · May 6, 2024 · 032785a · 032785a
1 parent 602ae43
commit 032785a
Show file tree

Hide file tree

Showing 49 changed files with 9,929 additions and 8,487 deletions.
diff --git a/.env.sample b/.env.sample
@@ -1,5 +1,5 @@
-REACT_APP_INFURA_KEY=
-REACT_APP_WC_PROJECT_ID=
-REACT_APP_GITCOIN_GRANTS_ACTIVE=
-REACT_APP_GITCOIN_GRANTS_LINK=
-REACT_APP_DONATION_ADDRESS=
+NEXT_PUBLIC_INFURA_KEY=
+NEXT_PUBLIC_WC_PROJECT_ID=
+NEXT_PUBLIC_GITCOIN_GRANTS_ACTIVE=
+NEXT_PUBLIC_GITCOIN_GRANTS_LINK=
+NEXT_PUBLIC_DONATION_ADDRESS=
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,4 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-.env
-.vercel
 
 # dependencies
 /node_modules
@@ -10,17 +8,28 @@
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
 .vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v18.16.1
+v18.17.0
diff --git a/public/logo.png → app/icon.png b/public/logo.png → app/icon.png
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,17 @@
+import { IndexLayout as IndexLayoutC } from "@/components/layouts/IndexLayout";
+import { getMetadata } from "@/utils";
+
+export const metadata = getMetadata({
+  title: "Impersonator",
+  description:
+    "Impersonate any Ethereum Account and Login into DApps via WalletConnect, iframe or Extension!",
+  images: "https://www.impersonator.xyz/metaIMG.PNG",
+});
+
+export default function IndexLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <IndexLayoutC>{children}</IndexLayoutC>;
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,15 @@
+import Body from "@/components/Body";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
+
+const Home = () => {
+  return (
+    <div>
+      <Navbar />
+      <Body />
+      <Footer />
+    </div>
+  );
+};
+
+export default Home;
diff --git a/src/index.tsx → app/providers.tsx b/src/index.tsx → app/providers.tsx
@@ -1,7 +1,8 @@
+"use client";
+
 import "@rainbow-me/rainbowkit/styles.css";
 
-import ReactDOM from "react-dom";
-import App from "./App";
+import { CacheProvider } from "@chakra-ui/next-js";
 import { ChakraProvider } from "@chakra-ui/react";
 import {
   connectorsForWallets,
@@ -17,16 +18,16 @@ import { configureChains, createConfig, WagmiConfig } from "wagmi";
 import { mainnet, optimism, base, arbitrum } from "wagmi/chains";
 import { publicProvider } from "wagmi/providers/public";
 
-import theme from "./theme";
-import { SafeInjectProvider } from "./contexts/SafeInjectContext";
+import theme from "@/style/theme";
+import { SafeInjectProvider } from "@/contexts/SafeInjectContext";
 
 const { chains, publicClient } = configureChains(
   // the first chain is used by rainbowWallet to determine which chain to use
   [mainnet, optimism, base, arbitrum],
   [publicProvider()]
 );
 
-const projectId = process.env.REACT_APP_WC_PROJECT_ID!;
+const projectId = process.env.NEXT_PUBLIC_WC_PROJECT_ID!;
 const connectors = connectorsForWallets([
   {
     groupName: "Recommended",
@@ -44,19 +45,20 @@ export const wagmiConfig = createConfig({
   publicClient,
 });
 
-ReactDOM.render(
-  <ChakraProvider theme={theme}>
-    <WagmiConfig config={wagmiConfig}>
-      <RainbowKitProvider
-        chains={chains}
-        theme={darkTheme()}
-        modalSize={"compact"}
-      >
-        <SafeInjectProvider>
-          <App />
-        </SafeInjectProvider>
-      </RainbowKitProvider>
-    </WagmiConfig>
-  </ChakraProvider>,
-  document.getElementById("root")
-);
+export const Providers = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <CacheProvider>
+      <ChakraProvider theme={theme}>
+        <WagmiConfig config={wagmiConfig}>
+          <RainbowKitProvider
+            chains={chains}
+            theme={darkTheme()}
+            modalSize={"compact"}
+          >
+            <SafeInjectProvider>{children}</SafeInjectProvider>
+          </RainbowKitProvider>
+        </WagmiConfig>
+      </ChakraProvider>
+    </CacheProvider>
+  );
+};
diff --git a/components/Analytics.tsx b/components/Analytics.tsx
@@ -0,0 +1,26 @@
+import Script from "next/script";
+
+const GA_ID = "G-QFNMM9LXBY";
+
+export const Analytics = () => {
+  return (
+    <>
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
+      />
+      <Script
+        id="google-analytics"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', '${GA_ID}');
+  `,
+        }}
+      />
+    </>
+  );
+};
diff --git a/...s/Body/AddressInput/AddressBook/index.tsx → ...s/Body/AddressInput/AddressBook/index.tsx b/...s/Body/AddressInput/AddressBook/index.tsx → ...s/Body/AddressInput/AddressBook/index.tsx
diff --git a/src/components/Body/AddressInput/index.tsx → components/Body/AddressInput/index.tsx b/src/components/Body/AddressInput/index.tsx → components/Body/AddressInput/index.tsx
diff --git a/src/components/Body/BrowserExtensionTab.tsx → components/Body/BrowserExtensionTab.tsx b/src/components/Body/BrowserExtensionTab.tsx → components/Body/BrowserExtensionTab.tsx
diff --git a/src/components/Body/CopyToClipboard.tsx → components/Body/CopyToClipboard.tsx b/src/components/Body/CopyToClipboard.tsx → components/Body/CopyToClipboard.tsx
diff --git a/...nts/Body/IFrameConnectTab/AppUrlLabel.tsx → ...nts/Body/IFrameConnectTab/AppUrlLabel.tsx b/...nts/Body/IFrameConnectTab/AppUrlLabel.tsx → ...nts/Body/IFrameConnectTab/AppUrlLabel.tsx
diff --git a/...ents/Body/IFrameConnectTab/ShareModal.tsx → ...ents/Body/IFrameConnectTab/ShareModal.tsx b/...ents/Body/IFrameConnectTab/ShareModal.tsx → ...ents/Body/IFrameConnectTab/ShareModal.tsx
diff --git a/...ameConnectTab/SupportedDapps/DappTile.tsx → ...ameConnectTab/SupportedDapps/DappTile.tsx b/...ameConnectTab/SupportedDapps/DappTile.tsx → ...ameConnectTab/SupportedDapps/DappTile.tsx
diff --git a/...ConnectTab/SupportedDapps/DappsSearch.tsx → ...ConnectTab/SupportedDapps/DappsSearch.tsx b/...ConnectTab/SupportedDapps/DappsSearch.tsx → ...ConnectTab/SupportedDapps/DappsSearch.tsx
diff --git a/...IFrameConnectTab/SupportedDapps/index.tsx → ...IFrameConnectTab/SupportedDapps/index.tsx b/...IFrameConnectTab/SupportedDapps/index.tsx → ...IFrameConnectTab/SupportedDapps/index.tsx
diff --git a/...omponents/Body/IFrameConnectTab/index.tsx → components/Body/IFrameConnectTab/index.tsx b/...omponents/Body/IFrameConnectTab/index.tsx → components/Body/IFrameConnectTab/index.tsx
diff --git a/src/components/Body/NetworkInput.tsx → components/Body/NetworkInput.tsx b/src/components/Body/NetworkInput.tsx → components/Body/NetworkInput.tsx
diff --git a/src/components/Body/NotificationBar.tsx → components/Body/NotificationBar.tsx b/src/components/Body/NotificationBar.tsx → components/Body/NotificationBar.tsx
diff --git a/src/components/Body/Tab.tsx → components/Body/Tab.tsx b/src/components/Body/Tab.tsx → components/Body/Tab.tsx
diff --git a/src/components/Body/TabsSelect.tsx → components/Body/TabsSelect.tsx b/src/components/Body/TabsSelect.tsx → components/Body/TabsSelect.tsx
diff --git a/src/components/Body/TenderlySettings.tsx → components/Body/TenderlySettings.tsx b/src/components/Body/TenderlySettings.tsx → components/Body/TenderlySettings.tsx
diff --git a/src/components/Body/TransactionRequests.tsx → components/Body/TransactionRequests.tsx b/src/components/Body/TransactionRequests.tsx → components/Body/TransactionRequests.tsx
diff --git a/...dy/WalletConnectTab/ConnectionDetails.tsx → ...dy/WalletConnectTab/ConnectionDetails.tsx b/...dy/WalletConnectTab/ConnectionDetails.tsx → ...dy/WalletConnectTab/ConnectionDetails.tsx
diff --git a/...ponents/Body/WalletConnectTab/Loading.tsx → components/Body/WalletConnectTab/Loading.tsx b/...ponents/Body/WalletConnectTab/Loading.tsx → components/Body/WalletConnectTab/Loading.tsx
diff --git a/...onents/Body/WalletConnectTab/URIInput.tsx → ...onents/Body/WalletConnectTab/URIInput.tsx b/...onents/Body/WalletConnectTab/URIInput.tsx → ...onents/Body/WalletConnectTab/URIInput.tsx
diff --git a/...omponents/Body/WalletConnectTab/index.tsx → components/Body/WalletConnectTab/index.tsx b/...omponents/Body/WalletConnectTab/index.tsx → components/Body/WalletConnectTab/index.tsx
diff --git a/src/components/Body/index.tsx → components/Body/index.tsx b/src/components/Body/index.tsx → components/Body/index.tsx
@@ -1,12 +1,7 @@
+"use client";
+
 import { useState, useEffect } from "react";
-import {
-  Container,
-  useColorMode,
-  useToast,
-  Center,
-  Spacer,
-  Flex,
-} from "@chakra-ui/react";
+import { Container, useToast, Center, Spacer, Flex } from "@chakra-ui/react";
 
 import { SingleValue } from "chakra-react-select";
 // WC v2
@@ -37,7 +32,7 @@ const WCMetadata = {
 };
 
 const core = new Core({
-  projectId: process.env.REACT_APP_WC_PROJECT_ID,
+  projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID,
 });
 
 const primaryNetworkIds = [
@@ -70,8 +65,6 @@ const allNetworksOptions = [
 ];
 
 function Body() {
-  const { colorMode } = useColorMode();
-  const bgColor = { light: "white", dark: "gray.700" };
   const addressFromURL = new URLSearchParams(window.location.search).get(
     "address"
   );
@@ -143,7 +136,7 @@ function Body() {
 
     setProvider(
       new ethers.providers.JsonRpcProvider(
-        `https://mainnet.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}`
+        `https://mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_KEY}`
       )
     );
 

diff --git a/src/components/CustomConnectButton.tsx → components/CustomConnectButton.tsx b/src/components/CustomConnectButton.tsx → components/CustomConnectButton.tsx
diff --git a/src/components/Footer.tsx → components/Footer.tsx b/src/components/Footer.tsx → components/Footer.tsx
@@ -1,6 +1,7 @@
+"use client";
+
 import { useState } from "react";
 import {
-  useColorMode,
   Flex,
   VStack,
   Heading,
@@ -46,9 +47,6 @@ const Social = ({ icon, link }: { icon: IconProp; link: string }) => {
 };
 
 function Footer() {
-  const { colorMode } = useColorMode();
-  const underlineColor = { light: "gray.500", dark: "gray.400" };
-
   const { isConnected } = useAccount();
   const { chain } = useNetwork();
 
@@ -64,7 +62,7 @@ function Footer() {
   const handleDonate = async (value: string) => {
     try {
       await sendTransaction({
-        to: process.env.REACT_APP_DONATION_ADDRESS!,
+        to: process.env.NEXT_PUBLIC_DONATION_ADDRESS!,
         value: parseEther(value),
       });
       launchConfetti();
@@ -79,7 +77,7 @@ function Footer() {
   };
 
   return (
-    <Flex py="4" borderTop="2px" borderTopColor={underlineColor[colorMode]}>
+    <Flex py="4" borderTop="2px" borderTopColor={"gray.400"}>
       <Spacer flex="1" />
       {showConfetti && (
         <Box zIndex={9999} position={"fixed"} top={0} left={0}>
@@ -102,11 +100,11 @@ function Footer() {
           <Stack direction={{ base: "column", md: "row" }}>
             <Center>Found the project helpful?</Center>
             <HStack>
-              {process.env.REACT_APP_GITCOIN_GRANTS_ACTIVE === "true" ? (
+              {process.env.NEXT_PUBLIC_GITCOIN_GRANTS_ACTIVE === "true" ? (
                 <>
                   <Text>Support it on</Text>
                   <Link
-                    href={process.env.REACT_APP_GITCOIN_GRANTS_LINK}
+                    href={process.env.NEXT_PUBLIC_GITCOIN_GRANTS_LINK}
                     isExternal
                   >
                     <HStack fontWeight="bold" textDecor="underline">

diff --git a/src/components/Navbar.tsx → components/Navbar.tsx b/src/components/Navbar.tsx → components/Navbar.tsx
@@ -1,6 +1,5 @@
 import {
   Button,
-  useColorMode,
   Flex,
   Heading,
   Spacer,
@@ -10,20 +9,16 @@ import {
   Text,
   Image,
 } from "@chakra-ui/react";
-import { SunIcon, MoonIcon } from "@chakra-ui/icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
 
 function Navbar() {
-  const { colorMode } = useColorMode();
-  const underlineColor = { light: "gray.500", dark: "gray.400" };
-
   return (
     <Flex
       py="4"
       px={["2", "4", "10", "10"]}
       borderBottom="2px"
-      borderBottomColor={underlineColor[colorMode]}
+      borderBottomColor={"gray.400"}
     >
       <Spacer flex="1" />
       <Heading

diff --git a/components/layouts/IndexLayout.tsx b/components/layouts/IndexLayout.tsx
@@ -0,0 +1,30 @@
+import { Providers } from "@/app/providers";
+import { Analytics } from "@/components/Analytics";
+
+export const IndexLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <html lang="en">
+      {/* Farcaster Frame */}
+      <head>
+        <meta property="fc:frame" content="vNext" />
+        <meta
+          property="fc:frame:image"
+          content="https://frame.impersonator.xyz/impersonator.gif"
+        />
+        <meta
+          property="fc:frame:post_url"
+          content="https://frame.impersonator.xyz/api/frame"
+        />
+        <meta
+          property="fc:frame:input:text"
+          content="Type ENS or Address to impersonate..."
+        />
+        <meta property="fc:frame:button:1" content="🕵️ Start" />
+      </head>
+      <body>
+        <Analytics />
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+};
diff --git a/src/contexts/SafeInjectContext.tsx → contexts/SafeInjectContext.tsx b/src/contexts/SafeInjectContext.tsx → contexts/SafeInjectContext.tsx
diff --git a/src/helpers/communicator.ts → helpers/communicator.ts b/src/helpers/communicator.ts → helpers/communicator.ts
diff --git a/src/helpers/messageFormatter.ts → helpers/messageFormatter.ts b/src/helpers/messageFormatter.ts → helpers/messageFormatter.ts
diff --git a/src/helpers/utils.ts → helpers/utils.ts b/src/helpers/utils.ts → helpers/utils.ts
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,16 @@
+const nextConfig = {
+  reactStrictMode: true,
+  webpack: (config) => {
+    config.resolve.fallback = { fs: false, net: false, tls: false };
+    config.externals.push("pino-pretty");
+    return config;
+  },
+  compiler: {
+    styledComponents: true,
+  },
+  experimental: {
+    windowHistorySupport: true,
+  },
+};
+
+module.exports = nextConfig;