feat: Update to (un)confirmed peers/CUs API [CHAIN-699] (#62)

fluencelabs · Aug 20, 2024 · d7aa2a7 · d7aa2a7
1 parent e074713
commit d7aa2a7
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@fluencelabs/deal-ts-clients": "0.15.4",
+    "@fluencelabs/deal-ts-clients": "0.16.1",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/pages/provider/ProviderInfo.tsx b/src/pages/provider/ProviderInfo.tsx
@@ -40,29 +40,66 @@ export const ProviderInfo: React.FC = () => {
         <Statistic>
           <StatisticTitle>
             <Text size={10} weight={700} uppercase color="grey400">
-              Total Peers
+              Confirmed Peers
             </Text>
             <Tooltip trigger={<InfoOutlineIcon />}>
               <Text color="grey600" weight={600} size={12}>
-                The total number of peers with activated Capacity commitments
+                The total number of peers with activated Capacity Commitments
               </Text>
             </Tooltip>
           </StatisticTitle>
-          <Text size={32}>{provider.peerCount}</Text>
+          <Text size={32}>{provider.peersInCapacityCommitment}</Text>
         </Statistic>
 
+        <Statistic>
+          <StatisticTitle>
+            <Text size={10} weight={700} uppercase color="grey400">
+              Unconfirmed Peers
+            </Text>
+            <Tooltip trigger={<InfoOutlineIcon />}>
+              <Text color="grey600" weight={600} size={12}>
+                The total number of peers without activated Capacity Commitments
+              </Text>
+            </Tooltip>
+          </StatisticTitle>
+          <Text size={32}>
+            {provider.peersTotal - provider.peersInCapacityCommitment}
+          </Text>
+        </Statistic>
+      </StatisticsRow>
+
+      <StatisticsRow>
         <Statistic>
           <StatisticTitle>
             <Text size={10} weight={700} uppercase color="grey400">
               Available Compute Units
             </Text>
             <Tooltip trigger={<InfoOutlineIcon />}>
               <Text color="grey600" weight={600} size={12}>
-                The total number of CUs which are not in a Deal at the moment
+                The total number of Confirmed Compute Units that are not in a
+                Deal at the moment
+              </Text>
+            </Tooltip>
+          </StatisticTitle>
+          <Text size={32}>{provider.computeUnitsInCapacityCommitment}</Text>
+        </Statistic>
+
+        <Statistic>
+          <StatisticTitle>
+            <Text size={10} weight={700} uppercase color="grey400">
+              Confirmed Compute Units
+            </Text>
+            <Tooltip trigger={<InfoOutlineIcon />}>
+              <Text color="grey600" weight={600} size={12}>
+                The total number of Compute Units with active Capacity
+                Commitment
               </Text>
             </Tooltip>
           </StatisticTitle>
-          <Text size={32}>{provider.freeComputeUnits}</Text>
+          <Text size={32}>
+            {provider.computeUnitsInCapacityCommitment +
+              provider.computeUnitsInDeal}
+          </Text>
         </Statistic>
 
         <Statistic>
@@ -72,11 +109,11 @@ export const ProviderInfo: React.FC = () => {
             </Text>
             <Tooltip trigger={<InfoOutlineIcon />}>
               <Text color="grey600" weight={600} size={12}>
-                The overall number of CUs with Capacity commitment
+                The overall number of Compute Units
               </Text>
             </Tooltip>
           </StatisticTitle>
-          <Text size={32}>{provider.totalComputeUnits}</Text>
+          <Text size={32}>{provider.computeUnitsTotal}</Text>
         </Statistic>
       </StatisticsRow>
       {/* <Space height="60px" />

diff --git a/src/pages/providers/ProvidersTable.tsx b/src/pages/providers/ProvidersTable.tsx
@@ -6,7 +6,7 @@ import {
   ProvidersFilters,
   ProviderShortOrderBy,
 } from '@fluencelabs/deal-ts-clients/dist/dealExplorerClient/types/filters'
-import { ProviderShort } from '@fluencelabs/deal-ts-clients/dist/dealExplorerClient/types/schemes'
+import { ProviderListEntry } from '@fluencelabs/deal-ts-clients/dist/dealExplorerClient/types/schemes'
 import { useLocation } from 'wouter'
 
 import { ApprovedIcon, ArrowIcon, InfoOutlineIcon } from '../../assets/icons'
@@ -42,7 +42,7 @@ const template = [
 ]
 
 interface ProviderRowProps {
-  provider: ProviderShort
+  provider: ProviderListEntry
 }
 
 type ProviderSort = `${ProviderShortOrderBy}:${OrderType}`
@@ -156,13 +156,13 @@ const ProviderRow: React.FC<ProviderRowProps> = ({ provider }) => {
             <A href={`/provider/${provider.id}`}>{provider.id}</A>
           </Cell>
           <Cell>
-            <Text size={12}>{provider.peerCount}</Text>
+            <Text size={12}>{provider.peersTotal}</Text>
           </Cell>
           <Cell>
-            <Text size={12}>{provider.totalComputeUnits}</Text>
+            <Text size={12}>{provider.computeUnitsTotal}</Text>
             <Space width="6px" />
             <ProviderComputeUnitsAvailable size={12} color="white">
-              {provider.freeComputeUnits}
+              {provider.computeUnitsInCapacityCommitment}
             </ProviderComputeUnitsAvailable>
           </Cell>
           <Cell>{provider.isApproved ? <ApprovedIcon /> : <>-</>}</Cell>