this.gui 1.3.41 → 1.3.42

package/src/gui/components/organisms/Blockchain/blockchain.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Blockchain from "./blockchain";
+
+const meta: Meta<typeof Blockchain> = {
+  title: "Organisms/Blockchain",
+  component: Blockchain,
+};
+
+export default meta;
+type Story = StoryObj<typeof Blockchain>;
+export const Default: Story = {
+  render: () => <Blockchain />,
+};
+
+export const Empty: Story = {
+  render: () => <Blockchain />,
+};

package/src/gui/components/organisms/Blockchain/blockchain.tsx

@@ -0,0 +1,368 @@
+// this.GUI — Blockchain Container (Clean Version)
+// This component ONLY manages:
+//  ✔ Endpoint URL
+//  ✔ Connection state
+//  ✔ Tabs (Users / Blocks)
+//  ✔ Passing endpoint prop downward
+// No fetching, no table markup.
+//@/gui/components/organisms/IdentityNoise/Triad/Blockchain/blockchain.tsx
+import React, { useEffect, useRef, useState } from 'react';
+import { Box, Button, IconButton, Tooltip, Typography } from '@/gui/components/atoms';
+import Icon from '@/gui/Theme/Icon/Icon';
+import { useGuiTheme, useGuiMediaQuery } from '@/gui/hooks';
+import UsersTable from './Usernames/Usernames';
+import { BlocksTable } from './Blocks/BlocksTable';
+export default function Blockchain() {
+  const [endpoint, setEndpoint] = useState('http://localhost:8161');
+  const [connected, setConnected] = useState(false);
+  const [activeTab, setActiveTab] = useState<'users' | 'blocks' | 'details'>('users');
+  const [showEndpointInput, setShowEndpointInput] = useState(false);
+  const theme = useGuiTheme();
+  const isMobile = useGuiMediaQuery(theme.breakpoints.down('sm'));
+  const debounceRef = useRef<number | null>(null);
+  function normalizeEndpoint(raw: string) {
+    const v = (raw ?? '').trim();
+    if (!v) return null;
+    // If user types a token like "Blockchain", don't treat as an endpoint.
+    if (!v.includes('.') && !v.includes(':') && !v.startsWith('/')) return null;
+
+    // Add protocol if missing.
+    const withProto = /^https?:\/\//i.test(v) ? v : `http://${v}`;
+    // Strip trailing slash for consistent concatenation.
+    return withProto.replace(/\/+$/, '');
+  }
+  const safeEndpoint = normalizeEndpoint(endpoint) ?? '';
+
+  async function handleConnect() {
+    const base = safeEndpoint;
+    if (!base) {
+      setConnected(false);
+      return;
+    }
+    try {
+      const res = await fetch(`${base}/`, { method: 'GET' });
+      if (!res.ok) throw new Error('Failed');
+      setConnected(true);
+    } catch {
+      setConnected(false);
+    }
+  }
+
+  function scheduleConnect(nextEndpoint: string) {
+    if (debounceRef.current) window.clearTimeout(debounceRef.current);
+    const nextBase = normalizeEndpoint(nextEndpoint) ?? '';
+    if (!nextBase) {
+      if (debounceRef.current) window.clearTimeout(debounceRef.current);
+      setConnected(false);
+      return;
+    }
+
+    debounceRef.current = window.setTimeout(() => {
+      // noop: the [safeEndpoint] effect will connect using the latest endpoint value
+    }, 450);
+  }
+
+  function onEndpointKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter') {
+      if (debounceRef.current) window.clearTimeout(debounceRef.current);
+      handleConnect();
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) window.clearTimeout(debounceRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    // Auto-connect when we have a valid endpoint (on mount and whenever it changes)
+    if (!safeEndpoint) return;
+    handleConnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [safeEndpoint]);
+
+  return (
+    <Box
+      sx={{
+        border: '1px solid',
+        borderColor: 'divider',
+        borderRadius: 2,
+        padding: '1.5rem',
+        maxWidth: '900px',
+        margin: '0 auto',
+        background: 'background.paper',
+        position: 'relative',
+      }}
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: 10,
+          right: 10,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.5,
+        }}
+      >
+        <Tooltip
+          title={showEndpointInput ? 'Hide blockchain URL' : 'Show blockchain URL'}
+          placement="bottom"
+          arrow
+        >
+          <Box component="span" sx={{ display: 'inline-flex' }}>
+            <IconButton
+              aria-label={showEndpointInput ? 'Hide blockchain input' : 'Show blockchain input'}
+              onClick={() => setShowEndpointInput((v) => !v)}
+              size="small"
+              sx={{
+                border: '1px solid',
+                borderColor: 'divider',
+                bgcolor: 'background.paper',
+                color:
+                  !safeEndpoint
+                    ? 'divider'
+                    : connected
+                      ? 'success.main'
+                      : 'error.main',
+                '&:hover': {
+                  bgcolor: 'background.nav',
+                  color:
+                    !safeEndpoint
+                      ? 'text.secondary'
+                      : connected
+                        ? 'success.main'
+                        : 'error.main',
+                },
+              }}
+            >
+              <Icon name="dns" fontSize={18} />
+            </IconButton>
+          </Box>
+        </Tooltip>
+
+        <Tooltip title="What is a blockchain URL?" placement="bottom" arrow>
+          <Box component="span" sx={{ display: 'inline-flex' }}>
+            <IconButton
+              aria-label="Blockchain URL info"
+              size="small"
+              onClick={() => setActiveTab('details')}
+              sx={{
+                border: '1px solid',
+                borderColor: 'divider',
+                bgcolor: 'background.paper',
+                color: 'text.secondary',
+                '&:hover': { bgcolor: 'background.nav', color: 'text.primary' },
+              }}
+            >
+              <Icon name="info" />
+            </IconButton>
+          </Box>
+        </Tooltip>
+      </Box>
+      {/* Connection Input */}
+      {showEndpointInput && (
+        <Box
+          sx={{
+            marginTop: '1rem',
+            display: 'flex',
+            gap: 0.75,
+            alignItems: 'center',
+            flexDirection: isMobile ? 'column' : 'row',
+          }}
+        >
+          <Box
+            sx={{
+              flex: '0 0 auto',
+              width: isMobile ? '100%' : '25%',
+              minWidth: 240,
+            }}
+          >
+            <Box
+              component="fieldset"
+              sx={{
+                m: 0,
+                p: 0,
+                border: '1px solid',
+                borderColor: connected ? 'success.main' : 'divider',
+                borderRadius: 2,
+                minHeight: 36,
+                bgcolor: 'background.default',
+                transition: 'border-color 120ms ease, box-shadow 120ms ease',
+                '&:focus-within': {
+                  borderColor: connected ? 'success.main' : 'primary.main',
+                  boxShadow: (theme: any) =>
+                    connected
+                      ? `0 0 0 3px ${theme?.palette?.success?.main}22`
+                      : `0 0 0 3px ${theme?.palette?.primary?.main}22`,
+                },
+              }}
+            >
+              <Box
+                component="legend"
+                sx={{
+                  px: 0.75,
+                  mx: 1,
+                  fontSize: '0.75rem',
+                  color: connected ? 'success.main' : 'text.secondary',
+                  lineHeight: 1,
+                  cursor: 'help',
+                }}
+                onClick={() => setActiveTab('details')}
+                title="What is a blockchain URL?"
+              >
+                Blockchain
+              </Box>
+
+              <Box
+                component="input"
+                type="text"
+                name="blockchain"
+                aria-label="Blockchain endpoint"
+                placeholder="http://localhost:8161"
+                title="Example: http://localhost:8161"
+                value={endpoint}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  const next = e.target.value;
+                  setEndpoint(next);
+                  scheduleConnect(next);
+                }}
+                onKeyDown={onEndpointKeyDown}
+                sx={{
+                  width: '100%',
+                  px: 1.25,
+                  py: 0.75,
+                  border: 0,
+                  outline: 'none',
+                  bgcolor: 'transparent',
+                  color: 'text.primary',
+                  fontSize: '0.85rem',
+                  boxSizing: 'border-box',
+                }}
+              />
+            </Box>
+          </Box>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              width: isMobile ? '100%' : 'auto',
+            }}
+          >
+            <IconButton
+              aria-label={connected ? 'Connected' : 'Connect'}
+              onClick={() => handleConnect()}
+              size="small"
+              disabled={!safeEndpoint}
+              sx={{
+                border: '1px solid',
+                borderColor: 'divider',
+                bgcolor: 'background.paper',
+                color: connected ? 'success.main' : 'text.secondary',
+                '&:hover': {
+                  bgcolor: 'background.nav',
+                  color: connected ? 'success.main' : 'text.primary',
+                },
+              }}
+            >
+              <Icon name={connected ? 'check' : 'sync'} />
+            </IconButton>
+          </Box>
+        </Box>
+      )}
+      {/* Tabs */}
+      <Box
+        sx={{
+          display: 'flex',
+          gap: '1rem',
+          marginTop: '1.5rem',
+          marginBottom: '1rem',
+          borderBottom: '1px solid rgba(255,255,255,0.1)',
+          paddingBottom: '0.5rem',
+        }}
+      >
+        <Button
+          variant={activeTab === 'users' ? 'outlined' : 'text'}
+          size="small"
+          sx={{ minHeight: 32, px: 1.25, fontSize: '0.8rem' }}
+          onClick={() => setActiveTab('users')}
+        >
+          Users
+        </Button>
+        <Button
+          variant={activeTab === 'blocks' ? 'outlined' : 'text'}
+          size="small"
+          sx={{ minHeight: 32, px: 1.25, fontSize: '0.8rem' }}
+          onClick={() => setActiveTab('blocks')}
+        >
+          Blocks
+        </Button>
+        <Button
+          variant={activeTab === 'details' ? 'outlined' : 'text'}
+          size="small"
+          sx={{ minHeight: 32, px: 1.25, fontSize: '0.8rem' }}
+          onClick={() => setActiveTab('details')}
+        >
+          Details
+        </Button>
+      </Box>
+      {/* Render Only Child Components */}
+      {activeTab === 'users' && safeEndpoint && <UsersTable endpoint={safeEndpoint} />}
+      {activeTab === 'blocks' && safeEndpoint && <BlocksTable endpoint={safeEndpoint} />}
+
+      {activeTab === 'details' && (
+        <Box
+          sx={{
+            border: '1px solid',
+            borderColor: 'divider',
+            borderRadius: 2,
+            p: 2,
+            bgcolor: 'background.default',
+          }}
+        >
+          <Typography variant="h6" sx={{ mb: 1 }}>
+            Blockchain URL
+          </Typography>
+
+          <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1.5 }}>
+            This view connects to a blockchain node running at a specific <strong>host</strong> and <strong>port</strong>.
+          </Typography>
+
+          <Typography variant="body2" sx={{ mb: 1.25 }}>
+            <strong>What is a blockchain URL?</strong>
+            <br />
+            It’s the address of a server (node) that exposes blockchain data over HTTP. Example:
+            <br />
+            <Typography component="span" sx={{ fontFamily: 'monospace' }}>
+              http://localhost:8161
+            </Typography>
+          </Typography>
+
+          <Typography variant="body2" sx={{ mb: 1.25 }}>
+            <strong>What does this screen do?</strong>
+            <br />
+            When you enter a URL, this page tries to reach that node and then displays:
+          </Typography>
+
+          <Box component="ul" sx={{ m: 0, pl: 2.5, color: 'text.secondary' }}>
+            <li>
+              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                <strong>Users</strong> — identities or usernames registered on that chain (if supported).
+              </Typography>
+            </li>
+            <li>
+              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                <strong>Blocks</strong> — the latest blocks and their data from that chain (if supported).
+              </Typography>
+            </li>
+          </Box>
+
+          <Typography variant="body2" sx={{ color: 'text.secondary', mt: 1.5 }}>
+            Tip: <strong>localhost</strong> means the blockchain node is running on your own machine. A remote host means it’s running somewhere else.
+          </Typography>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/gui/components/organisms/Blockchain/scripts/connection.ts

