From 2f8d51514c7d641a0a58e22bb78c62087131dfa9 Mon Sep 17 00:00:00 2001
From: Yos Riady <yos@formo.so>
Date: Fri, 6 Mar 2026 15:33:55 +0700
Subject: [PATCH] Clean up builder codes UI

---
 .../contract/WriteOnlyFunctionForm.tsx        | 21 +-----
 .../packages/nextjs/app/page.tsx              |  5 --
 .../nextjs/components/SendTransaction.tsx     | 74 -------------------
 .../packages/nextjs/package.json              |  1 -
 4 files changed, 1 insertion(+), 100 deletions(-)
 delete mode 100644 with-next-app-router/packages/nextjs/components/SendTransaction.tsx

diff --git a/with-next-app-router/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx b/with-next-app-router/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx
index 36fedcc..4829a3c 100644
--- a/with-next-app-router/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx
+++ b/with-next-app-router/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { Attribution } from "ox/erc8021";
 import { useEffect, useState } from "react";
 import { InheritanceTooltip } from "./InheritanceTooltip";
 import { Abi, AbiFunction } from "abitype";
@@ -35,7 +34,6 @@ 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();
@@ -53,7 +51,6 @@ export const WriteOnlyFunctionForm = ({
             abi: abi,
             args: getParsedContractFunctionArgs(form),
             value: txValue ? BigInt(txValue) : BigInt(0),
-            ...(builderCode ? { dataSuffix: Attribution.toDataSuffix({ codes: [builderCode] }) } : {}),
           });
         await writeTxn(makeWriteWithParams);
         onChange();
@@ -88,8 +85,7 @@ export const WriteOnlyFunctionForm = ({
       />
     );
   });
-  // Builder code block is always rendered, so use column layout for consistent UX
-  const zeroInputs = false;
+  const zeroInputs = inputs.length === 0 && abiFunction.stateMutability !== "payable";
 
   return (
     <div className="py-5 space-y-3 first:pt-0 last:pb-1">
@@ -115,21 +111,6 @@ 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">
diff --git a/with-next-app-router/packages/nextjs/app/page.tsx b/with-next-app-router/packages/nextjs/app/page.tsx
index 4263241..492ba99 100644
--- a/with-next-app-router/packages/nextjs/app/page.tsx
+++ b/with-next-app-router/packages/nextjs/app/page.tsx
@@ -6,7 +6,6 @@ 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";
@@ -154,10 +153,6 @@ 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">
diff --git a/with-next-app-router/packages/nextjs/components/SendTransaction.tsx b/with-next-app-router/packages/nextjs/components/SendTransaction.tsx
deleted file mode 100644
index 139c145..0000000
--- a/with-next-app-router/packages/nextjs/components/SendTransaction.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-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>
-  );
-}
diff --git a/with-next-app-router/packages/nextjs/package.json b/with-next-app-router/packages/nextjs/package.json
index 360a4c2..2a02a11 100644
--- a/with-next-app-router/packages/nextjs/package.json
+++ b/with-next-app-router/packages/nextjs/package.json
@@ -25,7 +25,6 @@
     "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",