@tangle-network/blueprint-ui 0.1.0

package/src/preset.ts

@@ -0,0 +1,61 @@
+/**
+ * Blueprint UI semantic token theme for UnoCSS.
+ *
+ * Components in this package use classes like `text-bp-elements-textPrimary`.
+ * Each consuming app maps these to their own CSS variables by adding this
+ * theme object under a `bp` key in their UnoCSS config:
+ *
+ *   import { bpThemeTokens } from '@tangle-network/blueprint-ui/preset';
+ *   // theme: { colors: { bp: bpThemeTokens('cloud') } }
+ *   // theme: { colors: { bp: bpThemeTokens('arena') } }
+ */
+
+export function bpThemeTokens(prefix: string) {
+  return {
+    elements: {
+      borderColor: `var(--${prefix}-elements-borderColor)`,
+      borderColorActive: `var(--${prefix}-elements-borderColorActive)`,
+      background: {
+        depth: {
+          1: `var(--${prefix}-elements-bg-depth-1)`,
+          2: `var(--${prefix}-elements-bg-depth-2)`,
+          3: `var(--${prefix}-elements-bg-depth-3)`,
+          4: `var(--${prefix}-elements-bg-depth-4)`,
+        },
+      },
+      textPrimary: `var(--${prefix}-elements-textPrimary)`,
+      textSecondary: `var(--${prefix}-elements-textSecondary)`,
+      textTertiary: `var(--${prefix}-elements-textTertiary)`,
+      button: {
+        primary: {
+          background: `var(--${prefix}-elements-button-primary-background)`,
+          backgroundHover: `var(--${prefix}-elements-button-primary-backgroundHover)`,
+          text: `var(--${prefix}-elements-button-primary-text)`,
+        },
+        secondary: {
+          background: `var(--${prefix}-elements-button-secondary-background)`,
+          backgroundHover: `var(--${prefix}-elements-button-secondary-backgroundHover)`,
+          text: `var(--${prefix}-elements-button-secondary-text)`,
+        },
+        danger: {
+          background: `var(--${prefix}-elements-button-danger-background)`,
+          backgroundHover: `var(--${prefix}-elements-button-danger-backgroundHover)`,
+          text: `var(--${prefix}-elements-button-danger-text)`,
+        },
+      },
+      icon: {
+        success: `var(--${prefix}-elements-icon-success)`,
+        error: `var(--${prefix}-elements-icon-error)`,
+        warning: `var(--${prefix}-elements-icon-warning)`,
+        primary: `var(--${prefix}-elements-icon-primary)`,
+        secondary: `var(--${prefix}-elements-icon-secondary)`,
+      },
+      dividerColor: `var(--${prefix}-elements-dividerColor)`,
+      item: {
+        backgroundHover: `var(--${prefix}-elements-item-backgroundHover)`,
+        backgroundActive: `var(--${prefix}-elements-item-backgroundActive)`,
+      },
+      focus: `var(--${prefix}-elements-focus)`,
+    },
+  };
+}

package/src/stores/infra.ts

@@ -0,0 +1,43 @@
+import { persistedAtom } from './persistedAtom';
+
+const defaultBlueprintId = import.meta.env.VITE_BLUEPRINT_ID ?? '0';
+const defaultServiceId = import.meta.env.VITE_SERVICE_ID ?? import.meta.env.VITE_SERVICE_IDS?.split(',')[0] ?? '0';
+
+export interface OperatorInfo {
+  address: string;
+  rpcAddress: string;
+}
+
+export interface InfraConfig {
+  blueprintId: string;
+  serviceId: string;
+  /** Whether the user has validated the service on-chain */
+  serviceValidated: boolean;
+  /** Cached service info from last validation */
+  serviceInfo?: {
+    active: boolean;
+    operatorCount: number;
+    owner: string;
+    blueprintId: string;
+    permitted: boolean;
+    /** Operators with RPC endpoints (cached for RFQ) */
+    operators?: OperatorInfo[];
+  };
+}
+
+export const infraStore = persistedAtom<InfraConfig>({
+  key: 'bp_infra',
+  initial: {
+    blueprintId: defaultBlueprintId,
+    serviceId: defaultServiceId,
+    serviceValidated: false,
+  },
+});
+
+export function updateInfra(update: Partial<InfraConfig>) {
+  infraStore.set({ ...infraStore.get(), ...update });
+}
+
+export function getInfra(): InfraConfig {
+  return infraStore.get();
+}

