originprotocol / oeth.com Goto Github PK

https://www.figma.com/file/lT360d5LvTb55hfgbRtWWT/OETH-Marketing-Site?node-id=121%3A15368&t=FnoOVvCXC9DM1m0y-1

https://www.figma.com/file/5JBhCbve90PJPO8c0kd0G3/Swap-App?type=design&node-id=1088%3A26763&t=T0Zf8zm7nWJZNGo1-1

Desktop: https://www.figma.com/file/lT360d5LvTb55hfgbRtWWT/OETH-Marketing-Site?type=design&node-id=121%3A15368&t=ErJGTS8rc969WyiS-1

Mobile: https://www.figma.com/file/lT360d5LvTb55hfgbRtWWT/OETH-Marketing-Site?type=design&node-id=121%3A17427&t=ErJGTS8rc969WyiS-1

See Google Doc 🤖

#47 calls for the first page of Proof of Yield to be shipped by itself. In fact, there is another iterative step we could take that wouldn't be much more complicated. The second page for PoY can be broken down into two parts. First, we give more detail for the yield distribution on a given day. This includes a line item for each rebase, an accounting of the performance fee, etc. The second half of the page is dedicated to yield source attribution. It shows where the pre-dripped yield comes from and allows us to compare strategy performance to expectations.

Before trying to wrap up the backend accounting necessary for the yield attribution, let's ship this second page just with the top half. We'll provide more evidence of the yield distribution and detail with the other part in a subsequent version.

Adding feedback from oeth analytics Blocker feedback

• Protocol revenue should be included in the overview

• Add protocol revenue to overview page

• Protocol revenue chart is missing fees vs yield distinction

• Swap out the current protocol revenue chart for one with the yield/fee breakdown
  https://dune.com/queries/2612143

• I don’t think OETH should be included on the collateral page / collateral section

• Remove OETH label and calculation from collateral, ensure calculation % add up correctly

• I’d remove the “Current” option from the APY chart until we have 100% Dripper utilization

• Remove "All" and "Current" from filters. Set default view to 30 day moving average

• The labels on the collateral distribution should match the marketing page (e.g. Convex OETH vs OETH/ETH Curve AMO)

• Ensure labels on marketing home page line up with what is on analytics

oeth.com/governance currently points to a non-existent CMS page. It should redirect to ousd.com/governance or serve the same page. Someday, we will likely have a different domain handling this.

Currently it's using the protocol logos, should be tokens - see design

https://www.figma.com/file/lT360d5LvTb55hfgbRtWWT/OETH-Marketing-Site?node-id=121%3A15368&t=FnoOVvCXC9DM1m0y-1

The Hero Image on OETH.com lays on top of the title background, whereas the images on our other blogs strike through the title and body backgrounds. The ladder looks better, especially with certain color schemes.

OETH example: https://www.oeth.com/oeth-litepaper
OUSD example: https://www.ousd.com/litepaper

Currently, there's no image displayed when OETH.com is posted in Discord. Let's fix that.

Under the "Always the best pool" heading on the homepage, contrast OETH's performance to the LSDs. According to @HrikB, it sounds like there may not be a reliable source for the LSD APYs yet so we may need to do our own calculations. Let's just be sure to compare apples to apples with the same timeframe for each one (e.g. 24-hour, 30-day, etc).

Desktop should be using 24px Sailec medium:

Currently it's using 16px:

Leave the 16px for mobile

Comment from Micah: Minted OETH is missing from the collateral totals, so they don't add up to 1196.48. In the OUSD case, we interpreted OUSD in Convex to be equal to 3Crv and we added it proportionally to the DAI, USDC, and USDT balances. I don't think this works in the OETH case but I'm not sure what to do here.

On this wallet screenshot, let's start the animation with a smaller number and show four decimal places:

212.8527 ETH

OETH........212.8403
ETH................0.0124

Then, increase the OETH and total ETH amounts by a random number between 0.0100 and 0.0499 every time 12 hours pass on the clock.

Timelock
https://docs.oeth.com/governance/timelock

Bug bounty
https://docs.oeth.com/security-and-risks/bug-bounties

All the other purple buttons have them but these two. I'll design hover states for the other colour buttons that are without them but lets add these for now

Like so:

Currently the centre line is off centre which triggers me

Check 4 decimal points is always being used. On the home page it looks 2.

Remove the action column here since rebase is the only action.

As of right now, we have two different (conflicting) data sources that are used throughout the site. We'll want to migrate to fully using Dune so as not to confuse users.

Add "Analytics" as a category on https://www.oeth.com/ecosystem

