Fix centrel input errors

CONTRIBUTING.md

@@ -0,0 +1,53 @@
+# Contributing Guide
+
+## Table of Contents
+- Getting Started
+- Branching and Commits
+- Coding Standards
+- UI/UX Conventions
+- Pull Request Checklist
+- Issue Reporting
+
+## Getting Started
+- Fork the repository and create a feature branch from `main`.
+- Install dependencies and set up environment variables:
+  - Copy `.env.example` to `.env`
+  - Set `NEXT_PUBLIC_PROJECT_ID` from Reown Cloud (used in `utils/config.ts:16`)
+- Run the app locally:
+  - `npm run dev`
+
+## Branching and Commits
+- Use descriptive branch names, e.g., `feat/explorer-pagination`, `fix/vault-sync-error`.
+- Prefer Conventional Commits:
+  - `feat:` for new features
+  - `fix:` for bug fixes
+  - `docs:` for documentation changes
+  - `refactor:` for code refactors
+  - `chore:` for maintenance tasks
+
+## Coding Standards
+- TypeScript strict mode is enabled (`tsconfig.json:11`); keep types explicit.
+- Use path alias `@/*` for imports (`tsconfig.json:25`).
+- Run `npm run lint` and fix issues before committing.
+- Follow Prettier formatting (`.prettierrc`).
+- Keep functions small and reusable; prefer composable components under `components/`.
+
+## UI/UX Conventions
+- Use shadcn/ui components from `components/ui/` for consistency.
+- Tailwind for styling; avoid inline styles unless necessary.
+- Keep interactive features client-side (`'use client'`) when needed.
+- Keep animations lightweight (Lottie assets under `public/animations/`).
+
+## Pull Request Checklist
+- Clear PR title and summary of changes.
+- Reference related issues.
+- Include code references when relevant:
+  - Env usage: `utils/config.ts:16`
+  - Static export: `next.config.mjs:4`, `next.config.mjs:8`
+  - Vault sync: `app/[vaultId]/InteractionClient.tsx:311`
+- Ensure `npm run lint` passes.
+- Verify local build if applicable: `npm run build`.
+
+## Issue Reporting
+- Provide steps to reproduce, expected vs actual behavior, and environment details.
+- Attach console errors or network logs when relevant.

README.md

@@ -1,49 +1,190 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# hodlCoin Staking Platform (Web UI)
 
-## Getting Started
+Self-stabilizing staking vaults where the price is mathematically proven to always increase. Unstaking fees reward vault creators and long-term stakers.
 
