Update rainbowKit example for Rainbowkit / wagmi V2

[johnashu]

[FIX] iconUrl -> Magic

THe example for RAinbowKit was not working.. This will..

[Adebesin-Cell]

Hey @johnashu, did you get it to work with rainbow kit?
I was trying the other day to make it work but app state (wagmi.store) was getting reset to null, no idea why in setup but here's how I worked it.

import { env } from '@/env'
import { dedicatedWalletConnector } from '@magiclabs/wagmi-connector'
import type { Wallet } from '@rainbow-me/rainbowkit'
import type { Chain } from 'viem'
import { polygon } from 'viem/chains'
import { createConnector } from 'wagmi'

export const createMagicConnector = ({ chain }: { chain: Chain }): Wallet => ({
  id: 'magic',
  name: 'Magic',
  iconUrl: 'https://svgshare.com/i/pXA.svg',
  iconBackground: '#fff',
  installed: true,
  iconAccent: '#b4acfc',

  createConnector: (walletDetails) => {
    const magicConnector = dedicatedWalletConnector({
      chains: [chain],
      options: {
        customLogo: 'https://iq.social/images/iq-logo.svg',
        apiKey: env.NEXT_PUBLIC_MAGIC_API_KEY,
        accentColor: '#ea3b87',
        oauthOptions: {
          providers: ['google', 'facebook', 'twitter', 'discord'],
        },
        isDarkMode: false,
        magicSdkConfiguration: {
          network: {
            chainId: chain.id,
            rpcUrl: chain.rpcUrls.default.http[0],
          },
        },
      },
    })

    return createConnector((config) => ({
      ...magicConnector(config),
      ...walletDetails,
    }))
  },
})

export const magicWallet = () => createMagicConnector({ chain: polygon })

[Adebesin-Cell]

Happens on page refresh, would be great if you could share a minimal production of your solution if it works great, thanks 👏