Headless API integration

import { parseUnits } from "viem";
import { erc20Abi } from "viem";
import { writeContract, waitForTransactionReceipt } from "@wagmi/core";
import { engineAbi } from "./abi/BarkerEngine"; // see Smart Contracts page

const amount = parseUnits("10000", product.asset_decimals); // 10,000 USDC

// 1. approve
const approveTx = await writeContract(config, {
  address: product.asset_address,
  abi: erc20Abi,
  functionName: "approve",
  args: [product.engine_contract_address, amount],
});
await waitForTransactionReceipt(config, { hash: approveTx });

// 2. deposit
const depositTx = await writeContract(config, {
  address: product.engine_contract_address,
  abi: engineAbi,
  functionName: "deposit",
  args: [amount, address], // receiver = the same user
});
await waitForTransactionReceipt(config, { hash: depositTx });

import { Contract, parseUnits } from "ethers";

const usdc = new Contract(product.asset_address, erc20Abi, signer);
const engine = new Contract(product.engine_contract_address, engineAbi, signer);
const amount = parseUnits("10000", product.asset_decimals);

const approveTx = await usdc.approve(product.engine_contract_address, amount);
await approveTx.wait();

const depositTx = await engine.deposit(amount, await signer.getAddress());
await depositTx.wait();

// Server component — API key stays on the server.
import { YieldCard } from "./yield-card.client";

type Params = { slug: string };

export default async function YieldPage(
  { params }: { params: Promise<Params> },
) {
  const { slug } = await params;
  const res = await fetch(
    `https://api.barker.money/api/partner/products/${slug}`,
    {
      headers: { "X-Api-Key": process.env.BARKER_API_KEY! },
      next: { revalidate: 60 }, // cache product metadata for 60s
    },
  );
  if (!res.ok) throw new Error(`product fetch failed: ${res.status}`);
  const { data: product } = await res.json();
  return <YieldCard product={product} />;
}

"use client";

import { useState } from "react";
import {
  useAccount,
  useReadContract,
  useWriteContract,
  useWaitForTransactionReceipt,
  useWatchContractEvent,
  useSwitchChain,
} from "wagmi";
import { erc20Abi, formatUnits, parseUnits } from "viem";
import { engineAbi } from "@/lib/abi/barker-engine";

type Product = {
  slug: string;
  chain_id: number;
  engine_contract_address: `0x${string}`;
  asset_address: `0x${string}`;
  asset_decimals: number;
  asset_symbol: string;
  display_name: string;
  latest_metrics: { net_apy_for_user: string };
};

