Lightweight path
Just Topaz ID. No wallet picker.
The same app, wired with TopazIdProvider and useTopazIdLogin() instead of RainbowKit. One provider sets up wagmi and React Query for you, and a single hook drives the consent popup — this route never bundles RainbowKit or any other connector.
// app/(minimal)/layout.tsx — one provider, no RainbowKit
import { TopazIdProvider } from "@topazdex/id-connect/react";
export default async function Layout({ children }) {
const cookie = (await headers()).get("cookie");
return <TopazIdProvider cookie={cookie}>{children}</TopazIdProvider>;
}Live connector demo
Three lines to a signed-in user.
Use the account button in the nav to connect with Topaz ID, then this page reads the connected wallet, resolves the profile, and sends a transaction — all without RainbowKit on the page.
One provider
TopazIdProvider creates the wagmi config (BNB Chain + the Topaz ID connector) and a React Query client. No createConfig, no QueryClientProvider.
One hook
useTopazIdLogin() returns login, logout, and isPending — it finds the connector and opens the consent popup, no modal library required.
Same identity
useTopazIdProfile()resolves the user's Topaz ID name and avatar, exactly like the full demo — the nav pill updates the moment you connect.
// any client component
import { useTopazIdLogin } from "@topazdex/id-connect/react";
const { login, logout, isPending } = useTopazIdLogin();
return <button onClick={login}>Sign in with Topaz ID</button>;// send through the smart wallet — no hand-rolled RPC
import { useTopazIdClient } from "@topazdex/id-connect/react";
const { data: topazClient } = useTopazIdClient();
await topazClient?.sendTransaction({ to, value: parseEther("0.01") });
// approval + action in ONE confirmation popup
await topazClient?.sendCalls({ calls: [approveCall, swapCall] });Connect to try it
Click below (or the nav button) to open the Topaz ID consent popup. SSR keeps you connected across refresh via the request cookie.
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_ADDRESSto 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.
That swap card is the exact same component as the full demo — it runs through TopazIdProvider with no RainbowKit on the page. Want the multi-wallet picker (MetaMask, WalletConnect, Rainbow) instead? Switch to the Full picker route with the toggle in the nav.