package/src/stores/persistedAtom.ts

@@ -0,0 +1,67 @@
+import { atom, type WritableAtom } from 'nanostores';
+
+/**
+ * JSON serializer that handles bigint values (converts to `{__bigint: "123"}`).
+ * Needed because TrackedTx.blockNumber and gasUsed are bigints.
+ */
+export function serializeWithBigInt(value: unknown): string {
+  return JSON.stringify(value, (_key, v) =>
+    typeof v === 'bigint' ? { __bigint: v.toString() } : v,
+  );
+}
+
+/** Deserialize JSON produced by `serializeWithBigInt`. */
+export function deserializeWithBigInt<T>(raw: string): T {
+  return JSON.parse(raw, (_key, v) => {
+    if (v && typeof v === 'object' && '__bigint' in v && typeof v.__bigint === 'string') {
+      return BigInt(v.__bigint);
+    }
+    return v;
+  }) as T;
+}
+
+interface PersistedAtomOpts<T> {
+  /** localStorage key */
+  key: string;
+  /** Default value when nothing is stored */
+  initial: T;
+  /** Custom serializer (defaults to JSON.stringify) */
+  serialize?: (value: T) => string;
+  /** Custom deserializer (defaults to JSON.parse) */
+  deserialize?: (raw: string) => T;
+}
+
+/**
+ * A nanostores atom backed by localStorage.
+ * Restores on init, persists on every `.set()`.
+ * SSR-safe: falls back to `initial` when `window` is unavailable.
+ */
+export function persistedAtom<T>(opts: PersistedAtomOpts<T>): WritableAtom<T> {
+  const { key, initial, serialize = JSON.stringify, deserialize = JSON.parse } = opts;
+
+  let restored = initial;
+  if (typeof window !== 'undefined') {
+    try {
+      const raw = localStorage.getItem(key);
+      if (raw !== null) {
+        restored = deserialize(raw);
+      }
+    } catch {
+      // corrupt data — use initial
+    }
+  }
+
+  const store = atom<T>(restored);
+
+  if (typeof window !== 'undefined') {
+    store.subscribe((value: T) => {
+      try {
+        localStorage.setItem(key, serialize(value));
+      } catch {
+        // storage full or unavailable — silently ignore
+      }
+    });
+  }
+
+  return store;
+}

package/src/stores/session.ts

@@ -0,0 +1,64 @@
+import { persistedAtom } from './persistedAtom';
+
+export interface SessionEntry {
+  token: string;
+  address: string;
+  expiresAt: number;
+  sandboxId: string;
+}
+
+/**
+ * Persisted session tokens keyed by sandbox ID.
+ * Auto-cleaned on read if expired.
+ */
+export const sessionMapStore = persistedAtom<Record<string, SessionEntry>>({
+  key: 'bp_sessions',
+  initial: {},
+});
+
+/** Active session for a given sandbox. */
+export function getSession(sandboxId: string): SessionEntry | null {
+  const map = sessionMapStore.get();
+  const entry = map[sandboxId];
+  if (!entry) return null;
+
+  // Check expiry with 60s buffer
+  if (Date.now() / 1000 > entry.expiresAt - 60) {
+    removeSession(sandboxId);
+    return null;
+  }
+
+  return entry;
+}
+
+export function setSession(entry: SessionEntry) {
+  const map = { ...sessionMapStore.get() };
+  map[entry.sandboxId] = entry;
+  sessionMapStore.set(map);
+}
+
+export function removeSession(sandboxId: string) {
+  const map = { ...sessionMapStore.get() };
+  delete map[sandboxId];
+  sessionMapStore.set(map);
+}
+
+/** Clean up all expired sessions. */
+export function gcSessions() {
+  const now = Date.now() / 1000;
+  const map = sessionMapStore.get();
+  const cleaned: Record<string, SessionEntry> = {};
+  let changed = false;
+
+  for (const [key, entry] of Object.entries(map) as [string, SessionEntry][]) {
+    if (entry.expiresAt > now) {
+      cleaned[key] = entry;
+    } else {
+      changed = true;
+    }
+  }
+
+  if (changed) {
+    sessionMapStore.set(cleaned);
+  }
+}

package/src/stores/theme.ts

