From 91ec7be14401d4e4409b5c764a6843cf1d5be82c Mon Sep 17 00:00:00 2001 From: Mohan Date: Fri, 8 Nov 2024 14:43:08 +0530 Subject: [PATCH] (operate) feat: Add available rewards on staking contracts website for 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 | 21 ------------------ .../components/Contracts/ContractsList.tsx | 2 +- apps/govern/components/Layout/Balance.tsx | 2 +- apps/govern/components/Proposals/utils.ts | 2 +- .../components/VeOlas/VeOlasComponents.tsx | 3 ++- apps/operate/components/Contracts/hooks.ts | 9 +++++--- apps/operate/components/Contracts/index.tsx | 13 +++++++++-- apps/operate/types/index.ts | 1 + libs/util-functions/src/index.ts | 1 + libs/util-functions/src/lib/notifications.ts | 6 ++--- libs/util-functions/src/lib/numbers.ts | 22 +++++++++++++++++++ libs/util-functions/src/lib/requests.ts | 3 +-- 12 files changed, 50 insertions(+), 35 deletions(-) create mode 100644 libs/util-functions/src/lib/numbers.ts diff --git a/apps/govern/common-util/functions/balance.ts b/apps/govern/common-util/functions/balance.ts index dd2a3bbd..309325a0 100644 --- a/apps/govern/common-util/functions/balance.ts +++ b/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 diff --git a/apps/govern/components/Contracts/ContractsList.tsx b/apps/govern/components/Contracts/ContractsList.tsx index 78ea8cc2..7a8fac90 100644 --- a/apps/govern/components/Contracts/ContractsList.tsx +++ b/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'; diff --git a/apps/govern/components/Layout/Balance.tsx b/apps/govern/components/Layout/Balance.tsx index 2bedb5c6..8bef1a98 100644 --- a/apps/govern/components/Layout/Balance.tsx +++ b/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; diff --git a/apps/govern/components/Proposals/utils.ts b/apps/govern/components/Proposals/utils.ts index 83cd6ba9..86beaeff 100644 --- a/apps/govern/components/Proposals/utils.ts +++ b/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 { diff --git a/apps/govern/components/VeOlas/VeOlasComponents.tsx b/apps/govern/components/VeOlas/VeOlasComponents.tsx index d6e95091..c211262e 100644 --- a/apps/govern/components/VeOlas/VeOlasComponents.tsx +++ b/apps/govern/components/VeOlas/VeOlasComponents.tsx @@ -1,5 +1,6 @@ +import { formatWeiNumber } from 'libs/util-functions/src'; + import { - formatWeiNumber, getCommaSeparatedNumber, getFormattedDate, getFullFormattedDate, diff --git a/apps/operate/components/Contracts/hooks.ts b/apps/operate/components/Contracts/hooks.ts index 210b4837..0d56e72a 100644 --- a/apps/operate/components/Contracts/hooks.ts +++ b/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[]; } diff --git a/apps/operate/components/Contracts/index.tsx b/apps/operate/components/Contracts/index.tsx index 0de7c9d3..a62bca66 100644 --- a/apps/operate/components/Contracts/index.tsx +++ b/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 = [ render: (apy) => {`${apy}%`}, className: 'text-end', }, + { + title: () => 'Available Rewards, OLAS', + dataIndex: 'availableRewards', + key: 'availableRewards', + render: (availableRewards) => {formatWeiNumber({ value: availableRewards })}, + className: 'text-end', + width: 120, + }, { title: 'Stake required, OLAS', dataIndex: 'stakeRequired', key: 'stakeRequired', render: (stakeRequired) => {stakeRequired}, className: 'text-end', - width: 148, + width: 120, }, { title: 'Minimum operating balance required', @@ -77,7 +86,7 @@ const columns: ColumnsType = [ ); }, className: 'text-end', - width: 200, + width: 180, }, { title: () => ( diff --git a/apps/operate/types/index.ts b/apps/operate/types/index.ts index 170bcd20..ca609027 100644 --- a/apps/operate/types/index.ts +++ b/apps/operate/types/index.ts @@ -18,4 +18,5 @@ export type StakingContract = { minOperatingBalance: number | null; minOperatingBalanceToken: string | null; minOperatingBalanceHint?: string; + availableRewards: string; }; diff --git a/libs/util-functions/src/index.ts b/libs/util-functions/src/index.ts index 35a4b640..e688531b 100644 --- a/libs/util-functions/src/index.ts +++ b/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'; diff --git a/libs/util-functions/src/lib/notifications.ts b/libs/util-functions/src/lib/notifications.ts index 03ef7fe7..b55a513c 100644 --- a/libs/util-functions/src/lib/notifications.ts +++ b/libs/util-functions/src/lib/notifications.ts @@ -4,13 +4,13 @@ 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 }); }; @@ -18,5 +18,5 @@ export const notifyError = ( export const notifyWarning = ( message: ReactNode = 'Some error occurred', description: ReactNode = '', - key?: string + key?: string, ) => notification.warning({ message, description, key }); diff --git a/libs/util-functions/src/lib/numbers.ts b/libs/util-functions/src/lib/numbers.ts new file mode 100644 index 00000000..6d808d9f --- /dev/null +++ b/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)); +}; diff --git a/libs/util-functions/src/lib/requests.ts b/libs/util-functions/src/lib/requests.ts index 3ac16366..1619f4c7 100644 --- a/libs/util-functions/src/lib/requests.ts +++ b/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; -}; \ No newline at end of file +};