fix(tangle-cloud): UI/UX Fixes & Improvements (#3036)

Author: devpavan04

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

@@ -9,8 +9,10 @@ const TangleCloudCard: FC<TangleCloudCardProps> = ({ children, className }) => {
     <Card
       variant={CardVariant.GLASS}
       className={twMerge(
-        'relative overflow-hidden shadow-sm',
-        'w-full xl:w-1/2 p-5 z-0',
+        'relative overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300',
+        'w-full xl:w-1/2 p-6 z-0',
+        'border border-mono-40 dark:border-mono-160',
+        'backdrop-blur-sm',
         className,
       )}
     >
@@ -21,10 +23,12 @@ const TangleCloudCard: FC<TangleCloudCardProps> = ({ children, className }) => {
           'absolute top-0 left-0 w-full h-full z-0',
           "dark:bg-[url('/static/assets/accounts/grid-bg-colored.svg')]",
           'bg-cover bg-center bg-no-repeat',
-          'bg-gradient-to-b from-mono-0.7 to-transparent',
-          'shadow-[0px_4px_8px_0px_rgba(0,0,0,0.08)]',
-          'dark:shadow-[0px_4px_8px_0px_rgba(0,0,0,0.20)]',
-          'dark:bg-blend-lighten',
+          'bg-gradient-to-br from-blue-5 via-mono-10 to-purple-5',
+          'dark:bg-gradient-to-br dark:from-blue-180 dark:via-mono-180 dark:to-purple-180',
+          'opacity-60 dark:opacity-40',
+          'shadow-[0px_8px_24px_0px_rgba(0,0,0,0.12)]',
+          'dark:shadow-[0px_8px_24px_0px_rgba(0,0,0,0.40)]',
+          'dark:bg-blend-overlay',
         )}
       />
     </Card>

apps/tangle-cloud/src/components/accountStatsCard/AccountStatsCardBody.tsx

@@ -1,4 +1,4 @@
-import { Children, type FC } from 'react';
+import { type FC } from 'react';
 import { Socials, StatsItem } from '@tangle-network/ui-components';
 import { AccountStatsCardBodyProps } from '.';
 import cx from 'classnames';
@@ -12,22 +12,36 @@ export const AccountStatsCardBody: FC<AccountStatsCardBodyProps> = ({
 }) => {
   return (
     <div {...props} className="w-full space-y-5">
-      <div className="grid grid-cols-2">
-        {Children.toArray(
-          statsItems.map((item, index) => (
+      <div className="grid grid-cols-2 grid-rows-2 min-h-[120px]">
+        {Array.from({ length: 4 }).map((_, index) => {
+          const item = statsItems[index];
+          const isLeftColumn = index % 2 === 0;
+          const isTopRow = index < 2;
+
+          return item ? (
             <StatsItem
+              key={index}
               className={cx('gap-0 border-mono-100 dark:border-mono-140 p-2', {
-                'border-r': index % 2 === 0,
-                'border-b': index < statsItems.length - 2,
-                'pl-5': index % 2 === 1,
+                'border-r': isLeftColumn,
+                'border-b': isTopRow,
+                'pl-5': !isLeftColumn,
               })}
               title={item.title}
               tooltip={item.tooltip}
             >
               {item.children}
             </StatsItem>
-          )),
-        )}
+          ) : (
+            <div
+              key={`placeholder-${index}`}
+              className={cx('border-mono-100 dark:border-mono-140 p-2', {
+                'border-r': isLeftColumn,
+                'border-b': isTopRow,
+                'pl-5': !isLeftColumn,
+              })}
+            />
+          );
+        })}
       </div>
 
       <Socials

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

@@ -29,6 +29,7 @@ const operatorStatsSchema = z.object({
 
 export const useOperatorStatsData = (
   operatorAddress: SubstrateAddress | null | undefined,
+  refreshTrigger?: number,
 ) => {
   const { network } = useNetworkStore();
 
@@ -162,7 +163,6 @@ export const useOperatorStatsData = (
                 }),
               );
 
-        // TODO: after the instance is terminated, this will be removed. using Graphql to get the deployed services
         const deployedServices$ =
           apiRx.query.services?.instances === undefined
             ? of({})
@@ -213,7 +213,8 @@ export const useOperatorStatsData = (
           ),
         );
       },
-      [operatorAddress, network.ss58Prefix],
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [operatorAddress, network.ss58Prefix, refreshTrigger],
     ),
   );
 

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

@@ -16,7 +16,10 @@ const userStatsSchema = z.object({
   consumedServices: z.number().default(0),
 });
 