@@ -0,0 +1,28 @@
+import { atom } from 'nanostores';
+
+export type Theme = 'dark' | 'light';
+
+export const kTheme = 'bp_theme';
+export const DEFAULT_THEME = 'dark';
+
+export const themeStore = atom<Theme>(initStore());
+
+export function themeIsDark() {
+  return themeStore.get() === 'dark';
+}
+
+function initStore() {
+  if (typeof window !== 'undefined') {
+    const persisted = localStorage.getItem(kTheme) as Theme | undefined;
+    const attr = document.querySelector('html')?.getAttribute('data-theme');
+    return persisted ?? (attr as Theme) ?? DEFAULT_THEME;
+  }
+  return DEFAULT_THEME;
+}
+
+export function toggleTheme() {
+  const next = themeStore.get() === 'dark' ? 'light' : 'dark';
+  themeStore.set(next);
+  localStorage.setItem(kTheme, next);
+  document.querySelector('html')?.setAttribute('data-theme', next);
+}

package/src/stores/txHistory.ts

@@ -0,0 +1,47 @@
+import { computed } from 'nanostores';
+import { persistedAtom, serializeWithBigInt, deserializeWithBigInt } from './persistedAtom';
+
+export interface TrackedTx {
+  hash: `0x${string}`;
+  label: string;
+  status: 'pending' | 'confirmed' | 'failed';
+  timestamp: number;
+  chainId: number;
+  blockNumber?: bigint;
+  gasUsed?: bigint;
+}
+
+const MAX_TXS = 50;
+
+export const txListStore = persistedAtom<TrackedTx[]>({
+  key: 'bp_tx_history',
+  initial: [],
+  serialize: serializeWithBigInt,
+  deserialize: deserializeWithBigInt,
+});
+
+export const pendingCount = computed(txListStore, (txs: TrackedTx[]) =>
+  txs.filter((tx: TrackedTx) => tx.status === 'pending').length,
+);
+
+export function addTx(hash: `0x${string}`, label: string, chainId: number) {
+  const existing = txListStore.get();
+  if (existing.some((tx) => tx.hash === hash)) return;
+  const newTx: TrackedTx = { hash, label, status: 'pending', timestamp: Date.now(), chainId };
+  txListStore.set([newTx, ...existing].slice(0, MAX_TXS));
+}
+
+export function updateTx(
+  hash: `0x${string}`,
+  update: Partial<Pick<TrackedTx, 'status' | 'blockNumber' | 'gasUsed'>>,
+) {
+  txListStore.set(
+    txListStore.get().map((tx: TrackedTx) =>
+      tx.hash === hash ? { ...tx, ...update } : tx,
+    ),
+  );
+}
+
+export function clearTxs() {
+  txListStore.set([]);
+}

package/src/utils/resolveOperatorRpc.ts

@@ -0,0 +1,20 @@
+/** Rewrite operator RPC hostname for browser reachability. */
+export function resolveOperatorRpc(raw: string): string {
+  if (typeof window === 'undefined') return raw;
+  const withProto = raw.includes('://') ? raw : `http://${raw}`;
+  try {
+    const url = new URL(withProto);
+    const pageHost = window.location.hostname;
+    const isNonRoutable =
+      url.hostname.endsWith('.local') ||
+      !url.hostname.includes('.') ||
+      url.hostname === '127.0.0.1' ||
+      url.hostname === 'localhost';
+    if (isNonRoutable && pageHost !== url.hostname) {
+      url.hostname = pageHost;
+    }
+    return url.toString().replace(/\/$/, '');
+  } catch {
+    return withProto;
+  }
+}

package/src/utils/web3.ts

@@ -0,0 +1,21 @@
+import type { Chain } from 'viem';
+import { http } from 'wagmi';
+import { mainnet, rpcUrl, tangleLocal, tangleMainnet, tangleTestnet } from '../contracts/chains';
+
+export const tangleWalletChains: readonly [Chain, ...Chain[]] = [tangleLocal, tangleTestnet, tangleMainnet, mainnet];
+
+export function createTangleTransports() {
+  return {
+    [tangleLocal.id]: http(rpcUrl),
+    [tangleTestnet.id]: http('https://testnet-rpc.tangle.tools'),
+    [tangleMainnet.id]: http('https://rpc.tangle.tools'),
+    [mainnet.id]: http(),
+  };
+}
+
+export const defaultConnectKitOptions = {
+  hideBalance: false,
+  hideTooltips: false,
+  hideQuestionMarkCTA: true,
+  overlayBlur: 4,
+} as const;

package/src/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}