feat: add staking page

[RTJ99]

Add staking, Unstaking and Voting buyback
Settle hedge still waiting for hedging contract
closes #57

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
xeon-dapp	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 18, 2024 9:32pm

[netlify]

✅ Deploy Preview for symphonious-beignet-5743b5 ready!

Name	Link
🔨 Latest commit	58978e0
🔍 Latest deploy log	https://app.netlify.com/sites/symphonious-beignet-5743b5/deploys/66eb466b56fdd10008a2a810
😎 Deploy Preview	https://deploy-preview-63--symphonious-beignet-5743b5.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[heyJonBray]

running into errors causing build to fail while building the staking page

"unable to render /stake page"

[heyJonBray]

contract read/write code looks good!

found one error, the rest of the review updates are UI and style changes to make the page match the design outlined in #57

page errors

going to type a value in the stake amount immediately triggers a popup that "Amount exceeds wallet balance"

• only perform this check after the user tries to click the button

UI updates

• remove the bracket stylization around text (epoch, eth in pool, etc.)
• UI should be three side-by-side boxes with centered headers above each box (Stake, Settle, $XEON Buyback)
• reduce header sizes
• adjust the left and right page width to ensure room for all components
• sized and position the page header and description in top left corner of page
  • animation can be in the background, behind the header and description
• move epoch, ETH in pool, XEON buyback, team percentages to the top right corner of the page, outside of a box, right justified

stake

• move the staked and wallet values here, aligned top left
• value entry, stake button, switch on the right side of the stake box, all centered vertically

settle

• header above box
• smaller box than stake
• description text and button centered in box

XEON buyback

• same size box as settle

[heyJonBray]

@RTJ99 I made some minor changes and merged the current state through in #69 so that the updates would be live but there's some minor tweaks that need to be made

these are not priority changes but let's address before mainnet release next week to ensure the app looks as good as possible

there's more space between stake/settle than between settle/buyback), and the border size changes with the state when they should be constant size with comfortable padding inside and around text so it doesn't look crowded

for example, when switching to Unstake state, the staking box is now a different size than the rest:

alignment

we should be using a grid or column to ensure the boxes are locked into alignment

20 columns should be granular enough for the components we have, broken down as:

• Stake = 7
• Settle = 4
• Buyback = 7
• with a space of 1 between each box
• constant height of 3 or 4

todo

• ensure the box sizes are roomy enough to accommodate state changes without altering their size
• ensure the vertical height on all boxes are the same
• ensure elements inside of the boxes have comfortable padding around them and don't look crammed
• switch to grid/columns for better alignment
• reduce font weight on the text inside of boxes, buttons, etc. to reduce crowded feeling