Add support for builder codes

with-next-app-router/package.json

@@ -20,7 +20,6 @@
     "foundry:lint": "yarn workspace @se-2/foundry lint",
     "foundry:test": "yarn workspace @se-2/foundry test",
     "generate": "yarn workspace @se-2/foundry generate",
-    "postinstall": "husky install",
     "next:build": "yarn workspace @se-2/nextjs build",
     "next:check-types": "yarn workspace @se-2/nextjs check-types",
     "next:format": "yarn workspace @se-2/nextjs format",

with-next-app-router/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Attribution } from "ox/erc8021";
 import { useEffect, useState } from "react";
 import { InheritanceTooltip } from "./InheritanceTooltip";
 import { Abi, AbiFunction } from "abitype";
@@ -34,6 +35,7 @@ export const WriteOnlyFunctionForm = ({
 }: WriteOnlyFunctionFormProps) => {
   const [form, setForm] = useState<Record<string, any>>(() => getInitialFormState(abiFunction));
   const [txValue, setTxValue] = useState<string>("");
+  const [builderCode, setBuilderCode] = useState<string>("");
   const { chain } = useAccount();
   const writeTxn = useTransactor();
   const { targetNetwork } = useTargetNetwork();
@@ -51,6 +53,7 @@ export const WriteOnlyFunctionForm = ({
             abi: abi,
             args: getParsedContractFunctionArgs(form),
             value: txValue ? BigInt(txValue) : BigInt(0),
+            ...(builderCode ? { dataSuffix: Attribution.toDataSuffix({ codes: [builderCode] }) } : {}),
           });
         await writeTxn(makeWriteWithParams);
         onChange();
@@ -85,7 +88,8 @@ export const WriteOnlyFunctionForm = ({
       />
     );
   });
-  const zeroInputs = inputs.length === 0 && abiFunction.stateMutability !== "payable";
+  // Builder code block is always rendered, so use column layout for consistent UX
+  const zeroInputs = false;
 
   return (
     <div className="py-5 space-y-3 first:pt-0 last:pb-1">
@@ -111,6 +115,21 @@ export const WriteOnlyFunctionForm = ({
             />
           </div>
         ) : null}
+        <div className="flex flex-col gap-1.5 w-full">
+          <div className="flex items-center ml-2">
+            <span className="text-xs font-medium mr-2 leading-none">builder code</span>
+            <span className="block text-xs font-extralight leading-none">ERC-8021 (optional)</span>
+          </div>
+          <input
+            className="input input-ghost focus-within:border-transparent focus:outline-none focus:text-gray-400 h-[2.2rem] min-h-[2.2rem] px-4 border w-full font-medium placeholder:text-accent/50 text-gray-400 bg-base-200 rounded-full text-accent"
+            placeholder="e.g. coinbase"
+            value={builderCode}
+            onChange={e => {
+              setDisplayedTxResult(undefined);
+              setBuilderCode(e.target.value);
+            }}
+          />
+        </div>
         <div className="flex justify-between gap-2">
           {!zeroInputs && (
             <div className="flex-grow basis-0">

with-next-app-router/packages/nextjs/app/page.tsx

@@ -6,6 +6,7 @@ import { useFormo } from "@formo/analytics";
 import type { NextPage } from "next";
 import { useAccount } from "wagmi";
 import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { SendTransaction } from "~~/components/SendTransaction";
 import { SignMessage } from "~~/components/SignMessage";
 import { SignTypedData } from "~~/components/SignTypedData";
 import { Address } from "~~/components/scaffold-eth";
@@ -153,6 +154,10 @@ const Home: NextPage = (): JSX.Element => {
           <SignTypedData />
         </div>
 
+        <div className="w-7/12 mt-12">
+          <SendTransaction />
+        </div>
+
         <div className="w-7/12 mt-12">
           <form onSubmit={handleSubmit} className="flex flex-col gap-4">
             <div className="flex flex-col gap-2">

with-next-app-router/packages/nextjs/components/SendTransaction.tsx

@@ -0,0 +1,74 @@
+import { Attribution } from "ox/erc8021";
+import * as React from "react";
+import { useAccount, useSendTransaction, useWaitForTransactionReceipt } from "wagmi";
+
+export function SendTransaction() {
+  const { address } = useAccount();
+  const { data: hash, error, isPending, sendTransaction } = useSendTransaction();
+  const [builderCode, setBuilderCode] = React.useState("test_builder");
+  const dataSuffix = React.useMemo(
+    () => (builderCode ? Attribution.toDataSuffix({ codes: [builderCode] }) : undefined),
+    [builderCode],
+  );
+
+  const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({
+    hash,
+  });
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (address) {
+      // useSendTransaction has no dataSuffix param; for this test tx the only calldata
+      // is the ERC-8021 suffix, so passing it as data is correct and indexers will parse it.
+      sendTransaction({
+        to: "0x000000000000000000000000000000000000dEaD",
+        value: BigInt(0),
+        ...(dataSuffix ? { data: dataSuffix } : {}),
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <label htmlFor="builderCode" className="font-medium">
+          Send Test Transaction (with Builder Code)
+        </label>
+        <input
+          id="builderCode"
+          name="builderCode"
+          type="text"
+          placeholder="test_builder"
+          value={builderCode}
+          onChange={e => setBuilderCode(e.target.value)}
+          className="w-full p-2 border rounded-md"
+          required
+        />
+        <div className="p-3 bg-blue-50 rounded-md text-sm text-blue-800">
+          <p className="font-medium">ERC-8021 Builder Code: &quot;{builderCode}&quot;</p>
+          <p className="mt-1 break-all text-xs font-mono">dataSuffix: {dataSuffix ?? "—"}</p>
+        </div>
+      </div>
+
+      <button
+        type="submit"
+        disabled={isPending || !address}
+        className="px-4 py-2 font-medium text-white bg-purple-600 rounded-md hover:bg-purple-700 disabled:opacity-50"
+      >
+        {isPending ? "Check Wallet" : "Send Test Transaction"}
+      </button>
+
+      {hash && (
+        <div className="mt-4 space-y-2">
+          <div className="break-all">
+            <span className="font-medium">Transaction Hash:</span> {hash}
+          </div>
+          {isConfirming && <div className="text-yellow-600">Waiting for confirmation...</div>}
+          {isConfirmed && <div className="text-green-600">Transaction confirmed!</div>}
+        </div>
+      )}
+
+      {error && <div className="p-4 mt-4 text-red-700 bg-red-100 rounded-md">{error.message}</div>}
+    </form>
+  );
+}

with-next-app-router/packages/nextjs/package.json

@@ -25,15 +25,16 @@
     "next": "~14.2.11",
     "next-nprogress-bar": "~2.3.13",
     "next-themes": "~0.3.0",
+    "ox": "^0.14.0",
     "qrcode.react": "~3.1.0",
     "react": "~18.3.1",
     "react-copy-to-clipboard": "~5.1.0",
     "react-dom": "~18.3.1",
     "react-hot-toast": "~2.4.0",
     "use-debounce": "~8.0.4",
     "usehooks-ts": "2.13.0",
-    "viem": "2.21.7",
-    "wagmi": "2.12.11",
+    "viem": "2.46.3",
+    "wagmi": "2.19.5",
     "zustand": "~4.1.2"
   },
   "devDependencies": {