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 and burn osToken, and 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. If you need something the template doesn't cover, you can build a fully custom frontend on top of the StakeWise SDK →.
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 environment file 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 against their Vault ↗ — a good reference for what a customized deployment looks like.
Requirements
- Node.js ↗
24.12.0— the version pinned in.nvmrcand in the project'senginesfield. - 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) and remove the bundledcli/folder. - 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
.env.localfile 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.
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 ↗ lists the variables the app reads.
| CLI prompt | Environment variable | Description |
|---|---|---|
| Project name | — (CLI only) | Defaults to vault-interface. |
| Site 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 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 | 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 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 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. |
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 ↗ 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:
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
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.
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. Corepack ↗ 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 ↗.
↩