Skip to content

Commit

Permalink
fix: layout
Browse files Browse the repository at this point in the history
  • Loading branch information
Majorfi committed Jul 11, 2024
1 parent 62c1e60 commit 41a0733
Show file tree
Hide file tree
Showing 5 changed files with 235 additions and 118 deletions.
2 changes: 1 addition & 1 deletion apps/common/contexts/useYearn.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {useLocalStorageValue} from '@react-hookz/web';
import {Solver, type TSolver} from '@vaults/types/solvers';
import {useFetchYearnEarnedForUser} from '@yearn-finance/web-lib/hooks/useFetchYearnEarnedForUser';
import {useFetchYearnPrices} from '@yearn-finance/web-lib/hooks/useFetchYearnPrices';
import {useFetchYearnVaults} from '@yearn-finance/web-lib/hooks/useFetchYearnVaults';
import {useFetchYearnVaults} from '@common/hooks/useFetchYearnVaults';

import {useYearnBalances} from './useYearn.helper';

Expand Down
113 changes: 113 additions & 0 deletions apps/common/hooks/useFetchYearnVaults.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import {useFetch} from '@builtbymom/web3/hooks/useFetch';
import {toAddress} from '@builtbymom/web3/utils';
import {useDeepCompareMemo} from '@react-hookz/web';
import {useYDaemonBaseURI} from '@yearn-finance/web-lib/hooks/useYDaemonBaseURI';
import {yDaemonVaultsSchema} from '@yearn-finance/web-lib/utils/schemas/yDaemonVaultsSchemas';

import type {KeyedMutator} from 'swr';
import type {TYDaemonVault, TYDaemonVaults} from '@yearn-finance/web-lib/utils/schemas/yDaemonVaultsSchemas';
import type {TDict} from '@builtbymom/web3/types';

/******************************************************************************
** The useFetchYearnVaults hook is used to fetch the vaults from the yDaemon
** API.
** It will fetch 3 kinds of vaults:
** - The active vaults
** - The vaults that are in the migration process
** - The retired vaults
*****************************************************************************/
function useFetchYearnVaults(chainIDs?: number[] | undefined): {
vaults: TDict<TYDaemonVault>;
vaultsMigrations: TDict<TYDaemonVault>;
vaultsRetired: TDict<TYDaemonVault>;
isLoading: boolean;
mutate: KeyedMutator<TYDaemonVaults>;
} {
const {yDaemonBaseUri: yDaemonBaseUriWithoutChain} = useYDaemonBaseURI();

const {
data: vaults,
isLoading,
mutate
} = useFetch<TYDaemonVaults>({
endpoint: `${yDaemonBaseUriWithoutChain}/vaults?${new URLSearchParams({
hideAlways: 'true',
orderBy: 'featuringScore',
orderDirection: 'desc',
strategiesDetails: 'withDetails',
strategiesRisk: 'withRisk',
strategiesCondition: 'inQueue',
chainIDs: chainIDs ? chainIDs.join(',') : [1, 10, 137, 250, 8453, 42161].join(','),
limit: '2500'
})}`,
schema: yDaemonVaultsSchema
});

// const vaultsMigrations: TYDaemonVaults = useMemo(() => [], []);
const {data: vaultsMigrations} = useFetch<TYDaemonVaults>({
endpoint: `${yDaemonBaseUriWithoutChain}/vaults?${new URLSearchParams({
chainIDs: chainIDs ? chainIDs.join(',') : [1, 10, 137, 250, 8453, 42161].join(','),
migratable: 'nodust'
})}`,
schema: yDaemonVaultsSchema
});

// const vaultsRetired: TYDaemonVaults = useMemo(() => [], []);
const {data: vaultsRetired} = useFetch<TYDaemonVaults>({
endpoint: `${yDaemonBaseUriWithoutChain}/vaults/retired`,
schema: yDaemonVaultsSchema
});

const vaultsObject = useDeepCompareMemo((): TDict<TYDaemonVault> => {
if (!vaults) {
return {};
}
const _vaultsObject = (vaults || []).reduce((acc: TDict<TYDaemonVault>, vault): TDict<TYDaemonVault> => {
if (!vault.migration.available) {
acc[toAddress(vault.address)] = vault;
}
return acc;
}, {});
return _vaultsObject;
}, [vaults]);

const vaultsMigrationsObject = useDeepCompareMemo((): TDict<TYDaemonVault> => {
if (!vaultsMigrations) {
return {};
}
const _migratableVaultsObject = (vaultsMigrations || []).reduce(
(acc: TDict<TYDaemonVault>, vault): TDict<TYDaemonVault> => {
if (toAddress(vault.address) !== toAddress(vault.migration.address)) {
acc[toAddress(vault.address)] = vault;
}
return acc;
},
{}
);
return _migratableVaultsObject;
}, [vaultsMigrations]);

const vaultsRetiredObject = useDeepCompareMemo((): TDict<TYDaemonVault> => {
if (!vaultsRetired) {
return {};
}
const _retiredVaultsObject = (vaultsRetired || []).reduce(
(acc: TDict<TYDaemonVault>, vault): TDict<TYDaemonVault> => {
acc[toAddress(vault.address)] = vault;
return acc;
},
{}
);
return _retiredVaultsObject;
}, [vaultsRetired]);

return {
vaults: vaultsObject,
vaultsMigrations: vaultsMigrationsObject,
vaultsRetired: vaultsRetiredObject,
isLoading,
mutate
};
}