-export const useUserStatsData = (accountAddress: string | null | undefined) => {
+export const useUserStatsData = (
+  accountAddress: string | null | undefined,
+  refreshTrigger?: number,
+) => {
   const { result: userStats, ...rest } = useApiRx(
     useCallback(
       (apiRx) => {
@@ -221,7 +224,8 @@ export const useUserStatsData = (accountAddress: string | null | undefined) => {
           }),
         );
       },
-      [accountAddress],
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [accountAddress, refreshTrigger],
     ),
   );
 

apps/tangle-cloud/src/data/services/useUserOwnedInstances.ts

@@ -16,6 +16,7 @@ import { encodeAddress, decodeAddress } from '@polkadot/util-crypto';
 
 export const useUserOwnedInstances = (
   userAddress: SubstrateAddress | null | undefined,
+  refreshTrigger?: number,
 ) => {
   const { result: userOwnedData, ...rest } = useApiRx(
     useCallback(
@@ -163,7 +164,8 @@ export const useUserOwnedInstances = (
           }),
         );
       },
-      [userAddress],
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [userAddress, refreshTrigger],
     ),
   );
 

apps/tangle-cloud/src/pages/blueprints/[id]/page.tsx

@@ -62,10 +62,6 @@ const Page = () => {
       <div className="space-y-5">
         <SkeletonLoader className="min-h-64" />
 
-        <Typography variant="h4" fw="bold">
-          Operators running
-        </Typography>
-
         <SkeletonLoader className="min-h-52" />
       </div>
     );
@@ -111,13 +107,16 @@ const Page = () => {
       />
 
       <div className="space-y-5">
-        <Typography variant="h4" fw="bold">
-          Registered Operators
-        </Typography>
+        {!isLoading && (
+          <Typography variant="h4" fw="bold">
+            Registered Operators
+          </Typography>
+        )}
 
         <OperatorsTable
           RestakeOperatorAction={RestakeOperatorAction}
           data={result.operators}
+          isLoading={isLoading}
         />
       </div>
 

apps/tangle-cloud/src/pages/instances/AccountStatsCard.tsx

@@ -7,6 +7,7 @@ import {
   isSubstrateAddress,
   KeyValueWithButton,
   shortenString,
+  Chip,
 } from '@tangle-network/ui-components';
 import useNetworkStore from '@tangle-network/tangle-shared-ui/context/useNetworkStore';
 import useSWRImmutable from 'swr/immutable';
@@ -21,7 +22,10 @@ import useOperatorInfo from '@tangle-network/tangle-shared-ui/hooks/useOperatorI
 import { useOperatorStatsData } from '../../data/operators/useOperatorStatsData';
 import { useUserStatsData } from '../../data/operators/useUserStatsData';
 
-export const AccountStatsCard: FC<AccountStatsCardProps> = (props) => {
+export const AccountStatsCard: FC<
+  AccountStatsCardProps & { refreshTrigger?: number }
+> = (props) => {
+  const { refreshTrigger, ...cardProps } = props;
   const accountAddress = useActiveAccountAddress();
   const { isOperator } = useOperatorInfo();
   const rpcEndpoints = useNetworkStore((store) => store.network.wsRpcEndpoints);
@@ -39,6 +43,7 @@ export const AccountStatsCard: FC<AccountStatsCardProps> = (props) => {
 
       return accountAddress;
     }, [accountAddress, isOperator]),
+    refreshTrigger,
   );
 
   const { result: userStatsData } = useUserStatsData(
@@ -49,6 +54,7 @@ export const AccountStatsCard: FC<AccountStatsCardProps> = (props) => {
 
       return accountAddress;
     }, [accountAddress]),
+    refreshTrigger,
   );
 
   const { data: accountInfo } = useSWRImmutable(
@@ -133,40 +139,41 @@ export const AccountStatsCard: FC<AccountStatsCardProps> = (props) => {
       operatorStatsData && operatorStatsData.registeredBlueprints > 0;
     const isActiveOperator = isOperator && hasOperatorData;
 
-    return [
-      {
-        title: 'Registered Blueprints',
-        children: isActiveOperator ? operatorStatsData.registeredBlueprints : 0,
-        tooltip: 'Number of blueprints you have registered as an operator',
-      },
-      {
-        title: 'Running Services',
-        children: isActiveOperator
-          ? operatorStatsData.runningServices
-          : userStatsData.runningServices,
-        tooltip: isActiveOperator
-          ? 'Services currently running that you operate as an operator'
-          : 'Services currently running that you have deployed',
-      },
-      {
-        title: 'Pending Services',
-        children: isActiveOperator
-          ? operatorStatsData.pendingServices
-          : userStatsData.pendingServices,
-        tooltip: isActiveOperator
-          ? 'Service requests pending your approval/rejection as an operator'
-          : 'Service requests you have submitted that are pending operator approval',
-      },
-      {
-        title: 'Deployed Services',
-        children: userStatsData.deployedServices,
-        tooltip: 'Total services you have deployed as a user/deployer',
-      },
-    ];
-  }, [operatorStatsData, userStatsData, isOperator]);
+    const items = [];
+
+    // Only show operator-specific stats if user is an operator with registered blueprints
+    if (isActiveOperator) {
+      items.push(
+        {
+          title: 'Registered Blueprints',
+          children: operatorStatsData.registeredBlueprints,
+          tooltip: 'Number of blueprints you have registered as an operator',
+        },
+        {
+          title: 'Running Services',
+          children: operatorStatsData.runningServices,
+          tooltip: 'Services currently running that you operate as an operator',
+        },
+        {
+          title: 'Pending Services',
+          children: operatorStatsData.pendingServices,
+          tooltip:
+            'Service requests pending your approval/rejection as an operator',
+        },
+      );
+    }
+
+    // Always show deployed services for all users
+    items.push({
+      title: 'Deployed Services',
+      children: userStatsData.deployedServices,
+      tooltip: 'Total services you have deployed as a user/deployer',
+    });
 
