Skip to content

Commit

Permalink
feat: Add new vaults about page
Browse files Browse the repository at this point in the history
  • Loading branch information
@karelianpie
karelianpie committed Nov 13, 2023
1 parent d181376 commit 01dd549
Showing 1 changed file with 161 additions and 0 deletions.
161 changes: 161 additions & 0 deletions pages/vaults-v3/about.tsx
View file
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;

0 comments on commit 01dd549

Please sign in to comment.