export {useFetchYearnVaults};
4 changes: 2 additions & 2 deletions pages/vaults/[chainID]/[address].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ function Index(): ReactElement | null {
}

return (
<>
<div className={'mx-auto my-0 max-w-6xl pt-4 md:mb-0 md:mt-16'}>
<header className={'pointer-events-none flex w-full items-center justify-center'}>
<motion.div
key={'Vaults'}
Expand Down Expand Up @@ -110,7 +110,7 @@ function Index(): ReactElement | null {
</ActionFlowContextApp>
<VaultDetailsTabsWrapper currentVault={currentVault} />
</section>
</>
</div>
);
}

Expand Down
224 changes: 113 additions & 111 deletions pages/vaults/about.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,126 +2,128 @@ 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'}>
<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 className={'mx-auto my-0 max-w-6xl pt-4 md:mb-0 md:mt-16'}>
<section className={'mt-4 grid w-full grid-cols-1 gap-10 pb-10 md:mt-20 md:grid-cols-2'}>
<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'}>
<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 savings accounts floating in cyberspace. You deposit your assets, and Yearn puts them to work within the DeFi ecosystem, returning the earned yield back to you.'
}
</p>
<p className={'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>
</div>
</div>
<div aria-label={'Wtf is a Vault? details'}>
<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 savings accounts floating in cyberspace. You deposit your assets, and Yearn puts them to work within the DeFi ecosystem, returning the earned yield back to you.'
}
</p>
<p className={'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>
</div>
</div>

<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'}>
<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={'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>
<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'}>
<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={'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>
</div>
</div>
</div>

<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'}>
{
'Yearn vaults never have a deposit or withdrawal fee (yay), and most have no management fee and a mere 10% performance fee. Because we use smart contracts (rather than human money managers with expensive designer drug habits) we’re able to be highly capital efficient and pass almost all earned yield on to you.'
}
</p>
<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'}>
{
'Yearn vaults never have a deposit or withdrawal fee (yay), and most have no management fee and a mere 10% performance fee. Because we use smart contracts (rather than human money managers with expensive designer drug habits) we’re able to be highly capital efficient and pass almost all earned yield on to you.'
}
</p>
</div>
</div>
</div>

<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 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'}>
{
'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.'
}
</p>
</div>
</div>
<div aria-label={'APY'}>
<p className={'pb-4 text-neutral-600'}>
{
'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.'
}
</p>
</div>
</div>

<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'}>
<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>
<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'}>
<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>
</div>
</div>
</div>
</section>
</section>
</div>
);
}

Expand Down
10 changes: 6 additions & 4 deletions pages/vaults/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -259,10 +259,12 @@ function ListOfVaults(): ReactElement {

function Index(): ReactElement {
return (
<section className={'mt-4 grid w-full grid-cols-12 gap-y-10 pb-10 md:mt-20 md:gap-x-10 md:gap-y-20'}>
<HeaderUserPosition />
<ListOfVaults />
</section>
<div className={'mx-auto my-0 max-w-6xl pt-4 md:mb-0 md:mt-16'}>
<section className={'mt-4 grid w-full grid-cols-12 gap-y-10 pb-10 md:mt-20 md:gap-x-10 md:gap-y-20'}>
<HeaderUserPosition />
<ListOfVaults />
</section>
</div>
);
}

Expand Down

0 comments on commit 41a0733

Please sign in to comment.