Rainbow logo
RainbowKit
2.2.10

Visão Geral

IntroduçãoGuia de Migração

Introdução

InstalaçãoBotãoConectarTamanhos de ModalTemasCadeiasLocalizaçãoAutenticaçãoTransações Recentes

Avançado

Ganchos de ModalBotão de Conexão PersonalizadoTema PersonalizadoLista Personalizada de CarteirasCarteiras PersonalizadasCadeias PersonalizadasInformações Personalizadas do AplicativoAvatares PersonalizadosAutenticação PersonalizadaBotãoCarteiraModo Legal

Guia de Migração

Guia de Migração

Migrando RainbowKit

Alterações de quebra da versão 2.x.x

As dependências de pares wagmi e viem alcançaram 2.x.x com alterações significativas.

Siga os passos abaixo para realizar a migração.

1. Atualize RainbowKit, wagmi e viem para suas versões mais recentes

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

2. Instale a dependência de par @tanstack/react-query

Com o Wagmi v2, TanStack Query agora é uma dependência de par obrigatória.

Instale com o seguinte comando:

npm i @tanstack/react-query

3. Atualize suas configurações de RainbowKit e 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. Verifique alterações de quebra em wagmi e viem

Se você usa hooks do wagmi e ações do viem no seu dApp, você precisará seguir os guias de migração para v2:

Alterações no RainbowKit

1. Comportamento aprimorado para carteiras EIP-6963

Carteiras que suportam o novo padrão de conexão EIP-6963 (incluindo Rainbow, MetaMask e outras) agora aparecerão automaticamente em uma seção Instalado durante a experiência de Conectar Carteira. Isso garante que os usuários sempre possam encontrar suas carteiras favoritas e se conectar a dApps sem conflitos ou botões de fallback.

Os desenvolvedores continuam a ter controle total sobre a Lista de Carteiras Personalizadas para enfatizar carteiras preferenciais para os usuários finais. É encorajado que você continue a incluir a injectedWallet e a walletConnectWallet em sua lista para dar suporte a todas as plataformas.

2. Configuração do Wagmi com getDefaultConfig

Esta nova API simplifica a experiência de configuração e substitui a necessidade de usar o createConfig do Wagmi diretamente. A configuração da cadeia é simplificada, incluindo provedores públicos inferidos para transports.

A lista de carteiras padrão será incluída automaticamente, eliminando a necessidade de usar getDefaultWallets e connectorsForWallets.

Você pode criar uma Lista de Carteiras Personalizadas passando conectores de Carteiras importadas ou Personalizadas para wallets. A instância de conectores de carteira e a passagem de projectId e chains não são mais necessárias.

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

Você não precisa mais passar chains para <RainbowKitProvider>.

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

4. Cadeias Personalizadas

O tipo Chain foi alterado de acordo com o Wagmi v2, e continua a suportar os metadados iconUrl e iconBackground do 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

Exemplo com getDefaultConfig:

const config = getDefaultConfig({

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

Exemplo com 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. Carteiras Personalizadas

Os conectores de carteiras RainbowKit passaram por mudanças substanciais para dar suporte ao Wagmi v2. Consulte os docs atualizados e um exemplo de conector para atualizar quaisquer Conectores de Carteiras Personalizados no seu dApp.

Os conectores de carteiras agora também suportam o padrão EIP-6963 com a propriedade rdns. Certifique-se de que isso esteja preenchido para evitar referências duplicadas a carteiras compatíveis com EIP-6963 na sua lista de carteiras.

Alterações de quebra da versão 1.x.x

Atualizado para wagmi v1

A dependência de par wagmi foi atualizada para 1.x.x.

Siga os passos abaixo para realizar a migração.

1. Atualize RainbowKit e wagmi para sua versão mais recente

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

2. Instale a dependência de par viem

o wagmi v1 requer a dependência de par viem. Instale com o seguinte comando:

npm i viem

3. Garanta compatibilidade com pacote e preenchimento

Consulte nosso exemplo de Configuração do Webpack para Next.js para orientação de configuração para seu projeto.

Guias adicionais do framework para Vite e Remix estão disponíveis aqui.

4. Verifique alterações de quebra em wagmi

Se você usa ganchos wagmi em sua aplicação, precisará seguir o guia de migração da wagmi para v1.

Você pode ver o guia de migração deles aqui.

Alterações de quebra da versão 0.12.x

A dependência de par wagmi foi atualizada para 0.12.x.

RainbowKit adotou o conector WalletConnectLegacyConnector em wagmi para suporte contínuo ao WalletConnect v1. O suporte para o WalletConnect v2 e WalletConnectConnector estará disponível em breve como uma atualização, sem alterações de quebra.

As carteiras serão automaticamente transferidas em lançamentos futuros.

Cada dApp agora deve fornecer um projectId do WalletConnect Cloud para habilitar o WalletConnect v2. Isso deve ser concluído antes que os servidores de ponte v1 do WalletConnect sejam desativados em 28 de junho de 2023. RainbowKit preferirá silenciosamente o v1 para todas as carteiras se o projectId não for especificado.

Siga os passos abaixo para realizar a migração.

1. Atualize RainbowKit e wagmi para sua versão mais recente

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

2. Forneça um projectId da WalletConnect Cloud

Cada dApp que depende do WalletConnect agora precisa obter um projectId do WalletConnect Cloud. Isso é absolutamente gratuito e leva apenas alguns minutos.

Forneça o projectId para getDefaultWallets e conectores de carteiras individuais RainbowKit, como o seguinte:

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

    ],

  },

]);

