EVM-Compatible Provider
Provider API
The Provider API is a JavaScript API that connects wallets with DApps. When your DApp runs inside the Binance App's DApp browser, the provider window.binancew3w.ethereum is automatically injected, allowing you to read on-chain data, sign messages, and send transactions.
If your DApp runs in a standalone browser (not inside Binance App), use WalletConnect v2 to connect with Binance Web3 Wallet. No proprietary SDK is needed.
Below are some common usage examples:
// Wallet connection
if (typeof window.binancew3w?.ethereum !== 'undefined') {
try {
const accounts = await window.binancew3w.ethereum.request({
method: 'eth_requestAccounts'
});
console.log("connected:", accounts[0]);
} catch (error) {
console.error("connection rejected:", error);
}
} else {
alert("Please install wallet!");
}
// Send transaction
const transactionParameters = {
from: accounts[0], // sender address
to: '0xRecipientAddress', // recipient address
value: '0xDE0B6B3A7640000',
gasLimit: '0x5208', // 21000 gas
};
try {
const txHash = await window.binancew3w.ethereum.request({
method: 'eth_sendTransaction',
params: [transactionParameters],
});
console.log("Transaction hash:", txHash);
} catch (error) {
console.error("Transaction failed:", error);
}
// Listen for account changes
window.binancew3w.ethereum.on('accountsChanged', (accounts) => {
if (accounts.length === 0) {
console.log("Wallet has been disconnected");
} else {
console.log("Current account:", accounts[0]);
}
});
// Listen for chain changes
window.binancew3w.ethereum.on('chainChanged', (chainId) => {
console.log("Current chain id:", chainId);
});
Recommended Integration
WalletConnect v2
Binance Web3 Wallet is registered on WalletConnect Cloud. Any DApp that integrates WalletConnect v2 will automatically show Binance Wallet in the wallet selection list — no Binance-specific package is needed.
Below are examples using popular libraries. Choose the one that fits your project.
Using Reown AppKit (recommended)
Reown AppKit (formerly Web3Modal) is WalletConnect's official solution for wallet connections.
Install packages:
npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @tanstack/react-query
Setup:
import { createAppKit } from '@reown/appkit/react'
import { WagmiProvider } from 'wagmi'
import { mainnet, bsc, arbitrum } from '@reown/appkit/networks'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
const queryClient = new QueryClient()
// Get your projectId from https://dashboard.reown.com
const projectId = 'YOUR_PROJECT_ID'
const metadata = {
name: 'My DApp',
description: 'My DApp Description',
url: 'https://mydapp.com',
icons: ['https://mydapp.com/icon.png']
}
const networks = [mainnet, bsc, arbitrum]
const wagmiAdapter = new WagmiAdapter({
networks,
projectId,
})
createAppKit({
adapters: [wagmiAdapter],
networks,
projectId,
metadata,
})
export default function App({ children }) {
return (
<WagmiProvider config={wagmiAdapter.wagmiConfig}>
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
</WagmiProvider>
)
}
Then add the connect button anywhere in your app:
<appkit-button />
That's it. Binance Web3 Wallet will appear in the wallet list automatically.
Using RainbowKit
If your project uses RainbowKit, the standard setup with getDefaultConfig already includes WalletConnect support, which means Binance Web3 Wallet works out of the box — no custom connector needed.
Install packages:
npm install @rainbow-me/rainbowkit wagmi viem @tanstack/react-query
Setup:
import '@rainbow-me/rainbowkit/styles.css'
import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit'
import { WagmiProvider } from 'wagmi'
import { mainnet, bsc, arbitrum } from 'wagmi/chains'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
const config = getDefaultConfig({
appName: 'My DApp',
projectId: 'YOUR_PROJECT_ID', // Get from https://cloud.walletconnect.com
chains: [mainnet, bsc, arbitrum],
})
const queryClient = new QueryClient()
export default function App({ children }) {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider>
{children}
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
)
}
With getDefaultConfig, RainbowKit includes WalletConnect support by default. Binance Web3 Wallet will appear in the wallet selection modal.
If you were previously using @binance/w3w-rainbow-connector-v2, you can remove it. The standard RainbowKit setup already supports Binance Wallet via WalletConnect v2.
Injected Provider (In-App DApp Browser)
When your DApp runs inside the Binance App's DApp browser, window.binancew3w.ethereum is automatically available. You can use wagmi's injected connector to target it directly.
Using wagmi injected connector
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { http, createConfig, WagmiProvider } from 'wagmi'
import { injected } from 'wagmi/connectors'
import { bsc, mainnet } from 'wagmi/chains'
const config = createConfig({
chains: [mainnet, bsc],
connectors: [
injected({
target: {
id: 'wallet.binance.com',
name: 'Binance Web3 Wallet',
provider: () => window.binancew3w.ethereum,
},
}),
],
transports: {
[mainnet.id]: http(),
[bsc.id]: http(),
},
})
const queryClient = new QueryClient()
export default function App({ children }) {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
</WagmiProvider>
)
}
EIP-6963 Auto-Discovery
Binance Web3 Wallet supports the EIP-6963 provider discovery standard. If your DApp uses EIP-6963 compliant libraries (such as wagmi v2+ or mipd), Binance Wallet will be auto-detected without any extra configuration.
Utility
isInBinance
Returns true if the DApp is running inside the Binance App's DApp browser.
// Detect without installing any packages (recommended)
const isInBinance = typeof window.binancew3w?.ethereum !== 'undefined'
// Or check via window.ethereum
window.ethereum?.isBinance // boolean
You can also use the @binance/w3w-utils package:
import { isInBinance } from '@binance/w3w-utils'
isInBinance() // returns boolean
Legacy SDK Integration (Deprecated)
Click to expand deprecated SDK integration methods
The following integration methods use Binance's proprietary connector packages. These packages are deprecated and will not receive further updates. Please migrate to the Recommended Integration methods above.
Integration with RainbowKit 2.x
Add Packages
npm install @binance/w3w-rainbow-connector-v2 @rainbow-me/[email protected] [email protected] [email protected] @tanstack/react-query
Usage
import '@rainbow-me/rainbowkit/styles.css'
import { connectorsForWallets, RainbowKitProvider, WalletList } from '@rainbow-me/rainbowkit'
import { injectedWallet } from '@rainbow-me/rainbowkit/wallets'
import { WagmiProvider, createConfig, http } from 'wagmi'
import { bsc, mainnet, sepolia } from 'wagmi/chains'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import binanceWallet from '@binance/w3w-rainbow-connector-v2'
const WALLET_CONNECT_PROJECT_ID = 'xxxxxxxxxx'
const APP_NAME = 'xxx'
const recommendedWalletList: WalletList = [
{
groupName: 'Recommended',
wallets: [
injectedWallet,
binanceWallet,
],
},
]
const connectors = connectorsForWallets(
recommendedWalletList,
{ projectId: WALLET_CONNECT_PROJECT_ID, appName: APP_NAME }
)
const config = createConfig({
ssr: true,
connectors,
chains: [mainnet, sepolia, bsc],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
[bsc.id]: http(),
},
})
const queryClient = new QueryClient()
export default function RainbowProvider({ children }) {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider>{children}</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
)
}
Integration with BlockNative
Add Packages
npm install @web3-onboard/core @binance/w3w-blocknative-connector
Usage
import Onboard from '@web3-onboard/core'
import binanceModule from '@binance/w3w-blocknative-connector'
// initialize the module with options
const binance = binanceModule({options:{lng:'en'}})
// can also initialize with no options...
// const binance = binanceModule()
const onboard = Onboard({
// ... other Onboard options
wallets: [
binance
//... other wallets
]
})
const connectedWallets = await onboard.connectWallet()
console.log(connectedWallets)
Integration with wagmi v2
Add Packages
npm install [email protected] [email protected] @tanstack/react-query @binance/w3w-wagmi-connector-v2
Integrate with your projects
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { http, createConfig, WagmiProvider } from 'wagmi'
import { injected } from 'wagmi/connectors'
import { getWagmiConnectorV2 } from '@binance/w3w-wagmi-connector-v2'
import { bsc, mainnet, sepolia } from 'wagmi/chains'
const connector = getWagmiConnectorV2()
const config = createConfig({
chains: [mainnet, sepolia, bsc],
connectors: [injected(), connector()],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
[bsc.id]: http(),
},
})
const queryClient = new QueryClient()
export default function WagmiV2() {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<Home />
</QueryClientProvider>
</WagmiProvider>
)
}
Use wagmi v2 API
wagmi v2 provides many useful API for you to use, here is a basic example.
import { Connector, useConnect, useDisconnect, useSignMessage } from 'wagmi'
function WalletOption({ connector, onClick }: { connector: Connector, onClick: () => void}) {
const [ready, setReady] = React.useState(false)
React.useEffect(() => {
;(async () => {
const provider = await connector.getProvider()
setReady(!!provider)
})()
}, [connector])
return (
<button disabled={!ready} onClick={onClick}>
{connector.name}
</button>
)
}
function Home() {
const { connectors, connect } = useConnect()
const { disconnect } = useDisconnect()
const { signMessage, data } = useSignMessage()
return (
<main>
<section>
<h2>wagmi v2 connector</h2>
<div>
{connectors.map((connector) => (
<WalletOption
key={connector.uid}
connector={connector}
onClick={() => connect({ connector })}
/>
))}
</div>
<button onClick={() => disconnect()}>disconnect</button>
<button onClick={() => signMessage()}>signMessage</button>
</section>
</main>
)
}
Get connector by id from wagmi
If you need to get a connector by id, you can use the following code:
const connector = connectors.find(connector => {
return connector.id === 'BinanceW3WSDK' || connector.id === 'wallet.binance.com';
});
Wagmi injected connector
If you like to inject Binance web3 wallet, you can use the following code
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { http, createConfig, WagmiProvider } from 'wagmi' // wagmi v2 API
import { injected } from 'wagmi/connectors'
import { bsc, mainnet, sepolia } from 'wagmi/chains'
const config = createConfig({
ssr: true,
chains: [mainnet, sepolia, bsc],
connectors: [
injected({
target: { // Provide the injected target to avoid window.ethereum provider overwrite conflict
id: 'wallet.binance.com',
name: 'Binance Wallet Injected',
provider: () => window.binancew3w.ethereum,
},
}),
],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
[bsc.id]: http(),
},
})
const queryClient = new QueryClient()
export default function WagmiV2Injected() {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<Home />
</QueryClientProvider>
</WagmiProvider>
)
}
Troubleshooting
buffer is not defined
While using wagmi or RainbowKit with the deprecated connectors, if you are using regular React (not SSR), you may encounter the error buffer is not defined.
You can try to install buffer package:
npm install buffer
// src/index.ts
import { Buffer } from 'buffer'
window.Buffer = Buffer
// public/index.html
<script>
var global = global || window
</script>
Non-React project
For Non-React project, you can refer this example: https://github.com/sunopar/test-sdk/blob/main/src/app/ethereum/page.js
Example code
Here is the example project which integrates the deprecated SDK: https://github.com/sunopar/test-sdk