From cf4e401d031197ba88f562b8ce18cef80087dffe Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Fri, 27 Feb 2026 10:32:04 +0000
Subject: [PATCH] fix: address review feedback on LocalSwapWidget and
 CheatsView
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- LocalSwapWidget: move useWallet() to top-level <script setup> (was
  incorrectly called inside async buyKrk() event handler)
- LocalSwapWidget + CheatsView: fix misleading toast — all transactions
  are fully confirmed at that point, so say 'Swap complete' not 'Swap
  submitted'
- LocalSwapWidget: add $KRK sigil to warning/hint text for consistency
  with GetKrkView
- LocalSwapWidget: add comment on amountOutMinimum: 0n explaining it is
  intentional for a no-MEV local anvil environment
- CheatsView: apply same useWallet() fix (pre-existing anti-pattern)
- docs/ENVIRONMENT.md: document VITE_ENABLE_LOCAL_SWAP and related
  VITE_ variables in a new webapp env-var table

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/ENVIRONMENT.md                        |  9 +++++++++
 web-app/src/components/LocalSwapWidget.vue | 10 +++++-----
 web-app/src/views/CheatsView.vue           | 10 ++++------
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/docs/ENVIRONMENT.md b/docs/ENVIRONMENT.md
index ab7c9f0..7d70df8 100644
--- a/docs/ENVIRONMENT.md
+++ b/docs/ENVIRONMENT.md
@@ -81,6 +81,15 @@ docker inspect landing --format '{{.NetworkSettings.Networks.harb_harb-network.I
 For testing login: `lobsterDao`, `test123`, `lobster-x010syqe?412!`
 (defined in `web-app/src/views/LoginView.vue`)
 
+## Webapp Environment Variables
+
+| Variable | Default | Set in docker-compose | Purpose |
+|---|---|---|---|
+| `VITE_ENABLE_LOCAL_SWAP` | `false` (unset) | `true` | Show inline ETH→$KRK swap widget on Get KRK page instead of the Uniswap link. Enable for local dev; leave unset for production builds. |
+| `VITE_KRAIKEN_ADDRESS` | from `deployments-local.json` | via `contracts.env` | Override KRK token address. |
+| `VITE_STAKE_ADDRESS` | from `deployments-local.json` | via `contracts.env` | Override Stake contract address. |
+| `VITE_DEFAULT_CHAIN_ID` | auto-detected (31337 on localhost) | — | Force the default chain. |
+
 ## Contract Addresses
 
 After bootstrap, addresses are in `/home/debian/harb/tmp/containers/contracts.env`.
diff --git a/web-app/src/components/LocalSwapWidget.vue b/web-app/src/components/LocalSwapWidget.vue
index 716ec4d..b26cb5d 100644
--- a/web-app/src/components/LocalSwapWidget.vue
+++ b/web-app/src/components/LocalSwapWidget.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="local-swap-widget">
     <template v-if="!canSwap">
-      <p class="swap-warning">Connect your wallet to swap ETH for KRK on the local Uniswap pool.</p>
+      <p class="swap-warning">Connect your wallet to swap ETH for $KRK on the local Uniswap pool.</p>
     </template>
     <template v-else>
       <div class="swap-field">
@@ -11,7 +11,7 @@
       <button class="swap-button" :disabled="swapping" @click="buyKrk">
         {{ swapping ? 'Submitting…' : 'Buy KRK' }}
       </button>
-      <p class="swap-hint">Wraps ETH → WETH, approves the swap router, then trades into KRK.</p>
+      <p class="swap-hint">Wraps ETH → WETH, approves the swap router, then trades into $KRK.</p>
     </template>
   </div>
 </template>
@@ -28,6 +28,7 @@ import { useWallet } from '@/composables/useWallet';
 
 const toast = useToast();
 const { address, chainId } = useAccount();
+const { loadBalance } = useWallet();
 
 const swapAmount = ref('0.1');
 const swapping = ref(false);
@@ -240,17 +241,16 @@ async function buyKrk() {
           fee: 10_000,
           recipient: caller,
           amountIn: amount,
-          amountOutMinimum: 0n,
+          amountOutMinimum: 0n, // no slippage protection — acceptable on no-MEV local anvil
           sqrtPriceLimitX96: 0n,
         },
       ],
       chainId: currentChainId,
     });
 
-    const { loadBalance } = useWallet();
     await loadBalance();
 
-    toast.success('Swap submitted. Watch your wallet for KRK.');
+    toast.success('Swap complete. $KRK has been added to your wallet.');
   } catch (error: unknown) {
     toast.error(getErrorMessage(error, 'Swap failed'));
   } finally {
diff --git a/web-app/src/views/CheatsView.vue b/web-app/src/views/CheatsView.vue
index c7a8a62..66f772c 100644
--- a/web-app/src/views/CheatsView.vue
+++ b/web-app/src/views/CheatsView.vue
@@ -172,6 +172,7 @@ import {
 const toast = useToast();
 const statCollection = useStatCollection();
 const { address, chainId } = useAccount();
+const { loadBalance } = useWallet();
 const wagmiConfig: WagmiConfig = config;
 
 const rpcUrl = ref('');
@@ -1056,13 +1057,10 @@ async function buyKrk() {
       ],
       chainId,
     });
-    
-    // FIX: Refresh KRK balance immediately after swap completes
-    // This ensures the balance is up-to-date when navigating to the stake page
-    const { loadBalance } = useWallet();
+
     await loadBalance();
-    
-    toast.success('Swap submitted. Watch your wallet for KRK.');
+
+    toast.success('Swap complete. $KRK has been added to your wallet.');
   } catch (error: unknown) {
     toast.error(getErrorMessage(error, 'Swap failed'));
   } finally {