chore(tangle-dapp): Registered blueprint chip & fix tangle-dapp blueprints page (#3022)

devpavan04 · web-flow · commit 80aa415c1ab4 · 2025-05-19T17:30:04.000+03:00
diff --git a/apps/tangle-cloud/src/pages/blueprints/ConfigureBlueprintModal/types.ts b/apps/tangle-cloud/src/pages/blueprints/ConfigureBlueprintModal/types.ts
@@ -1,7 +1,11 @@
 import { z } from 'zod';
 
 export const blueprintFormSchema = z.object({
-  rpcUrl: z.string().url({ message: 'Please enter a valid URL' }).optional(),
+  rpcUrl: z
+    .string()
+    .url({ message: 'Please enter a valid URL' })
+    .or(z.literal(''))
+    .optional(),
 });
 
 export type BlueprintFormSchema = z.infer<typeof blueprintFormSchema>;
diff --git a/apps/tangle-cloud/src/pages/blueprints/[id]/page.tsx b/apps/tangle-cloud/src/pages/blueprints/[id]/page.tsx
@@ -6,15 +6,15 @@ import useBlueprintDetails from '@tangle-network/tangle-shared-ui/data/restake/u
 import { ErrorFallback } from '@tangle-network/ui-components/components/ErrorFallback';
 import SkeletonLoader from '@tangle-network/ui-components/components/SkeletonLoader';
 import { Typography } from '@tangle-network/ui-components/typography/Typography';
-import { type FC, type PropsWithChildren, useState } from 'react';
+import { type FC, type PropsWithChildren, useMemo, useState } from 'react';
 import { Link, useNavigate, Navigate } from 'react-router-dom';
 import { PagePath, TangleDAppPagePath } from '../../../types';
 import ConfigureBlueprintModal from '../ConfigureBlueprintModal';
 import { Modal } from '@tangle-network/ui-components';
 import type { BlueprintFormResult } from '../ConfigureBlueprintModal/types';
 
 import { SessionStorageKey } from '../../../constants';
-import useOperatorInfo from '../../../hooks/useOperatorInfo';
+import useOperatorInfo from '@tangle-network/tangle-shared-ui/hooks/useOperatorInfo';
 import useParamWithSchema from '@tangle-network/tangle-shared-ui/hooks/useParamWithSchema';
 import { z } from 'zod';
 
@@ -36,9 +36,15 @@ const Page = () => {
   const navigate = useNavigate();
   const id = useParamWithSchema('id', z.coerce.bigint());
   const { result, isLoading, error } = useBlueprintDetails(id);
-  const { isOperator } = useOperatorInfo();
+  const { isOperator, operatorAddress } = useOperatorInfo();
   const [isBlueprintModalOpen, setIsBlueprintModalOpen] = useState(false);
 
+  const isRegistered = useMemo(() => {
+    return result?.operators.some(
+      (operator) => operator.address === operatorAddress,
+    );
+  }, [operatorAddress, result?.operators]);
+
   if (isLoading) {
     return (
       <div className="space-y-5">
@@ -79,7 +85,7 @@ const Page = () => {
       <BlueprintHeader
         blueprint={result.details}
         enableDeploy
-        enableRegister={isOperator}
+        enableRegister={isOperator && !isRegistered}
         deployBtnProps={{
           onClick: (e) => {
             e.preventDefault();
@@ -89,6 +95,7 @@ const Page = () => {
         registerBtnProps={{
           onClick: () => setIsBlueprintModalOpen(true),
         }}
+        isRegistered={isRegistered ?? false}
       />
 
       <div className="space-y-5">
diff --git a/apps/tangle-cloud/src/pages/blueprints/page.tsx b/apps/tangle-cloud/src/pages/blueprints/page.tsx
@@ -19,7 +19,7 @@ import { BlueprintFormResult } from './ConfigureBlueprintModal/types';
 import { useNavigate } from 'react-router';
 import { SessionStorageKey } from '../../constants';
 import { PagePath } from '../../types';
-import useOperatorInfo from '../../hooks/useOperatorInfo';
+import useOperatorInfo from '@tangle-network/tangle-shared-ui/hooks/useOperatorInfo';
 
 const ROLE_TITLE = {
   [Role.OPERATOR]: 'Register Your First Blueprint',
diff --git a/apps/tangle-cloud/src/pages/instances/AccountStatsCard.tsx b/apps/tangle-cloud/src/pages/instances/AccountStatsCard.tsx
@@ -17,7 +17,7 @@ import {
 } from '@tangle-network/tangle-shared-ui/utils/polkadot/identity';
 import { isValidUrl } from '@tangle-network/dapp-types';
 import useActiveAccountAddress from '@tangle-network/tangle-shared-ui/hooks/useActiveAccountAddress';
-import useOperatorInfo from '../../hooks/useOperatorInfo';
+import useOperatorInfo from '@tangle-network/tangle-shared-ui/hooks/useOperatorInfo';
 import { useOperatorStatsData } from '../../data/operators/useOperatorStatsData';
 import { useUserStatsData } from '../../data/operators/useUserStatsData';
 
diff --git a/apps/tangle-cloud/src/pages/instances/BlueprintManagementSection.tsx b/apps/tangle-cloud/src/pages/instances/BlueprintManagementSection.tsx
@@ -1,7 +1,7 @@
 import { RegisteredBlueprintsTabs } from './RegisteredBlueprints';
 import { InstancesTabs } from './Instances';
 import { FC } from 'react';
-import useOperatorInfo from '../../hooks/useOperatorInfo';
+import useOperatorInfo from '@tangle-network/tangle-shared-ui/hooks/useOperatorInfo';
 
 export const BlueprintManagementSection: FC = () => {
   const { isOperator } = useOperatorInfo();
diff --git a/apps/tangle-cloud/src/pages/instances/Instances/PendingInstanceTable.tsx b/apps/tangle-cloud/src/pages/instances/Instances/PendingInstanceTable.tsx
@@ -38,7 +38,7 @@ import useSubstrateAddress from '@tangle-network/tangle-shared-ui/hooks/useSubst
 import useIdentities from '@tangle-network/tangle-shared-ui/hooks/useIdentities';
 import useServicesRejectTx from '../../../data/services/useServicesRejectTx';
 import useServicesApproveTx from '../../../data/services/useServicesApproveTx';
-import useOperatorInfo from '../../../hooks/useOperatorInfo';
+import useOperatorInfo from '@tangle-network/tangle-shared-ui/hooks/useOperatorInfo';
 
 const columnHelper = createColumnHelper<MonitoringServiceRequest>();
 
diff --git a/apps/tangle-cloud/src/pages/instances/Instances/RunningInstanceTable.tsx b/apps/tangle-cloud/src/pages/instances/Instances/RunningInstanceTable.tsx
@@ -23,7 +23,7 @@ import TableCellWrapper from '@tangle-network/tangle-shared-ui/components/tables
 import { Link } from 'react-router';
 import { PagePath } from '../../../types';
 import { MonitoringBlueprint } from '@tangle-network/tangle-shared-ui/data/blueprints/utils/type';
-import useOperatorInfo from '../../../hooks/useOperatorInfo';
+import useOperatorInfo from '@tangle-network/tangle-shared-ui/hooks/useOperatorInfo';
 import useMonitoringBlueprints from '@tangle-network/tangle-shared-ui/data/blueprints/useMonitoringBlueprints';
 
 const columnHelper =
diff --git a/apps/tangle-cloud/src/pages/instances/RegisteredBlueprints/RegisteredBlueprints.tsx b/apps/tangle-cloud/src/pages/instances/RegisteredBlueprints/RegisteredBlueprints.tsx
@@ -21,7 +21,7 @@ import { Link } from 'react-router';
 import { PagePath } from '../../../types';
 import getTVLToDisplay from '@tangle-network/tangle-shared-ui/utils/getTVLToDisplay';
 import useRegisteredBlueprints from '@tangle-network/tangle-shared-ui/data/blueprints/useRegisteredBlueprints';
-import useOperatorInfo from '../../../hooks/useOperatorInfo';
+import useOperatorInfo from '@tangle-network/tangle-shared-ui/hooks/useOperatorInfo';
 
 export type RegisteredBlueprintsTableProps = {
   blueprints: MonitoringBlueprint[];
diff --git a/apps/tangle-dapp/src/pages/blueprints/BlueprintListing.tsx b/apps/tangle-dapp/src/pages/blueprints/BlueprintListing.tsx
@@ -14,9 +14,13 @@ const BlueprintItemWrapper: FC<PropsWithChildren<{ id: bigint }>> = ({
 const BlueprintListing: FC = () => {
   const { blueprints, isLoading, error } = useAllBlueprints();
 
+  const blueprintsArray = Array.isArray(blueprints)
+    ? blueprints
+    : Array.from(blueprints?.values() || []);
+
   return (
     <BlueprintGallery
-      blueprints={Object.values(blueprints).map((blueprint) => ({
+      blueprints={blueprintsArray.map((blueprint) => ({
         ...blueprint,
         renderImage(imageUrl) {
           return (
diff --git a/apps/tangle-dapp/src/pages/blueprints/[id]/index.tsx b/apps/tangle-dapp/src/pages/blueprints/[id]/index.tsx
@@ -4,16 +4,24 @@ import useBlueprintDetails from '@tangle-network/tangle-shared-ui/data/restake/u
 import { ErrorFallback } from '@tangle-network/ui-components/components/ErrorFallback';
 import SkeletonLoader from '@tangle-network/ui-components/components/SkeletonLoader';
 import { Typography } from '@tangle-network/ui-components/typography/Typography';
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 import { Navigate } from 'react-router';
 import { PagePath } from '../../../types';
 import useParamWithSchema from '@tangle-network/tangle-shared-ui/hooks/useParamWithSchema';
+import useOperatorInfo from '@tangle-network/tangle-shared-ui/hooks/useOperatorInfo';
 import { z } from 'zod';
 
 const BlueprintDetailsPage: FC = () => {
+  const { operatorAddress } = useOperatorInfo();
   const id = useParamWithSchema('id', z.coerce.bigint());
   const { result, isLoading, error } = useBlueprintDetails(id);
 
+  const isRegistered = useMemo(() => {
+    return result?.operators.some(
+      (operator) => operator.address === operatorAddress,
+    );
+  }, [operatorAddress, result?.operators]);
+
   if (id === undefined) {
     return <Navigate to={PagePath.NOT_FOUND} />;
   } else if (isLoading || result === null) {
@@ -34,7 +42,10 @@ const BlueprintDetailsPage: FC = () => {
 
   return (
     <div className="space-y-5">
-      <BlueprintHeader blueprint={result.details} />
+      <BlueprintHeader
+        blueprint={result.details}
+        isRegistered={isRegistered ?? false}
+      />
 
       <div className="space-y-5">
         <Typography variant="h4" fw="bold">
diff --git a/libs/tangle-shared-ui/src/components/blueprints/BlueprintHeader.tsx b/libs/tangle-shared-ui/src/components/blueprints/BlueprintHeader.tsx
@@ -7,13 +7,15 @@ import { ComponentProps, FC } from 'react';
 import { twMerge } from 'tailwind-merge';
 import type { Blueprint } from '../../types/blueprint';
 import BoostedChip from './BoostedChip';
+import RegisteredChip from './RegisteredChip';
 
 interface BlueprintHeaderProps {
   blueprint: Blueprint;
   enableRegister?: boolean;
   registerBtnProps?: ComponentProps<typeof Button>;
   enableDeploy?: boolean;
   deployBtnProps?: ComponentProps<typeof Button>;
+  isRegistered: boolean;
 }
 
 const BlueprintHeader: FC<BlueprintHeaderProps> = ({
@@ -22,6 +24,7 @@ const BlueprintHeader: FC<BlueprintHeaderProps> = ({
   enableRegister,
   registerBtnProps,
   deployBtnProps,
+  isRegistered,
 }) => {
   const {
     isBoosted,
@@ -77,23 +80,28 @@ const BlueprintHeader: FC<BlueprintHeaderProps> = ({
             )}
             <div className="space-y-4">
               <div>
-                <div className="flex items-center gap-1">
-                  <Typography variant="h4" fw="bold">
-                    {name}
-                  </Typography>
-                  {githubUrl && (
-                    <a
-                      href={githubUrl}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <GithubFill
-                        size="lg"
-                        className="!fill-mono-200 dark:!fill-mono-0 hover:!fill-mono-120 dark:hover:!fill-mono-80"
-                      />
-                    </a>
-                  )}
-                  {isBoosted && <BoostedChip />}
+                <div className="flex items-center gap-4">
+                  <div className="flex items-center gap-1">
+                    <Typography variant="h4" fw="bold">
+                      {name}
+                    </Typography>
+                    {githubUrl && (
+                      <a
+                        href={githubUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <GithubFill
+                          size="lg"
+                          className="!fill-mono-200 dark:!fill-mono-0 hover:!fill-mono-120 dark:hover:!fill-mono-80"
+                        />
+                      </a>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-1">
+                    {isBoosted && <BoostedChip />}
+                    {isRegistered && <RegisteredChip />}
+                  </div>
                 </div>
                 <div className="flex items-center">
                   <Typography
diff --git a/libs/tangle-shared-ui/src/components/blueprints/RegisteredChip.tsx b/libs/tangle-shared-ui/src/components/blueprints/RegisteredChip.tsx
@@ -0,0 +1,20 @@
+import { Typography } from '@tangle-network/ui-components/typography/Typography';
+import { FC } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const RegisteredChip: FC = () => {
+  return (
+    <div
+      className={twMerge(
+        'px-2 py-1 rounded-full border border-mono-180 dark:border-mono-80 flex items-center gap-0.5',
+        'shadow-[0px_-7px_11px_0px_rgba(185,183,255,0.24)] dark:shadow-[0px_-7px_11px_0px_rgba(185,183,255,0.12)]',
+      )}
+    >
+      <Typography variant="body4" className="text-mono-180 dark:text-mono-80">
+        Registered
+      </Typography>
+    </div>
+  );
+};
+
+export default RegisteredChip;
diff --git a/libs/tangle-shared-ui/src/components/blueprints/RestakeBanner.tsx b/libs/tangle-shared-ui/src/components/blueprints/RestakeBanner.tsx
@@ -26,7 +26,7 @@ const RestakeBanner: FC<RestakeBannerProps> = ({
         'flex flex-col sm:flex-row justify-between items-start sm:items-center gap-6 sm:gap-9 px-6 py-9 rounded-xl bg-center bg-cover bg-no-repeat bg-top-banner',
       )}
     >
-      <div className="max-w-[600px] space-y-4">
+      <div className="space-y-4">
         <div className="space-y-3">
           <Typography variant="h4" className="text-mono-0">
             {title}
diff --git a/libs/tangle-shared-ui/src/hooks/useOperatorInfo.tsx b/libs/tangle-shared-ui/src/hooks/useOperatorInfo.tsx
@@ -2,7 +2,7 @@ import { useActiveAccount } from '@tangle-network/api-provider-environment/hooks
 import { toSubstrateAddress } from '@tangle-network/ui-components/utils/toSubstrateAddress';
 import { isSolanaAddress } from '@tangle-network/ui-components/utils/isSolanaAddress';
 import { useMemo } from 'react';
-import useNetworkStore from '@tangle-network/tangle-shared-ui/context/useNetworkStore';
+import useNetworkStore from '../context/useNetworkStore';
 import type { SubstrateAddress } from '@tangle-network/ui-components/types/address';
 import { isEvmAddress } from '@tangle-network/ui-components';
 
