yearn / yearn-finance-v3

Yearn Finance Web App v3

yearn.finance

Note This version of the frontend has been deprecated in favor of https://github.com/yearn/yearn.fi but can still be accessed here

Contributing

Code style follows prettier conventions (yarn prettier). Commit messages follow the Conventional Commits spec.

Initial Setup

• Fork the original repo into your GitHub account

• Clone the forked repo from your GitHub account to your local machine

  git clone https://github.com/<your-gh>/yearn-finance-v3.git
  

• Set origin to your fork. This is where you push your changes to. This is done automatically by the step above.

  git remote add origin https://github.com/<your-gh>/yearn-finance-v3
  

• Set upstream to original repo.

  git remote add upstream https://github.com/yearn/yearn-finance-v3.git
  

• Create .env file in root directory of repo then copy contents of .env.example to .env

  cp .env.example .env
  

  • REACT_APP_INFURA_PROJECT_ID should remain blank because we are currently using Alchemy as our provider
  • REACT_APP_ALCHEMY_API_KEY alchemy api key should be provided by the contributor if he hits api limits

Making Changes

• Create a new local branch from upstream/develop for each PR that you will submit

  git fetch
  git checkout -b <your branch name> upstream/develop
  

• Commit your changes as you work

  git add .
  git commit -S -m "message"
  

  • info about verified commits

Pushing Changes to your Repo

• Commits are squashed when PR is merged so rebasing is optional
• When ready to push

  git fetch
  git merge upstream/develop
  git push origin <branch-name>
  

Submitting Pull Request

• Go to your GitHub and navigate to your forked repo
• Click on Pull requests and then click on New pull request
• Click on compare across forks
• Click on compare: and select branch that you want to create a pull request for then click on create pull request

Development

yarn dev

or for Windows:

yarn dev-win

• To enable Dev Mode set REACT_APP_ALLOW_DEV_MODE=true in your .env
• Wallet Address Override can be activated by navigating to Settings in the app and clicking Enable Dev Mode

Production

yarn build
yarn start

Translations

We use i18n react with locize cli to update/download translations.

Refer to main repo for documentation: https://github.com/locize/locize-cli

Sync with: yarn syncDevLocales must provide api key

Check sync changes with: yarn checkDevLocales

Download prod locales with: yarn downloadProdLocales

yearn-finance-v3's Issues

fix: error warning about memory leak

Describe the bug
After dom render, this error appears (see 1st screen shot below for specifics) "can't perform React state update on an unmounted component."

Possible problem: the img library to add opacity animation (see 2nd screen shot below)

Probably is trying to do some logic before the element is rendered/mounted

To Reproduce

Expected behavior
no errors should occur after render

Screenshots
1st screen, for error specifics

possible investigation point

Environment Information

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

fix: tw.card img [WEB-1371]

Describe the bug
When yearn.finance/#/vaults is linked (e.g. in twitter if you link the site) the thumbnail icon isn't showing up

To Reproduce
Steps to reproduce the behavior:

1. go to twitter
2. post link to yearn.finance/#/vaults

Expected behavior
A thumbnail of yearn should show up on all links

Screenshots
Displays the blank "gray paper" instead of a nice thumbnail (like notion)

Environment Information

Additional context

Yearn/Unstoppable Domains Login Integration w/ Blocknative

Elevator Pitch
Login with Unstoppable allows 300k+ users to log in to dapps with their human readable NFT domain (like brian.crypto) username as opposed to a cryptocurrency address. Compatible with Blocknative, integration lift is small.

Customer Value
Increased usability for the 300k+ users who have a UD and over 2m+ NFT domains that have been distributed.
UD is happy to do a "free domain drop" to give any Yearn user a UD for free ($40 value/user)
Users can use their domain to login to 60+ other dapps (Number growing), and for different use cases across 150+ apps (like receiving crypto to brian.crypto).

Definition of Done
User can connect their wallet to Yearn by clicking the "Login with Unstoppable" button on wallet connect and follows the procedure shown in screenshots below.

