Use wagmi context for Balances and UniversalKitProvider components #14
Conversation
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
lukema95
changed the title
|
The second option is exactly where I started in the first version of the library: having to pass values from wagmi's https://github.com/zeta-chain/docs/blob/v91/src/pages/developers/frontend/universalkit.mdx This is messy, because it adds lines upon lines of config. And since components need more than 2 props on average, it just makes the onboarding too complicated. |
|
The problem is RainbowKit. If we throw away RainbowKit from the template, UniversalKit components work fine. RainbowKit for some reason cannot inherit wagmi if it's initialized inside UniversalKitProvider. |
|
But of course if we throw away RainbowKit, we can't connect to the wallet. I'll try a few things, like including RainbowKit provider inside the UniversalKit to see if it helps. |
|
I think I figured it out 😂 The solution is stupid, but it kind of works. @lukema95 throw away any mention of RainbowKit from template. Remove RainbowKitProvider, remove the Connect button. Providers file in the template looks like this now: export const Providers = ({ children }: { children: React.ReactNode }) => {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) return null;
return (
<UniversalKitProvider config={config} client={queryClient}>
<NextThemesProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</NextThemesProvider>
</UniversalKitProvider>
);
};Put RainbowKitProvider inside UniversalKit like so: export const UniversalKitProvider = ({
children,
config,
client,
zetaChainConfig,
}: {
children: ReactNode;
config?: any;
client: any;
zetaChainConfig?: any;
}) => {
return (
<WagmiProvider config={config || { autoConnect: true }}>
<QueryClientProvider client={client}>
<BitcoinWalletProvider>
<ZetaChainClientProvider zetaChainConfig={zetaChainConfig}>
<RainbowKitProvider>{children}</RainbowKitProvider>
</ZetaChainClientProvider>
</BitcoinWalletProvider>
</QueryClientProvider>
</WagmiProvider>
);
};Create a new component RainbowKitConnectButton inside UniversalKit that just has the RainbowKit button. Use this button in the template: import { RainbowKitConnectButton } from "@zetachain/universalkit"Should work. Apparently, RainbowKit is very particular about having wagmi inside the same project it's in. |
|
The downside is that now the template can't use wagmi hooks 😔 |
|
Why the hell doesn't wagmi propagate from a parent provider? |
|
Maybe just having two wagmis nested is ok, I need to think about it. |
Can't we just use RainbowKit? |
wdym? From what I can tell, UniversalKit components only work if wagmi is instantiated in the same project (wagmi is in UniversalKit). RainbowKit is the same: the connect button has to be in the same project as RainbowKit provider and wagmi. If we move wagmi inside UniversalKit, both RainbowKit and UniversalKit components will work. However, if a user decides to use wagmi inside the template, they will have to add wagmi to the template (second wagmi). The burning question is. If wagmi is instantiated inside UniversalKitProvider, why can't the template use that wagmi. Why doesn't wagmi propagate to the template. |
Relevant issue: #12
The reason for this issue is that components in universalkit cannot inherit the context of WagmiProvider from the template, which is strange as it should normally be possible.
If all the components in universal were defined within the template, this problem wouldn't exist. There could be multiple reasons causing this issue.
I've tried several methods but found that none of them could solve the problem, such as unifying the React version or using dynamic imports for components in universalkit. No matter what I did, the context of WagmiProvider in the template would be lost after passing it to components in universalkit, meaning hooks like useAccount from wagmi couldn't be used in universalkit.
A simpler and effective solution is to pass the context through parameters:
Use React.forwardRef and useContext, instead of directly using wagmi hooks, pass necessary functions and data via props. The advantage is direct use of WagmiContext without needing to pass each hook separately.
Provide an option for library components that allows users to manually inject the context of WagmiProvider. The advantage is flexibility, allowing users to selectively override certain Wagmi hooks.
I'm currently using the second method, which is more flexible. If we understand the cause of this problem in the future, we can fix it without changing the code, just reverting to the previous usage without passing any hook context.
After modification, to apply it to the template, you only need to manually inject hooks to override the default hooks. The implementation of Provider in template/web that needs to be modified is as follows:
If you want to use the Balances component in template/web/Page.tsx: