Merge pull request #283 from celo-org/282-update-dependencies-viem-wa…

…gmi-and-rainbowkit-celo

feat: `celo-composer` `v.1.0.13`

package.json

@@ -1,39 +1,39 @@
 {
-  "name": "@celo/celo-composer",
-  "version": "1.0.13",
-  "description": "Get started building dApps on Celo",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/celo-org/celo-composer.git"
-  },
-  "author": "celo",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/celo-org/celo-composer/issues"
-  },
-  "homepage": "https://github.com/celo-org/celo-composer/blob/main/README.md",
-  "workspaces": [
-    "bin/*"
-  ],
-  "dependencies": {
-    "chalk": "4.1.2",
-    "commander": "^9.4.0",
-    "fs-extra": "^10.1.0",
-    "inquirer": "^8.2.4",
-    "node-emoji": "^1.11.0",
-    "ora": "5.4.1",
-    "shelljs": "^0.8.5",
-    "yargs": "17.5.1"
-  },
-  "main": "bin/index.js",
-  "keywords": [
-    "celo-composer",
-    "celo"
-  ],
-  "bin": {
-    "celo-composer": "bin/index.js"
-  },
-  "files": [
-    "bin"
-  ]
+    "name": "@celo/celo-composer",
+    "version": "1.0.14",
+    "description": "Get started building dApps on Celo",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/celo-org/celo-composer.git"
+    },
+    "author": "celo",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/celo-org/celo-composer/issues"
+    },
+    "homepage": "https://github.com/celo-org/celo-composer/blob/main/README.md",
+    "workspaces": [
+        "bin/*"
+    ],
+    "dependencies": {
+        "chalk": "4.1.2",
+        "commander": "^9.4.0",
+        "fs-extra": "^10.1.0",
+        "inquirer": "^8.2.4",
+        "node-emoji": "^1.11.0",
+        "ora": "5.4.1",
+        "shelljs": "^0.8.5",
+        "yargs": "17.5.1"
+    },
+    "main": "bin/index.js",
+    "keywords": [
+        "celo-composer",
+        "celo"
+    ],
+    "bin": {
+        "celo-composer": "bin/index.js"
+    },
+    "files": [
+        "bin"
+    ]
 }

packages/react-app/components/Header.tsx

@@ -4,18 +4,16 @@ import { ConnectButton } from "@rainbow-me/rainbowkit";
 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 [hideConnectBtn, setHideConnectBtn] = useState(false);
-    const { connect } = useConnect({
-        connector: new InjectedConnector(),
-    });
+    const { connect } = useConnect();
 
     useEffect(() => {
         if (window.ethereum && window.ethereum.isMiniPay) {
             setHideConnectBtn(true);
-            connect();
+            connect({ connector: injected({ target: "metaMask" }) });
         }
     }, []);
 
@@ -93,9 +91,3 @@ export default function Header() {
         </Disclosure>
     );
 }
-
-declare global {
-    interface Window {
-        ethereum: any;
-    }
-}

packages/react-app/package.json

@@ -11,15 +11,15 @@
     "dependencies": {
         "@headlessui/react": "^1.7.14",
         "@heroicons/react": "^2.0.18",
-        "@rainbow-me/rainbowkit": "^1.0.2",
+        "@rainbow-me/rainbowkit": "^2.0.2",
+        "@tanstack/react-query": "^5.28.6",
+        "@wagmi/connectors": "4.1.18",
         "ethers": "^5.7.2",
         "next": "^13.4.2",
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "viem": "^0.3.30",
-        "wagmi": "^1.4.12",
-        "@wagmi/connectors": "^3.1.10",
-        "@celo/rainbowkit-celo": "1.1.1"
+        "viem": "2.8.18",
+        "wagmi": "2.5.12"
     },
     "devDependencies": {
         "@types/node": "^20.2.1",

packages/react-app/pages/_app.tsx

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

packages/react-app/pages/index.tsx

@@ -2,23 +2,36 @@ import { useEffect, useState } from "react";
 import { useAccount } from "wagmi";
 
 export default function Home() {
-  const [userAddress, setUserAddress] = useState("");
-  const { address, isConnected } = useAccount();
+    const [userAddress, setUserAddress] = useState("");
+    const [isMounted, setIsMounted] = useState(false);
+    const { address, isConnected } = useAccount();
 
-  useEffect(() => {
-    if (isConnected && address) {
-      setUserAddress(address);
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+
+    useEffect(() => {
+        if (isConnected && address) {
+            setUserAddress(address);
+        }
+    }, [address, isConnected]);
+
+    if (!isMounted) {
+        return null;
     }
-  }, [address, isConnected]);
 
-  return (
-    <div className="flex flex-col justify-center items-center">
-      <div className="h1">
-        There you go... a canvas for your next Celo project!
-      </div>
-      {isConnected && (
-        <div className="h2 text-center">Your address: {userAddress}</div>
-      )}
-    </div>
-  );
+    return (
+        <div className="flex flex-col justify-center items-center">
+            <div className="h1">
+                There you go... a canvas for your next Celo project!
+            </div>
+            {isConnected ? (
+                <div className="h2 text-center">
+                    Your address: {userAddress}
+                </div>
+            ) : (
+                <div>No Wallet Connected</div>
+            )}
+        </div>
+    );
 }