We want to present the list of metavaults that are supported by mStable. We need a page to present this list and allow user navigation between metavault detail pages.

Prerequisite

• #52
• #41

We want to keep and retrieve user settings in local storage so the app behave consistently between multiple sessions

About

Tracking polishing and bug items for V1.1

Items

• Deposit Costs, $-Amount grayed out.
  

• After depositing/withdrawal, My position shows a Profit

• If 0, still button is active

• This looks like a question mark?
  

• Colors: Headlines, Green match
  
  

• #70

• Font color matches
  
  

• Font color in fees matches
  
  

• Is it possible to have the same line as in the mockups?
  

Footer

• Footer, hover background is inconsistent (medium is much bigger)

We can probably do better than that ...

• Create the dark and light mode version of this image:

https://media.discordapp.net/attachments/904739703885008936/1024691994569744444/metavailtdiagram.png?width=1778&height=1000

About

This epic tracks all issues for the third iteration on MetaVault UI. More bug fixes and smaller adjustments

Subissues

• #49
• #121
• #100
• #119
• #120

User story

As a user, I want to select different Vaults to interact with.
As a user, I would want to discover available vaults in order to see which ones i want to invest in.

Related Issues

#51

Related Docs

https://www.notion.so/mstable/Discover-Vaults-page-d2e7b9e882ee4b3fb4fb6278639bce21

Subissues

Acceptance criteria

• Decide on scope
• Mockup files ready and reviewed

We should reference V2 from legacy apps and improve visibility

Change yield to vaults in sub domain (final url tbd @dimsome @rafaelugolini )

• Link to new app in a banner
• Link from landing page to new app
• Add SEO data and meta, verify crawler compliance

We need to centralize all informations around the MV in one convenient place. Ideally, this should be served by an api, but for now we can hardcode this in a file.

Informations can be found in notion (add link) and Figma

Implement the Strategy and Risks card following latest designs

Prerequisite

• #26

Implement and integrate Vault performance card

Prerequisite

• full TheGraph integration

Fully comply with latest Figma changes

• Use scrollable background
• Topnav
• App menus and settings (network switch, dark mode switch, user settings,...)
• Align notification messages
• Improve Footer: replicate legacy app behavior
• Improve loading states: disable operation inputs on tx loading - nice to have
• Improve balance update visibility by adding color on update - nice to have
• 2 items per line in Strategy

Prerequisite

• Final Figma designs

About

Tracking polishing and bug items for V1.2

Issues

Expand chart offers little value if the modal is smaller than the chart on the page (on big screens), should make it bigger or full screen? ❌ will be addressed in mobile support issue

APY remained high (above 420%) despite much more asset have been deposited ❌ this is expected as apy is streamed

Yield Calculator: Gas prices are very low (just 86 cents?) 🤔 the computation looks ok to me, we assume 100000 gas for each operation and the price is retrieved every 30s <- This is way too cheap, now it estimatews 26 cents for an operation. Also the % of gas impact is taken from the principle not from the earned amount. We need to revisit the yield calculator.

Treasury deposited 99,900 USDC + 100 USDC, balance shows 99,945.63 USDC, it this correct? should this show profit? ❌ duplicate with P/L and apy issues

• Yield calculator, make a deposit max amount results in amount greater than balance (dust amount)
• #101
• My position box is refreshing and changing once wallet is connected
• After opening app: Profit/Loss is equal to position value, does not update.
• Yield calculator, connecting wallet closes box
• Fix Meta Vault name
• Add Meta Vault contracts as well (USDC MV and 3CRV MV)
• Fix: Edit the assets, remove LUSD
• Assets: Fix mUSD logo
• Share price displaying as 1 Share = 0 USDC when despositing
• Settings menu doesn’t hide if you click twice on the gear icon.
• Fees: outdated numbers. Current fees are set to 16% liquidation and 4% performance
• Network fetching error still happens :Error fetching prices Network Error
• Deposit box: Balance gets cutoff if not enough space (should we find a better way to manage this on small screens?) => 2 decimals
• Graph data cutoff: To mitigate huge spikes in the first weeks when the vault is illiquid
• Change detail TVL to USD currency, add symbol
• Buttons in modals (variant text for disconnect action, closing button to default color)
• No data available to the same color than the vault primary
• Explore page: swap APY and TVL
• Utilise loading state: when clicking to go to a Meta Vault single page, TVL shows 0.0000001 for a second.
• Withdrawal box: Asset/Shares are flipped. Shows burn shares but is USDC, Asset is on top
• Vault Contract, replace Curve.fi MUSD/3Crv (musd3CRV) with https://etherscan.io/address/0x9614a4c61e45575b56c7e0251f63dcde797d93c5
• ROI is always 0, is this correct?
• Wtihdrawal: changing Shares will produce 10 times lower Asset value
• Deposit: changing shares creates wrong value, e.g. 1.2286615e-11
• Adjust Wallet icon in withdraw box
• Adjust decimals in balance in withdraw/deposit box
• Withdrawal box: clicking on MAX can result in Insufficient balance error
• Yield Calculator: Gas impact calculation is strange: 40 USDC deposit, 4 USDC profit, gas impact 44%? while estimation shows 0.88 each

