Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: v3 Vaults About Section #422

Merged
merged 3 commits into from
Nov 15, 2023
Merged

refactor: v3 Vaults About Section #422

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
01dd549
feat: Add new vaults about page
karelianpie Nov 13, 2023
6db1f4e
feat: Add about page menu
karelianpie Nov 15, 2023
9b2d84a
chore: yarn.lock
karelianpie Nov 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion apps/vaults-v3/constants/menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,4 @@
export const VAULTS_V3_MENU = [{path: '/vaults-v3', label: 'Vaults'}];
export const VAULTS_V3_MENU = [
{path: '/vaults-v3', label: 'Vaults'},
{path: '/vaults-v3/about', label: 'About'}
];
161 changes: 161 additions & 0 deletions pages/vaults-v3/about.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
import {Balancer} from 'react-wrap-balancer';
import {Wrapper} from '@vaults/Wrapper';

import type {NextRouter} from 'next/router';
import type {ReactElement} from 'react';

function About(): ReactElement {
return (
<section className={'mt-4 grid w-full grid-cols-1 gap-10 pb-10 md:mt-20 md:grid-cols-2'}>
{/* Yearn? DeFi? I think I'm lost… */}
<div className={'w-full bg-neutral-100 p-10'}>
<div
aria-label={"Yearn? DeFi? I think I'm lost…"}
className={'flex flex-col pb-6'}>
<h2 className={'text-3xl font-bold'}>{"Yearn? DeFi? I think I'm lost…"}</h2>
</div>
<div aria-label={"Yearn? DeFi? I think I'm lost… details"}>
<Balancer>
<p className={'pb-4 text-neutral-600'}>
{
"Searching for 'words that rhyme with turn' and accidentally ended up here? Welcome! You're at the frontier of Decentralised Finance - a new type of financial system built on blockchains and designed to give users better access, transparency and control of their assets."
}
</p>
<p className={'pb-4 text-neutral-600'}>
{
'DeFi offers many opportunities to put your digital assets to work, and earn yield in return - and Yearn was designed to automate this process for you. Less sharp suits and slicked back hair, more cyberspace yield ninjas wielding razor sharp battle tested code katanas.'
}
</p>
<p className={'text-neutral-600'}>
{
"We can't offer you a phone number with ambient jazz hold music to listen to - but please feel free to hop into our "
}
<a
href={'https://discord.com/invite/6PNv2nF'}
target={'_blank'}
className={'text-neutral-900 underline'}
rel={'noreferrer'}>
{'discord'}
</a>
{" if you have any questions, we'd love to chat."}
</p>
</Balancer>
</div>
</div>

{/* Wtf is a Vault? */}
<div className={'w-full bg-neutral-100 p-10'}>
<div
aria-label={'Wtf is a Vault?'}
className={'flex flex-col pb-6'}>
<h2 className={'text-3xl font-bold'}>{'Wtf is a Vault?'}</h2>
</div>
<div aria-label={'Wtf is a Vault? details'}>
<Balancer>
<p className={'pb-4 text-neutral-600'}>
{
"In 'traditional finance' (boo, hiss) you can earn yield on your savings by depositing them in a bank - who use the capital for loans and other productive money growing means."
}
</p>
<p className={'pb-4 text-neutral-600'}>
{
"Yearn Vaults are like crypto allocators in cyberspace. You deposit your assets, and Yearn's smart contracts put them to work within the DeFi ecosystem, returning the earned yield back to you."
}
</p>
<p className={'pb-4 text-neutral-600'}>
{
'However, unlike a bank account - none of this takes place behind closed doors (no offence to doors). Decentralised Finance uses public blockchains, meaning you are in control of your assets and can see where they are at all times. Nothing is hidden and everything is auditable by anyone, at any time.'
}
</p>
<p className={'font-bold text-neutral-600'}>
{
'With the advent of v3, Vaults can now be made out of a single strategy for your assets, or a collection of multiple strategies which balance your funds between them. Users now have more control over where they want their funds to go and a wider range of risk appetites. Go you!'
}
</p>
</Balancer>
</div>
</div>

{/* Fees */}
<div className={'w-full bg-neutral-100 p-10'}>
<div
aria-label={'Fees'}
className={'flex flex-col pb-6'}>
<h2 className={'text-3xl font-bold'}>{'Fees'}</h2>
</div>
<div aria-label={'Fees'}>
<p className={'pb-4 text-neutral-600'}>
<Balancer>
{
"Yearn vaults never have a deposit or withdrawal fee (yay). With Yearn v3, it's up to the strategist(s) who code the strategy to set the performance and management fee, so make sure you check the fees on the Vault you want to deposit into. Butterfly guy, is this due dilligence?"
}
</Balancer>
</p>
</div>
</div>

{/* Risk Score */}
<div className={'w-full bg-neutral-100 p-10'}>
<div
aria-label={'Risk Score'}
className={'flex flex-col pb-6'}>
<h2 className={'text-3xl font-bold'}>{'Risk Score'}</h2>
</div>
<div aria-label={'Risk Score details'}>
<Balancer>
<p className={'pb-4 text-neutral-600'}>
{
'In order to give users the best risk-adjusted yields in DeFi, Yearn uses a comprehensive risk assessment framework for each strategy within a Vault. This framework combines to give each Vault a holistic Risk Score.'
}
</p>
<p className={'pb-4 text-neutral-600'}>
{
'Strategies are assessed against eight different factors; Audit, Code Review, Complexity, Longevity, Protocol Safety, Team Knowledge, Testing Score, TVL Impact. Since Vaults use multiple strategies, riskier strategies can be paired with more conservative ones to ensure the Vault has a robust and balanced Risk Score.'
}
</p>
<p className={'pb-4 font-bold text-neutral-600'}>
{
'One significant advancement in v3 is that the protocol allows for riskier strategies and Vaults to be created for users with a higher risk appetite. Make sure to bear this in mind when depositing into those riskier Vaults'
}
</p>
<p className={'text-neutral-600'}>
{'For a full breakdown read more about our '}
<a
href={'https://docs.yearn.fi/resources/risks/risk-score'}
target={'_blank'}
className={'text-neutral-900 underline'}
rel={'noreferrer'}>
{'Risk Scores'}
</a>
{'.'}
</p>
</Balancer>
</div>
</div>

{/* APY */}
<div className={'w-full bg-neutral-100 p-10'}>
<div
aria-label={'APY'}
className={'flex flex-col pb-6'}>
<h2 className={'text-3xl font-bold'}>{'APY'}</h2>
</div>
<div aria-label={'APY'}>
<p className={'pb-4 text-neutral-600'}>
<Balancer>
{
"Vaults display a Net APY (or Annual Percentage Yield), which is the average APY of the past month's harvest. For more detailed information on how APYs are calculated, visit our docs."
}
</Balancer>
</p>
</div>
</div>
</section>
);
}

