APT-1515: Present data based on the contract state

.env.local_zq2

@@ -1,2 +1,2 @@
-CHAIN_ID=32769
+ZQ2_STAKING_CHAIN_ID=32769
 ZQ2_STAKING_WALLET_CONNECT_API_KEY=ewewewejwje

.env.mocked

@@ -1,2 +1,2 @@
-CHAIN_ID=9999999
+ZQ2_STAKING_CHAIN_ID=9999999
 ZQ2_STAKING_WALLET_CONNECT_API_KEY=ewewewejwje

render_config_staging.yaml

@@ -17,7 +17,7 @@ apps_to_clusters:
     cluster: staging
     dns_name: zq2-staking.zilstg.dev
     healthcheck:
-      request_path: /health
+      request_path: /api/health
     image_name: zq2-staking-frontend
     namespace: zq2-staking-stg
     pipeline:

src/components/stakingCalculator.tsx

@@ -10,7 +10,6 @@ import Link from "next/link";
 
 
 const StakingCalculator: React.FC = () => {
-
   const {
     appConfig
   } = AppConfigStorage.useContainer();
@@ -160,9 +159,6 @@ const StakingCalculator: React.FC = () => {
               <div className="">
                 Max transaction cost: {zilToStake ? '0.01' : '0'}$
               </div>
-              <div className="">
-                Unbonding Period: {zilToStake ? '0.01' : '0'}$
-              </div>
             </div>
             <div className="flex flex-col max-xl:justify-between xl:gap-3.5 xl:items-end">
               <div className="base flex flex-col xl:flex-row xl:gap-5">
@@ -198,8 +194,7 @@ const StakingCalculator: React.FC = () => {
             </Button>
           </div>
         </div>
-
-
+
         {
           stakingCallTxHash !== undefined && (
             <div className="text-center gradient-bg-1 py-2">
@@ -215,9 +210,6 @@ const StakingCalculator: React.FC = () => {
             {stakeContractCallError.message}
           </div>
         )}
-
-
-
     </>
     )
   );

src/components/stakingPoolDetailsView.tsx

@@ -1,14 +1,12 @@
 import StakingCalculator from "@/components/stakingCalculator";
 import UnstakingCalculator from "@/components/unstakingCalculator";
 import WithdrawZilPanel from "@/components/withdrawUnstakedZilPanel";
-import { StakingOperations } from "@/contexts/stakingOperations";
 import { WalletConnector } from "@/contexts/walletConnector";
 import { formatPercentage, formatUnitsToHumanReadable } from "@/misc/formatting";
 import { StakingPool } from "@/misc/stakingPoolsConfig";
 import { UserStakingPoolData, UserUnstakingPoolData } from "@/misc/walletsConfig";
 import { DateTime } from "luxon";
 import { useState } from "react";
-import { Button } from "antd";
 
 interface StakingPoolDetailsViewProps {
   stakingPoolData: StakingPool;
@@ -27,10 +25,6 @@ const StakingPoolDetailsView: React.FC<StakingPoolDetailsViewProps> = ({
     zilAvailable,
   } = WalletConnector.useContainer();
 
-  const {
-    unstake,
-  } = StakingOperations.useContainer();
-
   const [selectedPane, setSelectedPane] = useState<string>('Stake');
 
   const colorInfoEntry = (title: string, value: string | null) => (
@@ -81,7 +75,8 @@ const StakingPoolDetailsView: React.FC<StakingPoolDetailsViewProps> = ({
 
   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">
+      scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2"
+    >
       <div className="items-center flex justify-between py-1 lg:py-7.5">
         <div className="max-lg:ms-1 items-center flex">
           <span className='hero lg:h2 text-white2'>
@@ -91,26 +86,26 @@ const StakingPoolDetailsView: React.FC<StakingPoolDetailsViewProps> = ({
             {stakingPoolData.definition.tokenSymbol}
           </span>
         </div>
-
       </div>
+
       <div className="bg-darkbg py-7.5 lg:py-5 flex flex-col gap-4">
         {doesUserHoldAnyFundsInThisPool && 
-        <div className="grid grid-cols-4 gap-4 pb-4 border-b border-black2/50">
+        <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("Available to claim", availableToClaim ? `${humanReadableStakingToken(availableToClaim)} ${stakingPoolData.definition.tokenSymbol}` : "-") }
         </div>
         }
-        <div className="grid grid-cols-4 gap-4">
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
           { 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)) }
           { greyInfoEntry("", stakingPoolData.data &&
              (
               <>
-                1 ZIL = <br />
-                {stakingPoolData.data.zilToTokenRate} {stakingPoolData.definition.tokenSymbol}
+                1 ZIL ~ <br />
+                {stakingPoolData.data.zilToTokenRate.toPrecision(3)} {stakingPoolData.definition.tokenSymbol}
               </>
             )) }
         </div>

src/components/unstakingCalculator.tsx

@@ -5,9 +5,11 @@ import {
   formatPercentage,
   convertTokenToZil,
   formatUnitsToHumanReadable,
+  getHumanFormDuration,
 } from '@/misc/formatting';
 import { formatUnits, parseEther } from 'viem';
 import { StakingOperations } from '@/contexts/stakingOperations';
+import { DateTime } from 'luxon';
 
 const UnstakingCalculator: React.FC = () => {
   const { stakingPoolForView } = StakingPoolsStorage.useContainer();
@@ -72,6 +74,10 @@ const UnstakingCalculator: React.FC = () => {
     );
   };
 
+  const unboudingPeriod = getHumanFormDuration((
+    DateTime.now().plus({ minutes: stakingPoolForView?.stakingPool.definition.withdrawPeriodInMinutes || 0 })
+  ));
+
   return (
     stakingPoolForView && (
       <div className="bg-black">
@@ -111,7 +117,7 @@ const UnstakingCalculator: React.FC = () => {
                   )}
                   ZIL
                 </span>
-                <span className="body1 ml-2 text-aqua1">~5 days</span>
+                <span className="body1 ml-2 text-aqua1">{ unboudingPeriod }</span>
               </div>
             </div>
             <div className="flex flex-col gap-3 max-w-[100px]">
@@ -149,7 +155,7 @@ const UnstakingCalculator: React.FC = () => {
                 Max transaction cost: {zilToUnstake ? '0.01' : '0'}$
               </div>
               <div className="text-aqua1 ">
-                Unbonding Period: {zilToUnstake ? '0.01' : '0'}$
+                Unbonding Period: { unboudingPeriod }
               </div>
             </div>
             <div className="flex flex-col max-xl:justify-between xl:gap-3.5 xl:items-end">

src/contexts/stakingOperations.tsx

@@ -46,6 +46,7 @@ const useStakingOperations = () => {
     if (isDummyWalletConnected) {
       setDummyWalletPopupContent(`Now User gonna approve the wallet transaction for staking ZIL`);
       setIsDummyWalletPopupOpen(true);
+      setStakingCallTxHash("0x1234567890234567890234567890234567890" as Address);
     } else {
       writeContract(
         wagmiConfig,
@@ -110,6 +111,7 @@ const useStakingOperations = () => {
     if (isDummyWalletConnected) {
       setDummyWalletPopupContent(`Now User gonna approve the wallet transaction for unstaking ${tokensToUnstake} staked tokens`);
       setIsDummyWalletPopupOpen(true);
+      setUnstakingCallTxHash("0x1234567890234567890234567890234567890" as Address);
     } else {
       writeContract(
         wagmiConfig,

src/misc/stakingAbis.ts

@@ -1,3 +1,32 @@
+export const depositAbi = [
+  {
+    "inputs": [],
+    "name": "getFutureTotalStake",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "withdrawalPeriod",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  }
+]
+
 export const delegatorAbi = [
   {
     "inputs": [],
@@ -44,5 +73,44 @@ export const delegatorAbi = [
     ],
     "stateMutability": "view",
     "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "getCommissionNumerator",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "getPrice",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "getStake",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
   }
 ]