feat: add widgets to GDv1

Outline

When reading the documentation, the explanation of the protocol contracts is great. However, developers have to setup a basic testing environment to interact with the contracts to better understand the behavior. The widget eliminates this by enabling developers to interact with the contract methods directly within the documentation. This greatly reduces integration time and the context switching that would otherwise be required, making Superfluid more developer-friendly.

We are looking to integrate the widget in all the documentation pages. The widget will replace the function code sections with an interactive interface that enables developers to interact with the protocol function being described. In some of the guides, there are descriptions of workflows that involve a more involved operation than simply calling a single contract function. Adding the widget to such guides will help developers understand the docs better.

Technical Information

The widget is an open-source library: @bonadocs/widget.

The list of protocol smart contracts, deployment addresses, ABIs, and other widget configuration are stored on IPFS at the URI ipfs://bafkreihiu63jpljsuycq3se6pq6jiconnlu6ewrmuzusacws5wpmmwbgye. We chose to store the data on IPFS to guarantee immutability of the contract information and addresses, preserving the safety of the widget.

P.S: The widget is works for just the Polygon network. More networks can be added during this integration process.

Summary of Changes

We installed the widget using

npm i @bonadocs/widget

Then we imported the BonadocsWidget component in docs/technical-reference/GDAv1Forwarder.mdx. This allows us to just use within the file.

superfluid-finance / docs-v2