From 8fd3a407acf38b2379257ea785d3d57ac1eec640 Mon Sep 17 00:00:00 2001
From: Kayzee <87918622+Realkayzee@users.noreply.github.com>
Date: Thu, 1 Jun 2023 17:27:59 +0100
Subject: [PATCH] Update celo_frontend_101.md

The code in _app.tsx seems to be outdated with the latest build on celo composer
---
 .../content/celo_frontend_101.md              | 81 +++++++------------
 1 file changed, 27 insertions(+), 54 deletions(-)

diff --git a/celo/celo-frontend-101/content/celo_frontend_101.md b/celo/celo-frontend-101/content/celo_frontend_101.md
index 1836548..0dfa009 100644
--- a/celo/celo-frontend-101/content/celo_frontend_101.md
+++ b/celo/celo-frontend-101/content/celo_frontend_101.md
@@ -215,80 +215,53 @@ Open the `_app.tsx` file in the `pages` folder:
 
 Replace the code in the `_app.tsx` file with the following code:
 ```
-// This file is the entry point for the app. It is used to wrap the app with the RainbowKitProvider and WagmiConfig components. 
-
-// Import the global style sheet as well as the RainbowKit and react-toastify stylesheets.
-import 'react-toastify/dist/ReactToastify.css';
-import "../styles/globals.css";
-import "@rainbow-me/rainbowkit/styles.css";
-
 import type { AppProps } from "next/app";
-
-// Import the connectorsForWallets function to create a list of wallets to connect to. 
-// Import the RainbowKitProvider component to wrap the app with.
-import {
-  connectorsForWallets,
-  RainbowKitProvider
-} from "@rainbow-me/rainbowkit";
-
-// Import three different wallets connectors from the RainbowKit package.
-import {
-  metaMaskWallet,
-  omniWallet,
-  walletConnectWallet
-} from "@rainbow-me/rainbowkit/wallets";
-
-// Import configureChains, createClient, and WagmiConfig from the Wagmi package to configure the Wagmi client.
-import { configureChains, createClient, WagmiConfig } from "wagmi";
-
-// Import the jsonRpcProvider from the Wagmi package to specify the RPC URLs of the chains we want to connect to.
+import { RainbowKitProvider, connectorsForWallets } from "@rainbow-me/rainbowkit";
+import { configureChains, createConfig, WagmiConfig } from "wagmi";
 import { jsonRpcProvider } from "wagmi/providers/jsonRpc";
-
-// Import known recommended CELO wallets
-import { Valora, CeloWallet, CeloDance } from "@celo/rainbowkit-celo/wallets";
-
-// Import CELO chain information
 import { Alfajores, Celo } from "@celo/rainbowkit-celo/chains";
-
 import Layout from "../components/Layout";
-
-// Import the ToastContainer component from react-toastify to display notifications.
+import "../styles/globals.css";
+import "@rainbow-me/rainbowkit/styles.css";
+import 'react-toastify/dist/ReactToastify.css';
+import {metaMaskWallet, omniWallet, rainbowWallet, walletConnectWallet} from "@rainbow-me/rainbowkit/wallets"
 import {ToastContainer} from "react-toastify";
+import { Valora, CeloWallet } from "@celo/rainbowkit-celo/wallets";
+
+const projectId = "celo-composer-project-id" // get one at https://cloud.walletconnect.com/app
 
-// Configure the information for the chains we want to connect to through RainbowKit.
-const { chains, provider } = configureChains(
+const { chains, publicClient } = configureChains(
   [Alfajores, Celo],
   [jsonRpcProvider({ rpc: (chain) => ({ http: chain.rpcUrls.default.http[0] }) })]
 );
 
-// Create the list of wallets to connect to.
+// Create list of wallet to connect to
 const connectors = connectorsForWallets([
   {
-    groupName: "Recommended with CELO",
+    groupName: "Recommended with Celo",
     wallets: [
-      Valora({ chains }),
-      CeloWallet({ chains }),
-      CeloDance({ chains }),
-      metaMaskWallet({ chains }),
-      omniWallet({ chains }),
-      walletConnectWallet({ chains }),
-    ],
-  },
-]);
-
-// Create the Wagmi client.
-const wagmiClient = createClient({
+      Valora({projectId, chains}),
+      CeloWallet({projectId, chains}),
+      metaMaskWallet({projectId, chains}),
+      rainbowWallet({projectId, chains}),
+      omniWallet({chains}),
+      walletConnectWallet({chains})
+    ]
+  }
+  
+])
+
+const wagmiConfig = createConfig({
   autoConnect: true,
   connectors,
-  provider,
+  publicClient: publicClient,
 });
 
-// Create and export the App component wrapped with the RainbowKitProvider and WagmiConfig.
 function App({ Component, pageProps }: AppProps) {
   return (
-    <WagmiConfig client={wagmiClient}>
+    <WagmiConfig config={wagmiConfig}>
       <RainbowKitProvider chains={chains} coolMode={true}>
-        <ToastContainer position={'bottom-center'} />
+        <ToastContainer position="bottom-center" />
         <Layout>
           <Component {...pageProps} />
         </Layout>