From e9c1db0be21ebf41bd897aa221f0cf71f84b68f9 Mon Sep 17 00:00:00 2001 From: ulieth Date: Thu, 14 May 2026 10:05:33 +0300 Subject: [PATCH 1/3] add vault interface setup guide --- operator/manage-vault/overview.mdx | 2 + operator/manage-vault/vault-interface.mdx | 122 ++++++++++++++++++++++ sidebarsOperator.ts | 1 + 3 files changed, 125 insertions(+) create mode 100644 operator/manage-vault/vault-interface.mdx diff --git a/operator/manage-vault/overview.mdx b/operator/manage-vault/overview.mdx index acb6fd09..68e17cb5 100644 --- a/operator/manage-vault/overview.mdx +++ b/operator/manage-vault/overview.mdx @@ -11,4 +11,6 @@ If your Vault has multiple fee shareholders, the [fee claiming](./fee-claiming) You can also distribute [extra token rewards](./add-extra-rewards) (SWISE, osETH, SSV, Obol, WETH, USDC, LYX) to your stakers beyond standard staking yield — either periodically over a defined time window, as a one-time allocation, or via a custom IPFS-based distribution. Extra rewards are reflected in both the Vault APY and user reward statistics (Ethereum only). +If you want stakers to interact with your Vault through your own branded site instead of the StakeWise App, the [Vault Interface](./vault-interface) is an open-source Next.js template you can scaffold with a single command, customize, and deploy to Vercel. + If you operate a Meta Vault, the [`process-meta-vaults`](/operator/meta-vault/operate-meta-vault#3-run-process-meta-vaults) command triggers transactions to update states, process deposits into sub-vaults, and handle exits. diff --git a/operator/manage-vault/vault-interface.mdx b/operator/manage-vault/vault-interface.mdx new file mode 100644 index 00000000..ff16b8fe --- /dev/null +++ b/operator/manage-vault/vault-interface.mdx @@ -0,0 +1,122 @@ +--- +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, burn, boost, and unboost1. 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. + +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 `.env` 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 — a good reference for what a customized deployment looks like. +::: + +## Requirements + +- [Node.js ↗](https://nodejs.org/en/download) `24.12.0` or higher (see `.nvmrc`). +- [pnpm ↗](https://pnpm.io/installation) — run `corepack enable && corepack prepare pnpm@latest --activate`2. +- Git — recommended (the CLI initializes a fresh repository). + +## Setup + + + + +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). +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. + + + + +1. Clone [`stakewise/vault-interface`](https://github.com/stakewise/vault-interface). +2. Create a `.env` 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. + + + + +## Configuration reference + +Each row maps a CLI prompt to its `.env` variable. The CLI writes these for you; for manual setup, set them in `.env` yourself. The canonical list lives in [`.env.example` ↗](https://github.com/stakewise/vault-interface/blob/main/.env.example). + +| CLI prompt | `.env` variable | Description | +| --- | --- | --- | +| Project name | — (CLI only) | Defaults to `vault-interface`. | +| Site title | `NEXT_PUBLIC_TITLE` | 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 variables below | Multi-select: Mainnet / Gnosis / Hoodi. | +| Vault 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 URL | `NEXT_PUBLIC_MAINNET_NETWORK_URL`, `NEXT_PUBLIC_GNOSIS_NETWORK_URL`, `NEXT_PUBLIC_HOODI_NETWORK_URL` | Required for each selected network. Hoodi testnet only appears when `VERCEL_ENV` is not set to `production`; in production, users can switch to the testnet only through their wallet interface. | +| Fallback RPC | `NEXT_PUBLIC_MAINNET_FALLBACK_URL`, `NEXT_PUBLIC_GNOSIS_FALLBACK_URL`, `NEXT_PUBLIC_HOODI_FALLBACK_URL` | Optional backup RPC for each selected network. | +| Site domain | `NEXT_PUBLIC_OWNER_DOMAIN` | Required. Used in site metadata, e.g. `app.example.io`. | +| X 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[Hiding specific actions] +If your Vault doesn't support some actions (e.g. no osToken minting), you can hide their tabs from the UI by setting the matching `NEXT_PUBLIC_DISABLE_*` variable to any truthy value. See [`.env.example` ↗](https://github.com/stakewise/vault-interface/blob/main/.env.example) for the full list. +::: + +## 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` + +The favicon is a 16x16 image in the `public/` folder. By default, the osETH logo is used — replace the file to use your own. + +:::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). +::: + +
+ 1. Mint and Burn are available only if your Vault has osToken enabled. Boost and Unboost also require Ethereum Vault version 2+. + ↩ +
+ +
+ 2. The `pnpm install` command (alias: `pnpm i`) is used to install all dependencies for a Node.js project listed in the `package.json` file, generating a `pnpm-lock.yaml` file to ensure consistent installations. It is faster and more disk-space efficient than `npm install` because it uses a centralized content-addressable store to create hard links for packages. For more details, see pnpm.io/motivation ↗. + ↩ +
diff --git a/sidebarsOperator.ts b/sidebarsOperator.ts index 656fab69..083a93b0 100644 --- a/sidebarsOperator.ts +++ b/sidebarsOperator.ts @@ -60,6 +60,7 @@ const sidebars: SidebarsConfig = { 'manage-vault/vault-administration', 'manage-vault/fee-claiming', 'manage-vault/add-extra-rewards', + 'manage-vault/vault-interface', ], }, { From 7993f289c29c5c2ef234e21b1e173ca2cf0b0ace Mon Sep 17 00:00:00 2001 From: ulieth Date: Wed, 20 May 2026 17:55:54 +0300 Subject: [PATCH 2/3] move vault interface to operator intro --- operator/introduction.mdx | 2 +- operator/manage-vault/overview.mdx | 3 --- operator/manage-vault/vault-interface.mdx | 2 +- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/operator/introduction.mdx b/operator/introduction.mdx index 4c221f3b..ae4d461c 100644 --- a/operator/introduction.mdx +++ b/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](./manage-vault/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 Meta Vaults** — Delegate deposits across multiple sub-vaults without running validators yourself, unlocking modular staking strategies. diff --git a/operator/manage-vault/overview.mdx b/operator/manage-vault/overview.mdx index 68e17cb5..61bdcbec 100644 --- a/operator/manage-vault/overview.mdx +++ b/operator/manage-vault/overview.mdx @@ -11,6 +11,3 @@ If your Vault has multiple fee shareholders, the [fee claiming](./fee-claiming) You can also distribute [extra token rewards](./add-extra-rewards) (SWISE, osETH, SSV, Obol, WETH, USDC, LYX) to your stakers beyond standard staking yield — either periodically over a defined time window, as a one-time allocation, or via a custom IPFS-based distribution. Extra rewards are reflected in both the Vault APY and user reward statistics (Ethereum only). -If you want stakers to interact with your Vault through your own branded site instead of the StakeWise App, the [Vault Interface](./vault-interface) is an open-source Next.js template you can scaffold with a single command, customize, and deploy to Vercel. - -If you operate a Meta Vault, the [`process-meta-vaults`](/operator/meta-vault/operate-meta-vault#3-run-process-meta-vaults) command triggers transactions to update states, process deposits into sub-vaults, and handle exits. diff --git a/operator/manage-vault/vault-interface.mdx b/operator/manage-vault/vault-interface.mdx index ff16b8fe..39779b2c 100644 --- a/operator/manage-vault/vault-interface.mdx +++ b/operator/manage-vault/vault-interface.mdx @@ -20,7 +20,7 @@ There are two ways to set it up: - **Manual setup** — clone the repository, update the `.env` 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 — a good reference for what a customized deployment looks like. +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 From b933a5be3347c6ea080e1546bf52ce08040f931d Mon Sep 17 00:00:00 2001 From: ulieth Date: Wed, 20 May 2026 20:21:12 +0300 Subject: [PATCH 3/3] move vault interface to top-level sidebar --- operator/introduction.mdx | 2 +- operator/{manage-vault => }/vault-interface.mdx | 0 sidebarsOperator.ts | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename operator/{manage-vault => }/vault-interface.mdx (100%) diff --git a/operator/introduction.mdx b/operator/introduction.mdx index ae4d461c..fc32873e 100644 --- a/operator/introduction.mdx +++ b/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. Launch a full white-label staking product powered by StakeWise smart contracts, or use the open-source [Vault Interface](./manage-vault/vault-interface) template — a ready-made staking website. +- **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 Meta Vaults** — Delegate deposits across multiple sub-vaults without running validators yourself, unlocking modular staking strategies. diff --git a/operator/manage-vault/vault-interface.mdx b/operator/vault-interface.mdx similarity index 100% rename from operator/manage-vault/vault-interface.mdx rename to operator/vault-interface.mdx diff --git a/sidebarsOperator.ts b/sidebarsOperator.ts index 083a93b0..945a1025 100644 --- a/sidebarsOperator.ts +++ b/sidebarsOperator.ts @@ -11,6 +11,7 @@ const sidebars: SidebarsConfig = { 'start-operator', 'operator-monitoring', 'smoothing-pool-relays', + 'vault-interface', { type: 'category', label: 'Meta Vault', @@ -60,7 +61,6 @@ const sidebars: SidebarsConfig = { 'manage-vault/vault-administration', 'manage-vault/fee-claiming', 'manage-vault/add-extra-rewards', - 'manage-vault/vault-interface', ], }, {