Guide de migration

Guide de migration

Migration de RainbowKit

Les dépendances parallèles wagmi et viem ont atteint 2.x.x avec des changements incompatibles.

Suivez les étapes ci-dessous pour migrer.

1. Mettez à jour RainbowKit, wagmi, et viem vers leurs dernières versions

npm i @rainbow-me/rainbowkit@2 wagmi@2 [email protected]

2. Installez la dépendance parallèle @tanstack/react-query

Avec Wagmi v2, TanStack Query est maintenant une dépendance parallèle obligatoire.

Installez-le 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 incompatibles 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 la v2 :

• Guide de Migration Wagmi v2
• Changements Incompatibles Viem 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 d'autres) apparaîtront désormais automatiquement dans une section Installée lors de l'expérience de connexion au portefeuille. Cela garantit que les utilisateurs peuvent toujours trouver leurs portefeuilles préférés et se connecter aux dApps sans conflits ni boutons de repli.

Les développeurs continuent d'avoir 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 injectedWallet et walletConnectWallet dans votre liste pour prendre en charge toutes les plateformes.

2. Configuration de Wagmi avec getDefaultConfig

Cette nouvelle API simplifie l'expérience de configuration et remplace le besoin d'utiliser directement createConfig de Wagmi. La configuration de la chaîne est simplifiée, y compris les fournisseurs publics inférés pour les transports.

La liste des portefeuilles par défaut sera automatiquement incluse, rendant obsolète le besoin d'utiliser getDefaultWallets et connectorsForWallets.

Vous pouvez créer une liste de portefeuilles personnalisée en passant des connecteurs de portefeuilles importés ou personnalisés à wallets. Il n'est plus nécessaire d'instancier les connecteurs de portefeuilles et de passer projectId et chains.

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 supporter 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 overides */
+ ],
});

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 portefeuille RainbowKit ont subi d'importantes modifications pour prendre en charge Wagmi v2. Consultez la documentation mise à jour et un exemple de connecteur pour mettre à niveau les connecteurs de portefeuille personnalisés 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 est renseigné pour éviter les références en double aux portefeuilles prenant en charge l'EIP-6963 dans votre liste de portefeuilles.

La dépendance pair à pair wagmi a été mise à jour pour 1.x.x.

Suivez les étapes ci-dessous pour migrer.

1. Mettez à jour RainbowKit et wagmi vers leur dernière version

npm i @rainbow-me/rainbowkit@^1 wagmi@^1

2. Installer la dépendance pair à pair viem

wagmi v1 nécessite la dépendance pair à pair viem. Installez-le avec la commande suivante :

npm i viem

3. Assurez la compatibilité du regroupeur et du polyfill

Dans les versions précédentes de wagmi qui dépendaient de ethers, les modules fs, net, et tls requis par WalletConnect étaient automatiquement polyfillés. Ce n'est plus le cas avec RainbowKit v1 + wagmi v1, qui sont construits sur viem.

Consultez notre Config Next.js Webpack et les exemples de polyfills de Create React App pour obtenir des conseils de configuration pour votre projet.

Des guides supplémentaires pour le framework Vite et Remix sont disponibles ici.

4. Vérifiez les changements majeurs dans wagmi

Si vous utilisez les crochets wagmi dans votre application, vous devrez suivre le guide de migration wagmi vers v1.

Vous pouvez voir leur guide de migration ici.

La dépendance pair à pair de wagmi a été mise à jour vers 0.12.x.

RainbowKit a adopté le connecteur WalletConnectLegacyConnector dans wagmi pour un support continu de WalletConnect v1. Le support pour WalletConnect v2 et WalletConnectConnector sera bientôt disponible dans une mise à jour mineure, sans changements de rupture.

Les portefeuilles seront automatiquement mis à jour dans les futures versions.

