Make ragequit more visible

- Single collapsible section instead of nested disclosures
- Clearer "Rage Quit" label visible in the panel
- Simplified to one confirmation step
- Normal-sized text and buttons

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: nerderlyne

src/components/dao/RageQuit.tsx

@@ -26,7 +26,7 @@ export const RageQuit = () => {
   const [amount, setAmount] = useState("");
   const [zammReceived, setZammReceived] = useState<bigint | null>(null);
   const [isExpanded, setIsExpanded] = useState(false);
-  const [confirmStep, setConfirmStep] = useState(0);
+  const [showConfirm, setShowConfirm] = useState(false);
 
   const { data: zorgSharesBalance, isLoading: isBalanceLoading, refetch: refetchBalance } = useReadContract({
     address: ZORG_SHARES,
@@ -86,7 +86,7 @@ export const RageQuit = () => {
       }
 
       setAmount("");
-      setConfirmStep(0);
+      setShowConfirm(false);
       refetchBalance();
     }
   }, [isSuccess, receipt, owner, refetchBalance]);
@@ -116,7 +116,7 @@ export const RageQuit = () => {
 
   const handleReset = () => {
     setZammReceived(null);
-    setConfirmStep(0);
+    setShowConfirm(false);
     reset();
   };
 
@@ -137,144 +137,119 @@ export const RageQuit = () => {
   return (
     <ConnectButton.Custom>
       {({ openConnectModal }) => (
-        <div className="border-t border-border/40 pt-4 mt-4">
+        <div className="border-t border-border/50 pt-4 mt-4">
           <button
             onClick={() => setIsExpanded(!isExpanded)}
-            className="flex items-center gap-1.5 text-xs text-muted-foreground/60 hover:text-muted-foreground transition-colors w-full"
+            className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors w-full"
           >
             <ChevronDown
-              className={`h-3 w-3 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}`}
+              className={`h-4 w-4 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}`}
             />
-            <span>Other options</span>
+            <span>Rage Quit</span>
           </button>
 
           {isExpanded && (
-            <div className="mt-4 pt-4 border-t border-dashed border-border/30">
-              <details className="group">
-                <summary className="cursor-pointer text-xs text-muted-foreground/50 hover:text-muted-foreground/70 list-none flex items-center gap-1">
-                  <ChevronDown className="h-3 w-3 transition-transform group-open:rotate-180" />
-                  Exit DAO membership
-                </summary>
+            <div className="mt-4 p-4 rounded-lg border border-border/50 bg-muted/10">
+              <p className="text-xs text-muted-foreground mb-4">
+                Burn your ZORG shares to reclaim your proportional ZAMM from the treasury.
+              </p>
 
-                <div className="mt-4 p-3 rounded border border-border/30 bg-muted/20">
-                  <p className="text-[11px] text-muted-foreground/70 mb-3">
-                    Burn ZORG shares to reclaim proportional ZAMM. This action is irreversible.
-                  </p>
+              {owner && hasBalance && (
+                <div className="mb-3 text-xs text-muted-foreground">
+                  Available: <span className="font-mono text-foreground">{formatEther(balance)} ZORG</span>
+                </div>
+              )}
 
-                  {owner && hasBalance && (
-                    <div className="mb-2 text-[11px] text-muted-foreground/60">
-                      Balance: <span className="font-mono">{formatEther(balance)} ZORG</span>
-                    </div>
-                  )}
+              <div className="flex gap-2 mb-4">
+                <input
+                  type="text"
+                  inputMode="decimal"
+                  placeholder="Amount to burn"
+                  value={amount}
+                  onChange={(e) => {
+                    const val = e.target.value;
+                    if (/^[0-9]*\.?[0-9]*$/.test(val)) {
+                      setAmount(val);
+                      setShowConfirm(false);
+                    }
+                  }}
+                  className="flex-1 px-3 py-2 rounded-lg border bg-background text-sm font-mono focus:outline-none focus:ring-1 focus:ring-border"
+                  disabled={!owner || isLoading}
+                />
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    setAmount(formatEther(balance));
+                    setShowConfirm(false);
+                  }}
+                  disabled={!owner || !hasBalance || isLoading}
+                  className="text-xs"
+                >
+                  MAX
+                </Button>
+              </div>
 
-                  <div className="flex gap-2 mb-3">
-                    <input
-                      type="text"
-                      inputMode="decimal"
-                      placeholder="Amount"
-                      value={amount}
-                      onChange={(e) => {
-                        const val = e.target.value;
-                        if (/^[0-9]*\.?[0-9]*$/.test(val)) {
-                          setAmount(val);
-                          setConfirmStep(0);
-                        }
-                      }}
-                      className="flex-1 px-2 py-1.5 rounded border border-border/50 bg-background text-xs font-mono focus:outline-none focus:border-border"
-                      disabled={!owner || isLoading}
-                    />
+              {!showConfirm ? (
+                <Button
+                  onClick={!owner ? openConnectModal : () => setShowConfirm(true)}
+                  disabled={owner && !isValidAmount}
+                  variant="outline"
+                  className="w-full"
+                >
+                  {!owner ? "Connect Wallet" : "Continue"}
+                </Button>
+              ) : (
+                <div className="space-y-3">
+                  <p className="text-xs text-amber-600 dark:text-amber-500">
+                    Are you sure? This will permanently burn your ZORG shares.
+                  </p>
+                  <div className="flex gap-2">
                     <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => {
-                        setAmount(formatEther(balance));
-                        setConfirmStep(0);
-                      }}
-                      disabled={!owner || !hasBalance || isLoading}
-                      className="text-[10px] h-7 px-2 text-muted-foreground/60"
+                      onClick={() => setShowConfirm(false)}
+                      variant="outline"
+                      className="flex-1"
                     >
-                      MAX
+                      Cancel
                     </Button>
-                  </div>
-
-                  {confirmStep === 0 && (
-                    <Button
-                      onClick={!owner ? openConnectModal : () => setConfirmStep(1)}
-                      disabled={owner && !isValidAmount}
-                      variant="ghost"
-                      size="sm"
-                      className="w-full text-xs h-8 text-muted-foreground/70 hover:text-muted-foreground"
-                    >
-                      {!owner ? "Connect Wallet" : "Continue"}
-                    </Button>
-                  )}
-
-                  {confirmStep === 1 && (
-                    <div className="space-y-2">
-                      <p className="text-[10px] text-amber-600/80 dark:text-amber-500/80">
-                        Are you sure? You will permanently lose your ZORG shares and DAO voting power.
-                      </p>
-                      <div className="flex gap-2">
-                        <Button
-                          onClick={() => setConfirmStep(0)}
-                          variant="ghost"
-                          size="sm"
-                          className="flex-1 text-xs h-8"
-                        >
-                          Cancel
-                        </Button>
-                        <Button
-                          onClick={() => setConfirmStep(2)}
-                          variant="ghost"
-                          size="sm"
-                          className="flex-1 text-xs h-8 text-amber-600/80 hover:text-amber-600"
-                        >
-                          I understand
-                        </Button>
-                      </div>
-                    </div>
-                  )}
-
-                  {confirmStep === 2 && (
                     <Button
                       onClick={handleRageQuit}
                       disabled={isLoading}
-                      variant="ghost"
-                      size="sm"
-                      className="w-full text-xs h-8 text-red-500/70 hover:text-red-500 hover:bg-red-500/10"
+                      variant="destructive"
+                      className="flex-1"
                     >
                       {isLoading ? (
                         <>
-                          <Loader2 className="h-3 w-3 animate-spin mr-1.5" />
+                          <Loader2 className="h-4 w-4 animate-spin mr-2" />
                           Processing...
                         </>
                       ) : (
-                        "Confirm Ragequit"
+                        "Confirm"
                       )}
                     </Button>
-                  )}
+                  </div>
+                </div>
+              )}
 
-                  {isSuccess && txHash && (
-                    <div className="mt-3 p-2 rounded bg-green-500/10 border border-green-500/20">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <span className="text-[10px] text-green-600/80 dark:text-green-400/80 block">
-                            Complete
-                          </span>
-                          {zammReceived !== null && (
-                            <span className="text-xs font-mono text-green-600 dark:text-green-400">
-                              +{formatEther(zammReceived)} ZAMM
-                            </span>
-                          )}
-                        </div>
-                        <Button variant="ghost" size="sm" onClick={handleReset} className="text-[10px] h-6 px-2">
-                          OK
-                        </Button>
-                      </div>
+              {isSuccess && txHash && (
+                <div className="mt-4 p-3 rounded-lg bg-green-500/10 border border-green-500/30">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <span className="text-xs text-green-600 dark:text-green-400 block">
+                        Ragequit successful!
+                      </span>
+                      {zammReceived !== null && (
+                        <span className="text-sm font-mono font-semibold text-green-600 dark:text-green-400">
+                          +{formatEther(zammReceived)} ZAMM
+                        </span>
+                      )}
                     </div>
-                  )}
+                    <Button variant="ghost" size="sm" onClick={handleReset} className="text-xs">
+                      Done
+                    </Button>
+                  </div>
                 </div>
-              </details>
+              )}
             </div>
           )}
         </div>