project screenshot 1
project screenshot 2
project screenshot 3
project screenshot 4
project screenshot 5
project screenshot 6

SignKaleidoscope

Explore attestations on Sign Protocol with a dynamic graph visualization!

SignKaleidoscope

Created At

Scaling Ethereum 2024

Winner of

Sign Protocol - Overall Best Project 4th place

Sign Protocol - Best UX (User Experience) 1st place

ETHGlobal - šŸ† Scaling Ethereum Finalist

Project Description

SignKaleidoscope is an explorer for Sign Protocol with an interactive graph visualization!

Explore Accounts, Schemas and Attestations by clicking nodes and edges in the graph, using the search field, or navigating links in the detail overlays. Drag to pan the graph and scroll to zoom in and out. Nodes and edges will automatically appear and connect within the graph as new entities are discovered.

In the graph, Accounts and Schemas are represented as nodes, and each Attestation is represented as a set of directed edges. Schema nodes are sized according to how often they are used within the protocol, and are marked with an icon representing the onchain or offchain location where the Schema is stored ā€“ whether on Arweave, IPFS, Ethereum or another blockchain.

Hovering your mouse over an edge highlights all nodes and edges involved in an Attestation. Since Attestations in Sign Protocol are a one-to-many relationship, you'll see an edge from the "attester" Account node to the Schema node, and a corresponding edge from the Schema node to each of the "recipient" Account nodes.

How it's Made

Darryl Yeo, frontend dev

ā€¢ Data: SignScan API (backend endpoints reverse-engineered from scan.sign.global)

ā€¢ Frontend stack: SvelteKit + Svelte 5 beta + TypeScript + vanilla CSS

ā€¢ Graph visualization: Sigma.js + Graphology ā€“ https://sigmajs.org

Jane Yang, product design

ā€¢ Figma: design + mockup

background image mobile

Join the mailing list

Get the latest news and updates