Adding support to popular tools - Wagmi + Rainbow Kit

[billyjitsu]

Adding Gnosis Chain to Wagmi + Rainbow Kit

How to add Gnosis Chain to Wagmi + Rainbow Kit

Add Gnosis chain option to their front end using wagmi + rainbow kit

Adding non native chains to the wallet connection options

On my personal hashnode: https://billyjitsu.hashnode.dev/the-rainbowkit-wagmi-guide-i-wish-i-had#heading-lets-dive-into-rainbowkit-and-wagmi

Underneath - "Let's dive in to RainbowKit and Wagmi" section

Skill level

For tutorials to be hosted on Gnosis: Tutorial Content

Can be done if requested

For tutorials hosted elsewhere: URL to tutorial Reference Here:

https://billyjitsu.hashnode.dev/the-rainbowkit-wagmi-guide-i-wish-i-had#heading-lets-dive-into-rainbowkit-and-wagmi

Code should be updated to reflect gnosisscan as well:

import "../styles/globals.css"; import "@rainbow-me/rainbowkit/styles.css"; import { getDefaultWallets, RainbowKitProvider, darkTheme, lightTheme, midnightTheme, } from "@rainbow-me/rainbowkit"; import { chain, configureChains, createClient, WagmiConfig } from "wagmi"; import { alchemyProvider } from "wagmi/providers/alchemy"; import { publicProvider } from "wagmi/providers/public"; import { jsonRpcProvider } from "wagmi/providers/jsonRpc";

/ adding gnosis network / const GnosisChain = { id: 100, name: 'Gnosis Chain', network: 'Gnosis', nativeCurrency: { decimals: 18, name: 'xDai', symbol: 'xDai', }, rpcUrls: { default: 'https://rpc.ankr.com/gnosis', }, blockExplorers: { default: { name: 'Gnosis Scan', url: 'https://gnosisscan.io/' }, }, iconUrls: ["https://images.prismic.io/koinly-marketing/16d1deb7-e71f-48a5-9ee7-83eb0f7038e4_Gnosis+Chain+Logo.png"], testnet: false, }

const { chains, provider } = configureChains( [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum, GnosisChain], // <<<<<< Gnosis Chain Addedd [ alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }), jsonRpcProvider({ rpc: () => ({ http: "https://rpc.ankr.com/gnosis" }) }), //<<<< New RPC Provider publicProvider(), ] );

const { connectors } = getDefaultWallets({ appName: "My RainbowKit App", chains, });

const wagmiClient = createClient({ autoConnect: true, connectors, provider, });

function MyApp({ Component, pageProps }) { return (

); }

export default MyApp;

[alebanzas]

thanks @billyjitsu ! could you make the PR yourself?

[billyjitsu]

Hey Alex, yes I can do it. In what section would you want to merge the PR to? Not sure what section

[alebanzas]

Great!!

I would add it under "interacting with Gnosis", unless you have a better idea.

[alebanzas]

PR: #134