[Feature Request] RainbowKit?

[alexiskattan]

Any way to add Rainbow Kit as a way to connect to the wallet?

[jakvbs]

Hey @alexiskattan,

We're currently working on integration RainbowKit with useDApp. But it will take probably a few weeks to finish it. We're going to inform you after we accomplished this feature. Stay tuned!

[rzadp]

Anyone interested can upvote or chime in https://github.com/rainbow-me/rainbowkit/discussions/809

[roninjin10]

Hey we have been using rainbowkit and usedapp for app.optimism.io for almost a year now. Here is how we did it:

import type { FallbackProvider } from '@ethersproject/providers'
// we need the real version of deactivate
// eslint-disable-next-line no-restricted-imports
import { useEthers } from '@usedapp/core'
import { AbstractConnector } from '@web3-react/abstract-connector'
import { useEffect } from 'react'
import { useAccount, useNetwork } from 'wagmi'

class UseDappConnector extends AbstractConnector {
  constructor(
    private readonly chainId: number,
    private readonly address: string,
    public readonly getProvider: () => Promise<FallbackProvider>,
    public readonly deactivate = () => {},
  ) {
    super()
  }

  getChainId = async () => this.chainId
  getAccount = async () => this.address
  activate = async () => {
    const provider = await this.getProvider()
    await provider.ready
    return {
      account: this.address,
      chainId: this.chainId,
      provider,
    }
  }
}

/**
 * Connects RainbowKit to useDapp
 * When rainbowkit connection changes, useDapp is activated with the connection
 * When the rainbow connection goes away, useDapp is deactivated
 */
export const UseDappRainbowKitAdapter: React.FC = () => {
  const { activate, deactivate } = useEthers()

  const { address, connector } = useAccount()
  const { chain } = useNetwork()

  useEffect(() => {
    if (!connector || !address || !chain) {
      deactivate()
      return
    }
    connector.getProvider().then(async (provider) => {
      await provider.ready
      activate(
        new UseDappConnector(
          chain.id,
          address,
          connector.getProvider.bind(connector),
        ),
      )
    })
  }, [connector, chain, address, activate, deactivate])

  return <></>
}

[eskrano]

When useDapp will supports Rainbowkit?

[roninjin10]

hey @eskrano, I released my usedapp rainbowkit adapter as a package on npm https://github.com/roninjin10/stax/tree/main/packages/usedapp-rainbowkit-adapter. Feel free to use it to connect useDapp to rainbowkit

[eskrano]

hey @eskrano, I released my usedapp rainbowkit adapter as a package on npm https://github.com/roninjin10/stax/tree/main/packages/usedapp-rainbowkit-adapter. Feel free to use it to connect useDapp to rainbowkit

Wow! Thank you!