sharedstake / sharedstake-ui Goto Github PK

Problem
The dashboard KPIs are all out of alignment.

Solution

• Introduce a nicer layout to align the KPIs
• Improve styles to add a but if subtle colour / accents, particularly to the key metrics we want to stand out

To be discussed with auditors and have this publicized once finalized.

Currently on the stake page https://www.sharedstake.org/stake
A user may stake their ETH generating a returned vETH2 token.
Most users choose to deposit the vETH2 token on our earn page for the reward geyser returns.

Ideally we want to make this more seamless by having either a checkbox or different button that stakes & deposits to earn.
The flow will require the same 2 extra steps as are on the earn page, to approve then deposit the token into the right geyser.
Using this button/checkbox should create 3 txs sequentially, waiting for each to succeed before popping open the next one to avoid errors.
i.e. ETH -> deposit on sharedDeposit -> approve vETH2 on geyser -> deposit vETH2 to geysers

What needs to be done to list on Sushiswap?

Problem

• The icons look 'straight outta stockton' - we'd do with improving these to make them more professional or at least add some styles around the icons to improve their feel
• The textbox looks undone/old school. Doesn't feel like it fits with the brand / website

Solution

• Improve icons / or source new ones
• Set max width on text in the box, Improve the box styles, make the button CTA more specific
• Potentially rewrite the text a bit to improve it, can get chatGPT support with this

What needs to be done to fully integrate with Zapper? Can SharedStake Devs post what remains outstanding?

Problem
When starting to scroll the homepage, the footer section is initially visible before the first below-the-fold section JS kicks in and animates it in.

Solution 1
Adjust the animation/JS timing or positioning so it kicks in earlier and footer is not visible until the user scrolls to it

Solution 2
Use a simpler below-the-fold content display approach, ideally it's always visible and just uses CSS animations for visual enhancements. Fancy animation currently deteriorates the experience, so it's kinda moot.

I vote solution 2.

Work with NatoshiSakamoto to expand the Dune analytics dashboard to include staked ETH historically and currently - among other features.

Understand that the designer was expected to provide a revamped website by the end of this week.

[Feat] Add live tracking of ETH deposited into the contract

Previously, we tracked the ETH in the sharedDeposit contract live. So if more ETH was deposited the number on the landing page would go up.
This functionality was removed with the new website but one can use the commit logs to discover how it was implemented and re-implement it.

Navigation:

• Center header nav items relative to the full width.
• Global footer UI fix. For reference:

Home Page:

• Live stats swapped with "Capital Efficient Staking" section.
• Indicate Live stats are Live.
• "Capital Efficient Staking" section body copy has a widow. Expand width of the text box so "market" is on the second line.
• Remove Icon from "Learn More" buttons
• Remove pink circle from "Roadmap" - Usability issue
• Change "Stake!" outline CTA button to "STAKE" solid CTA button. Try black type in Medium or Bold on top of a SharedStake pink button)

Stake:

• CTAs should match the CTAs on the home page and throughout the site (i.e. black type in Medium or Bold on top of a SharedStake pink button)
• Header color is too dark. Try using the blue from the arrow and selectors on the page
• "ETH staked" color is too dark. Try using the blue from the arrow and selectors on the page.
• Change copy from "XXXXX/XXXXX ETH staked" to "XX,XXX of XX,XXX ETH staked"

Earn:

• Make the text form the same width as buttons or rows of buttons

Responsive Web:

• Looking long term refine breaking point to avoid progressively line-breaking text

Asset Improvements:

• Change CertiK badge to CertiK logo

TL;DR: 17 validators are currently on ETH2. Should we wait for additional testing or send all available validators to the ETH2 contract?

Summary: We have deposited the first batch of 17 validators to the ETH2 deposit contract. We have almost 100 additional validators worth of ETH in our contract that are ready for migration. Should we deposit the additional 100 into the ETH2 deposit contract or should we wait until the first batch of validators are up and running and the infrastructure has been fully tested?

Discussion: https://discord.com/channels/779046626236563487/811039103066963985

Note: Current validator deposits require mandatory 14-day onboarding before validating blocks.
https://beaconscan.com/validator/0xab48faee02350fad44b52198214b4abaa93598b9c9526e0fee746f03995102036b76d3374907b6d21890a1895dedadaf

Hey,

I have a few suggestions for improvements on the frontend side of the project.

1. The Navigation bar should be simplified and narrowed down to the essentials. right now its just clustered and doesn't look very inviting. You can have sub navigation that still makes everything accessable. Also it makes sense because most items redirect to an external page.
2. Move the social links to a fixed position on the right side. So they are also available while scolling down.
3. Bring some more statistics to the first impression/landing page. This way we can promote the staked ETH etc.
4. Give the NFTs more space. Even if its just a "sideproduct" it should have visual elements to it. Simply because visuals always work well.

