Callstack • Thiago Brezinski • Nov 13, 2023

Developer Experience Best Practices for React Native Web3 DApps

Article Summary

Thiago Brezinski explores why building Web3 apps in React Native hits a wall with Wagmi's browser-first architecture. His solution? WalletConnect's Web3Modal bridges the gap.

Thiago Brezinski breaks down how to build Web3 decentralized apps in React Native using Wagmi and Web3Modal. The guide tackles the core challenge: Wagmi's wallet connectors were built for web browsers, not mobile environments.

Key Takeaways

Wagmi now uses Viem instead of ethers.js for Ethereum interactions
Built-in Wagmi connectors only target web, creating React Native compatibility issues
Web3Modal provides ready-made React Native connectors, avoiding custom builds
Wagmi hooks built on Tanstack Query enable caching and auto-refetching
usePrepareSendTransaction prevents Slow TTOW (Time To Open Wallet) pitfall

Critical Insight

Web3Modal for React Native solves Wagmi's browser dependency problem, enabling mobile Web3 apps with the same developer experience as web.

The article reveals a specific performance pitfall when sending transactions and how one hook prevents it entirely.

About This Article

Problem

Wagmi's wallet SDKs rely on browser APIs, and the built-in connectors only work on the web. This makes it hard to use Wagmi with React Native mobile apps.

Solution

Thiago Brezinski showed how to use WalletConnect Web3Modal with React Native alongside Wagmi. This approach gives you pre-built mobile connectors without needing to write custom code.

Impact

Developers can build React Native Web3 dApps using the same Wagmi hooks as web apps. You get useBlockNumber(), useFeeData(), useAccount(), and useBalance() with the same transaction patterns.