Chaque dApp doit maintenant fournir un projectId WalletConnect Cloud pour permettre WalletConnect v2. Ceci doit être fait avant que les serveurs de pont WalletConnect v1 ne soient arrêtés le 28 juin 2023. RainbowKit préférera discrètement v1 pour tous les portefeuilles si le projectId n'est pas spécifié.

Suivez les étapes ci-dessous pour migrer.

npm i @rainbow-me/rainbowkit@^0.12.0 wagmi@^0.12.0

Toute dApp qui dépend de WalletConnect doit maintenant obtenir un projectId de WalletConnect Cloud. C'est absolument gratuit et ne prend que quelques minutes.

Fournissez le projectId à getDefaultWallets et aux connecteurs de portefeuille individuels RainbowKit comme suit :

const projectId = 'YOUR_PROJECT_ID';

const { wallets } = getDefaultWallets({
  appName: 'My RainbowKit App',
  projectId,
  chains,
});

const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: 'Other',
    wallets: [
      argentWallet({ projectId, chains }),
      trustWallet({ projectId, chains }),
      ledgerWallet({ projectId, chains }),
    ],
  },
]);

La dépendance pair à pair de wagmi a été mise à jour vers 0.11.x.

Suivez les étapes ci-dessous pour migrer.

npm i @rainbow-me/rainbowkit@^0.11.0 wagmi@^0.11.0

Si vous utilisez les hooks wagmi dans votre application, vous devrez vérifier si votre application a été affectée par les changements majeurs dans wagmi.

Vous pouvez voir leur guide de migration ici.

La dépendance pair à pair de wagmi a été mise à jour vers 0.10.x.

Suivez les étapes ci-dessous pour migrer.

npm i @rainbow-me/rainbowkit@^0.10.0 wagmi@^0.10.0

Si vous utilisez les hooks wagmi dans votre application, vous devrez vérifier si votre application a été affectée par les changements majeurs dans wagmi.

Vous pouvez voir leur guide de migration ici.

La dépendance pair à pair de wagmi a été mise à jour vers 0.9.x.

Suivez les étapes ci-dessous pour migrer.

npm i @rainbow-me/rainbowkit@^0.9.0 wagmi@^0.9.0

Si vous utilisez les hooks wagmi dans votre application, vous devrez vérifier si votre application a été affectée par les changements majeurs dans wagmi.

Vous pouvez voir leur guide de migration ici.

La dépendance pair à pair de wagmi a été mise à jour à 0.8.x.

Suivez les étapes ci-dessous pour migrer.

npm i @rainbow-me/rainbowkit@^0.8.0 wagmi@^0.8.0

Si vous utilisez les hooks wagmi dans votre application, vous devrez vérifier si votre application a été affectée par les changements majeurs dans wagmi.

Vous pouvez voir leur guide de migration ici.

Si vous créez une liste de portefeuilles personnalisée, vous devez maintenant importer chaque portefeuille individuellement afin de réduire la taille du bundle. Notez que puisque les portefeuilles ne sont plus espacés de noms via l'objet wallet, tous les portefeuilles ont maintenant un suffixe Wallet.

-import { connectorsForWallets, wallet } from '@rainbow-me/rainbowkit';
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import {
+  injectedWallet,
+  rainbowWallet,
+  metaMaskWallet,
+  coinbaseWallet,
+  walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.injected({ chains }),
-  wallet.rainbow({ chains }),
-  wallet.metaMask({ chains }),
-  wallet.coinbase({ chains, appName: 'My App' }),
-  wallet.walletConnect({ chains }),
+  injectedWallet({ chains }),
+  rainbowWallet({ chains }),
+  metaMaskWallet({ chains }),
+  coinbaseWallet({ chains, appName: 'My App' }),
+  walletConnectWallet({ chains }),
];

Notez également que la couche de compatibilité vers l'arrière de Steakwallet a été supprimée. Omni doit être utilisé à la place.

-import { wallet } from '@rainbow-me/rainbowkit';
+import { omniWallet } from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.steak({ chains }),
+  omniWallet({ chains }),
];

RainbowKit a mis à jour la dépendance wagmi à 0.5.x.