Design Approach
https://docs.unstoppabledomains.com/login-with-unstoppable/login-integration-guides/bnc-onboard-guide

Additional Context
UD login can be interacted with live on Cook Finance on their wallet connect to see login flow in realtime: https://app.cook.finance
Login flow video: https://twitter.com/unstoppableweb/status/1480903642932826123?s=21
BNC onboard guide using Blocknative: https://docs.unstoppabledomains.com/login-with-unstoppable/login-integration-guides/bnc-onboard-guide
List of current integrations (Over 150): https://unstoppabledomains.com/apps

Vault deposits on the Fantom Opera network do not show on vaults overview page unless clicked on first

Describe the bug
When I connect to yearn.finance on Fantom Opera and go to the https://yearn.finance/#/vaults page, I can see a value for my holdings, but I don't see a list of my deposits.

If I click into the vaults I know that I have deposited in and then go back to the previous page, then the vault will show.

For example if I go to https://yearn.finance/#/vault/0x0A0b23D9786963DE69CB2447dC125c49929419d8 for the MIM vault and then back to https://yearn.finance/#/vaults, I will now see a deposits section:

To Reproduce
Steps to reproduce the behavior:

1. Deposit into a vault such as the MIM vault on yearn.finance using the fantom network
2. Click on vaults
3. Notice that you don't have a deposit section showing your deposit.
4. Click the MIM vault to go to its detail pages.
5. Hit "back to previous page" and notice you can now see your deposit in the MIM vault.

Expected behavior
My MIM vault deposits should always show on the vaults page.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment Information

• Device: Desktop
• OS: Windows 10
• Browser: Edge
• Version 98.0.1100.3 (Official build) dev (64-bit)

Additional context
I also discussed this in the YFI Web telegram chat

[WEB-1148-437] fix: Blocknative API causing roadblock

https://t.me/c/1152055703/18232

Appears that blocknativeAPI, when exceeded daily limit, blocks transactions

Style Footer UI [WEB-845]

Elevator Pitch
Style Footer Links and Icons

Customer Value
Better UI design

Definition of Done

• Change provided logos on footer and add missing ones.
• Center elements in mobile view and fit nicely in rows
• Use available theme colors to set default lighter contrast, and darker color when on hover.

Design Approach
Add provided assets (Remove fill color from svg) and remove old ones.
Refactor client/components/app/Footer component as needed.

Additional Context
Should look like:
Download Icons

On hover reference:

fix: vault details performance card

Describe the bug
If there is only 1 data point for "perfomance" in the vault details page, it provides no details and just shows a single dot on a blank grid.

To Reproduce
Steps to reproduce the behavior:

1. Go to yearn.finance/vaults

2. Click on Curve alETh, Curve EURT, or Curve TUSD

3. performance card should only show the 1 data point with no context or grid.

Expected behavior
When a single harvest/data point is available, don't display graph. Only "earnings over time" amount.

Screenshots

vs

Environment Information

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Hide Token Dust In Wallet View [WEB-711]

Elevator Pitch:
Add toggle to show/hide tokens with dust balance in their wallets.

Customer Value:
Users want to be able to hide tokens with small balance from appearing in their wallet view, as it clutters the view and cant really invest with them.

Definition of Done:

• A toggle should be displayed in the Token Card of the Wallet page.
  
• By default, dust balance of tokens should be hidden (value <$10).
• On toggle click, dust tokens should display/hide in the Token Card.
• Dust amount should be configurable by value in USD.

Design Approach:

• Add a DUST_AMOUNT_USD as string in src/config/constants.
• Refactor src/client/components/app/DetailCard so that it allows a custom filter condition.
  • Add an optional filterBy prop function.
  • Render Toggle component when prop exists.
  • Handle filterEnabled state in DetailCard component.
• Custom filterLabel can also be provided.
• Add needed props to TokensCard component in route/wallet , filtering by balanceUsdc > DUST_AMOUNT_USD

fix: lint errors on modal