Currently blocked on adding Dune/Coingecko/DeFillama/etc. as ecosystem partners as analytics integrations.

It's looking like:

Lets get it looking like:

https://www.figma.com/file/lT360d5LvTb55hfgbRtWWT/OETH-Marketing-Site?type=design&node-id=789%3A16471&t=lsDi3TD3KHXoK9V6-1

Marked up across desktop and mobile

https://www.figma.com/file/lT360d5LvTb55hfgbRtWWT/OETH-Marketing-Site?node-id=466%3A14019&t=FnoOVvCXC9DM1m0y-1

• on the dropdown add equal padding to the left and right sides of the button

• on the above button the cursor should change to the hand icon to show it's clickable
• Increase spacing above and the below the number here on all charts - see design

• Add more markers to x axis

• On larger screens add two columns to the collateral like the design shows here

• Remove ETH glyph

• Remove ETH glyphs and add links to pools

• Remove ETH glyphs from these

Since stETH and rETH are just held by the vault, let's show them there alongside WETH instead of having them in separate modules that imply they're held in their own protocols.

For #47, we decided to leave "today" off of the 30-day history (first page) of Proof of Yield. This was to avoid an unhappy experience we had back in the day when /apy would show an APY that fell throughout the day. Here's why that was happening:

🟨 = hour (+/- 300 blocks)
♻️ = rebase

Scenario A
🟨 🟨 ♻️ 🟨 🟨

Scenario B
🟨 🟨 ♻️ 🟨 🟨 🟨 🟨 🟨 🟨

Our APY calculation looks at the change in OETH supply, which is affected by rebases and transfers but not affected by growth in underlying collateral (pending rebase). It calculates the change in OETH supply since the last day, then it extrapolates this out into a full day of blocks and annualizes it. In scenario A, the change is effectively multiplied by SIX (24 hours in a day divided by 4 hours passed = 6). In scenario B, the change is effectively multiplied by THREE (24 hours divided by 8 hours passed = 3). As a result, the APY from A expects to have a rebase every 4 hours. The APY from B expects to have a rebase every 8 hours. In reality, there is unlikely to be a second rebase unless a large mint or redeem occurs.

If my understanding is correct, this is basically time-weighting the yield and projecting that the same earning rate will be experienced throughout the day. This is not what this page should do. It should report the actual amount of yield distributed within the given period. I think the way to fix it would be for the "today" line to account for when the last rebase had occurred (not including the prior day), figure out how many blocks had passed since then, and assume that there are no more rebases coming.

https://www.figma.com/file/lT360d5LvTb55hfgbRtWWT/OETH-Marketing-Site?type=design&node-id=121%3A15368&t=6JyaHg7iFITNQFhw-1

It looks pixelated on retina screens

Curve, Beefy Finance, CoinGecko, Dune, MEW, Maverick, Morpho, Nansen, Token Terminal, Votium, yearn.finance and Uniswap integrations are published on the CMS but do not populate on oeth.com/ecosystem.

(may need to be separate issue) but Josh asked to sort integrations by notoriety/liquidity. It would be helpful to add a way to do this without needing to update each partner to be sorted chronologically.

Follow the same structure as OUSD:

So we probably want to pull in this copy

In production they are running vertically, they should run horizontal - same for text:

Design:

• increase size of Info icons to 16px on large screens and 12px on small. Here it looks too small and is difficult to tap on mobile

• On mobile the info icons are showing 2 sizes. Should be consistent. Looks pixelated too.

• Check spacing with designs: Large screens

• On small screens the left and right table padding should be 16px:

• Reduce paragraph text to 14px on small screens

• The button on mobile doesn't look right here. The purple is fine but the size, text size and padding all looks off.
• Increase space above footer

We've got Sentry in place for error tracking on ousd.com. It should be added to both the staging and prod versions of oeth.com.

https://www.figma.com/file/lT360d5LvTb55hfgbRtWWT/OETH-Marketing-Site?node-id=466%3A14019&t=QbvrIkHxnTygFt7v-1

Add Rocket Pool and Convex. Remove Balancer. Sizing and padding had to change in the design slightly to fit more logos

https://www.figma.com/file/lT360d5LvTb55hfgbRtWWT/OETH-Marketing-Site?node-id=121%3A15368&t=FnoOVvCXC9DM1m0y-1

Aside from the data that we show on the homepage, we will want an OETH version of the new analytics site that we recently launched for OUSD. The new one should live at oeth.com/analytics.

