hub.HOPRnet.org: APY-Calculator

[ReinhardSchmidt]

Requirements were:

• make the design work with no "Calculate" button for executing the calculation
• although we don’t distribute the NR-NFT anymore (making the min. stake decrease to currently 10k wxHOPR), we ought to make it possible to calculate the APY in such a case.
• Furthermore we ought to highlight the min-stake without NR_NFT (30k wxHOPR)–> this is addressed by small disclaimer element next to the INVESTED AMOUNT-figure.

Remark:
The APY calculators’ UI is coloured in blue in order to standout on the white BG.

––––––––––––––
FIGMA-Link: Figma: https://www.figma.com/file/qjTbRGulmsPBQ2E0aHY7HI/Staking-UI-v5?type=design&node-id=3404%3A16071&mode=design&t=s29EFxBc9pUxdAnb-1
––––––––––––––

INITIAL LOAD STATE (showing the APY and related stats for 30k wxHOPR)

State: User enters 900 wxHOPR (not enough, even with NR-NFT)
when typing, every digit-string:
all below “10000”: colour FF0000
all above and incl. “10000”: colour 414141

State: User enters 10000 wxHOPR (correct): text in dark grey + small info "with NR-NFT"

State: User enters at least 30000 wxHOPR

Additional information is being provided by the tooltip-elment of hover of the i-Icon of INVESTED AMOUNT, NUMBER OF NODES and APY (the most relevant one showing the basic modalities).

Positioning, right below the hero:

––
Furthermore: if the stake is ABOVE 75k but only one node is envisioned, we ought to give an suggestion:
“the max. stake per Node is 75k wxHOPR. Raise the number of your nodes to further raise the APY of the same stake”.
UX: once the node number is increased x>1, fade-out feedback item.
https://www.figma.com/design/qjTbRGulmsPBQ2E0aHY7HI?node-id=3424-16684#775159895

––
Mobile draft to be derivated directly

[SCBuergel]

Love it, only please consistently use point . as a decimal separator and apostrophe ' as digit group separator. E. 1'234'567.89

I like that in this box design we can easily add more boxes when switching to a more complex economic model or yield curve.