Rewards visibility and management

[Yanivshechter1]

As a user, I want better visibility and control of the available rewards program.

High level

Changing the design of the deposit widget to expose more data that is relevant to the pool and rewards, and adding a management tool to the token portfolio page.

Deposit widget

Mockup

https://www.figma.com/file/fwADI9wqDrRAdlMX8EddCw/Bancor-v3?node-id=16685%3A246219

Section and Data

1. input amount - no change
2. Auto compounding rewards
   • display APR = total APR (which means that if there is auto compounding, it will be included in the value)
   • IF autoCompoundingRewardsActive = true -- add gift icon -- add tooltip with APR breakdown: --- Fees: TradingFees APR --- Rewards: AutoCompounding APR
3. BNT rewards
   • IF isProgramActive() = true -- add BNT rewards section BNT rewards section --- BNT rewards: StandardRewards APR --- toggle (default to "on") -> this should trigger "depositAndJoin" function --- tooltip: "When you deposit tokens into Bancor, you get corresponding pool tokens (bnTKN) which represents your share of the pool. You can earn more by staking (with additional gas) these tokens into a rewards program.

You will need to remove the bnTKN from the rewards program before you can withdraw" --- End date: follow this and pull the value indicating the end date docs --- line break - after "BNT rewards", always include a line break
4. Vault balance
   • same data as we currently expose. notice the updated design.
5. External Liquidity Protection
   • IF externalIlVault contract has token balance
   • tooltip: The $ amount available to compensate for pool deficits during a withdrawal, provided by {tkn}
   • External Liquidity Protection: externalIlVault token balance * token USD rate
6. line break
7. everything below this is identical to what we have today.

Manage rewards widget

• Prerequisite - Token page #574

  Mockups

  1. With active BNT programs to join and bnTKN in programs https://www.figma.com/file/fwADI9wqDrRAdlMX8EddCw/Bancor-v3?node-id=16702%3A245518
  2. No bnTKN in a program, but there is a program to join - https://www.figma.com/file/fwADI9wqDrRAdlMX8EddCw/Bancor-v3?node-id=16744%3A245873
  3. No active program to join https://www.figma.com/file/fwADI9wqDrRAdlMX8EddCw/Bancor-v3?node-id=16744%3A245918
• Flow - A user enters the token page -> Presses the "Manage" button

  Widget display currency

  The rewards widget data should be affected if the user changes his currency preference #573

  1. Join section

• Show user available bnTKN
• IF (a token has an active standard rewards program) AND (user has available bnTKN in his wallet) Show Join button To determine if a program is active use isProgramActive() function in StandardRewards contract
• Clicking the "Join" button activates the "join rewards" flow

Join Rewards Flow mockup: https://www.figma.com/file/fwADI9wqDrRAdlMX8EddCw/Bancor-v3?node-id=16702%3A246100 exposing data that is also available in the deposit flow.

2. Remove section

• Show this section only if the user has holdings in active or old tokens' standard rewards program For determining whether a user has funds in a standard rewards program use StandardRewards.read.providerStake(user, programId)
• If there is more than one program, order them from active with the most funds to inactive with the least funds
• If the program is active add APR APR calculation = ((rewardsAmount24h.tkn * 365) / programStake.tkn * 100) *Add end time to each program if it still active add start time
• Clicking the "Remove" button activates the "leave rewards" flow