Skip to content
A weekend project to try and visualize Coda's blockchain.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs/assets
public
src
.gitignore
README.md
license
package.json
yarn.lock

README.md

The Visualization

Chain Visualization Gif

This was a quick weekend project that I worked on with my roommate @reem. The goal was to take blocks from the Coda Daemon's GraphQL Endpoint and display them as a force-directed graph.

It is utilizing the React-Vis-Force library from Uber.

Next Steps / Lessons Learned

This is a super rough MVP to prove to myself that I could write a block explorer/visualization. Here's some stuff I learned if I were to try and do this for real:

  • React-Vis-Force doesn't allow you to dynamically add and remove nodes in the graph without reloading the whole thing. To accomplish this, I'd have to fork their library or craft my own D3-based react components.
  • The blocks query in the Coda Daemon's GraphQL endponint doesn't actually support pagination at the time of writing, so loading the page gets slow as nBlocks increases. Though, even if it did support pagination, you'd still have to load all the blocks first due to #1.
  • When there's a lot of nodes on the graph, it takes a really long time to work all the crossings out. I wished there was a way I could have laid out the nodes from left-right/top-bottom by their timestamp at render time.
  • The Archive node's endpoint is dangerous in that there is no authentication, so anyone with access could change the Daemon's internal state. As such, this only works when running a Daemon on the same machine as the visualization. I would love to build out a GraphQL Proxy of some kind in order to mitigate this risk.
  • I did implement basic "block explorer" functionality, in that if you select a node a div appears with the json data from the block. I would have liked to spend more time displaying this data on the graph itself, via colors or otherwise.
  • I would love to mess with different colorings on the graph way more than I did here. This visualization can be super useful for visually debugging the blockchain by coloring the blocks based on number of transactions, snark jobs, fee transfers, etc.

Examples of Different Coloring:

Red -> Main Chain / Blue -> Leaf Nodes: colored-by-leaves

Black -> No Txs / Redder -> More Txs colored-by-transactions

The Query

The application uses one query from the Daemon:

{
    blocks{
    nodes {
        creator
        stateHash
        protocolState {
        previousStateHash
        blockchainState{
            date
            snarkedLedgerHash
            stagedLedgerHash
        }
        }
        transactions {
        userCommands{
            id
            isDelegation
            nonce
            from
            to
            amount
            fee
            memo
        }
        feeTransfer {
            recipient
            fee
        }
        coinbase
        }
        snarkJobs {
        prover
        fee
        workIds
        }
    }
    pageInfo {
        hasNextPage
        hasPreviousPage
        firstCursor
        lastCursor
    }
    }
}

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

You can’t perform that action at this time.