feat(tangle-cloud): Service Management Flow (#3034)

Author: devpavan04

apps/leaderboard/src/features/leaderboard/components/LeaderboardTable.tsx

@@ -204,7 +204,7 @@ export const LeaderboardTable = () => {
   });
 
   // TODO: Add network tabs when we support both mainnet and testnet
-  const [networkTab] = useState<NetworkType>('TESTNET');
+  const [networkTab] = useState<NetworkType>('TESTNET' as NetworkType);
 
   const {
     data: latestBlock,

apps/leaderboard/src/features/leaderboard/utils/processLeaderboardRecord.ts

@@ -1,5 +1,6 @@
 import { ZERO_BIG_INT } from '@tangle-network/dapp-config/constants';
 import type { IdentityType } from '@tangle-network/tangle-shared-ui/utils/polkadot/identity';
+import { NetworkType } from '@tangle-network/tangle-shared-ui/graphql/graphql';
 import { toBigInt } from '@tangle-network/ui-components';
 import find from 'lodash/find';
 import findLast from 'lodash/findLast';
@@ -251,6 +252,6 @@ export const processLeaderboardRecord = (
     lastUpdatedAtTimestamp: record.lastUpdatedAtTimestamp,
     identity,
     // TODO: This should fetch from the API once the server supports multi-chain
-    network: 'TESTNET',
+    network: 'TESTNET' as NetworkType,
   } satisfies Account;
 };

apps/tangle-cloud/src/components/InstanceHeader.tsx

