From ef2a9eaec2e08868f3f8ff5712288febe7996c4c Mon Sep 17 00:00:00 2001 From: Karelian Pie Date: Fri, 29 Sep 2023 13:16:31 +0300 Subject: [PATCH] feat: Remove safeChainID, use selected chains --- apps/common/components/ListHero.tsx | 31 +++++++----- .../common/components/MultiSelectDropdown.tsx | 4 +- .../components/details/VaultDetailsHeader.tsx | 4 +- .../details/actions/QuickActionsButtons.tsx | 6 +-- .../details/tabs/VaultDetailsHistorical.tsx | 4 +- .../details/tabs/VaultDetailsStrategies.tsx | 5 +- .../details/tabs/VaultDetailsTabsWrapper.tsx | 6 +-- .../graphs/GraphForStrategyReports.tsx | 15 +++--- .../components/list/VaultsListEmpty.tsx | 36 +++---------- apps/vaults/contexts/useAppSettings.tsx | 11 +++- apps/vaults/contexts/useSolver.tsx | 8 ++- pages/vaults/[chainID]/[address].tsx | 49 +----------------- pages/vaults/index.tsx | 50 ++++++++----------- 13 files changed, 77 insertions(+), 152 deletions(-) diff --git a/apps/common/components/ListHero.tsx b/apps/common/components/ListHero.tsx index 0da64c339..17c4e0189 100644 --- a/apps/common/components/ListHero.tsx +++ b/apps/common/components/ListHero.tsx @@ -31,6 +31,8 @@ export type TListHero = { searchPlaceholder: string; categories: TListHeroCategory[][]; onSelect: (category: T) => void; + selectedChains?: string; + set_selectedChains?: (chains: string) => void; searchValue: string; set_searchValue: (searchValue: string) => void; } @@ -109,40 +111,42 @@ export function ListHero({ categories, onSelect, searchValue, + selectedChains, set_searchValue, + set_selectedChains, switchProps }: TListHero): ReactElement { - // TODO: Use the icons from web-lib - // https://github.com/yearn/web-lib/pull/339 + const chains = JSON.parse(selectedChains || '[]') as number[]; + const OPTIONS = [ { label: 'Ethereum', - value: 'ethereum', - selected: false, + value: 1, + selected: chains.includes(1), icon: }, { label: 'OP Mainnet', - value: 'optimism', - selected: false, + value: 10, + selected: chains.includes(10), icon: }, { label: 'Fantom', - value: 'fantom', - selected: false, + value: 250, + selected: chains.includes(250), icon: }, { label: 'Base', - value: 'base', - selected: false, + value: 8453, + selected: chains.includes(8453), icon: }, { label: 'Arbitrum One', - value: 'arbitrum', - selected: false, + value: 42161, + selected: chains.includes(42161), icon: } ]; @@ -169,7 +173,8 @@ export function ListHero({ options={OPTIONS} placeholder={'Select chain'} onSelect={(options): void => { - console.log({options}); + const selectedChains = options.filter((o): boolean => o.selected).map((option): number => Number(option.value)); + set_selectedChains?.(JSON.stringify(selectedChains)); }} /> diff --git a/apps/common/components/MultiSelectDropdown.tsx b/apps/common/components/MultiSelectDropdown.tsx index 0b43a092c..f83a79c03 100755 --- a/apps/common/components/MultiSelectDropdown.tsx +++ b/apps/common/components/MultiSelectDropdown.tsx @@ -9,7 +9,7 @@ import type {ReactElement} from 'react'; export type TMultiSelectOptionProps = { label: string; - value: string; + value: number | string; selected: boolean; icon?: ReactElement; }; @@ -97,7 +97,7 @@ export function MultiSelectDropdown({ const filteredOptions = query === '' ? currentOptions : currentOptions.filter((option): boolean => { - return option.value.toLowerCase().includes(query.toLowerCase()); + return option.label.toLowerCase().includes(query.toLowerCase()); }); return ( diff --git a/apps/vaults/components/details/VaultDetailsHeader.tsx b/apps/vaults/components/details/VaultDetailsHeader.tsx index c0029de60..b58252d08 100755 --- a/apps/vaults/components/details/VaultDetailsHeader.tsx +++ b/apps/vaults/components/details/VaultDetailsHeader.tsx @@ -1,7 +1,6 @@ import {useMemo} from 'react'; import {useStakingRewards} from '@vaults/contexts/useStakingRewards'; import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3'; -import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID'; import {toAddress} from '@yearn-finance/web-lib/utils/address'; import {toBigInt, toNormalizedBN} from '@yearn-finance/web-lib/utils/format.bigNumber'; import {formatUSD} from '@yearn-finance/web-lib/utils/format.number'; @@ -43,9 +42,8 @@ function VaultHeaderLineItem({label, children, legend}: TVaultHeaderLineItemProp } export function VaultDetailsHeader({vault}: { vault: TYDaemonVault }): ReactElement { - const {safeChainID} = useChainID(); const {address: userAddress} = useWeb3(); - const {yDaemonBaseUri} = useYDaemonBaseURI({chainID: safeChainID}); + const {yDaemonBaseUri} = useYDaemonBaseURI({chainID: vault.chainID}); const {address, apy, tvl, decimals, symbol = 'token', token} = vault; const {data: earned} = useFetch({ endpoint: (address && userAddress) ? `${yDaemonBaseUri}/earned/${userAddress}` : null, diff --git a/apps/vaults/components/details/actions/QuickActionsButtons.tsx b/apps/vaults/components/details/actions/QuickActionsButtons.tsx index f0460d663..4768111ed 100644 --- a/apps/vaults/components/details/actions/QuickActionsButtons.tsx +++ b/apps/vaults/components/details/actions/QuickActionsButtons.tsx @@ -5,7 +5,6 @@ import {useSolver} from '@vaults/contexts/useSolver'; import {useWalletForZap} from '@vaults/contexts/useWalletForZaps'; import {Button} from '@yearn-finance/web-lib/components/Button'; import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3'; -import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID'; import {toAddress} from '@yearn-finance/web-lib/utils/address'; import {MAX_UINT_256} from '@yearn-finance/web-lib/utils/constants'; import {toBigInt, toNormalizedBN} from '@yearn-finance/web-lib/utils/format.bigNumber'; @@ -24,11 +23,10 @@ export function VaultDetailsQuickActionsButtons(): ReactElement { const {refresh: refreshZapBalances} = useWalletForZap(); const {address, provider} = useWeb3(); const {isStakingOpBoostedVaults} = useYearn(); - const {safeChainID} = useChainID(); const [txStatusApprove, set_txStatusApprove] = useState(defaultTxStatus); const [txStatusExecuteDeposit, set_txStatusExecuteDeposit] = useState(defaultTxStatus); const [txStatusExecuteWithdraw, set_txStatusExecuteWithdraw] = useState(defaultTxStatus); - const {actionParams, currentVault, onChangeAmount, maxDepositPossible, isDepositing} = useActionFlow(); + const {actionParams, onChangeAmount, maxDepositPossible, isDepositing} = useActionFlow(); const {onApprove, onExecuteDeposit, onExecuteWithdraw, onRetrieveAllowance, currentSolver, expectedOut, isLoadingExpectedOut, hash} = useSolver(); const isWithdrawing = !isDepositing; @@ -95,13 +93,11 @@ export function VaultDetailsQuickActionsButtons(): ReactElement { ); }, [actionParams?.amount.raw, actions, currentSolver, onApprove]); - const isDiffNetwork = !!safeChainID && currentVault.chainID !== safeChainID; const isButtonDisabled = ( (!address && !provider) || isZero(actionParams.amount.raw) || toBigInt(actionParams.amount.raw) > toBigInt(maxDepositPossible.raw) || isLoadingExpectedOut - || isDiffNetwork ); /* 🔵 - Yearn Finance ****************************************************** diff --git a/apps/vaults/components/details/tabs/VaultDetailsHistorical.tsx b/apps/vaults/components/details/tabs/VaultDetailsHistorical.tsx index 4e17a78ac..e9f04e7e7 100755 --- a/apps/vaults/components/details/tabs/VaultDetailsHistorical.tsx +++ b/apps/vaults/components/details/tabs/VaultDetailsHistorical.tsx @@ -7,7 +7,6 @@ import {GraphForVaultTVL} from '@vaults/components/graphs/GraphForVaultTVL'; import {getMessariSubgraphEndpoint} from '@vaults/utils'; import {Button} from '@yearn-finance/web-lib/components/Button'; import {Renderable} from '@yearn-finance/web-lib/components/Renderable'; -import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID'; import {formatToNormalizedValue, toBigInt} from '@yearn-finance/web-lib/utils/format.bigNumber'; import {formatDate} from '@yearn-finance/web-lib/utils/format.time'; import {isZero} from '@yearn-finance/web-lib/utils/isZero'; @@ -19,11 +18,10 @@ import type {TGraphData, TMessariGraphData} from '@common/types/types'; export function VaultDetailsHistorical({currentVault, harvestData}: {currentVault: TYDaemonVault, harvestData: TGraphData[]}): ReactElement { const isMounted = useIsMounted(); - const {safeChainID} = useChainID(); const [selectedViewIndex, set_selectedViewIndex] = useState(0); const {data: messariMixedData} = useSWR(currentVault.address ? [ - getMessariSubgraphEndpoint(safeChainID), + getMessariSubgraphEndpoint(currentVault.chainID), `{ vaultDailySnapshots( where: {vault: "${currentVault.address.toLowerCase()}"} diff --git a/apps/vaults/components/details/tabs/VaultDetailsStrategies.tsx b/apps/vaults/components/details/tabs/VaultDetailsStrategies.tsx index 861a89eb4..767c51bf3 100755 --- a/apps/vaults/components/details/tabs/VaultDetailsStrategies.tsx +++ b/apps/vaults/components/details/tabs/VaultDetailsStrategies.tsx @@ -4,7 +4,6 @@ import {findLatestApr} from '@vaults/components/details/tabs/findLatestApr'; import {GraphForStrategyReports} from '@vaults/components/graphs/GraphForStrategyReports'; import {yDaemonReportsSchema} from '@vaults/schemas/reportsSchema'; import {Renderable} from '@yearn-finance/web-lib/components/Renderable'; -import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID'; import {IconCopy} from '@yearn-finance/web-lib/icons/IconCopy'; import {toAddress} from '@yearn-finance/web-lib/utils/address'; import {formatToNormalizedValue, toBigInt} from '@yearn-finance/web-lib/utils/format.bigNumber'; @@ -42,8 +41,7 @@ function RiskScoreElement({label, value}: TRiskScoreElementProps): ReactElement } function VaultDetailsStrategy({currentVault, strategy}: TProps): ReactElement { - const {safeChainID} = useChainID(); - const {yDaemonBaseUri} = useYDaemonBaseURI({chainID: safeChainID}); + const {yDaemonBaseUri} = useYDaemonBaseURI({chainID: currentVault.chainID}); const isMounted = useIsMounted(); const riskScoreElementsMap = useMemo((): TRiskScoreElementProps[] => { @@ -163,6 +161,7 @@ function VaultDetailsStrategy({currentVault, strategy}: TProps): ReactElement {
diff --git a/apps/vaults/components/details/tabs/VaultDetailsTabsWrapper.tsx b/apps/vaults/components/details/tabs/VaultDetailsTabsWrapper.tsx index ff2eddf4c..387d62ffd 100755 --- a/apps/vaults/components/details/tabs/VaultDetailsTabsWrapper.tsx +++ b/apps/vaults/components/details/tabs/VaultDetailsTabsWrapper.tsx @@ -8,7 +8,6 @@ import {VaultDetailsHistorical} from '@vaults/components/details/tabs/VaultDetai import {VaultDetailsStrategies} from '@vaults/components/details/tabs/VaultDetailsStrategies'; import {Renderable} from '@yearn-finance/web-lib/components/Renderable'; import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3'; -import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID'; import {IconAddToMetamask} from '@yearn-finance/web-lib/icons/IconAddToMetamask'; import {IconLinkOut} from '@yearn-finance/web-lib/icons/IconLinkOut'; import {toAddress} from '@yearn-finance/web-lib/utils/address'; @@ -150,8 +149,7 @@ function ExplorerLink({explorerBaseURI, currentVaultAddress}: TExplorerLinkProps export function VaultDetailsTabsWrapper({currentVault}: {currentVault: TYDaemonVault}): ReactElement { const {provider} = useWeb3(); - const {safeChainID} = useChainID(); - const {yDaemonBaseUri} = useYDaemonBaseURI({chainID: safeChainID}); + const {yDaemonBaseUri} = useYDaemonBaseURI({chainID: currentVault.chainID}); const [selectedAboutTabIndex, set_selectedAboutTabIndex] = useState(0); async function onAddTokenToMetamask(address: string, symbol: string, decimals: number, image: string): Promise { @@ -210,7 +208,7 @@ export function VaultDetailsTabsWrapper({currentVault}: {currentVault: TYDaemonV
diff --git a/apps/vaults/components/graphs/GraphForStrategyReports.tsx b/apps/vaults/components/graphs/GraphForStrategyReports.tsx index f0e048b7b..039ebc36f 100755 --- a/apps/vaults/components/graphs/GraphForStrategyReports.tsx +++ b/apps/vaults/components/graphs/GraphForStrategyReports.tsx @@ -1,7 +1,6 @@ import {Fragment, useMemo} from 'react'; import {Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts'; import {yDaemonReportsSchema} from '@vaults/schemas/reportsSchema'; -import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID'; import {formatToNormalizedValue, toBigInt} from '@yearn-finance/web-lib/utils/format.bigNumber'; import {formatAmount, formatPercent} from '@yearn-finance/web-lib/utils/format.number'; import {formatDate} from '@yearn-finance/web-lib/utils/format.time'; @@ -14,15 +13,15 @@ import type {TYDaemonVaultStrategy} from '@common/schemas/yDaemonVaultsSchemas'; import type {TYDaemonReport, TYDaemonReports} from '@vaults/schemas/reportsSchema'; export type TGraphForStrategyReportsProps = { - strategy: TYDaemonVaultStrategy, - vaultDecimals: number, - vaultTicker: string - height?: number, + strategy: TYDaemonVaultStrategy; + vaultChainID: number; + vaultDecimals: number; + vaultTicker: string; + height?: number; } -export function GraphForStrategyReports({strategy, vaultDecimals, vaultTicker, height = 127}: TGraphForStrategyReportsProps): ReactElement { - const {safeChainID} = useChainID(); - const {yDaemonBaseUri} = useYDaemonBaseURI({chainID: safeChainID}); +export function GraphForStrategyReports({strategy, vaultChainID, vaultDecimals, vaultTicker, height = 127}: TGraphForStrategyReportsProps): ReactElement { + const {yDaemonBaseUri} = useYDaemonBaseURI({chainID: vaultChainID}); const {data: reports} = useFetch({ endpoint: `${yDaemonBaseUri}/reports/${strategy.address}`, diff --git a/apps/vaults/components/list/VaultsListEmpty.tsx b/apps/vaults/components/list/VaultsListEmpty.tsx index 1bf499da0..0acbb802a 100755 --- a/apps/vaults/components/list/VaultsListEmpty.tsx +++ b/apps/vaults/components/list/VaultsListEmpty.tsx @@ -1,8 +1,6 @@ import {useAppSettings} from '@vaults/contexts/useAppSettings'; import {Button} from '@yearn-finance/web-lib/components/Button'; -import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID'; import {isZero} from '@yearn-finance/web-lib/utils/isZero'; -import {getNetwork} from '@yearn-finance/web-lib/utils/wagmi/utils'; import type {ReactElement} from 'react'; import type {TYDaemonVaults} from '@common/schemas/yDaemonVaultsSchemas'; @@ -16,7 +14,6 @@ export function VaultsListEmpty({ currentCategory: string, isLoading: boolean }): ReactElement { - const {safeChainID} = useChainID(); const {searchValue, category, set_category} = useAppSettings(); if (isLoading && isZero(sortedVaultsToDisplay.length)) { @@ -30,6 +27,7 @@ export function VaultsListEmpty({ ); } + if (!isLoading && isZero(sortedVaultsToDisplay.length) && currentCategory === 'Holdings') { return (
@@ -40,17 +38,7 @@ export function VaultsListEmpty({
); } - if (!isLoading && isZero(sortedVaultsToDisplay.length) && safeChainID !== 1) { - const chainName = getNetwork(safeChainID)?.name || 'this network'; - return ( -
- {'👀 Where Vaults ser?'} -

- {`It seems we don’t have ${currentCategory} on ${chainName} (yet). Feel free to check out other vaults on ${chainName} or change network. New Vaults and strategies are added often, so check back later. Don’t be a stranger.`} -

-
- ); - } + if (!isLoading && isZero(sortedVaultsToDisplay.length)) { return (
@@ -94,8 +82,6 @@ export function VaultsListEmptyFactory({ currentCategory: string, isLoading: boolean }): ReactElement { - const {safeChainID} = useChainID(); - if (isLoading && isZero(sortedVaultsToDisplay.length)) { return (
@@ -106,7 +92,9 @@ export function VaultsListEmptyFactory({
); - } if (!isLoading && isZero(sortedVaultsToDisplay.length) && currentCategory === 'Holdings') { + } + + if (!isLoading && isZero(sortedVaultsToDisplay.length) && currentCategory === 'Holdings') { return (
{'Well this is awkward...'} @@ -115,17 +103,9 @@ export function VaultsListEmptyFactory({

); - } if (!isLoading && isZero(sortedVaultsToDisplay.length) && safeChainID !== 1) { - const chainName = getNetwork(safeChainID)?.name || 'this network'; - return ( -
- {'👀 Where Vaults ser?'} -

- {`It seems we don’t have ${currentCategory} on ${chainName} (yet). Feel free to check out other vaults on ${chainName} or change network. New Vaults and strategies are added often, so check back later. Don’t be a stranger.`} -

-
- ); - } if (!isLoading && isZero(sortedVaultsToDisplay.length)) { + } + + if (!isLoading && isZero(sortedVaultsToDisplay.length)) { return (
{'No data, reeeeeeeeeeee'} diff --git a/apps/vaults/contexts/useAppSettings.tsx b/apps/vaults/contexts/useAppSettings.tsx index 1dcd5ee19..c7146de6e 100755 --- a/apps/vaults/contexts/useAppSettings.tsx +++ b/apps/vaults/contexts/useAppSettings.tsx @@ -6,6 +6,7 @@ import type {ReactElement} from 'react'; export type TAppSettingsContext = { category: string; + selectedChains: string; searchValue: string; shouldHideDust: boolean, shouldHideLowTVLVaults: boolean, @@ -13,22 +14,26 @@ export type TAppSettingsContext = { 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_searchValue: (): void => undefined, + set_selectedChains: (): void => undefined }; const AppSettingsContext = createContext(defaultProps); export const AppSettingsContextApp = memo(function AppSettingsContextApp({children}: {children: ReactElement}): ReactElement { const [category, set_category] = useSessionStorage('yearn.fi/vaults-category', 'All Vaults'); const [searchValue, set_searchValue] = useSessionStorage('yearn.fi/vaults-search', ''); + const [selectedChains, set_selectedChains] = useSessionStorage('yearn.fi/selected-chains', '[1]'); const [shouldHideDust, set_shouldHideDust] = useLocalStorage('yearn.fi/should-hide-dust', false); const [shouldHideLowTVLVaults, set_shouldHideLowTVLVaults] = useLocalStorage('yearn.fi/hide-low-tvl', false); @@ -41,9 +46,11 @@ export const AppSettingsContextApp = memo(function AppSettingsContextApp({childr shouldHideLowTVLVaults, onSwitchHideLowTVLVaults: (): void => set_shouldHideLowTVLVaults(!shouldHideLowTVLVaults), category, + selectedChains, searchValue, set_category, - set_searchValue + set_searchValue, + set_selectedChains }), [shouldHideDust, shouldHideLowTVLVaults, category, searchValue, set_category, set_searchValue, set_shouldHideDust, set_shouldHideLowTVLVaults]); return ( diff --git a/apps/vaults/contexts/useSolver.tsx b/apps/vaults/contexts/useSolver.tsx index c80f95170..a7a3af29b 100644 --- a/apps/vaults/contexts/useSolver.tsx +++ b/apps/vaults/contexts/useSolver.tsx @@ -10,7 +10,6 @@ import {useSolverVanilla} from '@vaults/hooks/useSolverVanilla'; import {useSolverWido} from '@vaults/hooks/useSolverWido'; import {serialize} from '@wagmi/core'; import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3'; -import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID'; import {toAddress} from '@yearn-finance/web-lib/utils/address'; import {toNormalizedBN} from '@yearn-finance/web-lib/utils/format.bigNumber'; import {performBatchedUpdates} from '@yearn-finance/web-lib/utils/performBatchedUpdates'; @@ -22,7 +21,7 @@ import type {TSolver} from '@common/schemas/yDaemonTokenListBalances'; import type {TNormalizedBN} from '@common/types/types'; import type {TInitSolverArgs, TSolverContext, TWithSolver} from '@vaults/types/solvers'; -export const isSolverDisabled = (safeChainID: number): TDict => { +export const isSolverDisabled = (vaultChainID: number): TDict => { return { [Solver.enum.Vanilla]: false, [Solver.enum.PartnerContract]: false, @@ -31,7 +30,7 @@ export const isSolverDisabled = (safeChainID: number): TDict => { [Solver.enum.OptimismBooster]: false, [Solver.enum.Cowswap]: false, [Solver.enum.Wido]: false, - [Solver.enum.Portals]: safeChainID === 10 || false, + [Solver.enum.Portals]: vaultChainID === 10 || false, [Solver.enum.None]: false }; }; @@ -65,7 +64,6 @@ export function WithSolverContextApp({children}: { children: React.ReactElement const wido = useSolverWido(); const vanilla = useSolverVanilla(); const portals = useSolverPortals(); - const {safeChainID} = useChainID(); const chainCoin = useSolverChainCoin(); const partnerContract = useSolverPartnerContract(); const internalMigration = useSolverInternalMigration(); @@ -109,7 +107,7 @@ export function WithSolverContextApp({children}: { children: React.ReactElement }; const isValidSolver = ({quote, solver}: { quote: PromiseSettledResult; solver: TSolver }): boolean => { - return quote.status === 'fulfilled' && (quote?.value.raw > 0n) && !isSolverDisabled(safeChainID)[solver]; + return quote.status === 'fulfilled' && (quote?.value.raw > 0n) && !isSolverDisabled(currentVault.chainID)[solver]; }; switch (currentSolver) { diff --git a/pages/vaults/[chainID]/[address].tsx b/pages/vaults/[chainID]/[address].tsx index b696ab860..f40489398 100755 --- a/pages/vaults/[chainID]/[address].tsx +++ b/pages/vaults/[chainID]/[address].tsx @@ -7,11 +7,8 @@ import {VaultDetailsHeader} from '@vaults/components/details/VaultDetailsHeader' import {ActionFlowContextApp} from '@vaults/contexts/useActionFlow'; import {WithSolverContextApp} from '@vaults/contexts/useSolver'; import {Wrapper} from '@vaults/Wrapper'; -import {yToast} 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 {toAddress} from '@yearn-finance/web-lib/utils/address'; -import {getNetwork} from '@yearn-finance/web-lib/utils/wagmi/utils'; import TokenIcon from '@common/components/TokenIcon'; import {useWallet} from '@common/contexts/useWallet'; import {useYearn} from '@common/contexts/useYearn'; @@ -26,12 +23,9 @@ import type {ReactElement} from 'react'; function Index(): ReactElement | null { const {address, isActive} = useWeb3(); - const {safeChainID} = useChainID(); const {vaults} = useYearn(); const router = useRouter(); const {refresh} = useWallet(); - const {toast, toastMaster} = yToast(); - const [toastState, set_toastState] = useState<{id?: string; isOpen: boolean}>({isOpen: false}); const {yDaemonBaseUri} = useYDaemonBaseURI({chainID: Number(router.query.chainID)}); const [currentVault, set_currentVault] = useState(vaults[toAddress(router.query.address as string)]); const {data: vault, isLoading: isLoadingVault} = useFetch({ @@ -62,29 +56,6 @@ function Index(): ReactElement | null { } }, [currentVault?.address, currentVault?.token?.address, address, isActive, refresh]); - useEffect((): void => { - if (toastState.isOpen) { - if (!!safeChainID && currentVault?.chainID === safeChainID) { - toastMaster.dismiss(toastState.id); - set_toastState({isOpen: false}); - } - return; - } - - if (isActive && !!currentVault && !!safeChainID && currentVault.chainID !== safeChainID) { - const vaultChainName = getNetwork(currentVault.chainID || 1)?.name || 'Unknown'; - const chainName = getNetwork(safeChainID)?.name || 'Unknown'; - - const toastId = toast({ - type: 'warning', - content: getToastMessage({vaultChainName, chainName}), - duration: Infinity - }); - - set_toastState({id: toastId, isOpen: true}); - } - }, [currentVault, currentVault?.chainID, isActive, safeChainID, toast, toastMaster, toastState.id, toastState.isOpen]); - if (isLoadingVault) { return (
@@ -115,8 +86,8 @@ function Index(): ReactElement | null { variants={variants} className={'z-50 -mt-6 h-12 w-12 cursor-pointer md:-mt-36 md:h-[72px] md:w-[72px]'}> + chainID={currentVault.chainID} + token={currentVault.token} /> @@ -133,22 +104,6 @@ function Index(): ReactElement | null { ); } -export function getToastMessage({vaultChainName, chainName}: {vaultChainName?: string, chainName?: string}): string { - if (vaultChainName && chainName) { - return `Please note, this Vault is on ${vaultChainName}. You're currently connected to ${chainName}.`; - } - - if (vaultChainName && !chainName) { - return `Please note, this Vault is on ${vaultChainName} and you're currently connected to a different network.`; - } - - if (!vaultChainName && chainName) { - return `Please note, you're currently connected to ${chainName} and this Vault is on a different network.`; - } - - return 'Please note, you\'re currently connected to a different network than this Vault.'; -} - Index.getLayout = function getLayout(page: ReactElement, router: NextRouter): ReactElement { return ( diff --git a/pages/vaults/index.tsx b/pages/vaults/index.tsx index 6905ab7e8..b10fb0206 100644 --- a/pages/vaults/index.tsx +++ b/pages/vaults/index.tsx @@ -12,7 +12,6 @@ import {Wrapper} from '@vaults/Wrapper'; import {Button} from '@yearn-finance/web-lib/components/Button'; import {Renderable} from '@yearn-finance/web-lib/components/Renderable'; import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3'; -import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID'; import {useSessionStorage} from '@yearn-finance/web-lib/hooks/useSessionStorage'; import {IconChain} from '@yearn-finance/web-lib/icons/IconChain'; import {toAddress} from '@yearn-finance/web-lib/utils/address'; @@ -94,20 +93,22 @@ function HeaderUserPosition(): ReactElement { } function Index(): ReactElement { - const {safeChainID} = useChainID(); + // const {safeChainID} = useChainID(); const {balances, balancesNonce} = useWallet(); const {vaults, vaultsMigrations, vaultsRetired, isLoadingVaultList} = useYearn(); const [sort, set_sort] = useSessionStorage<{sortBy: TPossibleSortBy, sortDirection: TSortDirection}>( 'yVaultsSorting', {sortBy: 'apy', sortDirection: 'desc'} ); - const {shouldHideDust, shouldHideLowTVLVaults, category, searchValue, set_category, set_searchValue} = useAppSettings(); + const {shouldHideDust, shouldHideLowTVLVaults, category, searchValue, selectedChains, set_category, set_searchValue, set_selectedChains} = useAppSettings(); + + const chains = JSON.parse(selectedChains) as number[]; const filterHoldingsCallback = useCallback((address: TAddress): boolean => { balancesNonce; const holding = balances?.[toAddress(address)]; // [Optimism] Check if staked vaults have holdings - if (safeChainID === 10) { + if (chains.includes(10)) { const stakedVaultAddress = STACKING_TO_VAULT[toAddress(address)]; const stakedHolding = balances?.[toAddress(stakedVaultAddress)]; @@ -128,7 +129,7 @@ function Index(): ReactElement { return true; } return false; - }, [balancesNonce, balances, safeChainID, shouldHideDust]); + }, [balancesNonce, balances, chains, shouldHideDust]); const filterMigrationCallback = useCallback((address: TAddress): boolean => { balancesNonce; @@ -147,7 +148,7 @@ function Index(): ReactElement { **********************************************************************************************/ const curveVaults = useFilteredVaults(vaults, ({category}): boolean => category === 'Curve'); const boostedVaults = useFilteredVaults(vaults, ({address}): boolean => { - if (safeChainID !== 10) { + if (chains.includes(10)) { return false; } return OPT_VAULTS_WITH_REWARDS.some((token): boolean => token === address); @@ -163,36 +164,24 @@ function Index(): ReactElement { const categoriesToDisplay = useMemo((): TListHeroCategory[] => { const categories = []; - if ([1, 250, 42161].includes(safeChainID)) { - categories.push({value: 'All Vaults', label: 'All', isSelected: category === 'All Vaults'}); - categories.push({value: 'Featured Vaults', label: 'Featured', isSelected: category === 'Featured Vaults'}); - categories.push({value: 'Crypto Vaults', label: 'Crypto', isSelected: category === 'Crypto Vaults'}); - categories.push({value: 'Stables Vaults', label: 'Stables', isSelected: category === 'Stables Vaults'}); - categories.push({value: 'Curve Vaults', label: 'Curve', isSelected: category === 'Curve Vaults'}); - categories.push({value: 'Balancer Vaults', label: 'Balancer', isSelected: category === 'Balancer Vaults'}); - } + categories.push({value: 'All Vaults', label: 'All', isSelected: category === 'All Vaults'}); + categories.push({value: 'Featured Vaults', label: 'Featured', isSelected: category === 'Featured Vaults'}); + categories.push({value: 'Crypto Vaults', label: 'Crypto', isSelected: category === 'Crypto Vaults'}); + categories.push({value: 'Stables Vaults', label: 'Stables', isSelected: category === 'Stables Vaults'}); + categories.push({value: 'Curve Vaults', label: 'Curve', isSelected: category === 'Curve Vaults'}); + categories.push({value: 'Balancer Vaults', label: 'Balancer', isSelected: category === 'Balancer Vaults'}); - if ([10].includes(safeChainID)) { - categories.push({value: 'All Vaults', label: 'All', isSelected: category === 'All Vaults'}); + if (chains.includes(10)) { categories.push({value: 'Boosted Vaults', label: 'Boosted', isSelected: category === 'Boosted Vaults'}); - categories.push({value: 'Featured Vaults', label: 'Featured', isSelected: category === 'Featured Vaults'}); - categories.push({value: 'Crypto Vaults', label: 'Crypto', isSelected: category === 'Crypto Vaults'}); - categories.push({value: 'Stables Vaults', label: 'Stables', isSelected: category === 'Stables Vaults'}); - categories.push({value: 'Curve Vaults', label: 'Curve', isSelected: category === 'Curve Vaults'}); categories.push({value: 'Velodrome Vaults', label: 'Velodrome', isSelected: category === 'Velodrome Vaults'}); } - if (safeChainID === 8453) { - categories.push({value: 'All Vaults', label: 'All', isSelected: category === 'All Vaults'}); - categories.push({value: 'Featured Vaults', label: 'Featured', isSelected: category === 'Featured Vaults'}); - categories.push({value: 'Crypto Vaults', label: 'Crypto', isSelected: category === 'Crypto Vaults'}); - categories.push({value: 'Stables Vaults', label: 'Stables', isSelected: category === 'Stables Vaults'}); - categories.push({value: 'Curve Vaults', label: 'Curve', isSelected: category === 'Curve Vaults'}); + if (chains.includes(8453)) { categories.push({value: 'Aerodrome Vaults', label: 'Aerodrome', isSelected: category === 'Aerodrome Vaults'}); } return categories; - }, [category, safeChainID]); + }, [category, chains]); /* 🔵 - Yearn Finance ************************************************************************** ** First, we need to determine in which category we are. The vaultsToDisplay function will @@ -200,7 +189,7 @@ function Index(): ReactElement { ** The possible lists are memoized to avoid unnecessary re-renders. **********************************************************************************************/ const vaultsToDisplay = useMemo((): TYDaemonVault[] => { - let _vaultList: TYDaemonVault[] = [...Object.values(vaults || {})] as TYDaemonVault[]; + let _vaultList: TYDaemonVault[] = [...Object.values(vaults || {})].filter((v): boolean => chains.includes(v.chainID)) as TYDaemonVault[]; if (category === 'Curve Vaults') { _vaultList = curveVaults; @@ -322,7 +311,10 @@ function Index(): ReactElement { ]} onSelect={set_category} searchValue={searchValue} - set_searchValue={set_searchValue} /> + selectedChains={selectedChains} + set_selectedChains={set_selectedChains} + set_searchValue={set_searchValue} + /> 0}>