feat(operate): add available rewards display in staking contracts

apps/operate/components/Contracts/hooks.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { StakingContract } from 'types';
-import { Abi, Address, formatEther } from 'viem';
+import { Abi, Address, formatEther, formatUnits } from 'viem';
 import { useReadContracts } from 'wagmi';
 
 import { useNominees, useNomineesMetadata } from 'libs/common-contract-functions/src';
@@ -203,11 +203,13 @@ export const useStakingContractsList = () => {
       return nominees.map((item, index) => {
         const maxSlots = Number(maxNumServicesList[index]);
         const servicesLength = ((serviceIdsList[index] as string[]) || []).length;
-        const availableRewards = availableRewardsList[index] as bigint;
-        const availableSlots = availableRewards > 0 && maxSlots > 0 ? maxSlots - servicesLength : 0;
+        const availableRewardsInWei = availableRewardsList[index] as bigint;
+        const availableSlots =
+          availableRewardsInWei > 0 && maxSlots > 0 ? maxSlots - servicesLength : 0;
         const rewardsPerSecond = rewardsPerSecondList[index] as bigint;
         const minStakingDeposit = minStakingDepositList[index] as bigint;
         const numAgentInstances = numAgentInstancesList[index] as bigint;
+        const availableRewards = Number(formatUnits(availableRewardsInWei, 18)).toFixed(2);
 
         const apy = getApy(rewardsPerSecond, minStakingDeposit, numAgentInstances);
         const stakeRequired = getStakeRequired(minStakingDeposit, numAgentInstances);
@@ -226,6 +228,7 @@ export const useStakingContractsList = () => {
           minOperatingBalance: details?.minOperatingBalance,
           minOperatingBalanceToken: details?.minOperatingBalanceToken || null,
           minOperatingBalanceHint: details?.minOperatingBalanceHint || null,
+          availableRewards,
         };
       }) as StakingContract[];
     }

apps/operate/components/Contracts/index.tsx

@@ -50,6 +50,13 @@ const columns: ColumnsType<StakingContract> = [
     render: (apy) => <Tag color="purple" className="m-0">{`${apy}%`}</Tag>,
     className: 'text-end',
   },
+  {
+    title: () => 'Available Rewards (OLAS)',
+    dataIndex: 'availableRewards',
+    key: 'availableRewards',
+    render: (availableRewards) => <Text>{availableRewards}</Text>,
+    className: 'text-end',
+  },
   {
     title: 'Stake required, OLAS',
     dataIndex: 'stakeRequired',
@@ -77,7 +84,7 @@ const columns: ColumnsType<StakingContract> = [
       );
     },
     className: 'text-end',
-    width: 200,
+    width: 180,
   },
   {
     title: () => (

apps/operate/types/index.ts

@@ -18,4 +18,5 @@ export type StakingContract = {
   minOperatingBalance: number | null;
   minOperatingBalanceToken: string | null;
   minOperatingBalanceHint?: string;
+  availableRewards: string;
 };