A Closer Look at WAGMI.sh and Rainbowkit Upgrades

Web3 platforms are constantly evolving, paving the way for the next generation of the web3 stack. In this blog post, we will delve into the recent upgrades that have taken place on WAGMI.sh and the subsequent chain reaction changes that have affected Rainbowkit. These updates might also trigger changes in ConnectKit. For those new to web3, Rainbowkit and ConnectKit are React Component libraries designed to connect wallets to decentralized applications (DApps). Let's explore the latest developments and improvements in this dynamic ecosystem.

Package Upgrades

WAGMI.sh: TypeScript Tooling for Ethereum WAGMI.sh is a platform that specializes in building Typescript tooling for Ethereum. If you're interested in learning more, be sure to check out their website at wagmih.sh. However, it's worth noting that there have been a few issues when it comes to establishing connections with these tools.

Several important package upgrades have been implemented, including:

• wagmi -> 1.x
• typescript -> 5.x
• @vitejs/plugin-react -> 4.0.0

Key Changes and Updates

During the upgrades, several notable changes have occurred:

1. FetchSigner is now WalletClient: Previously, the fetchSigner interface was used to sign messages and transactions. Now, WalletClient has taken its place and serves the same purpose.
2. Dependency changes: The 'ethers' peer dependency has been replaced with 'viem' dependency, resulting in a streamlined package structure.
3. Updates to createClient function and configureChains function: These functions have undergone modifications to enhance their functionality and improve the overall user experience.
4. Renaming of Hooks: Some hooks have been renamed for clarity and consistency. For instance, useProvider is now called usePublicClient, and useSigner is now named useWalletClient.
5. Renaming of Components: The Signer component has been renamed as WalletClient, and WebSocketProvider is now referred to as WebSocketPublicClient.

Potential Breaking Changes in Rainbowkit

For a comprehensive list of breaking changes that Rainbowkit may experience, refer to the migration guide available here. Familiarizing yourself with these changes will help ensure a smooth transition and avoid any potential issues.

Attention: Known Issues and Workarounds While these upgrades bring numerous improvements, there are a few issues that have been identified:

1. WalletClient.signMessage(string) is no longer available. Instead, you should use WalletClient.signMessage({ message: "string" }).
2. WalletClient.getAddress() has been replaced with WalletClient.getAddresses(), providing support for multiple addresses.
3. There have been changes to the location of WalletClient.signTypedData(), which our internal team is currently investigating.

Addressing an Error

(Big integer literals are not available...) If you encounter the error message "(Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)", it is recommended to upgrade the dependencies for @vitejs/plugin-react or modify the 'target' configuration accordingly.

Conclusion

Web3 platforms are continuously evolving, and the recent upgrades on WAGMI.sh have had a ripple effect on Rainbowkit and potentially on ConnectKit as well. These advancements enhance the capabilities and user experience of the React Component libraries designed to connect wallets to DApps. By staying informed about the latest changes and being prepared for potential breaking modifications, developers can navigate these updates seamlessly and make the most of the evolving web3 ecosystem.

If you're looking to delve deeper into web3 development, we have a collection of insightful blogs on our website. At PERCS, we are passionate about connecting with builders in the Web3 space. Feel free to reach out to us at builders@getpercs.com and share what you're currently working on. We'd love to hear more about your project and explore potential synergies between our endeavors.