Don't deselect Hardhat or Foundry when going back from build-info

Author: kuzdogan

app/components/verification/VerificationMethodSelector.tsx

@@ -1,4 +1,5 @@
 import { Tooltip as ReactTooltip } from "react-tooltip";
+import { useState, useEffect } from "react";
 import { verificationMethods, frameworkMethods, frameworkMessages } from "../../data/verificationMethods";
 import type { Language, SelectedMethod } from "../../types/verification";
 import VerificationWarning from "./VerificationWarning";
@@ -14,9 +15,25 @@ export default function VerificationMethodSelector({
   selectedMethod,
   onMethodSelect,
 }: VerificationMethodSelectorProps) {
+  // Keep track of the last selected framework method so we can return to it
+  const [lastFrameworkMethod, setLastFrameworkMethod] = useState<"hardhat" | "foundry">("hardhat");
+  
   if (!selectedLanguage) return null;
 
   const methods = verificationMethods[selectedLanguage as keyof typeof verificationMethods];
+  
+  // Update lastFrameworkMethod when a framework method is selected
+  useEffect(() => {
+    if (frameworkMethods.some(method => method.id === selectedMethod)) {
+      setLastFrameworkMethod(selectedMethod as "hardhat" | "foundry");
+    }
+  }, [selectedMethod]);
+
+  // Check if selected method is a framework method
+  const isFrameworkMethod = frameworkMethods.some((method) => method.id === selectedMethod);
+  
+  // Check if we're in build-info mode (selected method is build-info)
+  const isBuildInfoMode = selectedMethod === "build-info";
 
   // Get the warning for the selected method
   const selectedMethodWarning =
@@ -25,14 +42,12 @@ export default function VerificationMethodSelector({
           ?.warning
       : null;
 
-  // Get the framework message for the selected framework
-  const selectedFrameworkMessage = selectedMethod && frameworkMessages[selectedMethod];
-
-  // Check if selected method is a framework method
-  const isFrameworkMethod = frameworkMethods.some((method) => method.id === selectedMethod);
+  // Get the framework message for the selected framework (or the active framework in build-info mode)
+  const selectedFrameworkMessage = (isFrameworkMethod && frameworkMessages[selectedMethod]) || 
+                                   (isBuildInfoMode && frameworkMessages[lastFrameworkMethod]);
 
-  // Check if we're in build-info mode (selected method is build-info)
-  const isBuildInfoMode = selectedMethod === "build-info";
+  // Get the currently active framework method for visual selection purposes
+  const activeFrameworkMethod = isBuildInfoMode ? lastFrameworkMethod : (isFrameworkMethod ? selectedMethod : null);
 
   return (
     <div>
@@ -91,15 +106,15 @@ export default function VerificationMethodSelector({
             type="button"
             onClick={() => onMethodSelect(method.id)}
             className={`relative flex items-center justify-center gap-2 p-3 border-2 rounded-lg text-center transition-all duration-200 w-36 ${
-              selectedMethod === method.id
+              activeFrameworkMethod === method.id
                 ? "border-cerulean-blue-500 bg-cerulean-blue-50"
                 : "border-gray-300 hover:border-cerulean-blue-300 hover:bg-gray-50"
             }`}
           >
             <img src={method.icon} alt={method.title} className="w-6 h-6" />
             <h3
               className={`text-base font-medium ${
-                selectedMethod === method.id ? "text-cerulean-blue-600" : "text-gray-700"
+                activeFrameworkMethod === method.id ? "text-cerulean-blue-600" : "text-gray-700"
               }`}
             >
               {method.title}
@@ -109,51 +124,34 @@ export default function VerificationMethodSelector({
       </div>
 
       {/* Framework Build-Info Toggle */}
-      {isFrameworkMethod && (
+      {(isFrameworkMethod || isBuildInfoMode) && (
         <div className="mt-4 mb-4 flex items-center gap-2">
           <span className="text-sm text-gray-700">Show Commands</span>
           <label className="relative inline-flex items-center">
             <input
               type="checkbox"
-              checked={false}
+              checked={isBuildInfoMode}
               onChange={(e) => {
                 if (e.target.checked) {
                   onMethodSelect("build-info");
+                } else {
+                  onMethodSelect(lastFrameworkMethod);
                 }
               }}
               className="sr-only"
             />
-            <div className="w-11 h-6 rounded-full relative transition-colors bg-gray-200">
-              <div className="absolute top-[2px] left-[2px] bg-white border border-gray-300 rounded-full h-5 w-5 transition-transform"></div>
+            <div className={`w-11 h-6 rounded-full relative transition-colors ${
+              isBuildInfoMode ? "bg-cerulean-blue-600" : "bg-gray-200"
+            }`}>
+              <div className={`absolute top-[2px] left-[2px] bg-white border border-gray-300 rounded-full h-5 w-5 transition-transform ${
+                isBuildInfoMode ? "translate-x-full" : ""
+              }`}></div>
             </div>
           </label>
           <span className="text-sm text-gray-700">Upload build-info file</span>
         </div>
       )}
 
-      {/* Build-info back to framework toggle */}
-      {isBuildInfoMode && (
-        <div className="mt-4 mb-4 flex items-center gap-2">
-          <span className="text-sm text-gray-700">Show Commands</span>
-          <label className="relative inline-flex items-center">
-            <input
-              type="checkbox"
-              checked={true}
-              onChange={(e) => {
-                if (!e.target.checked) {
-                  // Go back to hardhat as default - we could make this smarter by remembering the previous framework
-                  onMethodSelect("hardhat");
-                }
-              }}
-              className="sr-only"
-            />
-            <div className="w-11 h-6 rounded-full relative transition-colors bg-cerulean-blue-600">
-              <div className="absolute top-[2px] left-[2px] bg-white border border-gray-300 rounded-full h-5 w-5 transition-transform translate-x-full"></div>
-            </div>
-          </label>
-          <span className="text-sm text-gray-700">Upload build-info file</span>
-        </div>
-      )}
 
       {/* Verification Warnings */}
       {selectedMethodWarning && (