Blockhead: HackFS 2023

Blockhead is an infinitely customizable super-interface for all of crypto/DeFi/web3 that runs entirely in your browser!

For HackFS I've built some tools to help visualize and explore files and content from across the InterPlanetary File System, including an IPFS explorer, file browser, file uploader, CID decoder tool and an in-browser IPFS node powered by libp2p and Helia!

Features:

IPFS Explorer + CID Decoder: enter any IPFS content ID (cidv0 or cidv1) and/or path to 1) fetch the content through the IPFS Gateway of your choice, 2) display the content dynamically (based on the HTTP content-type header or inferred locally if unavailable), and 3) decode the CID and generate a diagram explaining each part, with links to alternate multibase encodings and relevant standards and Git repositories (inspired by the CID Inspector at cid.ipfs.tech).

Local IPFS Node + File Upload: stage content by typing some text or uploading a local file or folder, and add the content to IPFS via an in-browser IPFS node powered by libp2p and Helia. Directories and generated CIDs can be explored inline. The blockstore and datastore are persisted locally to IndexedDB.

IPFS Gateway overrides: Blockhead pattern-matches and intercepts requests made to common IPFS gateway providers, redirecting them to the gateway provider of the user's choice in Preferences. Applicable requests include NFT images in Portfolio, verified source code retrieval from Sourcify in Explorer, and ENS text records in the ENS App.

Features by sponsor:

IPFS/Helia: Visualize and explore files and content from across the InterPanetary Filesystem using Blockhead's in-browser Helia node, IPFS explorer, file browser, file uploader, and CID decoder tool!

NFT.Storage and Web3.Storage: Added nft.storage and w3s.link as IPFS Gateway providers. Blockhead pattern-matches and intercepts requests made to common IPFS gateway providers, redirecting them to the gateway provider of the user's choice in Preferences. Applicable requests include NFT images in Portfolio, verified source code retrieval from Sourcify in Explorer, and ENS text records in the ENS App.

Spheron: The Blockhead web app is hosted on IPFS using infrastructure from Spheron Network!

Between AsyncIterables, ReadableStreams, Blobs, Files, IANA Media Types, Helia's UnixFS, Multiformats, hash functions and Multicodecs, I covered a lot of ground and managed to incorporate JavaScript content processing pipelines, browser APIs, web standards, cryptography standards and web3 standards into one user experience! I'm standing on a whole lot of shoulders to get to this point 😮‍💨

Note that depending on the gateway and request format, IPFS content might not come with the correct HTTP Content-Type headers. In these cases, Blockhead will read the content and attempt to detect the right media type based on magic numbers and other well-known heuristics - see https://npmjs.com/package/detect-content-type and https://npmjs.com/package/file-type

BONUS: Here's a PR I created to revive the multicodec package on npm so I don't have to hard-code metadata for all the possible multicodecs into my repo 😉 https://github.com/multiformats/js-multicodec/pull/83

Somebody, anybody approve this ☝️🥺