Prerequisites
Coinbase CDP
Get your embedded wallet project ID
Reown Dashboard
Get your WalletConnect project ID
Ensure your development URL is added to the domain allowlist for both project IDs before continuing.
Installation
Install the Aurum SDK and viem (or the web3 library of your choice)
pnpm add @aurum-sdk/core viem
Setup
- Initialize Aurum
import { Aurum } from '@aurum-sdk/core';
const aurum = new Aurum({
brand: {
appName: 'My App',
},
wallets: {
embedded: { projectId: 'your-cdp-project-id' },
walletConnect: { projectId: 'your-reown-project-id' },
},
});
- Create Viem client (or the web3 library of your choice)
import { createWalletClient, custom } from 'viem';
import { aurum } from "./aurum";
const walletClient = createWalletClient({
transport: custom(aurum.rpcProvider),
});
- Add basic state management (
connect, disconnect, personal_sign, accountsChanged, etc)
import { useEffect, useState } from "react";
import { aurum } from "./aurum";
import { walletClient } from "./viem";
export default function App() {
const [address, setAddress] = useState<`0x${string}` | null>(null);
const [isLoading, setIsLoading] = useState(true);
// Check if connected on page load
useEffect(() => {
aurum.isConnected().then(async (isConnected) => {
if (isConnected) {
const user = await aurum.getUserInfo();
setAddress(user?.publicAddress ?? null);
}
setIsLoading(false);
});
}, []);
// Listen for account changes
useEffect(() => {
const handleAccountsChanged = (accounts: string[]) => {
setAddress(accounts[0] ?? null);
};
aurum.rpcProvider.on?.("accountsChanged", handleAccountsChanged);
return () => {
aurum.rpcProvider.off?.("accountsChanged", handleAccountsChanged);
};
}, []);
async function connect() {
const publicAddress = await aurum.connect();
setAddress(publicAddress);
}
async function disconnect() {
await aurum.disconnect();
setAddress(null);
}
async function signMessage() {
const [account] = await walletClient.getAddresses();
const signature = await walletClient.signMessage({
account,
message: "Hello from Aurum!",
});
console.log("signature", signature);
}
if (isLoading) return <div>Loading...</div>;
return (
<div>
{!address ? (
<button onClick={connect}>Connect Wallet</button>
) : (
<div>
<p>User: {address}</p>
<button onClick={signMessage}>Sign Message</button>
<button onClick={disconnect}>Disconnect</button>
</div>
)}
</div>
);
}
Next Steps
Customization
Theme the modal
Core SDK
Full API reference
React Hooks
Hooks API Reference