RainbowKit와 Wagmi v2로 마이그레이션하기

wagmi 및 viem 피어 의존성이 2.x.x로 버전이 올라갔으며 호환되지 않는 변경이 있습니다.

아래의 단계들을 따라 마이그레이션하세요.

1. RainbowKit, wagmi, 및 viem을 최신 버전으로 업그레이드하세요

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

2. @tanstack/react-query 피어 의존성을 설치하세요

Wagmi v2와 함께, 이제 TanStack Query가 필수 피어 의존성입니다.

다음 명령어로 설치하세요:

npm i @tanstack/react-query

3. RainbowKit과 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. wagmi 및 viem의 주요 변경사항 확인

당신의 dApp에서 wagmi 후크와 viem 작업을 사용하는 경우, v2 마이그레이션 가이드를 따라야 합니다:

RainbowKit 변경사항

1. EIP-6963 지갑의 개선된 동작

새로운 EIP-6963 연결 표준을 지원하는 지갑(Rainbow, MetaMask 등 포함)은 이제 지갑 연결 시 설치됨 섹션에 자동으로 표시되어 사용자들이 좋아하는 지갑을 쉽게 찾고 dApp에 충돌 없이 연결할 수 있습니다.

개발자들은 여전히 최종 사용자를 위해 선호할 수 있는 커스텀 월렛 목록에 대한 완전한 통제권을 가지고 있습니다. 모든 플랫폼을 지원하기 위해 injectedWallet과 walletConnectWallet을 목록에 계속 포함시키는 것이 권장됩니다.

2. getDefaultConfig을 사용한 Wagmi 구성

이 새로운 API는 구성 경험을 간단하게 하고 Wagmi의 createConfig를 직접 사용할 필요를 대체합니다. 체인 구성은 transports에 대한 공용 제공자 추론을 포함하여 간소화됩니다.

기본 월렛 목록이 자동으로 포함되어, getDefaultWallets 및 connectorsForWallets를 사용하는 필요가 없어졌습니다.

wallets에 가져온 또는 사용자 정의 지갑 커넥터를 전달하여 사용자정의 지갑 목록을 만들 수 있습니다. 이제 projectId와 체인을 전달할 필요가 없습니다.

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

더 이상 <RainbowKitProvider>에 chains를 전달할 필요가 없습니다.

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

4. 사용자 정의 체인

Chain 타입은 Wagmi v2에 따라 변경되었고, RainbowKit의 iconUrl 및 iconBackground 메타데이터 지원을 계속합니다.

+ 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

getDefaultConfig 예시:

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

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. 사용자 정의 지갑

RainbowKit 월렛 커넥터는 Wagmi v2를 지원하기 위해 상당한 변경사항을 겪었습니다. 업데이트된 문서와 예시 커넥터를 참고하여 당신의 dApp에서 커스텀 월렛 커넥터를 업그레이드하세요.

지갑 커넥터는 이제 rdns 속성을 사용하여 EIP-6963 표준을 지원합니다. 이 속성을 채워야 지갑 목록에 EIP-6963 지원 지갑의 중복 참조를 방지할 수 있습니다.

GitHub에서 RainbowKit v2에 대한 문제점이나 피드백을 여기에서 보고하세요.