Skip to main content

Integrate Connect Smart Accounts

Build a self-custody wallet experience with ERC-4337 smart accounts, passkey authentication, and gasless transactions.

Prerequisites​

  • An Urblock account with a test API key (sk_test_...)
  • Node.js ≥ 18
  • Basic understanding of ERC-4337 (smart accounts, UserOperations)

1. Install the SDK​

npm install @urblock/sdk

2. Initialize the Client​

import { Urblock } from "@urblock/sdk";

const urblock = new Urblock("sk_test_...");

3. Create a Smart Account​

Smart accounts are counterfactual — they get an address immediately but deploy on-chain with the first transaction.

const account = await urblock.connect.createAccount({
  signer_id: "user_001",
  signer_type: 0, // ECDSA
  key_data: userPublicKey,
  salt: "0",
  chain_id: 11155111, // Sepolia
});

console.log(`Smart account: ${account.address}`);
console.log(`Deployed: ${account.deployed}`); // false (counterfactual)

4. Register a Passkey​

After the user creates a WebAuthn credential in the browser, register it:

const passkey = await urblock.connect.registerPasskey({
  account_address: account.address,
  credential: {
    credential_id: webauthnResponse.id,
    public_key: {
      x: pubKeyX,
      y: pubKeyY,
    },
    algorithm: "ES256",
  },
  chain_id: 11155111,
});

5. Create a Session Key​

Session keys enable automated transactions without prompting the user for each signature:

const sessionKey = await urblock.connect.createSessionKey({
  account_address: account.address,
  key: sessionKeyAddress,
  valid_after: Math.floor(Date.now() / 1000),
  valid_until: Math.floor(Date.now() / 1000) + 3600, // 1 hour
  allowed_targets: [tokenContractAddress],
  spend_limit: "1000000000000000000", // 1 ETH
  chain_id: 11155111,
});

6. Relay a UserOperation​

Build and sign a UserOperation client-side, then relay it:

const result = await urblock.connect.relay({
  user_op: {
    sender: account.address,
    nonce: "0x0",
    init_code: "0x", // first tx includes deployment init code
    call_data: encodedCallData,
    account_gas_limits: "0x...",
    pre_verification_gas: "0x...",
    gas_fees: "0x...",
    paymaster_and_data: "0x",
    signature: userSignature,
  },
  chain_id: 11155111,
});

console.log(`UserOp: ${result.user_op_hash}`);
console.log(`Status: ${result.status}`); // "pending"

Check status later:

const status = await urblock.connect.getRelayStatus(result.user_op_hash);
console.log(status.status); // "confirmed"
console.log(status.tx_hash); // "0x..."

7. Set Up Social Recovery​

Protect the account with guardian-based recovery:

// Configure 2-of-3 guardians with 48h timelock
const recovery = await urblock.connect.configureRecovery({
  account_address: account.address,
  chain_id: 11155111,
  recovery_action_address: "0xRecoveryAction...",
  guardians: [
    { address: "0xGuardian1...", label: "Phone backup" },
    { address: "0xGuardian2...", label: "Hardware wallet" },
    { address: "0xGuardian3...", label: "Trusted contact" },
  ],
  threshold: 2,
  timelock_delay: 172800, // 48 hours
});

// Guardian config is saved server-side — no on-chain call needed
console.log(`Guardians configured: ${recovery.guardians.length}`);
console.log(`Threshold: ${recovery.threshold}`);

8. Monitor with Analytics​

Track smart account adoption:

const stats = await urblock.connect.analyticsOverview("30d");
console.log(`Total accounts: ${stats.total_accounts}`);
console.log(`Deployed: ${stats.total_deployed}`);
console.log(`Relay ops (30d): ${stats.total_relay_ops}`);
console.log(`Recovery configured: ${stats.recovery.configured}`);

Using the React SDK​

For frontend integration, use the @urblock/connect-react SDK:

import { useRecovery } from "@urblock/connect-react";

function RecoverySetup({ accountAddress }) {
  const { configureRecovery, isLoading, error } = useRecovery();

  async function handleSetup() {
    const result = await configureRecovery({
      recoveryActionAddress: "0x...",
      guardians: ["0xGuardian1...", "0xGuardian2..."],
      threshold: 2,
      timelockDelay: 172800n,
    });
    // Guardian config saved server-side
  }

  return (
    <button onClick={handleSetup} disabled={isLoading}>
      {isLoading ? "Setting up..." : "Configure Recovery"}
    </button>
  );
}

Next Steps​