Celo 🌈 RainbowKit
//
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { configureChains, createConfig, WagmiConfig, } from "wagmi";
import { jsonRpcProvider } from "wagmi/providers/jsonRpc";
import celoGroups from "@celo/rainbowkit-celo/lists"
import { Alfajores, Celo } from "@celo/rainbowkit-celo/chains";
import "@rainbow-me/rainbowkit/styles.css";
const projectId = "your-wallet-connnect-project-id" // get one at https://cloud.walletconnect.com/app
const connectors = celoGroups({chains, projectId, appName: typeof document === "object" && document.title || "Your App Name"})
const { chains, publicClient } = configureChains(
[Alfajores, Celo],
[jsonRpcProvider({ rpc: (chain) => ({ http: chain.rpcUrls.default.http[0] }) })]
);
const wagmiConfig = createConfig({
autoConnect: true,
connectors,
publicClient: publicClient,
});
export default function Wrap() {
return (
<WagmiConfig config={wagmiConfig}>
<RainbowKitProvider chains={chains} coolMode={true}>
<YourApp />
</RainbowKitProvider>
</WagmiConfig>
);
}
function YourApp() {
return <ConnectButton />;
};
Follow the instructions for installing rainbowkit and...Install As a Package
yarn add @celo/rainbowkit-celo
Or copy from source files
ChainsWallets