Rabby kit integration issue ## wagmi provider

[0x001828]

Hi, I'm sorry again.
I'm switching to rabbykit because it resolves wallet conflicts automatically, but I'm using rainbowkit and tried following their guide, but it's not working.

import { createModal, getDefaultConfig } from "@rabby-wallet/rabbykit";
import { createConfig, http } from "@wagmi/core";
import { arbitrum, bsc, mainnet, optimism, polygon } from "@wagmi/core/chains";
 
export const config = createConfig(
  getDefaultConfig({
    appName: "RabbyKit example",
    projectId: "58a22d2bc1c793fc31c117ad9ceba8d9",
    chains: [mainnet, arbitrum, bsc, optimism, polygon],
    transports: {
      [mainnet.id]: http(),
      [arbitrum.id]: http(),
      [bsc.id]: http(),
      [optimism.id]: http(),
      [polygon.id]: http(),
    },
  })
);
 
export const rabbykit = createModal({
  wagmi: config,
});
 
rabbykit.open();
 
console.log("current rabbykit modal open status:", rabbykit.getOpenState());
 
rabbykit.close();

But it is not working within my provider, am using remix and wagmi v2
I need your urgent help, seniors!!!

[Tobi8068]

In my opinion, I think you need to follow these instructions:

• Check Dependencies: Ensure @rabby-wallet/rabbykit and @wagmi/core are up to date.
• Wrap with Provider: Use WagmiConfig to wrap your app.
• Open Modal on Click: Trigger rabbykit.open() on a button click, not immediately.
• Debug: Check the console for errors.

I hope this will help you greatly.
Thank you.

[venuswhispers]

Hello, @solis
As u mentioned, Rabbykit resolves cross wallet conflicts effectively, but based on Svelte, so have some limitations for React.
You cannot use it directly and need to make provider using React.useref

const RabbyProvider = () => {
  const rabbyKitRef = useRef<ReturnType<typeof createModal>>();

  useEffect(() => {
    if (!rabbyKitRef.current) {
      rabbyKitRef.current = createModal({
        chains: supportChains,
        wagmi: config,
        appName: "Test Demo",
        projectId: "58a22d2bc1c793fc31c117ad9ceba8d9",
      });
    }
  }, [config]);

  return (
    <Providers>
      <button
        onClick={() => {
          rabbyKitRef.current?.open();
        }}
      >
        Connect Wallet
      </button>
    </Providers>
  );
}

You can do like this

[0x001828]

Oh, great
Thanks very much 👍