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

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}>
      <Profile />
    </WagmiConfig>
  )
}

import { useAccount, useConnect, useDisconnect } from 'wagmi'

function Profile() {
  const { address } = useAccount()
  const { connect } = useConnect({
    connector: binanceConnector,
  })
  const { disconnect } = useDisconnect()

  if (address)
    return (
      <div>
        Connected to {address}
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    )
  return <button onClick={() => connect()}>Connect Wallet</button>
}

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 [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 getConnector by id, you can use the following code

const connector = connectors.find(connector => {
  return connector.id === 'BinanceW3WSDK' || connector.id === 'wallet.binance.com';
});

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 packages
window.ethereum.isBinance // boolean

getDeeplink

By this way, you can guide users to open your dapp in Binance dApp browser.

import {getDeeplink} fom '@binance/w3w-utils'
getDeeplink(url, defaultChainId) // return {bnc, http}

For the response, bnc is the deeplink and http is the universal link.

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