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.
- Use Binance App to scan this QR code
- input the website that you want to test
- Click Navigate To Browser