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.

GitHub - mdcryptonfts/farm-partner-ui: React UI for token farm partnersGitHub

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. Creator facing actions for your partner contract are covered in the README file of the 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.

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. 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.

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

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 😁