Skip to content

Commit

Permalink
update vpha
Browse files Browse the repository at this point in the history
  • Loading branch information
@kingsleydon
kingsleydon committed Jan 16, 2025
1 parent 6af923c commit 61228e9
Show file tree
Hide file tree
Showing 10 changed files with 194 additions and 160 deletions.
Binary file added apps/app/assets/powered_by_slpx.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
183 changes: 90 additions & 93 deletions apps/app/components/Staking/Stake.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,13 @@ import {
useAssetsToShares,
useBalance,
useMaxUnlockRequests,
useRewardRate,
useShares,
useSharesToAssets,
useTotalAssets,
useUnlockPeriod,
useUnlockRequests,
} from '@/hooks/staking'
import {barlow} from '@/lib/theme'
import {OpenInNew, Unarchive} from '@mui/icons-material'
import {OpenInNew} from '@mui/icons-material'
import {
Box,
Button,
Expand All @@ -30,6 +28,7 @@ import {
} from '@mui/material'
import {getDecimalPattern, toCurrency, trimAddress} from '@phala/lib'
import phaIcon from '@phala/ui/icons/asset/pha.png'
import vphaIcon from '@phala/ui/icons/asset/vpha.png'
import {formatDuration, intervalToDuration} from 'date-fns'
import Decimal from 'decimal.js'
import Image from 'next/image'
Expand All @@ -38,35 +37,41 @@ import {useCallback, useEffect, useMemo, useState} from 'react'
import {erc20Abi, formatUnits, parseUnits} from 'viem'
import {useAccount, useWaitForTransactionReceipt, useWriteContract} from 'wagmi'

const oneUnit = parseUnits('1', 18)

const Stake = () => {
const [tab, setTab] = useState(0)
const isStake = tab === 0
const isUnstake = tab === 1
const tokenContractAddress = useMemo(() => {
if (isStake) {
return PHA_CONTRACT_ADDRESS
}
return VAULT_CONTRACT_ADDRESS
}, [isStake])
const {enqueueSnackbar} = useSnackbar()
const shareRate = useSharesToAssets(oneUnit)
const assetRate = useAssetsToShares(oneUnit)
const {address, chain} = useAccount()
const userShares = useShares(address)
const userAssets = useSharesToAssets(userShares)
const unlockRequests = useUnlockRequests(address)
const maxUnlockRequests = useMaxUnlockRequests()
const totalAssets = useTotalAssets()
const rewardRate = useRewardRate()
const [amountString, setAmountString] = useState('')
const allowance = useAllowance(address)
const balance = useBalance(address)
const balance = useBalance(tokenContractAddress, address)
const unlockPeriod = useUnlockPeriod()
const {
writeContract: executeApprove,
data: approveTx,
isPending: isApprovePending,
reset: resetApprove,
failureReason: approveFailureReason,
} = useWriteContract()
const {
writeContract: executeDeposit,
data: depositTx,
isPending: isDepositPending,
reset: resetDeposit,
failureReason: depositFailureReason,
} = useWriteContract({
mutation: {
onError: () => {
Expand All @@ -79,7 +84,6 @@ const Stake = () => {
data: withdrawTx,
isPending: isWithdrawPending,
reset: resetWithdraw,
failureReason: withdrawFailureReason,
} = useWriteContract()
const approveResult = useWaitForTransactionReceipt({hash: approveTx})
const depositResult = useWaitForTransactionReceipt({hash: depositTx})
Expand Down Expand Up @@ -123,6 +127,7 @@ const Stake = () => {
}, [allowance, amount])

const shares = useAssetsToShares(amount)
const assets = useSharesToAssets(amount)

const percentage = useMemo(() => {
if (maxAmount == null || amount == null || maxAmount === 0n) {
Expand Down Expand Up @@ -245,24 +250,6 @@ const Stake = () => {
balance,
])

const dailyRewards = useMemo(() => {
if (
!isStake ||
rewardRate == null ||
totalAssets == null ||
totalAssets === 0n ||
amount == null
) {
return null
}
return Decimal.mul(rewardRate.toString(), 24 * 60 * 60)
.mul(amount.toString())
.div((totalAssets + amount).toString())
.toDP(0)
.div(1e18)
.toString()
}, [isStake, rewardRate, totalAssets, amount])

return (
<Box>
<Box sx={{borderBottom: 1, borderColor: 'divider'}}>
Expand All @@ -283,60 +270,44 @@ const Stake = () => {
alignItems="center"
onSubmit={submit}
spacing={2}
p={3}
p={{xs: 2, md: 3}}
>
{isStake && (
<Stack
direction="row"
spacing={2}
width={1}
alignItems="center"
justifyContent="space-between"
height={68}
>
<Stack direction="row" alignItems="center" spacing={2} py={2}>
<Image src={phaIcon} width={36} height={36} alt="PHA" />
<Typography variant="h6">PHA</Typography>
<Chip
size="small"
label={
<Box display="flex" alignItems="center" gap={0.5}>
{trimAddress(PHA_CONTRACT_ADDRESS)}
<OpenInNew sx={{width: 14, height: 14}} />
</Box>
}
onClick={() => {}}
component="a"
variant="outlined"
href={`${chain?.blockExplorers?.default.url}/address/${PHA_CONTRACT_ADDRESS}`}
target="_blank"
/>
</Stack>
<Property size="small" label="Balance" wrapDecimal>
{balance != null ? toCurrency(formatUnits(balance, 18)) : '-'}
</Property>
</Stack>
)}
{isUnstake && (
<Stack
direction="row"
spacing={2}
width={1}
alignItems="center"
justifyContent="space-between"
height={68}
>
<Stack direction="row" alignItems="center" spacing={2} py={2}>
<Unarchive sx={{width: 36, height: 36}} />
<Typography variant="h6">Unstake</Typography>
</Stack>
<Property size="small" label="My Staking" wrapDecimal>
{userAssets != null
? toCurrency(formatUnits(userAssets, 18))
: '-'}
</Property>
<Stack
direction="row"
spacing={2}
width={1}
alignItems="center"
justifyContent="space-between"
height={79}
>
<Stack direction="row" alignItems="center" spacing={2} py={2}>
<Image
src={isStake ? phaIcon : vphaIcon}
width={36}
height={36}
alt="PHA"
/>
<Typography variant="h6">{isStake ? 'PHA' : 'vPHA'}</Typography>
<Chip
size="small"
label={
<Box display="flex" alignItems="center" gap={0.5}>
{trimAddress(tokenContractAddress)}
<OpenInNew sx={{width: 14, height: 14}} />
</Box>
}
onClick={() => {}}
component="a"
variant="outlined"
href={`${chain?.blockExplorers?.default.url}/address/${tokenContractAddress}`}
target="_blank"
/>
</Stack>
)}
<Property size="small" label="Balance" wrapDecimal>
{balance != null ? toCurrency(formatUnits(balance, 18)) : '-'}
</Property>
</Stack>

<OutlinedInput
placeholder="0.00"
disabled={isLoading}
Expand Down Expand Up @@ -408,22 +379,48 @@ const Stake = () => {
/>
</Box>

<Paper sx={{p: 2, width: 1, height: 142}}>
<Paper
sx={(theme) => ({
p: 2,
width: 1,
background: theme.palette.action.hover,
border: 'none',
height: 106,
})}
>
<Stack gap={1} width={1}>
{isStake && (
<Property
size="small"
fullWidth
label="Estimated Daily Rewards"
wrapDecimal
>
{dailyRewards != null ? toCurrency(dailyRewards) : '-'}
<Property size="small" fullWidth label="You will receive">
{shares != null
? `${toCurrency(formatUnits(shares, 18))} vPHA`
: '-'}
</Property>
)}
{isUnstake && (
<Property size="small" fullWidth label="You will receive">
{assets != null
? `${toCurrency(formatUnits(assets, 18))} PHA`
: '-'}
</Property>
)}

{isStake && (
<Property size="small" fullWidth label="Exchange rate">
{assetRate != null
? `1 PHA = ${toCurrency(formatUnits(assetRate, 18), 4)} vPHA`
: '-'}
</Property>
)}
{/* <Property size="small" fullWidth label="Shares" wrapDecimal>
{shares != null ? toCurrency(formatUnits(shares, 18)) : '-'}
</Property> */}
<Property size="small" fullWidth label="Unstake Period">

{isUnstake && (
<Property size="small" fullWidth label="Exchange rate">
{shareRate != null
? `1 vPHA = ${toCurrency(formatUnits(shareRate, 18), 4)} PHA`
: '-'}
</Property>
)}

<Property size="small" fullWidth label="Unstake period">
{unlockPeriod != null ? (
<Box component="span" sx={{textDecoration: 'underline dotted'}}>
{formatDuration(
Expand Down Expand Up @@ -460,8 +457,8 @@ const Stake = () => {
>
{buttonErrorMessage == null &&
isStake &&
(needApprove ? 'Approve and Stake' : 'Stake')}
{buttonErrorMessage == null && isUnstake && 'Unstake'}
(needApprove ? 'Approve and stake' : 'Stake')}
{buttonErrorMessage == null && isUnstake && 'Request unstake'}
{buttonErrorMessage != null && buttonErrorMessage}
</Button>
</SwitchChainButton>
Expand Down
41 changes: 21 additions & 20 deletions apps/app/components/Staking/Unstake.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
import {
Box,
Button,
Chip,
Paper,
Table,
TableBody,
Expand Down Expand Up @@ -157,31 +156,33 @@ const Unstake = () => {
}, [unlockRequests?.length])

return (
<Box p={3}>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Typography variant="h6">Unstake Requests</Typography>
{maxUnlockRequests != null && unlockRequests != null && (
<Chip
variant="outlined"
label={`${unlockRequests?.length} / ${maxUnlockRequests} request${unlockRequests.length > 1 ? 's' : ''}`}
/>
)}
</Box>
<Box display="flex" gap={2} mt={2}>
<Paper sx={{background: 'transparent', p: 2, flex: 1}}>
<Property label="Total Unstaking" center wrapDecimal>
<Box p={{xs: 2, md: 3}}>
<Typography variant="h6" lineHeight={1.2}>
Unstake Requests
</Typography>

<Box display="flex" gap={2} my={3}>
<Box flex={1}>
<Property label="Used requests" wrapDecimal>
{maxUnlockRequests == null
? '-'
: `${unlockRequests?.length ?? 0} / ${maxUnlockRequests}`}
</Property>
</Box>
<Box flex={1}>
<Property label="Total unstaking" wrapDecimal>
{totalUnlocking == null
? '-'
: toCurrency(formatUnits(totalUnlocking, 18))}
</Property>
</Paper>
<Paper sx={{background: 'transparent', p: 2, flex: 1}}>
<Property label="Total Claimable" center wrapDecimal>
</Box>
<Box flex={1}>
<Property label="Total claimable" wrapDecimal>
{totalClaimable == null
? '-'
: toCurrency(formatUnits(totalClaimable, 18))}
</Property>
</Paper>
</Box>
</Box>
<TableContainer
component={Paper}
Expand Down Expand Up @@ -210,7 +211,7 @@ const Unstake = () => {
<Box>
{row.countdown == null ? (
<Typography variant="body2" color="text.secondary">
Ended
Claimable
</Typography>
) : (
row.countdown
Expand Down Expand Up @@ -265,7 +266,7 @@ const Unstake = () => {
onClick={claim}
sx={{mt: 2}}
>
Claim Unstaked
Claim all
</Button>
</Box>
)
Expand Down
Loading

0 comments on commit 61228e9

Please sign in to comment.