diff --git a/apps/veyfi/components/RedeemTab.tsx b/apps/veyfi/components/RedeemTab.tsx index ab5fac34a..86ad6e61d 100644 --- a/apps/veyfi/components/RedeemTab.tsx +++ b/apps/veyfi/components/RedeemTab.tsx @@ -91,14 +91,19 @@ export function RedeemTab(): ReactElement { return (
-
+

{'Redeem'}

+
+

+ {'Got dYFI, want YFI? You’ve come to the right place. Redeem dYFI for YFI by paying the redemption cost in ETH. Enjoy your cheap YFI anon.'} +

+
-
+
-
+

{'Claim Rewards'} + {'Redeem'}

+
+

+ {'Select a gauge below and claim any dYFI rewards you’re eligible for. Remember, to earn rewards you must stake your Vault token into the corresponding gauge. '} +

+
-
+
+ +
+
+ + + +
+
+ ); +} diff --git a/apps/veyfi/components/TabManageVeYFI.tsx b/apps/veyfi/components/TabManageVeYFI.tsx new file mode 100644 index 000000000..47cb4a64c --- /dev/null +++ b/apps/veyfi/components/TabManageVeYFI.tsx @@ -0,0 +1,33 @@ +import {useVotingEscrow} from '@veYFI/contexts/useVotingEscrow'; +import {toBigInt, toNormalizedBN} from '@yearn-finance/web-lib/utils/format.bigNumber'; +import {getTimeUntil, toWeeks} from '@yearn-finance/web-lib/utils/time'; + +import {ClaimVeYFI} from './ViewClaimVeYFI'; +import {EarlyExitVeYFI} from './ViewEarlyExitVeYFI'; +import {ExtendLockVeYFI} from './ViewExtendLockVeYFI'; +import {LockVeYFI} from './ViewLockVeYFI'; + +import type {ReactElement} from 'react'; + +export function TabManageVeYFI(): ReactElement { + const {positions} = useVotingEscrow(); + const hasLock = toNormalizedBN(toBigInt(positions?.deposit?.underlyingBalance), 18); + const timeUntilUnlock = positions?.unlockTime ? getTimeUntil(positions?.unlockTime) : undefined; + const weeksToUnlock = toWeeks(timeUntilUnlock); + + return ( +
+ + {(hasLock && weeksToUnlock > 0) ? ( + <> +
+ +
+ +
+ + + ) : null} +
+ ); +} diff --git a/apps/veyfi/components/ClaimTab.tsx b/apps/veyfi/components/ViewClaimVeYFI.tsx similarity index 98% rename from apps/veyfi/components/ClaimTab.tsx rename to apps/veyfi/components/ViewClaimVeYFI.tsx index f5efd3902..3a21755d2 100644 --- a/apps/veyfi/components/ClaimTab.tsx +++ b/apps/veyfi/components/ViewClaimVeYFI.tsx @@ -12,7 +12,7 @@ import {useWallet} from '@common/contexts/useWallet'; import type {ReactElement} from 'react'; -export function ClaimTab(): ReactElement { +export function ClaimVeYFI(): ReactElement { const {provider, address, isActive} = useWeb3(); const {refresh: refreshBalances} = useWallet(); const {votingEscrow, positions, refresh: refreshVotingEscrow} = useVotingEscrow(); diff --git a/apps/veyfi/components/ViewEarlyExitVeYFI.tsx b/apps/veyfi/components/ViewEarlyExitVeYFI.tsx new file mode 100644 index 000000000..43ecfb8cc --- /dev/null +++ b/apps/veyfi/components/ViewEarlyExitVeYFI.tsx @@ -0,0 +1,79 @@ +import {useCallback, useState} from 'react'; +import {useVotingEscrow} from '@veYFI/contexts/useVotingEscrow'; +import {withdrawLockedVeYFI} from '@veYFI/utils/actions'; +import {VEYFI_CHAIN_ID} from '@veYFI/utils/constants'; +import {Button} from '@yearn-finance/web-lib/components/Button'; +import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3'; +import {toBigInt, toNormalizedBN} from '@yearn-finance/web-lib/utils/format.bigNumber'; +import {getTimeUntil, toWeeks} from '@yearn-finance/web-lib/utils/time'; +import {defaultTxStatus} from '@yearn-finance/web-lib/utils/web3/transaction'; +import {AmountInput} from '@common/components/AmountInput'; +import {useWallet} from '@common/contexts/useWallet'; + +import type {ReactElement} from 'react'; + +export function EarlyExitVeYFI(): ReactElement { + const {provider, address, isActive} = useWeb3(); + const {refresh: refreshBalances} = useWallet(); + const {votingEscrow, positions, refresh: refreshVotingEscrow} = useVotingEscrow(); + const timeUntilUnlock = positions?.unlockTime ? getTimeUntil(positions?.unlockTime) : undefined; + const weeksToUnlock = toNormalizedBN(toWeeks(timeUntilUnlock), 0); + const hasPenalty = toBigInt(positions?.penalty) > 0n; + const [withdrawLockedStatus, set_withdrawLockedStatus] = useState(defaultTxStatus); + + const onTxSuccess = useCallback(async (): Promise => { + await Promise.all([refreshVotingEscrow(), refreshBalances()]); + }, [refreshBalances, refreshVotingEscrow]); + + const onWithdrawLocked = useCallback(async (): Promise => { + const result = await withdrawLockedVeYFI({ + connector: provider, + chainID: VEYFI_CHAIN_ID, + contractAddress: votingEscrow?.address, + statusHandler: set_withdrawLockedStatus + }); + if (result.isSuccessful) { + onTxSuccess(); + } + }, [onTxSuccess, provider, votingEscrow?.address]); + + return ( +
+
+

+ {'Early exit'} +

+
+

{'Or you can exit early by paying a penalty based on lock duration.'}

+
+
+ +
+
+ + +
+
+ + +
+
+
+ ); +} diff --git a/apps/veyfi/components/ManageLockTab.tsx b/apps/veyfi/components/ViewExtendLockVeYFI.tsx similarity index 59% rename from apps/veyfi/components/ManageLockTab.tsx rename to apps/veyfi/components/ViewExtendLockVeYFI.tsx index 3dac07a4f..043d4223a 100644 --- a/apps/veyfi/components/ManageLockTab.tsx +++ b/apps/veyfi/components/ViewExtendLockVeYFI.tsx @@ -1,7 +1,7 @@ import {useCallback, useMemo, useState} from 'react'; import {useVotingEscrow} from '@veYFI/contexts/useVotingEscrow'; import {getVotingPower} from '@veYFI/utils'; -import {extendVeYFILockTime, withdrawLockedVeYFI} from '@veYFI/utils/actions'; +import {extendVeYFILockTime} from '@veYFI/utils/actions'; import {MAX_LOCK_TIME, MIN_LOCK_TIME, VEYFI_CHAIN_ID} from '@veYFI/utils/constants'; import {validateAmount} from '@veYFI/utils/validations'; import {Button} from '@yearn-finance/web-lib/components/Button'; @@ -13,14 +13,10 @@ import {defaultTxStatus} from '@yearn-finance/web-lib/utils/web3/transaction'; import {AmountInput} from '@common/components/AmountInput'; import {useWallet} from '@common/contexts/useWallet'; -import {ClaimTab} from './ClaimTab'; -import {LockTab} from './LockTab'; - import type {ReactElement} from 'react'; import type {TNormalizedBN} from '@common/types/types'; - -function ExtendLock(): ReactElement { +export function ExtendLockVeYFI(): ReactElement { const [lockTime, set_lockTime] = useState(toNormalizedBN(0, 0)); const {provider, address, isActive} = useWeb3(); const {refresh: refreshBalances} = useWallet(); @@ -113,92 +109,3 @@ function ExtendLock(): ReactElement {
); } - -function EarlyExit(): ReactElement { - const {provider, address, isActive} = useWeb3(); - const {refresh: refreshBalances} = useWallet(); - const {votingEscrow, positions, refresh: refreshVotingEscrow} = useVotingEscrow(); - const timeUntilUnlock = positions?.unlockTime ? getTimeUntil(positions?.unlockTime) : undefined; - const weeksToUnlock = toNormalizedBN(toWeeks(timeUntilUnlock), 0); - const hasPenalty = toBigInt(positions?.penalty) > 0n; - const [withdrawLockedStatus, set_withdrawLockedStatus] = useState(defaultTxStatus); - - const onTxSuccess = useCallback(async (): Promise => { - await Promise.all([refreshVotingEscrow(), refreshBalances()]); - }, [refreshBalances, refreshVotingEscrow]); - - const onWithdrawLocked = useCallback(async (): Promise => { - const result = await withdrawLockedVeYFI({ - connector: provider, - chainID: VEYFI_CHAIN_ID, - contractAddress: votingEscrow?.address, - statusHandler: set_withdrawLockedStatus - }); - if (result.isSuccessful) { - onTxSuccess(); - } - }, [onTxSuccess, provider, votingEscrow?.address]); - - return ( -
-
-

- {'Early exit'} -

-
-

{'Or you can exit early by paying a penalty based on lock duration.'}

-
-
- -
-
- - -
-
- - -
-
-
- ); -} - -export function ManageLockTab(): ReactElement { - const {positions} = useVotingEscrow(); - const hasLock = toNormalizedBN(toBigInt(positions?.deposit?.underlyingBalance), 18); - const timeUntilUnlock = positions?.unlockTime ? getTimeUntil(positions?.unlockTime) : undefined; - const weeksToUnlock = toWeeks(timeUntilUnlock); - - return ( -
- - {(hasLock && weeksToUnlock > 0) ? ( - <> -
- -
- -
- - - ) : null} -
- ); -} diff --git a/apps/veyfi/components/LockTab.tsx b/apps/veyfi/components/ViewLockVeYFI.tsx similarity index 99% rename from apps/veyfi/components/LockTab.tsx rename to apps/veyfi/components/ViewLockVeYFI.tsx index 4123c309a..d0122136c 100644 --- a/apps/veyfi/components/LockTab.tsx +++ b/apps/veyfi/components/ViewLockVeYFI.tsx @@ -23,7 +23,7 @@ import type {ReactElement} from 'react'; import type {TNormalizedBN} from '@yearn-finance/web-lib/utils/format.bigNumber'; import type {TMilliseconds} from '@yearn-finance/web-lib/utils/time'; -export function LockTab(): ReactElement { +export function LockVeYFI(): ReactElement { const [lockAmount, set_lockAmount] = useState(toNormalizedBN(0)); const [lockTime, set_lockTime] = useState(''); const {provider, address, isActive} = useWeb3(); diff --git a/apps/veyfi/components/GaugesTab.tsx b/apps/veyfi/components/ViewStakeUnstakeGauges.tsx similarity index 90% rename from apps/veyfi/components/GaugesTab.tsx rename to apps/veyfi/components/ViewStakeUnstakeGauges.tsx index fa23f2bc8..94246147e 100644 --- a/apps/veyfi/components/GaugesTab.tsx +++ b/apps/veyfi/components/ViewStakeUnstakeGauges.tsx @@ -1,6 +1,5 @@ import {useCallback, useMemo, useState} from 'react'; import Link from 'next/link'; -import {QueryParamProvider} from 'use-query-params'; import {useDeepCompareMemo} from '@react-hookz/web'; import {useGauge} from '@veYFI/contexts/useGauge'; import {useOption} from '@veYFI/contexts/useOption'; @@ -19,7 +18,6 @@ import {SearchBar} from '@common/components/SearchBar'; import {Table} from '@common/components/Table'; import {useWallet} from '@common/contexts/useWallet'; import {useYearn} from '@common/contexts/useYearn'; -import {NextQueryParamAdapter} from '@common/utils/QueryParamsProvider'; import type {ReactElement} from 'react'; import type {TAddress} from '@yearn-finance/web-lib/types'; @@ -127,7 +125,7 @@ function StakeUnstakeButtons({isApproved, vaultAddress, gaugeAddress, vaultDepos ); } -function StakeUnstake(): ReactElement { +export function StakeUnstakeGauges(): ReactElement { const {isActive, address} = useWeb3(); const {gaugesMap, positionsMap, allowancesMap} = useGauge(); const {vaults, prices} = useYearn(); @@ -328,47 +326,3 @@ function StakeUnstake(): ReactElement { ); } - -function Vote(): ReactElement { - return ( -
-
-
-

- {'Vote for Gauge'} -

-
-

{'Vote to direct future YFI rewards to a particular gauge.'}

-
-
- - - -
-
-
-
- ); -} - - -export function GaugesTab(): ReactElement { - return ( -
- -
-
- - - -
-
- ); -} diff --git a/apps/veyfi/components/ViewVoteGauges.tsx b/apps/veyfi/components/ViewVoteGauges.tsx new file mode 100644 index 000000000..3d27359cf --- /dev/null +++ b/apps/veyfi/components/ViewVoteGauges.tsx @@ -0,0 +1,31 @@ +import Link from 'next/link'; +import {Button} from '@yearn-finance/web-lib/components/Button'; + +import type {ReactElement} from 'react'; + +export function VoteGauge(): ReactElement { + return ( +
+
+
+

+ {'Vote for Gauge'} +

+
+

{'Vote to direct future YFI rewards to a particular gauge.'}

+
+
+ + + +
+
+
+
+ ); +} diff --git a/pages/veyfi/index.tsx b/pages/veyfi/index.tsx index 025e80f1a..a7af0f433 100755 --- a/pages/veyfi/index.tsx +++ b/pages/veyfi/index.tsx @@ -1,7 +1,7 @@ -import {GaugesTab} from '@veYFI/components/GaugesTab'; -import {ManageLockTab} from '@veYFI/components/ManageLockTab'; import {RedeemTab} from '@veYFI/components/RedeemTab'; import {RewardsTab} from '@veYFI/components/RewardsTab'; +import {TabManageGauges} from '@veYFI/components/TabManageGauges'; +import {TabManageVeYFI} from '@veYFI/components/TabManageVeYFI'; import {useVotingEscrow} from '@veYFI/contexts/useVotingEscrow'; import {Wrapper} from '@veYFI/Wrapper'; import {formatToNormalizedValue, toBigInt} from '@yearn-finance/web-lib/utils/format.bigNumber'; @@ -21,10 +21,8 @@ function Index(): ReactElement { const yourLockedYFI = formatToNormalizedValue(toBigInt(positions?.deposit?.underlyingBalance), 18); const tabs = [ - // {id: 'lock', label: 'Lock YFI', content: }, - {id: 'manage', label: 'Manage veYFI', content: }, - // {id: 'claim', label: 'Claim', content: }, - {id: 'gauges', label: 'Manage Gauges', content: }, + {id: 'manage', label: 'Manage veYFI', content: }, + {id: 'gauges', label: 'Manage Gauges', content: }, {id: 'rewards', label: 'Rewards', content: }, {id: 'redeem', label: 'Redeem dYFI', content: } ].filter(Boolean);