Open-source starter app
Bring Topaz ID login to your BNB Chain dapp.
This demo shows how a normal app can use @topazdex/id-connect to add Topaz ID, resolve public profiles, and keep wallet actions available through wagmi.
yarn add @topazdex/id-connectLive connector demo
Topaz ID for any BNB Chain app.
Use the nav account button to connect with Topaz ID, then this sample dapp can read the connected wallet, resolve the user's Topaz ID profile, show token balances, and swap BNB for your project's token through the Topaz SwapRouter.
Wallet login
Let users connect with Topaz ID using email or Google, while keeping a familiar wallet connector flow.
Profile-aware UI
Once connected, the account button uses the user's Topaz ID name and avatar instead of showing only a wallet address.
Token swap
Quote and swap BNB for your project's token through the Topaz SwapRouter — point an env var at your token contract and the swap card adapts.
On-chain action
Swap BNB for your token.
A working BNB ↔ TOPAZ swap using the direct concentrated-liquidity route on the Topaz SwapRouter, with a live QuoterV2 quote, wallet balances, USD values and logos from Dexscreener, slippage protection, and the ERC-20 approval flow handled for you.
In your own app, set NEXT_PUBLIC_SWAP_TOKEN_ADDRESS to your token's contract address — symbol, decimals, price, and logo are all resolved automatically. Try it live:
Swap
Topaz SwapRouter · direct CL route
BNB- TOKEN price
- —
- Rate
- —
- Min received
- —
- Slippage
Live quote from QuoterV2, refreshed every 10s. Prices and logos via Dexscreener.
Connect to try it
Use the account button in the top-right nav to open the wallet picker.