Like me, if you have run into issues using Browser-solc when trying to create an app that could compile solidity in the client using ReactJS, this article is for you. We'll see how to use of@agnostico/browser-solidity-compiler to acheive our result shortly, getting rid of common issues you are likely to face.

There are many reasons why you may want to compile a solidity smart contract in the browser; Maybe you are building the nextremix or you are building an entirely different application and you simply want to have the client fully take control of what is compiled as with the case with what I am building,Agnostico.

Since theeth_compile API wasdeprecated, the available alternatives (Solc-JS and the extendedBrowser-Solc) work best in a server setup or is tightly coupled to the HTML DOM, they are not so flexible to work with in modern Javascript library environment such as ReactJS, well at least, not so straight-forward. This will make your application throw tantrums as you develop with them which, from my experience, is a terrible developer experience.

To allow others build their applications with ease, I built on the provisions of solcjs and created a package that can work efficiently in such development environments (and with typescript support). It useswebworkers under the hood to offload heavy compilation computations from our main thread. Let's take a look at it in action.

The project is available in theexample branch of the repo. I will explain how it works here with snippets so let's get to it.

The example repository is built withcreate-react-app, and to install our package, we run

npm i @agnostico/browser-solidity-compiler

Using the package in our application,

// App.tsx...import {  getCompilerVersions,  solidityCompiler,} from '@agnostico/browser-solidity-compiler';...

thegetCompilerVersions is an async operation that fetches the list of existing solidity versions fromhttps://binaries.soliditylang.org/bin/list.json.

// App.tsx...const loadVersions = async () => { const { releases, latestRelease, builds } = await getCompilerVersions()};// Load versions immediately page is mounteduseEffect(() => { (async () => {    await loadVersions()   })(); }, []);...

Our returned object looks like this

And then to compile our contracts, we select the we simply pass the required arguments into the compiler object. Our version will look similar to this if we are not using a template literal:https://binaries.soliditylang.org/bin/soljson-v0.8.17+commit.8df45f5f.js (If we are using solidity version 0.8.17). But to make it dynamic in cases where the user can switch between versions, we implement like this.

// App.tsx...const compiled = (await solidityCompiler({ version: `https://binaries.soliditylang.org/bin/${usingVersion}`, contractBody: content, options,}));...

ThecontractBody is the string of the contract(s) to be compiled. whileoptions the optimization object. It is optional. For example, you could have optimization looking like this

options.optimizer = {  enabled: true,  runs: 200,};

Our contracts in the example repo was returned in the compiled variable, stored in state and accessed this way

// App.tsxObject.keys(compiledContract?.contracts?.Compiled_Contracts).map((cont) => (  <div key={cont}>   <p>{cont}</p>  <span>Bytecode</span>: <small>{                      compiledContract?.contracts?.Compiled_Contracts[cont]?.evm?.bytecode?.object }   </small> </div> ))

The contract(s) are stored in a property of the returned object calledCompiled_Contracts where we can access their information such as theabi orbytecode and shown above.

Reference:
Solc-JS
@agnostico/browser-solidity-compiler