마이그레이션 가이드
마이그레이션 가이드
RainbowKit 마이그레이션
wagmi 및 viem 피어 의존성이 2.x.x로 버전이 올라갔으며 호환되지 않는 변경이 있습니다.
아래의 단계들을 따라 마이그레이션하세요.
1. RainbowKit, wagmi, 및 viem을 최신 버전으로 업그레이드하세요
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 마이그레이션 가이드를 따라야 합니다:
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 overides */
+ ],
});
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 지원 지갑의 중복 참조를 방지할 수 있습니다.
wagmi 피어 의존성이 1.x.x로 업데이트되었습니다.
아래의 단계들을 따라 마이그레이션하세요.
1. RainbowKit과 wagmi를 최신 버전으로 업그레이드하세요
npm i @rainbow-me/rainbowkit@^1 wagmi@^1
2. viem 피어 의존성을 설치하세요
wagmi v1은 viem 피어 의존성을 요구합니다. 다음 명령으로 설치하세요:
3. 번들러 및 폴리필 호환성 보장
프로젝트 구성 지침에 대한 Next.js Webpack Config 샘플을 참조하세요.
Vite 및 Remix에 대한 추가 프레임워크 가이드는 여기에서 사용할 수 있습니다.
4. wagmi의 주요 변경사항 확인
앱에서 wagmi 후크를 사용하는 경우 wagmi의 v1 마이그레이션 가이드를 따라야 합니다.
마이그레이션 가이드는 여기서 확인할 수 있습니다.
wagmi 피어 의존성이 0.12.x로 업데이트되었습니다.
RainbowKit은 WalletConnect v1 지원을 지속하기 위해 wagmi에서 WalletConnectLegacyConnector 커넥터를 채택했습니다. WalletConnect v2 및 WalletConnectConnector에 대한 지원은 곧 패치 릴리스로 제공되며 주요 변경 사항은 없습니다.
지갑은 이후 릴리즈에서 자동으로 전환됩니다.
모든 dApp은 이제 WalletConnect v2를 활성화하기 위해 WalletConnect Cloud projectId를 제공해야 합니다. 이는 무료이며 몇 분 안에 완료할 수 있습니다. RainbowKit은 지정되지 않은 경우 모든 지갑에 대해 v1을 조용히 선호할 것입니다.
아래의 단계들을 따라 마이그레이션하세요.
npm i @rainbow-me/rainbowkit@^0.12.0 wagmi@^0.12.0
이제 WalletConnect에 의존하는 모든 dApp은 WalletConnect Cloud에서 프로젝트 ID를 얻어야 합니다. 이는 완전 무료이며 몇 분밖에 걸리지 않습니다.
projectId를 getDefaultWallets 및 개별 RainbowKit 지갑 커넥터에 제공하세요:
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 }),
],
},
]);
wagmi 피어 의존성이 0.11.x로 업데이트되었습니다.
아래의 단계들을 따라 마이그레이션하세요.
npm i @rainbow-me/rainbowkit@^0.11.0 wagmi@^0.11.0
앱에서 wagmi 후크를 사용하는 경우 wagmi의 주요 변경 사항에 대한 앱의 영향 여부를 확인해야 합니다.
마이그레이션 가이드는 여기서 확인할 수 있습니다.
wagmi 피어 의존성이 0.10.x로 업데이트되었습니다.
아래의 단계들을 따라 마이그레이션하세요.
npm i @rainbow-me/rainbowkit@^0.10.0 wagmi@^0.10.0
앱에서 wagmi 후크를 사용하는 경우 wagmi의 주요 변경 사항에 대한 앱의 영향 여부를 확인해야 합니다.
마이그레이션 가이드는 여기서 확인할 수 있습니다.
wagmi 피어 의존성이 0.9.x로 업데이트되었습니다.
아래의 단계들을 따라 마이그레이션하세요.
npm i @rainbow-me/rainbowkit@^0.9.0 wagmi@^0.9.0
앱에서 wagmi 후크를 사용하는 경우 wagmi의 주요 변경 사항에 대한 앱의 영향 여부를 확인해야 합니다.
마이그레이션 가이드는 여기서 확인할 수 있습니다.
wagmi 피어 의존성이 0.8.x로 업데이트되었습니다.
아래의 단계들을 따라 마이그레이션하세요.
npm i @rainbow-me/rainbowkit@^0.8.0 wagmi@^0.8.0
앱에서 wagmi 후크를 사용하는 경우 wagmi의 주요 변경 사항에 대한 앱의 영향 여부를 확인해야 합니다.
마이그레이션 가이드는 여기서 확인할 수 있습니다.
사용자 정의 지갑 목록을 생성하는 경우 번들 크기를 줄이기 위해 이제 각 지갑을 개별적으로 가져와야 합니다. 지갑이 더 이상 wallet 객체를 통해 네임스페이스되지 않으므로 모든 지갑에는 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 }),
];
Steakwallet 역호환성 레이어가 제거되었습니다. Omni를 대신 사용해야 합니다.
-import { wallet } from '@rainbow-me/rainbowkit';
+import { omniWallet } from '@rainbow-me/rainbowkit/wallets';
const wallets = [
- wallet.steak({ chains }),
+ omniWallet({ chains }),
];
RainbowKit은 wagmi 피어 의존성을 0.5.x로 업데이트했습니다.
아래의 단계들을 따라 마이그레이션하세요.
RainbowKit 및 wagmi를 최신 버전으로 업그레이드하세요
npm i @rainbow-me/rainbowkit@^0.4.0 wagmi@^0.5.0
앱에서 wagmi 후크를 사용하는 경우 wagmi의 주요 변경 사항에 대한 앱의 영향 여부를 확인해야 합니다.
마이그레이션 가이드는 여기서 확인할 수 있습니다.
Wallet 유형의 createConnector에서 chainId 매개변수를 제거했습니다.
모든 내장 지갑이 새로운 API를 사용하고 있음을 유의하십시오. 대부분의 소비자는 영향받지 않습니다. 이 변경은 사용자 정의 지갑를 만들거나 사용하는 소비자에게만 영향을 미칩니다.
이전에 createConnector의 chainId에서 RPC URL을 도출한 경우, wagmi가 이제 configureChains와 함께 사용할 때 RPC URL을 내부적으로 처리하므로 해당 논리를 제거할 수 있습니다.
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은 wagmi 피어 의존성을 ^0.4로 업데이트했습니다.
아래의 단계들을 따라 마이그레이션하세요.
RainbowKit 및 wagmi를 최신 버전으로 업그레이드하세요
npm i @rainbow-me/rainbowkit@^0.2.0 wagmi@^0.4.2
RainbowKit 대신 wagmi에서 configureChains를 가져옵니다:
- import { configureChains } from '@rainbow-me/rainbowkit';
+ import { configureChains } from 'wagmi';
RainbowKit은 더 이상 apiProvider API를 내보내지 않습니다. wagmi에서 원하는 제공자로 대체하십시오.
- import { apiProvider } from '@rainbow-me/rainbowkit';
wagmi/providers/alchemy에서 alchemyProvider를 가져옵니다.
+ 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 })]
);
wagmi/providers/infura에서 infuraProvider를 가져옵니다.
+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 })]
);
wagmi/providers/jsonRpc에서 jsonRpcProvider를 가져옵니다.
+ 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`,
+ }),
+ }),
]
);
wagmi/providers/public에서 publicProvider를 가져옵니다.
+ import { publicProvider } from 'wagmi/providers/public';
const { chains, provider } = configureChains(
[chain.mainnet, chain.polygon],
- [apiProvider.fallback()]
+ [publicProvider()]
);
WagmiProvider를 WagmiConfig로 이름을 변경합니다.
import {
- WagmiProvider
+ WagmiConfig
} from 'wagmi'
const App = () => {
return (
- <WagmiProvider client={wagmiClient}>...</WagmiProvider>
+ <WagmiConfig client={wagmiClient}>...</WagmiConfig>
);
};
이게 다입니다! 🌈