Describe the bug
During investigation of double approve came across new lint errors revolving around loading the modal

To Reproduce
Steps to reproduce the behavior:

1. Open the modal and some errors will pop out.
   Ex:
   

fix: tally wallet connection

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior (please include screenshots):

1. install Tally wallet extension

2. navigate to yearn.finance

3. attempt to connect wallet

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment Information

• Device: [e.g. iPhone6]
• OS: windows 10
• Browser both chrome and firefox tested (side note I had MetaMask extension installed but disabled on both.)
• Version [e.g. 22]

Additional context

This issue is closed by #546

fix: vault details page approve button

Describe the bug
When user loads the website directly on Vaults Detail View, fetching of token allowance is being made before the wallet is connect. This results in the fetch throwing an error so the app never gets the user allowance correctly. This is the reason why we will always display the Approve token button as enabled since logic doesnt have the allowance value.

To Reproduce
Steps to reproduce the behavior:

1. Identify a vault that you know you have approve the underlying token to deposit.
2. Navigate to that vaults detail view by clicking on it from the vaults list.
3. Once inside the Detail View, refresh the web
   Note: on redux dev tools you will find that the action getTokenAllowance got rejected with error: WALLET NOT CONNECTED.
   You should use the dev build that has redux logging enabled: https://develop.d27dgpz01hmbvx.amplifyapp.com/#/vaults

Expected behavior

• We should fetch getTokenAllowance successfully after wallet is connected.
• Approve button should be displayed as disabled and deposit button enabled.

Screenshots


Note: on the second image we can see that we are dispatching getTokenAllowace before walletChange action

Environment Information

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

[WEB-1214-446] Move Yearn.finance CI/CD from aplify to IPFS

the tldr: "make a github action to deploy and pin yearn.finance to IPFS every time the master branch gets updated

via github action, vercel, or fleek

we’re using AWS amplify which id like to change ASAP. for front end:

• Should deploy to IPFS so FE integrity can be independently verified
• CI/CD should be public so anyone/devs can easily review and fix build errors (right now only a couple people with AWS amplify access can debug)

fix: pSLPyvboost-eth

Describe the bug
pSLPyvBOOST-ETH. deposit card doesn't display

To Reproduce
Steps to reproduce the behavior:

1. Go to yearn.finance (etherum chain)
2. Go to labs
3. click deposit on pslpyvboost-eth

Expected behavior
a card would open up for deposit

Screenshots

Upon entry

after clicking deposit

expected outcome:

Environment Information

Additional context
Add any other context about the problem here.

feat: Shared Components for both lab's and vault's details view

Elevator Pitch
For future details pages, we should have shared components between labs and vaults to easily create details page

Customer Value
a consistent users experience across the site

Definition of Done
labs and vaults both share components

Design Approach
Approach and considerations to build the task list / Existing code patterns in production code base that you will base your work off of.

Additional Context

github PR that should help with context

fix: APY for curve rocket messes up UI

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. go to yearn.finance
2. navigate to vaults tab
3. Highest APY ui is broken
4. go into curve rocket "vault details"
5. ui is messy there as well

Expected behavior
UI should not be broken by APY

Screenshots
If applicable, add screenshots to help explain your problem.

Environment Information

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

[WEB-1331-476] WebApp whitescreens when depositing on FTM using CB Wallet

Describe the bug
Deposits on YFI WebApp using Coinbase Wallet on iOS do not work when on the Fantom network.

ETH deposits work fine, and I can successfully see my FTM balances (DAI and CRV), as well as supply DAI, but once I hit the deposit button on either DAI or CRV the WebApp crashes and whitescreens until I refresh the page in Coinbase Wallet.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://yearn.finance/#/wallet within the official Coinbase Wallet App on iOS
2. Select the Fantom network in the drop down at the top. You will be prompted to change CB Wallet to the Fantom network if you haven’t already.
3. Verify your balances of depositable currencies as correct for the FTM Opera chain
4. Click the deposit button next to one of these currencies

