# Substrate Staking portal

### Introduction <a href="#introduction" id="introduction"></a>

Existing staking mechanism via <https://polkadot.js.org/apps/> has developer-centric UX and is very complicated for ordinary users. To simplify UX we want to build Staking portal for AkropolisOSChain users.

### Github repo:

{% embed url="<https://github.com/akropolisio/staking-portal>" %}

### Frontend: <a href="#what-is-polkadot-staking-portal" id="what-is-polkadot-staking-portal"></a>

{% embed url="<https://staking-portal.akropolis.io>" %}

### What is Polkadot Staking Portal? <a href="#what-is-polkadot-staking-portal" id="what-is-polkadot-staking-portal"></a>

A simple and intuitive interface and Akropolis browser extension will make the staking process accessible to a wide range of users - you only need an account on Polkadot and Polkadot-js for signing transactions.

What you can do with our staking portal:

* Check your overall balance and amount of all bonded tokens - as well as check each wallet connected
* Check the current validators set, their commission, how much is staked for them, etc. and decide whether you want to nominate for them or not.
* Check and edit stake conditions - add/withdraw funds, edit the list of nominees, stop nominating, redeem funds, etc.

### For frontend (in frontend folder) <a href="#for-frontend-in-frontend-folder" id="for-frontend-in-frontend-folder"></a>

#### Install all dependencies <a href="#install-all-dependencies" id="install-all-dependencies"></a>

* `npm i` install frontend and contracts dependencies

#### To start locally <a href="#to-start-locally" id="to-start-locally"></a>

* `npm run dev` for development environment in watch mode
* `npm run prod` for production environment in watch mode

#### To build locally (see build folder) <a href="#to-build-locally-see-build-folder" id="to-build-locally-see-build-folder"></a>

* `npm run build:dev` for development environment without watch mode
* `npm run build:prod` for production environment without watch mode

#### To start bundle analyzer <a href="#to-start-bundle-analyzer" id="to-start-bundle-analyzer"></a>

* `npm run analyze:dev` for development environment
* `npm run analyze:prod` for production environment

#### To start test <a href="#to-start-test" id="to-start-test"></a>

* `npm test` or `npm t` for start test, before that you need start network (`npm run ganache-cli`)

### We used: <a href="#we-use" id="we-use"></a>

* \[x] polkadot.js/api for interacting with Akropolis Chain
* \[x] Typescript
* \[x] React
* \[x] Redux
* \[x] Redux-saga for side-effects
* \[x] Material-UI


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://akropolis.gitbook.io/akropolis/developer-documentation/open-source-development/substrate-staking-portal.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.