Client integration

Usage of the Sync JavaScript client, including auth helpers and distribution calls.

Packages involved

@fractalshq/sync — planned SDK that talks to the Sync API to build transactions, manage cohorts, and hydrate claim UX.
@fractalshq/auth-react — ships useTxAuth and TxAuthButton so wallets sign-in once via SIWS.
@fractalshq/auth-core — Express/Next handlers that mint/verify SIWS cookies (your backend just mounts the router).

Install preview:


npm install @fractalshq/sync @fractalshq/auth-react @fractalshq/auth-core

Pseudocode quickstart


import { SyncProvider, useSyncApi } from "@fractalshq/sync/react";
import { AuthProvider } from "@fractalshq/auth-react";
 
export function App() {
  return (
    <AuthProvider baseURL={process.env.NEXT_PUBLIC_AUTH_BASE_URL}>
      <SyncProvider
        baseUrl={process.env.NEXT_PUBLIC_SYNC_BASE_URL}
        apiKey={process.env.NEXT_PUBLIC_SYNC_API_KEY}
      >
        <Dashboard />
      </SyncProvider>
    </AuthProvider>
  );
}
 
function Dashboard() {
  const { distributions, claims, cohorts } = useSyncApi();
  // distributions.create(), claims.prepare(), cohorts.list() available here.
}

Creating a distribution


import { useSyncApi } from "@fractalshq/sync/react";
import { useTxAuth } from "@fractalshq/auth-react";
 
const { distributions } = useSyncApi();
const { signAndSend } = useTxAuth();
 
export function CreateDistributionCTA() {
  async function handleClick() {
    const { transaction, summary } = await distributions.create({
      cohortId: "growth-users",
      mint: "GEOD...",
      schedule: {
        startVestingTs: Date.now() / 1000,
        endVestingTs: Date.now() / 1000 + 7 * 24 * 60 * 60,
      },
    });
 
    await signAndSend(transaction);
    alert(`Queued tx ${summary.signatureHint}`);
  }
 
  return <button onClick={handleClick}>Fund cohort</button>;
}

cohortId points to a reusable list of wallets + splits that you manage in the dashboard or via API.
The Sync API responds with { transaction, summary, estimatedCostUsd }. You never touch PDAs or merkle math.
signAndSend comes from auth-react so the same SIWS session powers auth + transaction signing.

Claiming on behalf of users


import { useSyncClaims } from "@fractalshq/sync/react";
import { useTxAuth } from "@fractalshq/auth-react";
 
const { fetchClaimTx } = useSyncClaims();
const { signAndSend } = useTxAuth();
 
export function ClaimButton({ distributionId }: { distributionId: string }) {
  async function claim() {
    const { transaction, expectedAmountUsd } = await fetchClaimTx({ distributionId });
    await signAndSend(transaction);
    console.log(`Claimed $${expectedAmountUsd} worth of tokens`);
  }
 
  return <button onClick={claim}>Claim rewards</button>;
}

The helper calls /sync/distributions/:id/claims which validates eligibility, wraps Token-2022 mints, and adds memos/Lighthouse asserts.
Claims are close to ~$0.50 USD so you can promise predictable UX. Settlement happens with you, not the end-user.

Backend glue

Drop-in handler (Next.js app router sketch):


// app/api/sync/[...route]/route.ts
import { createSyncHandler } from "@fractalshq/sync/server";
import { authMiddleware } from "@fractalshq/auth-core/next";
 
const handler = createSyncHandler({
  apiKey: process.env.SYNC_API_KEY!,
});
 
export const GET = authMiddleware(handler);
export const POST = authMiddleware(handler);

createSyncHandler proxies requests to Sync, attaches your project ID, and enforces cohort-level permissions. Pair it with auth-core so only signed-in wallets can request distribution or claim transactions.