+    return items;
+  }, [operatorStatsData, userStatsData, isOperator]);
   return (
-    <AccountStatsDetailCard.Root {...props.rootProps}>
+    <AccountStatsDetailCard.Root {...cardProps.rootProps}>
       <AccountStatsDetailCard.Header
         IconElement={
           <Avatar
@@ -176,6 +183,13 @@ export const AccountStatsCard: FC<AccountStatsCardProps> = (props) => {
           />
         }
         title={identityName}
+        RightElement={
+          isOperator ? (
+            <Chip color="blue" className="text-xs px-2 py-1">
+              Operator
+            </Chip>
+          ) : undefined
+        }
         description={
           <KeyValueWithButton
             size="sm"

apps/tangle-cloud/src/pages/instances/BlueprintManagementSection.tsx

@@ -1,15 +1,50 @@
 import { RegisteredBlueprintsTabs } from './RegisteredBlueprints';
 import { InstancesTabs } from './Instances';
-import { FC } from 'react';
+import { FC, Dispatch, SetStateAction, useMemo } from 'react';
 import useOperatorInfo from '@tangle-network/tangle-shared-ui/hooks/useOperatorInfo';
+import { useOperatorStatsData } from '../../data/operators/useOperatorStatsData';
+import useActiveAccountAddress from '@tangle-network/tangle-shared-ui/hooks/useActiveAccountAddress';
+import { isSubstrateAddress } from '@tangle-network/ui-components';
 
-export const BlueprintManagementSection: FC = () => {
+interface BlueprintManagementSectionProps {
+  refreshTrigger: number;
+  setRefreshTrigger: Dispatch<SetStateAction<number>>;
+}
+
+export const BlueprintManagementSection: FC<
+  BlueprintManagementSectionProps
+> = ({ refreshTrigger, setRefreshTrigger }) => {
   const { isOperator } = useOperatorInfo();
+  const accountAddress = useActiveAccountAddress();
+
+  const { result: operatorStatsData } = useOperatorStatsData(
+    useMemo(() => {
+      if (
+        !accountAddress ||
+        !isOperator ||
+        !isSubstrateAddress(accountAddress)
+      ) {
+        return null;
+      }
+
+      return accountAddress;
+    }, [accountAddress, isOperator]),
+    refreshTrigger,
+  );
+
+  const hasRegisteredBlueprints = useMemo(() => {
+    return operatorStatsData && operatorStatsData.registeredBlueprints > 0;
+  }, [operatorStatsData]);
+
+  const shouldShowRegisteredBlueprints = isOperator && hasRegisteredBlueprints;
 
   return (
     <>
-      {isOperator && <RegisteredBlueprintsTabs />}
-      <InstancesTabs />
+      {shouldShowRegisteredBlueprints && <RegisteredBlueprintsTabs />}
+      <InstancesTabs
+        refreshTrigger={refreshTrigger}
+        setRefreshTrigger={setRefreshTrigger}
+      />
     </>
   );
 };