Quick Start

Installation

The installation process may vary depending on the technology stack you are using.

Integration

Integration with RainbowKit

Add Packages

npm install @binance/w3w-rainbow-connector @rainbow-me/rainbowkit wagmi viem

Usage

import { connectorsForWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit'import { configureChains, createConfig, WagmiConfig } from 'wagmi'import { publicProvider } from 'wagmi/providers/public'import { bsc, mainnet } from 'wagmi/chains'import binanceWallet from '@binance/w3w-rainbow-connector'
const { chains, publicClient, webSocketPublicClient } = configureChains(  [bsc, mainnet],  [publicProvider()])
const recommendedWalletList = [  {    groupName: 'Recommended',    wallets: [      injectedWallet({ chains }),      binanceWallet({ chains }),      // ...others    ],  },]const connectors = connectorsForWallets(recommendedWalletList)
const wagmiConfig = createConfig({  autoConnect: true,  connectors,  publicClient,  webSocketPublicClient,})
export default function RainbowProvider({ children }) {  return (    <WagmiConfig config={wagmiConfig}>      <RainbowKitProvider        chains={chains}      >        {children}      </RainbowKitProvider>    </WagmiConfig>  )}

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 optionsconst 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

Add Packages

npm install wagmi viem @binance/w3w-wagmi-connector

Integrate with your projects

import { getWagmiConnector } from '@binance/w3w-wagmi-connector'
import { bsc } from 'wagmi/chains'import { publicProvider } from 'wagmi/providers/public'import {  configureChains,  createClient,  WagmiConfig,} from 'wagmi'const { chains, publicClient, webSocketPublicClient } = configureChains(  [bsc, mainnet],  [publicProvider()])const Connector = getWagmiConnector()const binanceConnector = new Connector({  chains,  options: { chainId: 56, rpc: { 56: 'https://bsc-dataseed.binance.org/' } },})
const config = createConfig({  autoConnect: true,  publicClient,  webSocketPublicClient,})export default function App() {  return (    <WagmiConfig config={config}>      <Home />    </WagmiConfig>  )}

Use wagmi API

wagmi provides many useful API for you to use, here is a basic example.

import { useAccount, useConnect, useDisconnect, useSignMessage } from 'wagmi'
function Home() {  const { address, isConnected } = useAccount()  const { disconnect } = useDisconnect()  const { connect } = useConnect({connector})  const { data, isError, isLoading, isSuccess, signMessage } = useSignMessage({    message: 'hello world',  }) return (  <main>    <section>      <h2>wagmi connector</h2>      <button onClick={() => connect()}>enable</button>      <button onClick={() => disconnect()}>disconnect</button>      <button onClick={() => signMessage()}>signMessage</button>    </section>  </main>  )}

Integration with wagmi v2

Add Packages

npm install wagmi@2.x viem@2.x @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>  )}

Integrate with web3-react

Add packages

npm install @web3-react/core @ethersproject/providers @binance/w3w-web3-connector

Integrate with your project

import { getWeb3Connector } from '@binance/w3w-web3-connector'import { Web3Provider } from '@ethersproject/providers'import { Web3ReactProvider, useWeb3React } from '@web3-react/core'

function getLibrary(provider: any): Web3Provider {  const library = new Web3Provider(provider)  library.pollingInterval = 12000  return library}
export default function () {  return (    <Web3ReactProvider getLibrary={getLibrary}>      <App />    </Web3ReactProvider>  )}const Connector = getWeb3Connector()const binanceConnector = new Connector({  lng: 'zh-CN',  supportedChainIds: [1, 56],  rpc:{    56: 'https://bsc-dataseed.binance.org/'  }})function App() {  const { activate, deactivate, account, library } = useWeb3React()  async function enable() {    activate(binanceConnector)  }  return (    <main className={styles.main}>      <section>        <h2>web3 connector</h2>        <button onClick={enable}>enable</button>        <button onClick={() => deactivate()}>disconnect</button>        <button onClick={getAccount}>getAccount</button>        <button onClick={() => library.getSigner().signMessage('hello')}>signMessage</button>      </section>    </main>  )}

Utility

isInBinance

Return true if the dApp is in the dApp browser of the Binance Web3 Wallet.

import { isInBinance } from '@binance/w3w-utils'isInBinance() // return boolean
// Or you can detect without install any packageswindow.ethereum.isBinance // boolean

How to self testing dApp

We have a way that you can test dApp browser. You have to tell us the website you need to test so we can add them to whitelist.

1. Use Binance App to scan this QR code
2. input the website that you want to test
3. Click Navigate To Browser