@@ -0,0 +1,82 @@
+import React from "react";
+export type ConnectionStatus = 'idle' | 'connecting' | 'online' | 'offline' | 'declined';
+export type UsernameStatus = 'idle' | 'checking' | 'exists' | 'available' | 'error';
+export function normalizeBlockchain(raw: string): string {
+  return raw.trim()
+    .replace(/^https?:\/\//i, '')
+    .replace(/\/$/, '');
+}
+export function useBlockchainConnection(params: {
+  blockchain: string;
+  username: string;
+  me: any;
+  debouncePingMs?: number;
+  debounceUserMs?: number;
+}): {
+  blockchainHost: string;
+  blockchainBaseUrl: string;
+  connectionStatus: ConnectionStatus;
+  usernameStatus: UsernameStatus;
+} {
+  const {
+    blockchain,
+    username,
+    debouncePingMs = 400,
+    debounceUserMs = 350,
+  } = params;
+  const blockchainHost = normalizeBlockchain(blockchain);
+  const blockchainBaseUrl = `http://${blockchainHost}`;
+  const [connectionStatus, setConnectionStatus] = React.useState<ConnectionStatus>('idle');
+  const [usernameStatus, setUsernameStatus] = React.useState<UsernameStatus>('idle');
+  React.useEffect(() => {
+    if (!blockchainHost) {
+      setConnectionStatus('idle');
+      return;
+    }
+    setConnectionStatus('connecting');
+    const handle = setTimeout(() => {
+      fetch(`${blockchainBaseUrl}/`)
+        .then(res => {
+          if (res.ok) setConnectionStatus('online');
+          else setConnectionStatus('offline');
+        })
+        .catch(err => {
+          const msg = err.message.toLowerCase();
+          if (msg.includes('cors') || msg.includes('failed to fetch')) setConnectionStatus('declined');
+          else setConnectionStatus('offline');
+        });
+    }, debouncePingMs);
+    return () => clearTimeout(handle);
+  }, [blockchainHost, blockchainBaseUrl, debouncePingMs]);
+  React.useEffect(() => {
+    if (connectionStatus !== 'online' || !username) {
+      setUsernameStatus('idle');
+      return;
+    }
+    setUsernameStatus('checking');
+    // Try me['@'](username) to ignore validation errors while typing
+    try {
+      params.me['@'](username);
+    } catch {
+      // ignore
+    }
+
+    const handle = setTimeout(() => {
+      fetch(`${blockchainBaseUrl}/users/${username}`)
+        .then(res => {
+          if (res.status === 200) setUsernameStatus('exists');
+          else if (res.status === 404) setUsernameStatus('available');
+          else setUsernameStatus('error');
+        })
+        .catch(() => setUsernameStatus('error'));
+    }, debounceUserMs);
+
+    return () => clearTimeout(handle);
+  }, [connectionStatus, username, blockchainBaseUrl, debounceUserMs, params.me]);
+  return {
+    blockchainHost,
+    blockchainBaseUrl,
+    connectionStatus,
+    usernameStatus,
+  };
+}

package/src/gui/components/organisms/Blockchain/scripts/match_face.ts

@@ -0,0 +1,143 @@
+import React from "react";
+
+export type MatchFaceStatus = "idle" | "checking" | "match" | "no_match" | "not_enrolled" | "error";
+
+// Keep this intentionally simple and transport-only.
+// The server decides how to interpret the payload (template, blendshapes, etc.).
+export type MatchFaceResult = {
+  ok: boolean;
+  match?: {
+    username: string;
+    identityHash?: string;
+    score?: number;
+  };
+  error?: string;
+};
+
+export function normalizeBlockchain(raw: string): string {
+  return String(raw || "")
+    .trim()
+    .replace(/^https?:\/\//i, "")
+    .replace(/\/$/, "");
+}
+
+export function useFaceMatch(params: {
+  blockchain: string;
+  /** Optional: only used for debugging / scoping on the server if you want it */
+  username?: string;
+  /** Any serializable payload from FaceRecognition (face template, blendshapes, etc.) */
+  payload: any | null;
+  /** Set true to run automatically when payload changes */
+  auto?: boolean;
+  debounceMs?: number;
+}): {
+  status: MatchFaceStatus;
+  result: MatchFaceResult | null;
+  match: () => Promise<void>;
+  reset: () => void;
+} {
+  const {
+    blockchain,
+    username,
+    payload,
+    auto = false,
+    debounceMs = 250,
+  } = params;
+
+  const blockchainHost = React.useMemo(() => normalizeBlockchain(blockchain), [blockchain]);
+  const blockchainBaseUrl = React.useMemo(
+    () => (blockchainHost ? `http://${blockchainHost}` : ""),
+    [blockchainHost]
+  );
+
+  const [status, setStatus] = React.useState<MatchFaceStatus>("idle");
+  const [result, setResult] = React.useState<MatchFaceResult | null>(null);
+
+  const reset = React.useCallback(() => {
+    setStatus("idle");
+    setResult(null);
+  }, []);
+
+  const match = React.useCallback(async () => {
+    if (!blockchainBaseUrl) {
+      setStatus("error");
+      setResult({ ok: false, error: "BLOCKCHAIN_REQUIRED" });
+      return;
+    }
+    if (!payload) {
+      setStatus("error");
+      setResult({ ok: false, error: "FACE_PAYLOAD_REQUIRED" });
+      return;
+    }
+
+    setStatus("checking");
+    setResult(null);
+
+    try {
+      // Hardcoded route (same as /users/:username pattern).
+      // You can later swap this to your unified ME operator surface.
+      const resp = await fetch(`${blockchainBaseUrl}/faces/match`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username: username || "", template: payload }),
+      });
+
+      const json = (await resp.json().catch(() => null)) as MatchFaceResult | null;
+
+      if (!resp.ok) {
+        // If the ledger returns 404, we want to reflect it in the UI as a concrete state
+        // so the face widget can show a "404"/"not enrolled" label.
+        if (resp.status === 404) {
+          setStatus("not_enrolled");
+          setResult(json || { ok: false, error: "HTTP_404" });
+          return;
+        }
+
+        setStatus("error");
+        setResult(json || { ok: false, error: `HTTP_${resp.status}` });
+        return;
+      }
+
+      // Support both response shapes:
+      // A) { ok, match: { username, ... } }
+      // B) { ok, match: boolean, score?, best? }
+      const hasObjectMatch = Boolean((json as any)?.ok && (json as any)?.match && typeof (json as any).match === 'object');
+      const hasBooleanMatch = Boolean((json as any)?.ok && typeof (json as any)?.match === 'boolean');
+
+      if (hasObjectMatch) {
+        setStatus("match");
+        setResult(json);
+        return;
+      }
+
+      if (hasBooleanMatch) {
+        const m = Boolean((json as any).match);
+        setStatus(m ? "match" : "no_match");
+        setResult(json);
+        return;
+      }
+
+      // Fallback
+      setStatus("no_match");
+      setResult(json || { ok: true });
+    } catch (e: any) {
+      setStatus("error");
+      setResult({ ok: false, error: e?.message || "MATCH_FAILED" });
+    }
+  }, [blockchainBaseUrl, payload, username]);
+
+  // Optional auto-run
+  React.useEffect(() => {
+    if (!auto) return;
+    if (!payload) return;
+    if (!blockchainBaseUrl) return;
+
+    const h = window.setTimeout(() => {
+      match();
+    }, debounceMs);
+
+    return () => window.clearTimeout(h);
+  }, [auto, payload, blockchainBaseUrl, debounceMs, match]);
+
+  return { status, result, match, reset };
+}