Dapp Canvas

This project allows users to build custom UIs tailored to a specific smart contract, enabling their own users to to interact with the provided smart contract through the custom built UI. When a UI is complete, it can then be published, and the attributes for each UI widget will be stored on Filecoin. Some of the available widgets are, input boxes, labels, images & gifs, shapes, text with more to come.

Use Cases:

1. Payment links - Users can create customized payment links that can be shared with others.
2. Emergency Protocol Pausing - Protocol devs can create custom UIs specifically tailored for managing the state of their most important contract functions.
3. Testnet UIs - Developers can create custom UIs for testnet contracts that don't have an official UI setup.

User flow:

1. Chad pastes a verified Arbitrum contract address into the options menu. Proxies are supported.
2. The ABI for the provided contract address will be fetched from Arbiscan & its functions will be displayed in the settings panel.
3. Chad can add widgets to the live view area to start building his custom UI. Each widget can optionally be connected with a corresponding function found in the contract's ABI. Each widget can be dragged around and placed in any area of the screen.
4. Chad is satisfied with his UI so he publishes it. The attributes for each widget is uploaded to Filecoin and an associated link to his published UI is generated. That link can be used be anyone to access the site.

This project utilizes React + NextJS for its front-end framework, integrating Web3Onboard and Ethers.js for executing on-chain transactions. For data storage and retrieval of widget attributes in published UIs, Filecoin and Lighthouse are employed. Initial retrieval of contract ABIs is achieved through the Arbiscan API, which is then parsed to facilitate interaction with the smart contracts.