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 👏

[rodri595]

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

hey Lope, im having the same problem , on page reload i cant get the user address, did you find how to fix it?

[Adebesin-Cell]

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

hey Lope, im having the same problem , on page reload i cant get the user address, did you find how to fix it?

Hi, @rodri595. Damn, no I couldn’t figure out why it happened too. Had to switch to walletconnect.

[rodri595]

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

hey Lope, im having the same problem , on page reload i cant get the user address, did you find how to fix it?

Hi, @rodri595. Damn, no I couldn’t figure out why it happened too. Had to switch to walletconnect.

I was expecting your help haha but actually i just made it work by downgrading the libs to the one on the wagmi-connector-demo v2 also made sure to have the yarn.lock file, i force install the dependencies ( npm -f i) and now with your config of the dedicated wallet it seems it works perfeclty and on reload the state persists 😀😀 glad it helps and feel free to ask 👋

[Adebesin-Cell]

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

hey Lope, im having the same problem , on page reload i cant get the user address, did you find how to fix it?

Hi, @rodri595. Damn, no I couldn’t figure out why it happened too. Had to switch to walletconnect.

I was expecting your help haha but actually i just made it work by downgrading the libs to the one on the wagmi-connector-demo v2 also made sure to have the yarn.lock file, i force install the dependencies ( npm -f i) and now with your config of the dedicated wallet it seems it works perfeclty and on reload the state persists 😀😀 glad it helps and feel free to ask 👋

No worries at all! 😅 Thanks for sharing your solution. It'd be really helpful if you could share the package.json versions you used. Appreciate the help and sharing your approach, @rodri595! Bless 👊

[rodri595]

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

hey Lope, im having the same problem , on page reload i cant get the user address, did you find how to fix it?

Hi, @rodri595. Damn, no I couldn’t figure out why it happened too. Had to switch to walletconnect.

I was expecting your help haha but actually i just made it work by downgrading the libs to the one on the wagmi-connector-demo v2 also made sure to have the yarn.lock file, i force install the dependencies ( npm -f i) and now with your config of the dedicated wallet it seems it works perfeclty and on reload the state persists 😀😀 glad it helps and feel free to ask 👋

No worries at all! 😅 Thanks for sharing your solution. It'd be really helpful if you could share the package.json versions you used. Appreciate the help and sharing your approach, @rodri595! Bless 👊

im using vite, this are my current and the only ones important would be last 4 as you can see they are not i order as per i just add them manually from the demo version

  "dependencies": {
    "@rainbow-me/rainbowkit": "^2.2.0",
    "axios": "^1.7.7",
    "ethers": "^6.13.4",
    "i18next": "^23.11.5",
    "i18next-browser-languagedetector": "^8.0.0",
    "lottie-react": "^2.4.0",
    "permissionless": "^0.1.43",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-hot-toast": "^2.4.1",
    "react-i18next": "^15.1.0",
    "react-router-dom": "^6.27.0",
    "react-slot-counter": "^3.0.1",
    "react-tooltip": "^5.28.0",
    "zustand": "^5.0.1",
    "@magiclabs/wagmi-connector": "^2.0.0",
    "@tanstack/react-query": "^5.28.8",
    "viem": "^2.9.0",
    "wagmi": "^2.5.12"
  },

https://github.com/magiclabs/wagmi-magic-connector-demo-v2

--IMPORTANT--
make sure to have the yarn.lock file cause without it wont work
https://github.com/magiclabs/wagmi-magic-connector-demo-v2/blob/main/yarn.lock

and then just do a clean force install
(npm i -f)

since it work i didnt try to update the magic connectorv2.1.. let me know if it works!
👋

[joshuascan]

Hey @Adebesin-Cell / @rodri595, I just pushed out a version that fixes the app state issue. Upgrading to v2.1.1 should resolve it.