-
Notifications
You must be signed in to change notification settings - Fork 368
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Feature Request] RainbowKit? #986
Comments
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! |
Anyone interested can upvote or chime in rainbow-me/rainbowkit#809 |
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 <></>
} |
When useDapp will supports Rainbowkit? |
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! |
Any way to add Rainbow Kit as a way to connect to the wallet?
The text was updated successfully, but these errors were encountered: