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>;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.
Want the multi-wallet picker (MetaMask, WalletConnect, Rainbow) and the live token swap? Those live on the Full picker route — switch with the toggle in the nav.