These were all changes that are thought as an improvement, not a completely new website revamp. I tried to keep the changes not too big so the workload is not too heavy.

Looking forward to discussing your ideas! :)

Have gotten lots of questions in the discord about how to unstake or claim rewards with regards to the current "withdraw" and "harvest" buttons. Having the buttons explicitly labeled "unstake" and "claim rewards" will remove any ambiguity.

Choose a token logo and update DEXs

interested in your work and would like to connect! i found you via marketmake t.me/pavlovcik

Currently you need to first approve your SGT or other tokens for staking then stake them.
Currently we do not wait long enough for the approval tx to succeed, resulting in an error/high gass fee tx popping up in metamask for the deposit.

Ideally we would like to wait a bit more time/for more confirmations so the second tx that gets queued/pops up is likely to result in a success.

The manual work around is to reject the second tx, wait a bit for the first approval to succeed, then try depositing in the earn page again. We want to make this more streamlined.

[Feat] Add live tracking of APY on our site

We have a section on the landing page displaying a hardcoded 139% right now.
Ideally we want to track it live with the same equations as the earn page and show the highest apy (eth-uni rn) on the landing page and have it change.

website no load on mobile and without metamask
add rpc, rpc.sharedtools.org/rpc, so it works without metamask or other web3 provider ?

Need to consider how this would be implemented and funded.
Initial thoughts:
Have an autoharvest of all pools once a day together with a staking of such SGT in the SGT pool.
Fees for this can be deducted from yield returns (i.e. sell SGT to fund the cost)

Not sure how easy this is to do and seems fairly low priority.

[Withdrawals] UI component / button for withdrawals contract: https://goerli.etherscan.io/address/0x4db116ad5cca33ba5d2956dba80d56f27b6b2455

1. Integrate the ABI here https://github.com/chimera-defi/SharedDeposit/blob/main/data/abi/Withdrawals.json
2. Connect UI to goerli. As we are not active on mainnet breaking the mainnet link is alright
3. Add a new page or section with button and number input. similar to stake page

• Button specs:
  In essence you have 1 number input with 1 button below needed. The button changes state depending on conditions.

1. initial state is approve. Check if connectedWallet.balance of vETH2 > veth2.approval(user, withdrawalContract) otherwise show an approve button which triggers max approval and calls veth2.approve(withdrawalContract, maxUint)
2. If the user has enough tokens approved show a deposit button.
   Let the user input how many tokens they want to withdraw. With a max button in the number input to let them withdraw all. (See uniswap UI for ex).
3. deposit button triggers deposit(value) call on withdrawal contract
4. Show a redeem button. Check if the user wallet connected is in withdrawals.userEntries with balance returned > 0; . And check withdrawalContract ETH balance > userEntries.amount.
   Therefore if the user has any tokens they can redeem show a redeem button.
5. if the redeem checks fail due to contract not having enough ETH, grey out the redeem button with Please wait. Contract ETH too low

In v1 of our site, we had circular gauges on the info and stake page.
The SharedDeposit contract which mints vETH2 has a maximum capacity, denoted by the function remainingSpaceInEpoch.
We would like to add this back to the stake page so users can gauge how much space is left in the contract and whether to ape into it or not.

The gauge (which can be copied from previous commits before the new site)
Should show the total eth staked / total space left.
e,g right now it should show something like 23456 / 32.000 with a visual progress indicator

Add ability to view Prysm stats in realtime on the website which will increase community engagement and confidence in the team's ability to execute.

What needs to be done to list SGT on 1inch?

• Update Readme.md
• Prepare contribution documentation

This is a high priority item as it will improve engagement with community and ensure that the largest supporters of the protocol have their say.
PhelpsGG had linked to one possible solution:
https://github.com/starcard-org/yield-delegation/tree/master/contracts/utils

example pr from mushrooms finance to add an adapter
https://github.com/ConcourseOpen/DeFi-Pulse-Adapters/pull/289/files

Feature reqiest.

Convert the SGT - button into a dropdown:

Keep the current cowswap in the drop down.
Add direct univ3 route
https://app.uniswap.org/#/swap?outputCurrency=0x24C19F7101c1731b85F1127EaA0407732E36EcDD

Readd goerli network support

We used to support goerli, please readd it for testing

This creates some friction for first time DeFi as they can't even see the yields until they install Metamask.

