chore: Update dependencies and add .env.template

celo-org · May 15, 2024 · baf6b28 · baf6b28
1 parent c72d4f8
commit baf6b28
Show file tree

Hide file tree

Showing 5 changed files with 2,228 additions and 2,358 deletions.
diff --git a/packages/react-app/.env.template b/packages/react-app/.env.template
@@ -17,8 +17,11 @@ NEXTAUTH_SECRET=
 
 # You can obtain the GitHub client ID and secret from your GitHub developer settings.
 # https://github.com/settings/developers
+# Homepage URL - http://localhost:3000
+# Callback URL - http://localhost:3000/api/auth/callback/github
 GITHUB_ID=
 GITHUB_SECRET=
 
+# Key can be easily generated using this project for testing - https://github.com/celo-org/celo-dek-generation
 ISSUER_PRIVATE_KEY=
 DEK_PRIVATE_KEY=
diff --git a/packages/react-app/components/Header.tsx b/packages/react-app/components/Header.tsx
@@ -7,7 +7,7 @@ import { useSession } from "next-auth/react";
 import Image from "next/image";
 import { useEffect, useState } from "react";
 import { useConnect } from "wagmi";
-import { InjectedConnector } from "wagmi/connectors/injected";
+import { injected } from "wagmi/connectors";
 
 export default function Header() {
   const [isOpen, setIsOpen] = useState(false);
@@ -16,14 +16,12 @@ export default function Header() {
 
   const { data: session } = useSession();
 
-  const { connect } = useConnect({
-    connector: new InjectedConnector(),
-  });
+  const { connect } = useConnect();
 
   useEffect(() => {
     if (window.ethereum && window.ethereum.isMiniPay) {
       setHideConnectBtn(true);
-      connect();
+      connect({ connector: injected({ target: "metaMask" }) });
     }
   }, [connect]);
 
@@ -109,9 +107,3 @@ export default function Header() {
     </>
   );
 }
-
-declare global {
-  interface Window {
-    ethereum: any;
-  }
-}
diff --git a/packages/react-app/package.json b/packages/react-app/package.json
@@ -9,26 +9,30 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@celo/identity": "^5.0.4",
-    "@celo/rainbowkit-celo": "^1.1.0",
-    "@headlessui/react": "^1.7.17",
-    "@heroicons/react": "^2.0.18",
-    "@rainbow-me/rainbowkit": "^1.1.3",
-    "ethers": "^6.8.0",
-    "next": "13.5.6",
-    "next-auth": "^4.24.3",
+    "@celo/identity": "^5.1.2",
+    "@celo/poprf": "^0.1.9",
+    "@celo/rainbowkit-celo": "^1.2.0",
+    "@headlessui/react": "^2.0.3",
+    "@heroicons/react": "^2.1.3",
+    "@rainbow-me/rainbowkit": "^2.0.7",
+    "@tanstack/react-query": "^5.36.0",
+    "ethers": "^6.12.1",
+    "net": "^1.0.2",
+    "next": "14.2.3",
+    "next-auth": "^4.24.7",
     "react": "^18",
     "react-dom": "^18",
-    "viem": "^1.16.6",
-    "wagmi": "^1.4.5"
+    "source-map-support": "^0.5.21",
+    "viem": "^2.10.5",
+    "wagmi": "^2.8.7"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10",
-    "eslint": "^8",
-    "eslint-config-next": "13.5.6",
+    "eslint": "^9",
+    "eslint-config-next": "14.2.3",
     "postcss": "^8",
     "tailwindcss": "^3",
     "typescript": "^5"

diff --git a/packages/react-app/pages/_app.tsx b/packages/react-app/pages/_app.tsx
@@ -1,48 +1,56 @@
-import { Alfajores, Celo } from "@celo/rainbowkit-celo/chains";
-import celoGroups from "@celo/rainbowkit-celo/lists";
-import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import {
+  RainbowKitProvider,
+  connectorsForWallets,
+} from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
+import { injectedWallet } from "@rainbow-me/rainbowkit/wallets";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { SessionProvider } from "next-auth/react";
 import type { AppProps } from "next/app";
-import { WagmiConfig, configureChains, createConfig } from "wagmi";
-import { publicProvider } from "wagmi/providers/public";
+import { celo, celoAlfajores } from "viem/chains";
+import { WagmiProvider, createConfig, http } from "wagmi";
 import Layout from "../components/Layout";
 import "../styles/globals.css";
 
 const projectId = process.env.NEXT_PUBLIC_WC_PROJECT_ID as string; // get one at https://cloud.walletconnect.com/app
 
-const { chains, publicClient } = configureChains(
-  [Celo, Alfajores],
-  [publicProvider()]
+const connectors = connectorsForWallets(
+  [
+    {
+      groupName: "Recommended",
+      wallets: [injectedWallet],
+    },
+  ],
+  {
+    appName: "Celo Composer",
+    projectId,
+  }
 );
 
-const connectors = celoGroups({
-  chains,
-  projectId,
-  appName: (typeof document === "object" && document.title) || "Your App Name",
-});
-
-const appInfo = {
-  appName: "Celo Composer",
-};
-
-const wagmiConfig = createConfig({
+const config = createConfig({
   connectors,
-  publicClient: publicClient,
-  autoConnect: true,
+  chains: [celo, celoAlfajores],
+  transports: {
+    [celo.id]: http(),
+    [celoAlfajores.id]: http(),
+  },
 });
 
+const queryClient = new QueryClient();
+
 function App({ Component, pageProps }: AppProps) {
   return (
-    <WagmiConfig config={wagmiConfig}>
-      <RainbowKitProvider chains={chains} appInfo={appInfo} coolMode={true}>
-        <SessionProvider>
-          <Layout>
-            <Component {...pageProps} />
-          </Layout>
-        </SessionProvider>
-      </RainbowKitProvider>
-    </WagmiConfig>
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider>
+          <SessionProvider>
+            <Layout>
+              <Component {...pageProps} />
+            </Layout>
+          </SessionProvider>
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 }