• use svg or css backround masks on gradient
• fix some zindex issues
• update Meta Vault wording

We need to make our Style system consistent with Figma, check reference designs here

• colors
• Typography
• Icons
• Buttons
• Button Group
• Input
• Balance Label
• Percentage Picker
• NavBar
• Tab
• Checkbox
• Switch
• Radio Button
• Toggle Button
• Select
• List
• Divider
• Chip
• Alerts
• Dialog
• Tooltip
• Accordion
• Sliders
• Progress Bar
• Stepper
• Text Field
• Card

Add Links to documentation or other Apps? ✅ solved by #150

• Change Meta Vault by mStable to Yield App by mStable

About

Showing the APY in the frontend turned out to be a bad indicator of the Vaults actual performance. Change to Share price focus that accrues in value over time, Shareprice can go down, but it should increase in value over the long run.

Acceptance Criteria

• Adjust Share Price Mockups
• Adjust ROI
• hand over mockups to frondend team

Revamp Error pages

Error when trying to open WalletConnect modal, e.g. when trying to use impersonator.

• Update background gradient based on primary color vault
• Add Back Button
• Replace vault asset Icon
• Chart color based on primary color vault

We want to get analytics about usage, we should decide which lib to use

• Pendo
• Sentry
• LogRocket
• ...

and implement in-app solution

Notion list:

https://www.notion.so/mstable/Analytic-Tools-7ecf8184b4b146ab82de873953d1646c

The url should reflect the state of the Metavault page by embedding

• metavault address
• chain id
• ...

About

Epic to keep track of the Meta Vault UI development

User story

As a user, I would want to access Meta Vaults, and deposit/withdraw my assets.

Related Issues

mstable/mStable-subgraphs-monorepo#34

https://github.com/mstable/mStable-contracts-V2/issues/61

Subissues

• #19
• #26
• #27
• #28
• #29
• #30
• #31
• #32
• #41
• #56
• Setup a demo enviroment
• Publish Subgraph & Test
• #62
• #63

• Fix background layout
• Remove charts
• Reorder layout for Featured MV
• Fix Strategy chips are squashed on smaller screens
  
  
• Vault card padding decreases to 16px
• Vault card label font size decreases to 12px
• Vault card font size for APY value to 18px
• Vault card value for TVL and protocol icons to 16px

• Main card
• Gradient text h1
• move the gas and TVL to main card
• making chart color transparent/solid on hover
• placeholders for coming soon cards
• increase icon size on vault card to match APY + vamue height => 48px

1. open single vault page
2. Connect wallet that has a balance
3. See issue

We might want to track additional events, let's define which one and which information to send @dimsome @rafaelugolini

https://www.notion.so/mstable/User-Tracking-Events-0d864679c75b4554b778ac7252f47507

• #147
• #148
• #145
• #149
• #140
• #154
• #156

We should add Error Boundaries at several levels in the app to prevent crashes. We should also handle 404/Oops page better

About

This is to track which items need to be better aligned upon within the Product Team before progressing to FE-Tean

Design/Product Open Points

• Header background to extend to the top (behind the nav bar.)
• Header background to make the transition smoother
• Should we consider swapping TVL and APY?
• Is the change of TVL relevant?

Vault Performance

• If we only show TVL and APY, should we use buttons rather than
• Should we show the units? What does the TVL is based on?
• Can we change to display day/month, or only display months.
• Hover area, impossibly small, almost pixel perfect. What should be the behaviour?
• Changing from APY to TVL, left side jumps
• Fix APYTVL Dropdown (Hover Gray, Padding, rounded corners)

My position

• What happens if I withdraw 100% of my position? (it should reset, given a dust amount is acceptable)
• Position card: how does it look without a position?
• Yield calculator: how yield calculator behaves when no position?
• Is the box shown when there is no position?
• History button background too faint, does not look like something clickable.
• History empty when no action was performed, should say something "Nothing here yet, make your first deposit" With some graphics.
• We have a lot of ways to close this box, cross, and button. Maybe too much?
• Yield Calculator: Show range, or min, max withdraw costs (threshold?)
• Wallet not connected: Values should be disabled-(color).
• Font weight is wrong:

