Beefy is a Decentralized, Multichain Yield Optimizer that allows its users to earn compound interest on their crypto holdings. Beefy earns you the highest APYs with safety and efficiency in mind.
Home Page: https://app.beefy.com
Both the individual selectors and the container break down on smaller screens.
Just need to add a Typography element, and read from /bifibuyback endpoint in API
What the title says. Charts currently have dummy data. We should connect them to real data.
Within a vault's page there's a "How is it calculated?" button. It currently does nothing. It should lead to our docs, a section explaining the safety score.
There is a doc that outlines the score here. We should add it to the docs somewhere and link it. It can probably be improved a bit to be more intuitive for users.
Go over the entire app and make sure that the CSS looks as sharp as possible. Review mobile/desktop, various popular browsers, etc.
Right now when we enter a vault page of a vault with a different chain than our connected chain, it asks us to change network. This means that we can't really see the details of vaults from different chains without constantly switching networks.
It's not technically necessary for you to be connected to a chain until you take an action, the app already works like this. What do we think about delaying network switch request in the flow until the user tries to take an action?
If the vault chain is different from current chain then just show the deposit/withdraw buttons as "Switch network".
Current
Target
The name should not change to 'Beefy risk score'.
The tooltip should have a text of: 'The purpose of the safety score is to educate users when making a decision to enter a particular Beefy vault. The Safety Score is not necessarily perfect, but it is another tool that helps the user. The safety score that a vault can get goes from 1 to 10. The best possible score is 10 and the worst is 0.'
The graph from an individual vault's page is missing some styling.
Design reference: https://www.figma.com/file/rM0nDDYA042Z4WpOdV0vf4/Deep-Work-x-Beefy?node-id=49%3A2
We need to add a small tooltip explaining the safety score, in the vault list
Hide balance button toggle to blur balances/sensitive data
The original design intended to display a separation of vault balance between what the user deposited and their yield. We're going to implement this feature post-launch. Remove the components from the UI and possibly add something to fill the space if it looks too empty.
Add a little bit of styling to the global TVL in the vault list.
The design from DeepWorks didn't include it, so we have to improvise. But maybe a little bit of padding and size will be enough.
Just simple expand toggle of portfolio as per design using AnimateHeight same as Homepage filter button toggle.
In the deposit/withdraw widget in the vault page there is a small "?" that should open a tooltip.
The tooltip provides more info on the fee breakdown.
Design reference: https://www.figma.com/file/rM0nDDYA042Z4WpOdV0vf4/Deep-Work-x-Beefy?node-id=72%3A5731
We now have a SafetyScore to inform users of possible risks each vault has. An explanation behind the design of the score can be found in this document.
Even though the score is implemented, most vaults don't have any type of risk data at the moment. We should fill out data for at least the last 20-30 vaults to show off the feature and its benefits.
The only modifications needed are within the vault config files. Vaults now have an extra array called "risks". That array has to be populated by risk qualities that the vault has. The keys to add should be taken from the risks.js file.
An example of a filled out vault is the BSC BIFI Maxi:
{
id: 'bifi-maxi',
...
risks: ['COMPLEXITY_LOW', 'BATTLE_TESTED', 'IL_NONE', 'MCAP_MEDIUM', 'AUDIT', 'CONTRACTS_VERIFIED'],
...
}
Port the feature/component that brknrobot did to save time and effort when adding vault images.
'Top Gainers' and 'Recently Added' currently filter out all vaults. We can replace those tags for other useful and commonly used filters. I don't know exactly what 'Top Gainers' should filter.
Insted have some warning in the console like this
The idea is get this
Tip : We can use alt+shitft+o to remove all the unused imports, vars, etc...
Show deposited vaults from all chains using the rpc connections (walletReducer.rpc['bsc'] or heco etc.) available and the connected address of user (walletReducer.address).
Port the boost from v1 with additional changes:
The new vault page design has a component for users to play around and see how much yield they stand to earn.
Design reference: https://www.figma.com/file/rM0nDDYA042Z4WpOdV0vf4/Deep-Work-x-Beefy?node-id=49%3A2
In the boost widget within the vault page there is a small "?". Clicking on it should open up a tooltip with some text explaining a little bit what a boost is and what to do.
When you're scrolling through vaults in the home page and click on one, it doesn't reset scroll position to top. This means that you land on the vault detail page at an awkward position. We should bring the browser back to top when navigating to a vault.
The last modal of the Deposit and Withdraw has a few little details missing.
On both Deposit and Withdrawal flows "Go to my portfolio" should lead to the vault list (With the portfolio open if possible).
On both Deposit and Withdrawal flows the asset name in the modal is missing compared with the design. I think it's a little clearer if we add it:
My deposit:
Modal I got:
There is how the vaults cards looks like in mobile view
BeefyV2 displays what the estimated cost of using a vault will be. This helps smaller users estimate the total cost of using a vault. There are times where withdrawing can be too expensive for some users and it's better if they know it beforehand.
The mobile display is great now, but on larger screens those two stats are sticking a little bit too close to each other. I would maintain the same distance between the 4 stats on mid/large screens.
Vaults where a user has made a deposit should look a little different in the main vault list.
In the image, the first vault has a user deposit and the second one doesn't
In the Figma, the vault items have a small CTA that directs to the vault page. It'd be good to add it in case some people find "Deposit" as too threatening.
I know that having two CTAs directing to the same thing is not ideal. Eventually the 'Deposit' CTA will open a quick overlay to do deposits without having to lead the vault page.
We can hide the 'See Details' CTA in the mobile screen if it's redundant given the screen size.
Especially now that beefyv2 will be running all chains in the same instance, it could be a good time to start showing overall beefy stats (Overall TVL, overall BIFI buyback)
This filter doesn't seem to be working at the moment.
Add the historical rate chart on the homepage vault list
instead of using a <a/> tag to display the community audited and audited
We can use a <Box/> component from Material ui and don't get more the error
From this
To This
Large Screen:
Mid/Small Screen:
While we're at it, we should finish adapting the styles to the design ones:
Design reference:
https://www.figma.com/file/rM0nDDYA042Z4WpOdV0vf4/Deep-Work-x-Beefy?node-id=208%3A286
Need to setup "react-i18next" translations throughout the templates
I'm having to solve some indent conflicts on most merges, it'd be good to add husky to make sure all commits have the same code style.
We now have descriptive texts explaining the various strategies implemented. The template texts can be found in stratText.js.
I filled out a template for the most popular LP strat. We should add templates for a few other popular strategies, like the single asset recursive supply/borrow strat. Or a reward pool farming strat.
We need to add data to the vault config files as well. Vaults should have a field specifying which strategy they implement, like stratType:'StratLP'.
If anyone has another implementation that doesn't require adding to the config files, it could be better. For example the strategies could implement introspection with ERC 165 or similar.
When clicking to enter the vault page of certain vaults, you get a Cannot read property 'eth' of undefined error.
The APY sort in the vault list doesn't seem to be working. It returns the same order as "default" sort.
Currently the "Buy Token" button within a vault page doesn't do anything. We should either hide it initially or port the feature from V1.
Add deposit functionality:
When a user is connected to the wrong network we display a disabled 'Network Change' button. We could enhance it and replicate the functionality of BeefyV1 where we give them a button that says "Switch to network" and lets them easily switch.
We now provide info on the assets involved with a particular vault. For example a MATIC-USDC vault displays information about both MATIC and USDC. This can better inform the user as to whether they want to deposit in a vault or not.
Similar to other new features, even though the feature itself is implemented, we don't have much data. This means that most "TokenCard" components will appear with empty descriptions:
To add data for a token you need to go to the address-book package, and fill out the website and description keys for the token in one of the tokens.ts files
Port the Zap feature
Add the components design and info for Projected yield, Risk, Strategy and Asset details as per design
https://www.figma.com/file/rM0nDDYA042Z4WpOdV0vf4/Deep-Work-x-Beefy?node-id=49%3A2
After the DeepWorks design sprint, we ended up with a landing page with a few extra features.
Design reference: https://www.figma.com/file/rM0nDDYA042Z4WpOdV0vf4/Deep-Work-x-Beefy?node-id=49%3A2
Once the Boost feature is implemented, we need to add that APR to the APY breakdown in the vault page.
There are a few missing from the mobile menu:
Display the correct withdrawal and deposit fees within the deposit widget of the vault page.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.