Skip to content

Commit

Permalink
APT-1587, APT-1619: Design tab system & content #16
Browse files Browse the repository at this point in the history
  • Loading branch information
@GeorginaShall
GeorginaShall authored Dec 20, 2024
1 parent f6909d8 commit d4db7d9
Show file tree
Hide file tree
Showing 5 changed files with 130 additions and 102 deletions.
2 changes: 1 addition & 1 deletion src/components/stakingPoolDetailsView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ const StakingPoolDetailsView: React.FC<StakingPoolDetailsViewProps> = ({
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 pb-4 border-b border-black2/50">
{ 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}` : "-") }
</div>
}
Expand Down
217 changes: 121 additions & 96 deletions src/components/withdrawUnstakedZilPanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -17,110 +21,131 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
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 (
<div>
{claimCallTxHash !== undefined && (
<div className="text-center gradient-bg-1 py-2 text-gray-500">
<Link
rel="noopener noreferrer"
target="_blank"
href={getTxExplorerUrl(
claimCallTxHash,
appConfig.chainId
)}
passHref={true}
>
Last staking transaction: {formatAddress(claimCallTxHash)}
</Link>
</div>
)}

{
claimCallTxHash !== undefined && (
<div className="text-center gradient-bg-1 py-2">
<Link rel="noopener noreferrer" target="_blank" href={getTxExplorerUrl(claimCallTxHash, appConfig.chainId)} passHref={true}>
Last staking transaction: {formatAddress(claimCallTxHash)}
</Link>
</div>
)
}

{
!!availableUnstake?.length ? (
availableUnstake.map(
(item, claimIdx) => (
<div className="rounded-lg gradient-bg-1 p-4" key={claimIdx}>
<div className="flex justify-between items-center">
{
stakingPoolData.data ? <div>
{parseFloat(formatUnits(item.zilAmount, 18)).toFixed(3)} ZIL
</div> : <div className="w-[4em] h-[1em] animated-gradient" />
}
<Button
className='btn-primary-cyan text-2xl'
onClick={() => claim(item.address)}
loading={isClaimingInProgress}
>
Claim
</Button>
{!!availableUnstake?.length ? (
availableUnstake.map((item, claimIdx) => (
<div className="flex flex-col justify-between gap-2 my-2.5 lg:my-7.5 py-2 lg:py-6 xl:py-8 px-3 lg:px-7.5 xl:px-10 bg-gradientbg rounded-3xl w-full"
key={claimIdx}
>
<div className="items-center h4 w-full flex justify-between text-gray4">
{stakingPoolData.data ? (
<div>
{parseFloat(
formatUnits(item.zilAmount, 18)
).toFixed(3)}{' '}
ZIL
</div>
</div>
)
)
) : !!pendingUnstake?.length ? (
<div className="rounded-lg bg-gradientbg-1 p-4">
<div className="text-2xl text-gray-500">
Next available Claim
) : (
<div className="w-[4em] h-[1em] animated-gradient" />
)}

<div className='lg:w-1/3 lg:max-w-[218px]'>
<Button
className="btn-primary-gradient-aqua"
onClick={() => claim(item.address)}
loading={isClaimingInProgress}
>
Claim
</Button>
</div>

</div>
<div className="mt-2 flex justify-between">
</div>
))
) : !!pendingUnstake?.length ? (
<div className="flex flex-col justify-between gap-2 my-2.5 lg:my-7.5 py-2 lg:py-6 xl:py-8 px-3 lg:px-7.5 xl:px-10 bg-gradientbg rounded-3xl w-full">
<div className="body2 text-gray2">
Next available reward </div>
<div className=" h4 mt-2 w-full flex justify-between text-gray4">

{stakingPoolData.data ? (
<div>
{parseFloat(
formatUnits(pendingUnstake[0].zilAmount, 18)
).toFixed(3)}{' '}
ZIL
</div>
) : (
<div className="w-[4em] h-[1em] animated-gradient" />
)}
<div>
{getHumanFormDuration(pendingUnstake[0].availableAt)}
</div>
{
stakingPoolData.data ? <div>
{parseFloat(formatUnits(pendingUnstake[0].zilAmount, 18)).toFixed(3)} ZIL
</div> : <div className="w-[4em] h-[1em] animated-gradient" />
}
</div>
</div>
) : (
<div className="flex justify-center items-center my-32">
No available Claims
</div>
)
}
</div>
) : (
<div className="flex justify-center items-center my-32 body2 text-gray2 ">
No available Claims
</div>
)}

{
!!pendingUnstake?.length && (
<div className="mt-4">
<div className="font-bold text-gray-500">
All pending requests
</div>
{!!pendingUnstake?.length && (
<div className="mt-3 ">
<div className="info-label mb-3">
Pending Requests
</div>

{
pendingUnstake?.map((claim, claimIdx) => (
<div className="flex justify-between my-2" key={claimIdx}>
{pendingUnstake?.map((claim, claimIdx) => (
<div className="flex justify-between mb-3 items-center" key={claimIdx}>
{stakingPoolData.data ? (
<div className='flex gap-2.5'>
<div className='body1 text-gray4'>
200.00 avZIL
</div>

{
stakingPoolData.data ? <div>
{parseFloat(formatUnits(claim.zilAmount, 18)).toFixed(3)} ZIL
</div> : <div className="w-[4em] h-[1em] animated-gradient" />
}
<div>
{getHumanFormDuration(claim.availableAt)}
</div>
<div className='regular-base text-gray4 mt-1'>
={' '}{parseFloat(
formatUnits(claim.zilAmount, 18)
).toFixed(3)}{' '}
ZIL
</div>
))
}
</div>
)
}
</div>
) : (
<div className="w-[4em] h-[1em] animated-gradient" />
)}
<div className='regular-base text-gray4'>{getHumanFormDuration(claim.availableAt)}</div>
</div>
))}
</div>
)}
</div>
)
}
);
};

export default WithdrawZilPanel;

7 changes: 5 additions & 2 deletions src/components/withdrawZilView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,12 +103,15 @@ const WithdrawZilView: React.FC = () => {
}
</div>
) : (
<div className="text-center w-full">
<div className="w-full text-end text-white">
{
isUnstakingDataLoading ? (
<div className="animated-gradient h-[2em] w-full"></div>
) : (
<span>WoW such empty</span>
<span>
Here is the testing ground for the new Zilliqa portal.
Explore and give us you feedback.
</span>
)
}
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/misc/stakingPoolsConfig.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ export const stakingPoolsConfigForChainId: Record<string, Array<StakingPoolConfi
address: '0x7A28eda6899d816e574f7dFB62Cc8A84A4fF92a6',
tokenAddress: '0x3fE49722fC4F9F119AB18fE0CF7D340A23C8388b',
iconUrl: '/static/logo2.webp',
name: 'delegator 1',
name: 'Validator 1',
tokenDecimals: 18,
tokenSymbol: 'LST1',
minimumStake: parseUnits("100", 18),
Expand All @@ -233,7 +233,7 @@ export const stakingPoolsConfigForChainId: Record<string, Array<StakingPoolConfi
address: '0x62f3FC68ba2Ff62b23E73c48010262aD64054032',
tokenAddress: '0x7854BFB32CC7a377165Ee3B5C8103a80A07913B2',
iconUrl: '/static/logo1.webp',
name: 'delegator 2',
name: 'Validator 2',
tokenDecimals: 18,
tokenSymbol: 'LST2',
minimumStake: parseUnits("100", 18),
Expand Down
2 changes: 1 addition & 1 deletion src/pages/_document.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export default function Document() {
return (
<Html lang="en">
<Head />
<body className="bg-[url('https://s3-alpha-sig.figma.com/img/2094/27b4/0031fd7fbc83ae7020637ddc7c563ea4?Expires=1733097600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Kqd3RVzZ5qHkIJoS4q45mvtbfLBVz3iJA879jwkqn3PydxJUjtSd9LX-FGW~Zkey9mCDOO-ZiX4fSGl2O-Ur9Ck3qL-jNorGoxxzhvN8MrBCdMBis2gyc11glVLh4dUR7sohttYIffOETquCISkigUJjPZStuvI2qP806mwwtQTKnqmf4Of5Dw07bjERivJEvMiI34LdDyEeUjo97qeqWaZBhZA2E1YFdBJcsZ3UpaZm63Lo93lU5T7MSz6tPfcIJIi7tov8E~X6iuxE-pZV~jrslzcq1tYURdMYif~36n-Jomo3POBd2Ln0HPWIl-K~8s6tp2xkV7l7Otr2w4a2xQ__')] bg-right bg-no-repeat bg-auto bg-origin-content">
<body className="bg-[url('https://s3-alpha-sig.figma.com/img/2094/27b4/0031fd7fbc83ae7020637ddc7c563ea4?Expires=1733097600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Kqd3RVzZ5qHkIJoS4q45mvtbfLBVz3iJA879jwkqn3PydxJUjtSd9LX-FGW~Zkey9mCDOO-ZiX4fSGl2O-Ur9Ck3qL-jNorGoxxzhvN8MrBCdMBis2gyc11glVLh4dUR7sohttYIffOETquCISkigUJjPZStuvI2qP806mwwtQTKnqmf4Of5Dw07bjERivJEvMiI34LdDyEeUjo97qeqWaZBhZA2E1YFdBJcsZ3UpaZm63Lo93lU5T7MSz6tPfcIJIi7tov8E~X6iuxE-pZV~jrslzcq1tYURdMYif~36n-Jomo3POBd2Ln0HPWIl-K~8s6tp2xkV7l7Otr2w4a2xQ__')] bg-right bg-no-repeat bg-cover bg-origin-content">
<Main />
<NextScript />
</body>
Expand Down

0 comments on commit d4db7d9

Please sign in to comment.