(operate) feat: Add available rewards on staking contracts website fo…

…r each reward (#133)

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

* refactor(balance): move formatWeiNumber to util-functions and update imports

* fix(contracts): update available rewards title format in staking contracts

* fix(contracts): adjust column widths for available rewards and stake required in contracts table

apps/govern/common-util/functions/balance.ts

@@ -1,26 +1,5 @@
 import isNil from 'lodash/isNil';
 
-/**
- * Return formatted number with appropriate suffix
- */
-export const formatWeiNumber = ({
-  value,
-  minimumFractionDigits = 0,
-  maximumFractionDigits = 2,
-}: {
-  value: number | string | undefined;
-  minimumFractionDigits?: number;
-  maximumFractionDigits?: number;
-}) => {
-  if (isNil(value) || Number(value) === 0) return '0';
-
-  return new Intl.NumberFormat('en', {
-    notation: 'compact',
-    minimumFractionDigits,
-    maximumFractionDigits,
-  }).format(Number(value));
-};
-
 /**
  * Converts a number to a comma separated format
  * eg: 1000000 => 1,000,000, 12345.67 => 12,345.67

apps/govern/components/Contracts/ContractsList.tsx

@@ -6,8 +6,8 @@ import { Allocation, StakingContract } from 'types';
 import { useAccount } from 'wagmi';
 
 import { CHAIN_NAMES } from 'libs/util-constants/src';
+import { formatWeiNumber } from 'libs/util-functions/src';
 
-import { formatWeiNumber } from 'common-util/functions/balance';
 import { NextWeekTooltip } from 'components/NextWeekTooltip';
 import { useVotingPower } from 'hooks/useVotingPower';
 import { useAppSelector } from 'store/index';

apps/govern/components/Layout/Balance.tsx

@@ -5,8 +5,8 @@ import { useAccount } from 'wagmi';
 
 import { COLOR } from 'libs/ui-theme/src/lib/ui-theme';
 import { UNICODE_SYMBOLS } from 'libs/util-constants/src';
+import { formatWeiNumber } from 'libs/util-functions/src';
 
-import { formatWeiNumber } from 'common-util/functions';
 import { useVotingPower } from 'hooks/index';
 
 const { Text, Paragraph } = Typography;

apps/govern/components/Proposals/utils.ts

@@ -2,8 +2,8 @@ import { ethers } from 'ethers';
 import { Address } from 'viem';
 
 import { areAddressesEqual } from 'libs/util-functions/src';
+import { formatWeiNumber } from 'libs/util-functions/src';
 
-import { formatWeiNumber } from 'common-util/functions';
 import { Proposal } from 'common-util/graphql/types';
 
 export enum VoteSupport {

apps/govern/components/VeOlas/VeOlasComponents.tsx

@@ -1,5 +1,6 @@
+import { formatWeiNumber } from 'libs/util-functions/src';
+
 import {
-  formatWeiNumber,
   getCommaSeparatedNumber,
   getFormattedDate,
   getFullFormattedDate,

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 = formatUnits(availableRewardsInWei, 18);
 
         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

@@ -7,6 +7,7 @@ import { StakingContract } from 'types';
 import { Caption, TextWithTooltip } from 'libs/ui-components/src';
 import { BREAK_POINT } from 'libs/ui-theme/src';
 import { CHAIN_NAMES, GOVERN_URL, NA, UNICODE_SYMBOLS } from 'libs/util-constants/src';
+import { formatWeiNumber } from 'libs/util-functions/src';
 
 import { RunAgentButton } from 'components/RunAgentButton';
 
@@ -50,13 +51,21 @@ 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>{formatWeiNumber({ value: availableRewards })}</Text>,
+    className: 'text-end',
+    width: 120,
+  },
   {
     title: 'Stake required, OLAS',
     dataIndex: 'stakeRequired',
     key: 'stakeRequired',
     render: (stakeRequired) => <Text>{stakeRequired}</Text>,
     className: 'text-end',
-    width: 148,
+    width: 120,
   },
   {
     title: 'Minimum operating balance required',
@@ -77,7 +86,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;
 };

libs/util-functions/src/index.ts

@@ -5,3 +5,4 @@ export * from './lib/sendTransaction/helpers';
 export * from './lib/notifications';
 export * from './lib/requests';
 export * from './lib/ethers';
+export * from './lib/numbers';

libs/util-functions/src/lib/notifications.ts

@@ -4,19 +4,19 @@ import { notification } from 'antd';
 export const notifySuccess = (
   message: ReactNode = 'Successful',
   description: ReactNode = '',
-  key?: string
+  key?: string,
 ) => notification.success({ message, description, key });
 
 export const notifyError = (
   message: ReactNode = 'Some error occurred',
   description: ReactNode = '',
-  key?: string
+  key?: string,
 ) => {
   notification.error({ message, description, key });
 };
 
 export const notifyWarning = (
   message: ReactNode = 'Some error occurred',
   description: ReactNode = '',
-  key?: string
+  key?: string,
 ) => notification.warning({ message, description, key });

libs/util-functions/src/lib/numbers.ts

@@ -0,0 +1,22 @@
+import { isNil } from 'lodash';
+
+/**
+ * Return formatted number with appropriate suffix
+ */
+export const formatWeiNumber = ({
+  value,
+  minimumFractionDigits = 0,
+  maximumFractionDigits = 2,
+}: {
+  value: number | string | undefined;
+  minimumFractionDigits?: number;
+  maximumFractionDigits?: number;
+}) => {
+  if (isNil(value) || Number(value) === 0) return '0';
+
+  return new Intl.NumberFormat('en', {
+    notation: 'compact',
+    minimumFractionDigits,
+    maximumFractionDigits,
+  }).format(Number(value));
+};

libs/util-functions/src/lib/requests.ts

@@ -1,6 +1,5 @@
 import { Contract } from 'ethers';
 
-
 const ESTIMATED_GAS_LIMIT = 500_000;
 
 /**
@@ -23,4 +22,4 @@ export const getEstimatedGasLimit = async (
   }
 
   return ESTIMATED_GAS_LIMIT;
-};
+};