Wormhole Support

codegen.ts

@@ -1,7 +1,8 @@
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
-  schema: 'https://subsquid.quantus.com/graphql',
+  schema:
+    process.env.CODEGEN_SCHEMA_URL || 'https://subsquid.quantus.com/graphql',
   documents: ['src/**/*.{ts,tsx}'],
   generates: {
     './src/__generated__/': {

src/api/index.tsx

@@ -10,6 +10,7 @@ import { minerRewards } from './miner-rewards';
 import { reversibleTransactions } from './reversible-transactions';
 import { search } from './search';
 import { transactions } from './transactions';
+import { wormhole } from './wormhole';
 
 const useApiClient = () => {
   const fetcher = useFetchClient();
@@ -24,7 +25,8 @@ const useApiClient = () => {
     blocks,
     minerRewards,
     minerLeaderboard,
-    highSecuritySets
+    highSecuritySets,
+    wormhole
   };
 
   return api;

src/api/wormhole.tsx

@@ -0,0 +1,124 @@
+import { gql, useQuery } from '@apollo/client';
+import { DATA_POOL_INTERVAL } from '@/constants/data-pool-interval';
+import type {
+  WormholeExtrinsicListResponse,
+  WormholeExtrinsicResponse,
+  DepositPoolStatsResponse
+} from '@/schemas/wormhole';
+
+const GET_WORMHOLE_EXTRINSICS = gql`
+  query GetWormholeExtrinsics(
+    $limit: Int
+    $offset: Int
+    $orderBy: [WormholeExtrinsicOrderByInput!]!
+    $where: WormholeExtrinsicWhereInput
+  ) {
+    wormholeExtrinsics(
+      limit: $limit
+      offset: $offset
+      orderBy: $orderBy
+      where: $where
+    ) {
+      id
+      extrinsicHash
+      totalAmount
+      outputCount
+      timestamp
+      privacyScore
+      privacyLabel
+      block {
+        height
+      }
+    }
+    meta: wormholeExtrinsicsConnection(orderBy: id_ASC) {
+      totalCount
+    }
+  }
+`;
+
+const GET_WORMHOLE_EXTRINSIC_BY_ID = gql`
+  query GetWormholeExtrinsicById($id: String!) {
+    wormholeExtrinsicById(id: $id) {
+      id
+      extrinsicHash
+      totalAmount
+      outputCount
+      timestamp
+      privacyScore
+      privacyScore01Pct
+      privacyScore1Pct
+      privacyScore5Pct
+      privacyLabel
+      poolSnapshot
+      block {
+        id
+        height
+        hash
+        timestamp
+      }
+      outputs {
+        id
+        exitAccount {
+          id
+        }
+        amount
+      }
+    }
+    wormholeNullifiers(where: { extrinsic: { id_eq: $id } }) {
+      nullifier
+      nullifierHash
+    }
+  }
+`;
+
+const GET_DEPOSIT_POOL_STATS = gql`
+  query GetDepositPoolStats {
+    depositPoolStatsById(id: "global") {
+      lastUpdatedBlock
+      buckets
+    }
+  }
+`;
+
+export const wormhole = {
+  useGetAll: (config?: {
+    pollInterval?: number;
+    variables?: Record<string, unknown>;
+  }) => {
+    const { pollInterval = DATA_POOL_INTERVAL, variables = {} } = config ?? {};
+    const {
+      orderBy = 'timestamp_DESC',
+      limit = 25,
+      offset = 0,
+      where
+    } = variables as Record<string, unknown>;
+
+    return useQuery<WormholeExtrinsicListResponse>(GET_WORMHOLE_EXTRINSICS, {
+      pollInterval,
+      variables: { orderBy: [orderBy], limit, offset, where }
+    });
+  },
+
+  getById: () => {
+    return {
+      useQuery: (id: string, config?: { pollInterval?: number }) => {
+        const { pollInterval = 0 } = config ?? {};
+        return useQuery<WormholeExtrinsicResponse>(
+          GET_WORMHOLE_EXTRINSIC_BY_ID,
+          {
+            variables: { id },
+            pollInterval,
+            skip: !id
+          }
+        );
+      }
+    };
+  },
+
+  useGetDepositPoolStats: (config?: { pollInterval?: number }) => {
+    const { pollInterval = DATA_POOL_INTERVAL } = config ?? {};
+    return useQuery<DepositPoolStatsResponse>(GET_DEPOSIT_POOL_STATS, {
+      pollInterval
+    });
+  }
+};

src/components/common/network-provider/network-provider.tsx

@@ -1,11 +1,22 @@
 import React, { createContext, useContext, useMemo, useState } from 'react';
 
-type NetworkName = 'dirac';
+const ENABLE_LOCAL_NETWORK =
+  import.meta.env.VITE_ENABLE_LOCAL_NETWORK === 'true';
 
-export const NETWORKS: Record<NetworkName, string> = {
+const BASE_NETWORKS = {
   dirac: 'https://subsquid.quantus.com/graphql'
 } as const;
 
+const LOCAL_NETWORK = {
+  local: 'http://localhost:4350/graphql'
+} as const;
+
+export const NETWORKS: Record<string, string> = ENABLE_LOCAL_NETWORK
+  ? { ...BASE_NETWORKS, ...LOCAL_NETWORK }
+  : BASE_NETWORKS;
+
+type NetworkName = keyof typeof NETWORKS;
+
 type NetworkProviderProps = {
   children: React.ReactNode;
   defaultNetwork?: NetworkName;
@@ -19,7 +30,7 @@ type NetworkProviderState = {
 };
 
 const initialState: NetworkProviderState = {
-  networkUrl: NETWORKS.dirac,
+  networkUrl: BASE_NETWORKS.dirac,
   networkName: 'dirac',
   setNetwork: () => null
 };
@@ -36,7 +47,9 @@ export function NetworkProvider({
   const [networkName, setNetwork] = useState<NetworkName>(
     () => (localStorage.getItem(storageKey) as NetworkName) || defaultNetwork
   );
-  const [networkUrl, setNetworkUrl] = useState(() => NETWORKS[networkName]);
+  const [networkUrl, setNetworkUrl] = useState(
+    () => NETWORKS[networkName] ?? BASE_NETWORKS.dirac
+  );
 
   const value = useMemo(() => {
     const initialValue = {
@@ -45,7 +58,7 @@ export function NetworkProvider({
       setNetwork: (newNetworkName: NetworkName) => {
         localStorage.setItem(storageKey, newNetworkName);
         setNetwork(newNetworkName);
-        setNetworkUrl(NETWORKS[newNetworkName]);
+        setNetworkUrl(NETWORKS[newNetworkName] ?? BASE_NETWORKS.dirac);
       }
     };
 

src/components/common/table-columns/WORMHOLE_OUTPUT_COLUMNS.tsx

@@ -0,0 +1,70 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { LinkWithCopy } from '@/components/ui/composites/link-with-copy/LinkWithCopy';
+import { TimestampDisplay } from '@/components/ui/timestamp-display';
+import { RESOURCES } from '@/constants/resources';
+import { formatMonetaryValue, formatTxAddress } from '@/utils/formatter';
+import { PrivacyScoreBadge } from '@/components/features/wormhole/PrivacyScoreBadge';
+import type { WormholeExtrinsic } from '@/schemas/wormhole';
+
+export type WormholeExtrinsicRow = WormholeExtrinsic;
+
+const columnHelper = createColumnHelper<WormholeExtrinsicRow>();
+
+export const WORMHOLE_EXTRINSIC_COLUMNS = [
+  columnHelper.accessor('extrinsicHash', {
+    id: 'extrinsic_hash',
+    header: 'Extrinsic',
+    cell: (props) => {
+      const hash = props.getValue();
+      const id = props.row.original.id;
+      return (
+        <LinkWithCopy
+          href={`${RESOURCES.wormhole}/${id}`}
+          text={hash ? formatTxAddress(hash) : formatTxAddress(id)}
+        />
+      );
+    },
+    enableSorting: false
+  }),
+  columnHelper.accessor('totalAmount', {
+    id: 'total_amount',
+    header: 'Total Amount',
+    cell: (props) => formatMonetaryValue(Number(props.getValue())),
+    enableSorting: true
+  }),
+  columnHelper.accessor('outputCount', {
+    id: 'output_count',
+    header: 'Outputs',
+    cell: (props) => props.getValue(),
+    enableSorting: false
+  }),
+  columnHelper.accessor('privacyScore', {
+    id: 'privacy_score',
+    header: 'Privacy',
+    cell: (props) => (
+      <PrivacyScoreBadge
+        score={props.getValue()}
+        label={props.row.original.privacyLabel}
+      />
+    ),
+    enableSorting: true
+  }),
+  columnHelper.accessor('block.height', {
+    id: 'block_height',
+    header: 'Block',
+    cell: (props) => (
+      <LinkWithCopy
+        href={`${RESOURCES.blocks}/${props.getValue()}`}
+        text={props.getValue().toString()}
+      />
+    ),
+    enableSorting: true
+  }),
+  columnHelper.accessor('timestamp', {
+    id: 'timestamp',
+    header: 'Timestamp',
+    cell: (props) => <TimestampDisplay timestamp={props.getValue()} />,
+    enableSorting: true
+  })
+];

src/components/features/wormhole/DepositPoolStats.tsx

@@ -0,0 +1,74 @@
+import useApiClient from '@/api';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+export const DepositPoolStatsCard = () => {
+  const api = useApiClient();
+  const { data, loading } = api.wormhole.useGetDepositPoolStats();
+
+  const stats = data?.depositPoolStatsById;
+
+  if (loading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Deposit Pool</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="animate-pulse space-y-2">
+            <div className="h-4 w-24 rounded bg-muted" />
+            <div className="h-4 w-32 rounded bg-muted" />
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!stats) return null;
+
+  // Parse buckets JSON and compute totals
+  let totalDeposits = 0;
+  let totalValue = 0;
+  try {
+    const buckets = JSON.parse(stats.buckets);
+    // Use bucket 0 [0, 1 DEV) as it contains all sub-DEV deposits without overlap
+    // Sum all buckets but avoid double-counting from overlaps by just using count from non-overlapping ranges
+    // Simplest: just show the raw bucket data
+    for (const b of buckets) {
+      // Only count non-overlapping contributions (first bucket that contains each deposit)
+      // For display purposes, sum the largest bucket's count as a rough total
+      if (b.count > totalDeposits) totalDeposits = b.count;
+      totalValue += Number(b.sumAmounts);
+    }
+    // Actually, deposits appear in multiple overlapping buckets, so just sum unique ones
+    // The [0, 1 DEV) bucket is non-overlapping with others for sub-DEV deposits
+    // For a rough total, use the sum across all non-overlapping base buckets
+    totalDeposits = buckets.reduce(
+      (sum: number, b: { count: number }) => sum + b.count,
+      0
+    );
+  } catch {
+    // fallback
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Wormhole Deposit Pool</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <p className="text-sm text-muted-foreground">Deposits Tracked</p>
+            <p className="text-2xl font-bold">
+              {totalDeposits.toLocaleString()}
+            </p>
+          </div>
+          <div>
+            <p className="text-sm text-muted-foreground">Last Updated</p>
+            <p className="text-2xl font-bold">Block {stats.lastUpdatedBlock}</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

src/components/features/wormhole/PrivacyScoreBadge.tsx

@@ -0,0 +1,35 @@
+import { cn } from '@/lib/utils';
+
+interface PrivacyScoreBadgeProps {
+  score: number;
+  label: string;
+}
+
+const labelColors: Record<string, string> = {
+  Critical: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
+  Weak: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400',
+  Moderate:
+    'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
+  Strong:
+    'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
+  'Very Strong':
+    'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400'
+};
+
+export const PrivacyScoreBadge = ({ score, label }: PrivacyScoreBadgeProps) => {
+  const colorClass =
+    labelColors[label] ??
+    'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400';
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium',
+        colorClass
+      )}
+    >
+      <span>{score.toFixed(1)} bits</span>
+      <span className="opacity-70">({label})</span>
+    </span>
+  );
+};