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

* overall-home+scroll+back-on-mobile

* APT-1620-APR-basic-tooltip

* APT-1617-conversion-fix

* APT-1612-input+tabs-similarity

* suggestions-fixes

src/components/stakingCalculator.tsx

@@ -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";
@@ -32,7 +32,7 @@ const StakingCalculator: React.FC = () => {
   const [zilToStake, setZilToStake] = useState<string>(formatUnits(stakingPoolForView?.stakingPool.definition.minimumStake || 0n, 18));
 
   useEffect(() => {
-    setZilToStake("0.00");
+    onMinClick();
   }, [stakingPoolForView]);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -48,7 +48,7 @@ const StakingCalculator: React.FC = () => {
   };
 
   const handleFocus = () => {
-     if (zilToStake === '0.00') setZilToStake('');
+     if (zilToStake === '') onMinClick();
   };
 
   const handleBlur = () => {
@@ -62,7 +62,7 @@ const StakingCalculator: React.FC = () => {
     }
     setZilToStake(valueTemp.replace(/0*(\d+)/, '$1'));
 
-    if (zilToStake === '') setZilToStake('0.00');
+    if (zilToStake === '') onMinClick();
   };
 
   const zilToStakeNumber = parseFloat(zilToStake);
@@ -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 ${
@@ -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
@@ -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>
 
@@ -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(
@@ -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>
         )}

src/components/stakingPoolCard.tsx

@@ -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 {
@@ -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 ? (
                 <> 
@@ -60,7 +61,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
                     )} ${stakingPoolData.definition.tokenSymbol}`}
                 </>
               ) : (
-                <span className="text-gray2">-</span>
+                <span className="text-aqua1">-</span>
               )}
             </div>
             <Image
@@ -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
@@ -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" />
                     </>
                   )
@@ -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 ? (
                     <>

src/components/stakingPoolDetailsView.tsx

@@ -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">

src/components/stakingPoolsList.tsx

@@ -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'}
@@ -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}

src/components/unstakingCalculator.tsx

@@ -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,
@@ -32,7 +32,7 @@ const UnstakingCalculator: React.FC = () => {
   };
 
   const handleFocus = () => {
-    if (zilToUnstake === '0.00') setZilToUnstake('');
+    if (zilToUnstake === '') onMaxClick();
   };
 
   const handleBlur = () => {
@@ -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 === '') onMaxClick();
   };
 
   useEffect(() => {
-    setZilToUnstake('0.00');
+    setZilToUnstake('1');
   }, [stakingPoolForView]);
 
   const stakedTokenAvailable =
@@ -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 ${
@@ -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 ? (
                   <>
                     ~
@@ -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>
           )}

src/components/withdrawUnstakedZilPanel.tsx

@@ -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" />
               )}
@@ -87,7 +91,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">

src/components/withdrawZilView.tsx

@@ -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) => (

src/misc/formatting.ts

@@ -44,7 +44,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 {