About.getLayout = function getLayout(page: ReactElement, router: NextRouter): ReactElement {
return <Wrapper router={router}>{page}</Wrapper>;
};

export default About;
21 changes: 1 addition & 20 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7390,13 +7390,6 @@ next-pwa@^5.6.0:
workbox-webpack-plugin "^6.5.4"
workbox-window "^6.5.4"

next-query-params@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/next-query-params/-/next-query-params-4.3.0.tgz#62cf9297005a66ebc5b0823c3c66d77971ec87b5"
integrity sha512-8w8AXfPJ8vnYvSFBCByT5ZR8ItNSJ6lAbVer8aRZZRUpADZAR6hQ4dh7fLDs/6383DU0Ve7WvNHqswMR8S98zg==
dependencies:
tslib "^2.0.3"

next-seo@^6.4.0:
version "6.4.0"
resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-6.4.0.tgz#05a75b8acae881f856eb690b1f66b5e8741aa16e"
Expand Down Expand Up @@ -8709,11 +8702,6 @@ serialize-javascript@^6.0.1:
dependencies:
randombytes "^2.1.0"

serialize-query-params@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/serialize-query-params/-/serialize-query-params-2.0.2.tgz#598a3fb9e13f4ea1c1992fbd20231aa16b31db81"
integrity sha512-1chMo1dST4pFA9RDXAtF0Rbjaut4is7bzFbI1Z26IuMub68pNCILku85aYmeFhvnY//BXUPUhoRMjYcsT93J/Q==

set-blocking@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
Expand Down Expand Up @@ -9583,7 +9571,7 @@ [email protected], tslib@^1.9.0:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==

tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.1, tslib@^2.4.0:
tslib@^2.0.0, tslib@^2.1.0, tslib@^2.3.1, tslib@^2.4.0:
version "2.6.2"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
Expand Down Expand Up @@ -9813,13 +9801,6 @@ use-callback-ref@^1.3.0:
dependencies:
tslib "^2.0.0"

use-query-params@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/use-query-params/-/use-query-params-2.2.1.tgz#c558ab70706f319112fbccabf6867b9f904e947d"
integrity sha512-i6alcyLB8w9i3ZK3caNftdb+UnbfBRNPDnc89CNQWkGRmDrm/gfydHvMBfVsQJRq3NoHOM2dt/ceBWG2397v1Q==
dependencies:
serialize-query-params "^2.0.2"

use-sidecar@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
Expand Down
Loading