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/rainbowkit@2.1.2 wagmi@2.x viem@2.x @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 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>
)
}
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.
- Use Binance App to scan this QR code
- input the website that you want to test
- Click Navigate To Browser