@@ -13,20 +13,27 @@ const InstanceHeader: FC<Props> = ({ title, githubPath, creator }) => {
   return (
     <div
       className={twMerge(
-        'flex gap-3 p-6 w-full border-2 border-mono-170',
-        'bg-gradient-to-b from-blue-120/20 to-blue-100/20',
-        'before:bg-gradient-to-b before:from-mono-170/50 before:to-mono-170/30',
+        'flex gap-3 p-6 w-full border-2',
+        'border-mono-80 dark:border-mono-170',
+        'bg-gradient-to-b from-blue-120/10 to-blue-100/10 dark:from-blue-120/20 dark:to-blue-100/20',
+        'before:bg-gradient-to-b before:from-mono-80/40 before:to-mono-80/20 dark:before:from-mono-170/50 dark:before:to-mono-170/30',
       )}
     >
       <div className="flex flex-col gap-2">
-        <Typography variant="h5" className="flex items-center gap-2">
+        <Typography
+          variant="h5"
+          className="flex items-center gap-2 text-mono-200 dark:text-mono-0"
+        >
           {title}{' '}
           {githubPath && (
             <GithubFill size="lg" target="_blank" href={githubPath} />
           )}
         </Typography>
 
-        <Typography variant="body1" className="!text-mono-100">
+        <Typography
+          variant="body1"
+          className="text-mono-140 dark:text-mono-100"
+        >
           {creator}
         </Typography>
       </div>

apps/tangle-cloud/src/constants/index.ts

@@ -3,6 +3,7 @@ export enum TxName {
   REJECT_SERVICE_REQUEST = 'reject service request',
   APPROVE_SERVICE_REQUEST = 'approve service request',
   DEPLOY_BLUEPRINT = 'deploy blueprint',
+  TERMINATE_SERVICE_INSTANCE = 'terminate service instance',
 }
 
 export enum SessionStorageKey {

apps/tangle-cloud/src/data/operators/useOperatorStatsData.ts

@@ -4,6 +4,18 @@ import { SubstrateAddress } from '@tangle-network/ui-components/types/address';
 import { useCallback, useMemo } from 'react';
 import { catchError, combineLatest, map, of } from 'rxjs';
 import { z } from 'zod';
+import { StorageKey, u64 } from '@polkadot/types';
+import { toSubstrateAddress } from '@tangle-network/ui-components/utils/toSubstrateAddress';
+import useNetworkStore from '@tangle-network/tangle-shared-ui/context/useNetworkStore';
+import { Option } from '@polkadot/types';
+import {
+  TanglePrimitivesServicesService,
+  TanglePrimitivesServicesServiceServiceBlueprint,
+  TanglePrimitivesServicesServiceServiceRequest,
+  TanglePrimitivesServicesTypesOperatorProfile,
+} from '@polkadot/types/lookup';
+import { ITuple } from '@polkadot/types/types';
+import { AccountId32 } from '@polkadot/types/interfaces';
 
 const operatorStatsSchema = z.object({
   registeredBlueprints: z.number().default(0),
@@ -18,6 +30,8 @@ const operatorStatsSchema = z.object({
 export const useOperatorStatsData = (
   operatorAddress: SubstrateAddress | null | undefined,
 ) => {
+  const { network } = useNetworkStore();
+
   const { result: operatorStats, ...rest } = useApiRx(
     useCallback(
       (apiRx) => {
@@ -30,14 +44,17 @@ export const useOperatorStatsData = (
             ? of({})
             : apiRx.query.services?.operatorsProfile(operatorAddress).pipe(
                 map((operatorProfile) => {
-                  if (operatorProfile.isNone) {
+                  const unwrapped = (
+                    operatorProfile as Option<TanglePrimitivesServicesTypesOperatorProfile>
+                  ).unwrapOr(null);
+
+                  if (unwrapped === null) {
                     return {};
                   }
 
-                  const detailed = operatorProfile.unwrap();
                   return {
-                    registeredBlueprints: detailed.blueprints.strings.length,
-                    runningServices: detailed.services.strings.length,
+                    registeredBlueprints: unwrapped.blueprints.size,
+                    runningServices: unwrapped.services.size,
                   };
                 }),
                 catchError((error) => {
@@ -56,18 +73,39 @@ export const useOperatorStatsData = (
                 map((serviceRequests) => {
                   const pendingServices = serviceRequests.filter(
                     ([requestId, serviceRequest]) => {
-                      if (serviceRequest.isNone) {
+                      const unwrapped = (
+                        serviceRequest as Option<TanglePrimitivesServicesServiceServiceRequest>
+                      ).unwrapOr(null);
+
+                      if (unwrapped === null) {
                         return false;
                       }
 
                       const primitiveServiceRequest = toPrimitiveServiceRequest(
-                        requestId,
-                        serviceRequest.unwrap(),
+                        requestId as StorageKey<[u64]>,
+                        unwrapped,
                       );
                       return primitiveServiceRequest.operatorsWithApprovalState.some(
-                        (operator) =>
-                          operator.operator === operatorAddress &&
-                          operator.approvalStateStatus === 'Pending',
+                        (operator) => {
+                          const normalizedChainOperator = toSubstrateAddress(
+                            operator.operator,
+                            network.ss58Prefix,
+                          );
+                          const normalizedCurrentOperator = operatorAddress
+                            ? toSubstrateAddress(
+                                operatorAddress,
+                                network.ss58Prefix,
+                              )
+                            : null;
+
+                          const addressMatch =
+                            normalizedChainOperator ===
+                            normalizedCurrentOperator;
+                          const statusMatch =
+                            operator.approvalStateStatus === 'Pending';
+
+                          return addressMatch && statusMatch;
+                        },
                       );
                     },
                   );
@@ -90,13 +128,24 @@ export const useOperatorStatsData = (
             : apiRx.query.services?.blueprints?.entries().pipe(
                 map((blueprints) => {
                   const publishedBlueprints = blueprints.filter(
-                    ([_, optBlueprint]) => {
-                      if (optBlueprint.isNone) {
+                    ([, optBlueprint]) => {
+                      const unwrapped = (
+                        optBlueprint as Option<
+                          ITuple<
+                            [
+                              AccountId32,
+                              TanglePrimitivesServicesServiceServiceBlueprint,
+                            ]
+                          >
+                        >
+                      ).unwrapOr(null);
+
+                      if (unwrapped === null) {
                         return false;
                       }
 
-                      const blueprint = optBlueprint.unwrap();
-                      const publisher = blueprint[0].toHuman();
+                      const owner = unwrapped[0];
+                      const publisher = owner.toHuman();
                       return publisher === operatorAddress;
                     },
                   );
@@ -120,11 +169,13 @@ export const useOperatorStatsData = (
             : apiRx.query.services?.instances.entries().pipe(
                 map((instances) => {
                   const deployedServices = instances.filter(([_, instance]) => {
-                    if (instance.isNone) {
+                    const unwrapped = (
+                      instance as Option<TanglePrimitivesServicesService>
+                    ).unwrapOr(null);
+                    if (unwrapped === null) {
                       return false;
                     }
-                    const detailed = instance.unwrap();
-                    return detailed.owner.toHuman() === operatorAddress;
+                    return unwrapped.owner.toHuman() === operatorAddress;
                   });
                   return {
                     deployedServices: deployedServices.length,
@@ -162,7 +213,7 @@ export const useOperatorStatsData = (
           ),
         );
       },
-      [operatorAddress],
+      [operatorAddress, network.ss58Prefix],
     ),
   );