Quick Start

Prerequisites

Before you begin, please ensure that you have the following:

1. Access to the Wallet SDK (access appeal: https://forms.gle/TzuHykhevbbavdzV8).
2. A compatible development environment (Node.js, JavaScript/TypeScript, or other relevant technology)

Installation

The installation process may vary depending on the technology stack you are using. The instructions below will not cover the specific installation of the Wallet SDK.

Integration

Integration with wagmi

Add Packages

npm install wagmi ethers@^5

Integrate with your projects

import { bsc } from 'wagmi/chains'import { publicProvider } from 'wagmi/providers/public'import {  configureChains,  createClient,  WagmiConfig,} from 'wagmi'const { provider: wagmiProvider, webSocketProvider } = configureChains([bsc], [publicProvider()])const connector = new BinanceIDConnector({  options: { chainId: 56, rpc: { 56: 'https://bsc-dataseed.binance.org/' } },})
const client = createClient({  provider: wagmiProvider,  webSocketProvider,})export default function App() {  return (    <WagmiConfig client={client}>      <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>  )}

Integrate with web3-react

Add packages

npm install @web3-react/core @ethersproject/providers

Integrate with your project

function getLibrary(provider: any): Web3Provider {  const library = new Web3Provider(provider)  library.pollingInterval = 12000  return library}
export default function () {  return (    <Web3ReactProvider getLibrary={getLibrary}>      <App />    </Web3ReactProvider>  )}function App() {  const { activate, deactivate, account, library } = useWeb3React()  async function enable() {    activate(new BinanceIDWeb3Connector({}))  }  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>  )}