From a871f0d6d75e14189e7f2f474149727e5532ca88 Mon Sep 17 00:00:00 2001
From: Emmanuel Byrd <25442086+EByrdS@users.noreply.github.com>
Date: Mon, 20 Apr 2026 12:35:58 +0100
Subject: [PATCH 1/9] Add CancelCard for NextJS exmaple

---
 .../src/app/components/sale/CancelCard.tsx    | 84 +++++++++++++++++++
 .../src/app/hooks/use-sale-contract.ts        | 22 +++++
 .../framework/nextjs-evm/src/app/page.tsx     | 80 ++++++++++++------
 3 files changed, 162 insertions(+), 24 deletions(-)
 create mode 100644 examples/framework/nextjs-evm/src/app/components/sale/CancelCard.tsx

diff --git a/examples/framework/nextjs-evm/src/app/components/sale/CancelCard.tsx b/examples/framework/nextjs-evm/src/app/components/sale/CancelCard.tsx
new file mode 100644
index 0000000..b000cf6
--- /dev/null
+++ b/examples/framework/nextjs-evm/src/app/components/sale/CancelCard.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import { Hex } from "@echoxyz/sonar-core";
+import { useState } from "react";
+import { useSaleContract } from "../../hooks/use-sale-contract";
+
+const CANCELLATION_STAGE = 2;
+
+function CancelSection({ saleSpecificEntityID }: { saleSpecificEntityID: Hex }) {
+  const { cancelBid, contractStage, entityState, entityStateError, awaitingTxReceipt, txReceipt, awaitingTxReceiptError } =
+    useSaleContract(saleSpecificEntityID);
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | undefined>(undefined);
+
+  const isCancellationStage = contractStage === CANCELLATION_STAGE;
+
+  const cancel = async () => {
+    setLoading(true);
+    setError(undefined);
+    try {
+      await cancelBid();
+    } catch (err) {
+      setError(err as Error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const committedAmount = entityState?.currentBid?.amount;
+
+  return (
+    <div className="flex flex-col gap-4 items-center">
+      <div className="bg-white p-2 rounded-md w-full">
+        {entityStateError ? (
+          <p className="text-red-500 wrap-anywhere">{entityStateError.message}</p>
+        ) : (
+          <p className="text-gray-900">
+            Current committed amount:{" "}
+            {committedAmount !== undefined ? `${Number(committedAmount) / 1e6} USDC` : "Loading..."}
+          </p>
+        )}
+      </div>
+
+      {!isCancellationStage && (
+        <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
+          <p className="text-amber-800 text-sm font-medium">Contract not in Cancellation stage</p>
+          <p className="text-amber-700 text-sm mt-1">
+            The &quot;Cancel Bid&quot; button is only active when the contract is in the Cancellation stage (stage 2).
+            To test this feature, deploy your own contract and call{" "}
+            <code className="font-mono bg-amber-100 px-1 rounded">unsafeSetStage(2)</code> to move it to the
+            Cancellation state.
+          </p>
+        </div>
+      )}
+
+      <button
+        disabled={loading || awaitingTxReceipt || !isCancellationStage}
+        className="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full"
+        onClick={cancel}
+      >
+        <p className="text-gray-100">{loading || awaitingTxReceipt ? "Loading..." : "Cancel Bid"}</p>
+      </button>
+
+      {awaitingTxReceipt && !txReceipt && <p className="text-gray-900">Waiting for transaction receipt...</p>}
+      {txReceipt?.status === "success" && (
+        <p className="text-green-500">Cancellation successful — your funds have been refunded</p>
+      )}
+      {txReceipt?.status === "reverted" && <p className="text-red-500">Cancellation reverted</p>}
+      {error && <p className="text-red-500 wrap-anywhere">{error.message}</p>}
+      {awaitingTxReceiptError && <p className="text-red-500 wrap-anywhere">{awaitingTxReceiptError.message}</p>}
+    </div>
+  );
+}
+
+function CancelCard({ saleSpecificEntityID }: { saleSpecificEntityID: Hex }) {
+  return (
+    <div className="flex flex-col gap-4 p-4 bg-linear-to-r from-red-50 to-orange-50 rounded-lg border border-red-200">
+      <CancelSection saleSpecificEntityID={saleSpecificEntityID} />
+    </div>
+  );
+}
+
+export default CancelCard;
diff --git a/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts b/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts
index a8141b8..85ad80d 100644
--- a/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts
+++ b/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts
@@ -89,6 +89,17 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
     [writeContractAsync, config, chainId, switchChainAsync],
   );
 
+  const cancelBid = useCallback(async () => {
+    const { request } = await simulateContract(config, {
+      address: saleContract,
+      abi: settlementSaleAbi,
+      functionName: "cancelBid",
+      args: [],
+    });
+    const hash = await writeContractAsync(request);
+    setTxHash(hash);
+  }, [writeContractAsync, config]);
+
   const { data: entityStates, error: entityStateError } = useReadContract({
     address: saleContract,
     abi: settlementSaleAbi,
@@ -115,6 +126,15 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
   const currentTotalReadableStr = (Number(currentTotalRaw) / 1e6).toLocaleString(undefined, {
     minimumFractionDigits: 2,
     maximumFractionDigits: 2,
+  })
+  
+  const { data: contractStage } = useReadContract({
+    address: saleContract,
+    abi: settlementSaleAbi,
+    functionName: "stage",
+    query: {
+      refetchInterval: 3000,
+    },
   });
 
   return {
@@ -123,6 +143,8 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
     currentTotalRaw,
     currentTotalReadableStr,
     commitWithPermit,
+    cancelBid,
+    contractStage,
     awaitingTxReceipt,
     txReceipt,
     awaitingTxReceiptError,
diff --git a/examples/framework/nextjs-evm/src/app/page.tsx b/examples/framework/nextjs-evm/src/app/page.tsx
index 278232a..5832b6c 100644
--- a/examples/framework/nextjs-evm/src/app/page.tsx
+++ b/examples/framework/nextjs-evm/src/app/page.tsx
@@ -9,30 +9,31 @@ import { AuthenticationSection } from "./components/auth/AuthenticationSection";
 import { useSonarEntities } from "./hooks/use-sonar-entities";
 import { useSession } from "./hooks/use-session";
 import CommitCard from "./components/sale/CommitCard";
+import CancelCard from "./components/sale/CancelCard";
 import { EntitiesList } from "./components/registration/EntitiesList";
 import { EligibilityResults } from "./components/registration/EligibilityResults";
 import { ConnectKitButton } from "connectkit";
 import { CommitmentDataCard } from "./components/sale/CommitmentDataCard";
 
+type SalePhase = "presale" | "live" | "cancelled";
+
 export default function Home() {
-  const [saleIsLive, setSaleIsLive] = useState(false);
+  const [salePhase, setSalePhase] = useState<SalePhase>("presale");
   const [selectedEntityId, setSelectedEntityId] = useState<string | undefined>(undefined);
   const { sonarConnected } = useSession();
   const { address } = useAccount();
 
-  // Load sale state from localStorage
+  // Load sale phase from localStorage
   useEffect(() => {
-    const stored = localStorage.getItem("sale_is_live");
-    if (stored === "true") {
-      setSaleIsLive(true);
+    const stored = localStorage.getItem("sale_phase");
+    if (stored === "live" || stored === "cancelled" || stored === "presale") {
+      setSalePhase(stored);
     }
   }, []);
 
-  // Save sale state to localStorage
-  const toggleSaleLive = () => {
-    const newState = !saleIsLive;
-    setSaleIsLive(newState);
-    localStorage.setItem("sale_is_live", String(newState));
+  const handlePhaseChange = (phase: SalePhase) => {
+    setSalePhase(phase);
+    localStorage.setItem("sale_phase", phase);
   };
 
   // Entities data
@@ -141,16 +142,15 @@ export default function Home() {
       <div className="fixed top-0 left-0 right-0 z-50 bg-gray-900 border-b border-gray-700 shadow-lg">
         <div className="max-w-4xl mx-auto px-4 py-2 flex items-center justify-between">
           <span className="text-gray-400 text-sm font-medium">Demo Controls</span>
-          <button
-            onClick={toggleSaleLive}
-            className={`px-4 py-1.5 rounded-md font-medium text-sm transition-colors ${
-              saleIsLive
-                ? "bg-green-500/20 text-green-400 hover:bg-green-500/30 border border-green-500/50"
-                : "bg-amber-500/20 text-amber-400 hover:bg-amber-500/30 border border-amber-500/50"
-            }`}
+          <select
+            value={salePhase}
+            onChange={(e) => handlePhaseChange(e.target.value as SalePhase)}
+            className="px-3 py-1.5 rounded-md font-medium text-sm bg-gray-800 border border-gray-600 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
           >
-            {saleIsLive ? "🟢 Sale Live" : "⏳ Pre-Sale"}
-          </button>
+            <option value="presale">⏳ Pre-Sale</option>
+            <option value="live">🟢 Sale Live</option>
+            <option value="cancelled">🔴 Cancelled</option>
+          </select>
         </div>
       </div>
 
@@ -163,8 +163,8 @@ export default function Home() {
                 <h1 className="text-3xl font-bold text-gray-900">Easy Company Token Sale</h1>
               </div>
 
-              {/* Countdown Banner */}
-              {!saleIsLive && (
+              {/* Phase Banner */}
+              {salePhase === "presale" && (
                 <div className="bg-linear-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-6">
                   <div className="text-center">
                     <p className="text-blue-900 font-semibold text-lg">Sale Starting Soon</p>
@@ -173,20 +173,29 @@ export default function Home() {
                 </div>
               )}
 
-              {saleIsLive && (
+              {salePhase === "live" && (
                 <div className="bg-linear-to-r bg-green-50 border border-green-200 rounded-lg p-6">
                   <div className="text-center">
                     <p className="text-green-700 font-semibold text-lg">The sale is now live!</p>
                   </div>
                 </div>
               )}
+
+              {salePhase === "cancelled" && (
+                <div className="bg-linear-to-r from-red-50 to-orange-50 border border-red-200 rounded-lg p-6">
+                  <div className="text-center">
+                    <p className="text-red-700 font-semibold text-lg">The sale has been cancelled</p>
+                    <p className="text-red-600">You may cancel your bid to receive a full refund of your committed funds</p>
+                  </div>
+                </div>
+              )}
             </div>
 
             <div className="flex flex-col gap-8">
               <AuthenticationSection />
 
               {/* Registration Phase */}
-              {sonarConnected && !saleIsLive && (
+              {sonarConnected && salePhase === "presale" && (
                 <div className="flex flex-col gap-4">
                   <h2 className="text-xl font-semibold text-gray-900">Check Your Eligibility</h2>
 
@@ -210,7 +219,7 @@ export default function Home() {
               )}
 
               {/* Sale Phase */}
-              {saleIsLive && (
+              {salePhase === "live" && (
                 <div className="flex flex-col gap-4">
                   {sonarConnected && (
                     <div className="flex flex-col gap-4">
@@ -240,6 +249,29 @@ export default function Home() {
                   </div>
                 </div>
               )}
+
+              {/* Cancellation Phase */}
+              {salePhase === "cancelled" && (
+                <div className="flex flex-col gap-4">
+                  {sonarConnected && (
+                    <div className="flex flex-col gap-4">
+                      <ConnectKitButton />
+
+                      <div className="flex flex-col gap-4">
+                        <h2 className="text-xl font-semibold text-gray-900">Your Entity Information</h2>
+                        <EntitySection />
+                      </div>
+
+                      {address && selectedEntity && (
+                        <div className="flex flex-col gap-4">
+                          <h2 className="text-xl font-semibold text-gray-900">Cancel Your Bid</h2>
+                          <CancelCard saleSpecificEntityID={selectedEntity.SaleSpecificEntityID} />
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
           </div>
         </div>

From 5bf30cd496754c774c4136d966f390abc6cc70b4 Mon Sep 17 00:00:00 2001
From: Emmanuel Byrd <25442086+EByrdS@users.noreply.github.com>
Date: Mon, 20 Apr 2026 13:49:02 +0100
Subject: [PATCH 2/9] Add CancelCard on React

---
 .../src/components/sale/CancelCard.tsx        | 82 +++++++++++++++++++
 examples/framework/react-evm/src/hooks.ts     | 22 +++++
 .../framework/react-evm/src/pages/Home.tsx    | 80 ++++++++++++------
 3 files changed, 160 insertions(+), 24 deletions(-)
 create mode 100644 examples/framework/react-evm/src/components/sale/CancelCard.tsx

diff --git a/examples/framework/react-evm/src/components/sale/CancelCard.tsx b/examples/framework/react-evm/src/components/sale/CancelCard.tsx
new file mode 100644
index 0000000..dd7e1f7
--- /dev/null
+++ b/examples/framework/react-evm/src/components/sale/CancelCard.tsx
@@ -0,0 +1,82 @@
+import { Hex } from "@echoxyz/sonar-core";
+import { useState } from "react";
+import { useSaleContract } from "../../hooks";
+
+const CANCELLATION_STAGE = 2;
+
+function CancelSection({ saleSpecificEntityID }: { saleSpecificEntityID: Hex }) {
+  const { cancelBid, contractStage, entityState, entityStateError, awaitingTxReceipt, txReceipt, awaitingTxReceiptError } =
+    useSaleContract(saleSpecificEntityID);
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | undefined>(undefined);
+
+  const isCancellationStage = contractStage === CANCELLATION_STAGE;
+
+  const cancel = async () => {
+    setLoading(true);
+    setError(undefined);
+    try {
+      await cancelBid();
+    } catch (err) {
+      setError(err as Error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const committedAmount = entityState?.currentBid?.amount;
+
+  return (
+    <div className="flex flex-col gap-4 items-center">
+      <div className="bg-white p-2 rounded-md w-full">
+        {entityStateError ? (
+          <p className="text-red-500 wrap-anywhere">{entityStateError.message}</p>
+        ) : (
+          <p className="text-gray-900">
+            Current committed amount:{" "}
+            {committedAmount !== undefined ? `${Number(committedAmount) / 1e6} USDC` : "Loading..."}
+          </p>
+        )}
+      </div>
+
+      {!isCancellationStage && (
+        <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
+          <p className="text-amber-800 text-sm font-medium">Contract not in Cancellation stage</p>
+          <p className="text-amber-700 text-sm mt-1">
+            The &quot;Cancel Bid&quot; button is only active when the contract is in the Cancellation stage (stage 2).
+            To test this feature, deploy your own contract and call{" "}
+            <code className="font-mono bg-amber-100 px-1 rounded">unsafeSetStage(2)</code> to move it to the
+            Cancellation state.
+          </p>
+        </div>
+      )}
+
+      <button
+        disabled={loading || awaitingTxReceipt || !isCancellationStage}
+        className="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full"
+        onClick={cancel}
+      >
+        <p className="text-gray-100">{loading || awaitingTxReceipt ? "Loading..." : "Cancel Bid"}</p>
+      </button>
+
+      {awaitingTxReceipt && !txReceipt && <p className="text-gray-900">Waiting for transaction receipt...</p>}
+      {txReceipt?.status === "success" && (
+        <p className="text-green-500">Cancellation successful — your funds have been refunded</p>
+      )}
+      {txReceipt?.status === "reverted" && <p className="text-red-500">Cancellation reverted</p>}
+      {error && <p className="text-red-500 wrap-anywhere">{error.message}</p>}
+      {awaitingTxReceiptError && <p className="text-red-500 wrap-anywhere">{awaitingTxReceiptError.message}</p>}
+    </div>
+  );
+}
+
+function CancelCard({ saleSpecificEntityID }: { saleSpecificEntityID: Hex }) {
+  return (
+    <div className="flex flex-col gap-4 p-4 bg-linear-to-r from-red-50 to-orange-50 rounded-lg border border-red-200">
+      <CancelSection saleSpecificEntityID={saleSpecificEntityID} />
+    </div>
+  );
+}
+
+export default CancelCard;
diff --git a/examples/framework/react-evm/src/hooks.ts b/examples/framework/react-evm/src/hooks.ts
index 86cccb4..05387b6 100644
--- a/examples/framework/react-evm/src/hooks.ts
+++ b/examples/framework/react-evm/src/hooks.ts
@@ -89,6 +89,17 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
     [writeContractAsync, config, chainId, switchChainAsync],
   );
 
+  const cancelBid = useCallback(async () => {
+    const { request } = await simulateContract(config, {
+      address: saleContract,
+      abi: settlementSaleAbi,
+      functionName: "cancelBid",
+      args: [],
+    });
+    const hash = await writeContractAsync(request);
+    setTxHash(hash);
+  }, [writeContractAsync, config]);
+
   const { data: entityStates, error: entityStateError } = useReadContract({
     address: saleContract,
     abi: settlementSaleAbi,
@@ -115,6 +126,15 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
   const currentTotalReadableStr = (Number(currentTotalRaw) / 1e6).toLocaleString(undefined, {
     minimumFractionDigits: 2,
     maximumFractionDigits: 2,
+  })
+  
+  const { data: contractStage } = useReadContract({
+    address: saleContract,
+    abi: settlementSaleAbi,
+    functionName: "stage",
+    query: {
+      refetchInterval: 3000,
+    },
   });
 
   return {
@@ -123,6 +143,8 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
     currentTotalRaw,
     currentTotalReadableStr,
     commitWithPermit,
+    cancelBid,
+    contractStage,
     awaitingTxReceipt,
     txReceipt,
     awaitingTxReceiptError,
diff --git a/examples/framework/react-evm/src/pages/Home.tsx b/examples/framework/react-evm/src/pages/Home.tsx
index fa4af52..0b44a70 100644
--- a/examples/framework/react-evm/src/pages/Home.tsx
+++ b/examples/framework/react-evm/src/pages/Home.tsx
@@ -4,6 +4,7 @@ import { useSonarAuth, useSonarEntities } from "@echoxyz/sonar-react";
 import { saleUUID, sonarConfig } from "../config";
 import { useAccount } from "wagmi";
 import CommitCard from "../components/sale/CommitCard";
+import CancelCard from "../components/sale/CancelCard";
 import { SaleEligibility } from "@echoxyz/sonar-core";
 import { AuthenticationSection } from "../components/auth/AuthenticationSection";
 import { EntityCard } from "../components/entity/EntityCard";
@@ -11,23 +12,23 @@ import { EntitiesList } from "../components/registration/EntitiesList";
 import { EligibilityResults } from "../components/registration/EligibilityResults";
 import { CommitmentDataCard } from "../components/sale/CommitmentDataCard";
 
+type SalePhase = "presale" | "live" | "cancelled";
+
 export function Home() {
-  const [saleIsLive, setSaleIsLive] = useState(false);
+  const [salePhase, setSalePhase] = useState<SalePhase>("presale");
   const [selectedEntityId, setSelectedEntityId] = useState<string | undefined>(undefined);
 
-  // Load sale state from localStorage
+  // Load sale phase from localStorage
   useEffect(() => {
-    const stored = localStorage.getItem("sale_is_live");
-    if (stored === "true") {
-      setSaleIsLive(true);
+    const stored = localStorage.getItem("sale_phase");
+    if (stored === "live" || stored === "cancelled" || stored === "presale") {
+      setSalePhase(stored);
     }
   }, []);
 
-  // Save sale state to localStorage
-  const toggleSaleLive = () => {
-    const newState = !saleIsLive;
-    setSaleIsLive(newState);
-    localStorage.setItem("sale_is_live", String(newState));
+  const handlePhaseChange = (phase: SalePhase) => {
+    setSalePhase(phase);
+    localStorage.setItem("sale_phase", phase);
   };
 
   // Auth and data hooks
@@ -146,16 +147,15 @@ export function Home() {
       <div className="fixed top-0 left-0 right-0 z-50 bg-gray-900 border-b border-gray-700 shadow-lg">
         <div className="max-w-4xl mx-auto px-4 py-2 flex items-center justify-between">
           <span className="text-gray-400 text-sm font-medium">Demo Controls</span>
-          <button
-            onClick={toggleSaleLive}
-            className={`px-4 py-1.5 rounded-md font-medium text-sm transition-colors ${
-              saleIsLive
-                ? "bg-green-500/20 text-green-400 hover:bg-green-500/30 border border-green-500/50"
-                : "bg-amber-500/20 text-amber-400 hover:bg-amber-500/30 border border-amber-500/50"
-            }`}
+          <select
+            value={salePhase}
+            onChange={(e) => handlePhaseChange(e.target.value as SalePhase)}
+            className="px-3 py-1.5 rounded-md font-medium text-sm bg-gray-800 border border-gray-600 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
           >
-            {saleIsLive ? "🟢 Sale Live" : "⏳ Pre-Sale"}
-          </button>
+            <option value="presale">⏳ Pre-Sale</option>
+            <option value="live">🟢 Sale Live</option>
+            <option value="cancelled">🔴 Cancelled</option>
+          </select>
         </div>
       </div>
 
@@ -167,8 +167,8 @@ export function Home() {
               <h1 className="text-3xl font-bold text-gray-900">Easy Company Token Sale</h1>
             </div>
 
-            {/* Countdown Banner */}
-            {!saleIsLive && (
+            {/* Phase Banner */}
+            {salePhase === "presale" && (
               <div className="bg-linear-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-6">
                 <div className="text-center">
                   <p className="text-blue-900 font-semibold text-lg">Sale Starting Soon</p>
@@ -177,17 +177,26 @@ export function Home() {
               </div>
             )}
 
-            {saleIsLive && (
+            {salePhase === "live" && (
               <div className="bg-linear-to-r bg-green-50 border border-green-200 rounded-lg p-6">
                 <div className="text-center">
                   <p className="text-green-700 font-semibold text-lg">The sale is now live!</p>
                 </div>
               </div>
             )}
+
+            {salePhase === "cancelled" && (
+              <div className="bg-linear-to-r from-red-50 to-orange-50 border border-red-200 rounded-lg p-6">
+                <div className="text-center">
+                  <p className="text-red-700 font-semibold text-lg">The sale has been cancelled</p>
+                  <p className="text-red-600">You may cancel your bid to receive a full refund of your committed funds</p>
+                </div>
+              </div>
+            )}
           </div>
 
           {/* Registration Phase */}
-          {!saleIsLive && (
+          {salePhase === "presale" && (
             <div className="flex flex-col gap-8">
               <AuthenticationSection ready={ready} authenticated={authenticated} login={login} logout={logout} />
 
@@ -217,7 +226,7 @@ export function Home() {
           )}
 
           {/* Sale Phase */}
-          {saleIsLive && (
+          {salePhase === "live" && (
             <div className="flex flex-col gap-8">
               {/* Connection Buttons */}
               <AuthenticationSection ready={ready} authenticated={authenticated} login={login} logout={logout} />
@@ -248,6 +257,29 @@ export function Home() {
               </div>
             </div>
           )}
+
+          {/* Cancellation Phase */}
+          {salePhase === "cancelled" && (
+            <div className="flex flex-col gap-8">
+              {/* Connection Buttons */}
+              <AuthenticationSection ready={ready} authenticated={authenticated} login={login} logout={logout} />
+              <ConnectKitButton />
+
+              {/* Entity Information */}
+              <div className="flex flex-col gap-4">
+                <h2 className="text-xl font-semibold text-gray-900">Your Entity Information</h2>
+                <EntitySection />
+              </div>
+
+              {/* Cancel Card */}
+              {address && selectedEntity && (
+                <div className="flex flex-col gap-4">
+                  <h2 className="text-xl font-semibold text-gray-900">Cancel Your Bid</h2>
+                  <CancelCard saleSpecificEntityID={selectedEntity.SaleSpecificEntityID} />
+                </div>
+              )}
+            </div>
+          )}
         </div>
       </div>
     </>

From c6e30c3b93b7a6a4ac7a9da790a0aa697b84b3e4 Mon Sep 17 00:00:00 2001
From: Emmanuel Byrd <25442086+EByrdS@users.noreply.github.com>
Date: Mon, 20 Apr 2026 13:52:33 +0100
Subject: [PATCH 3/9] Shows message if commited amount is 0

---
 .../src/app/components/sale/CancelCard.tsx    | 43 +++++++++++--------
 .../src/components/sale/CancelCard.tsx        | 43 +++++++++++--------
 2 files changed, 52 insertions(+), 34 deletions(-)

diff --git a/examples/framework/nextjs-evm/src/app/components/sale/CancelCard.tsx b/examples/framework/nextjs-evm/src/app/components/sale/CancelCard.tsx
index b000cf6..d0c8466 100644
--- a/examples/framework/nextjs-evm/src/app/components/sale/CancelCard.tsx
+++ b/examples/framework/nextjs-evm/src/app/components/sale/CancelCard.tsx
@@ -28,6 +28,7 @@ function CancelSection({ saleSpecificEntityID }: { saleSpecificEntityID: Hex })
   };
 
   const committedAmount = entityState?.currentBid?.amount;
+  const hasCommitment = committedAmount !== undefined && committedAmount > BigInt(0);
 
   return (
     <div className="flex flex-col gap-4 items-center">
@@ -42,25 +43,33 @@ function CancelSection({ saleSpecificEntityID }: { saleSpecificEntityID: Hex })
         )}
       </div>
 
-      {!isCancellationStage && (
-        <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
-          <p className="text-amber-800 text-sm font-medium">Contract not in Cancellation stage</p>
-          <p className="text-amber-700 text-sm mt-1">
-            The &quot;Cancel Bid&quot; button is only active when the contract is in the Cancellation stage (stage 2).
-            To test this feature, deploy your own contract and call{" "}
-            <code className="font-mono bg-amber-100 px-1 rounded">unsafeSetStage(2)</code> to move it to the
-            Cancellation state.
-          </p>
+      {committedAmount !== undefined && !hasCommitment ? (
+        <div className="bg-gray-50 border border-gray-200 p-3 rounded-md w-full">
+          <p className="text-gray-600 text-sm">No active commitment to cancel.</p>
         </div>
-      )}
+      ) : (
+        <>
+          {!isCancellationStage && (
+            <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
+              <p className="text-amber-800 text-sm font-medium">Contract not in Cancellation stage</p>
+              <p className="text-amber-700 text-sm mt-1">
+                The &quot;Cancel Bid&quot; button is only active when the contract is in the Cancellation stage (stage
+                2). To test this feature, deploy your own contract and call{" "}
+                <code className="font-mono bg-amber-100 px-1 rounded">unsafeSetStage(2)</code> to move it to the
+                Cancellation state.
+              </p>
+            </div>
+          )}
 
-      <button
-        disabled={loading || awaitingTxReceipt || !isCancellationStage}
-        className="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full"
-        onClick={cancel}
-      >
-        <p className="text-gray-100">{loading || awaitingTxReceipt ? "Loading..." : "Cancel Bid"}</p>
-      </button>
+          <button
+            disabled={loading || awaitingTxReceipt || !isCancellationStage}
+            className="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full"
+            onClick={cancel}
+          >
+            <p className="text-gray-100">{loading || awaitingTxReceipt ? "Loading..." : "Cancel Bid"}</p>
+          </button>
+        </>
+      )}
 
       {awaitingTxReceipt && !txReceipt && <p className="text-gray-900">Waiting for transaction receipt...</p>}
       {txReceipt?.status === "success" && (
diff --git a/examples/framework/react-evm/src/components/sale/CancelCard.tsx b/examples/framework/react-evm/src/components/sale/CancelCard.tsx
index dd7e1f7..3305f2f 100644
--- a/examples/framework/react-evm/src/components/sale/CancelCard.tsx
+++ b/examples/framework/react-evm/src/components/sale/CancelCard.tsx
@@ -26,6 +26,7 @@ function CancelSection({ saleSpecificEntityID }: { saleSpecificEntityID: Hex })
   };
 
   const committedAmount = entityState?.currentBid?.amount;
+  const hasCommitment = committedAmount !== undefined && committedAmount > BigInt(0);
 
   return (
     <div className="flex flex-col gap-4 items-center">
@@ -40,25 +41,33 @@ function CancelSection({ saleSpecificEntityID }: { saleSpecificEntityID: Hex })
         )}
       </div>
 
-      {!isCancellationStage && (
-        <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
-          <p className="text-amber-800 text-sm font-medium">Contract not in Cancellation stage</p>
-          <p className="text-amber-700 text-sm mt-1">
-            The &quot;Cancel Bid&quot; button is only active when the contract is in the Cancellation stage (stage 2).
-            To test this feature, deploy your own contract and call{" "}
-            <code className="font-mono bg-amber-100 px-1 rounded">unsafeSetStage(2)</code> to move it to the
-            Cancellation state.
-          </p>
+      {committedAmount !== undefined && !hasCommitment ? (
+        <div className="bg-gray-50 border border-gray-200 p-3 rounded-md w-full">
+          <p className="text-gray-600 text-sm">No active commitment to cancel.</p>
         </div>
-      )}
+      ) : (
+        <>
+          {!isCancellationStage && (
+            <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
+              <p className="text-amber-800 text-sm font-medium">Contract not in Cancellation stage</p>
+              <p className="text-amber-700 text-sm mt-1">
+                The &quot;Cancel Bid&quot; button is only active when the contract is in the Cancellation stage (stage
+                2). To test this feature, deploy your own contract and call{" "}
+                <code className="font-mono bg-amber-100 px-1 rounded">unsafeSetStage(2)</code> to move it to the
+                Cancellation state.
+              </p>
+            </div>
+          )}
 
-      <button
-        disabled={loading || awaitingTxReceipt || !isCancellationStage}
-        className="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full"
-        onClick={cancel}
-      >
-        <p className="text-gray-100">{loading || awaitingTxReceipt ? "Loading..." : "Cancel Bid"}</p>
-      </button>
+          <button
+            disabled={loading || awaitingTxReceipt || !isCancellationStage}
+            className="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full"
+            onClick={cancel}
+          >
+            <p className="text-gray-100">{loading || awaitingTxReceipt ? "Loading..." : "Cancel Bid"}</p>
+          </button>
+        </>
+      )}
 
       {awaitingTxReceipt && !txReceipt && <p className="text-gray-900">Waiting for transaction receipt...</p>}
       {txReceipt?.status === "success" && (

From 4b47221907fb33440bbe694d184cb52258c8f261 Mon Sep 17 00:00:00 2001
From: Emmanuel Byrd <25442086+EByrdS@users.noreply.github.com>
Date: Fri, 24 Apr 2026 12:06:43 +0200
Subject: [PATCH 4/9] fix(lint): expose entityState from useSaleContract hook

CancelCard destructures entityState from useSaleContract but the hook
only exposed the derived currentTotalRaw scalar. Add entityState as a
return value in both react-evm and nextjs-evm hooks.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../framework/nextjs-evm/src/app/hooks/use-sale-contract.ts | 6 ++++--
 examples/framework/react-evm/src/hooks.ts                   | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts b/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts
index 85ad80d..d0e7814 100644
--- a/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts
+++ b/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts
@@ -122,12 +122,13 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
   });
 
   const isEntityStateLoaded = entityStates !== undefined;
-  const currentTotalRaw: bigint = entityStates?.[0]?.currentBid?.amount ?? 0n;
+  const entityState = entityStates?.[0];
+  const currentTotalRaw: bigint = entityState?.currentBid?.amount ?? 0n;
   const currentTotalReadableStr = (Number(currentTotalRaw) / 1e6).toLocaleString(undefined, {
     minimumFractionDigits: 2,
     maximumFractionDigits: 2,
   })
-  
+
   const { data: contractStage } = useReadContract({
     address: saleContract,
     abi: settlementSaleAbi,
@@ -140,6 +141,7 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
   return {
     entityStateError,
     isEntityStateLoaded,
+    entityState,
     currentTotalRaw,
     currentTotalReadableStr,
     commitWithPermit,
diff --git a/examples/framework/react-evm/src/hooks.ts b/examples/framework/react-evm/src/hooks.ts
index 05387b6..6ed8da3 100644
--- a/examples/framework/react-evm/src/hooks.ts
+++ b/examples/framework/react-evm/src/hooks.ts
@@ -122,12 +122,13 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
   });
 
   const isEntityStateLoaded = entityStates !== undefined;
-  const currentTotalRaw: bigint = entityStates?.[0]?.currentBid?.amount ?? 0n;
+  const entityState = entityStates?.[0];
+  const currentTotalRaw: bigint = entityState?.currentBid?.amount ?? 0n;
   const currentTotalReadableStr = (Number(currentTotalRaw) / 1e6).toLocaleString(undefined, {
     minimumFractionDigits: 2,
     maximumFractionDigits: 2,
   })
-  
+
   const { data: contractStage } = useReadContract({
     address: saleContract,
     abi: settlementSaleAbi,
@@ -140,6 +141,7 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
   return {
     entityStateError,
     isEntityStateLoaded,
+    entityState,
     currentTotalRaw,
     currentTotalReadableStr,
     commitWithPermit,

From 9096fa5e2d92edca574b30ffda1a1d3d3a8a15a3 Mon Sep 17 00:00:00 2001
From: Emmanuel Byrd <25442086+EByrdS@users.noreply.github.com>
Date: Fri, 24 Apr 2026 16:28:53 +0200
Subject: [PATCH 5/9] Add cancelBid and contractStage to SVM hooks; update IDL

- Exposes cancelBid and contractStage from useSaleContract in both react-svm and nextjs-svm
- Updates settlement_sale IDL to include the cancel_bid instruction
- Fixes pkce-store singleton to survive Next.js hot module reloads (globalThis instead of module-scoped var)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/app/hooks/use-sale-contract.ts        | 54 ++++++++++++++++
 .../nextjs-svm/src/lib/pkce-store.ts          | 12 ++--
 .../react-svm/src/hooks/use-sale-contract.ts  | 63 +++++++++++++++++++
 3 files changed, 123 insertions(+), 6 deletions(-)

diff --git a/examples/framework/nextjs-svm/src/app/hooks/use-sale-contract.ts b/examples/framework/nextjs-svm/src/app/hooks/use-sale-contract.ts
index bd4ace6..2e8c0ec 100644
--- a/examples/framework/nextjs-svm/src/app/hooks/use-sale-contract.ts
+++ b/examples/framework/nextjs-svm/src/app/hooks/use-sale-contract.ts
@@ -29,6 +29,18 @@ interface EntityStateAccount {
 interface SettlementSaleAccount {
   permitSigner: PublicKey;
   vault: PublicKey;
+  stage: unknown;
+}
+
+function stageToNumber(stage: unknown): number {
+  if (typeof stage === "object" && stage !== null) {
+    const key = Object.keys(stage as object)[0];
+    const map: Record<string, number> = {
+      preOpen: 0, commitment: 1, cancellation: 2, settlement: 3, done: 4,
+    };
+    return map[key] ?? -1;
+  }
+  return -1;
 }
 
 function parseIdBytes(id: string): Uint8Array {
@@ -46,6 +58,7 @@ export function useSaleContract(saleSpecificEntityID: string) {
   const [committedAmount, setCommittedAmount] = useState<bigint | undefined>();
   const [entityStateError, setEntityStateError] = useState<Error | undefined>();
   const [usdcBalance, setUsdcBalance] = useState<bigint | undefined>();
+  const [contractStage, setContractStage] = useState<number | undefined>();
 
   const programPublicKey = useMemo(() => new PublicKey(PROGRAM_ID), []);
 
@@ -77,9 +90,12 @@ export function useSaleContract(saleSpecificEntityID: string) {
         const program = new Program(IDL, provider);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const state = (await (program.account as any).entityState.fetchNullable(entityStatePDA)) as EntityStateAccount | null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const saleAccount = (await (program.account as any).settlementSale.fetchNullable(salePDA)) as SettlementSaleAccount | null;
         if (!cancelled) {
           setCommittedAmount(state ? BigInt(state.currentAmount.toString()) : 0n);
           setEntityStateError(undefined);
+          if (saleAccount) setContractStage(stageToNumber(saleAccount.stage));
         }
 
         if (!cancelled && wallet && PAYMENT_TOKEN_MINT) {
@@ -209,6 +225,41 @@ export function useSaleContract(saleSpecificEntityID: string) {
     [wallet, connection, salePDA, entityStatePDA, programPublicKey]
   );
 
+  const cancelBid = useCallback(async () => {
+    if (!wallet) throw new Error("Wallet not connected");
+
+    const provider = new AnchorProvider(connection, wallet, { commitment: "confirmed" });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const program = new Program(IDL as any, provider);
+
+    const bidderTokenAccount = getAssociatedTokenAddressSync(new PublicKey(PAYMENT_TOKEN_MINT), wallet.publicKey);
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const tx = await (program.methods as any)
+      .cancelBid()
+      .accounts({
+        bidder: wallet.publicKey,
+        sale: salePDA,
+        bidderTokenAccount,
+        paymentTokenMint: new PublicKey(PAYMENT_TOKEN_MINT),
+        tokenProgram: TOKEN_PROGRAM_ID,
+      })
+      .transaction();
+
+    tx.feePayer = wallet.publicKey;
+    const { blockhash } = await connection.getLatestBlockhash();
+    tx.recentBlockhash = blockhash;
+
+    const signed = await wallet.signTransaction(tx);
+    const sig = await connection.sendRawTransaction(signed.serialize());
+    setTxSignature(sig);
+
+    setAwaitingTxReceipt(true);
+    await connection.confirmTransaction(sig, "confirmed");
+    setConfirmedTxSignature(sig);
+    setAwaitingTxReceipt(false);
+  }, [wallet, connection, salePDA]);
+
   const isEntityStateLoaded = committedAmount !== undefined;
   const currentTotalRaw: bigint = committedAmount ?? 0n;
   const currentTotalReadableStr = (Number(currentTotalRaw) / 1e6).toLocaleString(undefined, {
@@ -218,6 +269,9 @@ export function useSaleContract(saleSpecificEntityID: string) {
 
   return {
     commitWithPermit,
+    cancelBid,
+    contractStage,
+    committedAmount,
     txSignature,
     confirmedTxSignature,
     awaitingTxReceipt,
diff --git a/examples/framework/nextjs-svm/src/lib/pkce-store.ts b/examples/framework/nextjs-svm/src/lib/pkce-store.ts
index 06e7312..397a320 100644
--- a/examples/framework/nextjs-svm/src/lib/pkce-store.ts
+++ b/examples/framework/nextjs-svm/src/lib/pkce-store.ts
@@ -46,18 +46,18 @@ class InMemoryPKCEStore implements PKCEStore {
   }
 }
 
-// Singleton instance - can be swapped for a different implementation
-let pkceStoreInstance: PKCEStore | null = null;
+// Use globalThis to survive Next.js dev-mode hot module reloads.
+const g = globalThis as typeof globalThis & { __pkceStore?: PKCEStore };
 
 /**
  * Get the PKCE store instance.
  * This factory function allows swapping implementations without changing call sites.
  */
 export function getPKCEStore(): PKCEStore {
-  if (!pkceStoreInstance) {
-    pkceStoreInstance = new InMemoryPKCEStore();
+  if (!g.__pkceStore) {
+    g.__pkceStore = new InMemoryPKCEStore();
   }
-  return pkceStoreInstance;
+  return g.__pkceStore;
 }
 
 /**
@@ -65,7 +65,7 @@ export function getPKCEStore(): PKCEStore {
  * Useful for swapping to a database-backed store.
  */
 export function setPKCEStore(store: PKCEStore): void {
-  pkceStoreInstance = store;
+  g.__pkceStore = store;
 }
 
 const PKCE_TTL_MS = 10 * 60 * 1000; // 10 minutes
diff --git a/examples/framework/react-svm/src/hooks/use-sale-contract.ts b/examples/framework/react-svm/src/hooks/use-sale-contract.ts
index ff65fc9..0bd6cda 100644
--- a/examples/framework/react-svm/src/hooks/use-sale-contract.ts
+++ b/examples/framework/react-svm/src/hooks/use-sale-contract.ts
@@ -30,6 +30,18 @@ interface EntityStateAccount {
 interface SettlementSaleAccount {
   permitSigner: PublicKey;
   vault: PublicKey;
+  stage: unknown;
+}
+
+function stageToNumber(stage: unknown): number {
+  if (typeof stage === "object" && stage !== null) {
+    const key = Object.keys(stage as object)[0];
+    const map: Record<string, number> = {
+      preOpen: 0, commitment: 1, cancellation: 2, settlement: 3, done: 4,
+    };
+    return map[key] ?? -1;
+  }
+  return -1;
 }
 
 function parseIdBytes(id: string): Uint8Array {
@@ -47,6 +59,7 @@ export function useSaleContract(saleSpecificEntityID: string) {
   const [committedAmount, setCommittedAmount] = useState<bigint | undefined>();
   const [entityStateError, setEntityStateError] = useState<Error | undefined>();
   const [usdcBalance, setUsdcBalance] = useState<bigint | undefined>();
+  const [contractStage, setContractStage] = useState<number | undefined>();
 
   const programPublicKey = useMemo(() => new PublicKey(PROGRAM_ID), []);
 
@@ -79,9 +92,12 @@ export function useSaleContract(saleSpecificEntityID: string) {
         const program = new Program(IDL as any, provider);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const state = (await (program.account as any).entityState.fetchNullable(entityStatePDA)) as EntityStateAccount | null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const saleAccount = (await (program.account as any).settlementSale.fetchNullable(salePDA)) as SettlementSaleAccount | null;
         if (!cancelled) {
           setCommittedAmount(state ? BigInt(state.currentAmount.toString()) : 0n);
           setEntityStateError(undefined);
+          if (saleAccount) setContractStage(stageToNumber(saleAccount.stage));
         }
 
         if (!cancelled && wallet && PAYMENT_TOKEN_MINT) {
@@ -222,6 +238,50 @@ export function useSaleContract(saleSpecificEntityID: string) {
     [wallet, connection, salePDA, entityStatePDA, programPublicKey]
   );
 
+  const cancelBid = useCallback(async () => {
+    if (!wallet) throw new Error("Wallet not connected");
+
+    const provider = new AnchorProvider(connection, wallet, { commitment: "confirmed" });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const program = new Program(IDL as any, provider);
+
+    const bidderTokenAccount = getAssociatedTokenAddressSync(new PublicKey(PAYMENT_TOKEN_MINT), wallet.publicKey);
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const tx = await (program.methods as any)
+      .cancelBid()
+      .accounts({
+        bidder: wallet.publicKey,
+        sale: salePDA,
+        bidderTokenAccount,
+        paymentTokenMint: new PublicKey(PAYMENT_TOKEN_MINT),
+        tokenProgram: TOKEN_PROGRAM_ID,
+      })
+      .transaction();
+
+    tx.feePayer = wallet.publicKey;
+    const { blockhash } = await connection.getLatestBlockhash();
+    tx.recentBlockhash = blockhash;
+
+    const signed = await wallet.signTransaction(tx);
+    // Compute sig before sending — same pattern as commitWithPermit
+    const rawSig = signed.signatures[0]?.signature;
+    if (!rawSig) throw new Error("Transaction not signed");
+    const sig = bs58.encode(rawSig);
+    setTxSignature(sig);
+    try {
+      await connection.sendRawTransaction(signed.serialize());
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : String(e);
+      if (!msg.includes("already been processed")) throw e;
+    }
+
+    setAwaitingTxReceipt(true);
+    await connection.confirmTransaction(sig, "confirmed");
+    setConfirmedTxSignature(sig);
+    setAwaitingTxReceipt(false);
+  }, [wallet, connection, salePDA]);
+
   const isEntityStateLoaded = committedAmount !== undefined;
   const currentTotalRaw: bigint = committedAmount ?? 0n;
   const currentTotalReadableStr = (Number(currentTotalRaw) / 1e6).toLocaleString(undefined, {
@@ -231,6 +291,9 @@ export function useSaleContract(saleSpecificEntityID: string) {
 
   return {
     commitWithPermit,
+    cancelBid,
+    contractStage,
+    committedAmount,
     txSignature,
     confirmedTxSignature,
     awaitingTxReceipt,

From 92f9a9d8fee7b16abed0da3b898139dc73a7af32 Mon Sep 17 00:00:00 2001
From: Emmanuel Byrd <25442086+EByrdS@users.noreply.github.com>
Date: Fri, 24 Apr 2026 16:29:51 +0200
Subject: [PATCH 6/9] Cancellation phase UX: rename state, neutral styling,
 stage checks

- Rename "cancelled" phase to "cancellation" throughout all 4 frameworks (EVM/SVM, React/Next.js)
- Replace red banner/card styling with neutral amber for the cancellation period
- CancelCard: hide committed amount when 0, show "No active commitment to cancel" instead
- CancelCard: update testing instructions to reference founder's dashboard + openCancellation, link to contract docs
- CommitCard: add warning + disabled state when contract is not in Commitment stage (openCommitment)
- Run prettier on all modified files

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/app/components/sale/CancelCard.tsx    | 60 +++++++-----
 .../src/app/components/sale/CommitCard.tsx    | 33 +++++--
 .../framework/nextjs-evm/src/app/page.tsx     | 20 ++--
 .../src/app/components/sale/CancelCard.tsx    | 97 +++++++++++++++++++
 .../src/app/components/sale/CommitCard.tsx    | 33 +++++--
 .../framework/nextjs-svm/src/app/page.tsx     | 84 ++++++++++------
 .../src/components/sale/CancelCard.tsx        | 60 +++++++-----
 .../src/components/sale/CommitCard.tsx        | 33 +++++--
 .../framework/react-evm/src/pages/Home.tsx    | 20 ++--
 .../src/components/sale/CancelCard.tsx        | 95 ++++++++++++++++++
 .../src/components/sale/CommitCard.tsx        | 33 +++++--
 .../framework/react-svm/src/pages/Home.tsx    | 84 ++++++++++------
 12 files changed, 508 insertions(+), 144 deletions(-)
 create mode 100644 examples/framework/nextjs-svm/src/app/components/sale/CancelCard.tsx
 create mode 100644 examples/framework/react-svm/src/components/sale/CancelCard.tsx

diff --git a/examples/framework/nextjs-evm/src/app/components/sale/CancelCard.tsx b/examples/framework/nextjs-evm/src/app/components/sale/CancelCard.tsx
index d0c8466..764a819 100644
--- a/examples/framework/nextjs-evm/src/app/components/sale/CancelCard.tsx
+++ b/examples/framework/nextjs-evm/src/app/components/sale/CancelCard.tsx
@@ -7,8 +7,15 @@ import { useSaleContract } from "../../hooks/use-sale-contract";
 const CANCELLATION_STAGE = 2;
 
 function CancelSection({ saleSpecificEntityID }: { saleSpecificEntityID: Hex }) {
-  const { cancelBid, contractStage, entityState, entityStateError, awaitingTxReceipt, txReceipt, awaitingTxReceiptError } =
-    useSaleContract(saleSpecificEntityID);
+  const {
+    cancelBid,
+    contractStage,
+    entityState,
+    entityStateError,
+    awaitingTxReceipt,
+    txReceipt,
+    awaitingTxReceiptError,
+  } = useSaleContract(saleSpecificEntityID);
 
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | undefined>(undefined);
@@ -32,43 +39,52 @@ function CancelSection({ saleSpecificEntityID }: { saleSpecificEntityID: Hex })
 
   return (
     <div className="flex flex-col gap-4 items-center">
-      <div className="bg-white p-2 rounded-md w-full">
-        {entityStateError ? (
+      {entityStateError ? (
+        <div className="bg-white p-2 rounded-md w-full">
           <p className="text-red-500 wrap-anywhere">{entityStateError.message}</p>
-        ) : (
-          <p className="text-gray-900">
-            Current committed amount:{" "}
-            {committedAmount !== undefined ? `${Number(committedAmount) / 1e6} USDC` : "Loading..."}
-          </p>
-        )}
-      </div>
-
-      {committedAmount !== undefined && !hasCommitment ? (
-        <div className="bg-gray-50 border border-gray-200 p-3 rounded-md w-full">
-          <p className="text-gray-600 text-sm">No active commitment to cancel.</p>
         </div>
-      ) : (
+      ) : hasCommitment ? (
         <>
+          <div className="bg-white p-2 rounded-md w-full">
+            <p className="text-gray-900">Current committed amount: {`${Number(committedAmount) / 1e6} USDC`}</p>
+          </div>
+
           {!isCancellationStage && (
             <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
               <p className="text-amber-800 text-sm font-medium">Contract not in Cancellation stage</p>
               <p className="text-amber-700 text-sm mt-1">
-                The &quot;Cancel Bid&quot; button is only active when the contract is in the Cancellation stage (stage
-                2). To test this feature, deploy your own contract and call{" "}
-                <code className="font-mono bg-amber-100 px-1 rounded">unsafeSetStage(2)</code> to move it to the
-                Cancellation state.
+                The &quot;Cancel Bid&quot; button is only active when the contract is in the Cancellation stage. To test
+                this feature, use the founder&apos;s dashboard to open the cancellation state (
+                <code className="font-mono bg-amber-100 px-1 rounded">openCancellation</code>). See the{" "}
+                <a
+                  href="https://docs.echo.xyz/sonar/reference/contracts/settlement-sale"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline"
+                >
+                  contract docs
+                </a>
+                .
               </p>
             </div>
           )}
 
           <button
             disabled={loading || awaitingTxReceipt || !isCancellationStage}
-            className="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full"
+            className="bg-gray-700 hover:bg-gray-800 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full"
             onClick={cancel}
           >
             <p className="text-gray-100">{loading || awaitingTxReceipt ? "Loading..." : "Cancel Bid"}</p>
           </button>
         </>
+      ) : committedAmount !== undefined ? (
+        <div className="bg-gray-50 border border-gray-200 p-3 rounded-md w-full">
+          <p className="text-gray-600 text-sm">No active commitment to cancel.</p>
+        </div>
+      ) : (
+        <div className="bg-white p-2 rounded-md w-full">
+          <p className="text-gray-500 text-sm">Loading...</p>
+        </div>
       )}
 
       {awaitingTxReceipt && !txReceipt && <p className="text-gray-900">Waiting for transaction receipt...</p>}
@@ -84,7 +100,7 @@ function CancelSection({ saleSpecificEntityID }: { saleSpecificEntityID: Hex })
 
 function CancelCard({ saleSpecificEntityID }: { saleSpecificEntityID: Hex }) {
   return (
-    <div className="flex flex-col gap-4 p-4 bg-linear-to-r from-red-50 to-orange-50 rounded-lg border border-red-200">
+    <div className="flex flex-col gap-4 p-4 bg-linear-to-r from-indigo-50 to-blue-50 rounded-lg border border-indigo-200">
       <CancelSection saleSpecificEntityID={saleSpecificEntityID} />
     </div>
   );
diff --git a/examples/framework/nextjs-evm/src/app/components/sale/CommitCard.tsx b/examples/framework/nextjs-evm/src/app/components/sale/CommitCard.tsx
index 261129b..4e5cd55 100644
--- a/examples/framework/nextjs-evm/src/app/components/sale/CommitCard.tsx
+++ b/examples/framework/nextjs-evm/src/app/components/sale/CommitCard.tsx
@@ -7,8 +7,10 @@ import { saleUUID, paymentTokenAddress } from "@/lib/config";
 import { useSonarPurchase } from "../../hooks/use-sonar-purchase";
 import { useSaleContract } from "../../hooks/use-sale-contract";
 
+const COMMITMENT_STAGE = 1;
+
 function readinessConfig(
-  sonarPurchaser: UseSonarPurchaseResultReadyToPurchase | UseSonarPurchaseResultNotReadyToPurchase
+  sonarPurchaser: UseSonarPurchaseResultReadyToPurchase | UseSonarPurchaseResultNotReadyToPurchase,
 ) {
   const okConfig = (msg: string) => ({
     fgCol: "text-green-800",
@@ -39,11 +41,11 @@ function readinessConfig(
       return warningConfig("The connected wallet is not eligible for this sale. Connect a different wallet.");
     case PrePurchaseFailureReason.MAX_WALLETS_USED:
       return warningConfig(
-        "Maximum number of wallets reached — This entity can't use the connected wallet. Use a previous wallet."
+        "Maximum number of wallets reached — This entity can't use the connected wallet. Use a previous wallet.",
       );
     case PrePurchaseFailureReason.WALLET_NOT_LINKED:
       return warningConfig(
-        "Wallet not linked — The connected wallet is not linked to your entity. Please link it first."
+        "Wallet not linked — The connected wallet is not linked to your entity. Please link it first.",
       );
     case PrePurchaseFailureReason.SALE_NOT_ACTIVE:
       return errorConfig("The sale is not currently active.");
@@ -70,6 +72,7 @@ function CommitSection({
     awaitingTxReceiptError,
     isWrongChain,
     usdcBalance,
+    contractStage,
   } = useSaleContract(saleSpecificEntityID);
 
   const [loading, setLoading] = useState(false);
@@ -87,6 +90,7 @@ function CommitSection({
 
   const hasExistingCommitment = isEntityStateLoaded && currentTotalRaw > 0n;
   const hasInsufficientBalance = usdcBalance != null && isIncrementAmountValid && incrementRaw > usdcBalance;
+  const notInCommitmentStage = contractStage !== undefined && contractStage !== COMMITMENT_STAGE;
 
   const [showInput, setShowInput] = useState(true);
 
@@ -127,10 +131,27 @@ function CommitSection({
       <div className="flex flex-col gap-2">
         {hasExistingCommitment && (
           <p className="text-sm text-gray-600">
-            Current commitment:{" "}
-            <span className="font-semibold text-gray-900">{currentTotalReadableStr} USDC</span>
+            Current commitment: <span className="font-semibold text-gray-900">{currentTotalReadableStr} USDC</span>
           </p>
         )}
+        {notInCommitmentStage && (
+          <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
+            <p className="text-amber-800 text-sm font-medium">Contract not in Commitment stage</p>
+            <p className="text-amber-700 text-sm mt-1">
+              The Commit button is only active during the Commitment stage. Use the founder&apos;s dashboard to open the
+              commitment period (<code className="font-mono bg-amber-100 px-1 rounded">openCommitment</code>). See the{" "}
+              <a
+                href="https://docs.echo.xyz/sonar/reference/contracts/settlement-sale"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline"
+              >
+                contract docs
+              </a>
+              .
+            </p>
+          </div>
+        )}
         {showInput ? (
           <>
             <div className="flex flex-col gap-1">
@@ -154,7 +175,7 @@ function CommitSection({
               )}
             </div>
             <button
-              disabled={loading || awaitingTxReceipt || !isIncrementAmountValid || hasInsufficientBalance}
+              disabled={loading || awaitingTxReceipt || !isIncrementAmountValid || hasInsufficientBalance || notInCommitmentStage}
               className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               onClick={purchase}
             >
diff --git a/examples/framework/nextjs-evm/src/app/page.tsx b/examples/framework/nextjs-evm/src/app/page.tsx
index 5832b6c..3d994bd 100644
--- a/examples/framework/nextjs-evm/src/app/page.tsx
+++ b/examples/framework/nextjs-evm/src/app/page.tsx
@@ -15,7 +15,7 @@ import { EligibilityResults } from "./components/registration/EligibilityResults
 import { ConnectKitButton } from "connectkit";
 import { CommitmentDataCard } from "./components/sale/CommitmentDataCard";
 
-type SalePhase = "presale" | "live" | "cancelled";
+type SalePhase = "presale" | "live" | "cancellation";
 
 export default function Home() {
   const [salePhase, setSalePhase] = useState<SalePhase>("presale");
@@ -26,7 +26,7 @@ export default function Home() {
   // Load sale phase from localStorage
   useEffect(() => {
     const stored = localStorage.getItem("sale_phase");
-    if (stored === "live" || stored === "cancelled" || stored === "presale") {
+    if (stored === "live" || stored === "cancellation" || stored === "presale") {
       setSalePhase(stored);
     }
   }, []);
@@ -78,9 +78,7 @@ export default function Home() {
         <div className="flex flex-col gap-2 bg-yellow-50 border border-yellow-200 rounded-lg p-6 w-full">
           <div>
             <p className="text-yellow-800 font-medium">No Entity Found</p>
-            <p className="text-yellow-700">
-              No entity found for this account.
-            </p>
+            <p className="text-yellow-700">No entity found for this account.</p>
           </div>
           <div>
             <a
@@ -149,7 +147,7 @@ export default function Home() {
           >
             <option value="presale">⏳ Pre-Sale</option>
             <option value="live">🟢 Sale Live</option>
-            <option value="cancelled">🔴 Cancelled</option>
+            <option value="cancellation">🟡 Cancellation</option>
           </select>
         </div>
       </div>
@@ -181,11 +179,11 @@ export default function Home() {
                 </div>
               )}
 
-              {salePhase === "cancelled" && (
-                <div className="bg-linear-to-r from-red-50 to-orange-50 border border-red-200 rounded-lg p-6">
+              {salePhase === "cancellation" && (
+                <div className="bg-linear-to-r from-amber-50 to-yellow-50 border border-amber-200 rounded-lg p-6">
                   <div className="text-center">
-                    <p className="text-red-700 font-semibold text-lg">The sale has been cancelled</p>
-                    <p className="text-red-600">You may cancel your bid to receive a full refund of your committed funds</p>
+                    <p className="text-amber-800 font-semibold text-lg">Cancellation Period</p>
+                    <p className="text-amber-700">Commitments can be cancelled during this period</p>
                   </div>
                 </div>
               )}
@@ -251,7 +249,7 @@ export default function Home() {
               )}
 
               {/* Cancellation Phase */}
-              {salePhase === "cancelled" && (
+              {salePhase === "cancellation" && (
                 <div className="flex flex-col gap-4">
                   {sonarConnected && (
                     <div className="flex flex-col gap-4">
diff --git a/examples/framework/nextjs-svm/src/app/components/sale/CancelCard.tsx b/examples/framework/nextjs-svm/src/app/components/sale/CancelCard.tsx
new file mode 100644
index 0000000..c6a98b3
--- /dev/null
+++ b/examples/framework/nextjs-svm/src/app/components/sale/CancelCard.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { useState } from "react";
+import { useSaleContract } from "../../hooks/use-sale-contract";
+
+const CANCELLATION_STAGE = 2;
+
+function CancelSection({ saleSpecificEntityID }: { saleSpecificEntityID: string }) {
+  const { cancelBid, contractStage, committedAmount, entityStateError, awaitingTxReceipt } =
+    useSaleContract(saleSpecificEntityID);
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const [cancelSuccess, setCancelSuccess] = useState(false);
+
+  const isCancellationStage = contractStage === CANCELLATION_STAGE;
+  const hasCommitment = committedAmount !== undefined && committedAmount > 0n;
+
+  const cancel = async () => {
+    setLoading(true);
+    setError(undefined);
+    try {
+      await cancelBid();
+      setCancelSuccess(true);
+    } catch (err) {
+      setError(err as Error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4 items-center">
+      {entityStateError ? (
+        <div className="bg-white p-2 rounded-md w-full">
+          <p className="text-red-500 wrap-anywhere">{entityStateError.message}</p>
+        </div>
+      ) : hasCommitment ? (
+        <>
+          <div className="bg-white p-2 rounded-md w-full">
+            <p className="text-gray-900">Current committed amount: {`${Number(committedAmount) / 1e6} USDC`}</p>
+          </div>
+
+          {!isCancellationStage && (
+            <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
+              <p className="text-amber-800 text-sm font-medium">Contract not in Cancellation stage</p>
+              <p className="text-amber-700 text-sm mt-1">
+                The &quot;Cancel Bid&quot; button is only active when the contract is in the Cancellation stage. To test
+                this feature, use the founder&apos;s dashboard to open the cancellation state (
+                <code className="font-mono bg-amber-100 px-1 rounded">openCancellation</code>). See the{" "}
+                <a
+                  href="https://docs.echo.xyz/sonar/reference/contracts/settlement-sale"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline"
+                >
+                  contract docs
+                </a>
+                .
+              </p>
+            </div>
+          )}
+
+          <button
+            disabled={loading || awaitingTxReceipt || !isCancellationStage}
+            className="bg-gray-700 hover:bg-gray-800 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full"
+            onClick={cancel}
+          >
+            <p className="text-gray-100">{loading || awaitingTxReceipt ? "Loading..." : "Cancel Bid"}</p>
+          </button>
+        </>
+      ) : committedAmount !== undefined ? (
+        <div className="bg-gray-50 border border-gray-200 p-3 rounded-md w-full">
+          <p className="text-gray-600 text-sm">No active commitment to cancel.</p>
+        </div>
+      ) : (
+        <div className="bg-white p-2 rounded-md w-full">
+          <p className="text-gray-500 text-sm">Loading...</p>
+        </div>
+      )}
+
+      {awaitingTxReceipt && <p className="text-gray-900">Waiting for transaction confirmation...</p>}
+      {cancelSuccess && <p className="text-green-500">Cancellation successful — your funds have been refunded</p>}
+      {error && <p className="text-red-500 wrap-anywhere">{error.message}</p>}
+    </div>
+  );
+}
+
+function CancelCard({ saleSpecificEntityID }: { saleSpecificEntityID: string }) {
+  return (
+    <div className="flex flex-col gap-4 p-4 bg-linear-to-r from-indigo-50 to-blue-50 rounded-lg border border-indigo-200">
+      <CancelSection saleSpecificEntityID={saleSpecificEntityID} />
+    </div>
+  );
+}
+
+export default CancelCard;
diff --git a/examples/framework/nextjs-svm/src/app/components/sale/CommitCard.tsx b/examples/framework/nextjs-svm/src/app/components/sale/CommitCard.tsx
index 71372f6..8a90f08 100644
--- a/examples/framework/nextjs-svm/src/app/components/sale/CommitCard.tsx
+++ b/examples/framework/nextjs-svm/src/app/components/sale/CommitCard.tsx
@@ -7,8 +7,10 @@ import { saleUUID } from "@/lib/config";
 import { useSonarPurchase } from "../../hooks/use-sonar-purchase";
 import { useSaleContract } from "../../hooks/use-sale-contract";
 
+const COMMITMENT_STAGE = 1;
+
 function readinessConfig(
-  sonarPurchaser: UseSonarPurchaseResultReadyToPurchase | UseSonarPurchaseResultNotReadyToPurchase
+  sonarPurchaser: UseSonarPurchaseResultReadyToPurchase | UseSonarPurchaseResultNotReadyToPurchase,
 ) {
   const okConfig = (msg: string) => ({
     fgCol: "text-green-800",
@@ -39,11 +41,11 @@ function readinessConfig(
       return warningConfig("The connected wallet is not eligible for this sale. Connect a different wallet.");
     case PrePurchaseFailureReason.MAX_WALLETS_USED:
       return warningConfig(
-        "Maximum number of wallets reached — This entity can't use the connected wallet. Use a previous wallet."
+        "Maximum number of wallets reached — This entity can't use the connected wallet. Use a previous wallet.",
       );
     case PrePurchaseFailureReason.WALLET_NOT_LINKED:
       return warningConfig(
-        "Wallet not linked — The connected wallet is not linked to your entity. Please link it first."
+        "Wallet not linked — The connected wallet is not linked to your entity. Please link it first.",
       );
     case PrePurchaseFailureReason.SALE_NOT_ACTIVE:
       return errorConfig("The sale is not currently active.");
@@ -68,6 +70,7 @@ function CommitSection({
     entityStateError,
     awaitingTxReceipt,
     usdcBalance,
+    contractStage,
   } = useSaleContract(saleSpecificEntityID);
 
   const [loading, setLoading] = useState(false);
@@ -85,6 +88,7 @@ function CommitSection({
 
   const hasExistingCommitment = isEntityStateLoaded && currentTotalRaw > 0n;
   const hasInsufficientBalance = usdcBalance !== undefined && isIncrementAmountValid && incrementRaw > usdcBalance;
+  const notInCommitmentStage = contractStage !== undefined && contractStage !== COMMITMENT_STAGE;
 
   const [showInput, setShowInput] = useState(true);
 
@@ -116,10 +120,27 @@ function CommitSection({
       <div className="flex flex-col gap-2">
         {hasExistingCommitment && (
           <p className="text-sm text-gray-600">
-            Current commitment:{" "}
-            <span className="font-semibold text-gray-900">{currentTotalReadableStr} USDC</span>
+            Current commitment: <span className="font-semibold text-gray-900">{currentTotalReadableStr} USDC</span>
           </p>
         )}
+        {notInCommitmentStage && (
+          <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
+            <p className="text-amber-800 text-sm font-medium">Contract not in Commitment stage</p>
+            <p className="text-amber-700 text-sm mt-1">
+              The Commit button is only active during the Commitment stage. Use the founder&apos;s dashboard to open the
+              commitment period (<code className="font-mono bg-amber-100 px-1 rounded">openCommitment</code>). See the{" "}
+              <a
+                href="https://docs.echo.xyz/sonar/reference/contracts/settlement-sale"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline"
+              >
+                contract docs
+              </a>
+              .
+            </p>
+          </div>
+        )}
         {showInput ? (
           <>
             <div className="flex flex-col gap-1">
@@ -143,7 +164,7 @@ function CommitSection({
               )}
             </div>
             <button
-              disabled={loading || awaitingTxReceipt || !isIncrementAmountValid || hasInsufficientBalance}
+              disabled={loading || awaitingTxReceipt || !isIncrementAmountValid || hasInsufficientBalance || notInCommitmentStage}
               className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               onClick={purchase}
             >
diff --git a/examples/framework/nextjs-svm/src/app/page.tsx b/examples/framework/nextjs-svm/src/app/page.tsx
index c96f801..cd2b4b1 100644
--- a/examples/framework/nextjs-svm/src/app/page.tsx
+++ b/examples/framework/nextjs-svm/src/app/page.tsx
@@ -10,30 +10,31 @@ import { AuthenticationSection } from "./components/auth/AuthenticationSection";
 import { useSonarEntities } from "./hooks/use-sonar-entities";
 import { useSession } from "./hooks/use-session";
 import CommitCard from "./components/sale/CommitCard";
+import CancelCard from "./components/sale/CancelCard";
 import { EntitiesList } from "./components/registration/EntitiesList";
 import { EligibilityResults } from "./components/registration/EligibilityResults";
 import { CommitmentDataCard } from "./components/sale/CommitmentDataCard";
 
+type SalePhase = "presale" | "live" | "cancellation";
+
 export default function Home() {
-  const [saleIsLive, setSaleIsLive] = useState(false);
+  const [salePhase, setSalePhase] = useState<SalePhase>("presale");
   const [selectedEntityId, setSelectedEntityId] = useState<string | undefined>(undefined);
   const { sonarConnected } = useSession();
   const { publicKey } = useWallet();
   const address = publicKey?.toBase58();
 
-  // Load sale state from localStorage
+  // Load sale phase from localStorage
   useEffect(() => {
-    const stored = localStorage.getItem("sale_is_live");
-    if (stored === "true") {
-      setSaleIsLive(true);
+    const stored = localStorage.getItem("sale_phase");
+    if (stored === "live" || stored === "cancellation" || stored === "presale") {
+      setSalePhase(stored);
     }
   }, []);
 
-  // Save sale state to localStorage
-  const toggleSaleLive = () => {
-    const newState = !saleIsLive;
-    setSaleIsLive(newState);
-    localStorage.setItem("sale_is_live", String(newState));
+  const handlePhaseChange = (phase: SalePhase) => {
+    setSalePhase(phase);
+    localStorage.setItem("sale_phase", phase);
   };
 
   // Entities data
@@ -78,9 +79,7 @@ export default function Home() {
         <div className="flex flex-col gap-2 bg-yellow-50 border border-yellow-200 rounded-lg p-6 w-full">
           <div>
             <p className="text-yellow-800 font-medium">No Entity Found</p>
-            <p className="text-yellow-700">
-              No entity found for this account.
-            </p>
+            <p className="text-yellow-700">No entity found for this account.</p>
           </div>
           <div>
             <a
@@ -142,16 +141,15 @@ export default function Home() {
       <div className="fixed top-0 left-0 right-0 z-50 bg-gray-900 border-b border-gray-700 shadow-lg">
         <div className="max-w-4xl mx-auto px-4 py-2 flex items-center justify-between">
           <span className="text-gray-400 text-sm font-medium">Demo Controls</span>
-          <button
-            onClick={toggleSaleLive}
-            className={`px-4 py-1.5 rounded-md font-medium text-sm transition-colors ${
-              saleIsLive
-                ? "bg-green-500/20 text-green-400 hover:bg-green-500/30 border border-green-500/50"
-                : "bg-amber-500/20 text-amber-400 hover:bg-amber-500/30 border border-amber-500/50"
-            }`}
+          <select
+            value={salePhase}
+            onChange={(e) => handlePhaseChange(e.target.value as SalePhase)}
+            className="px-3 py-1.5 rounded-md font-medium text-sm bg-gray-800 border border-gray-600 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
           >
-            {saleIsLive ? "🟢 Sale Live" : "⏳ Pre-Sale"}
-          </button>
+            <option value="presale">⏳ Pre-Sale</option>
+            <option value="live">🟢 Sale Live</option>
+            <option value="cancellation">🟡 Cancellation</option>
+          </select>
         </div>
       </div>
 
@@ -164,8 +162,8 @@ export default function Home() {
                 <h1 className="text-3xl font-bold text-gray-900">Easy Company Token Sale</h1>
               </div>
 
-              {/* Countdown Banner */}
-              {!saleIsLive && (
+              {/* Phase Banner */}
+              {salePhase === "presale" && (
                 <div className="bg-linear-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-6">
                   <div className="text-center">
                     <p className="text-blue-900 font-semibold text-lg">Sale Starting Soon</p>
@@ -174,20 +172,29 @@ export default function Home() {
                 </div>
               )}
 
-              {saleIsLive && (
+              {salePhase === "live" && (
                 <div className="bg-linear-to-r bg-green-50 border border-green-200 rounded-lg p-6">
                   <div className="text-center">
                     <p className="text-green-700 font-semibold text-lg">The sale is now live!</p>
                   </div>
                 </div>
               )}
+
+              {salePhase === "cancellation" && (
+                <div className="bg-linear-to-r from-amber-50 to-yellow-50 border border-amber-200 rounded-lg p-6">
+                  <div className="text-center">
+                    <p className="text-amber-800 font-semibold text-lg">Cancellation Period</p>
+                    <p className="text-amber-700">Commitments can be cancelled during this period</p>
+                  </div>
+                </div>
+              )}
             </div>
 
             <div className="flex flex-col gap-8">
               <AuthenticationSection />
 
               {/* Registration Phase */}
-              {sonarConnected && !saleIsLive && (
+              {sonarConnected && salePhase === "presale" && (
                 <div className="flex flex-col gap-4">
                   <h2 className="text-xl font-semibold text-gray-900">Check Your Eligibility</h2>
 
@@ -211,7 +218,7 @@ export default function Home() {
               )}
 
               {/* Sale Phase */}
-              {saleIsLive && (
+              {salePhase === "live" && (
                 <div className="flex flex-col gap-4">
                   {sonarConnected && (
                     <div className="flex flex-col gap-4">
@@ -241,6 +248,29 @@ export default function Home() {
                   </div>
                 </div>
               )}
+
+              {/* Cancellation Phase */}
+              {salePhase === "cancellation" && (
+                <div className="flex flex-col gap-4">
+                  {sonarConnected && (
+                    <div className="flex flex-col gap-4">
+                      <WalletMultiButton />
+
+                      <div className="flex flex-col gap-4">
+                        <h2 className="text-xl font-semibold text-gray-900">Your Entity Information</h2>
+                        <EntitySection />
+                      </div>
+
+                      {address && selectedEntity && (
+                        <div className="flex flex-col gap-4">
+                          <h2 className="text-xl font-semibold text-gray-900">Cancel Your Bid</h2>
+                          <CancelCard saleSpecificEntityID={selectedEntity.SaleSpecificEntityID} />
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
           </div>
         </div>
diff --git a/examples/framework/react-evm/src/components/sale/CancelCard.tsx b/examples/framework/react-evm/src/components/sale/CancelCard.tsx
index 3305f2f..33b8d95 100644
--- a/examples/framework/react-evm/src/components/sale/CancelCard.tsx
+++ b/examples/framework/react-evm/src/components/sale/CancelCard.tsx
@@ -5,8 +5,15 @@ import { useSaleContract } from "../../hooks";
 const CANCELLATION_STAGE = 2;
 
 function CancelSection({ saleSpecificEntityID }: { saleSpecificEntityID: Hex }) {
-  const { cancelBid, contractStage, entityState, entityStateError, awaitingTxReceipt, txReceipt, awaitingTxReceiptError } =
-    useSaleContract(saleSpecificEntityID);
+  const {
+    cancelBid,
+    contractStage,
+    entityState,
+    entityStateError,
+    awaitingTxReceipt,
+    txReceipt,
+    awaitingTxReceiptError,
+  } = useSaleContract(saleSpecificEntityID);
 
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | undefined>(undefined);
@@ -30,43 +37,52 @@ function CancelSection({ saleSpecificEntityID }: { saleSpecificEntityID: Hex })
 
   return (
     <div className="flex flex-col gap-4 items-center">
-      <div className="bg-white p-2 rounded-md w-full">
-        {entityStateError ? (
+      {entityStateError ? (
+        <div className="bg-white p-2 rounded-md w-full">
           <p className="text-red-500 wrap-anywhere">{entityStateError.message}</p>
-        ) : (
-          <p className="text-gray-900">
-            Current committed amount:{" "}
-            {committedAmount !== undefined ? `${Number(committedAmount) / 1e6} USDC` : "Loading..."}
-          </p>
-        )}
-      </div>
-
-      {committedAmount !== undefined && !hasCommitment ? (
-        <div className="bg-gray-50 border border-gray-200 p-3 rounded-md w-full">
-          <p className="text-gray-600 text-sm">No active commitment to cancel.</p>
         </div>
-      ) : (
+      ) : hasCommitment ? (
         <>
+          <div className="bg-white p-2 rounded-md w-full">
+            <p className="text-gray-900">Current committed amount: {`${Number(committedAmount) / 1e6} USDC`}</p>
+          </div>
+
           {!isCancellationStage && (
             <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
               <p className="text-amber-800 text-sm font-medium">Contract not in Cancellation stage</p>
               <p className="text-amber-700 text-sm mt-1">
-                The &quot;Cancel Bid&quot; button is only active when the contract is in the Cancellation stage (stage
-                2). To test this feature, deploy your own contract and call{" "}
-                <code className="font-mono bg-amber-100 px-1 rounded">unsafeSetStage(2)</code> to move it to the
-                Cancellation state.
+                The &quot;Cancel Bid&quot; button is only active when the contract is in the Cancellation stage. To test
+                this feature, use the founder&apos;s dashboard to open the cancellation state (
+                <code className="font-mono bg-amber-100 px-1 rounded">openCancellation</code>). See the{" "}
+                <a
+                  href="https://docs.echo.xyz/sonar/reference/contracts/settlement-sale"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline"
+                >
+                  contract docs
+                </a>
+                .
               </p>
             </div>
           )}
 
           <button
             disabled={loading || awaitingTxReceipt || !isCancellationStage}
-            className="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full"
+            className="bg-gray-700 hover:bg-gray-800 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full"
             onClick={cancel}
           >
             <p className="text-gray-100">{loading || awaitingTxReceipt ? "Loading..." : "Cancel Bid"}</p>
           </button>
         </>
+      ) : committedAmount !== undefined ? (
+        <div className="bg-gray-50 border border-gray-200 p-3 rounded-md w-full">
+          <p className="text-gray-600 text-sm">No active commitment to cancel.</p>
+        </div>
+      ) : (
+        <div className="bg-white p-2 rounded-md w-full">
+          <p className="text-gray-500 text-sm">Loading...</p>
+        </div>
       )}
 
       {awaitingTxReceipt && !txReceipt && <p className="text-gray-900">Waiting for transaction receipt...</p>}
@@ -82,7 +98,7 @@ function CancelSection({ saleSpecificEntityID }: { saleSpecificEntityID: Hex })
 
 function CancelCard({ saleSpecificEntityID }: { saleSpecificEntityID: Hex }) {
   return (
-    <div className="flex flex-col gap-4 p-4 bg-linear-to-r from-red-50 to-orange-50 rounded-lg border border-red-200">
+    <div className="flex flex-col gap-4 p-4 bg-linear-to-r from-indigo-50 to-blue-50 rounded-lg border border-indigo-200">
       <CancelSection saleSpecificEntityID={saleSpecificEntityID} />
     </div>
   );
diff --git a/examples/framework/react-evm/src/components/sale/CommitCard.tsx b/examples/framework/react-evm/src/components/sale/CommitCard.tsx
index 3e6307f..e4e1dab 100644
--- a/examples/framework/react-evm/src/components/sale/CommitCard.tsx
+++ b/examples/framework/react-evm/src/components/sale/CommitCard.tsx
@@ -8,8 +8,10 @@ import {
 } from "@echoxyz/sonar-react";
 import { useSaleContract } from "../../hooks";
 
+const COMMITMENT_STAGE = 1;
+
 function readinessConfig(
-  sonarPurchaser: UseSonarPurchaseResultReadyToPurchase | UseSonarPurchaseResultNotReadyToPurchase
+  sonarPurchaser: UseSonarPurchaseResultReadyToPurchase | UseSonarPurchaseResultNotReadyToPurchase,
 ) {
   const okConfig = (msg: string) => ({
     fgCol: "text-green-800",
@@ -40,11 +42,11 @@ function readinessConfig(
       return warningConfig("The connected wallet is not eligible for this sale. Connect a different wallet.");
     case PrePurchaseFailureReason.MAX_WALLETS_USED:
       return warningConfig(
-        "Maximum number of wallets reached — This entity can't use the connected wallet. Use a previous wallet."
+        "Maximum number of wallets reached — This entity can't use the connected wallet. Use a previous wallet.",
       );
     case PrePurchaseFailureReason.WALLET_NOT_LINKED:
       return warningConfig(
-        "Wallet not linked — The connected wallet is not linked to your entity. Please link it first."
+        "Wallet not linked — The connected wallet is not linked to your entity. Please link it first.",
       );
     case PrePurchaseFailureReason.SALE_NOT_ACTIVE:
       return errorConfig("The sale is not currently active.");
@@ -71,6 +73,7 @@ function CommitSection({
     awaitingTxReceiptError,
     isWrongChain,
     usdcBalance,
+    contractStage,
   } = useSaleContract(saleSpecificEntityID);
 
   const [loading, setLoading] = useState(false);
@@ -88,6 +91,7 @@ function CommitSection({
 
   const hasExistingCommitment = isEntityStateLoaded && currentTotalRaw > 0n;
   const hasInsufficientBalance = usdcBalance != null && isIncrementAmountValid && incrementRaw > usdcBalance;
+  const notInCommitmentStage = contractStage !== undefined && contractStage !== COMMITMENT_STAGE;
 
   const [showInput, setShowInput] = useState(true);
 
@@ -128,10 +132,27 @@ function CommitSection({
       <div className="flex flex-col gap-2">
         {hasExistingCommitment && (
           <p className="text-sm text-gray-600">
-            Current commitment:{" "}
-            <span className="font-semibold text-gray-900">{currentTotalReadableStr} USDC</span>
+            Current commitment: <span className="font-semibold text-gray-900">{currentTotalReadableStr} USDC</span>
           </p>
         )}
+        {notInCommitmentStage && (
+          <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
+            <p className="text-amber-800 text-sm font-medium">Contract not in Commitment stage</p>
+            <p className="text-amber-700 text-sm mt-1">
+              The Commit button is only active during the Commitment stage. Use the founder&apos;s dashboard to open the
+              commitment period (<code className="font-mono bg-amber-100 px-1 rounded">openCommitment</code>). See the{" "}
+              <a
+                href="https://docs.echo.xyz/sonar/reference/contracts/settlement-sale"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline"
+              >
+                contract docs
+              </a>
+              .
+            </p>
+          </div>
+        )}
         {showInput ? (
           <>
             <div className="flex flex-col gap-1">
@@ -155,7 +176,7 @@ function CommitSection({
               )}
             </div>
             <button
-              disabled={loading || awaitingTxReceipt || !isIncrementAmountValid || hasInsufficientBalance}
+              disabled={loading || awaitingTxReceipt || !isIncrementAmountValid || hasInsufficientBalance || notInCommitmentStage}
               className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               onClick={purchase}
             >
diff --git a/examples/framework/react-evm/src/pages/Home.tsx b/examples/framework/react-evm/src/pages/Home.tsx
index 0b44a70..f28097f 100644
--- a/examples/framework/react-evm/src/pages/Home.tsx
+++ b/examples/framework/react-evm/src/pages/Home.tsx
@@ -12,7 +12,7 @@ import { EntitiesList } from "../components/registration/EntitiesList";
 import { EligibilityResults } from "../components/registration/EligibilityResults";
 import { CommitmentDataCard } from "../components/sale/CommitmentDataCard";
 
-type SalePhase = "presale" | "live" | "cancelled";
+type SalePhase = "presale" | "live" | "cancellation";
 
 export function Home() {
   const [salePhase, setSalePhase] = useState<SalePhase>("presale");
@@ -21,7 +21,7 @@ export function Home() {
   // Load sale phase from localStorage
   useEffect(() => {
     const stored = localStorage.getItem("sale_phase");
-    if (stored === "live" || stored === "cancelled" || stored === "presale") {
+    if (stored === "live" || stored === "cancellation" || stored === "presale") {
       setSalePhase(stored);
     }
   }, []);
@@ -83,9 +83,7 @@ export function Home() {
         <div className="flex flex-col gap-2 bg-yellow-50 border border-yellow-200 rounded-lg p-6 w-full">
           <div>
             <p className="text-yellow-800 font-medium">No Entity Found</p>
-            <p className="text-yellow-700">
-              No entity found for this account.
-            </p>
+            <p className="text-yellow-700">No entity found for this account.</p>
           </div>
           <div>
             <a
@@ -154,7 +152,7 @@ export function Home() {
           >
             <option value="presale">⏳ Pre-Sale</option>
             <option value="live">🟢 Sale Live</option>
-            <option value="cancelled">🔴 Cancelled</option>
+            <option value="cancellation">🟡 Cancellation</option>
           </select>
         </div>
       </div>
@@ -185,11 +183,11 @@ export function Home() {
               </div>
             )}
 
-            {salePhase === "cancelled" && (
-              <div className="bg-linear-to-r from-red-50 to-orange-50 border border-red-200 rounded-lg p-6">
+            {salePhase === "cancellation" && (
+              <div className="bg-linear-to-r from-amber-50 to-yellow-50 border border-amber-200 rounded-lg p-6">
                 <div className="text-center">
-                  <p className="text-red-700 font-semibold text-lg">The sale has been cancelled</p>
-                  <p className="text-red-600">You may cancel your bid to receive a full refund of your committed funds</p>
+                  <p className="text-amber-800 font-semibold text-lg">Cancellation Period</p>
+                  <p className="text-amber-700">Commitments can be cancelled during this period</p>
                 </div>
               </div>
             )}
@@ -259,7 +257,7 @@ export function Home() {
           )}
 
           {/* Cancellation Phase */}
-          {salePhase === "cancelled" && (
+          {salePhase === "cancellation" && (
             <div className="flex flex-col gap-8">
               {/* Connection Buttons */}
               <AuthenticationSection ready={ready} authenticated={authenticated} login={login} logout={logout} />
diff --git a/examples/framework/react-svm/src/components/sale/CancelCard.tsx b/examples/framework/react-svm/src/components/sale/CancelCard.tsx
new file mode 100644
index 0000000..17226aa
--- /dev/null
+++ b/examples/framework/react-svm/src/components/sale/CancelCard.tsx
@@ -0,0 +1,95 @@
+import { useState } from "react";
+import { useSaleContract } from "../../hooks/use-sale-contract";
+
+const CANCELLATION_STAGE = 2;
+
+function CancelSection({ saleSpecificEntityID }: { saleSpecificEntityID: string }) {
+  const { cancelBid, contractStage, committedAmount, entityStateError, awaitingTxReceipt } =
+    useSaleContract(saleSpecificEntityID);
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const [cancelSuccess, setCancelSuccess] = useState(false);
+
+  const isCancellationStage = contractStage === CANCELLATION_STAGE;
+  const hasCommitment = committedAmount !== undefined && committedAmount > 0n;
+
+  const cancel = async () => {
+    setLoading(true);
+    setError(undefined);
+    try {
+      await cancelBid();
+      setCancelSuccess(true);
+    } catch (err) {
+      setError(err as Error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4 items-center">
+      {entityStateError ? (
+        <div className="bg-white p-2 rounded-md w-full">
+          <p className="text-red-500 wrap-anywhere">{entityStateError.message}</p>
+        </div>
+      ) : hasCommitment ? (
+        <>
+          <div className="bg-white p-2 rounded-md w-full">
+            <p className="text-gray-900">Current committed amount: {`${Number(committedAmount) / 1e6} USDC`}</p>
+          </div>
+
+          {!isCancellationStage && (
+            <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
+              <p className="text-amber-800 text-sm font-medium">Contract not in Cancellation stage</p>
+              <p className="text-amber-700 text-sm mt-1">
+                The &quot;Cancel Bid&quot; button is only active when the contract is in the Cancellation stage. To test
+                this feature, use the founder&apos;s dashboard to open the cancellation state (
+                <code className="font-mono bg-amber-100 px-1 rounded">openCancellation</code>). See the{" "}
+                <a
+                  href="https://docs.echo.xyz/sonar/reference/contracts/settlement-sale"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline"
+                >
+                  contract docs
+                </a>
+                .
+              </p>
+            </div>
+          )}
+
+          <button
+            disabled={loading || awaitingTxReceipt || !isCancellationStage}
+            className="bg-gray-700 hover:bg-gray-800 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full"
+            onClick={cancel}
+          >
+            <p className="text-gray-100">{loading || awaitingTxReceipt ? "Loading..." : "Cancel Bid"}</p>
+          </button>
+        </>
+      ) : committedAmount !== undefined ? (
+        <div className="bg-gray-50 border border-gray-200 p-3 rounded-md w-full">
+          <p className="text-gray-600 text-sm">No active commitment to cancel.</p>
+        </div>
+      ) : (
+        <div className="bg-white p-2 rounded-md w-full">
+          <p className="text-gray-500 text-sm">Loading...</p>
+        </div>
+      )}
+
+      {awaitingTxReceipt && <p className="text-gray-900">Waiting for transaction confirmation...</p>}
+      {cancelSuccess && <p className="text-green-500">Cancellation successful — your funds have been refunded</p>}
+      {error && <p className="text-red-500 wrap-anywhere">{error.message}</p>}
+    </div>
+  );
+}
+
+function CancelCard({ saleSpecificEntityID }: { saleSpecificEntityID: string }) {
+  return (
+    <div className="flex flex-col gap-4 p-4 bg-linear-to-r from-indigo-50 to-blue-50 rounded-lg border border-indigo-200">
+      <CancelSection saleSpecificEntityID={saleSpecificEntityID} />
+    </div>
+  );
+}
+
+export default CancelCard;
diff --git a/examples/framework/react-svm/src/components/sale/CommitCard.tsx b/examples/framework/react-svm/src/components/sale/CommitCard.tsx
index 09fd1ab..4c0d73a 100644
--- a/examples/framework/react-svm/src/components/sale/CommitCard.tsx
+++ b/examples/framework/react-svm/src/components/sale/CommitCard.tsx
@@ -8,8 +8,10 @@ import {
 } from "@echoxyz/sonar-react";
 import { useSaleContract } from "../../hooks/use-sale-contract";
 
+const COMMITMENT_STAGE = 1;
+
 function readinessConfig(
-  sonarPurchaser: UseSonarPurchaseResultReadyToPurchase | UseSonarPurchaseResultNotReadyToPurchase
+  sonarPurchaser: UseSonarPurchaseResultReadyToPurchase | UseSonarPurchaseResultNotReadyToPurchase,
 ) {
   const okConfig = (msg: string) => ({
     fgCol: "text-green-800",
@@ -40,11 +42,11 @@ function readinessConfig(
       return warningConfig("The connected wallet is not eligible for this sale. Connect a different wallet.");
     case PrePurchaseFailureReason.MAX_WALLETS_USED:
       return warningConfig(
-        "Maximum number of wallets reached — This entity can't use the connected wallet. Use a previous wallet."
+        "Maximum number of wallets reached — This entity can't use the connected wallet. Use a previous wallet.",
       );
     case PrePurchaseFailureReason.WALLET_NOT_LINKED:
       return warningConfig(
-        "Wallet not linked — The connected wallet is not linked to your entity. Please link it first."
+        "Wallet not linked — The connected wallet is not linked to your entity. Please link it first.",
       );
     case PrePurchaseFailureReason.SALE_NOT_ACTIVE:
       return errorConfig("The sale is not currently active.");
@@ -69,6 +71,7 @@ function CommitSection({
     entityStateError,
     awaitingTxReceipt,
     usdcBalance,
+    contractStage,
   } = useSaleContract(saleSpecificEntityID);
 
   const [loading, setLoading] = useState(false);
@@ -86,6 +89,7 @@ function CommitSection({
 
   const hasExistingCommitment = isEntityStateLoaded && currentTotalRaw > 0n;
   const hasInsufficientBalance = usdcBalance !== undefined && isIncrementAmountValid && incrementRaw > usdcBalance;
+  const notInCommitmentStage = contractStage !== undefined && contractStage !== COMMITMENT_STAGE;
 
   const [showInput, setShowInput] = useState(true);
 
@@ -117,10 +121,27 @@ function CommitSection({
       <div className="flex flex-col gap-2">
         {hasExistingCommitment && (
           <p className="text-sm text-gray-600">
-            Current commitment:{" "}
-            <span className="font-semibold text-gray-900">{currentTotalReadableStr} USDC</span>
+            Current commitment: <span className="font-semibold text-gray-900">{currentTotalReadableStr} USDC</span>
           </p>
         )}
+        {notInCommitmentStage && (
+          <div className="bg-amber-50 border border-amber-200 p-3 rounded-md w-full">
+            <p className="text-amber-800 text-sm font-medium">Contract not in Commitment stage</p>
+            <p className="text-amber-700 text-sm mt-1">
+              The Commit button is only active during the Commitment stage. Use the founder&apos;s dashboard to open the
+              commitment period (<code className="font-mono bg-amber-100 px-1 rounded">openCommitment</code>). See the{" "}
+              <a
+                href="https://docs.echo.xyz/sonar/reference/contracts/settlement-sale"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline"
+              >
+                contract docs
+              </a>
+              .
+            </p>
+          </div>
+        )}
         {showInput ? (
           <>
             <div className="flex flex-col gap-1">
@@ -144,7 +165,7 @@ function CommitSection({
               )}
             </div>
             <button
-              disabled={loading || awaitingTxReceipt || !isIncrementAmountValid || hasInsufficientBalance}
+              disabled={loading || awaitingTxReceipt || !isIncrementAmountValid || hasInsufficientBalance || notInCommitmentStage}
               className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               onClick={purchase}
             >
diff --git a/examples/framework/react-svm/src/pages/Home.tsx b/examples/framework/react-svm/src/pages/Home.tsx
index a0548ca..8d68f21 100644
--- a/examples/framework/react-svm/src/pages/Home.tsx
+++ b/examples/framework/react-svm/src/pages/Home.tsx
@@ -4,6 +4,7 @@ import { useWallet } from "@solana/wallet-adapter-react";
 import { useSonarAuth, useSonarEntities } from "@echoxyz/sonar-react";
 import { saleUUID, sonarConfig } from "../config";
 import CommitCard from "../components/sale/CommitCard";
+import CancelCard from "../components/sale/CancelCard";
 import { SaleEligibility } from "@echoxyz/sonar-core";
 import { AuthenticationSection } from "../components/auth/AuthenticationSection";
 import { EntityCard } from "../components/entity/EntityCard";
@@ -11,23 +12,23 @@ import { EntitiesList } from "../components/registration/EntitiesList";
 import { EligibilityResults } from "../components/registration/EligibilityResults";
 import { CommitmentDataCard } from "../components/sale/CommitmentDataCard";
 
+type SalePhase = "presale" | "live" | "cancellation";
+
 export function Home() {
-  const [saleIsLive, setSaleIsLive] = useState(false);
+  const [salePhase, setSalePhase] = useState<SalePhase>("presale");
   const [selectedEntityId, setSelectedEntityId] = useState<string | undefined>(undefined);
 
-  // Load sale state from localStorage
+  // Load sale phase from localStorage
   useEffect(() => {
-    const stored = localStorage.getItem("sale_is_live");
-    if (stored === "true") {
-      setSaleIsLive(true);
+    const stored = localStorage.getItem("sale_phase");
+    if (stored === "live" || stored === "cancellation" || stored === "presale") {
+      setSalePhase(stored);
     }
   }, []);
 
-  // Save sale state to localStorage
-  const toggleSaleLive = () => {
-    const newState = !saleIsLive;
-    setSaleIsLive(newState);
-    localStorage.setItem("sale_is_live", String(newState));
+  const handlePhaseChange = (phase: SalePhase) => {
+    setSalePhase(phase);
+    localStorage.setItem("sale_phase", phase);
   };
 
   // Auth and data hooks
@@ -83,9 +84,7 @@ export function Home() {
         <div className="flex flex-col gap-2 bg-yellow-50 border border-yellow-200 rounded-lg p-6 w-full">
           <div>
             <p className="text-yellow-800 font-medium">No Entity Found</p>
-            <p className="text-yellow-700">
-              No entity found for this account.
-            </p>
+            <p className="text-yellow-700">No entity found for this account.</p>
           </div>
           <div>
             <a
@@ -147,16 +146,15 @@ export function Home() {
       <div className="fixed top-0 left-0 right-0 z-50 bg-gray-900 border-b border-gray-700 shadow-lg">
         <div className="max-w-4xl mx-auto px-4 py-2 flex items-center justify-between">
           <span className="text-gray-400 text-sm font-medium">Demo Controls</span>
-          <button
-            onClick={toggleSaleLive}
-            className={`px-4 py-1.5 rounded-md font-medium text-sm transition-colors ${
-              saleIsLive
-                ? "bg-green-500/20 text-green-400 hover:bg-green-500/30 border border-green-500/50"
-                : "bg-amber-500/20 text-amber-400 hover:bg-amber-500/30 border border-amber-500/50"
-            }`}
+          <select
+            value={salePhase}
+            onChange={(e) => handlePhaseChange(e.target.value as SalePhase)}
+            className="px-3 py-1.5 rounded-md font-medium text-sm bg-gray-800 border border-gray-600 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
           >
-            {saleIsLive ? "🟢 Sale Live" : "⏳ Pre-Sale"}
-          </button>
+            <option value="presale">⏳ Pre-Sale</option>
+            <option value="live">🟢 Sale Live</option>
+            <option value="cancellation">🟡 Cancellation</option>
+          </select>
         </div>
       </div>
 
@@ -168,8 +166,8 @@ export function Home() {
               <h1 className="text-3xl font-bold text-gray-900">Easy Company Token Sale</h1>
             </div>
 
-            {/* Countdown Banner */}
-            {!saleIsLive && (
+            {/* Phase Banner */}
+            {salePhase === "presale" && (
               <div className="bg-linear-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-6">
                 <div className="text-center">
                   <p className="text-blue-900 font-semibold text-lg">Sale Starting Soon</p>
@@ -178,17 +176,26 @@ export function Home() {
               </div>
             )}
 
-            {saleIsLive && (
+            {salePhase === "live" && (
               <div className="bg-linear-to-r bg-green-50 border border-green-200 rounded-lg p-6">
                 <div className="text-center">
                   <p className="text-green-700 font-semibold text-lg">The sale is now live!</p>
                 </div>
               </div>
             )}
+
+            {salePhase === "cancellation" && (
+              <div className="bg-linear-to-r from-amber-50 to-yellow-50 border border-amber-200 rounded-lg p-6">
+                <div className="text-center">
+                  <p className="text-amber-800 font-semibold text-lg">Cancellation Period</p>
+                  <p className="text-amber-700">Commitments can be cancelled during this period</p>
+                </div>
+              </div>
+            )}
           </div>
 
           {/* Registration Phase */}
-          {!saleIsLive && (
+          {salePhase === "presale" && (
             <div className="flex flex-col gap-8">
               <AuthenticationSection ready={ready} authenticated={authenticated} login={login} logout={logout} />
 
@@ -218,7 +225,7 @@ export function Home() {
           )}
 
           {/* Sale Phase */}
-          {saleIsLive && (
+          {salePhase === "live" && (
             <div className="flex flex-col gap-8">
               {/* Connection Buttons */}
               <AuthenticationSection ready={ready} authenticated={authenticated} login={login} logout={logout} />
@@ -249,6 +256,29 @@ export function Home() {
               </div>
             </div>
           )}
+
+          {/* Cancellation Phase */}
+          {salePhase === "cancellation" && (
+            <div className="flex flex-col gap-8">
+              {/* Connection Buttons */}
+              <AuthenticationSection ready={ready} authenticated={authenticated} login={login} logout={logout} />
+              <WalletMultiButton />
+
+              {/* Entity Information */}
+              <div className="flex flex-col gap-4">
+                <h2 className="text-xl font-semibold text-gray-900">Your Entity Information</h2>
+                <EntitySection />
+              </div>
+
+              {/* Cancel Card */}
+              {address && selectedEntity && (
+                <div className="flex flex-col gap-4">
+                  <h2 className="text-xl font-semibold text-gray-900">Cancel Your Bid</h2>
+                  <CancelCard saleSpecificEntityID={selectedEntity.SaleSpecificEntityID} />
+                </div>
+              )}
+            </div>
+          )}
         </div>
       </div>
     </>

From 7279a540250fc17958392224635609ba28701119 Mon Sep 17 00:00:00 2001
From: Emmanuel Byrd <25442086+EByrdS@users.noreply.github.com>
Date: Tue, 5 May 2026 16:14:47 +0100
Subject: [PATCH 7/9] Prettier

---
 .../framework/nextjs-evm/src/app/Provider.tsx |  2 +-
 .../nextjs-evm/src/app/actions/sonar.ts       |  4 +--
 .../components/sale/CommitmentDataCard.tsx    | 10 +++----
 .../src/app/hooks/use-sale-contract.ts        |  2 +-
 .../nextjs-svm/src/app/actions/sonar.ts       |  4 +--
 .../components/sale/CommitmentDataCard.tsx    |  8 ++----
 .../src/app/hooks/use-sale-contract.ts        | 26 ++++++++++++-------
 examples/framework/react-evm/src/App.tsx      |  1 -
 examples/framework/react-evm/src/Provider.tsx |  2 +-
 .../components/sale/CommitmentDataCard.tsx    | 10 +++----
 examples/framework/react-evm/src/hooks.ts     |  2 +-
 examples/framework/react-evm/src/main.tsx     |  3 +--
 examples/framework/react-svm/src/App.tsx      |  1 -
 .../components/sale/CommitmentDataCard.tsx    | 10 +++----
 .../react-svm/src/hooks/use-sale-contract.ts  | 26 ++++++++++++-------
 examples/framework/react-svm/src/main.tsx     |  3 +--
 16 files changed, 55 insertions(+), 59 deletions(-)

diff --git a/examples/framework/nextjs-evm/src/app/Provider.tsx b/examples/framework/nextjs-evm/src/app/Provider.tsx
index 9403f28..0469d8a 100644
--- a/examples/framework/nextjs-evm/src/app/Provider.tsx
+++ b/examples/framework/nextjs-evm/src/app/Provider.tsx
@@ -21,7 +21,7 @@ const config = createConfig(
     // Required App Info
     appName: "Sonar Next.js example app",
     appDescription: "Next.js app showing how to integrate with the Sonar API via backend OAuth.",
-  })
+  }),
 );
 
 const queryClient = new QueryClient();
diff --git a/examples/framework/nextjs-evm/src/app/actions/sonar.ts b/examples/framework/nextjs-evm/src/app/actions/sonar.ts
index 4e53b13..7416dc8 100644
--- a/examples/framework/nextjs-evm/src/app/actions/sonar.ts
+++ b/examples/framework/nextjs-evm/src/app/actions/sonar.ts
@@ -18,7 +18,7 @@ export const getEntities = createSonarServerAction<ListAvailableEntitiesInput, L
       throw new Error("Missing saleUUID");
     }
     return client.listAvailableEntities({ saleUUID });
-  }
+  },
 );
 
 type PrePurchaseCheckInput = { saleUUID: string; entityID: string; walletAddress: string };
@@ -32,7 +32,7 @@ export const prePurchaseCheck = createSonarServerAction<PrePurchaseCheckInput, P
       throw new Error("Missing required parameters");
     }
     return client.prePurchaseCheck({ saleUUID, entityID, walletAddress });
-  }
+  },
 );
 
 type GeneratePurchasePermitInput = { saleUUID: string; entityID: string; walletAddress: string };
diff --git a/examples/framework/nextjs-evm/src/app/components/sale/CommitmentDataCard.tsx b/examples/framework/nextjs-evm/src/app/components/sale/CommitmentDataCard.tsx
index 28c4d9d..5013506 100644
--- a/examples/framework/nextjs-evm/src/app/components/sale/CommitmentDataCard.tsx
+++ b/examples/framework/nextjs-evm/src/app/components/sale/CommitmentDataCard.tsx
@@ -12,7 +12,7 @@ function calculateCommitmentTotal(amounts: WalletTokenAmount[]): bigint {
 }
 
 // The timestamp is a string in ISO 8601 format
-function formatTimestamp(timestamp: string ): string {
+function formatTimestamp(timestamp: string): string {
   const date = new Date(timestamp);
   return date.toLocaleString(undefined, {
     month: "short",
@@ -35,9 +35,7 @@ function CommitmentRow({ commitment, decimals }: CommitmentRowProps) {
   return (
     <div className="flex justify-between items-center py-2 border-b border-gray-100 last:border-b-0">
       <div className="flex flex-col gap-0.5">
-        <span className="text-sm font-medium text-gray-900">
-          {formatAmount(total, decimals)}
-        </span>
+        <span className="text-sm font-medium text-gray-900">{formatAmount(total, decimals)}</span>
         <span className="text-xs text-gray-500">{commitment.SaleSpecificEntityID}</span>
       </div>
       <span className="text-xs text-gray-400">{formatTimestamp(commitment.CreatedAt)}</span>
@@ -81,9 +79,7 @@ export function CommitmentDataCard({ saleUUID }: { saleUUID: string }) {
       <div className="grid grid-cols-2 gap-4">
         <div className="bg-white p-3 rounded-lg">
           <p className="text-sm text-gray-500">Total Committers</p>
-          <p className="text-2xl font-bold text-gray-900">
-            {commitmentData.UniqueCommitmentCount.toLocaleString()}
-          </p>
+          <p className="text-2xl font-bold text-gray-900">{commitmentData.UniqueCommitmentCount.toLocaleString()}</p>
         </div>
         <div className="bg-white p-3 rounded-lg">
           <p className="text-sm text-gray-500">Total Committed</p>
diff --git a/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts b/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts
index d0e7814..51074b1 100644
--- a/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts
+++ b/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts
@@ -127,7 +127,7 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
   const currentTotalReadableStr = (Number(currentTotalRaw) / 1e6).toLocaleString(undefined, {
     minimumFractionDigits: 2,
     maximumFractionDigits: 2,
-  })
+  });
 
   const { data: contractStage } = useReadContract({
     address: saleContract,
diff --git a/examples/framework/nextjs-svm/src/app/actions/sonar.ts b/examples/framework/nextjs-svm/src/app/actions/sonar.ts
index 4e53b13..7416dc8 100644
--- a/examples/framework/nextjs-svm/src/app/actions/sonar.ts
+++ b/examples/framework/nextjs-svm/src/app/actions/sonar.ts
@@ -18,7 +18,7 @@ export const getEntities = createSonarServerAction<ListAvailableEntitiesInput, L
       throw new Error("Missing saleUUID");
     }
     return client.listAvailableEntities({ saleUUID });
-  }
+  },
 );
 
 type PrePurchaseCheckInput = { saleUUID: string; entityID: string; walletAddress: string };
@@ -32,7 +32,7 @@ export const prePurchaseCheck = createSonarServerAction<PrePurchaseCheckInput, P
       throw new Error("Missing required parameters");
     }
     return client.prePurchaseCheck({ saleUUID, entityID, walletAddress });
-  }
+  },
 );
 
 type GeneratePurchasePermitInput = { saleUUID: string; entityID: string; walletAddress: string };
diff --git a/examples/framework/nextjs-svm/src/app/components/sale/CommitmentDataCard.tsx b/examples/framework/nextjs-svm/src/app/components/sale/CommitmentDataCard.tsx
index ea6aefd..5013506 100644
--- a/examples/framework/nextjs-svm/src/app/components/sale/CommitmentDataCard.tsx
+++ b/examples/framework/nextjs-svm/src/app/components/sale/CommitmentDataCard.tsx
@@ -35,9 +35,7 @@ function CommitmentRow({ commitment, decimals }: CommitmentRowProps) {
   return (
     <div className="flex justify-between items-center py-2 border-b border-gray-100 last:border-b-0">
       <div className="flex flex-col gap-0.5">
-        <span className="text-sm font-medium text-gray-900">
-          {formatAmount(total, decimals)}
-        </span>
+        <span className="text-sm font-medium text-gray-900">{formatAmount(total, decimals)}</span>
         <span className="text-xs text-gray-500">{commitment.SaleSpecificEntityID}</span>
       </div>
       <span className="text-xs text-gray-400">{formatTimestamp(commitment.CreatedAt)}</span>
@@ -81,9 +79,7 @@ export function CommitmentDataCard({ saleUUID }: { saleUUID: string }) {
       <div className="grid grid-cols-2 gap-4">
         <div className="bg-white p-3 rounded-lg">
           <p className="text-sm text-gray-500">Total Committers</p>
-          <p className="text-2xl font-bold text-gray-900">
-            {commitmentData.UniqueCommitmentCount.toLocaleString()}
-          </p>
+          <p className="text-2xl font-bold text-gray-900">{commitmentData.UniqueCommitmentCount.toLocaleString()}</p>
         </div>
         <div className="bg-white p-3 rounded-lg">
           <p className="text-sm text-gray-500">Total Committed</p>
diff --git a/examples/framework/nextjs-svm/src/app/hooks/use-sale-contract.ts b/examples/framework/nextjs-svm/src/app/hooks/use-sale-contract.ts
index 2e8c0ec..fbaae61 100644
--- a/examples/framework/nextjs-svm/src/app/hooks/use-sale-contract.ts
+++ b/examples/framework/nextjs-svm/src/app/hooks/use-sale-contract.ts
@@ -36,7 +36,11 @@ function stageToNumber(stage: unknown): number {
   if (typeof stage === "object" && stage !== null) {
     const key = Object.keys(stage as object)[0];
     const map: Record<string, number> = {
-      preOpen: 0, commitment: 1, cancellation: 2, settlement: 3, done: 4,
+      preOpen: 0,
+      commitment: 1,
+      cancellation: 2,
+      settlement: 3,
+      done: 4,
     };
     return map[key] ?? -1;
   }
@@ -66,12 +70,12 @@ export function useSaleContract(saleSpecificEntityID: string) {
     const saleUuidBytes = parseIdBytes(saleUUID);
     const [salePDA] = PublicKey.findProgramAddressSync(
       [Buffer.from("settlement_sale"), Buffer.from(saleUuidBytes)],
-      programPublicKey
+      programPublicKey,
     );
     const saleEntityIdBytes = parseIdBytes(saleSpecificEntityID);
     const [entityStatePDA] = PublicKey.findProgramAddressSync(
       [Buffer.from("entity_state"), salePDA.toBuffer(), Buffer.from(saleEntityIdBytes)],
-      programPublicKey
+      programPublicKey,
     );
     return { salePDA, entityStatePDA };
   }, [saleSpecificEntityID, programPublicKey]);
@@ -85,13 +89,17 @@ export function useSaleContract(saleSpecificEntityID: string) {
           connection,
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           wallet ?? ({ publicKey: PublicKey.default } as any),
-          { commitment: "confirmed" }
+          { commitment: "confirmed" },
         );
         const program = new Program(IDL, provider);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const state = (await (program.account as any).entityState.fetchNullable(entityStatePDA)) as EntityStateAccount | null;
+        const state = (await (program.account as any).entityState.fetchNullable(
+          entityStatePDA,
+        )) as EntityStateAccount | null;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const saleAccount = (await (program.account as any).settlementSale.fetchNullable(salePDA)) as SettlementSaleAccount | null;
+        const saleAccount = (await (program.account as any).settlementSale.fetchNullable(
+          salePDA,
+        )) as SettlementSaleAccount | null;
         if (!cancelled) {
           setCommittedAmount(state ? BigInt(state.currentAmount.toString()) : 0n);
           setEntityStateError(undefined);
@@ -144,7 +152,7 @@ export function useSaleContract(saleSpecificEntityID: string) {
       // since the program validates the account against the permit's entity ID.
       const [permitEntityStatePDA] = PublicKey.findProgramAddressSync(
         [Buffer.from("entity_state"), salePDA.toBuffer(), Buffer.from(saleEntityIdArr)],
-        programPublicKey
+        programPublicKey,
       );
       const walletBytes = Array.from(new PublicKey(permit.Wallet).toBytes());
       const payloadHex = permit.Payload.replace(/^0x/, "");
@@ -185,7 +193,7 @@ export function useSaleContract(saleSpecificEntityID: string) {
 
       const [walletBindingPDA] = PublicKey.findProgramAddressSync(
         [Buffer.from("wallet_binding"), salePDA.toBuffer(), wallet.publicKey.toBuffer()],
-        programPublicKey
+        programPublicKey,
       );
 
       const bidderTokenAccount = getAssociatedTokenAddressSync(new PublicKey(PAYMENT_TOKEN_MINT), wallet.publicKey);
@@ -222,7 +230,7 @@ export function useSaleContract(saleSpecificEntityID: string) {
       setConfirmedTxSignature(sig);
       setAwaitingTxReceipt(false);
     },
-    [wallet, connection, salePDA, entityStatePDA, programPublicKey]
+    [wallet, connection, salePDA, entityStatePDA, programPublicKey],
   );
 
   const cancelBid = useCallback(async () => {
diff --git a/examples/framework/react-evm/src/App.tsx b/examples/framework/react-evm/src/App.tsx
index 58ca82b..09d9ded 100644
--- a/examples/framework/react-evm/src/App.tsx
+++ b/examples/framework/react-evm/src/App.tsx
@@ -16,4 +16,3 @@ export function App() {
     </Provider>
   );
 }
-
diff --git a/examples/framework/react-evm/src/Provider.tsx b/examples/framework/react-evm/src/Provider.tsx
index e8361cb..efa998e 100644
--- a/examples/framework/react-evm/src/Provider.tsx
+++ b/examples/framework/react-evm/src/Provider.tsx
@@ -19,7 +19,7 @@ const config = createConfig(
     appName: "Sonar React example app",
     appDescription:
       "React app showing how to integrate with the Sonar API via the sonar-react and sonar-core libraries.",
-  })
+  }),
 );
 
 const queryClient = new QueryClient();
diff --git a/examples/framework/react-evm/src/components/sale/CommitmentDataCard.tsx b/examples/framework/react-evm/src/components/sale/CommitmentDataCard.tsx
index 51cf590..170efbd 100644
--- a/examples/framework/react-evm/src/components/sale/CommitmentDataCard.tsx
+++ b/examples/framework/react-evm/src/components/sale/CommitmentDataCard.tsx
@@ -12,7 +12,7 @@ function calculateCommitmentTotal(amounts: WalletTokenAmount[]): bigint {
 }
 
 // The timestamp is a string in ISO 8601 format
-function formatTimestamp(timestamp: string ): string {
+function formatTimestamp(timestamp: string): string {
   const date = new Date(timestamp);
   return date.toLocaleString(undefined, {
     month: "short",
@@ -35,9 +35,7 @@ function CommitmentRow({ commitment, decimals }: CommitmentRowProps) {
   return (
     <div className="flex justify-between items-center py-2 border-b border-gray-100 last:border-b-0">
       <div className="flex flex-col gap-0.5">
-        <span className="text-sm font-medium text-gray-900">
-          {formatAmount(total, decimals)}
-        </span>
+        <span className="text-sm font-medium text-gray-900">{formatAmount(total, decimals)}</span>
         <span className="text-xs text-gray-500">{commitment.SaleSpecificEntityID}</span>
       </div>
       <span className="text-xs text-gray-400">{formatTimestamp(commitment.CreatedAt)}</span>
@@ -79,9 +77,7 @@ export function CommitmentDataCard({ saleUUID }: { saleUUID: string }) {
       <div className="grid grid-cols-2 gap-4">
         <div className="bg-white p-3 rounded-lg">
           <p className="text-sm text-gray-500">Total Committers</p>
-          <p className="text-2xl font-bold text-gray-900">
-            {commitmentData.UniqueCommitmentCount.toLocaleString()}
-          </p>
+          <p className="text-2xl font-bold text-gray-900">{commitmentData.UniqueCommitmentCount.toLocaleString()}</p>
         </div>
         <div className="bg-white p-3 rounded-lg">
           <p className="text-sm text-gray-500">Total Committed</p>
diff --git a/examples/framework/react-evm/src/hooks.ts b/examples/framework/react-evm/src/hooks.ts
index 6ed8da3..1abd820 100644
--- a/examples/framework/react-evm/src/hooks.ts
+++ b/examples/framework/react-evm/src/hooks.ts
@@ -127,7 +127,7 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
   const currentTotalReadableStr = (Number(currentTotalRaw) / 1e6).toLocaleString(undefined, {
     minimumFractionDigits: 2,
     maximumFractionDigits: 2,
-  })
+  });
 
   const { data: contractStage } = useReadContract({
     address: saleContract,
diff --git a/examples/framework/react-evm/src/main.tsx b/examples/framework/react-evm/src/main.tsx
index 6b6cb86..61f2cd1 100644
--- a/examples/framework/react-evm/src/main.tsx
+++ b/examples/framework/react-evm/src/main.tsx
@@ -6,6 +6,5 @@ import "./globals.css";
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
-
diff --git a/examples/framework/react-svm/src/App.tsx b/examples/framework/react-svm/src/App.tsx
index 58ca82b..09d9ded 100644
--- a/examples/framework/react-svm/src/App.tsx
+++ b/examples/framework/react-svm/src/App.tsx
@@ -16,4 +16,3 @@ export function App() {
     </Provider>
   );
 }
-
diff --git a/examples/framework/react-svm/src/components/sale/CommitmentDataCard.tsx b/examples/framework/react-svm/src/components/sale/CommitmentDataCard.tsx
index 51cf590..170efbd 100644
--- a/examples/framework/react-svm/src/components/sale/CommitmentDataCard.tsx
+++ b/examples/framework/react-svm/src/components/sale/CommitmentDataCard.tsx
@@ -12,7 +12,7 @@ function calculateCommitmentTotal(amounts: WalletTokenAmount[]): bigint {
 }
 
 // The timestamp is a string in ISO 8601 format
-function formatTimestamp(timestamp: string ): string {
+function formatTimestamp(timestamp: string): string {
   const date = new Date(timestamp);
   return date.toLocaleString(undefined, {
     month: "short",
@@ -35,9 +35,7 @@ function CommitmentRow({ commitment, decimals }: CommitmentRowProps) {
   return (
     <div className="flex justify-between items-center py-2 border-b border-gray-100 last:border-b-0">
       <div className="flex flex-col gap-0.5">
-        <span className="text-sm font-medium text-gray-900">
-          {formatAmount(total, decimals)}
-        </span>
+        <span className="text-sm font-medium text-gray-900">{formatAmount(total, decimals)}</span>
         <span className="text-xs text-gray-500">{commitment.SaleSpecificEntityID}</span>
       </div>
       <span className="text-xs text-gray-400">{formatTimestamp(commitment.CreatedAt)}</span>
@@ -79,9 +77,7 @@ export function CommitmentDataCard({ saleUUID }: { saleUUID: string }) {
       <div className="grid grid-cols-2 gap-4">
         <div className="bg-white p-3 rounded-lg">
           <p className="text-sm text-gray-500">Total Committers</p>
-          <p className="text-2xl font-bold text-gray-900">
-            {commitmentData.UniqueCommitmentCount.toLocaleString()}
-          </p>
+          <p className="text-2xl font-bold text-gray-900">{commitmentData.UniqueCommitmentCount.toLocaleString()}</p>
         </div>
         <div className="bg-white p-3 rounded-lg">
           <p className="text-sm text-gray-500">Total Committed</p>
diff --git a/examples/framework/react-svm/src/hooks/use-sale-contract.ts b/examples/framework/react-svm/src/hooks/use-sale-contract.ts
index 0bd6cda..6ce3f0e 100644
--- a/examples/framework/react-svm/src/hooks/use-sale-contract.ts
+++ b/examples/framework/react-svm/src/hooks/use-sale-contract.ts
@@ -37,7 +37,11 @@ function stageToNumber(stage: unknown): number {
   if (typeof stage === "object" && stage !== null) {
     const key = Object.keys(stage as object)[0];
     const map: Record<string, number> = {
-      preOpen: 0, commitment: 1, cancellation: 2, settlement: 3, done: 4,
+      preOpen: 0,
+      commitment: 1,
+      cancellation: 2,
+      settlement: 3,
+      done: 4,
     };
     return map[key] ?? -1;
   }
@@ -67,12 +71,12 @@ export function useSaleContract(saleSpecificEntityID: string) {
     const saleUuidBytes = parseIdBytes(saleUUID);
     const [salePDA] = PublicKey.findProgramAddressSync(
       [Buffer.from("settlement_sale"), Buffer.from(saleUuidBytes)],
-      programPublicKey
+      programPublicKey,
     );
     const saleEntityIdBytes = parseIdBytes(saleSpecificEntityID);
     const [entityStatePDA] = PublicKey.findProgramAddressSync(
       [Buffer.from("entity_state"), salePDA.toBuffer(), Buffer.from(saleEntityIdBytes)],
-      programPublicKey
+      programPublicKey,
     );
     return { salePDA, entityStatePDA };
   }, [saleSpecificEntityID, programPublicKey]);
@@ -86,14 +90,18 @@ export function useSaleContract(saleSpecificEntityID: string) {
           connection,
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           wallet ?? ({ publicKey: PublicKey.default } as any),
-          { commitment: "confirmed" }
+          { commitment: "confirmed" },
         );
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const program = new Program(IDL as any, provider);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const state = (await (program.account as any).entityState.fetchNullable(entityStatePDA)) as EntityStateAccount | null;
+        const state = (await (program.account as any).entityState.fetchNullable(
+          entityStatePDA,
+        )) as EntityStateAccount | null;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const saleAccount = (await (program.account as any).settlementSale.fetchNullable(salePDA)) as SettlementSaleAccount | null;
+        const saleAccount = (await (program.account as any).settlementSale.fetchNullable(
+          salePDA,
+        )) as SettlementSaleAccount | null;
         if (!cancelled) {
           setCommittedAmount(state ? BigInt(state.currentAmount.toString()) : 0n);
           setEntityStateError(undefined);
@@ -146,7 +154,7 @@ export function useSaleContract(saleSpecificEntityID: string) {
       // since the program validates the account against the permit's entity ID.
       const [permitEntityStatePDA] = PublicKey.findProgramAddressSync(
         [Buffer.from("entity_state"), salePDA.toBuffer(), Buffer.from(saleEntityIdArr)],
-        programPublicKey
+        programPublicKey,
       );
       const walletBytes = Array.from(new PublicKey(permit.Wallet).toBytes());
       const payloadHex = permit.Payload.replace(/^0x/, "");
@@ -187,7 +195,7 @@ export function useSaleContract(saleSpecificEntityID: string) {
 
       const [walletBindingPDA] = PublicKey.findProgramAddressSync(
         [Buffer.from("wallet_binding"), salePDA.toBuffer(), wallet.publicKey.toBuffer()],
-        programPublicKey
+        programPublicKey,
       );
 
       const bidderTokenAccount = getAssociatedTokenAddressSync(new PublicKey(PAYMENT_TOKEN_MINT), wallet.publicKey);
@@ -235,7 +243,7 @@ export function useSaleContract(saleSpecificEntityID: string) {
       setConfirmedTxSignature(sig);
       setAwaitingTxReceipt(false);
     },
-    [wallet, connection, salePDA, entityStatePDA, programPublicKey]
+    [wallet, connection, salePDA, entityStatePDA, programPublicKey],
   );
 
   const cancelBid = useCallback(async () => {
diff --git a/examples/framework/react-svm/src/main.tsx b/examples/framework/react-svm/src/main.tsx
index a28a11d..b3227d8 100644
--- a/examples/framework/react-svm/src/main.tsx
+++ b/examples/framework/react-svm/src/main.tsx
@@ -7,6 +7,5 @@ import "./globals.css";
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
-

From 746652f33eaf6674122dd7332c3f239b8a5ebde7 Mon Sep 17 00:00:00 2001
From: Emmanuel Byrd <25442086+EByrdS@users.noreply.github.com>
Date: Tue, 5 May 2026 17:20:39 +0100
Subject: [PATCH 8/9] Adds chain guard

---
 .../framework/nextjs-evm/src/app/hooks/use-sale-contract.ts  | 5 ++++-
 examples/framework/react-evm/src/hooks.ts                    | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts b/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts
index 51074b1..9275892 100644
--- a/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts
+++ b/examples/framework/nextjs-evm/src/app/hooks/use-sale-contract.ts
@@ -90,6 +90,9 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
   );
 
   const cancelBid = useCallback(async () => {
+    if (chainId !== baseSepolia.id) {
+      await switchChainAsync({ chainId: baseSepolia.id });
+    }
     const { request } = await simulateContract(config, {
       address: saleContract,
       abi: settlementSaleAbi,
@@ -98,7 +101,7 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
     });
     const hash = await writeContractAsync(request);
     setTxHash(hash);
-  }, [writeContractAsync, config]);
+  }, [writeContractAsync, config, chainId, switchChainAsync]);
 
   const { data: entityStates, error: entityStateError } = useReadContract({
     address: saleContract,
diff --git a/examples/framework/react-evm/src/hooks.ts b/examples/framework/react-evm/src/hooks.ts
index 1abd820..78e0c48 100644
--- a/examples/framework/react-evm/src/hooks.ts
+++ b/examples/framework/react-evm/src/hooks.ts
@@ -90,6 +90,9 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
   );
 
   const cancelBid = useCallback(async () => {
+    if (chainId !== baseSepolia.id) {
+      await switchChainAsync({ chainId: baseSepolia.id });
+    }
     const { request } = await simulateContract(config, {
       address: saleContract,
       abi: settlementSaleAbi,
@@ -98,7 +101,7 @@ export const useSaleContract = (saleSpecificEntityID: Hex) => {
     });
     const hash = await writeContractAsync(request);
     setTxHash(hash);
-  }, [writeContractAsync, config]);
+  }, [writeContractAsync, config, chainId, switchChainAsync]);
 
   const { data: entityStates, error: entityStateError } = useReadContract({
     address: saleContract,

From 50df443d8e8a51d09f6803ad718570a9c3396587 Mon Sep 17 00:00:00 2001
From: Emmanuel Byrd <25442086+EByrdS@users.noreply.github.com>
Date: Tue, 5 May 2026 17:35:18 +0100
Subject: [PATCH 9/9] Recovers from confirmation fail

---
 .../nextjs-svm/src/app/hooks/use-sale-contract.ts        | 9 ++++++---
 .../framework/react-svm/src/hooks/use-sale-contract.ts   | 9 ++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/examples/framework/nextjs-svm/src/app/hooks/use-sale-contract.ts b/examples/framework/nextjs-svm/src/app/hooks/use-sale-contract.ts
index fbaae61..a9dc5e3 100644
--- a/examples/framework/nextjs-svm/src/app/hooks/use-sale-contract.ts
+++ b/examples/framework/nextjs-svm/src/app/hooks/use-sale-contract.ts
@@ -263,9 +263,12 @@ export function useSaleContract(saleSpecificEntityID: string) {
     setTxSignature(sig);
 
     setAwaitingTxReceipt(true);
-    await connection.confirmTransaction(sig, "confirmed");
-    setConfirmedTxSignature(sig);
-    setAwaitingTxReceipt(false);
+    try {
+      await connection.confirmTransaction(sig, "confirmed");
+      setConfirmedTxSignature(sig);
+    } finally {
+      setAwaitingTxReceipt(false);
+    }
   }, [wallet, connection, salePDA]);
 
   const isEntityStateLoaded = committedAmount !== undefined;
diff --git a/examples/framework/react-svm/src/hooks/use-sale-contract.ts b/examples/framework/react-svm/src/hooks/use-sale-contract.ts
index 6ce3f0e..83d9a64 100644
--- a/examples/framework/react-svm/src/hooks/use-sale-contract.ts
+++ b/examples/framework/react-svm/src/hooks/use-sale-contract.ts
@@ -285,9 +285,12 @@ export function useSaleContract(saleSpecificEntityID: string) {
     }
 
     setAwaitingTxReceipt(true);
-    await connection.confirmTransaction(sig, "confirmed");
-    setConfirmedTxSignature(sig);
-    setAwaitingTxReceipt(false);
+    try {
+      await connection.confirmTransaction(sig, "confirmed");
+      setConfirmedTxSignature(sig);
+    } finally {
+      setAwaitingTxReceipt(false);
+    }
   }, [wallet, connection, salePDA]);
 
   const isEntityStateLoaded = committedAmount !== undefined;