Vault Interface
If you want stakers to deposit through your own site instead of app.stakewise.io, you can use the open-source 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: 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, which walks you through configuration and generates a ready-to-run project. - Manual setup — clone the repository, update the
.envfile with your configuration, install dependencies, and deploy.
Live demo
Try the live demo at vault-interface-lemon.vercel.app ↗ before deploying your own. For a real-world example, Serenita ↗ runs this template in production — a good reference for what a customized deployment looks like.
Requirements
- Node.js ↗
24.12.0or higher (see.nvmrc). - pnpm ↗ — run
corepack enable && corepack prepare pnpm@latest --activate2. - Git — recommended (the CLI initializes a fresh repository).
Setup
- CLI (recommended)
- Manual setup
Run the CLI to scaffold a configured project in a few minutes:
npx @stakewise/create-vault-interface
The CLI will:
- Ask for the values listed in the configuration reference.
- Clone
stakewise/vault-interfaceinto your chosen folder (without git history). - Apply the brand color you chose (or change it later — see Theming).
- Generate a populated
.envfile. - Initialize a fresh git repository with an initial commit.
- Optionally run
pnpm install, thennpx vercelto deploy.
- Clone
stakewise/vault-interface. - Create a
.envfile in the project root and copy in the contents of.env.example↗. - Replace each value with your configuration from the configuration reference.
- Install dependencies:
pnpm install. - Start the dev server with
pnpm devand open http://localhost:5005 to preview. - Deploy to production:
- Using Vercel — follow Vercel instructions ↗ to connect your repository to Vercel and automatically build and serve the app.
- Self-hosting — run
pnpm buildto 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 ↗.
| 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. |
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 ↗ 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:
pnpm colors
This script generates RGB versions from your hex codes and updates:
src/styles/tailwind/layers/base.csssrc/styles/tailwind/theme.csssrc/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.
Still have questions?
If you need any help with the template, reach out to the StakeWise team via info@stakewise.io, Telegram ↗, or Discord ↗.
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 ↗.
↩