diff --git a/operator/introduction.mdx b/operator/introduction.mdx index 7a5df89..fc28117 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](./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). diff --git a/operator/vault-interface.mdx b/operator/vault-interface.mdx new file mode 100644 index 0000000..8be436d --- /dev/null +++ b/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)1. 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`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) 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. + + + + +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. + + + + +:::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 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`. | + +:::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). +::: + +
+ 1. Mint and Burn are available only if your Vault has osToken enabled. Boost and Unboost also require Ethereum Vault version 2+. + +
+ +
+ 2. [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). + +
diff --git a/sidebarsOperator.ts b/sidebarsOperator.ts index ea38777..dd61155 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: 'MetaVault',