Add template transaction status components

Author: snissn

.gitignore

@@ -11,3 +11,8 @@ coverage
 .env
 .env.local
 .env.*.local
+
+# Local scratch apps / planning notes
+apps/new-app/
+apps/test/
+docs/tickets/

packages/templates/next-export-ui/src/components/FooterDeploymentMeta.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+import { explorerAddressUrl } from '../lib/chains';
+import { fetchManifest, getPrimaryDeployment } from '../lib/manifest';
+
+function shortAddress(addr: string): string {
+  if (!addr || addr.length < 12) return addr;
+  return `${addr.slice(0, 8)}…${addr.slice(-6)}`;
+}
+
+export default function FooterDeploymentMeta() {
+  const [chainId, setChainId] = useState<number | null>(null);
+  const [address, setAddress] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      try {
+        const manifest = await fetchManifest();
+        const deployment = getPrimaryDeployment(manifest);
+        if (cancelled || !deployment) return;
+        const parsedChainId = Number(deployment.chainId);
+        const parsedAddress = String(deployment.deploymentEntrypointAddress ?? '');
+        if (Number.isFinite(parsedChainId)) setChainId(parsedChainId);
+        if (parsedAddress && parsedAddress !== '0x0000000000000000000000000000000000000000') {
+          setAddress(parsedAddress);
+        }
+      } catch {
+        // Footer metadata is best-effort and should never fail rendering.
+      }
+    }
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const link = address && chainId !== null ? explorerAddressUrl(chainId, address) : null;
+
+  return (
+    <div className="footerMeta">
+      <span>Powered by Token Host</span>
+      {chainId !== null ? <span className="badge">chain {String(chainId)}</span> : null}
+      {address ? (
+        link ? (
+          <a className="footerLink" href={link} target="_blank" rel="noreferrer">
+            <span className="badge">{shortAddress(address)}</span>
+          </a>
+        ) : (
+          <span className="badge">{shortAddress(address)}</span>
+        )
+      ) : null}
+    </div>
+  );
+}

packages/templates/next-export-ui/src/components/TxStatus.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { explorerTxUrl } from '../lib/chains';
+
+export type TxPhase = 'idle' | 'submitting' | 'submitted' | 'confirming' | 'confirmed' | 'failed';
+
+function shortHash(hash: string): string {
+  if (!hash || hash.length < 14) return hash;
+  return `${hash.slice(0, 10)}…${hash.slice(-6)}`;
+}
+
+function phaseLabel(phase: TxPhase): string {
+  if (phase === 'submitting') return 'Submitting transaction…';
+  if (phase === 'submitted') return 'Transaction submitted.';
+  if (phase === 'confirming') return 'Waiting for confirmation…';
+  if (phase === 'confirmed') return 'Transaction confirmed.';
+  if (phase === 'failed') return 'Transaction failed.';
+  return '';
+}
+
+export default function TxStatus(props: {
+  phase: TxPhase;
+  hash?: string | null;
+  chainId?: number | null;
+  error?: string | null;
+}) {
+  const { phase, hash, chainId, error } = props;
+  if (phase === 'idle' && !error) return null;
+
+  const toneClass = phase === 'failed' || error ? 'txStatus fail' : 'txStatus';
+  const txUrl = hash && Number.isFinite(chainId) ? explorerTxUrl(chainId as number, hash) : null;
+
+  return (
+    <div className={toneClass}>
+      <div className="txStatusHead">{phaseLabel(phase)}</div>
+      {hash ? (
+        <div className="txStatusRow">
+          <span className="badge">{shortHash(hash)}</span>
+          {txUrl ? (
+            <a className="txStatusLink" href={txUrl} target="_blank" rel="noreferrer">
+              View tx
+            </a>
+          ) : null}
+        </div>
+      ) : null}
+      {error ? <div className="pre" style={{ marginTop: 10 }}>{error}</div> : null}
+    </div>
+  );
+}

packages/templates/next-export-ui/src/lib/tx.ts

@@ -0,0 +1,90 @@
+import { encodeFunctionData, type Address } from 'viem';
+
+import { makeWalletClient, requestWalletAddress } from './clients';
+import { getRelayBaseUrl, getTxMode } from './manifest';
+import type { TxPhase } from '../components/TxStatus';
+
+export type SubmitWriteTxResult = {
+  hash: `0x${string}`;
+  receipt: any;
+};
+
+export async function submitWriteTx(args: {
+  manifest: any;
+  deployment: any;
+  chain: any;
+  publicClient: any;
+  address: `0x${string}`;
+  abi: any[];
+  functionName: string;
+  contractArgs: any[];
+  value?: bigint;
+  setStatus?: (s: string | null) => void;
+  onPhase?: (phase: TxPhase) => void;
+  onHash?: (hash: `0x${string}`) => void;
+}): Promise<SubmitWriteTxResult> {
+  const mode = getTxMode(args.manifest);
+
+  if (mode === 'sponsored') {
+    args.onPhase?.('submitting');
+    args.setStatus?.('Submitting sponsored transaction…');
+    const data = encodeFunctionData({
+      abi: args.abi,
+      functionName: args.functionName,
+      args: args.contractArgs
+    });
+
+    const relayBaseUrl = getRelayBaseUrl(args.manifest).replace(/\/+$/, '');
+    const relayUrl = relayBaseUrl.endsWith('/__tokenhost/relay') ? relayBaseUrl : `${relayBaseUrl}/__tokenhost/relay`;
+    const res = await fetch(relayUrl, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({
+        to: args.address,
+        data,
+        value: args.value ? `0x${args.value.toString(16)}` : undefined
+      })
+    });
+
+    const body = await res.json().catch(() => null);
+    if (!res.ok || !body?.ok || !body?.txHash) {
+      const msg = String(body?.error ?? `Relay request failed (HTTP ${res.status}).`);
+      throw new Error(msg);
+    }
+
+    const hash = String(body.txHash) as `0x${string}`;
+    args.onHash?.(hash);
+    args.onPhase?.('submitted');
+    args.setStatus?.(`Submitted ${hash.slice(0, 10)}…`);
+    args.onPhase?.('confirming');
+    args.setStatus?.('Waiting for confirmation…');
+    const receipt = await args.publicClient.waitForTransactionReceipt({ hash });
+    args.onPhase?.('confirmed');
+    args.setStatus?.(`Confirmed ${hash.slice(0, 10)}…`);
+    return { hash, receipt };
+  }
+
+  args.onPhase?.('submitting');
+  args.setStatus?.('Connecting wallet…');
+  const account = await requestWalletAddress(args.chain);
+  const walletClient = makeWalletClient(args.chain);
+  args.setStatus?.('Sending transaction…');
+  const hash = (await walletClient.writeContract({
+    address: args.address as Address,
+    abi: args.abi,
+    functionName: args.functionName,
+    args: args.contractArgs,
+    account,
+    value: args.value,
+    chain: args.chain
+  })) as `0x${string}`;
+  args.onHash?.(hash);
+  args.onPhase?.('submitted');
+  args.setStatus?.(`Submitted ${hash.slice(0, 10)}…`);
+  args.onPhase?.('confirming');
+  args.setStatus?.('Waiting for confirmation…');
+  const receipt = await args.publicClient.waitForTransactionReceipt({ hash });
+  args.onPhase?.('confirmed');
+  args.setStatus?.(`Confirmed ${hash.slice(0, 10)}…`);
+  return { hash, receipt };
+}