From 32f0edf09d3a107265fd9b8a2f0319cf72c41440 Mon Sep 17 00:00:00 2001
From: sainathr19 <gsnr1925@gmail.com>
Date: Wed, 19 Aug 2026 14:47:27 +0530
Subject: [PATCH] feat: wire create/claim/cancel buttons to the real pool flow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "act on this plan" buttons only ever called the devnet demo
writer; pool mode just showed a static "not wired yet" message.
Wires them to strk20.js's real create/claim/cancel via the Wallet API
route from #20.

- strk20.js: createPlan/claim/cancel now resolve in_token/out_token
  internally (one cached view call per contract address) instead of
  requiring the caller to already know them — matches
  devnet-writer.js's existing viewCall convention, and lets App.jsx's
  demo and pool code paths share the same params shape.
- App.jsx: buttons are gated on demoMode OR an actually-detected,
  STRK20-capable wallet (detectPrivacyCapable from #20's
  wallet-account-v6.js) rather than just "not demo mode" — so the
  button's enabled state matches what a click would actually do,
  never promises something that immediately fails.

Verified: vite build succeeds, ui test suite still 4/4 (unaffected —
touches strk20.js/App.jsx, not iceberg.js). Not verified: an actual
live Ready wallet clicking these buttons end to end — still no such
environment available here. This is the last piece before the
required mainnet transactions can happen through the real UI; needs
a human test before relying on it for those.
---
 ui/src/App.jsx   | 67 ++++++++++++++++++++++++++++++++++++------------
 ui/src/strk20.js | 28 +++++++++++++++++---
 2 files changed, 76 insertions(+), 19 deletions(-)

diff --git a/ui/src/App.jsx b/ui/src/App.jsx
index 7563e1c..5741284 100644
--- a/ui/src/App.jsx
+++ b/ui/src/App.jsx
@@ -2,6 +2,8 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import "./App.css";
 import { cancelDemo, claimDemo, createPlanDemo, isDevnetRpc } from "./devnet-writer.js";
 import { fetchBatches, fetchPlan, fetchStatus, makeProvider, planCommitment } from "./iceberg.js";
+import { cancel as poolCancel, claim as poolClaim, createPlan as poolCreatePlan } from "./strk20.js";
+import { detectPrivacyCapable } from "./wallet-account-v6.js";
 
 const stored = (key, fallback) => localStorage.getItem(key) ?? fallback;
 
