마이그레이션 가이드
마이그레이션 가이드
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 연결 표준을 지원하는 지갑 (레인보우, 메타마스크 등 포함) 은 이제 연결 지갑 경험 중에 '설치됨' 섹션에 자동으로 표시됩니다. 이렇게 하면 사용자가 항상 자신의 선호하는 지갑을 찾아 dApps에 문제없이 연결할 수 있습니다.
개발자는 최종 사용자에게 선호하는 지갑을 강조하기 위해 사용자 지정 지갑 목록을 완전히 제어할 수 있습니다. 모든 플랫폼을 지원하기 위해 injectedWallet 및 walletConnectWallet을 목록에 계속 포함하는 것이 권장됩니다.
2. getDefaultConfig를 사용한 Wagmi 구성
이 새로운 API는 설정 경험을 단순화하고 Wagmi의 createConfig를 직접 사용할 필요를 대체합니다. 체인 설정이 단순화되며, transports에 대한 공개 제공자를 추론하는 것을 포함합니다.
기본 지갑 목록이 자동으로 포함되며, getDefaultWallets 및 connectorsForWallets 사용의 필요성을 폐지합니다.
wallets에 가져온 또는 사용자 지정 지갑 커넥터를 전달하여 사용자 지정 지갑 목록을 만들 수 있습니다. 지갑 커넥터를 인스턴스화하고 projectId 및 chains를 전달할 필요가 더 이상 없습니다.
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. 사용자 정의 체인
Wagmi v2에 맞게 Chain 유형이 변경되었으며 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 prop을 사용하여 EIP-6963 표준도 지원합니다. 지갑 목록에서 EIP-6963을 지원하는 지갑에 대한 중복 참조를 방지하기 위해 이를 채워 넣는 것이 중요합니다.
wagmi 피어 의존성이 1.x.x로 업데이트되었습니다.
아래의 단계를 따라 마이그레이션하세요.
1. RainbowKit과 wagmi를 최신 버전으로 업그레이드하세요
npm i @rainbow-me/rainbowkit@^1 wagmi@^1
2. viem 피어 의존성 설치
wagmi v1은 viem 피어 의존성이 필요합니다. 다음 명령어로 설치하세요:
참고: wagmi가 더 이상 ethers 패키지를 내부적으로 사용하지 않습니다. 그러나 Authentication API에 의존하는 경우, siwe는 여전히 ethers를 피어 의존성으로 필요로 합니다.
3. 번들러와 폴리필 호환성 확보
이전 버전의 wagmi는 ethers에 의존했고, WalletConnect에 의해 필요로 하는 fs, net, tls 모듈들이 자동으로 폴리필되었습니다. 이는 RainbowKit v1 + wagmi v1에서는 더 이상 적용되지 않으며, 이들은 viem를 기반으로 구축되었습니다.
프로젝트 설정 가이드를 위해 Next.js 웹팩 설정 및 Create React App 폴리필들 샘플을 참조하세요.
Vite 및 Remix에 대한 추가 프레임워크 가이드를 여기에서 사용할 수 있습니다.
4. wagmi에서 중대한 변경 사항 확인
애플리케이션에서 wagmi hook을 사용하는 경우, v1으로의 wagmi 마이그레이션 가이드를 따를 필요가 있습니다.
마이그레이션 가이드는 여기에서 확인할 수 있습니다.
wagmi 피어 의존성이 0.12.x로 업데이트되었습니다.
RainbowKit은 계속된 WalletConnect v1 지원을 위해 wagmi의 WalletConnectLegacyConnector 커넥터를 채택하였습니다. WalletConnect v2와 WalletConnectConnector에 대한 지원이 곧 패치 릴리스로 사용 가능해질 예정이며, 이는 기존의 변경 사항을 깨트리지 않습니다.
지갑들은 향후 릴리스에서 자동으로 전환될 것입니다.
모든 dApp은 이제 WalletConnect v2를 활성화하기 위해 WalletConnect Cloud projectId를 제공해야 합니다. 이 작업은 WalletConnect v1 브리지 서버가 2023년 6월 28일에 종료되기 전에 완료되어야 합니다. projectId가 지정되지 않은 경우 RainbowKit은 모든 지갑에 대해 조용히 v1을 선호합니다.
아래의 단계를 따라 마이그레이션하세요.
npm i @rainbow-me/rainbowkit@^0.12.0 wagmi@^0.12.0
WalletConnect에 의존하는 모든 dApp은 이제 WalletConnect Cloud에서 projectId를 획득해야합니다. 이것은 완전히 무료이며 몇 분 밖에 걸리지 않습니다.
getDefaultWallets 및 개별 RainbowKit 지갑 커넥터에 projectId를 제공하세요. 예시는 다음과 같습니다.
const projectId = 'YOUR_PROJECT_ID';
const { wallets } = getDefaultWallets({
appName: 'My RainbowKit App',
projectId,
chains,
});
const connectors = connectorsForWallets([
...wallets,
{
groupName: 'Other',
wallets: [
argentWallet({ 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>
);
};
그리고 끝났습니다! 🌈