Expected behavior
WebApp allows you to deposit the same way it works with ETH (ETH chain deposits are successful following these same steps)

Environment Information

• Device: iPhone 13 Pro
• OS: iOS 15.4
• Browser: Coinbase Wallet Browser
• Version Coinbase Wallet 25.7.552

feat: vault details page for all Lab vaults

Elevator Pitch
We need a vault details page specifically for labs.

Customer Value
Customers would be able to see the contract link and get a better idea of what the heck veCRV , yvboost, and teh pickle jar is all about.

Definition of Done
When clicked either in the "Highest APY" card or "opportunities" card, should link to the Vault Details Page

Design Approach
Approach and considerations to build the task list / Existing code patterns in production code base that you will base your work off of.

Additional Context

fix: vaults from the labs page do not read overrides from yearn-meta

Describe the bug
yvBoost apy is overriden in meta - https://github.com/yearn/yearn-meta/blob/master/data/vaults/1/0x9d409a0A012CFbA9B15F6D4B36Ac57A46966Ab9a.json

however it's not being used for displaying the apy %

To Reproduce
Steps to reproduce the behavior:

1. Go to labs screen
2. View yvboost
3. See error

Expected behavior
Data is read from yearn meta so that apys are overriden if necessary

Environment Information

• Web/Brave

fix: exit button after deposit/withdraw from Vault Details View refactor

Elevator Pitch
The exit button in the vault details transaction, should be DONE not EXIT.

This button appears after a successful transaction in the vault details.

In the modals, the button is ok and should be keep like that.

The ideal solution would be to send to the tx component, a prop with the endTransactionButtonActionType or something like that, as endTransactionButtonActionType: 'exit' | 'done' .

In the modal, the exit button should close the modal (this works fine).

In the vault details, the done button it should just reset it.

Customer Value
The tx modal stuck in vault details after a successful tx doesn't look good,

Definition of Done
-After a tx, the modal resets

Design Approach

Additional Context
https://linear.app/yearn/issue/WEB-851/exit-button-after-depositwithdraw-from-vault-detail-view-refactor

Bug in Network selection (top right of home page)

Describe the bug
This happened when I tried to connect to my fantom wallet and then change the network to ethereum using the dropdown button on the top right of the page. The network just wouldn't change to ethereum.
There is an error in the logs : o.wallet.provider.request is not a function

To Reproduce
Steps to reproduce the behavior:

1. Go to https://yearn.finance/#/home
2. Click on 'Ethereum' to open the dropdown button then select fandom
3. Do as if you wanted to connect a wallet ( I did that with ledger ) but do not connect anything. Then cancel (dismiss button).
4. Try to select Ethereum back in dropdown button
5. You should notice the error

Expected behavior
You should be able to select Ethereum.

Screenshots
The dropdown button I am referencing is this :

The console error I get is this :

Environment Information

• OS: Ubuntu 20.04.3 LTS
• Browser Google Chrome Version 96.0.4664.110 (Official Build) (64-bit)

[WEB-1348-480] test 2 please delete me

please delete me.

fix: exit button for "curve lock" modal

Describe the bug
for the lab yveCRV lock, the modal that pops up doesn't have an exit button

To Reproduce
When you are on ethereum network for yearn.finance

1. Go to Labs

2. Click on Lock (only on yveCRV vault)

3. No exit button

Expected behavior
There should be an exit button (like image below)

Screenshots
What it does look like

fix: cUSDC ui possible decimal mistake

Describe the bug
user has reported over $50,000 in cUSDC on wallet page when only 500 was deposited.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
UI should display actual value of wallet.

Screenshots

Environment Information
Mobile device

Additional context
Add any other context about the problem here.

cusdc has 8 decimals, usdc has 6 afaik. A 2 decimal mistake would turn $500 into $50000

[WEB-1355-483] fix: site hangs with frame in MM mode

Describe the bug
When in metamask mode the site hangs on login/auth wallet
the frame not detected properly
https://t.me/c/1152055703/21429

