Apt-1751-APT-1758-APT-1761-APT-1753-APT-1760-APT-1756 + lama comments + re fix some broken items

src/components/stakingCalculator.tsx

@@ -8,13 +8,15 @@ import {
   convertZilValueInToken,
   getTxExplorerUrl,
   formatAddress,
+  getHumanFormDuration,
 } from "@/misc/formatting"
 import { formatUnits, parseEther } from "viem"
 import { StakingOperations } from "@/contexts/stakingOperations"
 import { AppConfigStorage } from "@/contexts/appConfigStorage"
 import Link from "next/link"
 import { StakingPoolType } from "@/misc/stakingPoolsConfig"
 import CustomWalletConnect from "./customWalletConnect"
+import { DateTime } from "luxon"
 
 const StakingCalculator: React.FC = () => {
   const { appConfig } = AppConfigStorage.useContainer()
@@ -92,6 +94,13 @@ const StakingCalculator: React.FC = () => {
     stakingPoolForView?.stakingPool.definition.poolType ===
     StakingPoolType.LIQUID
 
+  const unboudingPeriod = getHumanFormDuration(
+    DateTime.now().plus({
+      minutes:
+        stakingPoolForView?.stakingPool.definition.withdrawPeriodInMinutes || 0,
+    })
+  )
+
   return (
     stakingPoolForView && (
       <>
@@ -159,7 +168,7 @@ const StakingCalculator: React.FC = () => {
             </div>
           </div>
           <div className="flex flex-col">
-            <div className="flex mt-2 mb-5 ">
+            <div className="flex mt-2 mb-3">
               {isWalletConnected ? (
                 <Button
                   type="default"
@@ -182,7 +191,25 @@ const StakingCalculator: React.FC = () => {
                 </CustomWalletConnect>
               )}
             </div>
-            <div className="flex justify-between pt-2.5 lg:pt-5 4k:pt-7 border-t border-black2 ">
+
+            {stakingCallTxHash !== undefined && (
+              <div className="text-center mb-3 regular-base ">
+                <Link
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  href={getTxExplorerUrl(stakingCallTxHash, appConfig.chainId)}
+                  passHref={true}
+                >
+                  Last staking transaction:{" "}
+                  <span className="text-white underline">
+                    {" "}
+                    {formatAddress(stakingCallTxHash)}
+                  </span>
+                </Link>
+              </div>
+            )}
+
+            <div className="flex justify-between pt-2.5 lg:pt-5 4k:pt-7 border-t border-black2 lg:pb-10">
               <div className="flex flex-col gap-3.5 4k:gap-4 regular-base">
                 <div className=" ">
                   Commission Fee:{" "}
@@ -197,6 +224,9 @@ const StakingCalculator: React.FC = () => {
                   )}
                 </div>
                 <div className="">Max transaction cost: 3 ZIL</div>
+                <div className="text-aqua1 ">
+                  Unbonding Period: {unboudingPeriod}
+                </div>
               </div>
               <div className="flex flex-col max-xl:justify-between xl:gap-3.5 4k:gap-5 xl:items-end">
                 {isPoolLiquid() && (
@@ -233,19 +263,6 @@ const StakingCalculator: React.FC = () => {
           </div>
         </div>
 
-        {stakingCallTxHash !== undefined && (
-          <div className="text-center gradient-bg-1 py-2">
-            <Link
-              rel="noopener noreferrer"
-              target="_blank"
-              href={getTxExplorerUrl(stakingCallTxHash, appConfig.chainId)}
-              passHref={true}
-            >
-              Last staking transaction: {formatAddress(stakingCallTxHash)}
-            </Link>
-          </div>
-        )}
-
         {stakeContractCallError && (
           <div className="text-red1 text-center">
             {stakeContractCallError.message}

src/components/stakingPoolDetailsView.tsx

@@ -105,6 +105,40 @@ const StakingPoolDetailsView: React.FC<StakingPoolDetailsViewProps> = ({
       }
     )
 
+  const greyInfoEntries = [
+    stakingPoolData.data &&
+      greyInfoEntry(
+        "Voting power",
+        formatPercentage(stakingPoolData.data.votingPower)
+      ),
+
+    stakingPoolData.data &&
+      greyInfoEntry(
+        "Total supply",
+        `${humanReadableStakingToken(stakingPoolData.data.tvl)} ${stakingPoolData.definition.tokenSymbol}`
+      ),
+
+    stakingPoolData.data &&
+      greyInfoEntry(
+        "Commission",
+        formatPercentage(stakingPoolData.data.commission)
+      ),
+
+    isPoolLiquid() &&
+      stakingPoolData.data &&
+      greyInfoEntry(
+        "",
+        <>
+          1 ZIL ~ <br />
+          {stakingPoolData.data.zilToTokenRate.toPrecision(3)}{" "}
+          {stakingPoolData.definition.tokenSymbol}
+        </>
+      ),
+  ]
+
+  const availableEntries = greyInfoEntries.filter(Boolean)
+  const columnCount = availableEntries.length
+
   return (
     <div className="relative pb-2 4k:pb-4 pr-2 lg:pr-4 4k:pr-6 flex flex-col h-full">
       <div className="items-center flex justify-between py-1 lg:py-7.5">
@@ -184,35 +218,19 @@ const StakingPoolDetailsView: React.FC<StakingPoolDetailsViewProps> = ({
             )}
           </div>
         )}
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 4k:gap-6">
-          {greyInfoEntry(
-            "Voting power",
-            stakingPoolData.data &&
-              formatPercentage(stakingPoolData.data.votingPower)
-          )}
-          {greyInfoEntry(
-            "Total supply",
-            stakingPoolData.data &&
-              `${humanReadableStakingToken(
-                stakingPoolData.data.tvl
-              )} ${stakingPoolData.definition.tokenSymbol}`
-          )}
-          {greyInfoEntry(
-            "Commission",
-            stakingPoolData.data &&
-              formatPercentage(stakingPoolData.data.commission)
-          )}
-          {isPoolLiquid() &&
-            greyInfoEntry(
-              "",
-              stakingPoolData.data && (
-                <>
-                  1 ZIL ~ <br />
-                  {stakingPoolData.data.zilToTokenRate.toPrecision(3)}{" "}
-                  {stakingPoolData.definition.tokenSymbol}
-                </>
-              )
-            )}
+
+        <div
+          className={`grid gap-4 4k:gap-6 ${
+            columnCount === 1
+              ? "grid-cols-1"
+              : columnCount === 2
+                ? "grid-cols-2"
+                : columnCount === 3
+                  ? "grid-cols-3"
+                  : "grid-cols-4"
+          }`}
+        >
+          {availableEntries}
         </div>
       </div>
       <div className="grid grid-cols-3 my-2 4k:my-4">
@@ -231,7 +249,7 @@ const StakingPoolDetailsView: React.FC<StakingPoolDetailsViewProps> = ({
         ))}
       </div>
 
-      <FastFadeScroll className="flex-1 pb-4 mb-16 md:mb-0 overflow-y-scroll">
+      <FastFadeScroll className="flex-1 pb-4 mb-16 lg:mb-0 overflow-y-scroll">
         {selectedPane === "Stake" ? (
           <StakingCalculator />
         ) : selectedPane === "Unstake" ? (

src/components/stakingPoolsList.tsx

@@ -120,7 +120,7 @@ const StakingPoolsList: React.FC<StakingPoolsListProps> = ({
           />
         </div>
 
-        <FastFadeScroll className="flex-1 pb-4 mb-16 md:mb-0 overflow-y-scroll">
+        <FastFadeScroll className="flex-1 pb-8 lg:pb-4 mb-16 md:mb-0 overflow-y-scroll">
           <div className="grid grid-cols-1 gap-2.5 lg:gap-4 4k:gap-5">
             {sortedLiquidStakingPoolsData.map(({ stakingPool, userData }) => (
               <StakingPoolCard
@@ -131,9 +131,10 @@ const StakingPoolsList: React.FC<StakingPoolsListProps> = ({
                   stakingPoolForView?.stakingPool.definition.id ===
                   stakingPool.definition.id
                 }
-                onClick={() =>
+                onClick={() => {
                   selectStakingPoolForView(stakingPool.definition.id)
-                }
+                  setViewClaim(false)
+                }}
               />
             ))}
           </div>

src/components/unstakingCalculator.tsx

@@ -143,8 +143,8 @@ const UnstakingCalculator: React.FC = () => {
           </div>
         </div>
 
-        <div className="flex flex-col justify-between pt-2.5 lg:pt-5 4k:pt-7 border-t border-black2">
-          <div className="flex mt-2 mb-5">
+        <div className="flex flex-col justify-between">
+          <div className="flex mt-2 mb-3">
             {isWalletConnected ? (
               <Button
                 type="default"
@@ -168,7 +168,7 @@ const UnstakingCalculator: React.FC = () => {
             )}
           </div>
 
-          <div className="flex justify-between pt-2.5 lg:pt-5 4k:pt-7 border-t border-black2">
+          <div className="flex justify-between pt-2.5 lg:pt-5 4k:pt-7 border-t border-black2 lg:pb-10">
             <div className="flex flex-col gap-3.5 regular-base">
               <div className=" ">
                 Commission Fee:{" "}
@@ -188,51 +188,57 @@ const UnstakingCalculator: React.FC = () => {
                 Unbonding Period: {unboudingPeriod}
               </div>
             </div>
-            <div className="flex flex-col max-xl:justify-between xl:gap-3.5 xl:items-end">
-              {isPoolLiquid() && (
-                <div className="flex flex-col xl:flex-row xl:gap-5 4k:gap-6">
-                  <div className="gray-base">Rate</div>
-                  <div className="text-gray9">
-                    {stakingPoolForView!.stakingPool.data ? (
-                      <>
-                        1{" "}
-                        {stakingPoolForView.stakingPool.definition.tokenSymbol}{" "}
-                        = ~
-                        {formatUnitsToHumanReadable(
-                          convertTokenToZil(
-                            parseEther("1"),
-                            stakingPoolForView.stakingPool.data.zilToTokenRate
-                          ),
-                          18
-                        )}
-                      </>
-                    ) : (
-                      <div className="animated-gradient mr-1 h-[1.5em] w-[3em]"></div>
-                    )}
-                    ZIL
+            <div className="flex flex-col justify-between">
+              <div className="flex flex-col max-xl:justify-between xl:gap-3.5 xl:items-end">
+                {isPoolLiquid() && (
+                  <div className="flex flex-col xl:flex-row xl:gap-5 4k:gap-6">
+                    <div className="gray-base">Rate</div>
+                    <div className="text-gray9">
+                      {stakingPoolForView!.stakingPool.data ? (
+                        <>
+                          1{" "}
+                          {
+                            stakingPoolForView.stakingPool.definition
+                              .tokenSymbol
+                          }{" "}
+                          = ~
+                          {formatUnitsToHumanReadable(
+                            convertTokenToZil(
+                              parseEther("1"),
+                              stakingPoolForView.stakingPool.data.zilToTokenRate
+                            ),
+                            18
+                          )}
+                        </>
+                      ) : (
+                        <div className="animated-gradient mr-1 h-[1.5em] w-[3em]"></div>
+                      )}
+                      ZIL
+                    </div>
                   </div>
-                </div>
-              )}
-            </div>
+                )}
+              </div>
 
-            <div className="text-gray9 flex flex-row xl:gap-5 4k:gap-6">
-              <Tooltip
-                placement="top"
-                arrow={true}
-                color="#555555"
-                className=" mr-1"
-                title="Annual Percentage Rate"
-              >
-                <span className="gray-base">APR </span>
-              </Tooltip>
-
-              {stakingPoolForView!.stakingPool.data ? (
-                <>
-                  ~{formatPercentage(stakingPoolForView!.stakingPool.data.apr)}
-                </>
-              ) : (
-                <div className="animated-gradient ml-1 h-[1em] w-[2em]"></div>
-              )}
+              <div className="text-gray9 flex flex-row xl:gap-5 4k:gap-6">
+                <Tooltip
+                  placement="top"
+                  arrow={true}
+                  color="#555555"
+                  className=" mr-1"
+                  title="Annual Percentage Rate"
+                >
+                  <span className="gray-base">APR </span>
+                </Tooltip>
+
+                {stakingPoolForView!.stakingPool.data ? (
+                  <>
+                    ~
+                    {formatPercentage(stakingPoolForView!.stakingPool.data.apr)}
+                  </>
+                ) : (
+                  <div className="animated-gradient ml-1 h-[1em] w-[2em]"></div>
+                )}
+              </div>
             </div>
           </div>
         </div>

src/components/withdrawUnstakedZilPanel.tsx

@@ -61,7 +61,7 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
   return (
     <div className="h-full">
       {hashToShow !== undefined && (
-        <div className="text-center gradient-bg-1 py-2 text-gray-500">
+        <div className="text-center gradient-bg-1 py-2 regular-base">
           <Link
             rel="noopener noreferrer"
             target="_blank"
@@ -136,7 +136,7 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
               ) : (
                 <div className="w-[4em] h-[1em] animated-gradient" />
               )}
-              <div className="max-lg:gap-2.5 max-lg:flex lg:w-1/3 lg:max-w-[218px] w-full">
+              <div className="max-lg:gap-2.5 max-lg:flex lg:w-1/3 max-w-[218px] w-full">
                 <Button
                   className="btn-secondary-grey lg:py-5 py-4"
                   onClick={() => claimUnstake(item.address)}