Deposit/Withdraw

• Deposit/withdraw button -> says waiting for approval -> replace text for default waiting to sign transaction.
• After Approval TX input disabled?
• Current Gas: replace with basefee?
• Add progress bar that shows when it dismisses itself.
• TX-notification info change color? Is to similiar to color pallet, does not stick out enough
• Deposit box: What should happen to the share price if wallet is not connected? Can we display it? - 🚧 needs deeper investigation
• Button style when wallet not connected -> secondary button instead.
• if > balance, show error message? Approve button is still active, does not show insufficient balance - 🚧 needs deeper investigation, what needs to happen in that case, Approve not allowed!
  

Strategy & Risk

• Fees: We are currently displaying "Liquidation Fee" and "Performance Fee" but the "Liquidation Fee" happens in the Basic Vault. What happens when we start using other strategies we don't control? Do we show their fees too? Also, for me(@rafaelugolini ), the performance fee should be on top. Maybe I'm biased because of all the diagrams the Meta Vault was on top.
• Swap the fees.
• Fees: the wording to define “performance fee” and “liquidation fee” is unclear. IMO we should only talk about one performance fee, specifying that it’s x% for liquidated rewards and y% for trading fees (and staking rewards when we have stETH). (from julian)
• Should we close other accordions if another one is openened? Yes please :)
• Line-height here is smaller than in other places, change font type.
  

Other

• Improve wrong network support, now it shows wrong network for all? Button style to be used that is defined.

• Seems we have a lot of different font weights? (strategy card, My position (value))

• Address links not like figma

• Settings: Label is clickable.

• Settings: should approve exact be standard? Change to set approval as infinite, default Yes.

• Footer, Meta Vaults without the dash (-), Or replace with YIELD or VAULTS?

• Should we link somewhere to our other apps?

• We have a lot of different styles going on here
  
  

• Increase icon size

• Cannot really see this icon, is this an exclamation mark?
  

• Not sure what this history icon is, really tiny
  

Bugs

• #82

About

Creating a subdomain for the new Meta Vaults UI, so we are ready for our sneaky launch.

Tasks

• create yield.mstable.org
• Link to production deploy

About

Tracking polishing and bug items for V1.1, second iteration. The previous issue was resolved, this is a new one that tracks adjustments that were discussed within the product team. Other might be new issues.

Items

Header

• Swap TVL and APY
  
  

Vault Performance

• Show TVL Units
  
  
• change to display month abbreviation and day
  
  
• Fix APYTVL Dropdown (Hover Gray, Padding, rounded corners)
  
  

My Position

• What happens if I withdraw 100% of my position? (it should reset, given a dust amount is acceptable)
• History empty when no action was performed, should say something "Nothing here yet, make your first deposit" With some graphics.
  
  
• Yield Calculator: Show range, or min, max withdraw costs (threshold?)
• Wallet not connected: Values should be disabled-(color).
  
  
• Font weight is wrong:
  
  

Deposit/withdraw

• Deposit/withdraw button -> says waiting for approval -> replace text for default to "sign transaction".
• After Approval TX input disabled? Bug: Input is disabled after approval tx
• Current Gas: replace with "Current Basefee"
• Button style when wallet not connected -> secondary button instead.
  
  
• if > balance, show error message? Approve button is still active, does not show insufficient balance - 🚧 needs deeper investigation, what needs to happen in that case, Approve not allowed!
• Fix font color to black600
  

Strategy Risk

• Swap the performance fees card.
  
  
• Fees: the wording to define “performance fee” and “liquidation fee” is unclear. IMO we should only talk about one performance fee, specifying that it’s x% for liquidated rewards and y% for trading fees (and staking rewards when we have stETH). (from julian)
• close other accordions if another one is openened
• Line-height here is smaller than in other places, check if standard line height is applied.
  

Other

• Improve wrong network support modal, switch buttons to secondary and text button.
• Seems we have a lot of different font weights?
  
  
• Address links not like figma, change style and make it shorter
  
  
• Settings: should approve exact be standard? Change to set approval as infinite, default Yes.
• Settings: Label is clickable.
  
• Footer, Meta Vaults without the dash (-), Or replace with YIELD or VAULTS? (no actions for now)
• Increase icon size by 2/4px
  
  
• align left padding with header
  

