Kontour

We built an entirely new experience on our existing project, which was a hosted hardhat node for developers to test their contracts. The new pages are an interactive set of documentation pages for protocols to leverage. Using protocols is difficult, especially ones with a hard deploy process and lack of visibility into the state of the contracts. This leads a lot of developers to churn out and is detrimental to the overall ecosystem.

Our solution is to make documentation interactive. We give devs a virtual in-browser node to run all contract logic in, so that protocols can have their contracts deployed without any setup overhead. Devs can run through guides in a real EVM environment with their own metamask to better understand the power of the protocol and without switching away. We track analytics for protocols as well so that they can see in realtime the engagement of their onboarding flow and where the problem areas are.

We launch a dynamically allocated hardhat node as each protocol's sandbox (which deploys the full-deploy.ts script in this case) so that all contracts are reflected correctly. Our server is in Node/TS/Koa and our client is in React/NextJS. Each time the user visits documentation, we connect them to the node that the docs are hosted on so that the sandbox is always running in the background.

They can interact with everything on the client through their own Metamask and can also run transactions through the governance/treasury accounts on the server through exposed graphQL endpoints. We generate a full client SDK so that the user can type and execute working JS against the contracts directly in the browser. We also capture analytics using AWS Timestream and aggregate these events for protocols to see.