fix: landing page user test fixes (#162)

- Add VueQueryPlugin to landing main.ts (wagmi/vue requires it)
- Add Vite proxy for /api/graphql → ponder:42069/graphql
- Replace axios with native fetch in WalletCard.vue
- Add navigateTo() for CTA buttons (uses VITE_APP_URL env)
- Load contract addresses from bootstrap in landing entrypoint
- Add via_ir to foundry.toml (OptimizerV3Push3 stack-too-deep)
- Add VITE_APP_URL env to docker-compose landing service

Fixes: blank landing pages, broken LiveStats, missing CTA links,
missing contract addresses in footer

landing/package.json

@@ -17,12 +17,13 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "sass": "^1.83.4",
-    "vue": "^3.5.13",
-    "vue-router": "^4.5.0",
     "@harb/web3": "*",
+    "@tanstack/vue-query": "^5.92.9",
     "@wagmi/vue": "^0.2.8",
-    "viem": "^2.22.13"
+    "sass": "^1.83.4",
+    "viem": "^2.22.13",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",

landing/src/components/WalletCard.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue';
 import { useAccount } from '@harb/web3';
-import axios from 'axios';
 
 const { address, isConnected } = useAccount();
 
@@ -18,20 +17,25 @@ const endpoint = `${window.location.origin}/api/graphql`;
 async function fetchWalletData(addr: string) {
   loading.value = true;
   try {
-    const res = await axios.post(endpoint, {
-      query: `{
-        holders(address: "${addr.toLowerCase()}") {
-          balance
-          totalEthSpent
-          totalTokensAcquired
-        }
-        protocolStatss(where: { id: "0x01" }) {
-          items { currentPriceWei }
-        }
-      }`,
+    const res = await fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        query: `{
+          holders(address: "${addr.toLowerCase()}") {
+            balance
+            totalEthSpent
+            totalTokensAcquired
+          }
+          protocolStatss(where: { id: "0x01" }) {
+            items { currentPriceWei }
+          }
+        }`,
+      }),
     });
-    holder.value = res.data?.data?.holders ?? null;
-    stats.value = res.data?.data?.protocolStatss?.items?.[0] ?? null;
+    const json = await res.json();
+    holder.value = json?.data?.holders ?? null;
+    stats.value = json?.data?.protocolStatss?.items?.[0] ?? null;
   } catch {
     holder.value = null;
   } finally {

landing/src/main.ts

@@ -1,6 +1,7 @@
 import './assets/styles/main.sass';
 import { createApp } from 'vue';
 import { WagmiPlugin } from '@wagmi/vue';
+import { VueQueryPlugin } from '@tanstack/vue-query';
 import { createHarbConfig } from '@harb/web3';
 import App from './App.vue';
 import router from './router';
@@ -9,6 +10,7 @@ const rpcUrl = import.meta.env.VITE_LOCAL_RPC_URL ?? '/api/rpc';
 const config = createHarbConfig({ rpcUrl });
 
 const app = createApp(App);
+app.use(VueQueryPlugin);
 app.use(WagmiPlugin, { config });
 app.use(router);
 app.mount('#app');

landing/src/views/HomeView.vue

@@ -10,7 +10,7 @@
       $KRK has a price floor backed by real ETH. The protocol adapts automatically. You just hold.
     </div>
     <div class="header-cta">
-      <KButton @click="router.push('/app/get-krk')">Get $KRK</KButton>
+      <KButton @click="navigateTo('/get-krk')">Get $KRK</KButton>
     </div>
     <div class="blur-effect"></div>
   </div>
@@ -37,7 +37,7 @@
         </div>
       </div>
       <div class="centered-cta">
-        <KButton @click="router.push('/app/get-krk')">Get $KRK</KButton>
+        <KButton @click="navigateTo('/get-krk')">Get $KRK</KButton>
       </div>
     </section>
     <section class="protocol-health-section">
@@ -50,7 +50,7 @@
           <p>
             Watch the protocol in real time. Supply dynamics, ETH reserves, position history — all live, no wallet needed.
           </p>
-          <KButton @click="router.push('/app')">View Protocol</KButton>
+          <KButton @click="navigateTo('')">View Protocol</KButton>
         </template>
       </LeftRightComponent>
     </section>
@@ -67,8 +67,13 @@
             <li>Hold. The protocol does the rest.</li>
           </ol>
           <div class="button-group">
+<<<<<<< HEAD
             <KButton @click="router.push('/app/get-krk')">Get $KRK</KButton>
             <KButton @click="router.push('/docs/how-it-works')">How It Works →</KButton>
+=======
+            <KButton @click="navigateTo('/get-krk')">Get $KRK</KButton>
+            <KButton outlined @click="router.push('/docs')">Read the Docs</KButton>
+>>>>>>> 88126c0 (fix: landing page user test fixes (#162))
           </div>
         </template>
       </LeftRightComponent>

landing/src/views/HomeViewMixed.vue

@@ -10,7 +10,7 @@
       Self-adjusting liquidity with an ETH-backed floor. Real upside, protected downside.
     </div>
     <div class="header-cta">
-      <KButton @click="router.push('/app/get-krk')">Buy $KRK</KButton>
+      <KButton @click="navigateTo('/get-krk')">Buy $KRK</KButton>
     </div>
     <div class="blur-effect"></div>
   </div>
@@ -37,7 +37,7 @@
         </div>
       </div>
       <div class="centered-cta">
-        <KButton @click="router.push('/app/get-krk')">Buy $KRK</KButton>
+        <KButton @click="navigateTo('/get-krk')">Buy $KRK</KButton>
       </div>
     </section>
     <section class="protocol-health-section">
@@ -50,7 +50,7 @@
           <p>
             Track supply dynamics, ETH reserves, and position history in real-time. See exactly how the protocol manages your position — no wallet required.
           </p>
-          <KButton @click="router.push('/app')">View Dashboard</KButton>
+          <KButton @click="navigateTo('')">View Dashboard</KButton>
         </template>
       </LeftRightComponent>
     </section>
@@ -67,8 +67,13 @@
             <li>Hold. The protocol handles the rest.</li>
           </ol>
           <div class="button-group">
+<<<<<<< HEAD
             <KButton @click="router.push('/app/get-krk')">Buy $KRK</KButton>
             <KButton @click="router.push('/docs/how-it-works')">How It Works →</KButton>
+=======
+            <KButton @click="navigateTo('/get-krk')">Buy $KRK</KButton>
+            <KButton outlined @click="router.push('/docs')">See How It Works</KButton>
+>>>>>>> 88126c0 (fix: landing page user test fixes (#162))
           </div>
         </template>
       </LeftRightComponent>

landing/src/views/HomeViewOffensive.vue

@@ -10,7 +10,7 @@
       An autonomous protocol managing $KRK liquidity 24/7. Making moves. Growing reserves. You just hold.
     </div>
     <div class="header-cta">
-      <KButton @click="router.push('/app/get-krk')">Get Your Edge</KButton>
+      <KButton @click="navigateTo('/get-krk')">Get Your Edge</KButton>
     </div>
     <div class="blur-effect"></div>
   </div>
@@ -51,7 +51,7 @@
           <p>
             Track every adjustment, every fee capture, every position shift. Live metrics, growing reserves, expanding trading vault — all visible on-chain.
           </p>
-          <KButton @click="router.push('/app')">See Live Metrics</KButton>
+          <KButton @click="navigateTo('')">See Live Metrics</KButton>
         </template>
       </LeftRightComponent>
     </section>

landing/vite.config.ts

@@ -19,5 +19,12 @@ export default defineConfig({
   server: {
     // Allow health checks from CI containers and proxy
     allowedHosts: ['landing', 'caddy', 'localhost', '127.0.0.1'],
+    proxy: {
+      '/api/graphql': {
+        target: process.env.VITE_PONDER_URL || 'http://ponder:42069',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api\/graphql/, '/graphql'),
+      },
+    },
   },
 })