@@ -120,6 +122,30 @@ export default function App() {
   const [actionResult, setActionResult] = useState("");
   const demoMode = isDevnetRpc(rpcUrl);
 
+  // Pool mode's write buttons are gated on an actually-connected, STRK20-capable
+  // wallet rather than just "not demo mode" — same check strk20.js itself makes
+  // before submitting, so the button state never promises something a click
+  // would immediately fail on.
+  const [walletCapable, setWalletCapable] = useState(false);
+  useEffect(() => {
+    if (demoMode) {
+      setWalletCapable(false);
+      return;
+    }
+    let cancelled = false;
+    detectPrivacyCapable(provider)
+      .then((capable) => {
+        if (!cancelled) setWalletCapable(capable);
+      })
+      .catch(() => {
+        if (!cancelled) setWalletCapable(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [provider, demoMode]);
+  const canAct = demoMode || walletCapable;
+
   const runAction = async (label, action) => {
     setBusy(true);
     setActionResult(`${label}…`);
@@ -134,21 +160,28 @@ export default function App() {
     }
   };
 
-  const onCreate = () =>
-    runAction("create", () =>
-      createPlanDemo({
-        rpcUrl,
-        icebergAddress: address,
-        chunkAmount:
-          BigInt(Math.round(Number(chunkInput) * 100)) * 10n ** (BigInt(inDecimals) - 2n),
-        numChunks: Number(chunksInput),
-        secret,
-      }),
+  const onCreate = () => {
+    const chunkAmount =
+      BigInt(Math.round(Number(chunkInput) * 100)) * 10n ** (BigInt(inDecimals) - 2n);
+    const numChunks = Number(chunksInput);
+    return runAction("create", () =>
+      demoMode
+        ? createPlanDemo({ rpcUrl, icebergAddress: address, chunkAmount, numChunks, secret })
+        : poolCreatePlan(provider, { icebergAddress: address, chunkAmount, numChunks, secret }),
     );
+  };
   const onClaim = () =>
-    runAction("claim", () => claimDemo({ rpcUrl, icebergAddress: address, secret }));
+    runAction("claim", () =>
+      demoMode
+        ? claimDemo({ rpcUrl, icebergAddress: address, secret })
+        : poolClaim(provider, { icebergAddress: address, secret }),
+    );
   const onCancel = () =>
-    runAction("cancel", () => cancelDemo({ rpcUrl, icebergAddress: address, secret }));
+    runAction("cancel", () =>
+      demoMode
+        ? cancelDemo({ rpcUrl, icebergAddress: address, secret })
+        : poolCancel(provider, { icebergAddress: address, secret }),
+    );
 
   const executedChunks = useCallback(
     (currentPlan) => {
@@ -630,7 +663,7 @@ export default function App() {
               </label>
               <button
                 className="btn-accent"
-                disabled={!demoMode || busy || !secret}
+                disabled={!canAct || busy || !secret}
                 onClick={onCreate}
               >
                 create plan
@@ -639,14 +672,14 @@ export default function App() {
             <div className="act-buttons">
               <button
                 className="btn-dark strong"
-                disabled={!demoMode || busy || !plan?.exists}
+                disabled={!canAct || busy || !plan?.exists}
                 onClick={onClaim}
               >
                 claim accrued
               </button>
               <button
                 className="btn-dark"
-                disabled={!demoMode || busy || !plan?.exists}
+                disabled={!canAct || busy || !plan?.exists}
                 onClick={onCancel}
               >
                 cancel &amp; refund
@@ -656,7 +689,9 @@ export default function App() {
               {actionResult ||
                 (demoMode
                   ? "Devnet demo mode — the prefunded account stands in for the STRK20 pool."
-                  : "Pool mode: flows implemented via the Wallet API (strk20.js) — connect a STRK20-capable wallet (Ready) to use them. Not wired to these buttons yet.")}
+                  : walletCapable
+                    ? "Pool mode: connected to a STRK20-capable wallet — these submit real mainnet transactions."
+                    : "Pool mode: connect a STRK20-capable wallet (Ready, wallet API ≥ 0.10) to use these actions.")}
             </span>
           </div>
 
diff --git a/ui/src/strk20.js b/ui/src/strk20.js
index 73530d7..e051266 100644
--- a/ui/src/strk20.js
+++ b/ui/src/strk20.js
@@ -46,6 +46,25 @@ const planCommitment = (secret) =>
 /// INVALID_REQUEST_PAYLOAD.
 const toWalletFelt = (value) => `0x${BigInt(value).toString(16)}`;
 
+const viewCall = async (provider, contractAddress, entrypoint) => {
+  const result = await provider.callContract({ contractAddress, entrypoint, calldata: [] });
+  return result[0];
+};
+
+/// in_token/out_token are immutable on Iceberg once deployed, so caching by
+/// address is always safe — same convention as devnet-writer.js's viewCall.
+const tokenCache = new Map();
+async function resolveTokens(provider, icebergAddress) {
+  if (tokenCache.has(icebergAddress)) return tokenCache.get(icebergAddress);
+  const [inToken, outToken] = await Promise.all([
+    viewCall(provider, icebergAddress, "in_token"),
+    viewCall(provider, icebergAddress, "out_token"),
+  ]);
+  const tokens = { inToken, outToken };
+  tokenCache.set(icebergAddress, tokens);
+  return tokens;
+}
+
 /// Connects to a STRK20-capable wallet, throwing a clear, user-facing error
 /// if none is found or it doesn't support the wallet API — never a silent
 /// fallback to a public flow.
@@ -75,7 +94,8 @@ export async function shield(provider, token, amount) {
 /// Iceberg helper and invokes privacy_invoke(CreatePlan) in the same proof.
 export async function createPlan(provider, params) {
   const account = await connectPrivacyWallet(provider);
-  const { icebergAddress, inToken, chunkAmount, numChunks, secret } = params;
+  const { icebergAddress, chunkAmount, numChunks, secret } = params;
+  const { inToken } = await resolveTokens(provider, icebergAddress);
   const total = chunkAmount * BigInt(numChunks);
   const actions = [
     { type: "withdraw", token: inToken, amount: toWalletFelt(total), recipient: icebergAddress },
@@ -98,7 +118,8 @@ export async function createPlan(provider, params) {
 /// note's id — the pool credits it with the plan's accrued OpenNoteDeposit.
 export async function claim(provider, params) {
   const account = await connectPrivacyWallet(provider);
-  const { icebergAddress, outToken, secret } = params;
+  const { icebergAddress, secret } = params;
+  const { outToken } = await resolveTokens(provider, icebergAddress);
   const actions = [
     { type: "transfer", token: outToken, amount: "OPEN", recipient: account.address },
     {
@@ -115,7 +136,8 @@ export async function claim(provider, params) {
 /// note's id — the pool credits it with the unswapped refund.
 export async function cancel(provider, params) {
   const account = await connectPrivacyWallet(provider);
-  const { icebergAddress, inToken, secret } = params;
+  const { icebergAddress, secret } = params;
+  const { inToken } = await resolveTokens(provider, icebergAddress);
   const actions = [
     { type: "transfer", token: inToken, amount: "OPEN", recipient: account.address },
     {