export function YieldCard({ product }: { product: Product }) {
  const { address, chainId } = useAccount();
  const { switchChain } = useSwitchChain();
  const [amount, setAmount] = useState("");
  const [pendingTx, setPendingTx] = useState<`0x${string}`>();

  // Read user position directly from the engine.
  const { data: shares = 0n, refetch: refetchPosition } = useReadContract({
    address: product.engine_contract_address,
    abi: engineAbi,
    functionName: "balanceOf",
    args: address ? [address] : undefined,
    chainId: product.chain_id,
    query: { enabled: !!address },
  });

  const { data: assets = 0n } = useReadContract({
    address: product.engine_contract_address,
    abi: engineAbi,
    functionName: "convertToAssets",
    args: [shares],
    chainId: product.chain_id,
    query: { enabled: shares > 0n },
  });

  // Watch this user's own Deposit logs → instant UI refresh.
  // (Backend reconciliation still flows through the Barker webhook.)
  useWatchContractEvent({
    address: product.engine_contract_address,
    abi: engineAbi,
    eventName: "Deposit",
    chainId: product.chain_id,
    args: address ? { owner: address } : undefined,
    onLogs: () => {
      refetchPosition();
      setPendingTx(undefined);
    },
    enabled: !!address,
  });

  const { writeContractAsync, isPending: isSigning } = useWriteContract();
  const { isLoading: isMining } = useWaitForTransactionReceipt({
    hash: pendingTx,
    chainId: product.chain_id,
  });

  async function handleDeposit() {
    if (!address) return;
    if (chainId !== product.chain_id) {
      await switchChain({ chainId: product.chain_id });
    }
    const value = parseUnits(amount, product.asset_decimals);

    const approveHash = await writeContractAsync({
      address: product.asset_address,
      abi: erc20Abi,
      functionName: "approve",
      args: [product.engine_contract_address, value],
    });
    setPendingTx(approveHash);

    const depositHash = await writeContractAsync({
      address: product.engine_contract_address,
      abi: engineAbi,
      functionName: "deposit",
      args: [value, address],
    });
    setPendingTx(depositHash);
  }

  const apyPct =
    (parseFloat(product.latest_metrics.net_apy_for_user) * 100).toFixed(2);

  return (
    <div className="rounded-lg border p-6 space-y-3">
      <h2 className="text-xl font-semibold">{product.display_name}</h2>
      <p>Net APY: {apyPct}%</p>
      <p>
        Your balance: {formatUnits(assets, product.asset_decimals)}{" "}
        {product.asset_symbol}
      </p>

      <input
        type="number"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        placeholder={`Amount in ${product.asset_symbol}`}
        className="border rounded px-2 py-1 w-full"
      />
      <button
        onClick={handleDeposit}
        disabled={!address || !amount || isSigning || isMining}
        className="w-full rounded bg-blue-600 text-white py-2 disabled:opacity-50"
      >
        {isSigning ? "Sign in wallet…" :
         isMining ? "Confirming on-chain…" :
         !address ? "Connect wallet" : "Deposit"}
      </button>
    </div>
  );
}

// Webhook receiver — HMAC verify + idempotent dedupe + hand-off.
// Returns 200 quickly; do real work async if it would take >10s.
import crypto from "node:crypto";
import { NextRequest, NextResponse } from "next/server";
import { db } from "@/lib/db"; // your DB client

const SECRET = process.env.BARKER_WEBHOOK_SECRET!;

export async function POST(req: NextRequest) {
  // 1. Read raw body (NOT req.json() — re-stringifying breaks the HMAC).
  const body = await req.text();
  const signature = req.headers.get("x-barker-signature") ?? "";
  const eventType = req.headers.get("x-barker-event") ?? "";

  // 2. Verify HMAC-SHA256 over the exact bytes.
  const expected = crypto.createHmac("sha256", SECRET).update(body).digest("hex");
  if (
    signature.length !== expected.length ||
    !crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expected))
  ) {
    return NextResponse.json({ error: "invalid signature" }, { status: 401 });
  }

  const payload = JSON.parse(body);

  // 3. Dedupe. Lifecycle events: (event_type, chain_id, tx_hash, log_index).
  //    Operational events: (event_type, slug, date) or (event_type, slug).
  //    A unique index + ON CONFLICT DO NOTHING is the race-safe pattern.
  const isLifecycle =
    eventType === "deposit.confirmed" ||
    eventType === "redeem.confirmed" ||
    eventType === "redeem.requested";

  const dedupeKey = isLifecycle
    ? `${eventType}:${payload.chain_id}:${payload.tx_hash}:${payload.log_index}`
    : `${eventType}:${payload.slug}:${payload.date ?? "active"}`;

  const inserted = await db.webhookEvents.create({
    data: { id: dedupeKey, eventType, payload },
    skipDuplicates: true,
  });
  if (!inserted) {
    return NextResponse.json({ ok: true, duplicate: true });
  }

  // 4. Hand off to your business logic. Return 200 quickly.
  switch (eventType) {
    case "deposit.confirmed":
      // Update your ledger, mark pending deposit as confirmed.
      // payload: { slug, chain_id, tx_hash, user_address, amount, shares, ... }
      break;
    case "redeem.confirmed":
      break;
    case "vault_pause":
      // Disable your "Deposit" CTA for this product.
      break;
    // Treat unknown event_type as no-op.
  }

  return NextResponse.json({ ok: true });
}