Fix StakedETH Guage

[mystic-mango]

Description

Fix the loading animation on the "StakedETH" circle progress gauge.

Related Issue

Fixes #139

Proposed Changes

Re-formatted the "VEP" component in the StakeGuage.vue file allowing for smoother animation of the component. Tailwind styling used.

Additional Information

[Include any additional context or information that may be helpful for the reviewers.]

Checklist

• [x] Tested the changes locally and they solve the issue.
• [x] Changes have been linted.

I could not find a project coding guideline but best practices have been followed.

Screenshots

[aws-amplify-us-east-2[bot]]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-159.df86yn386iuh7.amplifyapp.com

[chimera-defi]

Hey @t-e-blake Thanks for the PR! Welcome to the coop!
We're targeting all changes to the #146 v2-dev branch right now.
Could you rebase this please?

[mystic-mango]

@chimera-defi I was just exploring the recent activity and saw V2 was the target, working on this now. Will update as requested.

[chimera-defi]

any luck?

[mystic-mango]

@chimera-defi After rebasing I came across a "calculateETHDepositted" update which causes errors on page reloads where MaxEth exceeds ETHDepositted. Here is the calculation I believe is causing issues:

const v1 = stakePerValidator * 500;
      ethDepositedToContract += v1;

Are you able to explain this calculation? Maybe we can rewrite to prevent the module failing when ETHDepositted > MaxEth.

I have added the 2 functions below for reference

V2:

calculateMaxEth(maxValidatorShares, validatorPrice) {
      // One validator currently costs 32.1ETH.
      // We can calculate the max amount of ETH that can be depositted to contract
      // as maxShares * validatorPrice / validatorStake.
      const stakePerValidator = 32;
      const maxEthOnContract =
        (maxValidatorShares * validatorPrice) / stakePerValidator;

      return maxEthOnContract;
    },
    calculateEthDepositted(currentValidatorShares, validatorPrice) {
      // One validator currently costs 32.1ETH.
      // We can calculate the amount of ETH depositted to contract
      // as sharesMinted * validatorPrice / validatorStake.
      const stakePerValidator = 32;
      let ethDepositedToContract =
        (currentValidatorShares * validatorPrice) / stakePerValidator;

      const v1 = stakePerValidator * 500;
      ethDepositedToContract += v1;
      // To 2 decimal accuracy and cast it to number
      return +ethDepositedToContract.toFixed(2);
    }

V1:

calculateMaxEth(maxValidatorShares, validatorPrice) {
      // One validator currently costs 32.1ETH.
      // We can calculate the max amount of ETH that can be depositted to contract
      // as maxShares * validatorPrice / validatorStake.
      const stakePerValidator = 32;
      const maxEthOnContract =
        (maxValidatorShares * validatorPrice) / stakePerValidator;

      return maxEthOnContract;
    },
    calculateEthDepositted(currentValidatorShares, validatorPrice) {
      // One validator currently costs 32.1ETH.
      // We can calculate the amount of ETH depositted to contract
      // as sharesMinted * validatorPrice / validatorStake.
      const stakePerValidator = 32;
      const ethDepositedToContract =
        (currentValidatorShares * validatorPrice) / stakePerValidator;

      // To 2 decimal accuracy and cast it to number
      return +ethDepositedToContract.toFixed(2);
    }

[chimera-defi]

where MaxEth exceeds ETHDepositted.

we dont care about this on the frontend. other than a static display imo. this is loosely gaurded by the contract. so we dont want a failing condition on this. goals more deposits not less.

For the calculateMaxEth cmd, i think, based on todays twitter spaces we can return ( 64 + 16 = 80,000 ETH ) as a static number.

normally, it looks at a public var on the minter to see what the cap is. https://github.com/chimera-defi/SharedDeposit/blob/main/contracts/v2/core/SharedDepositMinterV2.sol#L233 since in v1 we had a 0.315% fee, 1 validator cost 32.1 ETH, thus the math on the frontend. in v2 1 validator, like the base network, costs only 32 ETH. So the returned number is good enough.

We want to add the 2 numbers for v1 and v2 together to get a bigger number for show at least initially imo. once all veth2 has been migrated we can track only w/sgETH supply