Skip to main content

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

  1. 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' },
  },
});
  1. 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),
});
  1. 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