From 0ab5baf4d6748b3ce7d267f500f09b3f2377d336 Mon Sep 17 00:00:00 2001
From: Drew Stone <drewstone329@gmail.com>
Date: Wed, 24 Jun 2026 15:59:47 -0600
Subject: [PATCH] [RELEASE] feat(tangle-cloud): show global indexer data on
 instances page when disconnected

Visitors now see real product activity immediately without connecting a
wallet: global blueprint count, service count, operator count from the live
indexer + TotalValueLocked tabs. Wallet-specific sections (AccountStatsCard,
InstructionCard, BlueprintManagementSection) only render when connected.

This fixes the #1 design-audit finding: 8 pages showing identical connect-wall
clones. The home/instances page now has a distinct, valuable disconnected
state showing live network stats.
---
 .../tangle-cloud/src/pages/instances/page.tsx | 54 +++++++++++++++----
 1 file changed, 43 insertions(+), 11 deletions(-)

diff --git a/apps/tangle-cloud/src/pages/instances/page.tsx b/apps/tangle-cloud/src/pages/instances/page.tsx
index 09dc0e0a8..338358b6c 100644
--- a/apps/tangle-cloud/src/pages/instances/page.tsx
+++ b/apps/tangle-cloud/src/pages/instances/page.tsx
@@ -2,6 +2,9 @@ import { useState } from 'react';
 import { Button } from '@tangle-network/sandbox-ui/primitives';
 import { Link } from 'react-router';
 import { useAccount } from 'wagmi';
+import { useAllBlueprints } from '@tangle-network/tangle-shared-ui/data/graphql';
+import { useAllServices } from '@tangle-network/tangle-shared-ui/data/graphql/useServices';
+import { useOperators } from '@tangle-network/tangle-shared-ui/data/graphql/useOperators';
 import { AccountStatsCard } from './AccountStatsCard';
 import { InstructionCard } from './InstructionCard';
 import { TotalValueLockedTabs } from './TotalValueLocked';
@@ -97,6 +100,29 @@ const Page = () => {
         ]
     : [];
 
+  // Global indexer data — works WITHOUT a wallet so visitors see real activity
+  const { blueprints: allBlueprints } = useAllBlueprints();
+  const { data: allServices } = useAllServices();
+  const { data: allOperators } = useOperators({ fallbackToOnChain: false });
+
+  const globalStats: Metric[] = [
+    {
+      label: 'Blueprints',
+      value: allBlueprints.size.toLocaleString(),
+      tone: 'neutral' as MetricTone,
+    },
+    {
+      label: 'Services',
+      value: (allServices?.length ?? 0).toLocaleString(),
+      tone: 'neutral' as MetricTone,
+    },
+    {
+      label: 'Operators',
+      value: (allOperators?.length ?? 0).toLocaleString(),
+      tone: 'neutral' as MetricTone,
+    },
+  ];
+
   return (
     <div className="space-y-6">
       <PageHeader
@@ -121,19 +147,25 @@ const Page = () => {
         }
       />
 
-      {isConnected && heroStats.length > 0 && (
-        <MetricStrip metrics={heroStats} density="compact" />
-      )}
+      {isConnected ? (
+        <>
+          {heroStats.length > 0 && (
+            <MetricStrip metrics={heroStats} density="compact" />
+          )}
 
-      <BlueprintManagementSection
-        refreshTrigger={refreshTrigger}
-        setRefreshTrigger={setRefreshTrigger}
-      />
+          <BlueprintManagementSection
+            refreshTrigger={refreshTrigger}
+            setRefreshTrigger={setRefreshTrigger}
+          />
 
-      <div className="grid gap-5 xl:grid-cols-2 xl:auto-rows-fr xl:items-stretch">
-        <AccountStatsCard refreshTrigger={refreshTrigger} />
-        <InstructionCard refreshTrigger={refreshTrigger} />
-      </div>
+          <div className="grid gap-5 xl:grid-cols-2 xl:auto-rows-fr xl:items-stretch">
+            <AccountStatsCard refreshTrigger={refreshTrigger} />
+            <InstructionCard refreshTrigger={refreshTrigger} />
+          </div>
+        </>
+      ) : (
+        <MetricStrip metrics={globalStats} density="compact" />
+      )}
       <TotalValueLockedTabs />
     </div>
   );