Managing Nonces

1
import {
2
  createPublicClient,
3
  createWalletClient,
4
  http,
5
  parseEther,
6
  type Address,
7
} from "viem";
8
import { privateKeyToAccount } from "viem/accounts";
9
import { arbitrum } from "viem/chains";
10
11
// 1) Configure clients for Arbitrum Nitro (Node.js script)
12
const RPC_URL = process.env.RPC_URL || "https://arb1.arbitrum.io/rpc";
13
const PRIVATE_KEY = process.env.PRIVATE_KEY as `0x${string}`;
14
if (!PRIVATE_KEY) {
15
  throw new Error("Missing PRIVATE_KEY env var (hex string, 0x-prefixed).");
16
}
17
const account = privateKeyToAccount(PRIVATE_KEY);
18
19
const publicClient = createPublicClient({
20
  chain: arbitrum,
21
  transport: http(RPC_URL),
22
});
23
const walletClient = createWalletClient({
24
  account,
25
  chain: arbitrum,
26
  transport: http(RPC_URL),
27
});
28
const address = account.address;
29
30
// 2) Helpers
31
async function getPendingNonce(addr: Address) {
32
  return publicClient.getTransactionCount({
33
    address: addr,
34
    blockTag: "pending",
35
  });
36
}
37
38
async function waitUntilPendingNonceAtLeast(
39
  addr: Address,
40
  target: number,
41
  pollMs = 300,
42
  timeoutMs = 6000,
43
) {
44
  const start = Date.now();
45
  while (Date.now() - start < timeoutMs) {
46
    const pending = await getPendingNonce(addr);
47
    if (pending >= target) return true;
48
    await new Promise((r) => setTimeout(r, pollMs));
49
  }
50
  return false;
51
}
52
53
// 3) Gated send: explicit nonce, then wait for pending to advance
54
export async function sendWithGatedNonce(to: Address, valueEth = "0.01") {
55
  let next = await getPendingNonce(address);
56
  try {
57
    const hash = await walletClient.sendTransaction({
58
      to,
59
      value: parseEther(valueEth),
60
      nonce: next,
61
    });
62
    // Wait for mempool to reflect acceptance before attempting N+1
63
    await waitUntilPendingNonceAtLeast(address, next + 1);
64
    return hash;
65
  } catch (err: any) {
66
    const msg = String(err?.message || "").toLowerCase();
67
    if (msg.includes("nonce too high")) {
68
      const resynced = await getPendingNonce(address);
69
      throw new Error(`Nonce too high. Resynced pending nonce=${resynced}`);
70
    }
71
    if (msg.includes("nonce too low")) {
72
      const resynced = await getPendingNonce(address);
73
      throw new Error(`Nonce too low. Resynced pending nonce=${resynced}`);
74
    }
75
    throw err;
76
  }
77
}
78
79
// 4) Example usage
80
// RPC_URL="https://arb1.arbitrum.io/rpc" PRIVATE_KEY="0x..." node script.ts
81
// await sendWithGatedNonce("0xRecipientAddressHere" as Address, "0.01");

1
// Latest confirmed nonce
2
const latest = await client.getTransactionCount({
3
  address,
4
  blockTag: "latest",
5
});
6
7
// Include mempool transactions
8
const pending = await client.getTransactionCount({
9
  address,
10
  blockTag: "pending",
11
});

$
npm install viem

1
import { useCallback, useEffect, useRef, useState } from "react";
2
import type { Address, PublicClient } from "viem";
3
4
const NONCE_STORAGE_KEY = "nonce-tracker";
5
6
export function useNonceManager(client: PublicClient, address?: Address) {
7
  const [nonce, setNonce] = useState<number | null>(null);
8
  const isFetching = useRef(false);
9
10
  const fetchOnChainNonce = useCallback(async () => {
11
    if (!address || isFetching.current) return;
12
    isFetching.current = true;
13
    try {
14
      const latest = await client.getTransactionCount({
15
        address,
16
        blockTag: "latest",
17
      });
18
      setNonce(latest);
19
      localStorage.setItem(`${NONCE_STORAGE_KEY}:${address}`, String(latest));
20
    } finally {
21
      isFetching.current = false;
22
    }
23
  }, [client, address]);
24
25
  const loadLocalNonce = useCallback(() => {
26
    if (!address) return;
27
    const saved = localStorage.getItem(`${NONCE_STORAGE_KEY}:${address}`);
28
    if (saved) setNonce(Number(saved));
29
  }, [address]);
30
31
  const getNextNonce = useCallback(() => {
32
    if (nonce === null) throw new Error("Nonce not initialized");
33
    const next = nonce;
34
    const newNonce = nonce + 1;
35
    setNonce(newNonce);
36
    if (address) {
37
      localStorage.setItem(`${NONCE_STORAGE_KEY}:${address}`, String(newNonce));
38
    }
39
    return next;
40
  }, [nonce, address]);
41
42
  const resetNonce = useCallback(() => {
43
    setNonce(null);
44
    if (address) localStorage.removeItem(`${NONCE_STORAGE_KEY}:${address}`);
45
  }, [address]);
46
47
  useEffect(() => {
48
    loadLocalNonce();
49
    fetchOnChainNonce();
50
  }, [loadLocalNonce, fetchOnChainNonce]);
51
52
  return { nonce, getNextNonce, fetchOnChainNonce, resetNonce };
53
}

1
import React from "react";
2
import {
3
  createPublicClient,
4
  createWalletClient,
5
  custom,
6
  http,
7
  parseEther,
8
  type Address,
9
} from "viem";
10
import { arbitrum } from "viem/chains";
11
import { useNonceManager } from "./hooks/useNonceManager";
12
13
export function TransactionSender() {
14
  const publicClient = createPublicClient({
15
    chain: arbitrum,
16
    transport: http("https://arb1.arbitrum.io/rpc"),
17
  });
18
  const walletClient = createWalletClient({
19
    chain: arbitrum,
20
    // In a browser, prefer the injected provider (e.g., MetaMask)
21
    transport:
22
      typeof window !== "undefined" && (window as any).ethereum
23
        ? custom((window as any).ethereum)
24
        : http("https://arb1.arbitrum.io/rpc"),
25
  });
26
27
  const address = "0xYourAddressHere" as Address;
28
  const { nonce, getNextNonce, fetchOnChainNonce } = useNonceManager(
29
    publicClient,
30
    address,
31
  );
32
33
  const sendTransaction = async () => {
34
    // Avoid optimistic bumps: only allocate the next nonce when sending
35
    const currentNonce = getNextNonce();
36
37
    const tx = {
38
      to: "0xRecipientAddress" as Address,
39
      value: parseEther("0.01"),
40
      nonce: currentNonce,
41
      gas: 21000n,
42
    };
43
44
    const hash = await walletClient.sendTransaction(tx);
45
    console.log("Tx sent:", hash);
46
47
    // Optionally re-sync after submission
48
    fetchOnChainNonce();
49
  };
50
51
  return (
52
    <div className="p-4">
53
      <p>Current Nonce: {nonce ?? "Loading..."}</p>
54
      <button onClick={sendTransaction}>Send Transaction</button>
55
    </div>
56
  );
57
}