dApp Integration

npm install @rainbow-me/rainbowkit@^2 wagmi@^2 viem@^2 @tanstack/react-query@^5

import '@rainbow-me/rainbowkit/styles.css'
import { getDefaultConfig, RainbowKitProvider, ConnectButton } from '@rainbow-me/rainbowkit'
import { oneKeyWallet, injectedWallet, walletConnectWallet } from '@rainbow-me/rainbowkit/wallets'
import { WagmiProvider } from 'wagmi'
import { mainnet } from 'wagmi/chains'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
const config = getDefaultConfig({
  appName: 'My dApp',
  wallets: [{ groupName: 'Wallets', wallets: [oneKeyWallet, injectedWallet, walletConnectWallet] }],
  projectId: 'YOUR_WALLETCONNECT_PROJECT_ID', // Get from cloud.reown.com
  chains: [mainnet],
})
 
const queryClient = new QueryClient()
 
export default function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <ConnectButton />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

// Detect OneKey using EIP-6963
let onekeyProvider = null
const onAnnounce = (event) => {
  if (event.detail.info.rdns === 'so.onekey.app.wallet') {
    onekeyProvider = event.detail.provider
  }
}
window.addEventListener('eip6963:announceProvider', onAnnounce)
window.dispatchEvent(new Event('eip6963:requestProvider'))
 
// Call from your Connect button after the user selects OneKey.
async function connectOneKey() {
  if (!onekeyProvider) throw new Error('OneKey has not announced a provider yet')
  return onekeyProvider.request({ method: 'eth_requestAccounts' })
}
// On component cleanup:
// window.removeEventListener('eip6963:announceProvider', onAnnounce)