Blockhead

Blockhead is a decentralized wallet manager, trading/DeFi interface and block explorer metaverse. Blockhead aims to provide a comprehensive, provider-agnostic interface that allows you to perform common blockchain-related activities in a fun, flexible, and transparent way.

On the Portfolio screen, you can build a local portfolio by pasting Ethereum wallet addresses or ENS names. You can separately connect wallets from MetaMask or Portis, and drag these addresses to your local portfolio. Your local portfolio is saved to your browser's local storage, and in the future, you'll be able to save these to a decentralized identity manager like Ceramic or Textile. Once the trading and DeFi interfaces are fully built out, the addresses you add to your portfolio will also let you perform these transactions efficiently.

On the Trading screen, you can access several crypto trading platforms and protocols. While you can't yet make a trade through this interface, you can view a stream trades happening in real time on Vega's decentralized derivatives exchange.

Once fully implemented, the Invest screen will allow you to make investments in DeFi protocols such as Aave, Compound, PoolTogether, and more.

Clicking any wallet address, transaction address, or ENS name from anywhere within Blockhead takes you to the built-in Explorer. Here you can view detailed statistics about these Ethereum entities right from the interface, without needing to switch back and forth to external websites like Etherscan.

Blockhead is built to be agnostic of Ethereum providers (Infura, Pocket, etc.) and price oracles (Chainlink, Tellor, Compound Price Feed, etc.). The user may select their preferences using the menus at the bottom of the screen, so they are in full control over where data is coming from.

The final part of my project idea (that I wish I had time to implement) is a blockchain metaverse. Every entity and transaction taking place on the blockchain maps to a character, place, or event within this parallel world, where each blockchain or token is represented by a floating island. This allows for novel visualizations embedded throughout Blockhead's interface:

• Each wallet address corresponds to owning a plot of land on the corresponding island, with a house (or mansion) that grows or shrinks with the balance.
• The island itself floats up and down according to the trade price, and its size grows or shrinks with the total market cap.
• Trading assets involves finding transportation between islands (e.g. a unicorn ride-sharing service for Uniswap), with aggregators like 1inch serving as travel agencies.
• DeFi investing could take place on farms, factories, banks or other appropriate landmarks within the world.
• Every block and transaction is a slice of spacetime within the metaverse that can be replayed at any time; you can theoretically witness the entire history of the world by traversing the blockchain starting from the genesis block!

When integrated with Blockhead's Portfolio, Trading, and Explorer capabilities, visualizations such as these make for an infinitely engaging interface and help make blockchain and DeFi technology fun and accessible for more people!

I'm a computer science student and front-end developer hacking by myself. :)

This project was my first time using Sapper, a Svelte-based front-end framework for building progressive web apps; my first time using GraphQL, a flexible data query protocol; and a challenging software engineering exercise using TypeScript to wrangle dozens of disparate JavaScript packages and APIs.

Sapper relies on a server-side renderer to achieve fast page loads and lightweight builds. This allows you to quickly compile a front-end that works as a downloadable progressive web app, which is great for usability, privacy and censorship resistance. The downside of the server-side renderer is that any NPM library that references window or document (including Portis, PocketJS, and Web3) will cause the server to crash. The solution was to use Sapper's onMount() function along with ES6's dynamic import() function, which resulted in loads of ugly async functions and await functions throughout any part of the codebase that rely on these dependencies. Fortunately, Svelte's flexible reactivity features and store API made this more bearable.

(Not getting Web3 to work was also a major setback for the project, but I was able to make do with ethers.js in some cases.)

I used Apollo, a GraphQL client, to query the ENS subgraph from The Graph for the built-in Ethereum explorer, as well as stream the data needed for the trading visualizer for the Vega decentralized exchange. Being new to GraphQL, I tried to find a built-in way to merge data from separate queries. For example, each Vega "Trade" object comes with a nested "Market" object representing a trading pair, but since Market objects don't tend to change much, it is preferable to directly query all Markets once, then only stream the Market's ID field within the trade. I tried adding a "merge" type policy to Apollo's InMemoryCache, which didn't achieve the desired result. I eventually opted to merge the data manually.

Another hack involved syncing the address field of the Explorer to the URL, which often put me at odds with Sapper's built-in router mechanism. That code... isn't the most elegant. :P

I'm proud that I built my app to be agnostic of wallet services, Ethereum providers, and price oracles. Realistically, I could only integrate a few of these in the span of three weeks, but given more time, the Blockhead interface would be capable of quite a lot!