-First, run the development server:
+## Table of Contents
+- Overview
+- Features
+- Tech Stack
+- Architecture
+- File Structure
+- Setup
+- Environment Variables
+- Development
+- Debugging
+- Deployment
+- Contributing
+- License for Assets
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+## Features
+- Create new staking vaults for ERC‑20 tokens (`/createVault`)
+- Explore all vaults across supported chains (`/explorer`)
+- Track your created vaults (`/myVaults`)
+- Save and revisit favorite vaults (`/favorites`)
+- Detailed vault view: balances, fees, price, and manual sync (`/v/[vaultId]`)
+- Wallet connection via RainbowKit/Wagmi with multi-chain support
+- Fast UI built with Tailwind and shadcn/ui components
+- Local caching using IndexedDB for snappy UX
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Tech Stack
+- Next.js 14 (App Router) + TypeScript
+- Tailwind CSS + shadcn/ui (Radix primitives)
+- Wagmi + RainbowKit + Reown AppKit
+- Ethers v5 and Viem utilities
+- TanStack Query
+- Lottie animations
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## Architecture
+- Wallet and chain:
+  - Wagmi/RainbowKit configuration reads `NEXT_PUBLIC_PROJECT_ID` in `utils/config.ts:16`.
+  - Custom chain definitions under `components/CitreaTestnet.tsx` and `components/EthereumClassic.tsx`.
+- Data access:
+  - Vault discovery via on-chain factories (`utils/addresses.ts`, ABIs under `utils/contracts/`).
+  - Cached lists and details stored in IndexedDB (`utils/indexedDB.ts`).
+- UI pages:
+  - App Router under `app/` with route segments for explorer, favorites, my vaults, vault detail.
+  - Vault detail client handles sync, fees, balances (`app/[vaultId]/InteractionClient.tsx:76`, `app/[vaultId]/InteractionClient.tsx:311`).
+- Styling and components:
+  - Tailwind and shadcn/ui components in `components/ui/`.
+  - Reusable feature modules in `components/Vault/`, `components/Explorer/`, etc.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+## File Structure
+```
+app/
+  [vaultId]/           # Vault detail route
+    InteractionClient.tsx
+    page.tsx
+  createVault/         # Create vault flow
+  explorer/            # Explore vaults
+  favorites/           # Favorite vaults
+  myVaults/            # User-created vaults
+  layout.tsx           # Root layout and providers
+  page.tsx             # Home page
+components/
+  Home/                # Hero + About sections
+  Explorer/            # Explorer cards and lists
+  FavoriteVaults/      # Favorites listing
+  FindVault/           # Vault search dialog
+  Vault/               # Vault UI: actions, hero, info
+  hooks/               # UI hooks (matrix effect, token list)
+  ui/                  # shadcn/ui primitives
+  ChainDropdown.tsx    # Chain selector
+  Header.tsx, Footer.tsx, NavBar.tsx, etc.
+contexts/
+  EthersContext.tsx    # Metamask context values
+providers/
+  WalletProvider.tsx   # Wagmi/RainbowKit provider
+  theme-provider.tsx   # Theme support
+utils/
+  contracts/           # ABIs for HodlCoin, ERC20, Factory
+  addresses.ts         # Chain factory addresses
+  chains.ts            # Chain name helpers
+  config.ts            # Wagmi/RainbowKit config
+  favorites.ts         # Favorite handling
+  indexedDB.ts         # Caching layer
+  props.ts             # Shared types
+lib/
+  utils.ts             # Utility functions
+public/
+  animations/          # Lottie JSON
+  images/              # Avatars and brand assets
+  hodlcoin*.svg/png    # Logos and license
+next.config.mjs        # Static export + basePath for GH Pages
+tailwind.config.ts     # Tailwind config
+tsconfig.json          # TS strict mode + path aliases
+.eslintrc.json         # ESLint config
+.prettierrc            # Prettier config
+.env.example           # Required env vars
+```
 
-## Local Setup with Project ID
+## Requirements
+- Node.js 18+
+- npm, pnpm, or yarn
+- A Web3 wallet (e.g., MetaMask) or WalletConnect-compatible wallet
 
-Before running the project locally, you need to set up an environment variable with your Project ID. Follow these steps:
+## Quick Start
+1. Clone the repository and install dependencies:
+   ```bash
+   npm install
+   # or: yarn, pnpm
+   ```
+2. Configure environment variables:
+   - Copy `.env.example` to `.env`
+   - Set `NEXT_PUBLIC_PROJECT_ID` with your Reown Cloud project ID
+   - Optionally set `NEXT_PUBLIC_API_URL` if an API is used
 
-1. **Create a `.env` File**  
-   In the root directory of the project, create a file named `.env` and add the following line:
-   ```env
-   NEXT_PUBLIC_PROJECT_ID=your-project-id
+3. Run the dev server:
+   ```bash
+   npm run dev
    ```
+   Visit `http://localhost:3000`
+
+## Environment Variables
+- `NEXT_PUBLIC_PROJECT_ID`: Required for WalletConnect/Reown integration  
+  Used in `utils/config.ts:16`.
+- `NEXT_PUBLIC_API_URL`: Optional backend/API base URL (if applicable)
 
