Skip to content

Commit

Permalink
fix: copy
Browse files Browse the repository at this point in the history
  • Loading branch information
Majorfi committed Oct 18, 2023
1 parent 4bdb4e8 commit 299c81c
Show file tree
Hide file tree
Showing 11 changed files with 191 additions and 155 deletions.
11 changes: 8 additions & 3 deletions apps/veyfi/components/RedeemTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,14 +91,19 @@ export function RedeemTab(): ReactElement {

return (
<div className={'flex flex-col gap-6 md:gap-10'}>
<div className={'flex flex-col gap-4'}>
<div className={'flex flex-col'}>
<div className={'flex flex-col gap-4'}>
<h2 className={'m-0 text-2xl font-bold'}>
{'Redeem'}
</h2>
<div className={'text-neutral-600'} >
<p className={'w-2/3 whitespace-break-spaces'}>
{'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.'}
</p>
</div>
</div>

<div className={'grid grid-cols-1 gap-4 md:grid-cols-4'}>
<div className={'mt-10 grid grid-cols-1 gap-4 md:grid-cols-4'}>
<AmountInput
label={'You have dYFI'}
amount={dYFIBalance}
Expand All @@ -116,7 +121,7 @@ export function RedeemTab(): ReactElement {
error={redeemAmountError}
/>
<AmountInput
label={'ETH to pay to redeem YFI from dYFI'}
label={'Redemption cost (in ETH)'}
amount={ethRequired}
legend={formatCounterValue(ethRequired.normalized, ethBalance.normalizedPrice ?? 0)}
disabled
Expand Down
10 changes: 8 additions & 2 deletions apps/veyfi/components/RewardsTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,20 @@ export function RewardsTab(): ReactElement {

return (
<div className={'flex flex-col gap-6 md:gap-10'}>
<div className={'flex flex-col gap-4'}>
<div className={'flex flex-col'}>
<div className={'flex flex-col gap-4'}>
<h2 className={'m-0 text-2xl font-bold'}>
{'Claim Rewards'}
{'Redeem'}
</h2>
<div className={'text-neutral-600'} >
<p className={'w-2/3 whitespace-break-spaces'}>
{'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. '}
</p>
</div>
</div>

<div className={'grid grid-cols-1 gap-4 md:grid-cols-4'}>
<div className={'mt-10 grid grid-cols-1 gap-4 md:grid-cols-4'}>
<Dropdown
label={'Gauge'}
selected={selectedGauge}
Expand Down
23 changes: 23 additions & 0 deletions apps/veyfi/components/TabManageGauges.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import {QueryParamProvider} from 'use-query-params';
import {NextQueryParamAdapter} from '@common/utils/QueryParamsProvider';

import {StakeUnstakeGauges} from './ViewStakeUnstakeGauges';
import {VoteGauge} from './ViewVoteGauges';

import type {ReactElement} from 'react';

export function TabManageGauges(): ReactElement {
return (
<div className={'grid gap-10'}>
<VoteGauge />
<div className={'h-[1px] w-full bg-neutral-300'} />
<div>
<QueryParamProvider
adapter={NextQueryParamAdapter}
options={{removeDefaultsFromUrl: true}}>
<StakeUnstakeGauges />
</QueryParamProvider>
</div>
</div>
);
}
33 changes: 33 additions & 0 deletions apps/veyfi/components/TabManageVeYFI.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<div className={'grid gap-10'}>
<LockVeYFI />
{(hasLock && weeksToUnlock > 0) ? (
<>
<div className={'h-[1px] w-full bg-neutral-300'} />
<ExtendLockVeYFI />
<div className={'h-[1px] w-full bg-neutral-300'} />
<EarlyExitVeYFI />
<div className={'h-[1px] w-full bg-neutral-300'} />
<ClaimVeYFI />
</>
) : null}
</div>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
79 changes: 79 additions & 0 deletions apps/veyfi/components/ViewEarlyExitVeYFI.tsx
Original file line number Diff line number Diff line change
@@ -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<void> => {
await Promise.all([refreshVotingEscrow(), refreshBalances()]);
}, [refreshBalances, refreshVotingEscrow]);

const onWithdrawLocked = useCallback(async (): Promise<void> => {
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 (
<div className={'grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-16'}>
<div className={'col-span-1 w-full'}>
<h2 className={'m-0 text-2xl font-bold'}>
{'Early exit'}
</h2>
<div className={'mt-6 text-neutral-600'} >
<p>{'Or you can exit early by paying a penalty based on lock duration.'}</p>
</div>
</div>

<div className={'col-span-1 grid w-full gap-6'}>
<div className={'mt-0 grid grid-cols-1 gap-6 md:mt-14 md:grid-cols-2'}>
<AmountInput
label={'veYFI you have'}
amount={toNormalizedBN(toBigInt(positions?.deposit?.underlyingBalance), 18)}
disabled />
<AmountInput
label={'Current lock time (weeks)'}
amount={weeksToUnlock}
disabled />
</div>
<div className={'grid grid-cols-1 gap-6 md:grid-cols-2'}>
<AmountInput
label={'YFI you get'}
amount={toNormalizedBN(toBigInt(positions?.withdrawable), 18)}
legend={`Penalty: ${((positions?.penaltyRatio ?? 0) * 100).toFixed(2)}%`}
disabled />
<Button
className={'w-full md:mt-7'}
onClick={onWithdrawLocked}
isBusy={withdrawLockedStatus.pending}
isDisabled={!isActive || !hasPenalty || withdrawLockedStatus.pending || !votingEscrow || !address}>
{'Exit'}
</Button>
</div>
</div>
</div>
);
}
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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<TNormalizedBN>(toNormalizedBN(0, 0));
const {provider, address, isActive} = useWeb3();
const {refresh: refreshBalances} = useWallet();
Expand Down Expand Up @@ -113,92 +109,3 @@ function ExtendLock(): ReactElement {
</div>
);
}

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<void> => {
await Promise.all([refreshVotingEscrow(), refreshBalances()]);
}, [refreshBalances, refreshVotingEscrow]);

const onWithdrawLocked = useCallback(async (): Promise<void> => {
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 (
<div className={'grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-16'}>
<div className={'col-span-1 w-full'}>
<h2 className={'m-0 text-2xl font-bold'}>
{'Early exit'}
</h2>
<div className={'mt-6 text-neutral-600'} >
<p>{'Or you can exit early by paying a penalty based on lock duration.'}</p>
</div>
</div>

<div className={'col-span-1 grid w-full gap-6'}>
<div className={'mt-0 grid grid-cols-1 gap-6 md:mt-14 md:grid-cols-2'}>
<AmountInput
label={'veYFI you have'}
amount={toNormalizedBN(toBigInt(positions?.deposit?.underlyingBalance), 18)}
disabled />
<AmountInput
label={'Current lock time (weeks)'}
amount={weeksToUnlock}
disabled />
</div>
<div className={'grid grid-cols-1 gap-6 md:grid-cols-2'}>
<AmountInput
label={'YFI you get'}
amount={toNormalizedBN(toBigInt(positions?.withdrawable), 18)}
legend={`Penalty: ${((positions?.penaltyRatio ?? 0) * 100).toFixed(2)}%`}
disabled />
<Button
className={'w-full md:mt-7'}
onClick={onWithdrawLocked}
isBusy={withdrawLockedStatus.pending}
isDisabled={!isActive || !hasPenalty || withdrawLockedStatus.pending || !votingEscrow || !address}>
{'Exit'}
</Button>
</div>
</div>
</div>
);
}

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 (
<div className={'grid gap-10'}>
<LockTab />
{(hasLock && weeksToUnlock > 0) ? (
<>
<div className={'h-[1px] w-full bg-neutral-300'} />
<ExtendLock />
<div className={'h-[1px] w-full bg-neutral-300'} />
<EarlyExit />
<div className={'h-[1px] w-full bg-neutral-300'} />
<ClaimTab />
</>
) : null}
</div>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -328,47 +326,3 @@ function StakeUnstake(): ReactElement {

);
}

function Vote(): ReactElement {
return (
<div className={'grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-16'}>
<div className={'col-span-2 grid w-full'}>
<div className={'flex flex-col gap-4'}>
<h2 className={'m-0 text-2xl font-bold'}>
{'Vote for Gauge'}
</h2>
<div className={'text-neutral-600'} >
<p>{'Vote to direct future YFI rewards to a particular gauge.'}</p>
</div>
<div>
<Link
href={'https://snapshot.org/#/veyfi.eth'}
className={'block w-full md:w-64'}
target={'_blank'}>
<Button className={'w-full md:w-64'}>
{'Vote on Snapshot'}
</Button>
</Link>
</div>
</div>
</div>
</div>
);
}


export function GaugesTab(): ReactElement {
return (
<div className={'grid gap-10'}>
<Vote />
<div className={'h-[1px] w-full bg-neutral-300'} />
<div>
<QueryParamProvider
adapter={NextQueryParamAdapter}
options={{removeDefaultsFromUrl: true}}>
<StakeUnstake />
</QueryParamProvider>
</div>
</div>
);
}
Loading

0 comments on commit 299c81c

Please sign in to comment.