fix: Get KRK local swap, WalletCard on all variants (#146, #150) (#165)

landing/src/views/HomeViewMixed.vue

@@ -14,6 +14,7 @@
     </div>
     <div class="blur-effect"></div>
   </div>
+  <WalletCard />
   <LiveStats />
   <div class="k-container">
     <section class="how-it-works-section">
@@ -88,6 +89,7 @@
 import KButton from '@/components/KButton.vue';
 import LeftRightComponent from '@/components/LeftRightComponent.vue';
 import LiveStats from '@/components/LiveStats.vue';
+import WalletCard from '@/components/WalletCard.vue';
 import { useMobile } from '@/composables/useMobile';
 import { useRouter } from 'vue-router';
 

landing/src/views/HomeViewOffensive.vue

@@ -14,6 +14,7 @@
     </div>
     <div class="blur-effect"></div>
   </div>
+  <WalletCard />
   <LiveStats />
   <div class="k-container">
     <section class="how-it-works-section">
@@ -88,6 +89,7 @@
 import KButton from '@/components/KButton.vue';
 import LeftRightComponent from '@/components/LeftRightComponent.vue';
 import LiveStats from '@/components/LiveStats.vue';
+import WalletCard from '@/components/WalletCard.vue';
 import { useMobile } from '@/composables/useMobile';
 import { useRouter } from 'vue-router';
 

web-app/src/views/GetKrkView.vue

@@ -2,7 +2,7 @@
   <div class="get-krk-view">
     <div class="get-krk-container">
       <h1 class="get-krk-title">Get $KRK Tokens</h1>
-      
+
       <div class="balance-card">
         <div class="balance-label">Your KRK Balance</div>
         <div class="balance-amount">{{ formattedBalance }} $KRK</div>
@@ -12,13 +12,8 @@
         <div class="swap-explanation">
           <p>Swap ETH for $KRK on Uniswap, then stake your position to earn rewards.</p>
         </div>
-        
+
-        <a 
+        <a :href="uniswapUrl" target="_blank" rel="noopener noreferrer" class="swap-button">
-          :href="uniswapUrl" 
-          target="_blank" 
-          rel="noopener noreferrer" 
-          class="swap-button"
-        >
           <span class="swap-button-icon">🔄</span>
           <span>Swap on Uniswap</span>
           <span class="swap-button-arrow">→</span>
@@ -36,10 +31,21 @@
         </div>
       </div>
 
+      <!-- Local/testnet: link to cheats page for swapping -->
+      <div v-if="isLocalChain" class="local-swap-card">
+        <h3>🔧 Local Development</h3>
+        <p>You're on a local chain. Use the Cheat Console to swap ETH for KRK directly.</p>
+        <router-link to="/cheats" class="swap-button local">
+          <span>Open Cheat Console</span>
+          <span class="swap-button-arrow">→</span>
+        </router-link>
+      </div>
+
       <div class="next-steps">
         <h3>Next Steps</h3>
         <ol>
-          <li>Click the button above to open Uniswap</li>
+          <li v-if="isLocalChain">Use the Cheat Console to swap ETH for $KRK</li>
+          <li v-else>Click the button above to open Uniswap</li>
           <li>Swap ETH for $KRK tokens</li>
           <li>Return here and navigate to the Stake page</li>
           <li>Stake your $KRK to start earning</li>
@@ -84,11 +90,13 @@ const networkName = computed(() => {
   }
 });
 
+const isLocalChain = computed(() => currentChainId.value === 31337);
+
 // Build Uniswap URL with proper chain and token
 const uniswapUrl = computed(() => {
   const chainId = currentChainId.value;
   const tokenAddress = chainData.value?.harb || '0xff196f1e3a895404d073b8611252cf97388773a7';
-  
+
   // Map chainId to Uniswap chain identifier
   let chainName = 'base_sepolia';
   if (chainId === 8453) {
@@ -96,7 +104,7 @@ const uniswapUrl = computed(() => {
   } else if (chainId === 84532) {
     chainName = 'base_sepolia';
   }
-  
+
   return `https://app.uniswap.org/swap?chain=${chainName}&outputCurrency=${tokenAddress}`;
 });
 </script>
@@ -108,7 +116,7 @@ const uniswapUrl = computed(() => {
   display: flex
   justify-content: center
   align-items: center
-  
+
   @media (min-width: 768px)
     padding: 48px
 
@@ -125,7 +133,7 @@ const uniswapUrl = computed(() => {
   text-align: center
   margin: 0
   color: #ffffff
-  
+
   @media (min-width: 768px)
     font-size: 40px
 
@@ -147,7 +155,7 @@ const uniswapUrl = computed(() => {
   font-size: 36px
   font-weight: 700
   color: #60a5fa
-  
+
   @media (min-width: 768px)
     font-size: 48px
 
@@ -162,7 +170,7 @@ const uniswapUrl = computed(() => {
 
 .swap-explanation
   text-align: center
-  
+
   p
     margin: 0
     font-size: 16px
@@ -183,7 +191,7 @@ const uniswapUrl = computed(() => {
   text-decoration: none
   transition: all 0.3s ease
   box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3)
-  
+
   &:hover
     transform: translateY(-2px)
     box-shadow: 0 6px 16px rgba(96, 165, 250, 0.4)
@@ -216,24 +224,49 @@ const uniswapUrl = computed(() => {
   color: #ffffff
   font-weight: 500
 
+.local-swap-card
+  background: linear-gradient(135deg, rgba(117, 80, 174, 0.15) 0%, rgba(117, 80, 174, 0.05) 100%)
+  border: 1px solid rgba(117, 80, 174, 0.3)
+  border-radius: 16px
+  padding: 32px
+  text-align: center
+  display: flex
+  flex-direction: column
+  gap: 16px
+
+  h3
+    margin: 0
+    color: #ffffff
+
+  p
+    margin: 0
+    color: #9A9898
+
+  .swap-button.local
+    background: linear-gradient(135deg, #7550AE 0%, #5a3d8a 100%)
+    box-shadow: 0 4px 12px rgba(117, 80, 174, 0.3)
+
+    &:hover
+      background: linear-gradient(135deg, #5a3d8a 0%, #4a2d7a 100%)
+
 .next-steps
   background: #1a1a1a
   border: 1px solid #3a3a3a
   border-radius: 16px
   padding: 32px
-  
+
   h3
     margin: 0 0 16px 0
     font-size: 20px
     color: #ffffff
-  
+
   ol
     margin: 0
     padding-left: 24px
     display: flex
     flex-direction: column
     gap: 12px
-    
+
     li
       color: #d4d4d4
       line-height: 1.6