React & Next.js Quickstart
1. Install
npm install bitbadges ethers2. Connect Wallet (Keplr β default)
// app/components/ConnectKeplr.tsx
'use client';
import { useEffect, useState } from 'react';
import { GenericCosmosAdapter, type WalletAdapter } from 'bitbadges';
export function ConnectKeplr() {
const [adapter, setAdapter] = useState<WalletAdapter | null>(null);
const [address, setAddress] = useState<string>('');
const [error, setError] = useState<string>('');
async function connect() {
try {
// 'bitbadges-2' = testnet. Use 'bitbadges-1' for mainnet.
const a = await GenericCosmosAdapter.fromKeplr('bitbadges-2');
setAdapter(a);
setAddress(a.address);
} catch (e: any) {
setError(e.message ?? 'Failed to connect Keplr');
}
}
return (
<div>
{address ? (
<p>Connected: {address}</p>
) : (
<button onClick={connect}>Connect Keplr</button>
)}
{error && <p style={{ color: 'red' }}>{error}</p>}
</div>
);
}3. Connect Wallet (MetaMask β EVM path)
4. Query a Collection
5. Sign + Broadcast a Transaction
Putting It Together
Reference Implementation
Next Steps
Last updated