diff --git a/apps/common/components/Switch.tsx b/apps/common/components/Switch.tsx index 081bb252e..0e233cf90 100644 --- a/apps/common/components/Switch.tsx +++ b/apps/common/components/Switch.tsx @@ -1,11 +1,12 @@ import {useState} from 'react'; import {Switch as HeadlessSwitch} from '@headlessui/react'; +import {cl} from '@yearn-finance/web-lib/utils/cl'; -import type {ReactElement} from 'react'; +import type {KeyboardEvent, ReactElement} from 'react'; type TSwitch = { isEnabled: boolean; - onSwitch?: React.Dispatch>; + onSwitch?: () => void; }; export function Switch(props: TSwitch): ReactElement { @@ -13,24 +14,30 @@ export function Switch(props: TSwitch): ReactElement { const [isEnabledState, set_isEnabledState] = useState(isEnabled); function safeOnSwitch(): void { - if (onSwitch) { - onSwitch(!isEnabled); - } else { - set_isEnabledState(!isEnabledState); + onSwitch ? onSwitch() : set_isEnabledState(!isEnabledState); + } + + const isChecked = onSwitch ? isEnabled : isEnabledState; + + function handleOnKeyDown({key}: KeyboardEvent): void | null { + if (key !== 'Enter') { + return; } + + safeOnSwitch(); } return (
keyCode === 13 ? safeOnSwitch() : null} + onKeyDown={handleOnKeyDown} className={'yearn--next-switch'}> {'Use setting'}
+ className={cl(isChecked ? 'translate-x-[14px]' : 'translate-x-0')} />
); diff --git a/apps/common/contexts/useYearn.tsx b/apps/common/contexts/useYearn.tsx index 4a3cc4379..e9bfaca36 100755 --- a/apps/common/contexts/useYearn.tsx +++ b/apps/common/contexts/useYearn.tsx @@ -35,9 +35,11 @@ export type TYearnContext = { isLoadingVaultList: boolean, zapSlippage: number, zapProvider: TSolver, + isStakingOpBoostedVaults: boolean, mutateVaultList: KeyedMutator, set_zapSlippage: (value: number) => void set_zapProvider: (value: TSolver) => void + set_isStakingOpBoostedVaults: (value: boolean) => void } const YearnContext = createContext({ @@ -55,10 +57,12 @@ const YearnContext = createContext({ isLoadingVaultList: false, zapSlippage: 0.1, zapProvider: Solver.enum.Cowswap, + isStakingOpBoostedVaults: true, // eslint-disable-next-line @typescript-eslint/no-explicit-any mutateVaultList: (): any => undefined, set_zapSlippage: (): void => undefined, - set_zapProvider: (): void => undefined + set_zapProvider: (): void => undefined, + set_isStakingOpBoostedVaults: (): void => undefined }); export const YearnContextApp = memo(function YearnContextApp({children}: { children: ReactElement }): ReactElement { @@ -68,6 +72,7 @@ export const YearnContextApp = memo(function YearnContextApp({children}: { child const {address, currentPartner} = useWeb3(); const [zapSlippage, set_zapSlippage] = useLocalStorage('yearn.fi/zap-slippage', DEFAULT_SLIPPAGE); const [zapProvider, set_zapProvider] = useLocalStorage('yearn.fi/zap-provider', Solver.enum.Cowswap); + const [isStakingOpBoostedVaults, set_isStakingOpBoostedVaults] = useLocalStorage('yearn.fi/staking-op-boosted-vaults', true); useEffect((): void => { if (result?.error?.code === 'ERR_NETWORK') { @@ -165,12 +170,14 @@ export const YearnContextApp = memo(function YearnContextApp({children}: { child set_zapSlippage, zapProvider, set_zapProvider, + isStakingOpBoostedVaults, + set_isStakingOpBoostedVaults, vaults: vaultsObject, vaultsMigrations: vaultsMigrationsObject, vaultsRetired: vaultsRetiredObject, isLoadingVaultList, mutateVaultList - }), [currentPartner?.id, pricesUpdated, tokens, earned, zapSlippage, set_zapSlippage, zapProvider, set_zapProvider, vaultsObject, vaultsMigrationsObject, isLoadingVaultList, mutateVaultList, vaultsRetiredObject]); + }), [currentPartner?.id, pricesUpdated, tokens, earned, zapSlippage, set_zapSlippage, zapProvider, set_zapProvider, isStakingOpBoostedVaults, set_isStakingOpBoostedVaults, vaultsObject, vaultsMigrationsObject, isLoadingVaultList, mutateVaultList, vaultsRetiredObject]); return ( diff --git a/apps/vaults/components/SettingsPopover.tsx b/apps/vaults/components/SettingsPopover.tsx index 5c06f6bd2..366d46cc8 100755 --- a/apps/vaults/components/SettingsPopover.tsx +++ b/apps/vaults/components/SettingsPopover.tsx @@ -1,19 +1,31 @@ import {Fragment, useMemo} from 'react'; import {Popover, Transition} from '@headlessui/react'; import {isSolverDisabled} from '@vaults/contexts/useSolver'; +import {useStakingRewards} from '@vaults/contexts/useStakingRewards'; import {Renderable} from '@yearn-finance/web-lib/components/Renderable'; import {IconSettings} from '@yearn-finance/web-lib/icons/IconSettings'; +import {Switch} from '@common/components/Switch'; import {useYearn} from '@common/contexts/useYearn'; import {Solver} from '@common/schemas/yDaemonTokenListBalances'; import type {ReactElement} from 'react'; import type {TSolver} from '@common/schemas/yDaemonTokenListBalances'; +import type {TYDaemonVault} from '@common/schemas/yDaemonVaultsSchemas'; type TSettingPopover = { - chainID: number + vault: TYDaemonVault } -export function SettingsPopover({chainID}: TSettingPopover): ReactElement { - const {zapProvider, set_zapProvider, zapSlippage, set_zapSlippage} = useYearn(); + +function Label({children}: {children: string}): ReactElement { + return ; +} + +export function SettingsPopover({vault}: TSettingPopover): ReactElement { + const {zapProvider, set_zapProvider, zapSlippage, set_zapSlippage, isStakingOpBoostedVaults, set_isStakingOpBoostedVaults} = useYearn(); + const {stakingRewardsByVault} = useStakingRewards(); + + const {address, chainID} = vault; + const hasStakingRewards = !!stakingRewardsByVault?.[address]; const currentZapProvider = useMemo((): TSolver => { if (chainID !== 1 && zapProvider === 'Cowswap') { @@ -41,8 +53,8 @@ export function SettingsPopover({chainID}: TSettingPopover): ReactElement {
-
- +
+