Multi-Hop Relationship Visualisation, Signer Network & Offer Path Tracer

[grantfox-oss]

Overview

Understanding the relationships between Stellar accounts — who signs for whom, which accounts share signers, how funds flow through a network of accounts via offers and path payments — requires graph analysis that no existing tool provides visually. This tool must query Horizon to build the relationship graph, lay it out using a force-directed algorithm, and let the user explore it interactively — drilling into any node to see its details, highlighting paths between two accounts, and exporting the graph as a PNG or JSON adjacency list.

What needs to be built

apps/api/src/modules/transaction/graph.service.ts

• POST /transaction/graph — accepts { rootAccount: string, depth: number (1–3), mode: 'signers' | 'offers' | 'payments' | 'all' }:

  • Signers mode: for the root account, fetch signers; for each signer that is itself a G... account, fetch their signers recursively up to depth; build a directed graph of { source, target, relationship: 'signs_for' | 'co_signer', weight: signerWeight }
  • Offers mode: fetch all open offers for the root account; find all other accounts with matching offers and connect them as { source, target, relationship: 'offer_match', sellingAsset, buyingAsset, price }
  • Payments mode: fetch last 100 transactions; build a graph of all payment senders and receivers connected to the root account
  • All mode: union of all three graphs
  • Returns: { nodes: [{ id, label, type, metadata }], edges: [{ source, target, relationship, metadata }] }
apps/web/src/app/inspector/graph/

• Root account input + depth selector (1 / 2 / 3) + mode radio buttons

• Graph canvas — rendered using d3-force simulation:

  • Nodes: coloured by type (blue = normal account, orange = multisig, green = anchor, purple = contract)
  • Edges: different line styles per relationship (solid = signer, dashed = offer match, dotted = payment)
  • Node size proportional to number of edges

• Interactions:

  • Click a node → opens the Account Inspector panel in a side drawer
  • Hover an edge → tooltip shows relationship type and metadata
  • Right-click a node → "Set as root" re-runs the graph query from that node
  • Drag nodes to reposition; zoom and pan

• Path highlighter: enter two public keys → the shortest path between them is highlighted in yellow

• Export panel: "Export PNG" (canvas snapshot), "Export JSON" (adjacency list)
  Database

• graph_snapshots: id, user_id, root_account, depth, mode, graph_json (jsonb), node_count, edge_count, created_at

Acceptance criteria

• Signer graph for a threshold-2 multisig account correctly shows both signers as nodes with weight on the edges
• Depth-3 graph does not duplicate nodes that appear in multiple branches
• Path highlighter correctly finds and highlights the shortest path between two nodes that are 3 hops apart
• "Set as root" rebuilds the graph centered on the clicked node within 2 seconds
• PNG export produces a valid image file that matches the current canvas state
• Graph JSON export is a valid adjacency list that re-imports correctly without data loss