Skip to content

Commit

Permalink
feat: use query args
Browse files Browse the repository at this point in the history
  • Loading branch information
Majorfi committed Oct 17, 2023
1 parent bce898d commit cb4561c
Show file tree
Hide file tree
Showing 11 changed files with 340 additions and 291 deletions.
13 changes: 1 addition & 12 deletions apps/common/contexts/useYearn.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
import {createContext, memo, useContext, useEffect, useMemo} from 'react';
import {createContext, memo, useContext, useMemo} from 'react';
import {STACKING_TO_VAULT} from '@vaults/constants/optRewards';
import {toast} from '@yearn-finance/web-lib/components/yToast';
import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID';
import {useLocalStorage} from '@yearn-finance/web-lib/hooks/useLocalStorage';
import {toAddress} from '@yearn-finance/web-lib/utils/address';
import {useFetch} from '@common/hooks/useFetch';
import {useYDaemonStatus} from '@common/hooks/useYDaemonStatus';
import {yDaemonEarnedSchema} from '@common/schemas/yDaemonEarnedSchema';
import {yDaemonPricesChainSchema} from '@common/schemas/yDaemonPricesSchema';
import {Solver} from '@common/schemas/yDaemonTokenListBalances';
Expand Down Expand Up @@ -66,9 +63,7 @@ const YearnContext = createContext<TYearnContext>({
});

