Knix Web

Static frontend for Knix on Robinhood Chain. Vite, vanilla JS, Three.js (lazy loaded), Reown AppKit for wallets (lazy loaded). No backend, no SSR.

Run

npm install
npm run dev      # http://localhost:5173
npm run build    # outputs dist/
npm run preview  # serve dist/ locally

Node 22 (see engines in package.json).

Pages

Path	Entry	Purpose
/	index.html + src/main.js	Landing, with the live Pool card
/app	app.html + src/app.js	Pool app and module surfaces
/docs	docs.html + src/docs.js	Docs, rendered from the GitBook source in docs/
any other	public/404.html	Not found page (served by Vercel)

Configuration

File	What lives there
src/config/contracts.js	Every contract address. One address book per network. Mainnet is filled.
src/config/network.js	Chain id, RPC and explorer for Robinhood Chain mainnet and testnet.
src/config/wallet.js	WalletConnect (Reown) project id and app metadata.
.env.example	Build time values (VITE_*). Env values win over the files.

All VITE_* values end up in the browser bundle. Only put public values there, never a key.

Contracts

Robinhood Chain mainnet (4663):

Contract	Address
Knix	0x3DD411C10ffa55Bb13B54e289de6aA7e3c3A03a0
KnixLens	0x0E0f6eE839e58462Ece17C06E9A6dA4Bc2aa7eD4
$KNIX token	not deployed; set KNIX_TOKEN_CA in src/config/contracts.js (null shows Coming Soon)

Set KNIX_TOKEN_ADDRESS (or VITE_KNIX_TOKEN_ADDRESS) once the token exists; the CA component then shows the address with copy and an explorer link.

src/lib/knix.js is the contract client. Reads go to the public RPC, writes go through the wallet store, receipts are polled on the public RPC. Calldata is encoded by hand from the selectors listed at the top of the file.

Wallets

src/lib/wallet.js uses Reown AppKit whenever a project id is configured: browser extensions, WalletConnect QR and mobile wallets, with a network switch to Robinhood Chain. AppKit loads on the app page after first paint, and on the landing only when the Pool card nears the viewport.

The Knix project id (ff24e7c4e7d10744e3ccd080e4307cad) is set in src/config/wallet.js, so builds work without extra setup. VITE_WALLETCONNECT_PROJECT_ID overrides it. Without any project id the store falls back to the injected browser wallet (window.ethereum).

In the Reown dashboard, add every domain the site runs on (production domain, *.vercel.app previews if you use them) to the project allowlist. Unlisted domains get a 403 and an empty wallet list.

Deploy on Vercel

1. Import the repository in Vercel. vercel.json sets the framework, npm ci, the build command and dist as output.

2. Environment variables (Production and Preview):

   Name	Value
   VITE_WALLETCONNECT_PROJECT_ID	optional, the Knix id is already in config
   VITE_KNIX_NETWORK	mainnet (default, optional)
   VITE_RPC_URL_MAINNET	optional managed RPC; the public one is rate limited

3. Deploy, then add the production domain to the Reown allowlist.

vercel.json also serves /app without the .html suffix, caches hashed assets for a year, and sends nosniff, Referrer-Policy, X-Frame-Options: DENY and a restrictive Permissions-Policy.

Docs

docs/ is the GitBook source (SUMMARY.md drives the navigation). The same markdown is bundled into /docs at build time with marked, so editing a file in docs/ updates both GitBook and the site.

Brand assets

Source art lives in public/brand, traced from the supplied logo files (mark 99.8% and lockup 98.5% overlap with the originals, so they are pixel faithful at any size).

File	Use
knix-mark.svg, knix-lockup.svg	inlined in the pages, coloured through currentColor
knix-mark-green.svg, knix-mark-dark.svg, knix-lockup-green.svg, knix-lockup-dark.svg	fixed colour copies for partners and listings
knix-mark-green-512.png, knix-mark-white-512.png, knix-lockup-green-1024.png, knix-lockup-white-1024.png	transparent raster exports
apple-touch-icon.png, icon-192.png, icon-512.png	home screen and manifest icons
/favicon.svg, /og-image.jpg	browser tab and social card

Brand colours: deep green #023a21 (token --brand), light green #70f250. The site uses the darker logo option only, since the light green clashed with the red accent. The dark lockup sits on a pearl plate (.brand--plate, token --brand-plate) that matches the Launch app pill, the same dark on light pairing as the client art. Favicon, home screen icons, the 404 mark and the social card follow the same pairing.

Structure

src/
  config/       network.js, contracts.js, wallet.js
  lib/          wallet (AppKit or injected), appkit, knix (contract client), rpc, motion, address
  components/   pool, contract-address, nav
  three/        liquid hero, section views, CTA silk
  styles/       base, pool, modules, landing, app

Motion respects prefers-reduced-motion. Ambient loops pause off screen; WebGL stops rendering when not visible.