# Front End

## Overall

### Intro <a href="#intro" id="intro"></a>

The Front End will facilitate the use of facilities created by the smart contract. Participants can fully configure their on-chain settings from this user-friendly interface and perform fund-related operations.There are multiple sections with specific actions that are displayed to users based on their status on the stacking pool.​

### Status type <a href="#status-type" id="status-type"></a>

* Viewer - the user is not logged in.
* NormalUser - the user is logged in, but did not asked to join the stacking pool.
* Stacker - the user has stacked his STX through the smart contract and will has the information correlated to his actions on-chain.&#x20;
* Liquidity Provider - it is the deployer of the smart contract, but it can be changed to anyone. He provides liquidity in the smart contract that is afterwards unlocked by the Stackers. The Stackers gets their rewards from the STX locked by the liquidity provider, on the current exchange rate BTC <-> STX and the liquidity provider receives the BTC to his specified address.

​

### Dashboard pages <a href="#dashboard-pages" id="dashboard-pages"></a>

* Home
* Dashboard - everyone
* Profile - only stackers and liquidity provider

  * delegate amount function
  * revoke delegated function
  * disallow contract caller
  * extend delegate function
  * claim rewards for specified block height function
  * leave pool

  \+ Liquidity provider only

  * deposit funds to be locked
  * lock funds
  * unlock extra locked STX
  * set a new liquidity provider
  * set BTC address for getting rewards

## Profile UI based on the user’s status

### Viewer

<figure><img src="/files/xYSIeiWPzNJ6qsmN1Vkg" alt=""><figcaption></figcaption></figure>

### Stacker

#### Stacker before allowing Stacking Pool in PoX contract and joining pool

![](/files/aEywReGqW6JmXwVtfbiS)

### Stacker after allowing Stacking Pool in PoX contract and joining pool

#### Profile section shows up in the Navigation Menu

![](/files/FhktXnO9H0iaJIl0xmNg)

#### Stacker Profile

<figure><img src="/files/oLVfozksy8ssZ0yl0t4f" alt=""><figcaption></figcaption></figure>

#### Liquidity Provider

<figure><img src="/files/mfwLpOZnFjwYxZ1xoRZs" alt=""><figcaption></figcaption></figure>

## How to link it to the sc

​All the contracts are linked in the `contract.ts` \[src\consts\contract.ts]​. All the data-related functions are converted from Clarity values to typescript values in their defined functions in the `src\consts\readOnly.ts` file. ​All the smart contract calls are built-in `src\consts\smartContractFunctions.ts` where the arguments are converted from typescript values to Clarity values.​

​​


---

# 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://docs.degenlab.io/decentralized-stacking-pool/front-end.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.