Suivez les étapes ci-dessous pour migrer.

Mettez à jour RainbowKit et wagmi à leur dernière version

npm i @rainbow-me/rainbowkit@^0.4.0 wagmi@^0.5.0

Si vous utilisez les hooks wagmi dans votre application, vous devrez vérifier si votre application a été affectée par les changements majeurs dans wagmi.

Vous pouvez consulter leur guide de migration ici.

Suppression du paramètre chainId de createConnector sur le type Wallet.

Notez que tous les portefeuilles intégrés utilisent la nouvelle API. La plupart des consommateurs ne seront pas affectés. Ce changement n'affecte que les consommateurs qui ont créé/consommé des portefeuilles personnalisés.

Si vous avez précédemment dérivé des URL RPC à partir de chainId sur createConnector, vous pouvez maintenant supprimer cette logique car wagmi gère maintenant les URL RPC en interne lorsqu'il est utilisé avec configureChains.

import { connectorsForWallets, wallet, Chain, Wallet } from '@rainbow-me/rainbowkit';
import { chain, configureChains } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';

export interface MyWalletOptions {
  chains: Chain[];
}

-const chains = [chain.mainnet]
+const { chains } = configureChains(
+  [chain.mainnet],
+  [
+    alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }),
+    publicProvider(),
+  ]
+);

export const rainbow = ({ chains }: MyWalletOptions): Wallet => ({
  ...
- createConnector: ({ chainId }) => {
+ createConnector: () => {
-   const rpc = chains.reduce(
-     (rpcUrlMap, chain) => ({
-       ...rpcUrlMap,
-       [chainId]: chain.rpcUrls.default,
-     }),
-     {}
-   );
    const connector = new WalletConnectConnector({
      chains,
      options: {
        qrcode: false,
-       rpc,
      },
    });
  }
  ...
}

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      rainbow({ chains }),
    ],
  },
]);

RainbowKit a mis à jour la dépendance homologue wagmi à ^0.4.

Suivez les étapes ci-dessous pour migrer.

Mettez à jour RainbowKit et wagmi à leur dernière version

npm i @rainbow-me/rainbowkit@^0.2.0 wagmi@^0.4.2

Importez configureChains de wagmi au lieu de RainbowKit:

- import { configureChains } from '@rainbow-me/rainbowkit';
+ import { configureChains } from 'wagmi';

RainbowKit n'exporte plus une API apiProvider. Remplacez-le par votre fournisseur souhaité de wagmi.

- import { apiProvider } from '@rainbow-me/rainbowkit';

Importez alchemyProvider de wagmi/providers/alchemy.

+ import { alchemyProvider } from 'wagmi/providers/alchemy';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.alchemy(process.env.ALCHEMY_ID)]
+ [alchemyProvider({ alchemyId: process.env.ALCHEMY_ID })]
);

Importez infuraProvider de wagmi/providers/infura.

+import { infuraProvider } from 'wagmi/providers/infura';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.infura(process.env.INFURA_ID)]
+ [infuraProvider({ infuraId: process.env.INFURA_ID })]
);

Importez jsonRpcProvider de wagmi/providers/jsonRpc.

+ import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
  [
-   apiProvider.jsonRpc(chain => ({
-     rpcUrl: `https://${chain.id}.example.com`,
-   })),
+   jsonRpcProvider({
+     rpc: chain => ({
+       http: `https://${chain.id}.example.com`,
+     }),
+   }),
  ]
);

Importez publicProvider de wagmi/providers/public.

+ import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
- [apiProvider.fallback()]
+ [publicProvider()]
);

Renommez WagmiProvider en WagmiConfig.

import {
- WagmiProvider
+ WagmiConfig
} from 'wagmi'

const App = () => {
  return (
-   <WagmiProvider client={wagmiClient}>...</WagmiProvider>
+   <WagmiConfig client={wagmiClient}>...</WagmiConfig>
  );
};

Et voilà! 🌈