To Reproduce
n/a

Expected behavior
n/a

Screenshots
n/a

Environment Information
n/a

Additional context
n/a

[WEB-1347-479] test issue 1

fix: ETH deposit modal not showing up

Describe the bug
The eth deposit modal is not showing up in some cases (i believe if you don't have ETH in wallet?)

To Reproduce
Steps to reproduce the behavior:

1. Yearn.finance (eth mainnet)

2. vaults

3. eth (if you already have some deposited)

4. Deposit button (no modal appears)

Expected behavior
deposit modal should appear.

Screenshots
If applicable, add screenshots to help explain your problem.

https://drive.google.com/file/d/1h476xsO50yg_cnjn_y1iMbcfubiRiH7S/view?usp=sharing

Environment Information

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Redacted

[redacted]

[WEB-1356-484] feat: zap approval on withdraw

Elevator Pitch
When you withdraw to a different token, you need to approve a zap. Seem like wasted, improved by using permit there

Customer Value
save 1 zap

Definition of Done
customer doesn't have to approve zap on withdraw

Design Approach
n/a

Additional Context
https://t.me/c/1152055703/21091

feat: Add apy to selectSUmmaryData selector for labs

Elevator Pitch
Add APY for the vaults holdings section

Customer Value
Right now, this is the returned data for selectSummaryData selector for labs:

return {
totalDeposits: totalDeposited.toString(),
totalEarnings: '0',
estYearlyYeild: '0',
};

But we need to add apy per request of the design team as:

The holdings value is the totalDeposits, so we are only missing the APY value in the selector.

Definition of Done
the APY is displayed through code

Design Approach
Approach and considerations to build the task list / Existing code patterns in production code base that you will base your work off of.

Additional Context
Screenshots, UI/UX designs, links or other that will help implementing the feature.

feat: MetaMask add token button should add vault token

Elevator Pitch
Currently, when you add token through the metamask button on vaults overview page it prompts for the token you are going to deposit, not the yVault token you recieve.

Customer Value
Will show the vault token in wallet after deposit, which may assure the user "funds are safu"
Whatever token they are depositing should already be in their wallet.

Definition of Done
Upon clicking MM add button on anywhere should add the vault token.

Design Approach

Additional Context
These metamask buttons, wherever they are found (vaults and labs)

This should be the ySushi token

accessibility: inputs have name, id, label

Elevator Pitch
Each input should have a name, and ID, and a label

Definition of Done
Each input should have a name, and ID, and a label

Design Approach
All form inputs have explicit labels
Checklist item A-3 from uk accessibility standards

Additional Context
please check with @pentcle and/or @turtlemoji for additional UI details

Improve simulations user facing errors

Elevator Pitch
Errors while simulating deposit are very generic and does not give users clear information about what went wrong. This also makes it harder for debugging when a user reports a bug (see image attached)

Customer Value
This will allow the users to have better information about why a simulation might be failing, even notifying them if some error coudl be fixed by them directly, so it could reduce also the number of support requests that we get.

Definition of Done

• Handle custom error types and codes for simulation coming from sdk
• Show specific error regarding each error code on a simulation fail

Design Approach
The idea is to have the errors thrown by the SDK to have the following structure:

{
  error_code: string, // The specific error code that happened
  error_type: string, // Where the error originated from (zapper, contracts, tenderly, sdk own error, etc)
  message: string // Default message to show to the user in case it is not being handled
  data: any, // metadata that might come with the error
}

Also the SDK should export error types for each type of error, like ZapperError, this would allow us to also type which error_codes are accepted. (See https://medium.com/geekculture/how-to-strongly-type-try-catch-blocks-in-typescript-4681aff406b9 for more information about how to strong type errors from exceptions)
Additional Context
Screenshots, UI/UX designs, links or other that will help implementing the feature.

[WEB-1290-466] test to github

I created this in linear

Link to Block Explorer on Vault Detail Page [WEB-856]

Elevator Pitch
Add link to the block explorer of the vault address on the vault detail page.

Customer Value
Users can have an accessible link to the block explorer site in the vault detail page.

Definition of Done

• Add block explorer link icon to the vault detail page view.
• Link should open in a new tab.
• Link should open correct block explorer for the currently selected network.
  • Etherscan for Ethereum
  • Ftmscan for Fantom
• Icon should change to corresponding one of the network.

Design Approach
Add blockExplorerUrl property to NETWORK_SETTINGS on src/config/constants
Refactor VaultDetailPanels component to render icon.
Use currentNetwork on routes/VaultDetail as a new prop for VaultDetailPanels

Additional Context

Etherscan SVG here
FTMScan SVG here
Use this icon as default one for other networks we might add in the future.

fix: unhandled error message on vault pages

Describe the bug
With no wallet connected...
there's a yellow-orange non-human-readable warning message displayed in the Deposit section of the vault.

To Reproduce
Steps to reproduce the behavior:

1. Go to yearn.finance with no wallet connected.
2. Click on Vaults
3. Click on any vault such as Curve Rocket Pool
4. Notice the big yellow-orange box on the right.

Expected behavior
A helpful, human readable message is displayed such as "please connect your wallet".

Screenshots

Environment Information

• Device: desktop
• OS: Big Sur 11.5.2
• Browser: Chrome
• Version: 100.0.4896.88

Additional context
This is the text within the warning:

AT HTTPS://YEARN.FINANCE/STATIC/JS/22.9BFB98DF.CHUNK.JS:2:59884\N AT SE.OBJECT.ASSIGN.PENDING (HTTPS://YEARN.FINANCE/STATIC/JS/22.9BFB98DF.CHUNK.JS:2:60432)\N AT HTTPS://YEARN.FINANCE/STATIC/JS/22.9BFB98DF.CHUNK.JS:2:53208\N AT HTTPS://YEARN.FINANCE/STATIC/JS/MAIN.CED0CAFC.CHUNK.JS:8:132603\N AT HTTPS://YEARN.FINANCE/STATIC/JS/MAIN.CED0CAFC.CHUNK.JS:8:132780\N AT JU (HTTPS://YEARN.FINANCE/STATIC/JS/22.9BFB98DF.CHUNK.JS:2:1858344)\N AT T.UNSTABLE_RUNWITHPRIORITY (HTTPS://YEARN.FINANCE/STATIC/JS/22.9BFB98DF.CHUNK.JS:2:1876155)"}

feat: add Huobi wallet

Elevator Pitch
Add Huobi wallet to our list of supported wallets

Customer Value
Huobi wallet users

Definition of Done
Huobi wallets can connect to site

Design Approach
Approach and considerations to build the task list / Existing code patterns in production code base that you will base your work off of.

Additional Context
Screenshots, UI/UX designs, links or other that will help implementing the feature.

yvBOOST withdraw amount is incorrect in withdraw modal

Describe the bug
In the new v3 UI, when withdrawing yvBOOST, the UI shows the vault share amount, not the claimable yveCRV equivalent amount.

The v2 UI works correctly.

To Reproduce
Steps to reproduce the behavior:

1. Go to Labs
2. Click on withdraw of yvBOOST
3. Click "MAX" in "From Vault"
4. See that the "To Wallet" amount in the UI does not match the amount in the Labs summary list.

feat: create a test build for PR

Elevator Pitch
While investigating a quick fix error, we noticed two previous releases weren't published. We'd like a github action to test for lint error and test a build for PR's

deploy failed since we cant see our recent changes in prod, need to have an alert so we can notice if this happens again

Github action to check for lint error

Customer Value
Benefits that will be achieved.

Definition of Done
Github action checks build doesnt fail after every push in a PR

Design Approach
Approach and considerations to build the task list / Existing code patterns in production code base that you will base your work off of.

Additional Context
Screenshots, UI/UX designs, links or other that will help implementing the feature.

fix: yeild under modal displaying 0

Elevator Pitch
When a new vault is created or introduced, no historical pricing is available. The Modal that presents "yield" % will show 0, should be listed as NEW (reflecting the vaults page)

Customer Value
Wont scare people with a 0% apy

Definition of Done
when website is loaded, the yield will display NEW (with the little star emoji)

Design Approach
Approach and considerations to build the task list / Existing code patterns in production code base that you will base your work off of.

Additional Context
Screenshots, UI/UX designs, links or other that will help implementing the feature.

Notification Banner [WEB-1032]

Elevator Pitch
App should display important news/events through a page banner

Customer Value
Users are informed with custom messages directly through the site

Definition of Done

• Banner component is rendered in all app routes.
• Banner supports 'info' | 'warning' | 'critical' states.
• Banner displays the top most non-dismissed active message available.
• Message can be dismissed by user to display next message.
• Messages support markdown.

Design Approach
Create src/client/data/notificationMessages.json, with the following structure:

[
  id: number,
  type: 'info' | 'warning' | 'critical',
  active: boolean,
  message: 'Welcome to <b>Yearn Finance<b>'
]

Add new notifications module to store, with

• getNotificationMessages(), executes on initApp and imports json file and filters active messages, then reducer updates state based on users current persisted dismissed messages.
• dismissMessage(messageId), sets message status to dismissed.

Include notifications module to persistConfig in core/frameworks/redux to persist state on localstorage.
Create a Banner functional component in common/components that supports receiving a children component.
Create a NotificationBanner component in containers, and use a selector for accessing the first non-dismissed active message. Use Markdown common component.
Import container to all main routes.

Additional Context
UI/UX will be provided once a contributor starts a draft PR.

Metamask button to add token on Vault Detail [WEB-743]

Elevator Pitch:
On the Vault detail view we need to add a button for the user to add the vault underlying token to his/her wallet.

Customer Value:
Users will be able to add the underlying token of vaults to their wallets.

Definition of Done:

• Metamask button displayed if wallet connected and wallet in use is metamask
• On click a metamask window should pop with the option of add the token
• addToken method managed from Onboard.ts

Design Approach:
This button will always be visible no matter if the user already has the token added. We will not check for user wallet tokens.

The button will appear only if Wallet Connected && Wallet is Metamask :

• Wallet is connected: On the parent component routes/VaultDetail you will use the walletSelectors.selectWalletIsConnected to check if wallet is connected or not, and pass the prop to the child component to display or not the button.
• Wallet is metamask: On the parent component routes/VaultDetail you will use the walletSelectors.selectWalletName to check if wallet name is 'Metamask', and pass the prop to the child component to display or not the button.

The logic to add the token should be on the component VaultDetailPanel. You should import and use the AppContext to have access to the context variable. Context variable will have the wallet property inside. The idea is to add a new method on context.wallet called addToken . This new addToken method should be added on Onboard.ts and should receive the needed parameters to make the call to add the new token (check metamask doc for reference on how to make the call: https://docs.metamask.io/guide/registering-your-token.html#example). Notice that inside Onboard.ts you will have access to the provider property that is the one used on metamask as: provider.request(…)

fix: $0 TVL incorrect

Describe the bug
The vault Curve YFI-ETH is currently displaying as $0 despite having holders of the token.

To Reproduce
Steps to reproduce the behavior (for yfi-eth)

1. yearn.finance

2. Navigate to ethereum network

3. go to vaults, scroll down to yfi-eth

4. see $0 total asset

5. go to etherscan, then token tracker

6. https://etherscan.io/token/0x790a60024bC3aea28385b60480f15a0771f26D09

there are users with funds in vault

Expected behavior
If there are funds in the vault, that TVL should be displayed

Screenshots

Environment Information

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

feat: add link to blog on yearn.finance in footer

Elevator Pitch
Add a link to the blog in the footer of the main page at https://yearn.finance

Customer Value
This will expose more users to the blog and help them stay more informed about news and updates.

Definition of Done

• The link is displayed in the footer.
• Clicking the link takes the user to https://blog.yearn.finance/

Design Approach

• The distance between footer links is closer than before (see images below).
• The layout should adjust properly for mobile sizes. Notice currently there are 3 diff layout styles as the page width reduces.
• Font face, size, and color should match the other footer links.

Additional Context

feat: vault details links open in new window/tab

Elevator Pitch
Current vault details links (example https://curve.fi) open in current window.
We would like them to open in either a new tab or window

Customer Value
Keep users on yearn.finance

Definition of Done
when link is clicked on site, link opens in different tab or window, not in the current one.

Design Approach
Approach and considerations to build the task list / Existing code patterns in production code base that you will base your work off of.

Additional Context
Screenshots, UI/UX designs, links or other that will help implementing the feature.

NFT Owner Access [WEB-1025]

Elevator Pitch
Yearn NFT owners might have special access to features

Customer Value
Community can enjoy personalized custom features

Definition of Done

• NFT balances are fetched for current selected address and stored in redux state
• Woofy NFT balance is available in state
• Blue Pill NFT balance is available in state
• State clears on wallet disconnect

Design Approach

• Add getNftBalance(address) to UserService.ts that fetches both Woofy and Blue Pill NFT balance.
• Add new user module in redux store, with an nft object to handle key-value pairs for each NFT and balance.
• Create selectUserWoofyBalance and selectUserBluePillBalance selectors
• Add an effect hook on Layout container to execute actions on wallet change event.

Additional Context
Woofy and The Blue Pill NFTs

Gnosis Safe App Support [WEB-852]

Elevator Pitch
Users can access v3 beta site as a Gnosis Safe App

Customer Value
Gnosis Safe users can interact with Yearn v3 site.

Definition of Done

• Web app Manifest is is complete, with information similar to v2
• App can be added as a custom app through Gnosis Safe App
• Gnosis Safe wallet connects and lets users navigate app and transactions can be executed successfully.

Design Approach
Use this Guide and follow the instructions needed to get app running as a Gnosis Safe App.
Refactor the manifest.json using Yearn colors and assets needed. Use v2 as a guide and improve it by looking what other DeFi projects have added in theirs.
Gnosis wallet should already be compatible with the Onboard.ts wallet implementation.
Make a PR so that a preview build gets automatically generated and be able to test with link provided.

Fix: Holdings Sum and Earned Amount not showing on ftm

Describe the bug
As you can see in the image below it doesn't seem to be showing a users earned amount nor their balance.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://yearn.finance/#/vaults on ftm network, if you have a balance in a ftm vault
2. See error

Expected behavior
You should see your holdings total and the amount you earned in each vault

Screenshots

Environment Information

• Device: Computer
• OS: Windows
• Browser Vivalid
• Version 5.1.2567.73

feat: accessibility updates for UI

Elevator Pitch
Some themes and titles are missing or inconsistent from objects for accessibility users (screen readers, etc.)

Customer Value
will benefit users who use screen readers (or potentially others I haven't thought of.)

Definition of Done
A screen reader could easily scroll through our site. Hopefully any accessibility user would be able to access our site.

Design Approach
Approach and considerations to build the task list / Existing code patterns in production code base that you will base your work off of.

Additional Context
Screenshots, UI/UX designs, links or other that will help implementing the feature.

fix: Lint warning

Describe the bug
Supported_langs is assigned a value but never used
interface is defined but never used
contractfunction is defined but never used

To Reproduce

Expected behavior
No errors in lint

Screenshots

Environment Information

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

fix: rainbow - wallet connect mobile

Describe the bug
Rainbow wallet on mobile isn't playing well with yearn.finance

To Reproduce
Steps to reproduce the behavior:

1. On a mobile device (potentially on desktop as well?) connect to yearn.finance
2. Connect a Rainbow wallet
3. open a transaction modal (depsoit or withdraw)
4. doesn't work

Expected behavior
Should be able to conduct transactions with rainbow wallet on mobile

Screenshots

Environment Information

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.