From d4db7d9e4b72925b7ae9d4d9856ed7f4080ac740 Mon Sep 17 00:00:00 2001 From: GeorginaShall <123496642+GeorginaShall@users.noreply.github.com> Date: Fri, 20 Dec 2024 14:42:03 +0200 Subject: [PATCH] APT-1587, APT-1619: Design tab system & content #16 --- src/components/stakingPoolDetailsView.tsx | 2 +- src/components/withdrawUnstakedZilPanel.tsx | 217 +++++++++++--------- src/components/withdrawZilView.tsx | 7 +- src/misc/stakingPoolsConfig.ts | 4 +- src/pages/_document.tsx | 2 +- 5 files changed, 130 insertions(+), 102 deletions(-) diff --git a/src/components/stakingPoolDetailsView.tsx b/src/components/stakingPoolDetailsView.tsx index 92ac2a5..1b911d2 100644 --- a/src/components/stakingPoolDetailsView.tsx +++ b/src/components/stakingPoolDetailsView.tsx @@ -93,7 +93,7 @@ const StakingPoolDetailsView: React.FC = ({
{ colorInfoEntry("Available to stake", `${formatUnitsToHumanReadable(zilAvailable || 0n, 18)} ZIL`) } { colorInfoEntry("Staked", `${humanReadableStakingToken(userStakingPoolData?.stakingTokenAmount || 0n)} ${stakingPoolData.definition.tokenSymbol}`) } - { colorInfoEntry("Unstake requests", pendingUnstakesValue ? `${humanReadableStakingToken(pendingUnstakesValue)} ${stakingPoolData.definition.tokenSymbol}`: "-" ) } + { colorInfoEntry("Unstake", pendingUnstakesValue ? `${humanReadableStakingToken(pendingUnstakesValue)} ${stakingPoolData.definition.tokenSymbol}`: "-" ) } { colorInfoEntry("Available to claim", availableToClaim ? `${humanReadableStakingToken(availableToClaim)} ${stakingPoolData.definition.tokenSymbol}` : "-") }
} diff --git a/src/components/withdrawUnstakedZilPanel.tsx b/src/components/withdrawUnstakedZilPanel.tsx index fa0b9a1..708b69c 100644 --- a/src/components/withdrawUnstakedZilPanel.tsx +++ b/src/components/withdrawUnstakedZilPanel.tsx @@ -1,12 +1,16 @@ -import { AppConfigStorage } from "@/contexts/appConfigStorage"; -import { StakingOperations } from "@/contexts/stakingOperations"; -import { formatAddress, getHumanFormDuration, getTxExplorerUrl } from "@/misc/formatting"; -import { StakingPool } from "@/misc/stakingPoolsConfig"; -import { UserUnstakingPoolData } from "@/misc/walletsConfig"; -import { Button } from "antd"; -import { DateTime } from "luxon"; -import Link from "next/link"; -import { formatUnits } from "viem"; +import { AppConfigStorage } from '@/contexts/appConfigStorage'; +import { StakingOperations } from '@/contexts/stakingOperations'; +import { + formatAddress, + getHumanFormDuration, + getTxExplorerUrl, +} from '@/misc/formatting'; +import { StakingPool } from '@/misc/stakingPoolsConfig'; +import { UserUnstakingPoolData } from '@/misc/walletsConfig'; +import { Button } from 'antd'; +import { DateTime } from 'luxon'; +import Link from 'next/link'; +import { formatUnits } from 'viem'; interface WithdrawZilPanelProps { stakingPoolData: StakingPool; @@ -17,110 +21,131 @@ const WithdrawZilPanel: React.FC = ({ userUnstakingPoolData, stakingPoolData, }) => { - const { - claim, - isClaimingInProgress, - claimCallTxHash, - } = StakingOperations.useContainer(); + const { claim, isClaimingInProgress, claimCallTxHash } = + StakingOperations.useContainer(); - const { - appConfig - } = AppConfigStorage.useContainer(); + const { appConfig } = AppConfigStorage.useContainer(); - const pendingUnstake = userUnstakingPoolData?.filter( - (claim) => claim.availableAt > DateTime.now() - ).toSorted((claimA, claimB) => claimA.availableAt.diff(claimB.availableAt).milliseconds) + const pendingUnstake = userUnstakingPoolData + ?.filter((claim) => claim.availableAt > DateTime.now()) + .toSorted( + (claimA, claimB) => + claimA.availableAt.diff(claimB.availableAt).milliseconds + ); - const availableUnstake = userUnstakingPoolData?.filter( - (claim) => claim.availableAt <= DateTime.now() - ).toSorted((claimA, claimB) => claimA.availableAt.diff(claimB.availableAt).milliseconds) + const availableUnstake = userUnstakingPoolData + ?.filter((claim) => claim.availableAt <= DateTime.now()) + .toSorted( + (claimA, claimB) => + claimA.availableAt.diff(claimB.availableAt).milliseconds + ); return (
+ {claimCallTxHash !== undefined && ( +
+ + Last staking transaction: {formatAddress(claimCallTxHash)} + +
+ )} - { - claimCallTxHash !== undefined && ( -
- - Last staking transaction: {formatAddress(claimCallTxHash)} - -
- ) - } - - { - !!availableUnstake?.length ? ( - availableUnstake.map( - (item, claimIdx) => ( -
-
- { - stakingPoolData.data ?
- {parseFloat(formatUnits(item.zilAmount, 18)).toFixed(3)} ZIL -
:
- } - + {!!availableUnstake?.length ? ( + availableUnstake.map((item, claimIdx) => ( +
+
+ {stakingPoolData.data ? ( +
+ {parseFloat( + formatUnits(item.zilAmount, 18) + ).toFixed(3)}{' '} + ZIL
-
- ) - ) - ) : !!pendingUnstake?.length ? ( -
-
- Next available Claim + ) : ( +
+ )} + +
+ +
+
-
+
+ )) + ) : !!pendingUnstake?.length ? ( +
+
+ Next available reward
+
+ + {stakingPoolData.data ? ( +
+ {parseFloat( + formatUnits(pendingUnstake[0].zilAmount, 18) + ).toFixed(3)}{' '} + ZIL +
+ ) : ( +
+ )}
{getHumanFormDuration(pendingUnstake[0].availableAt)}
- { - stakingPoolData.data ?
- {parseFloat(formatUnits(pendingUnstake[0].zilAmount, 18)).toFixed(3)} ZIL -
:
- }
-
- ) : ( -
- No available Claims -
- ) - } +
+ ) : ( +
+ No available Claims +
+ )} - { - !!pendingUnstake?.length && ( -
-
- All pending requests -
+ {!!pendingUnstake?.length && ( +
+
+ Pending Requests +
- { - pendingUnstake?.map((claim, claimIdx) => ( -
+ {pendingUnstake?.map((claim, claimIdx) => ( +
+ {stakingPoolData.data ? ( +
+
+ 200.00 avZIL +
- { - stakingPoolData.data ?
- {parseFloat(formatUnits(claim.zilAmount, 18)).toFixed(3)} ZIL -
:
- } -
- {getHumanFormDuration(claim.availableAt)} -
+
+ ={' '}{parseFloat( + formatUnits(claim.zilAmount, 18) + ).toFixed(3)}{' '} + ZIL
- )) - } -
- ) - } +
+ ) : ( +
+ )} +
{getHumanFormDuration(claim.availableAt)}
+
+ ))} +
+ )}
- ) -} + ); +}; export default WithdrawZilPanel; - diff --git a/src/components/withdrawZilView.tsx b/src/components/withdrawZilView.tsx index e65aef5..683792d 100644 --- a/src/components/withdrawZilView.tsx +++ b/src/components/withdrawZilView.tsx @@ -103,12 +103,15 @@ const WithdrawZilView: React.FC = () => { }
) : ( -
+
{ isUnstakingDataLoading ? (
) : ( - WoW such empty + + Here is the testing ground for the new Zilliqa portal. + Explore and give us you feedback. + ) }
diff --git a/src/misc/stakingPoolsConfig.ts b/src/misc/stakingPoolsConfig.ts index b432d2b..ca493ee 100644 --- a/src/misc/stakingPoolsConfig.ts +++ b/src/misc/stakingPoolsConfig.ts @@ -219,7 +219,7 @@ export const stakingPoolsConfigForChainId: Record - +