The playground provides a simple and practical way to enable devs to integrate protocols in their production apps.
It presents a better developer experience to allow external developers and projects to integrate protocols in a very intuitive way. This is inspired by existing web2 API and AI playgrounds from products like Square, Github, Duffel, OpenAI, HuggingFace, etc.
The current smart contract integration process means devs have to read the documentation, go to superfluid’s console to get the contract address, and then interact with the contracts locally on their IDE, etherscan, or tenderly.
This creates fragmentation for developers directly integrating the contracts, plus, it doesn’t provide a low barrier of entry for high-level exploration of the protocol.
One thing to also note is complex actions and use cases. Practically, you need more than one contract method to perform actions or use cases on a protocol. For context, executing a Swap action on Uniswap protocol involves at least two calls for most tokens: approve tokens (approve), and execute swap (transferFrom). Each workflow needs proper documentation and interaction. This means there is a lot of context to keep in mind while performing actual operations on the protocol.
The only way to perform actions like this on protocols is to write code in your editor. There’s no way to currently handle this on the fly.
The playground handles all these integration needs (including documentation) in a single place.
Contracts - This allows devs to interact with all contracts and their methods in the protocol. This includes documentation and simulation of the contracts.
Actions’ code editor - This allows devs to perform app actions on their smart contracts using a
Javascript environment; just like they’re on the front end of the application. Also, devs can interact with the contract using a solidity environment. This handles the complex actions.
Environmental variables - This simply allows users to store values in the playground and reuse them when interacting with contract methods. For instance, you can store your wallet address with the name {{address}} and reuse it as a parameter for different methods.
Demo: https://www.loom.com/share/1b5505065f974ec5817cc951dfd64200?sid=8edf9e22-95b7-4d0c-937f-b6db841a9e17
Try it out: https://playground.bonadocs.com