-2. **Obtain Your Project ID**  
-   To get your `your-project-id` value:
-   - Visit [Reown Cloud](https://cloud.reown.com/sign-in).
-   - Create an account or log in if you already have one.
-   - Create a new project within the dashboard.
-   - Once the project is created, locate your project key (this may be labeled as "Project ID" or "API Key").
-   - Copy the key and paste it into your `.env` file in place of `your-project-id`.
+## Scripts
+- `npm run dev`: Start development server
+- `npm run build`: Build for production (static export to `out`)
+- `npm run start`: Start production server
+- `npm run lint`: Run Next.js ESLint checks
 
-After setting up the environment variable, you can run the development server as described above.
+## Development
+- TypeScript
+  - Strict mode enabled in `tsconfig.json:11`
+  - Path alias `@/*` to project root in `tsconfig.json:25`
+- Linting and formatting
+  - ESLint: `next/core-web-vitals` (`.eslintrc.json:2`)
+  - Prettier config in `.prettierrc`
+- UI conventions
+  - shadcn/ui primitives in `components/ui/`
+  - Tailwind utility-first CSS in `app/globals.css` and components
+- Data and caching
+  - IndexedDB manager in `utils/indexedDB.ts` for vault lists/details caching
+
+## Debugging
+- Wallet/project ID issues
+  - Ensure `NEXT_PUBLIC_PROJECT_ID` is set in `.env` and not empty
+  - Configuration reads this in `utils/config.ts:16`
+- Chain/client errors
+  - If `getPublicClient` returns null, verify supported chains and wallet network
+  - Check `components/ChainDropdown.tsx` and `utils/addresses.ts` for chain mapping
+- Stale cache
+  - Use manual sync in vault detail (`app/[vaultId]/InteractionClient.tsx:311`)
+  - Or clear site data via DevTools: Application → Storage → Clear Site Data
+- Static export routing
+  - `next.config.mjs:8` uses `basePath: '/hodlCoin-Solidity-WebUI'`. Ensure your GitHub Pages repo name matches
+  - When serving under a subpath, all links and asset paths include the base path automatically
+- Common local fixes
+  - Delete `.next/` and `out/`, reinstall dependencies, and retry build/run
+  - Confirm Node 18+ and a working `npm`/`yarn`/`pnpm` installation
+
+## Deployment
+This project is configured for static export:
+- `next.config.mjs:4` sets `output: 'export'` and `distDir: 'out'`
+- `next.config.mjs:8` sets `basePath: '/hodlCoin-Solidity-WebUI'` for GitHub Pages
+
+Build and publish:
+```bash
+npm run build
+npx gh-pages -d out
+```
+You can deploy `out/` to any static host (GitHub Pages, Vercel static, Netlify, etc.).
 
-## Learn More
+## Project Structure
+- `app/`: Routes and pages (App Router)
+- `components/`: UI and feature components (e.g., Vault, Explorer, Home)
+- `providers/`: Wagmi/RainbowKit and theme providers
+- `utils/`: Chains, addresses, ABIs, config, favorites, caching
+- `public/`: Static assets and animations
 
-To learn more about Next.js, take a look at the following resources:
+## Contributing
+- Open an issue with a clear description and steps to reproduce
+- Make focused PRs with clear titles and descriptions
+- Run `npm run lint` and ensure builds pass before submitting
+- See `CONTRIBUTING.md` for detailed guidelines
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## Assets License
+Logo and brand assets are licensed separately. See `public/hodlcoin-logo-license.md`.
 

SECURITY_TEST_REPORT.md

@@ -0,0 +1,44 @@
+# Security Test Report (Burp Suite)
+
+## Scope
+- App: hodlCoin-Solidity-WebUI
+- Pages: Home, Create Vault, Explorer, Favorites, My Vaults, Vault Detail
+- Assets: Static export
+
+## Environment
+- Local dev server: `npm run dev`
+- Browser proxied through Burp Suite
+- Wallet: MetaMask (test accounts)
+
+## Methodology
+- Passive scan while navigating all pages
+- Active scan on form inputs and query params
+- Manual checks:
+  - Input validation for vault address and chain ID
+  - Navigation links and route handling
+  - IndexedDB caching operations
+  - External links and target attributes
+
+## Findings
+- Cross-Site Scripting (XSS): No injection vectors observed; no `dangerouslySetInnerHTML` usage.
+- Open Redirect: Navigation uses internal router; no user-controlled redirect targets.
+- Input Validation:
+  - Address and chain ID validation added via `utils/validation.ts`.
+  - Invalid values prevented from routing or contract reads.
+- CSP/Headers: Static export limits header enforcement; recommend hosting-level CSP.
+- External Links: Transaction explorer links use `target="_blank"`. Recommend `rel="noreferrer"`.
+
+## Recommendations
+- Enforce CSP at hosting (script-src 'self', object-src 'none').
+- Add `rel="noreferrer"` to external links.
+- Monitor dependency updates for security patches.
+
+## Test Results
+- Create Vault: Validations block invalid inputs and negative fees.
+- Explorer Card: Enter Vault guarded by address and chain ID checks.
+- Find Vault: Validations and error messages for incorrect inputs.
+- Vault Detail: Path and query parsing validated; manual sync safe.
+
+## Conclusion
+- Current UI resistant to basic client-side attack vectors.
+- Hosting CSP and external link rel attributes recommended.