Recommend some sort of caching solution or querying infura/alchemy as a fallback in the absence of an injected web3

Tried walletconnect from Argent and Metamask and both don't display an ETH balance to stake. The console shows these messages

TypeError: this.send is not a function
at index.js:167
at Generator.next ()
at tslib.es6.js:74
at new Promise ()
at Module.l (tslib.es6.js:70)
at request (index.js:166)
at request (util.js:693)
at t.h.send (index.js:141)
at d (index.js:609)
at k.o (index.js:636)

New pool doesn't have claim function. And apparently you need to unstake 0, to just claim the rewards. However that's very confusing, and currently UI doesn't allow unstake of 0).

We should add Claim button, which would do the unstake of 0 in the background, so the UX would be better and more straight forward.

What needs to be done to fix this number?

TL;DR: Should the SharedStake DAO formalize this template for future SIPs?

Summary: SIPs give every DAO member a voice in the direction of the protocol and should follow a template for efficiency. This SIP is an example of the proposed template style going forward until a new SIP proposes an updated format. The TL;DR section is the SIP's main proposal. The Summary will be 140 words or less to allow for single tweet dissemination. Since snapshot.page does not allow edits, a link should be created (ideally in a publicly accessible forum, social channel, etc.) before the SIP is on snapshot and the link added in the Discussion section on submission. The Note section will address anything required in the SIP that is not covered in prior sections.

Discussion: [link to discussion]

Note: n/a

What needs to be done to fully integrate with Zerion? Can SharedStake Devs post what remains outstanding?

Please add the following base code into the bottom of the header so we can track our "Swipe up to stake" ad conversions. Add it to every page. Thank you.

<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '321744419684000');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=321744419684000&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

We need to start collecting people's emails. Let's add a subscribe form to the footer of the website. Here's the Mailchimp info:

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
	/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://sharestake.us1.list-manage.com/subscribe/post?u=6cb6b636781c4fcc0b7cbccf1&amp;id=1e3ebab5ba" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
	<label for="mce-EMAIL">Subscribe for important updates</label>
	<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_6cb6b636781c4fcc0b7cbccf1_1e3ebab5ba" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

We can add it to the footer of the website, above the legal stuff:

The form and the "Subscribe" button can be styled like this (with the grey background):

Make the site more responsive and functional on mobile

This item has a dev bounty attached to it.

We are slowly but surely gaining defi partners that offer different options to use vETH2 or SGT.
We would like a section on the landing page that allows users to easily find the partner and act as a marketing shoutout or for utility to guide users.

E.g. we have 2 or 3 partners so far:

• name - purpose - link caret
• uniswap - SGT liquidity pool - link to it and perhaps have some hardcoded metrics
• ruler - use vETH2 as collateral to get loans - link to them and perhaps show their current rewards apy
• chainlink - price oracle partner for Sharedstake - link to their site or marketing article

Add dark theme to the app.

Problem

