dApp 集成

连接你的 dApp 到 OneKey 钱包，支持 EVM 和 20+ 条非 EVM 链。

选择集成方式

方式	适用场景	框架
RainbowKit	现成钱包 UI，React 应用	React
Web3Modal	多框架钱包 UI	React / Vue / JS
Web3-Onboard	高度定制化，多框架支持	React / Vue / JS
Wagmi	自定义 UI + React hooks	React
Provider API	完全控制，无依赖	任意

快速建议： React 应用使用 RainbowKit，Vue/原生 JS 使用 Web3Modal 或 Web3-Onboard。

快速开始

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', // 从 cloud.walletconnect.com 获取
  chains: [mainnet],
})
 
export default function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={new QueryClient()}>
        <RainbowKitProvider>
          <ConnectButton />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

完整指南

Provider API（无依赖）


// 使用 EIP-6963 检测 OneKey
const providers = []
window.addEventListener('eip6963:announceProvider', (e) => providers.push(e.detail))
window.dispatchEvent(new Event('eip6963:requestProvider'))
 
// 查找并连接 OneKey
const onekey = providers.find(p => p.info.rdns === 'so.onekey.app.wallet')
const accounts = await onekey.provider.request({ method: 'eth_requestAccounts' })

完整指南

OneKey 检测

属性	值
EIP-6963 `rdns`	`so.onekey.app.wallet`
Provider	`window.$onekey.ethereum`

支持的链

EVM： Ethereum, Polygon, BSC, Arbitrum, Optimism, Base 及所有 EVM 兼容链

非 EVM： Bitcoin, Solana, Cosmos, Aptos, Sui, TON, TRON, Polkadot, Cardano, NEAR 等

查看所有 Provider API

资源

更新日志： cross-inpage-provider releases
源代码： cross-inpage-provider
问题反馈： GitHub Issues
在线演示： Provider 示例