dApp Integration

Connect your dApp to OneKey wallet with support for EVM and 20+ non-EVM chains.

Choose Your Method

Method	Best For	Framework
RainbowKit	Ready-made wallet UI, React apps	React
Web3Modal	Multi-framework wallet UI	React / Vue / JS
Web3-Onboard	Extensive customization, multi-framework	React / Vue / JS
Wagmi	Custom UI with React hooks	React
Provider API	Full control, no dependencies	Any

Quick recommendation: Use RainbowKit for React apps, Web3Modal or Web3-Onboard for Vue/vanilla JS.

Quick Start

RainbowKit (React)


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

App.tsx


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

Full Guide

Provider API (No Dependencies)


// Detect OneKey using EIP-6963
const providers = []
window.addEventListener('eip6963:announceProvider', (e) => providers.push(e.detail))
window.dispatchEvent(new Event('eip6963:requestProvider'))
 
// Find and connect to OneKey
const onekey = providers.find(p => p.info.rdns === 'so.onekey.app.wallet')
const accounts = await onekey.provider.request({ method: 'eth_requestAccounts' })

Full Guide

OneKey Detection

Property	Value
EIP-6963 `rdns`	`so.onekey.app.wallet`
Provider	`window.$onekey.ethereum`

Supported Chains

EVM: Ethereum, Polygon, BSC, Arbitrum, Optimism, Base, and all EVM-compatible chains

Non-EVM: Bitcoin, Solana, Cosmos, Aptos, Sui, TON, TRON, Polkadot, Cardano, NEAR, and more

View all Provider APIs

Resources

Changelog: cross-inpage-provider releases
Source Code: cross-inpage-provider
Issues: GitHub Issues
Live Demo: Provider Example