harb/web-app/README.md

# harb staking

This template should help get you started developing with Vue 3 in Vite.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).

## Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.

## Customize configuration

See [Vite Configuration Reference](https://vite.dev/config/).

## Project Setup

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Type-Check, Compile and Minify for Production

```sh
npm run build
```

## Testing

### Test Helpers

The application exposes test helpers on `window.__testHelpers` in development mode to facilitate E2E testing.

#### Available Helpers

##### `fillStakeForm(params)`

Programmatically fills the staking form without requiring fragile UI selectors.

**Parameters:**
- `amount` (number): Amount of KRK tokens to stake (must be >= minimum stake)
- `taxRate` (number): Tax rate percentage (must be between 0 and 100)

**Example:**
```typescript
// In Playwright test
await page.evaluate(async () => {
  await window.__testHelpers.fillStakeForm({
    amount: 100,
    taxRate: 5.0,
  });
});

// Then click the stake button
const stakeButton = page.getByRole('button', { name: /Stake|Snatch and Stake/i });
await stakeButton.click();
```

**Validation:**
- Throws if amount is below minimum stake
- Throws if amount exceeds wallet balance
- Throws if tax rate is outside valid range (0-100)

**TypeScript Support:**
Type declarations are available in `env.d.ts`:
```typescript
interface Window {
  __testHelpers?: {
    fillStakeForm: (params: { amount: number; taxRate: number }) => Promise<void>;
  };
}
```

**Security:**
Test helpers are only available when `import.meta.env.DEV === true` and are automatically stripped from production builds.

### E2E Tests

See `INTEGRATION_TEST_STATUS.md` in the repository root for complete testing documentation.