chore: add proposal status and update batched proposal query

apps/stats-dapp/src/containers/ProposalsTable/ProposalsTable.tsx

@@ -27,7 +27,11 @@ import { fuzzyFilter } from '@webb-tools/webb-ui-components/components/Filter/ut
 import { ChainIcon, Spinner } from '@webb-tools/icons';
 import React, { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { ProposalBatchStatus, ProposalType } from '../../generated/graphql';
+import {
+  ProposalBatchStatus,
+  ProposalType,
+  ProposalBatchesOrderBy,
+} from '../../generated/graphql';
 import {
   ProposalBatch,
   BatchedProposalsQuery,
@@ -155,6 +159,7 @@ export const ProposalsTable = () => {
     () => ({
       offset: pagination.pageIndex * pageSize,
       perPage: pagination.pageSize,
+      orderBy: ProposalBatchesOrderBy.IdDesc,
       filter: null,
     }),
     [

apps/stats-dapp/src/gql/proposals.graphql

@@ -1,5 +1,5 @@
-query ProposalBatches($perPage: Int!, $offset: Int!) {
-  proposalBatches(offset: $offset, first: $perPage) {
+query ProposalBatches($perPage: Int!, $offset: Int!, $orderBy: [ProposalBatchesOrderBy!]) {
+  proposalBatches(offset: $offset, first: $perPage, orderBy: $orderBy) {
     totalCount
 
     nodes {

apps/stats-dapp/src/pages/Proposals.tsx

@@ -1,23 +1,44 @@
+import { Card, Stats, TitleWithInfo } from '@webb-tools/webb-ui-components';
 import { ProposalsTable } from '../containers';
-import { useBatchedProposal, useBatchedProposals } from '../provider';
+import { useMemo } from 'react';
+import { useStatsContext } from '../provider';
 
 const Proposals = () => {
-  // All Batched Proposals
-  const batchedProposals = useBatchedProposals({
-    offset: 0,
-    perPage: 10,
-    filter: null,
-  });
+  const {
+    dkgDataFromPolkadotAPI: { proposerCount, proposerThreshold },
+  } = useStatsContext();
 
-  // Single Batched Proposal
-  const batchedProposal = useBatchedProposal('10');
-
-  // console.log('Batched Proposals', batchedProposals);
-
-  // console.log('Batched Proposal', batchedProposal);
+  const statsItems = useMemo(() => {
+    return [
+      {
+        titleProps: {
+          title: 'Proposal Threshold',
+          info: 'Proposal Threshold',
+        },
+        value: proposerThreshold,
+      },
+      {
+        titleProps: {
+          title: 'Proposers',
+          info: 'Proposers',
+        },
+        value: proposerCount,
+      },
+    ];
+  }, [proposerCount, proposerThreshold]);
 
   return (
     <div className="flex flex-col space-y-4">
+      <Card>
+        <TitleWithInfo
+          title="Proposals Status"
+          variant="h5"
+          info="Proposals Status"
+        />
+
+        <Stats items={statsItems} />
+      </Card>
+
       <ProposalsTable />
     </div>
   );

apps/stats-dapp/src/provider/hooks/useProposals.ts

@@ -3,6 +3,7 @@ import { Loadable, Page, PageInfoQuery } from './types';
 import {
   useProposalBatchesLazyQuery,
   useProposalBatchQuery,
+  ProposalBatchesOrderBy,
 } from '../../generated/graphql';
 
 export type Proposal = {
@@ -18,7 +19,9 @@ export type ProposalBatch = {
   chain: string;
 };
 
-export type BatchedProposalsQuery = PageInfoQuery;
+export type BatchedProposalsQuery = PageInfoQuery & {
+  orderBy?: ProposalBatchesOrderBy;
+};
 
 export type BatchedProposals = Loadable<Page<ProposalBatch>>;
 
@@ -30,7 +33,7 @@ export type BatchedProposal = Loadable<ProposalBatch>;
 export const useBatchedProposals = (
   batchedProposalsQuery: BatchedProposalsQuery
 ): BatchedProposals => {
-  const { offset, perPage } = batchedProposalsQuery;
+  const { offset, perPage, orderBy } = batchedProposalsQuery;
 
   const [call, query] = useProposalBatchesLazyQuery();
 
@@ -52,6 +55,7 @@ export const useBatchedProposals = (
       variables: {
         offset,
         perPage,
+        orderBy,
       },
     });
   }, [offset, perPage]);

apps/stats-dapp/src/provider/stats-provider.tsx

@@ -64,6 +64,8 @@ type StatsProvidervalue = {
     currentKey: string;
     nextSessionNumber: number;
     nextKey: string;
+    proposerCount: number;
+    proposerThreshold: number;
   };
 };
 
@@ -119,6 +121,8 @@ const statsContext: React.Context<StatsProvidervalue> =
       currentKey: '',
       nextSessionNumber: 0,
       nextKey: '',
+      proposerCount: 0,
+      proposerThreshold: 0,
     },
   });
 
@@ -178,6 +182,8 @@ export const StatsProvider: React.FC<
     currentKey: '',
     nextSessionNumber: 0,
     nextKey: '',
+    proposerCount: 0,
+    proposerThreshold: 0,
   });
 
   useEffect(() => {
@@ -258,11 +264,16 @@ export const StatsProvider: React.FC<
         nextSessionNumber = nextDKGPublicKey[0];
         nextKey = nextDKGPublicKey[1];
       }
+      const proposerCount = await apiPromise.query.dkgProposals.proposerCount();
+      const proposerThreshold =
+        await apiPromise.query.dkgProposals.proposerThreshold();
       setDkgDataFromPolkadotAPI({
         currentSessionNumber,
         currentKey,
         nextSessionNumber,
         nextKey,
+        proposerCount: Number(proposerCount.toString()),
+        proposerThreshold: Number(proposerThreshold.toString()),
       });
     };
 

libs/webb-ui-components/src/components/ProposalsBadgeGroup/ProposalsBadgeGroup.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo } from 'react';
+import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { ProposalsBadgeGroupProps } from './types';
 import ProposalBadge from '@webb-tools/icons/ProposalBadge/ProposalBadge';