[bug] Multiple Injected Providers for same wallet #1842
Comments
|
@sbauch Thanks for raising this issue. This is a bug that comes from the For now can you try to not render a lot on the server and try to use RainbowKit and Wagmi only in client side ? Check out some of our examples using next-js (SSR) and RainbowKit:
I know this is a bit crucial, but please bear with us 🙏 |
|
thanks for the quick reply!! i love I do think I'm only rendering wagmi and RainbowKit on the client? I've got an "use client";
export const config = getDefaultConfig({
appName: "Speedtracer",
projectId: "my id",
chains: [base],
ssr: true,
transports: {
// ...
},
});
// ...
export const EthereumProviders = ({ children }: Props) => (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider>{children}</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
);but no worries, i still have a few more things to switch over before i can deploy this anyhow. ill keep an eye on the wagmi PR if you wanna close this |
|
@sbauch Gotcha. Where do you wrap your |
|
Not sure what you mean by wrap, but I import and render the component in what is essentially the root of my client components. so it should be at the top of the suspense boundary? |
|
I push it a little further down. im under the impression that this would cause the page.tsx component to render client side, as it's parent so im still moving some things around with this all to try to address some hydration errors, but something like this: // layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={cn("font-Bebas antialiased", bebasNeue.variable)}>
{children}
</body>
</html>
);
}// page.tsx
const PlayPage = async ({ params: { s } }: { params: { s: string } }) => {
// a bunch of server-side contract calls with viem and redis caching
return (
<div
className="w-[100vw] h=[100vh]"
style={{ backgroundColor: theme.background }}
>
<PageComponent
seed={BigInt(s)}
updatedAtBlock={BigInt(updatedAtBlock)}
currentId={BigInt(today)}
d={d}
theme={theme}
ads={ads}
leaders={leaders}
/>
</div>
);
};// PageComponent.tsx
"use client";
// ...
const PlayPage = (props: Props) => {
return (
<Providers>
<div className="max-h-[100dvh] flex flex-col items-center overflow-hidden">
// ...
</div>
</Providers>
);
} |
|
@sbauch Gotcha. The best thing for now is to move your |
|
I dont think thats right tbh. imo placing the providers component in the layout would make the page render client side. and i only have one page in this route tree, which i want to render server side, so my providers component is only added on this page |
Sounds good. Yeah if you don't want to wrap it to your whole app that's fine. We'll keep this issue open and ping you once it's resolved on |
|
@sbauch Sorry for the delay here. Can you upgrade your |
|
@sbauch Any updates ? |
|
Closing this issue since it's wagmi has fixed this issue 👍 |
Is there an existing issue for this?
RainbowKit Version
2.0.1
wagmi Version
2.5.7
Current Behavior
I'm working on doing some performance refactors in my NextJS app, moving from pages router to app router and rendering a lot more on the server.
When I click between routes in my app without my wallet connected, each navigation adds another duplicate row for injected wallet.
Entirely possible this is on my end, I'm not very familiar with Next SSR. But it also happens with Rainbow extension (different chrome profile)
Expected Behavior
The discovered wallets should be deduped. Although maybe it's an indication I'm doing something odd?
Steps To Reproduce
My
getDefaultConfigusesssr: trueI'm happy to try put together an reproducible example but if there's a simpler explanation here that would be ideal! lmk, i can fork the rainbowkit example and switch it over to app router and see what's what
Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)
No response
Anything else?
No response
The text was updated successfully, but these errors were encountered: