Rainbow logo
RainbowKit
2.2.10

Übersicht

EinführungMigrations-Handbuch

Erste Schritte

InstallationConnectButtonModale GrößenThemeningKettenLokalisierungAuthentifizierungNeueste Transaktionen

Erweitert

Modal-HooksBenutzerdefinierte ConnectButtonBenutzerdefiniertes DesignBenutzerdefinierte Wallet-ListeBenutzerdefinierte WalletsBenutzerdefinierte ChainsBenutzerdefinierte App-InformationenEigene AvatareBenutzerdefinierte AuthentifizierungWalletButtonCoole Modus

Migrations-Handbuch

Migrations-Handbuch

RainbowKit migrieren

2.x.x Breaking Changes

Die wagmi und viem Peer-Abhängigkeiten haben 2.x.x mit brechenden Änderungen erreicht.

Folgen Sie den untenstehenden Schritten, um die Migration durchzuführen.

1. Aktualisieren Sie RainbowKit, wagmi und viem auf die neuesten Versionen

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

2. Installieren Sie die @tanstack/react-query Peer-Abhängigkeit

Mit Wagmi v2 ist TanStack Query jetzt eine erforderliche Peer-Abhängigkeit.

Installieren Sie es mit dem folgenden Befehl:

npm i @tanstack/react-query

3. Aktualisieren Sie Ihre RainbowKit- und Wagmi-Konfigurationen

  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. Prüfen Sie auf Breaking Changes in wagmi und viem

Wenn Sie wagmi-Hooks und viem-Aktionen in Ihrer dApp verwenden, müssen Sie die Migrationshandbücher für v2 befolgen:

Änderungen in RainbowKit

1. Verbessertes Verhalten für EIP-6963 Wallets

Wallets, die den neuen EIP-6963-Verbindungsstandard unterstützen (einschließlich Rainbow, MetaMask und mehr), erscheinen jetzt automatisch in einem Installierte Abschnitt während der Wallet-Verbindungserfahrung. Dies stellt sicher, dass Benutzer immer ihre bevorzugten Wallets finden und ohne Konflikte oder Fallback-Buttons zu dApps verbinden können.

Entwickler haben weiterhin die volle Kontrolle über die benutzerdefinierte Wallet-Liste, um bevorzugte Wallets für Endbenutzer hervorzuheben. Es wird empfohlen, dass Sie die injectedWallet und walletConnectWallet in Ihre Liste aufnehmen, um alle Plattformen zu unterstützen.

2. Wagmi Konfiguration mit getDefaultConfig

Diese neue API vereinfacht die Konfigurationserfahrung und ersetzt die Notwendigkeit, Wagmis createConfig direkt zu verwenden. Die Konfiguration der Chains wird vereinfacht, einschließlich automatisch abgeleiteter öffentlicher Anbieter für transports.

Die Standard-Wallet-Liste wird automatisch enthalten sein, wodurch die Notwendigkeit entfällt, getDefaultWallets und connectorsForWallets zu verwenden.

Sie können eine benutzerdefinierte Wallet-Liste erstellen, indem Sie importierte oder benutzerdefinierte Wallet-Connectors an wallets übergeben. Die Instanziierung von Wallet-Connectors und die Übergabe von projectId und chains sind nicht mehr erforderlich.

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

Sie müssen keine chains mehr an <RainbowKitProvider> übergeben.

- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>

4. Benutzerdefinierte Chains

Der Chain-Typ hat sich gemäß Wagmi v2 geändert und unterstützt weiterhin RainbowKits iconUrl und iconBackground Metadaten.

+ 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

Beispiel mit getDefaultConfig:

const config = getDefaultConfig({

+ chains: [
+   avalanche, /* custom chain */
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   }, /* metadata overides */
+ ],
});

Beispiel mit 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. Benutzerdefinierte Wallets

RainbowKit Wallet-Connectors haben erhebliche Änderungen durchlaufen, um Wagmi v2 zu unterstützen. Verweisen Sie auf die aktualisierten Dokumentationen und einen Beispiel-Connector, um alle benutzerdefinierten Wallet-Connectors in Ihrer dApp zu aktualisieren.

