Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apt-1588-APT-1609-APT-1592-APT-1620-APT-1617-APT-1612 #18

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Apt-1588-APT-1609-APT-1592-APT-1620-APT-1617-APT-1612 #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
23a6a03
overall-home+scroll+back-on-mobile
GeorginaShall Dec 27, 2024
6dd294e
APT-1620-APR-basic-tooltip
GeorginaShall Dec 27, 2024
c55d58e
APT-1617-conversion-fix
GeorginaShall Dec 27, 2024
eff9cbe
APT-1612-input+tabs-similarity
GeorginaShall Dec 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 22 additions & 17 deletions src/components/stakingCalculator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { StakingPoolsStorage } from "@/contexts/stakingPoolsStorage";
import { useEffect, useState } from "react";
import { Button, Input } from "antd";
import { Button, Input, Tooltip } from "antd";
import { WalletConnector } from "@/contexts/walletConnector";
import { formatPercentage, convertZilValueInToken, getTxExplorerUrl, formatAddress } from "@/misc/formatting";
import { formatUnits, parseEther } from "viem";
Expand Down Expand Up @@ -32,7 +32,7 @@ const StakingCalculator: React.FC = () => {
const [zilToStake, setZilToStake] = useState<string>(formatUnits(stakingPoolForView?.stakingPool.definition.minimumStake || 0n, 18));

useEffect(() => {
setZilToStake("0.00");
setZilToStake("1");
}, [stakingPoolForView]);

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
Expand All @@ -48,7 +48,7 @@ const StakingCalculator: React.FC = () => {
};

const handleFocus = () => {
if (zilToStake === '0.00') setZilToStake('');
if (zilToStake === '') setZilToStake('1');
};

const handleBlur = () => {
Expand All @@ -62,7 +62,7 @@ const StakingCalculator: React.FC = () => {
}
setZilToStake(valueTemp.replace(/0*(\d+)/, '$1'));

if (zilToStake === '') setZilToStake('0.00');
if (zilToStake === '') setZilToStake('0');
};

const zilToStakeNumber = parseFloat(zilToStake);
Expand All @@ -84,7 +84,7 @@ const StakingCalculator: React.FC = () => {
stakingPoolForView && (
<>
<div>
<div className="flex justify-between gap-10 my-2.5 lg:my-7.5 p-3 lg:p-5 xl:p-7.5 bg-darkbg rounded-3xl">
<div className="flex justify-between gap-10 my-2.5 lg:my-7.5 p-3 lg:p-5 xl:p-7 bg-darkbg rounded-3xl items-center">
<div className="h-fit self-center">
<Input
className={`h3 flex items-baseline !bg-transparent !border-transparent ${
Expand All @@ -97,22 +97,25 @@ const StakingCalculator: React.FC = () => {
prefix="ZIL"
status={!zilToStakeOk ? 'error' : undefined}
/>
<span className="flex items-center ">
<span className="flex items-center whitespace-nowrap ">
{stakingPoolForView!.stakingPool.data ? (
<>
<span className="body1">
<span className="body2-bold">
~
{convertZilValueInToken(
zilToStakeNumber,
stakingPoolForView.stakingPool.data
.zilToTokenRate
)}{' '}
{
!isNaN(zilToStakeNumber) && !isNaN(stakingPoolForView.stakingPool.data
.zilToTokenRate)
? convertZilValueInToken(zilToStakeNumber, stakingPoolForView.stakingPool.data
.zilToTokenRate)
: ""
}
{' '}
{
stakingPoolForView.stakingPool.definition
.tokenSymbol
}{' '}
</span>
<span className="body1 ml-2 text-aqua1">
<span className="body2-bold ml-2 text-aqua1">
~
{formatPercentage(
stakingPoolForView!.stakingPool.data.apr
Expand All @@ -122,7 +125,7 @@ const StakingCalculator: React.FC = () => {
) : (
<div className="animated-gradient mr-1 h-[1.5em] w-[3em]"></div>
)}
<span className="body1 text-aqua1"> APR</span>
<span className="body2-bold text-aqua1"> APR</span>
</span>
</div>

Expand Down Expand Up @@ -164,11 +167,13 @@ const StakingCalculator: React.FC = () => {
<div className="base flex flex-col xl:flex-row xl:gap-5">
<div>Rate</div>
{stakingPoolForView!.stakingPool.data && (
<div>{`1 ZIL = ~${convertZilValueInToken(zilToStakeNumber, stakingPoolForView.stakingPool.data.zilToTokenRate)} ${stakingPoolForView.stakingPool.definition.tokenSymbol}`}</div>
<div>{`1 ZIL = ~${ stakingPoolForView.stakingPool.data.zilToTokenRate} ${stakingPoolForView.stakingPool.definition.tokenSymbol}`}</div>
)}
</div>
<div className=" regular-base text-aqua1 flex flex-row xl:gap-5">
<div>APR:</div>
<Tooltip placement='top' arrow={true} color='#686A6C' className=' mr-1' title="Annual Percentage Rate">
<span>APR </span>
</Tooltip>
{stakingPoolForView!.stakingPool.data ? (
<>
~{formatPercentage(
Expand Down Expand Up @@ -206,7 +211,7 @@ const StakingCalculator: React.FC = () => {
}

{stakeContractCallError && (
<div className="text-red-500 text-center">
<div className="text-red1 text-center">
{stakeContractCallError.message}
</div>
)}
Expand Down
18 changes: 12 additions & 6 deletions src/components/stakingPoolCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { formatPercentage, formatUnitsToHumanReadable } from '@/misc/formatting';
import { StakingPool } from '@/misc/stakingPoolsConfig';
import { UserStakingPoolData } from '@/misc/walletsConfig';
import { Tooltip } from 'antd';
import Image from 'next/image';

interface StakingPoolCardProps {
Expand Down Expand Up @@ -49,7 +50,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
{stakingPoolData.definition.tokenSymbol}
</div>
</div>
<div className="base2 lg:block hidden">
<div className="base2 lg:block hidden text-aqua1">
{userStakingPoolData &&
userStakingPoolData.stakingTokenAmount ? (
<>
Expand All @@ -60,7 +61,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
)} ${stakingPoolData.definition.tokenSymbol}`}
</>
) : (
<span className="text-gray2">-</span>
<span className="text-aqua1">-</span>
)}
</div>
<Image
Expand All @@ -78,7 +79,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
{
stakingPoolData.data ? (
<div
className={`base max-xs:ml-2 xs:max-md:ml-6 ${
className={`base max-xs:ml-2 xs:max-lg:ml-6 ${
stakingPoolData.data.votingPower * 100 >= 50
? 'text-red1'
: stakingPoolData.data.votingPower * 100 >= 30
Expand All @@ -90,7 +91,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
</div>
) : (
<>
<span className='base max-xs:ml-2 xs:max-md:ml-6'>VP</span>
<span className='base max-xs:ml-2 xs:max-lg:ml-6'>VP</span>
<span className="w-[3em] ml-1 animated-gradient" />
</>
)
Expand All @@ -108,8 +109,13 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
}
</div>
</div>
<div className="flex base text-aqua1 max-md:order-1">
APR{' '}


<div className="flex base text-gray2 max-md:order-1 ">
<Tooltip placement='top' arrow={true} color='#686A6C' className=' mr-1' title="Annual Percentage Rate">
<span>APR </span>
</Tooltip>

{
stakingPoolData.data ? (
<>
Expand Down
4 changes: 2 additions & 2 deletions src/components/stakingPoolDetailsView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,8 @@ const StakingPoolDetailsView: React.FC<StakingPoolDetailsViewProps> = ({
const humanReadableStakingToken = (value: bigint) => formatUnitsToHumanReadable(value, stakingPoolData.definition.tokenDecimals);

return (
<div className="relative overflow-y-auto max-h-[calc(100vh-38vh)] xs:max-h-[calc(100vh-30vh)] lg:max-h-[calc(100vh-20vh)]
scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2"
<div className="relative overflow-y-auto max-h-[calc(90vh-10vh)] sm:max-h-[calc(90vh-15vh)]
scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 pb-2"
>
<div className="items-center flex justify-between py-1 lg:py-7.5">
<div className="max-lg:ms-1 items-center flex">
Expand Down
8 changes: 4 additions & 4 deletions src/components/stakingPoolsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,11 @@ const StakingPoolsList: React.FC = () => {

return (
<>
<div className="h3 text-white2 max-lg:w-1/4 mb-4">
<div className="h3 text-white2 sm:max-lg:w-1/4 mb-4 max-h-[10vh]">
Liquid Validators
</div>

<div className="flex gap-x-2.5 mt-6 mb-5">
<div className="flex gap-x-2.5 mt-6 mb-5 max-h-[5vh]">
<SortBtn
variable="APR"
isClicked={isAscending && sortCriteria == 'APR'}
Expand All @@ -72,8 +72,8 @@ const StakingPoolsList: React.FC = () => {
/>
</div>

<div className="grid grid-cols-1 gap-2.5 lg:gap-4 overflow-y-auto max-h-[calc(100vh-38vh)] xs:max-h-[calc(100vh-30vh)] lg:max-h-[calc(100vh-27vh)]
scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 lg:pb-10">
<div className="grid grid-cols-1 gap-2.5 lg:gap-4 overflow-y-auto max-h-[calc(90vh-25vh)]
scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 pb-20">
{sortedStakingPoolsData.map(({ stakingPool, userData }) => (
<StakingPoolCard
key={stakingPool.definition.id}
Expand Down
21 changes: 12 additions & 9 deletions src/components/unstakingCalculator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { StakingPoolsStorage } from '@/contexts/stakingPoolsStorage';
import { useEffect, useState } from 'react';
import { Button, Input } from 'antd';
import { Button, Input, Tooltip } from 'antd';
import {
formatPercentage,
convertTokenToZil,
Expand Down Expand Up @@ -32,7 +32,7 @@ const UnstakingCalculator: React.FC = () => {
};

const handleFocus = () => {
if (zilToUnstake === '0.00') setZilToUnstake('');
if (zilToUnstake === '') setZilToUnstake('1');
};

const handleBlur = () => {
Expand All @@ -44,11 +44,11 @@ const UnstakingCalculator: React.FC = () => {
valueTemp = zilToUnstake.slice(0, -1);
}
setZilToUnstake(valueTemp.replace(/0*(\d+)/, '$1'));
if (zilToUnstake === '') setZilToUnstake('0.00');
if (zilToUnstake === '') setZilToUnstake('1');
};

useEffect(() => {
setZilToUnstake('0.00');
setZilToUnstake('1');
}, [stakingPoolForView]);

const stakedTokenAvailable =
Expand Down Expand Up @@ -82,7 +82,7 @@ const UnstakingCalculator: React.FC = () => {
stakingPoolForView && (
<div className="bg-black">
<div>
<div className="flex justify-between gap-10 my-2.5 lg:my-7.5 p-3 lg:p-5 xl:p-7.5 bg-darkbg rounded-3xl">
<div className="flex justify-between gap-10 my-2.5 lg:my-7.5 p-3 lg:p-5 xl:p-7 bg-darkbg rounded-3xl items-center">
<div className="h-fit self-center">
<Input
className={`h3 flex items-baseline !bg-transparent !border-transparent ${
Expand Down Expand Up @@ -172,21 +172,24 @@ const UnstakingCalculator: React.FC = () => {
= ~
{formatUnitsToHumanReadable(
convertTokenToZil(
zilInWei,
parseEther('1'),
stakingPoolForView.stakingPool.data
.zilToTokenRate
),
18
)}
</>

</>
) : (
<div className="animated-gradient mr-1 h-[1.5em] w-[3em]"></div>
)}
ZIL
</div>
</div>
<div className=" regular-base flex flex-row xl:gap-5">
<div>APR:</div>
<Tooltip placement='top' arrow={true} color='#686A6C' className=' mr-1' title="Annual Percentage Rate">
<span>APR </span>
</Tooltip>
{stakingPoolForView!.stakingPool.data ? (
<>
~
Expand All @@ -202,7 +205,7 @@ const UnstakingCalculator: React.FC = () => {
</div>

{unstakeContractCallError && (
<div className="text-red-500 text-center">
<div className="text-red1 text-center">
{unstakeContractCallError.message}
</div>
)}
Expand Down
20 changes: 12 additions & 8 deletions src/components/withdrawUnstakedZilPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,17 +60,21 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({

{!!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"
<div className="flex flex-col min-h-[114px] lg:min-h-[157px] xl:min-h-[173px] justify-evenly 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 className='flex'>
<div>
{parseFloat(
formatUnits(item.zilAmount, 18)
).toFixed(3)}{' '}
ZIL
</div>
<div className="body1-s lg:ml-2.5 mt-2">avZIL</div>

</div>
) : (
<div className="w-[4em] h-[1em] animated-gradient" />
)}
Expand All @@ -89,7 +93,7 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
</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="flex flex-col min-h-[114px] lg:min-h-[157px] xl:min-h-[173px] justify-evenly 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">
Expand Down
11 changes: 7 additions & 4 deletions src/components/withdrawZilView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,23 @@ const WithdrawZilView: React.FC = () => {
]

return (
<div className="flex flex-col gap-4" >
<div className=" text-center lg:text-end">
<div className="relative overflow-y-auto max-h-[calc(90vh-15vh)]
scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2
flex flex-col gap-2" >
<div className=" text-center lg:text-end max-h-[20vh]">
<h1 className="hero text-white mt-4">
<span className="hidden lg:block">Staking Portal</span>
<span className="block lg:hidden">Claims</span>
</h1>
<p className="w-2/3 sm:w-1/2 md:w-1/4 lg:w-full max-lg:mx-auto mt-2 lg:mt-5 body2">
<p className="w-2/3 sm:w-1/2 md:w-1/4 lg:w-full max-lg:mx-auto my-2 lg:my-5 body2">
Below are withdrawal claims waiting for you
</p>
</div>

{
unstakingItems.length > 0 ? (
<div className="grid grid-cols-1 gap-4 lg:gap-5 overflow-y-auto max-h-[calc(100vh-38vh)] xs:max-h-[calc(100vh-42vh)] lg:max-h-[calc(100vh-27vh)]

<div className="grid grid-cols-1 gap-4 lg:gap-5 overflow-y-auto max-h-[calc(90vh-30vh)]
scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 lg:pb-10">
{
unstakingItems.map((item, claimIdx) => (
Expand Down
2 changes: 1 addition & 1 deletion src/misc/formatting.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export function convertTokenToZil(tokenAmount: bigint, zilToTokenRate: number):
}

export function convertZilValueInToken(zilAmount: number, zilToTokenRate: number) {
return `${(zilAmount * zilToTokenRate).toFixed(2)}`
return `${(zilAmount * zilToTokenRate).toFixed(2)}`
}

export function formatUnitsToHumanReadable(value: bigint, decimals: number): string {
Expand Down
Loading