Rainbow logo
RainbowKit
2.2.10

Aperçu

IntroductionGuide de migration

Prise en main

InstallationBoutonConnecterTailles de la fenêtre modaleThématisationChaînesLocalisationAuthentificationTransactions Récentes

Avancé

Hooks de modalBouton Connect personnaliséThème personnaliséListe de Portefeuilles PersonnaliséePortefeuilles personnalisésChaines personnaliséesInfos personnalisées sur l'applicationAvatars personnalisésAuthentification PersonnaliséeBoutonPortefeuilleMode Cool

Guide de migration

Guide de migration

Migration de RainbowKit

2.x.x Modifications importantes

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

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

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 :

Changements de RainbowKit

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és pour mettre en avant les portefeuilles préférés des utilisateurs finaux. Il est recommandé de continuer à inclure 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 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 des changements importants pour prendre en charge Wagmi v2. Consultez les documents mis à jour et un exemple de connecteur pour mettre à jour tous les connecteurs de portefeuilles 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 soit rempli pour éviter les duplications de références aux portefeuilles prenant en charge EIP-6963 dans votre liste de portefeuilles.

1.x.x Modifications importantes

Mis à jour à wagmi v1

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

Suivez les étapes ci-dessous pour effectuer la migration.

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

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

2. Installez la dépendance viem

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

npm i viem

3. Assurez la compatibilité du bundler et du polyfill

Référez-vous à notre échantillon de configuration Webpack pour Next.js pour des conseils de configuration pour votre projet.

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

4. Vérifiez les changements importants dans wagmi

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

Vous pouvez voir leur guide de migration ici.

0.12.x Modifications importantes

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

RainbowKit a adopté le connecteur WalletConnectLegacyConnector dans wagmi pour continuer à prendre en charge WalletConnect v1. La prise en charge de WalletConnect v2 et du WalletConnectConnector sera bientôt disponible avec un correctif, sans changements importants.

Les portefeuilles seront automatiquement transitionnés dans les futures versions.

Chaque dApp doit désormais fournir un projectId de WalletConnect Cloud pour activer WalletConnect v2. Cela doit être complété avant que les serveurs de pont de WalletConnect v1 ne soient arrêtés le 28 juin 2023. RainbowKit préférera tranquillement v1 pour tous les portefeuilles si projectId n'est pas spécifié.

Suivez les étapes ci-dessous pour effectuer la migration.

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

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

2. Fournissez un projectId WalletConnect Cloud

Chaque dApp qui repose sur 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 RainbowKit individuels comme suit :

const projectId = 'YOUR_PROJECT_ID';



const { wallets } = getDefaultWallets({

  appName: 'My RainbowKit App',

  projectId,

  chains,

});



const connectors = connectorsForWallets([

  ...wallets,

  {

    groupName: 'Other',

    wallets: [

      readyWallet({ projectId, chains }),

      trustWallet({ projectId, chains }),

      ledgerWallet({ projectId, chains }),

    ],

  },

]);

0.11.x Modifications importantes

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

Suivez les étapes ci-dessous pour effectuer la migration.

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

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

2. Vérifiez les changements importants dans wagmi

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

Vous pouvez voir leur guide de migration ici.

0.10.x Modifications importantes

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

Suivez les étapes ci-dessous pour effectuer la migration.

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

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

2. Vérifiez les changements importants dans wagmi

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

Vous pouvez voir leur guide de migration ici.

0.9.x Modifications importantes

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

Suivez les étapes ci-dessous pour effectuer la migration.

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

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

2. Vérifiez les changements importants dans wagmi

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

Vous pouvez voir leur guide de migration ici.

0.8.x Modifications importantes

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

Suivez les étapes ci-dessous pour effectuer la migration.

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

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

2. Vérifiez les changements importants dans wagmi

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

Vous pouvez voir leur guide de migration ici.

0.7.x Modifications importantes

Si vous créez une liste de portefeuilles personnalisés, vous devez maintenant importer chaque portefeuille individuellement pour réduire la taille du bundle. Notez que depuis que les portefeuilles ne sont plus nommés 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é avec les anciens portefeuilles 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 }),
];

0.4.x Modifications importantes

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

Suivez les étapes ci-dessous pour effectuer la migration.

1. Mettez à jour les dépendances

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

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

2. Vérifiez les changements importants dans wagmi

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

Vous pouvez voir leur guide de migration ici.

0.3.x Modifications importantes

Le paramètre chainId a été supprimé 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 affecte uniquement les consommateurs qui ont créé/consommé des portefeuilles personnalisés.

Si vous dériviez auparavant les URL RPC à partir du chainId sur createConnector, vous pouvez désormais supprimer cette logique car wagmi gère désormais 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 }),
    ],
  },
]);

0.2.x Modifications importantes

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

Suivez les étapes ci-dessous pour effectuer la migration.

1. Mettez à jour les dépendances

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

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

2. Remplacez l'importation de configureChains

Importez configureChains de wagmi au lieu de RainbowKit :

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

3. Migrez les fournisseurs

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

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

Alchemy

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 })]
);

Infura

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 })]
);

JSON RPC

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`,
+     }),
+   }),
  ]
);

Fournisseur public

Importez publicProvider de wagmi/providers/public.

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


const { chains, provider } = configureChains(

  [chain.mainnet, chain.polygon],
- [apiProvider.fallback()]
+ [publicProvider()]
);

4. Renommez le fournisseur de wagmi

Renommez WagmiProvider en WagmiConfig.

import {

- WagmiProvider
+ WagmiConfig
} from 'wagmi'



const App = () => {

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

Et voilà ! 🌈

PreviousIntroduction
InstallationNext