Wallet-Connectors unterstützen jetzt auch den EIP-6963-Standard mit der rdns-Eigenschaft. Stellen Sie sicher, dass diese ausgefüllt ist, um doppelte Referenzen auf EIP-6963 unterstützende Wallets in Ihrer Wallet-Liste zu verhindern.

1.x.x Breaking Changes

Aktualisiert auf wagmi v1

Die wagmi Peer-Abhängigkeit wurde auf 1.x.x aktualisiert.

Folgen Sie den untenstehenden Schritten, um die Migration durchzuführen.

1. Aktualisieren Sie RainbowKit und wagmi auf die neuesten Versionen

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

2. Installieren Sie die viem Peer-Abhängigkeit

wagmi v1 benötigt die viem Peer-Abhängigkeit. Installieren Sie es mit dem folgenden Befehl:

npm i viem

3. Stellen Sie die Kompatibilität des Bundlers und der Polyfills sicher

Verweisen Sie auf unsere Next.js Webpack Config-Beispiel für eine Anleitung zur Konfiguration Ihres Projekts.

Weitere Framework-Anleitungen für Vite und Remix sind hier verfügbar.

4. Prüfen Sie auf Breaking Changes in wagmi

Wenn Sie wagmi Hooks in Ihrer Anwendung verwenden, müssen Sie dem Migrationsleitfaden von wagmi zu v1 folgen.

Sie können deren Migrationsleitfaden hier einsehen.

0.12.x Breaking Changes

Die wagmi Peer-Abhängigkeit wurde auf 0.12.x aktualisiert.

RainbowKit hat den WalletConnectLegacyConnector in wagmi übernommen, um weiterhin WalletConnect v1 zu unterstützen. Die Unterstützung für WalletConnect v2 und den WalletConnectConnector wird bald als Patch-Veröffentlichung ohne Breaking Changes verfügbar sein.

Wallets werden in zukünftigen Veröffentlichungen automatisch migriert.

Jede dApp muss jetzt eine WalletConnect Cloud projectId bereitstellen, um WalletConnect v2 zu aktivieren. Dies muss vor dem Abschalten der WalletConnect v1 Bridge-Server am 28. Juni 2023 erledigt sein. RainbowKit bevorzugt stillschweigend v1 für alle Wallets, wenn projectId nicht angegeben ist.

Folgen Sie den untenstehenden Schritten, um die Migration durchzuführen.

1. Aktualisieren Sie RainbowKit und wagmi auf die neuesten Versionen

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

2. Geben Sie eine WalletConnect Cloud projectId an

Jede dApp, die auf WalletConnect angewiesen ist, muss jetzt eine projectId von WalletConnect Cloud erhalten. Dies ist absolut kostenlos und dauert nur wenige Minuten.

Geben Sie die projectId an getDefaultWallets und einzelne RainbowKit Wallet-Connectors wie folgt:

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 Breaking Changes

Die wagmi Peer-Abhängigkeit wurde auf 0.11.x aktualisiert.

Folgen Sie den untenstehenden Schritten, um die Migration durchzuführen.

1. Aktualisieren Sie RainbowKit und wagmi auf die neuesten Versionen

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

2. Prüfen Sie auf Breaking Changes in wagmi

Wenn Sie wagmi Hooks in Ihrer Anwendung verwenden, müssen Sie prüfen, ob Ihre Anwendung von den Breaking Changes in wagmi betroffen ist.

Sie können deren Migrationsleitfaden hier einsehen.

0.10.x Breaking Changes

Die wagmi Peer-Abhängigkeit wurde auf 0.10.x aktualisiert.

Folgen Sie den untenstehenden Schritten, um die Migration durchzuführen.

1. Aktualisieren Sie RainbowKit und wagmi auf die neuesten Versionen

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

2. Prüfen Sie auf Breaking Changes in wagmi

Wenn Sie wagmi Hooks in Ihrer Anwendung verwenden, müssen Sie prüfen, ob Ihre Anwendung von den Breaking Changes in wagmi betroffen ist.

Sie können deren Migrationsleitfaden hier einsehen.

0.9.x Breaking Changes

Die wagmi Peer-Abhängigkeit wurde auf 0.9.x aktualisiert.

