Staking App UI/UX Specs

[chrisengel]

As the staking smart contract is already complete (more or less), the current challenge is to establish a user-friendly UI for LEV holders to easily stake their tokens.

General Information

The first information that should be displayed in the staking app, regardless of any input from the user, is the information about the current staking period:

• Staking period start block
• Current block
• Staking period end block
• LEV ERC20 address (with ENS domain)
• Staking contract address (with ENS domain...)

The above information should be displayed in a progress-bar style visual at the top of the app.

User Input Specific Information

User Address Info

Then below this generalized there should be a user input for their own address:

| Enter ETH account with LEV: ______________________ [ Get Info ]

With this input, a user clicks "Get info" and it will display the following:

a. How much LEV the address has
b. How much LEV the address has staked already
c. How much LEV the address has approved, but not staked
d. How much LEV is available for withdrawal

These fields will remain displayed and be connected to websockets with nodes on the server that update realtime. As the user is conducting approval/staking, or any other deposit or withdrawal activity, we want these fields to reflect any changes without user action.

Approval Process

Once this information is displayed, the user should be able to now have new inputs to engage in the two step process: Approval + Stake.

| Enter amount of LEV to be staked: ____________________(e) [ Approve ] [ Stake ]

Note that the [Approve] button should only be active if (e) >= (d).
Note also that the [ Stake ] button should be disabled until the approval has successfully been executed

We want to make sure that the users of the app can conduct the Approval and the Stake transactions on any app they want: MetaMask, MEW, even (god help them) Parity. All these apps input four fields:

• To Address (LEV smart contract)
• Amount
• GAS
• Data

Once the approve button has been clicked, a series of display fields will fill for the above fields.

The user can then copy the information into their respective app and conduct the approval.

Staking Process

Now, the app has to be able to detect when the approval occurs. The [Stake] button must not be enabled unless the address entered has the amount approved. With websockets connected to the node this should be on-the-fly.

Once the approval is detected (visible in field (c) above), then the Stake button should be enabled if the amount entered is <= (c).

The same concept for Approval will be used for Stake, the user clicks [ Stake ] and the four fields populate for the user to enter into their app:

• To Address (Staking contract)
• Amount
• GAS
• Data

Then the user can copy this information, send to their own app, and finish the staking process.

Once the staking has gone through, it will update the field (b) above showing the user has more LEV staked.

Here is a crude outline of the layout: