Solive

Screenshots

Problem Statement

Solive is a flexible online playground for Solidity smart contracts, inspired by remix-IDE and react-live. Solive enables you to edit, compile, deploy, and interact with solidity smart contracts in one React component. You can embed solive into your website/tutorials and let users run solidity code in the browser. Solive is also compatible with mobile browsers.Use cases:Education: we will replace the code chunk in the WTF Solidity tutorial with the solive, so students can read and run the code.Developer onboarding: layer2 projects can use solive to onboard Ethereum developers.What's next:web3 provider support: you can connect metamask to solve and deploy smart contracts to layer2.import remote contracts, such openzeppelin contracts.better solidity ABI to UI design.

Solution

Solive is inspired byremix-ide: an online IDE to develop smart contracts.react-live: A flexible playground for live editing React code We want to build solive because we want students to run the sample code while readingWTF Solidity tutorial. Solive is lite by design and only contains the necessary modules to edit, compile, deploy, and interact with the smart contracts:Edit module: we use Monaco editor, the fully featured code editor from VS Code.Compile module: we use solcjs to compile the contract with selected solidity version.Deploy: we use ethersjs and ethereumjs to deploy the compiled contracts to local evm.Interaction: we use ethersjs and a customized ABI-UI converter to interact with the deployed contracts. Layer 2 projects can use solive in their demos to onboard developers easier.