Folgen Sie den untenstehenden Schritten, um die Migration durchzuführen.

1. Aktualisieren Sie RainbowKit und wagmi auf die neuesten Versionen

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

2. Prüfen Sie auf Breaking Changes in wagmi

Wenn Sie wagmi Hooks in Ihrer Anwendung verwenden, müssen Sie prüfen, ob Ihre Anwendung von den Breaking Changes in wagmi betroffen ist.

Sie können deren Migrationsleitfaden hier einsehen.

0.8.x Breaking Changes

Die wagmi Peer-Abhängigkeit wurde auf 0.8.x aktualisiert.

Folgen Sie den untenstehenden Schritten, um die Migration durchzuführen.

1. Aktualisieren Sie RainbowKit und wagmi auf die neuesten Versionen

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

2. Prüfen Sie auf Breaking Changes in wagmi

Wenn Sie wagmi Hooks in Ihrer Anwendung verwenden, müssen Sie prüfen, ob Ihre Anwendung von den Breaking Changes in wagmi betroffen ist.

Sie können deren Migrationsleitfaden hier einsehen.

0.7.x Breaking Changes

Wenn Sie eine benutzerdefinierte Wallet-Liste erstellen, müssen Sie jetzt jedes Wallet einzeln importieren, um die Bundle-Größe zu reduzieren. Da Wallets nicht mehr über das wallet-Objekt namespacesiert sind, haben jetzt alle Wallets ein Wallet-Suffix.

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

Beachten Sie auch, dass die Steakwallet-Rückwärtskompatibilitätsschicht entfernt wurde. Omni sollte stattdessen verwendet werden.

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


const wallets = [

-  wallet.steak({ chains }),
+  omniWallet({ chains }),
];

0.4.x Breaking Changes

RainbowKit hat die wagmi Peer-Abhängigkeit auf 0.5.x aktualisiert.

Folgen Sie den untenstehenden Schritten, um die Migration durchzuführen.

1. Abhängigkeiten aktualisieren

Aktualisieren Sie RainbowKit und wagmi auf die neuesten Versionen

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

2. Prüfen Sie auf Breaking Changes in wagmi

Wenn Sie wagmi Hooks in Ihrer Anwendung verwenden, müssen Sie prüfen, ob Ihre Anwendung von den Breaking Changes in wagmi betroffen ist.

Sie können deren Migrationsleitfaden hier einsehen.

0.3.x Breaking Changes

Der chainId-Parameter wurde von createConnector auf dem Wallet-Typ entfernt.

Bitte beachten Sie, dass alle eingebauten Wallets die neue API verwenden. Die meisten Kunden sind davon nicht betroffen. Diese Änderung betrifft nur Nutzer, die benutzerdefinierte Wallets erstellt/verwendet haben.

Haben Sie zuvor RPC-URLs von der chainId auf createConnector abgeleitet, können Sie diese Logik jetzt entfernen, da wagmi jetzt RPC-URLs intern behandelt, wenn es mit configureChains verwendet wird.

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 Breaking Changes

RainbowKit hat die wagmi Peer-Abhängigkeit auf ^0.4 aktualisiert.

Folgen Sie den untenstehenden Schritten, um die Migration durchzuführen.

1. Abhängigkeiten aktualisieren

Aktualisieren Sie RainbowKit und wagmi auf die neuesten Versionen

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

2. configureChains Import ersetzen

Importieren Sie configureChains von wagmi anstatt von RainbowKit:

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

3. Provider migrieren

RainbowKit exportiert keine apiProvider API mehr. Ersetzen Sie sie durch Ihren gewünschten Provider von wagmi.

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

Alchemy

Importieren Sie alchemyProvider von 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

Importieren Sie infuraProvider von 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

Importieren Sie jsonRpcProvider von 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`,
+     }),
+   }),
  ]
);

Öffentlicher Anbieter

Importieren Sie publicProvider von wagmi/providers/public.

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


const { chains, provider } = configureChains(

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

4. wagmis Provider umbenennen

Benennen Sie WagmiProvider in WagmiConfig um.

import {

- WagmiProvider
+ WagmiConfig
} from 'wagmi'



const App = () => {

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

Und das war's! 🌈

PreviousEinführung
InstallationNext