Alterações de quebra da versão 0.11.x

A dependência de par wagmi foi atualizada para 0.11.x.

Siga os passos abaixo para realizar a migração.

1. Atualize RainbowKit e wagmi para sua versão mais recente

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

2. Verifique alterações de quebra em wagmi

Se você usa ganchos wagmi em sua aplicação, precisará verificar se sua aplicação foi afetada pelas alterações de quebra no wagmi.

Você pode ver o guia de migração deles aqui.

Alterações de quebra da versão 0.10.x

A dependência de par wagmi foi atualizada para 0.10.x.

Siga os passos abaixo para realizar a migração.

1. Atualize RainbowKit e wagmi para sua versão mais recente

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

2. Verifique alterações de quebra em wagmi

Se você usa ganchos wagmi em sua aplicação, precisará verificar se sua aplicação foi afetada pelas alterações de quebra no wagmi.

Você pode ver o guia de migração deles aqui.

Alterações de quebra da versão 0.9.x

A dependência de par wagmi foi atualizada para 0.9.x.

Siga os passos abaixo para realizar a migração.

1. Atualize RainbowKit e wagmi para sua versão mais recente

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

2. Verifique alterações de quebra em wagmi

Se você usa ganchos wagmi em sua aplicação, precisará verificar se sua aplicação foi afetada pelas alterações de quebra no wagmi.

Você pode ver o guia de migração deles aqui.

Alterações de quebra da versão 0.8.x

A dependência de par wagmi foi atualizada para 0.8.x.

Siga os passos abaixo para realizar a migração.

1. Atualize RainbowKit e wagmi para sua versão mais recente

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

2. Verifique alterações de quebra em wagmi

Se você usa ganchos wagmi em sua aplicação, precisará verificar se sua aplicação foi afetada pelas alterações de quebra no wagmi.

Você pode ver o guia de migração deles aqui.

Alterações de quebra da versão 0.7.x

Se você está criando uma lista personalizada de carteiras, agora deve importar cada carteira individualmente para reduzir o tamanho do pacote. Note que, uma vez que as carteiras não são mais nomeadas via objeto wallet, todas as carteiras agora possuem um sufixo 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 }),
];

Observe também que a camada de compatibilidade retroativa para Steakwallet foi removida. Omni deve ser usado em vez disso.

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


const wallets = [

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

Alterações de quebra da versão 0.4.x

RainbowKit atualizou a dependência de par wagmi para 0.5.x.

Siga os passos abaixo para realizar a migração.

1. Atualize as dependências

Atualize RainbowKit e wagmi para sua versão mais recente

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

2. Verifique alterações de quebra em wagmi

Se você usa ganchos wagmi em sua aplicação, precisará verificar se sua aplicação foi afetada pelas alterações de quebra no wagmi.

Você pode ver o guia de migração deles aqui.

Alterações de quebra da versão 0.3.x

Removido o parâmetro chainId do createConnector no tipo Wallet.

Observe que todas as carteiras embutidas estão usando a nova API. A maioria dos consumidores será inalterada. Esta mudança só afeta consumidores que criaram/consumiram carteiras personalizadas.

Se você anteriormente derivava URLs de RPC do chainId em createConnector, agora pode remover essa lógica, pois o wagmi agora manipula URLs de RPC internamente quando usado com 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 }),
    ],
  },
]);

Alterações de quebra da versão 0.2.x

RainbowKit atualizou a dependência de par wagmi para ^0.4.

Siga os passos abaixo para realizar a migração.

1. Atualize as dependências

Atualize RainbowKit e wagmi para sua versão mais recente

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

2. Substitua a importação de configureChains

Importe configureChains do wagmi em vez do RainbowKit:

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

3. Migre provedores

RainbowKit não exporta mais uma API apiProvider. Substitua-o pelo provedor desejado do wagmi.

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

Alchemy

Importe 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

Importe 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

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

Provedor público

Importe publicProvider de wagmi/providers/public.

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


const { chains, provider } = configureChains(

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

4. Renomeie o provedor do wagmi

Renomeie WagmiProvider para WagmiConfig.

import {

- WagmiProvider
+ WagmiConfig
} from 'wagmi'



const App = () => {

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

E você terminou! 🌈

PreviousIntrodução
InstalaçãoNext