export const YearnContextApp = memo(function YearnContextApp({children}: {children: ReactElement}): ReactElement {
const {safeChainID} = useChainID();
const {yDaemonBaseUri: yDaemonBaseUriWithoutChain} = useYDaemonBaseURI();
const result = useYDaemonStatus({chainID: safeChainID});
const {address, currentPartner} = useWeb3();
const [zapSlippage, set_zapSlippage] = useLocalStorage<number>('yearn.fi/zap-slippage', DEFAULT_SLIPPAGE);
const [zapProvider, set_zapProvider] = useLocalStorage<TSolver>('yearn.fi/zap-provider', Solver.enum.Cowswap);
Expand All @@ -77,12 +72,6 @@ export const YearnContextApp = memo(function YearnContextApp({children}: {childr
true
);

useEffect((): void => {
if (result?.error?.code === 'ERR_NETWORK') {
toast({type: 'error', content: 'AxiosError: Network Error'});
}
}, [result?.error?.code]);

const {data: prices} = useFetch<TYDaemonPricesChain>({
endpoint: `${yDaemonBaseUriWithoutChain}/prices/all`,
schema: yDaemonPricesChainSchema
Expand Down
2 changes: 1 addition & 1 deletion apps/common/hooks/useBalance.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export function useBalance({
return source?.[toAddress(address)] || toNormalizedBN(0);
}
return getBalance({address: toAddress(address), chainID: chainID});
}, [source, getBalance, address]);
}, [source, getBalance, address, chainID]);

return balance;
}
10 changes: 5 additions & 5 deletions apps/common/hooks/useMultichainBalances.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ async function getBalances(
** This hook can be used to fetch balance information for any ERC20 tokens.
**************************************************************************/
export function useBalances(props?: TUseBalancesReq): TUseBalancesRes {
const {address: userAddress, isActive, provider} = useWeb3();
const {address: userAddress, isActive} = useWeb3();
const chainID = useChainId();
const {onLoadStart, onLoadDone} = useUI();
const [nonce, set_nonce] = useState(0);
Expand Down Expand Up @@ -213,7 +213,7 @@ export function useBalances(props?: TUseBalancesReq): TUseBalancesRes {
** send in a worker.
**************************************************************************/
const onUpdate = useCallback(async (): Promise<TChainTokens> => {
if (!userAddress || !provider) {
if (!userAddress) {
return {};
}
const tokenList = deserialize(stringifiedTokens) || [];
Expand Down Expand Up @@ -289,7 +289,7 @@ export function useBalances(props?: TUseBalancesReq): TUseBalancesRes {
onLoadDone();

return updated;
}, [onLoadDone, onLoadStart, provider, stringifiedTokens, userAddress]);
}, [onLoadDone, onLoadStart, stringifiedTokens, userAddress]);

/* 🔵 - Yearn Finance ******************************************************
** onUpdateSome takes a list of tokens and fetches the balances for each
Expand Down Expand Up @@ -400,7 +400,7 @@ export function useBalances(props?: TUseBalancesReq): TUseBalancesRes {
** to fetch the balances, preventing the UI to freeze.
**************************************************************************/
useAsyncTrigger(async (): Promise<void> => {
if (!isActive || !userAddress || !provider) {
if (!isActive || !userAddress) {
return;
}
set_status({
Expand Down Expand Up @@ -439,7 +439,7 @@ export function useBalances(props?: TUseBalancesReq): TUseBalancesRes {
}
onLoadDone();
set_status({...defaultStatus, isSuccess: true, isFetched: true});
}, [stringifiedTokens, isActive, userAddress, provider, onLoadStart, updateBalancesCall, onLoadDone]);
}, [stringifiedTokens, isActive, userAddress, onLoadStart, updateBalancesCall, onLoadDone]);

const contextValue = useMemo(
(): TUseBalancesRes => ({
Expand Down
91 changes: 24 additions & 67 deletions apps/vaults/components/ListHero.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {useMemo} from 'react';
import {ALL_CATEGORIES} from '@vaults/contexts/useAppSettings';
import {IconArbitrumChain} from '@yearn-finance/web-lib/icons/chains/IconArbitrumChain';
import {IconBaseChain} from '@yearn-finance/web-lib/icons/chains/IconBaseChain';
import {IconEtherumChain} from '@yearn-finance/web-lib/icons/chains/IconEtherumChain';
Expand All @@ -11,111 +12,67 @@ import type {ReactElement} from 'react';
import type {TMultiSelectOptionProps} from '@common/components/MultiSelectDropdown';

type TListHero = {
categories: string;
selectedChains: string;
categories: string[];
chains: number[];
searchValue: string;
set_categories: (categories: string) => void;
set_selectedChains: (chains: string) => void;
onChangeCategories: (categories: string[]) => void;
onChangeChains: (chains: number[]) => void;
onSearch: (searchValue: string) => void;
};

export function ListHero({
categories,
set_categories,
onChangeCategories,
searchValue,
selectedChains,
chains,
onSearch,
set_selectedChains
onChangeChains
}: TListHero): ReactElement {
const chainsFromJSON = useMemo((): number[] => JSON.parse(selectedChains || '[]') as number[], [selectedChains]);
const categoriesFromJSON = useMemo((): string[] => JSON.parse(categories || '[]') as string[], [categories]);

const chainOptions = useMemo((): TMultiSelectOptionProps[] => {
return [
{
label: 'Ethereum',
value: 1,
isSelected: chainsFromJSON.includes(1),
isSelected: chains.includes(1),
icon: <IconEtherumChain />
},
{
label: 'OP Mainnet',
value: 10,
isSelected: chainsFromJSON.includes(10),
isSelected: chains.includes(10),
icon: <IconOptimismChain />
},
{
label: 'Fantom',
value: 250,
isSelected: chainsFromJSON.includes(250),
isSelected: chains.includes(250),
icon: <IconFantomChain />
},
{
label: 'Base',
value: 8453,
isSelected: chainsFromJSON.includes(8453),
isSelected: chains.includes(8453),
icon: <IconBaseChain />
},
{
label: 'Arbitrum One',
value: 42161,
isSelected: chainsFromJSON.includes(42161),
isSelected: chains.includes(42161),
icon: <IconArbitrumChain />
}
];
}, [chainsFromJSON]);
}, [chains]);

const categoryOptions = useMemo((): TMultiSelectOptionProps[] => {
const options: TMultiSelectOptionProps[] = [];

options.push({
value: 'Holdings',
label: 'Holdings',
isSelected: categoriesFromJSON.includes('Holdings')
});
// options.push({
// value: 'Featured Vaults',
// label: 'Featured',
// isSelected: categoriesFromJSON.includes('Featured Vaults')
// });
options.push({
value: 'Crypto Vaults',
label: 'Crypto',
isSelected: categoriesFromJSON.includes('Crypto Vaults')
});
options.push({
value: 'Stables Vaults',
label: 'Stables',
isSelected: categoriesFromJSON.includes('Stables Vaults')
});
options.push({
value: 'Curve Vaults',
label: 'Curve',
isSelected: categoriesFromJSON.includes('Curve Vaults')
});
options.push({
value: 'Balancer Vaults',
label: 'Balancer',
isSelected: categoriesFromJSON.includes('Balancer Vaults')
});
options.push({
value: 'Boosted Vaults',
label: 'Boosted',
isSelected: categoriesFromJSON.includes('Boosted Vaults')
});
options.push({
value: 'Velodrome Vaults',
label: 'Velodrome',
isSelected: categoriesFromJSON.includes('Velodrome Vaults')
});
options.push({
value: 'Aerodrome Vaults',
label: 'Aerodrome',
isSelected: categoriesFromJSON.includes('Aerodrome Vaults')
});

const options: TMultiSelectOptionProps[] = Object.entries(ALL_CATEGORIES).map(
([key, value]): TMultiSelectOptionProps => ({
value: key,
label: value,
isSelected: categories.includes(key)
})
);
return options;
}, [categoriesFromJSON]);
}, [categories]);

return (
<div className={'flex flex-col items-start justify-between space-x-0 px-4 pb-2 pt-4 md:px-10 md:pb-8 md:pt-10'}>
Expand All @@ -129,7 +86,7 @@ export function ListHero({
const selectedChains = options
.filter((o): boolean => o.isSelected)
.map((option): number => Number(option.value));
set_selectedChains(JSON.stringify(selectedChains));
onChangeChains(selectedChains);
}}
/>
</div>
Expand All @@ -143,7 +100,7 @@ export function ListHero({
const selectedCategories = options
.filter((o): boolean => o.isSelected)
.map((option): string => String(option.value));
set_categories(JSON.stringify(selectedCategories));
onChangeCategories(selectedCategories);
}}
/>
</div>
Expand Down
20 changes: 12 additions & 8 deletions apps/vaults/components/list/VaultsListEmpty.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {ALL_CATEGORIES, ALL_CHAINS, useAppSettings} from '@vaults/contexts/useAppSettings';
import {ALL_CATEGORIES_KEYS, ALL_CHAINS, useAppSettings} from '@vaults/contexts/useAppSettings';
import {Button} from '@yearn-finance/web-lib/components/Button';
import {isZero} from '@yearn-finance/web-lib/utils/isZero';

Expand All @@ -9,14 +9,18 @@ export function VaultsListEmpty({
sortedVaultsToDisplay,
currentCategories,
currentChains,
onChangeCategories,
onChangeChains,
isLoading
}: {
sortedVaultsToDisplay: TYDaemonVaults;
currentCategories: string[];
currentChains: number[];
onChangeCategories: (value: string[]) => void;
onChangeChains: (value: number[]) => void;
isLoading: boolean;
}): ReactElement {
const {searchValue, category, set_category, set_selectedChains} = useAppSettings();
const {searchValue} = useAppSettings();

if (isLoading && isZero(sortedVaultsToDisplay.length)) {
return (
Expand All @@ -34,7 +38,7 @@ export function VaultsListEmpty({
!isLoading &&
isZero(sortedVaultsToDisplay.length) &&
currentCategories.length === 1 &&
currentCategories.includes('Holdings')
currentCategories.includes('holdings')
) {
return (
<div className={'mx-auto flex h-96 w-full flex-col items-center justify-center px-10 py-2 md:w-3/4'}>
Expand All @@ -50,7 +54,7 @@ export function VaultsListEmpty({
return (
<div className={'mx-auto flex h-96 w-full flex-col items-center justify-center gap-4 px-10 py-2 md:w-3/4'}>
<b className={'text-center text-lg'}>{'No data, reeeeeeeeeeee'}</b>
{category === 'All Vaults' ? (
{currentCategories.length === ALL_CATEGORIES_KEYS.length ? (
<p className={'text-center text-neutral-600'}>{`The vault "${searchValue}" does not exist`}</p>
) : (
<>
Expand All @@ -60,8 +64,8 @@ export function VaultsListEmpty({
<Button
className={'w-full md:w-48'}
onClick={(): void => {
set_category(ALL_CATEGORIES);
set_selectedChains(ALL_CHAINS);
onChangeCategories(ALL_CATEGORIES_KEYS);
onChangeChains(ALL_CHAINS);
}}>
{'Search all vaults'}
</Button>
Expand All @@ -82,8 +86,8 @@ export function VaultsListEmpty({
<Button
className={'w-full md:w-48'}
onClick={(): void => {
set_category(ALL_CATEGORIES);
set_selectedChains(ALL_CHAINS);
onChangeCategories(ALL_CATEGORIES_KEYS);
onChangeChains(ALL_CHAINS);
}}>
{'Search all vaults'}
</Button>
Expand Down
37 changes: 14 additions & 23 deletions apps/vaults/contexts/useAppSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,34 @@ import {useSessionStorage} from '@yearn-finance/web-lib/hooks/useSessionStorage'

import type {ReactElement} from 'react';

export const ALL_CATEGORIES =
'["Holdings","Crypto Vaults","Stables Vaults","Curve Vaults","Balancer Vaults","Boosted Vaults","Velodrome Vaults","Aerodrome Vaults"]';
export const ALL_CHAINS = '[1,10,250,8453,42161]';
export const ALL_CATEGORIES = {
holdings: 'Holdings',
crypto: 'Crypto Vaults',
stables: 'Stables Vaults',
curve: 'Curve Vaults',
balancer: 'Balancer Vaults',
boosted: 'Boosted Vaults',
velodrome: 'Velodrome Vaults',
aerodrome: 'Aerodrome Vaults'
};
export const ALL_CATEGORIES_KEYS = Object.keys(ALL_CATEGORIES);
export const ALL_CHAINS = [1, 10, 250, 8453, 42161];

export type TAppSettingsContext = {
category: string;
selectedChains: string;
searchValue: string;
shouldHideDust: boolean;
shouldHideLowTVLVaults: boolean;
onSwitchHideDust: VoidFunction;
onSwitchHideLowTVLVaults: VoidFunction;
set_category: (v: string) => void;
set_searchValue: (v: string) => void;
set_selectedChains: (v: string) => void;
};
const defaultProps: TAppSettingsContext = {
category: '',
selectedChains: '[1]',
searchValue: '',
shouldHideDust: false,
shouldHideLowTVLVaults: false,
onSwitchHideDust: (): void => undefined,
onSwitchHideLowTVLVaults: (): void => undefined,
set_category: (): void => undefined,
set_searchValue: (): void => undefined,
set_selectedChains: (): void => undefined
set_searchValue: (): void => undefined
};

const AppSettingsContext = createContext<TAppSettingsContext>(defaultProps);
Expand All @@ -43,8 +44,6 @@ export const AppSettingsContextApp = memo(function AppSettingsContextApp({
* @deprecated Use use-query-params instead
*/
const [searchValue, set_searchValue] = useSessionStorage('yearn.fi/[email protected]', '');
const [category, set_category] = useSessionStorage('yearn.fi/[email protected]', ALL_CATEGORIES);
const [selectedChains, set_selectedChains] = useSessionStorage('yearn.fi/[email protected]', ALL_CHAINS);
const [shouldHideDust, set_shouldHideDust] = useLocalStorage('yearn.fi/[email protected]', false);
const [shouldHideLowTVLVaults, set_shouldHideLowTVLVaults] = useLocalStorage('yearn.fi/[email protected]', false);

Expand All @@ -57,22 +56,14 @@ export const AppSettingsContextApp = memo(function AppSettingsContextApp({
onSwitchHideDust: (): void => set_shouldHideDust(!shouldHideDust),
shouldHideLowTVLVaults,
onSwitchHideLowTVLVaults: (): void => set_shouldHideLowTVLVaults(!shouldHideLowTVLVaults),
category,
selectedChains,
searchValue,
set_category,
set_searchValue,
set_selectedChains
set_searchValue
}),
[
shouldHideDust,
shouldHideLowTVLVaults,
category,
selectedChains,
searchValue,
set_category,
set_searchValue,
set_selectedChains,
set_shouldHideDust,
set_shouldHideLowTVLVaults
]
Expand Down
Loading

0 comments on commit cb4561c

Please sign in to comment.