Add guide for setting up Vault interface

operator/introduction.mdx

@@ -15,7 +15,7 @@ Anyone — from solo stakers to professional node operators and institutions man
 Vaults support a wide range of staking use cases. A few common examples:
 
 - **Stake for yourself** — Run your own validators, keep 100% of rewards, and stay liquid by minting [osETH](/docs/ostoken/intro) — an overcollateralized liquid staking token you can [use across DeFi ↗](https://app.stakewise.io/ecosystem) to earn additional rewards.
-- **Offer staking to others** — Accept deposits and earn fees, or launch a white-label staking product powered by StakeWise smart contracts.
+- **Offer staking to others** — Accept deposits and earn fees. Launch a full white-label staking product powered by StakeWise smart contracts, or use the open-source [Vault Interface](./vault-interface) template — a ready-made staking website.
 - **Institutional or DAO treasury staking** — Configure compliance controls, gate access with a Private or Block list, and optionally issue an ERC-20 Vault token.
 - **Scale with MetaVaults** — Delegate deposits across multiple sub-vaults without running validators yourself, unlocking [modular staking strategies](/docs/vaults/meta-vaults#use-cases).
 

operator/vault-interface.mdx

@@ -0,0 +1,126 @@
+---
+title: Vault Interface
+description: Scaffold and deploy your own branded staking frontend for your StakeWise Vault using the open-source vault-interface template and CLI.
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Vault Interface
+
+If you want stakers to deposit through your own site instead of [app.stakewise.io ↗](https://app.stakewise.io/), you can use the open-source [`stakewise/vault-interface` ↗](https://github.com/stakewise/vault-interface) — a Next.js frontend you connect to your Vault and deploy in a few minutes under your own domain.
+
+The UI supports Ethereum, Gnosis Chain, and Hoodi Testnet, and offers the same style and set of actions stakers can take on [app.stakewise.io ↗](https://app.stakewise.io/): deposit, withdraw, mint and burn [osToken](/docs/ostoken/intro), and [boost and unboost](/docs/vaults/boost)<sup><a href="#user-content-fn-1" id="user-content-fnref-1">1</a></sup>. They can also see stats, unstake/unboost progress, and claim assets.
+
+Building a staking interface from scratch takes time and engineering resources. The template gives you a production-ready UI. StakeWise keeps the template in sync with the latest released features and constantly improves it. If you need something the template doesn't cover, you can build a fully custom frontend on top of the [StakeWise SDK →](/sdk).
+
+There are two ways to set it up:
+
+- **CLI (recommended)** — run [`npx @stakewise/create-vault-interface` ↗](https://www.npmjs.com/package/@stakewise/create-vault-interface), which walks you through configuration and generates a ready-to-run project.
+- **Manual setup** — clone the repository, update the environment file with your configuration, install dependencies, and deploy.
+
+:::custom-info[Live demo]
+Try the live demo at [vault-interface-lemon.vercel.app ↗](https://vault-interface-lemon.vercel.app/) before deploying your own. For a real-world example, [Serenita ↗](https://app.serenita.io/) runs this template in production against their [Vault ↗](https://app.stakewise.io/vault/mainnet/0xb36fc5e542cb4fc562a624912f55da2758998113) — a good reference for what a customized deployment looks like.
+:::
+
+## Requirements
+
+- [Node.js ↗](https://nodejs.org/en/download) `24.12.0` — the version pinned in `.nvmrc` and in the project's `engines` field.
+- [pnpm ↗](https://pnpm.io/installation) — run `corepack enable && corepack prepare pnpm@latest --activate`<sup><a href="#user-content-fn-2" id="user-content-fnref-2">2</a></sup>.
+- Git — recommended (the CLI initializes a fresh repository).
+
+## Setup
+
+<Tabs groupId="vault-interface-setup">
+  <TabItem value="cli" label="CLI (recommended)" default>
+
+Run the CLI to scaffold a configured project in a few minutes:
+
+```bash
+npx @stakewise/create-vault-interface
+```
+
+**The CLI will**:
+
+1. Ask for the values listed in the [configuration reference](#configuration-reference).
+2. Clone `stakewise/vault-interface` into your chosen folder (without git history) and remove the bundled `cli/` folder.
+3. Apply the brand color you chose (or change it later — see [Theming](#theming)).
+4. Generate a populated `.env` file.
+5. Initialize a fresh git repository with an initial commit.
+6. Optionally run `pnpm install`, then `npx vercel` to deploy.
+
+  </TabItem>
+  <TabItem value="manual" label="Manual setup">
+
+1. Clone [`stakewise/vault-interface` ↗](https://github.com/stakewise/vault-interface).
+2. Create a `.env.local` file in the project root and copy in the contents of [`.env.example` ↗](https://github.com/stakewise/vault-interface/blob/main/.env.example).
+3. Replace each value with your configuration from the [configuration reference](#configuration-reference).
+4. Install dependencies: `pnpm install`.
+5. Start the dev server with `pnpm dev` and open [http://localhost:5005 ↗](http://localhost:5005) to preview.
+6. Deploy to production:
+   - **Using Vercel** — follow [Vercel instructions ↗](https://vercel.com/docs) to connect your repository to Vercel and automatically build and serve the app.
+   - **Self-hosting** — run `pnpm build` to prepare the app, then deploy the build output to your hosting service.
+
+  </TabItem>
+</Tabs>
+
+:::custom-warning[Use `.env.local` for the dev server]
+`pnpm dev` runs an environment check that looks for `.env.local` specifically and aborts with `Create ".env.local" file` when it is missing — even if a valid `.env` is present. The CLI writes `.env`, so run `cp .env .env.local` inside the generated project before starting the dev server. `pnpm build` reads either file, and both are gitignored.
+:::
+
+## Configuration reference
+
+Each row maps a CLI prompt to its environment variable. The CLI writes these for you; for manual setup, set them in `.env.local` yourself. [`.env.example` ↗](https://github.com/stakewise/vault-interface/blob/main/.env.example) lists the variables the app reads.
+
+| CLI prompt | Environment variable | Description |
+| --- | --- | --- |
+| Project&nbsp;name | — (CLI only) | Defaults to `vault-interface`. |
+| Site&nbsp;title | `NEXT_PUBLIC_TITLE` | Required. Used in site metadata. |
+| Theme | — (CLI only) | Optional. If enabled, prompts for `#rrggbb` values for the light and dark themes. |
+| Networks | Set by the per-network Vault addresses below | Multi-select: Mainnet / Gnosis / Hoodi. A network appears in the UI only if its `*_VAULT_ADDRESS` is set. Hoodi Testnet is hidden when `VERCEL_ENV` is set to `production`; in production, users can switch to the testnet only through their wallet interface. |
+| Vault&nbsp;address | `NEXT_PUBLIC_MAINNET_VAULT_ADDRESS`, `NEXT_PUBLIC_GNOSIS_VAULT_ADDRESS`, `NEXT_PUBLIC_HOODI_VAULT_ADDRESS` | Required for each selected network. Validated as `0x` followed by 40 hex characters. |
+| RPC&nbsp;URL | `NEXT_PUBLIC_MAINNET_NETWORK_URL` | Required for Ethereum Mainnet. The CLI also asks for Gnosis and Hoodi and writes `NEXT_PUBLIC_GNOSIS_NETWORK_URL` / `NEXT_PUBLIC_HOODI_NETWORK_URL`, but the app currently reaches those two networks through built-in public RPCs and ignores both values. |
+| Fallback&nbsp;RPC | `NEXT_PUBLIC_MAINNET_FALLBACK_URL` | Optional backup RPC for Ethereum Mainnet. The CLI also writes `NEXT_PUBLIC_GNOSIS_FALLBACK_URL` / `NEXT_PUBLIC_HOODI_FALLBACK_URL`; neither is read by the app. |
+| Site&nbsp;domain | `NEXT_PUBLIC_OWNER_DOMAIN` | Required. Used in site metadata, e.g. `app.example.io`. |
+| X&nbsp;account | `NEXT_PUBLIC_OWNER_X_ACCOUNT` | Optional. Handle for site metadata. |
+| Wallet | `NEXT_PUBLIC_WALLET_CONNECT_ID` | Optional. WalletConnect Project ID. |
+| Referrer | `NEXT_PUBLIC_REFERRER` | Optional. Validated as `0x` address. |
+| Languages | `NEXT_PUBLIC_LOCALES` | Defaults to `en, ru, fr, es, pt, de, zh`. Restrict with a comma-separated list, e.g. `NEXT_PUBLIC_LOCALES=en, zh`. |
+| Currencies | `NEXT_PUBLIC_CURRENCIES` | Defaults to `usd, eur, gbp, cny, jpy, krw, aud`. Restrict with a comma-separated list. |
+| Security | `NEXT_PUBLIC_CONTENT_SECURITY_POLICY` | Optional. Content-Security-Policy. Whitespace-separated origins allowed to embed the site in a frame, e.g. `https://app.safe.global https://*.blockscout.com`. |
+
+:::custom-info[Disabling specific actions]
+Setting a `NEXT_PUBLIC_DISABLE_*` variable to any non-empty value disables that action's submit button — the tab itself stays visible. See [`.env.example` ↗](https://github.com/stakewise/vault-interface/blob/main/.env.example) for the full list. Tabs themselves are shown or hidden automatically based on your Vault, so there is no need to disable actions your Vault doesn't support.
+:::
+
+## Theming
+
+The UI ships with light and dark themes. The initial theme matches the user's system preference and can be changed from the settings menu.
+
+Brand colors live in `src/styles/settings.scss`. After editing them, run:
+
+```bash
+pnpm colors
+```
+
+This script generates RGB versions from your hex codes and updates:
+
+- `src/styles/tailwind/layers/base.css`
+- `src/styles/tailwind/theme.css`
+- `src/styles/variables.scss`
+
+Tab and app icons live in the `public/` folder and are declared in `src/app/layout.tsx`: `logo512.png` (icon), `logo192.png` (shortcut icon), and `logo180.png` (Apple touch icon). They ship with the osETH logo — replace them to use your own. `public/favicon.ico` is referenced only by `manifest.json`.
+
+:::custom-info[Still have questions?]
+If you need any help with the template, reach out to the StakeWise team via [info@stakewise.io](mailto:info@stakewise.io), [Telegram ↗](https://t.me/stakewise_io), or [Discord ↗](https://discord.com/invite/2BSdr2g).
+:::
+
+<div id="user-content-fn-1" style={{fontSize: '0.85em', color: 'var(--ifm-color-content-secondary)', marginTop: '2rem', listStyle: 'none', fontFamily: 'Fragment Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace'}}>
+  <span>1.</span> Mint and Burn are available only if your Vault has osToken enabled. Boost and Unboost also require Ethereum Vault version 2+.
+  <a href="#user-content-fnref-1" style={{color: 'var(--ifm-color-content-secondary)', textDecoration: 'none'}}>↩</a>
+</div>
+
+<div id="user-content-fn-2" style={{fontSize: '0.85em', color: 'var(--ifm-color-content-secondary)', marginTop: '2rem', listStyle: 'none', fontFamily: 'Fragment Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace'}}>
+  <span>2.</span> [Corepack ↗](https://nodejs.org/api/corepack.html) ships with Node.js and manages package-manager versions for you; the command above downloads pnpm and puts it on your `PATH`. The project requires pnpm `10.25.0` or newer. pnpm is faster and more disk-space efficient than `npm install` because it links packages from a single content-addressable store instead of copying them into every project — for more details, see [pnpm.io/motivation ↗](https://pnpm.io/motivation).
+  <a href="#user-content-fnref-2" style={{color: 'var(--ifm-color-content-secondary)', textDecoration: 'none'}}>↩</a>
+</div>

sidebarsOperator.ts

@@ -11,6 +11,7 @@ const sidebars: SidebarsConfig = {
     'start-operator',
     'operator-monitoring',
     'smoothing-pool-relays',
+    'vault-interface',
     {
       type: 'category',
       label: 'MetaVault',