Migration vers RainbowKit et Wagmi v2
Les dépendances wagmi et viem ont atteint la version 2.x.x avec des changements significatifs.
Suivez les étapes ci-dessous pour effectuer la migration.
1. Mettez à jour RainbowKit, wagmi, et viem à leurs dernières versions
2. Installez la dépendance @tanstack/react-query
Avec Wagmi v2, TanStack Query est désormais une dépendance requise.
Installez-la avec la commande suivante :
npm i @tanstack/react-query
3. Mettez à jour vos configurations RainbowKit et Wagmi
import '@rainbow-me/rainbowkit/styles.css'
+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
- import { createPublicClient, http } from 'viem'
- import { WagmiConfig } from 'wagmi'
+ import { WagmiProvider, http } from 'wagmi'
- import { configureChains, createConfig } from 'wagmi'
import { mainnet } from 'wagmi/chains'
import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit'
+ import { getDefaultConfig } from '@rainbow-me/rainbowkit'
/* getDefaultWallets is now optional */
- const { wallets } = getDefaultWallets({
- appName: 'RainbowKit demo',
- projectId: 'YOUR_PROJECT_ID',
- chains,
- })
/* connectorsForWallets is now optional */
- const connectors = connectorsForWallets([...wallets])
- const { chains, publicClient } = configureChains(
- [mainnet, sepolia],
- [publicProvider(), publicProvider()],
- )
- const config = createConfig({
- autoConnect: true,
- publicClient,
- })
/* New API that includes Wagmi's createConfig and replaces getDefaultWallets and connectorsForWallets */
+ const config = getDefaultConfig({
+ appName: 'RainbowKit demo',
+ projectId: 'YOUR_PROJECT_ID',
+ chains: [mainnet],
+ transports: {
+ [mainnet.id]: http(),
+ },
+ })
+ const queryClient = new QueryClient()
const App = () => {
return (
- <WagmiConfig config={config}>
+ <WagmiProvider config={config}>
+ <QueryClientProvider client={queryClient}>
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
{/* Your App */}
</RainbowKitProvider>
+ </QueryClientProvider>
- </WagmiConfig>
+ </WagmiProvider>
)
}
4. Vérifiez les changements importants dans wagmi et viem
Si vous utilisez les hooks wagmi et les actions viem dans votre dApp, vous devrez suivre les guides de migration pour v2 :
1. Comportement amélioré pour les portefeuilles EIP-6963
Les portefeuilles qui prennent en charge la nouvelle norme de connexion EIP-6963 (y compris Rainbow, MetaMask et autres) apparaîtront automatiquement dans une section Installé lors de l'expérience de connexion au portefeuille. Cela garantit que les utilisateurs puissent toujours trouver leurs portefeuilles préférés et se connecter aux dApps sans conflits ni boutons de secours.
Les développeurs conservent un contrôle total sur la Liste de Portefeuilles Personnalisée pour mettre en avant les portefeuilles préférés des utilisateurs finaux. Il est conseillé de continuer à inclure le injectedWallet et walletConnectWallet dans votre liste pour prendre en charge toutes les plateformes.
2. Configuration Wagmi avec getDefaultConfig
Cette nouvelle API simplifie l'expérience de configuration et remplace la nécessité d'utiliser directement le createConfig de Wagmi. La configuration de chaîne est simplifiée, y compris les fournisseurs publics déduits pour les transports.
La liste de portefeuilles par défaut sera automatiquement incluse, supprimant ainsi le besoin d'utiliser getDefaultWallets et connectorsForWallets.
Vous pouvez créer une Liste de portefeuilles personnalisés en passant des connecteurs de portefeuille importés ou personnalisés à wallets. L'instanciation des connecteurs de portefeuille et le passage de projectId et chains ne sont plus nécessaires.
const config = getDefaultConfig({
appName: 'RainbowKit demo',
projectId: 'YOUR_PROJECT_ID',
chains: [mainnet],
wallets: [rainbowWallet], /* optional custom wallet list */
/* Wagmi createConfig options including `transports` are also accepted */
})
3. RainbowKitProvider
Vous n'avez plus besoin de passer chains à <RainbowKitProvider>.
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
4. Chaînes personnalisées
Le type Chain a changé conformément à Wagmi v2, et continue de prendre en charge les métadonnées iconUrl et iconBackground de RainbowKit.
+ import { Chain } from '@rainbow-me/rainbowkit'
const avalanche = {
id: 43_114,
name: 'Avalanche',
iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png',
iconBackground: '#fff',
nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 },
rpcUrls: {
default: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
},
blockExplorers: {
default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
},
contracts: {
multicall3: {
address: '0xca11bde05977b3631167028862be2a173976ca11',
blockCreated: 11_907_934,
},
},
} as const satisfies Chain
Exemple avec getDefaultConfig :
const config = getDefaultConfig({
+ chains: [
+ avalanche, /* custom chain */
+ {
+ ...mainnet,
+ iconBackground: '#000',
+ iconUrl: 'https://example.com/icons/ethereum.png',
+ }, /* metadata overrides */
+ ],
});
Exemple avec createConfig :
+ import { Chain } from '@rainbow-me/rainbowkit'
+ const chains: readonly [Chain, ...Chain[]] = [
+ {
+ ...mainnet,
+ iconBackground: '#000',
+ iconUrl: 'https://example.com/icons/ethereum.png',
+ },
+ ];
const config = createConfig({
chains,
transports: {
[mainnet.id]: http(),
},
})
5. Portefeuilles personnalisés
Les connecteurs de portefeuilles RainbowKit ont subi des changements importants pour supporter Wagmi v2. Référez-vous aux docs mis à jour et à un exemple de connecteur pour mettre à jour tout Connecteur de Portefeuille Personnalisé dans votre dApp.
Les connecteurs de portefeuille prennent également désormais en charge la norme EIP-6963 avec la propriété rdns. Assurez-vous que cela soit rempli pour éviter les duplications de références aux portefeuilles prenant en charge EIP-6963 dans votre liste de portefeuilles.
Veuillez signaler tout problème ou commentaire pour RainbowKit v2 sur GitHub ici.
