Sur cette page

Intégration dApp

Connectez votre dApp au portefeuille OneKey via un fournisseur propre à une chaîne ou une bibliothèque de connexion de portefeuilles.

Choisissez votre méthode

Méthode	Adapté à	Framework
RainbowKit	Interface de portefeuille prête à l’emploi, applications React	React
Web3Modal	Interface de portefeuille pour plusieurs frameworks	React / Vue / JS
Web3-Onboard	Personnalisation poussée, plusieurs frameworks	React / Vue / JS
Wagmi	Interface personnalisée avec des hooks React	React
API du fournisseur	Contrôle total, aucune dépendance	Tous

Recommandation rapide : Utilisez RainbowKit pour les applications React, Web3Modal ou Web3-Onboard pour Vue/JS natif.

Démarrage rapide

RainbowKit (React)


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

App.tsx


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>
  )
}

Guide complet

API du fournisseur (sans dépendances)


// 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)

Guide complet

Détection de OneKey

Propriété	Valeur
EIP-6963 `rdns`	`so.onekey.app.wallet`
Fournisseur	`window.$onekey.ethereum`

Chaînes prises en charge

EVM : Ethereum et les réseaux EVM pris en charge, dont Polygon, BSC, Arbitrum, Optimism et Base

Hors EVM : Bitcoin, Solana, Cosmos, Aptos, Sui, TON, TRON, Polkadot, Cardano, NEAR, et plus encore

Voir toutes les API de fournisseur

Ressources

Journal des modifications : Versions de cross-inpage-provider
Code source : cross-inpage-provider
Problèmes : Issues GitHub
Démonstration en direct : Exemple de fournisseur