chore: Update dependencies and add RainbowKitProvider and WagmiProvid…

…er to _app.tsx
celo-org · Jul 12, 2024 · 1dcece7 · 1dcece7
1 parent 82a9b69
commit 1dcece7
Show file tree

Hide file tree

Showing 4 changed files with 976 additions and 936 deletions.
diff --git a/packages/react-app/components/Header.tsx b/packages/react-app/components/Header.tsx
@@ -1,7 +1,22 @@
 import { Disclosure } from "@headlessui/react";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { useConnect } from "wagmi";
+import { injected } from "wagmi/connectors";
 
 export default function Header() {
+  const [hideConnectBtn, setHideConnectBtn] = useState(false);
+  const { connect } = useConnect();
+
+  useEffect(() => {
+    if (window.ethereum && window.ethereum.isMiniPay) {
+      setHideConnectBtn(true);
+      connect({ connector: injected({ target: "metaMask" }) });
+    }
+  }, []);
+
   return (
     <Disclosure as="nav" className="bg-colors-primary border-b border-black">
       {({ open }) => (
@@ -20,15 +35,34 @@ export default function Header() {
                 </Disclosure.Button>
               </div>
               <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
-                <div className="flex flex-shrink-0 items-center text-white font-semibold text-2xl">
-                  <p>Minipay</p>
+                <div className="flex flex-shrink-0 items-center">
+                  <Image
+                    className="block h-8 w-auto sm:block lg:block"
+                    src="/logo.svg"
+                    width="24"
+                    height="24"
+                    alt="Celo Logo"
+                  />
                 </div>
                 <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
-                  <a className="inline-flex items-center border-b-2 border-black px-1 pt-1 text-sm font-medium text-gray-900">
+                  <a
+                    href="#"
+                    className="inline-flex items-center border-b-2 border-black px-1 pt-1 text-sm font-medium text-gray-900"
+                  >
                     Home
                   </a>
                 </div>
               </div>
+              <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+                {!hideConnectBtn && (
+                  <ConnectButton
+                    showBalance={{
+                      smallScreen: true,
+                      largeScreen: false,
+                    }}
+                  />
+                )}
+              </div>
             </div>
           </div>
 
@@ -49,9 +83,3 @@ export default function Header() {
     </Disclosure>
   );
 }
-
-declare global {
-  interface Window {
-    ethereum: any;
-  }
-}
diff --git a/packages/react-app/package.json b/packages/react-app/package.json
@@ -1,38 +1,39 @@
 {
-    "name": "@celo-composer-minipay-template/react-app",
-    "version": "0.1.0",
-    "private": true,
-    "scripts": {
-        "dev": "next dev",
-        "build": "next build",
-        "start": "next start",
-        "lint": "next lint"
-    },
-    "dependencies": {
-        "@celo/abis": "^10.0.0",
-        "@celo/rainbowkit-celo": "1.1.1",
-        "@headlessui/react": "^1.7.14",
-        "@heroicons/react": "^2.0.18",
-        "@rainbow-me/rainbowkit": "^1.0.2",
-        "@wagmi/connectors": "^3.1.10",
-        "next": "^13.4.2",
-        "react": "18.2.0",
-        "react-dom": "18.2.0",
-        "viem": "^2.7.19",
-        "wagmi": "^2.5.7"
-    },
-    "devDependencies": {
-        "@types/node": "^20.2.1",
-        "@types/react": "^18.2.6",
-        "@types/react-dom": "^18.2.4",
-        "autoprefixer": "^10.4.14",
-        "eslint": "^8.40.0",
-        "eslint-config-next": "^13.4.2",
-        "postcss": "^8.4.31",
-        "tailwindcss": "^3.3.2",
-        "typescript": "^5.0.4"
-    },
-    "browser": {
-        "net": false
-    }
+  "name": "@celo-composer-minipay-template/react-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@celo/abis": "^11.0.0",
+    "@celo/rainbowkit-celo": "1.2.0",
+    "@headlessui/react": "^2.1.2",
+    "@heroicons/react": "^2.1.5",
+    "@rainbow-me/rainbowkit": "^2.1.3",
+    "@tanstack/react-query": "^5.51.1",
+    "@wagmi/connectors": "^5.0.22",
+    "next": "^14.2.5",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "viem": "^2.17.3",
+    "wagmi": "^2.10.10"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^9.6.0",
+    "eslint-config-next": "^14.2.5",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.5.3"
+  },
+  "browser": {
+    "net": false
+  }
 }
diff --git a/packages/react-app/pages/_app.tsx b/packages/react-app/pages/_app.tsx
@@ -1,12 +1,52 @@
+import {
+  RainbowKitProvider,
+  connectorsForWallets,
+} from "@rainbow-me/rainbowkit";
+import "@rainbow-me/rainbowkit/styles.css";
+import { injectedWallet } from "@rainbow-me/rainbowkit/wallets";
 import type { AppProps } from "next/app";
+import { WagmiProvider, createConfig, http } from "wagmi";
+import { celo, celoAlfajores } from "wagmi/chains";
 import Layout from "../components/Layout";
 import "../styles/globals.css";
 
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const connectors = connectorsForWallets(
+  [
+    {
+      groupName: "Recommended",
+      wallets: [injectedWallet],
+    },
+  ],
+  {
+    appName: "Celo Composer",
+    projectId: process.env.WC_PROJECT_ID ?? "044601f65212332475a09bc14ceb3c34",
+  }
+);
+
+const config = createConfig({
+  connectors,
+  chains: [celo, celoAlfajores],
+  transports: {
+    [celo.id]: http(),
+    [celoAlfajores.id]: http(),
+  },
+});
+
+const queryClient = new QueryClient();
+
 function App({ Component, pageProps }: AppProps) {
   return (
-    <Layout>
-      <Component {...pageProps} />
-    </Layout>
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider>
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 }