A weekend project to try and visualize Coda's blockchain.
APACHE-2.0 License
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.
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:
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.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.Red -> Main Chain / Blue -> Leaf Nodes:
Black -> No Txs / Redder -> More Txs
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.
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.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
npm run build
fails to minifyThis section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify