Tempo Integration

import { type Config } from "@coinbase/cdp-react";
import { createCDPEmbeddedWalletConnector } from "@coinbase/cdp-wagmi";
import { QueryClient } from "@tanstack/react-query";
import { createConfig, http } from "wagmi";
import { tempoModerato } from "viem/chains";

export const cdpConfig: Config = {
  projectId: "your-project-id",
  ethereum: {
    createOnLogin: "eoa", // smart accounts are not supported on Tempo
  },
  authMethods: ["email"],
};

const connector = createCDPEmbeddedWalletConnector({
  cdpConfig,
  providerConfig: {
    chains: [tempoModerato],
    transports: {
      [tempoModerato.id]: http(),
    },
  },
});

export const wagmiConfig = createConfig({
  connectors: [connector],
  chains: [tempoModerato],
  transports: {
    [tempoModerato.id]: http(),
  },
});

export const queryClient = new QueryClient();

import { createPublicClient, http } from "viem";
import { tempoModerato } from "viem/chains";

export { tempoModerato };

/**
 * Viem public client for the Tempo Moderato testnet.
 * Used for reading chain state and broadcasting signed transactions.
 */
export const tempoClient = createPublicClient({
  chain: tempoModerato,
  transport: http(),
});

import { useEffect, useState } from "react";
import { formatUnits } from "viem";
import { useAccount } from "wagmi";
import { tempoClient } from "./tempo";

const TOKENS = [
  { symbol: "pathUSD", address: "0x20c0000000000000000000000000000000000000" as const },
  { symbol: "AlphaUSD", address: "0x20c0000000000000000000000000000000000001" as const },
];

const TOKEN_DECIMALS = 6;

const ERC20_BALANCE_OF_ABI = [
  {
    name: "balanceOf",
    type: "function",
    stateMutability: "view",
    inputs: [{ name: "account", type: "address" }],
    outputs: [{ name: "", type: "uint256" }],
  },
] as const;

export function Balances() {
  const { address } = useAccount();
  const [balances, setBalances] = useState<{ symbol: string; formatted: string }[]>([]);

  useEffect(() => {
    if (!address) return;

    Promise.all(
      TOKENS.map((token) =>
        tempoClient.readContract({
          address: token.address,
          abi: ERC20_BALANCE_OF_ABI,
          functionName: "balanceOf",
          args: [address],
        }),
      ),
    ).then((results) => {
      setBalances(
        TOKENS.map((token, i) => ({
          symbol: token.symbol,
          formatted: formatUnits(results[i] as bigint, TOKEN_DECIMALS),
        })),
      );
    });
  }, [address]);

  return (
    <ul>
      {balances.map((b) => (
        <li key={b.symbol}>
          {b.symbol}: {b.formatted}
        </li>
      ))}
    </ul>
  );
}

import { useSignEvmTransaction } from "@coinbase/cdp-hooks";
import { type Hex, encodeFunctionData } from "viem";
import { useAccount } from "wagmi";
import { tempoClient, tempoModerato } from "./tempo";

const ERC20_TRANSFER_ABI = [
  {
    name: "transfer",
    type: "function",
    stateMutability: "nonpayable",
    inputs: [
      { name: "to", type: "address" },
      { name: "amount", type: "uint256" },
    ],
    outputs: [{ name: "", type: "bool" }],
  },
] as const;

const TOKEN_ADDRESS = "0x20c0000000000000000000000000000000000000" as const;
const RECIPIENT = "0x5bc1473610754a5ca10749552b119df90c1a1877" as const;

export function SendTransaction() {
  const { address: eoaAddress } = useAccount();
  const { signEvmTransaction } = useSignEvmTransaction();

  const handleSend = async () => {
    if (!eoaAddress) return;

    const data = encodeFunctionData({
      abi: ERC20_TRANSFER_ABI,
      functionName: "transfer",
      args: [RECIPIENT, 10_000_000n], // 10 tokens at 6 decimals
    });

    // Fetch nonce, fees, and gas limit from Tempo
    const [nonce, fees, gasLimit] = await Promise.all([
      tempoClient.getTransactionCount({ address: eoaAddress }),
      tempoClient.estimateFeesPerGas().catch(() => ({
        maxFeePerGas: 1000n,
        maxPriorityFeePerGas: 1000n,
      })),
      tempoClient
        .estimateGas({ account: eoaAddress, to: TOKEN_ADDRESS, data, value: 0n })
        .catch(() => 60000n),
    ]);

    // Sign the transaction via the CDP backend
    const { signedTransaction } = await signEvmTransaction({
      evmAccount: eoaAddress,
      transaction: {
        to: TOKEN_ADDRESS,
        value: 0n,
        data,
        chainId: tempoModerato.id,
        type: "eip1559",
        nonce,
        gas: gasLimit,
        maxFeePerGas: fees.maxFeePerGas ?? 1000n,
        maxPriorityFeePerGas: fees.maxPriorityFeePerGas ?? 1000n,
      },
    });

    // Broadcast the signed transaction to Tempo
    const hash = await tempoClient.sendRawTransaction({
      serializedTransaction: signedTransaction as Hex,
    });

    await tempoClient.waitForTransactionReceipt({ hash });
    console.log("Transaction confirmed:", hash);
  };

  return <button onClick={handleSend}>Send Transaction</button>;
}

import { CDPReactProvider } from "@coinbase/cdp-react";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import App from "./App.tsx";
import { cdpConfig, queryClient, wagmiConfig } from "./config.ts";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <CDPReactProvider config={cdpConfig}>
      <WagmiProvider config={wagmiConfig}>
        <QueryClientProvider client={queryClient}>
          <App />
        </QueryClientProvider>
      </WagmiProvider>
    </CDPReactProvider>
  </StrictMode>,
);