Skip to content

Commit

Permalink
fix: make staking more visible
Browse files Browse the repository at this point in the history
  • Loading branch information
@Majorfi
Majorfi committed Dec 2, 2024
1 parent 7a48f3b commit 2be8902
Show file tree
Hide file tree
Showing 11 changed files with 276 additions and 150 deletions.
156 changes: 77 additions & 79 deletions apps/vaults-v3/components/details/RewardsTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,7 +307,7 @@ export function RewardsTab(props: {currentVault: TYDaemonVault; hasStakingReward

if (props.currentVault.staking.rewards?.length === 0) {
return (
<div className={'flex flex-col gap-6 bg-neutral-100 p-4 md:gap-4 md:p-8'}>
<div className={'flex flex-col gap-6 rounded-b-3xl p-4 md:gap-4 md:p-8'}>
<BoostMessage
hasStakingRewardsLive={props.hasStakingRewardsLive}
currentVault={props.currentVault}
Expand All @@ -317,88 +317,86 @@ export function RewardsTab(props: {currentVault: TYDaemonVault; hasStakingReward
}

return (
<>
<div className={'flex flex-col gap-6 bg-neutral-100 p-4 md:gap-4 md:p-8'}>
<BoostMessage
hasStakingRewardsLive={props.hasStakingRewardsLive}
currentVault={props.currentVault}
/>
<div className={'flex flex-col gap-6 rounded-b-3xl p-4 md:gap-4 md:p-8'}>
<BoostMessage
hasStakingRewardsLive={props.hasStakingRewardsLive}
currentVault={props.currentVault}
/>

<div className={'flex flex-col gap-2'}>
<div>
<div className={'font-bold'}>{'Stake'}</div>
</div>
<div className={'flex flex-col gap-4 md:flex-row'}>
<FakeInput
className={'w-full md:w-1/3'}
legend={
<div className={'flex items-center justify-between'}>
<p>{`${formatAmount(vaultData.vaultBalanceOf.normalized, 6)} ${props.currentVault.symbol} available to stake`}</p>
<p>{`${formatCounterValue(vaultData.vaultBalanceOf.normalized, vaultTokenPrice.normalized)}`}</p>
</div>
}
value={
toBigInt(vaultData.vaultBalanceOf.raw) === 0n ? undefined : (
<Counter
value={Number(vaultData.vaultBalanceOf.normalized)}
decimals={18}
/>
)
}
/>
<div className={'flex flex-col gap-2'}>
<div>
<div className={'font-bold'}>{'Stake'}</div>
</div>
<div className={'flex flex-col gap-4 md:flex-row'}>
<FakeInput
className={'w-full md:w-1/3'}
legend={
<div className={'flex items-center justify-between'}>
<p>{`${formatAmount(vaultData.vaultBalanceOf.normalized, 6)} ${props.currentVault.symbol} available to stake`}</p>
<p>{`${formatCounterValue(vaultData.vaultBalanceOf.normalized, vaultTokenPrice.normalized)}`}</p>
</div>
}
value={
toBigInt(vaultData.vaultBalanceOf.raw) === 0n ? undefined : (
<Counter
value={Number(vaultData.vaultBalanceOf.normalized)}
decimals={18}
/>
)
}
/>

<Button
className={'w-full md:w-[200px]'}
onClick={(): unknown => (isApproved ? onStake() : onApprove())}
isBusy={stakeStatus.pending || approveStakeStatus.pending}
isDisabled={
!isActive ||
toBigInt(vaultData.vaultBalanceOf.raw) <= 0n ||
(!props.hasStakingRewardsLive && props.currentVault.staking.source !== 'VeYFI')
}>
{isApproved ? 'Stake' : 'Approve'}
</Button>
</div>
<Button
className={'w-full md:w-[200px]'}
onClick={(): unknown => (isApproved ? onStake() : onApprove())}
isBusy={stakeStatus.pending || approveStakeStatus.pending}
isDisabled={
!isActive ||
toBigInt(vaultData.vaultBalanceOf.raw) <= 0n ||
(!props.hasStakingRewardsLive && props.currentVault.staking.source !== 'VeYFI')
}>
{isApproved ? 'Stake' : 'Approve & Stake'}
</Button>
</div>
<div className={'flex flex-col gap-2'}>
<div>
<div className={'font-bold'}>{'Claim Rewards'}</div>
</div>
<div className={'flex flex-col gap-4 md:flex-row'}>
<FakeInput
className={'w-full md:w-1/3'}
legend={
<div className={'flex items-center justify-between'}>
<p>{`${formatAmount(vaultData.stakedEarned.normalized, 6)} ${rewardTokenBalance.symbol || (props.currentVault.staking.rewards || [])[0].symbol || ''} available to claim`}</p>
<p>{`${formatCounterValue(vaultData.stakedEarned.normalized, rewardTokenPrice.normalized)}`}</p>
</div>
}
value={
toBigInt(vaultData.stakedEarned.raw) === 0n ? undefined : (
<Counter
value={Number(vaultData.stakedEarned.normalized)}
decimals={18}
/>
)
}
/>
<Button
className={'w-full md:w-[200px]'}
onClick={onUnstake}
isBusy={unstakeStatus.pending}
isDisabled={!isActive || Number(vaultData.stakedBalanceOf.normalized) <= 0}>
{'Claim & Exit'}
</Button>
<Button
className={'w-full md:w-[200px]'}
onClick={onClaim}
isBusy={claimStatus.pending}
isDisabled={!isActive || isZero(vaultData.stakedEarned.raw)}>
{'Claim'}
</Button>
</div>
</div>
<div className={'flex flex-col gap-2'}>
<div>
<div className={'font-bold'}>{'Claim Rewards'}</div>
</div>
<div className={'flex flex-col gap-4 md:flex-row'}>
<FakeInput
className={'w-full md:w-1/3'}
legend={
<div className={'flex items-center justify-between'}>
<p>{`${formatAmount(vaultData.stakedEarned.normalized, 6)} ${rewardTokenBalance.symbol || (props.currentVault.staking.rewards || [])[0].symbol || ''} available to claim`}</p>
<p>{`${formatCounterValue(vaultData.stakedEarned.normalized, rewardTokenPrice.normalized)}`}</p>
</div>
}
value={
toBigInt(vaultData.stakedEarned.raw) === 0n ? undefined : (
<Counter
value={Number(vaultData.stakedEarned.normalized)}
decimals={18}
/>
)
}
/>
<Button
className={'w-full md:w-[200px]'}
onClick={onUnstake}
isBusy={unstakeStatus.pending}
isDisabled={!isActive || Number(vaultData.stakedBalanceOf.normalized) <= 0}>
{'Claim & Exit'}
</Button>
<Button
className={'w-full md:w-[200px]'}
onClick={onClaim}
isBusy={claimStatus.pending}
isDisabled={!isActive || isZero(vaultData.stakedEarned.raw)}>
{'Claim'}
</Button>
</div>
</div>
</>
</div>
);
}
Loading

0 comments on commit 2be8902

Please sign in to comment.