diff --git a/src/pages/indexer/MyProjects/CurrentEraRewards/index.module.less b/src/pages/indexer/MyProjects/CurrentEraRewards/index.module.less new file mode 100644 index 00000000..e69de29b diff --git a/src/pages/indexer/MyProjects/CurrentEraRewards/index.tsx b/src/pages/indexer/MyProjects/CurrentEraRewards/index.tsx new file mode 100644 index 00000000..33f96829 --- /dev/null +++ b/src/pages/indexer/MyProjects/CurrentEraRewards/index.tsx @@ -0,0 +1,148 @@ +import React, { FC } from 'react'; +import { gql, useQuery } from '@apollo/client'; +import { useEra } from '@hooks'; +import { Spinner, Typography } from '@subql/components'; +import { useAsyncMemo } from '@subql/react-hooks'; +import { cidToBytes32, formatSQT, TOKEN } from '@utils'; +import { Tooltip } from 'antd'; +import BigNumberJs from 'bignumber.js'; + +import { useWeb3Store } from 'src/stores'; + +import styles from './index.module.less'; + +interface IProps { + deploymentId: string; + indexerAddress: string; +} + +const CurrentEraRewards: FC = ({ indexerAddress, deploymentId }) => { + const { currentEra } = useEra(); + const { contracts } = useWeb3Store(); + const currentEraAllocatedAndQueryRewards = useQuery<{ + indexerEraDeploymentReward: { + allocationRewards: string; + queryRewards: string; + }; + }>( + gql` + query GetAllocationRewardsByDeploymentId($id: String!) { + indexerEraDeploymentReward(id: $id) { + allocationRewards + queryRewards + } + } + `, + { + variables: { + id: `${indexerAddress}:${deploymentId}:${currentEra.data?.index || 0}`, + }, + }, + ); + + const currentEraFlexPlanRewards = useAsyncMemo(async () => { + if (!contracts) return; + const [rewards] = await contracts.rewardsPool.getReward( + cidToBytes32(deploymentId), + currentEra.data?.index || 0, + indexerAddress, + ); + + return formatSQT(rewards.toString()); + }, [contracts, deploymentId, currentEra.data?.index, indexerAddress]); + + const currentEraUncollectedFlexPlanRewards = useAsyncMemo(async () => { + const res = await fetch( + `${import.meta.env.VITE_CONSUMER_HOST_ENDPOINT}/statistic-indexer-channel?indexer=${indexerAddress.toLowerCase()}&deployment=${deploymentId}`, + ); + const { onchain, spent }: { onchain: string; spent: string } = await res.json(); + + return formatSQT(BigNumberJs(spent).minus(onchain).toString()); + }, [deploymentId, indexerAddress]); + + const currentEraUncollectedRewards = useAsyncMemo(async () => { + if (!contracts) return; + const [rewards] = await contracts.rewardsBooster.getAllocationRewards(cidToBytes32(deploymentId), indexerAddress); + + return formatSQT(rewards.toString()); + }, [contracts, deploymentId, indexerAddress]); + + return ( +
+
+ Current Era Allocation Rewards:{' '} + {currentEraAllocatedAndQueryRewards.loading || currentEraUncollectedRewards.loading ? ( + + ) : ( + + + Collected:{' '} + {formatSQT( + currentEraAllocatedAndQueryRewards.data?.indexerEraDeploymentReward?.allocationRewards || '0', + )}{' '} + {TOKEN} + {' '} + + Uncollected: {currentEraUncollectedRewards.data?.toString() || '0'} {TOKEN} + +
+ } + > +
{ + currentEraAllocatedAndQueryRewards.refetch(); + currentEraUncollectedRewards.refetch(); + }} + style={{ cursor: 'pointer' }} + > + {BigNumberJs( + formatSQT( + currentEraAllocatedAndQueryRewards.data?.indexerEraDeploymentReward?.allocationRewards || '0', + ), + ) + .plus(currentEraUncollectedRewards.data?.toString() || '0') + .toFixed(6)}{' '} + {TOKEN} +
+ + )} +
+ +
+ Current Era Query Rewards:{' '} + {currentEraFlexPlanRewards.loading || currentEraUncollectedFlexPlanRewards.loading ? ( + + ) : ( + + + On chain: {currentEraFlexPlanRewards.data?.toString() || '0'} {TOKEN} + + + Off chain: {currentEraUncollectedFlexPlanRewards.data?.toString() || '0'} {TOKEN} + +
+ } + > +
{ + currentEraFlexPlanRewards.refetch(); + currentEraUncollectedFlexPlanRewards.refetch(); + }} + style={{ cursor: 'pointer' }} + > + {BigNumberJs(currentEraUncollectedFlexPlanRewards.data?.toString() || '0') + .plus(currentEraFlexPlanRewards.data?.toString() || '0') + .toFixed(6)}{' '} + {TOKEN} +
+ + )} + + + ); +}; +export default CurrentEraRewards; diff --git a/src/pages/indexer/MyProjects/OwnDeployments/OwnDeployments.tsx b/src/pages/indexer/MyProjects/OwnDeployments/OwnDeployments.tsx index e82b926b..38974891 100644 --- a/src/pages/indexer/MyProjects/OwnDeployments/OwnDeployments.tsx +++ b/src/pages/indexer/MyProjects/OwnDeployments/OwnDeployments.tsx @@ -34,6 +34,7 @@ import { formatNumber, numToHex, renderAsync, TOKEN, truncateToDecimalPlace } fr import { ROUTES } from '../../../../utils'; import { formatEther } from '../../../../utils/numberFormatters'; import AutoReduceAllocation from '../AutoReduceOverAllocation'; +import CurrentEraRewards from '../CurrentEraRewards/index'; import styles from './OwnDeployments.module.css'; const { PROJECT_NAV } = ROUTES; @@ -732,6 +733,14 @@ export const OwnDeployments: React.FC = ({ indexer, emptyList, desc }) => dataSource={indexerDeployments.loading ? previousSortedData : sortedData} rowKey={'deploymentId'} pagination={false} + expandable={{ + expandedRowRender: (record) => ( + + ), + }} scroll={width <= 2260 ? { x: 2260 } : undefined} loading={indexerDeployments.loading} />