# Create A Front End

If you would like to use a pre-built front end, we've built an open source React UI that you can clone and deploy.

{% embed url="<https://github.com/mdcryptonfts/farm-partner-ui>" %}

If you prefer to build your own front end instead, this page will explain everything you need to know about which contract tables and actions you'll need access to, in order to show users the proper info.

For partners - user facing actions on the `tf.waxdao` contract are covered on the [Staking Page](https://waxdao.gitbook.io/waxdao/products/token-farms/staking). Creator facing actions for your partner contract are covered in the [README file of the partner contract](https://github.com/mdcryptonfts/farm-partner-contract?tab=readme-ov-file#token-farm-partner-contract).

### Displaying Claimable Balances

In order to show what a users claimable balances are in a current farm, there is no need for you to do any math on your front end. We've created a `readonly` action on the `tf.waxdao` contract, which returns a vector of claimable assets to you in the form of `extended_asset`

The action is `showreward`, and takes in the following data.

| Param      | Type | Description                                 |
| ---------- | ---- | ------------------------------------------- |
| user       | name | The WAX address of the user to get data for |
| farm\_name | name | The name of the farm to show rewards from   |

An example of fetching this data is shown below.

```javascript
const { ContractKit } = require("@wharfkit/contract")
const { APIClient } = require("@wharfkit/antelope")

const contractKit = new ContractKit({
  client: new APIClient({ url: "https://api.waxdaobp.io" })
});

const USER = "someuser"
const FARM_NAME = "somefarm"
let claimable_balances = []

const showRewards = async () => {

    try { 

      const contract = await contractKit.load("tf.waxdao")

      const result = await contract.readonly('showreward', {
            user: USER,
            farm_name: FARM_NAME
      })                          

      claimable_balances = result
       
    } catch (e) {
        console.log(`error in showreward action: ${e}`);
    }
};

showRewards();
```

### Showing Which Farms A User Is Staking In

The best way to do this is by using the `/staked-only` endpoint in our [API Documentation](/waxdao/products/token-farms/developers/api-documentation.md#staked-only). If you prefer to query directly from the chain, you can query the `stakers` table.

The `stakers` table on the `tf.waxdao` contract is scoped by user. If you want to display which farms that user is staked in, all you need to do is call `get_table_rows` and set `user.value` as the scope. This will return you a list of all farms that they are staked in.

Keep in mind that this will only show staking details, and farm data will need to be fetched separately. This is why using our API is recommended instead.

### Showing Which Farms Were Created By A User

We recommend using our custom API for this, by calling the `/get-farms` endpoint. If you want to query directly from the chain, you can query the `farms` table.&#x20;

The `farms` table on the `tf.waxdao` contract has a secondary index by `creator`. An example using a custom React hook is shown below.

```javascript
export const useGetFarmsByCreator = () => {
    
    const [farmsByCreator, setFarmsByCreator] = useState([]);
    const [loading, setLoading] = useState(true);

    const getFarmsByCreator = async () => {
        setLoading(true);
        
        if( !isLoggedIn() ){
            setLoading(false);
            setFarmsByCreator([]);
            return [farmsByCreator, getFarmsByCreator, loading]
        }
        

        for (const api of config.apiList) {
            try {
                const res = await axios.post(`${api}/v1/chain/get_table_rows`,{
                    table: "farms",
                    scope: config.waxdao_contract,
                    code: config.waxdao_contract,
                    key_type: 'name',
                    index_position: 2,
                    limit: 100,
                    lower_bound: currentUser,
                    upper_bound: currentUser,
                    json: true
                });

                if (res.data.rows) {
                    setFarmsByCreator(res.data.rows);
                    break;
                }
            } catch (error) {
                console.log(`Failed on API endpoint ${api}. Error: ${error}`);
            }
        }

        setLoading(false);
    }

    return [farmsByCreator, getFarmsByCreator, loading]
}
```

It is important to note that if you are a partner, you are the creator of all farms created using your partner contract. In order to show users which farms they created using your partner contract, you also need to fetch the `farms` table from your own contract, and then `filter` the farms returned by the first `get_table_rows` call, based on who the current user is.

We recommend avoiding this messy logic by just using our API instead, or building your own.

### Vesting Time

Farm creators are able to set a locking period when users stake in their farm. It is important that you show this vesting period on your front end, so users can be aware if they are about to lock tokens when they stake.

You can also display a user's current unlock time for existing stakes, by showing the `vesting_end_time` which is tracked in the user's row for each farm. It's an epoch timestamp, so it needs to be converted into a human readable date.

### Claiming Rewards

While the `getreward` action exists on the `tf.waxdao` contract, and not the partner contract, it is worth mentioning something here.

The `getreward` action returns a vector of `extended_asset`, giving you real time information about the amounts that were claimed.

You can use this data to show a user exactly how much of each asset they received in the transaction modal. While this might seem redundant since you can show them how much they are about to claim, rewards are paid out by a farm every second. Which means that by the time the transaction is pushed, the user may actually receive slightly more tokens than the amounts you displayed beforehand.

Regardless, UX is important and people will enjoy seeing the output of the transaction. Either that, or I just like action return values too much and wanted to find a use case for them :grin:


---

# 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://waxdao.gitbook.io/waxdao/products/token-farms/developers/create-a-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.