Bugs

• When withdrawing the Profil/Loss shows a change for a few seconds, then resets.
  
• The chart does not update after deposits/withdrawals
• APY in graphs should show the %
  
• Graph should be able to display negative values
  

About

This epic tracks all issues for the second iteration on MetaVault UI

Dependency

• #73

Subissues

• #50
• #51
• #53
• #60
• #61
• #74
• #69
• #80
• #82

About

Our new frontend should be responsive. To achieve the best result, we should define how the screen would behave with different break points.

Related Issue

#49

Acceptance Criteria

• Breakpoints defined
• Mockups ready

Integrate Jumbo view with TheGraph api and apply latest Figma changes

Prerequisite

• TheGraph integration
• #26

Last iteration of revamp before general launch

explore page

• gradient animation on hover Featured card, only Meta Vault word
• update colors of Discover and subtitle
• add border for protocols, ROI, asset/share box
• Add ROI on the detail box
• update share price in USDC
• update chart scale to make the chart prettier

MV page

• review detail box, add ROI, dividers
• back button label to "Explore"
• remove APY from graph values (double check with Dim)

We need to find a better way to compute our APY

Operation widget needs to follow latest mockups after usability feedback (fields order, gas fees estimates, approval process,...)

• Update CI pipeline for automation
• Update startBlock to consider all indexed data (filtering happens on the queries now)
• Publish subgraph
• Provision enough GRT
• Update secrets and urls

General

• verify target=_blank on external links

Deposit/Withdraw

• Remove AVG on Recap - Current base fee
• GWEI 2 decimals only
• ETH price 2 significant decimals

History

• Hide Yield Calculator Button

Graph

• Asset per share adjust to Share Price
• Remove APY chart
• Add margins to the chart scales, avoid axis overlap

Strategy

• adjust Divider visibility on fee charts

• Sticky bottom navbar with My Position and Operation
• Review padding and cards order
• Full screen modals and dialogs
• Remove outlines from operational widget and yield calc modals
• Create new variants for outline buttons and apply to "History"
• Remove "Expand button" from Vault performance section

Prerequisites

• #71

We want the footer to include

• mStable branding
• social icons
• links to documentation
• links to risk page

• Add Coming soon cards
• Adjust “explore” text color
• Left and Right margin on big screens, 4k adjust?
• Meta Vault Tags: Explain them better? Remove Meta Vault or Diversified.

About

Issue to keep track of bugs and adjustments needed to complete UI version 1.0

Bugs:

• Clicking Withdraw when wallet it not connected results in a blank screen (error in console)
• Clicking withdraw when wrong network is selected results in a blank screen (error in console)
• On initial load, goes blank if wrong network is selected.
• Changing network crashes the app
• z index issue with settings box and deposit box icon flow
• Application crashed after deposit:
  

Adjustments

Vault Performance

• Graph smoothness please reduce, shows a fall in graph just to smooth out
• #69
• Changing from APY to TVL, left side jumps - ❌ won't fix y axis is different

Strategy

• Should the address be the link itself?

My position

• Position value has no separator (,) but shares have.
  

• Deposit Costs, $-Amount grayed out.
  

• Font Weights/Green/Font matches xheck figma 600-900
  
  

Deposit/Withdraw

• TX-Confirmation add space to top nav
• TX-notification stays longer
• Deposit/withdraw button -> says waiting for approval ❌ won't fix needs clearer message
• After depositing/withdrawal, My position shows a Profit
• If 0, still button is active
• if > balance, show error message? Approve button is still active, does not show insufficient balance - 🚧 needs deeper investigation, what needs to happen in that case
  
• This looks like a question mark?
  

Footer

• Footer, hover background is inconsistent (medium is much bigger)

Lightmode

• Colors: Headlines, Green match
  
  

• #70
  
  

• Font color matches
  
  

• Font color in fees matches
  
  

• Is it possible to have the same line as in the mockups?
  

Darkmode

• Darkmode, graph lines not visible at all
• Darkmode: Graph gradient does not extent to bottom
• Darkmode, gray not very visible - 🚧 needs deeper investigation

When clicking on the Expand button on the Vault performance widget, the Chart has a strange resizing flicker effect. This is probably fixable by constraining chart size.

Implement and integrate yield calculator widget based on latest designs in Figma

After sync with product, we take those decisions for Meta Vault v1

• use average gas amount for fee computation (find them here)
• add tooltips next to gas checkboxes: Warn this is an average, it is subject to changes, prices are taken from today, blabla
• add default values: fields APY and duration should have default values