https://www.figma.com/file/BA9IMIvswYcD5xlJpcEOYG/Analytics?node-id=333-7570&t=1tlrPCf43eI1j3ok-4

A few observations:

• Origin Vault shows empty even though unallocated strategy has WETH in it.
• WETH holding does not add up. We're saying that 158.07 is unallocated but that 707.97 is in Convex. The total shown on the collateral section is ignoring Convex. What's held in Convex is actually ETH. Perhaps we should include a total ETH amount instead of treating it all as WETH.
• Minted OETH is missing from the collateral totals, so they don't add up to 1196.48. In the OUSD case, we interpreted OUSD in Convex to be equal to 3Crv and we added it proportionally to the DAI, USDC, and USDT balances. I don't think this works in the OETH case but I'm not sure what to do here.
• TVL number is larger than total collateral number. I'm not sure what causes this but it will lead to questions.

Currently, this is only an input field with a button that must be clicked to subscribe to email notifications. It should be inside of a form element and should allow the user to sign up using the return/enter key while the input field is focused instead of clicking the button.

Our Proof of Yield project is a significant undertaking and it keeps getting pushed back. We already cut the scope once to limit the backend accounting to be "pre-Dripper" since this still lets us compare actual strategy performance to expectations. It also helps us gain trust by showing users that the yield is real and where it comes from.

Aside from the Dripper page, which we were planning to move to /analytics, there are two pages that are currently in-scope for PoY:

1. Daily history of the yield
2. Detailed breakdown of the yield distribution + yield source breakdown for a given day

The data for the second page is a bit complicated because measuring strategy performance is non-trivial, particularly when harvests are involved. But the data for the first page should be much easier to get. It's basically a prettier version of our popular old /apy page without all the esoteric columns. We've actually taken a step backward with OETH in this regard because we don't have this APY detail page, so users can only see our advertise 7-day trailing average metric. I don't think we should launch an OETH version of the old analytics frontend. As a first step, let's just launch the first page of PoY to provide some level of detail for users who want a daily report on OETH's performance.

Josh had mentioned the ecosystem page should have the more important protocol integrations come up first, but right now the integrations are ordered randomly. Can items be sorted either by a position number or publish date? If the ladder, I'd need an option to publish a back date to easily order partners.

This should not be a Convex icon. The idea is to represent each token involved in the pool. In this case, it's ETH and OETH.

Compare OETH's APY to the underlying LSTs but in a positive way.

• Only wrap OETH

(picking wOETH in the second input forces OETH in the first)

https://www.figma.com/file/5JBhCbve90PJPO8c0kd0G3/Swap-App?type=design&node-id=1088%3A26762&t=T0Zf8zm7nWJZNGo1-1

• Replace balance section on swap screen with APY chart

• Changes to the History / Balance page
  https://www.figma.com/file/5JBhCbve90PJPO8c0kd0G3/Swap-App?type=design&node-id=1088%3A26764&t=T0Zf8zm7nWJZNGo1-1
  

Can we make the menu transition instant so there is no animation.

Line up the logo with the logo below so it looks seamless.

Same as above for the close button lining up with the menu button below

After #48 comes the third phase of PoY: yield source attribution. This is the bottom section of the daily detail page shown at https://www.figma.com/file/eN26ytHYvZ7bhCaHy5K0iv/OUSD-Proof-of-Yield?type=design&node-id=487-50955&t=wzlJxv23ETCqYGj1-4.

Proof of Yield consists of two categories of information:

1. Yield distribution
2. Yield generation

The former is covered by #47 and #48 and is calculated post-Dripper. It's all about what happens after each rebase event and organizes this information by calendar days.

The latter depicts what happens pre-Dripper, namely how each strategy has performed in addition to redeem fees, etc. It's incredibly complicated to track the yield from when it is generated to when it is dripped out since the Dripper commingles funds that were generated at different points in time, mixes them together, and distributes them over indeterminate periods of time. Because of this complexity, we decide to focus just on the generation of the yield prior to entering the Dripper. However, this has UX implications for the PoY pages. When looking at a PoY detail page for a particular day, the top portion depicts the yield that was distributed on that day and the bottom portion shows the yield that was generated on that day. Users will not be able to draw connections in the UI from yield being generated and then being distributed. The plan is to test this out and see if users find value in PoY and demand more thorough accounting. I'm fairly confident that we're already going above and beyond what is necessary.

Related: OriginProtocol/origin-dollar#1234

Create the OETH equivalent of https://www.ousd.com/partners for marketing to populate.

The APY chart on staging.oeth.com currently shows OUSD's performance, not OETH's.