From 5cb0c76f409c9c339df6248e97b156b82e3e3712 Mon Sep 17 00:00:00 2001 From: ulieth Date: Thu, 14 May 2026 10:05:33 +0300 Subject: [PATCH 1/4] 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 a047629..84f04ad 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 MetaVault, 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 0000000..ff16b8f --- /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 ea38777..53cb44b 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 114cc034ad8ad5fed6112b5adfcea160bbce5beb Mon Sep 17 00:00:00 2001 From: ulieth Date: Wed, 20 May 2026 17:55:54 +0300 Subject: [PATCH 2/4] move vault interface to operator intro --- operator/introduction.mdx | 2 +- operator/manage-vault/overview.mdx | 2 -- operator/manage-vault/vault-interface.mdx | 2 +- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/operator/introduction.mdx b/operator/introduction.mdx index 7a5df89..599fc73 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 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/manage-vault/overview.mdx b/operator/manage-vault/overview.mdx index 84f04ad..a047629 100644 --- a/operator/manage-vault/overview.mdx +++ b/operator/manage-vault/overview.mdx @@ -11,6 +11,4 @@ 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 MetaVault, 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 ff16b8f..39779b2 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 96678ca3856afce3bb6c78089ba202c29893ecc8 Mon Sep 17 00:00:00 2001 From: ulieth Date: Wed, 20 May 2026 20:21:12 +0300 Subject: [PATCH 3/4] 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 599fc73..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. 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 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/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 53cb44b..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', @@ -60,7 +61,6 @@ const sidebars: SidebarsConfig = { 'manage-vault/vault-administration', 'manage-vault/fee-claiming', 'manage-vault/add-extra-rewards', - 'manage-vault/vault-interface', ], }, { From db714dfe4780105b7aef6f21a0a36d89172febac Mon Sep 17 00:00:00 2001 From: Dmitri Tsumak Date: Wed, 26 Aug 2026 17:07:06 +0300 Subject: [PATCH 4/4] fix vault interface guide inaccuracies --- operator/vault-interface.mdx | 54 +++++++++++++++++++----------------- 1 file changed, 29 insertions(+), 25 deletions(-) diff --git a/operator/vault-interface.mdx b/operator/vault-interface.mdx index 39779b2..8be436d 100644 --- a/operator/vault-interface.mdx +++ b/operator/vault-interface.mdx @@ -8,16 +8,16 @@ 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. +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. +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. +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 `.env` file with your configuration, install dependencies, and deploy. +- **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. @@ -25,8 +25,8 @@ Try the live demo at [vault-interface-lemon.vercel.app ↗](https://vault-interf ## 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. +- [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 @@ -43,7 +43,7 @@ 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). +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. @@ -52,11 +52,11 @@ npx @stakewise/create-vault-interface -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). +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. +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. @@ -64,19 +64,23 @@ npx @stakewise/create-vault-interface +:::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 `.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). +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 | `.env` variable | Description | +| CLI prompt | Environment variable | Description | | --- | --- | --- | | Project name | — (CLI only) | Defaults to `vault-interface`. | -| Site title | `NEXT_PUBLIC_TITLE` | Used in site metadata. | +| 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 variables below | Multi-select: Mainnet / Gnosis / Hoodi. | +| 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`, `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. | +| 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. | @@ -85,8 +89,8 @@ Each row maps a CLI prompt to its `.env` variable. The CLI writes these for you; | 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. +:::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 @@ -105,18 +109,18 @@ This script generates RGB versions from your hex codes and updates: - `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. +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. 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 ↗. - ↩ +
+ 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). + ↩