React.js Integration

{
  "dependencies": {
    "viem": "^2.0.0",
    "wagmi": "^2.0.0"
  }
}

import { Address, Hash, Hex } from "viem";

export type Call = {
  to: Address;
  value: bigint;
  data: Hex;
};

// Input to hashChainBatches
export interface ChainBatchInput {
  chainId: bigint | number;
  calls: Call[];
}

// Output of hashChainBatches
export type ChainBatch = {
  hash: Hash;
  chainId: bigint;
  calls: Call[];
};

// EIP-7702 authorization, one per chain that carries a 7702 batch
export interface Authorization {
  address: string;   // the delegate contract for that chain
  chainId: number;
  nonce: number;
  r: string;
  s: string;
  yParity: number;
}

// POST /actions request body
export interface CreateActionRequest {
  user: Address;
  chainAuthorizations?: Authorization[];
  intents: Array<{
    mode: "7702";
    signatureType: "ecdsa";
    signature: Hex;
    nbf: number;
    exp: number;
    chainBatches: Array<{
      hash: Hex;
      chainId: number;
      tokenTransfers: unknown[];
      calls: Call[];
    }>;
  }>;
}

import { hashChainBatches, getIntentHash } from "@spicenet-io/spiceflow-core";

// hashChainBatches(batches: { chainId, calls }[]) => { hash, chainId, calls }[]
// getIntentHash(signatureType: string, nbf: bigint, exp: bigint, chainBatches) => Hash

export async function getRecentBlock(
  publicClient: PublicClient,
): Promise<bigint> {
  try {
    return await publicClient.getBlockNumber();
  } catch (error) {
    console.error("Error getting recent block:", error);
    return BigInt(0);
  }
}

export async function getAccountNonce(
  address: Address,
  publicClient: PublicClient,
): Promise<number> {
  try {
    return await publicClient.getTransactionCount({ address });
  } catch (error) {
    console.error("Error getting account nonce:", error);
    return 0;
  }
}

import { hashChainBatches } from "@spicenet-io/spiceflow-core";

function createChainBatches(
  sourceChainId: number,
  destinationChainId: number,
  sourceCalls: Call[],
  destinationCalls: Call[],
) {
  // A chain batch is { chainId, calls }. No recentBlock.
  return hashChainBatches([
    { chainId: sourceChainId, calls: sourceCalls },
    { chainId: destinationChainId, calls: destinationCalls },
  ]);
}

async function signDelegation(
  walletClient: WalletClient,
  address: Address,
  chainId: number,
  delegateContractAddress: Address,
): Promise<Authorization> {
  const publicClient = getPublicClient({ chainId });
  const nonce = await getAccountNonce(address, publicClient);

  const domain = {
    name: "Authorization",
    version: "1",
    chainId: BigInt(chainId),
    verifyingContract: delegateContractAddress,
  } as const;

  const types = {
    Authorization: [
      { name: "contractAddress", type: "address" },
      { name: "chainId", type: "uint256" },
      { name: "nonce", type: "uint256" },
    ],
  } as const;

  const message = {
    contractAddress: delegateContractAddress,
    chainId: BigInt(chainId),
    nonce: BigInt(nonce),
  } as const;

  const signature = await walletClient.signTypedData({
    account: address,
    domain,
    types,
    primaryType: "Authorization",
    message,
  });

  const authorization = {
    address: address.toString(),
    chainId: Number(chainId),
    nonce: Number(nonce),
    r: signature.slice(0, 66) as `0x${string}`,
    s: `0x${signature.slice(66, 130)}` as `0x${string}`,
    yParity: parseInt(signature.slice(130, 132), 16) as 0 | 1,
  };

  return authorization;
}

import { getDelegateContract } from "@spicenet-io/spiceflow-core";

async function signMultiChainDelegations(
  walletClient: WalletClient,
  address: Address,
  sourceChainId: number,
  destinationChainId: number,
) {
  // The delegate contract differs per chain. Read it from the SDK, never hardcode.
  const sourceAuth = await signDelegation(
    walletClient,
    address,
    sourceChainId,
    getDelegateContract(sourceChainId),
  );

  const destinationAuth = await signDelegation(
    walletClient,
    address,
    destinationChainId,
    getDelegateContract(destinationChainId),
  );

  return [sourceAuth, destinationAuth];
}

import { getIntentHash } from "@spicenet-io/spiceflow-core";

const RELAYER_URL = "https://tx-submission-api.spicenet.io";

async function submitCrossChainTransaction(
  sourceChainId: number,
  destinationChainId: number,
  sourceCalls: Call[],
  destinationCalls: Call[],
  chainAuthorizations: Authorization[], // { r, s, yParity, address, chainId, nonce }[]
) {
  // 1. Hash the chain batches
  const chainBatches = createChainBatches(
    sourceChainId,
    destinationChainId,
    sourceCalls,
    destinationCalls,
  );

  // 2. Sign the intent hash
  const nbf = 0n;
  const exp = BigInt(Math.floor(Date.now() / 1000) + 3600); // 1 hour
  const digest = getIntentHash("ecdsa", nbf, exp, chainBatches);
  const signature = await walletClient.signMessage({
    account: address,
    message: { raw: digest },
  });

  // 3. Submit to POST /actions
  const request = {
    user: address,
    chainAuthorizations,
    intents: [
      {
        mode: "7702",
        signatureType: "ecdsa",
        signature,
        nbf: Number(nbf),
        exp: Number(exp),
        chainBatches: chainBatches.map((b) => ({ ...b, tokenTransfers: [] })),
      },
    ],
  };

  const response = await fetch(`${RELAYER_URL}/actions`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(request, (key, value) =>
      typeof value === "bigint" ? value.toString() : value,
    ),
  });

  if (!response.ok) {
    const errorText = await response.text();
    throw new Error(`API error: ${response.status} - ${errorText}`);
  }

  return response; // track steps via GET /actions/{actionId}/intents/{i}/steps/{s}
}

// Always switch to the correct chain before signing delegations
async function signDelegationForChain(chainId: number, targetNetwork: Network) {
  // Switch to target chain (hook from reown appkit)
  await switchNetwork(targetNetwork);

  // Wait for network switch to complete
  await new Promise((resolve) => setTimeout(resolve, 2000));

  // Sign delegation
  return await signDelegation(chainId);
}

// Track transaction progress
const [progress, setProgress] = useState<string>("");

const executeTransaction = async () => {
  setProgress("Signing source chain delegation...");
  const sourceAuth = await signDelegation(sourceChainId);

  setProgress("Signing destination chain delegation...");
  const destinationAuth = await signDelegation(destinationChainId);

  setProgress("Submitting transaction...");
  const result = await submitTransaction([sourceAuth, destinationAuth]);

  setProgress("Transaction submitted successfully");
  return result;
};