Skip to content

Update celo_frontend_101.md #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update celo_frontend_101.md #14

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 27 additions & 54 deletions celo/celo-frontend-101/content/celo_frontend_101.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down