• On narrower screens, the default browser scrollbar is shown. It doesn't look super nice and certainly doesn't fit the brand/theme.
• The roadmap is largely in the past. This is good for showing the age of the project (IMO that's a positive) but leaves a lot of unasnwered questions about future direction, or if this is even actively maintained.

Solution

• Add custom scrollbar styles, just something basic, maybe more like macOS scrollbars (rounded corners, nicer colour, thinner).
• Update the roadmap content with 2023 plans. @chimera-defi would do with syncing on this sir.

We've switched our email marketing provider to a crypto friendly company. Please update the mailing list signup form, located on the bottom of the homepage:

It can look exactly the same, we just need to switch the code. Here's the new code. Please remove any unnecessary markup:

<!-- AWeber Web Form Generator 3.0.1 -->

<form method="post" class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl"  >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1389832656" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="awlist6062519" />
<input type="hidden" name="redirect" value="" id="redirect_0a4a91f6f1485a2bdf449db084e5572f" />

<input type="hidden" name="meta_adtracking" value="Main_signup_form" />
<input type="hidden" name="meta_message" value="1001" />
<input type="hidden" name="meta_required" value="email" />

<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-1389832656" class="af-form"><div id="af-body-1389832656" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-112053980">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-112053980" type="text" name="email" value="" tabindex="500" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" class="submit" type="submit" value="Subscribe" tabindex="501" />
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=jMwcnBzMTGysbA==" alt="" /></div>
</form>
<script type="text/javascript">
    <!--
    (function() {
        var IE = /*@cc_on!@*/false;
        if (!IE) { return; }
        if (document.compatMode && document.compatMode == 'BackCompat') {
            if (document.getElementById("af-form-1389832656")) {
                document.getElementById("af-form-1389832656").className = 'af-form af-quirksMode';
            }
            if (document.getElementById("af-body-1389832656")) {
                document.getElementById("af-body-1389832656").className = "af-body inline af-quirksMode";
            }
            if (document.getElementById("af-header-1389832656")) {
                document.getElementById("af-header-1389832656").className = "af-header af-quirksMode";
            }
            if (document.getElementById("af-footer-1389832656")) {
                document.getElementById("af-footer-1389832656").className = "af-footer af-quirksMode";
            }
        }
    })();
    -->
</script>
<script type="text/javascript">document.getElementById('redirect_0a4a91f6f1485a2bdf449db084e5572f').value = document.location;</script>
<!-- /AWeber Web Form Generator 3.0.1 -->

Below is the javascript snippet, if needed:

<div class="AW-Form-1389832656"></div>
<script type="text/javascript">(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//forms.aweber.com/form/56/1389832656.js";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, "script", "aweber-wjs-hm44hgo1b"));
</script>

The landing page reports the TVL in only ETH.
To make it more impressive and easier to understand, we would like to add a small subtitle below the ETH TVL reporting the actual $USD value of the assets.
This can be done by multiplying the price of ETH from the coingecko api times the response from the function used to get the TVL on our landing page.

Problem

• On page load, the circle progress bar around ETH staked spins a few times / has a buggy animation

Solution

• Fix the animation so it's slower, only does one loop
• Alternatively just remove the animation alltogether

[Feat] Add a buy SGT button with a price ticker for current SGT price

We need to add a disclaimer to the site as the only one is in our notion

Notes from community:

1. You should definitely have a disclaimer. I recommend making this disclaimer a “click-through” screen that a wallet sees and has to click a box to acknowledge and agree the first time that it interacts with the SharedStake wallet. Honestly, it would be ideal to have an entire terms of service that you had each wallet acknowledge the first time it interacts with the protocol. I could probably draft a simple one.
   Please note that this is a beta version of the SharedStake platform. The platform, its software and all content found on it are provided on an “as is” and “as available” basis. You accept all risk of using the platform, services and content on this website or otherwise associated with the SharedStake platform. The content, platform and services on this website and otherwise associated with Sharedstake are provided without any warranty whatsoever.

While we have made reasonable efforts to ensure the security and functionality of the SharedStake platform a formal audit has not been conducted at this time. We strongly advise caution to anyone who chooses to use the early experimental version. Use of any beta-stage decentralized finance protocol comes with risk of losing all funds.
Do not risk any funds you cannot afford to lose. [You agree to bear all risk of loss in the event that the funds you deposit on this platform are lost or stolen.] [NOTE: IT IS UP TO YOU WHETHER TO INCLUDE THIS. IF YOU DO INCLUDE IT, YOU MAY WANT TO MAKE THIS DISCLAIMER A “CLICK THROUGH” SCREEN THE FIRST TIME A CERTAIN WALLET INTERACTS WITH YOUR PLATFORM – MAKE THEM CHECK A BOX THAT SAYS THAT THEY ACKNOLWEDGE AND AGREE TO THE DISCLAIMER. IF YOU WANT TO SOFTEN IT, YOU COULD ADD AT THE END OF THE SENTENCE “TO THE EXTENT THAT SUCH LOSS DOES NOT RESULT PRIMARILY FROM THE GROSS NEGLIGENCE OR WILLFUL MISCONDUCT OF THE DEVELOPERS OF SHAREDSTAKE”. IF YOU ADDED THIS LANGUAGE IT WOULD IMPLY THAT YOU WOULD COMPENSATE USERS WHOSE FUNDS WERE LOST OR STOLEN IF THAT WAS THE FAULT OF THE SHAREDSTAKE DEVS. YOU MAY NOT WANT TO DEAL WITH THIS OR AGREE TO IT, IN WHICH CASE DON’T ADD THAT LANGUAGE.]

The ETH you deposit on SharedStake will be staked on the Ethereum network in validators operated and maintained by SharedStake. [NOTE: CONFIRM THE WAY THIS IS DESCRIBED.] SharedStake and its developers do not provide any warranty with respect to operation and performance of the Ethereum network and are not liable for any damages suffered by users of the SharedStake platform or services as a result of the Ethereum network or outages, failures, poor performance or hacks that occur on the Ethereum network.

Similar to how convex.finance does it, a pop up/element in the UI should notify users that they get ~15% more vEth2 if they go via Saddle than what they’re attempting.

Add SGT pricefeed to buy button landing page
So that it shows the current SGT price.
also change the link to take the user to a direct buy instead of the info page on uniswap.