johba/harb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
harb/landing/AGENTS.md
johba b276392e7a chore: gardener housekeeping 2026-03-23 
- Update all AGENTS.md watermarks to HEAD (224edcc)
- onchain/AGENTS.md: document VWAPTracker _hasRecenterTick guard (#609),
  overflow guard for slots 0-7 (#997), Floor Ratchet defeated (#1067),
  fee-income delta_bps audit trail (#1084)
- landing/AGENTS.md: document SecurityInfo.vue component (#147)

Issues actioned via API:
- Unblocked #1099, #1100, #1101 (all prereqs 1031/997/1067/1054 closed)
- Created #1134 bundled backlog: onchain source quality cleanup (4 dust items)
- Closed dust #601, #627, #739, #741 → bundled into #1134
2026-03-23 07:04:19 +00:00

2.3 KiB
Raw Blame History

Landing Interface - Agent Guide

Vue 3 + Vite application that delivers the public marketing site and forthcoming staking UI.

Technology Snapshot

  • Vue 3 (Composition API) with TypeScript and Vite toolchain
  • Vue Router for multi-view navigation
  • Sass-based design system with custom typography
  • @wagmi/vue for wallet connection (injected, WalletConnect, Coinbase Wallet)
  • @tanstack/vue-query — required peer dependency of @wagmi/vue; must be registered via VueQueryPlugin in main.ts
  • @harb/web3 shared composables for wagmi config and wallet hooks

Key Views & Components

  • HomeView.vue - Launch countdown, feature overview, and staking CTA
  • DocsView.vue - Documentation portal with responsive navigation and generated table of contents
  • SecurityInfo.vue - Displays unaudited badge (planned Q3 2026), KRAIKEN Token and Stake contract addresses with copy-to-clipboard, BaseScan and source links (#147)
  • Layout components (KNavbar.vue, KFooter.vue, LeftRightComponent.vue) manage shared chrome
  • UI components (KButton.vue, Countdown.vue, SocialButton.vue, icon set) supply reusable primitives

Design Notes

  • Dark theme palette: primary #07111B, accent #9667BE
  • Mobile-first breakpoints at 768px drive layout shifts and slide-out navigation
  • Motion relies on CSS transitions to keep runtime costs low

Development Workflow

  • Boot the full stack with nohup ./scripts/dev.sh start &; the script handles landing dev server wiring.
  • Use local package scripts for targeted tasks:
    • npm install
    • npm run build
    • npm run preview
    • npm run type-check
  • Deployments assume hash-based routing and the Vite base setting configured for static hosting.

Upcoming Integrations

  • Wallet connection with Base network switching
  • Staking dashboard that reuses shared helpers from kraiken-lib
  • Data visualisations sourced from the Ponder GraphQL API

Quality Guidelines

  • Favour Composition API and strongly typed props/emit definitions
  • Keep components focused; push shared logic into composables when possible
  • Use Sass variables and mixins from the design system for consistent styling

Performance Tips

  • Lazy load route components
  • Optimise imagery (WebP) and leverage Vite asset handling
  • Prefer CSS animations to JavaScript when animating UI elements