2

I am building a tool to deploy solidity contracts using pre-made templates.

I want to compile solidity (like remix) so I can deploy it directly from the client-side (I do not want to use a server).

I have tried using browser-solc and looked at remix-solidity but have not figured out a straightforward way to compile Solidity in the browser. Any help would be really appreciated!

Related questions:

Improve this question

3 Answers 3

Reset to default
3

browser-solc is a bit out-dated and doesn't work with the latest compiler versions. I updated the browser-solc code so it works with newer compiler versions. Source code: https://pastebin.com/QxEz6tQU

Copy/ paste the code into a file named: browser-solc-min.js

Import the file into your webpage and you will be able to use the compiler by following the browser-solc tutorial.

For a list of supported compilers check: List

Or try out my example:

<html>
    <body>
        <span>Input:</span><br>
        <textarea id="input" cols="60" rows="8"> </textarea><br>
        <button id="compile">Compile</button><br>
        <span>Output:</span><br>
        <textarea id="output"></textarea>

        <script src="./browser-solc-min.js" type="text/javascript"></script>
        
        <script>
            let contractCode = `
            contract Test {
                uint256 public number = 2;

                function changeNumber(uint256 _number) external {
                    number = _number;
                }
            }
            `;

            const solidityVersion = "soljson-v0.8.10+commit.fc410830.js";

            document.getElementById("compile").addEventListener("click", () => {
                let sourceCode = {
                    language: "Solidity",
                    sources: { 
                        contract: {
                            content: document.getElementById("input").value
                        }
                    },
                    settings: {
                        optimizer: {
                            enabled: false
                        },
                        evmVersion: "istanbul",
                        outputSelection: {
                            "*": {
                            "": [
                                "legacyAST",
                                "ast"
                            ],
                            "*": [
                                "abi",
                                "evm.bytecode.object",
                                "evm.bytecode.sourceMap",
                                "evm.deployedBytecode.object",
                                "evm.deployedBytecode.sourceMap",
                                "evm.gasEstimates"
                            ]
                            },
                        }
                    }
                };

                // Compiling the contract
                let result = compiler.compile(JSON.stringify(sourceCode), 1);

                // Displaying the result
                document.getElementById("output").value = JSON.stringify(result);
            });

            window.addEventListener('load', async () => {
                document.getElementById("input").value = contractCode;

                // Loading compiler
                BrowserSolc.loadVersion(solidityVersion, function(c) {
                    compiler = c;
                });
            });
        </script>
    </body>
</html>
Improve this answer
1
  • Loading the compiler (BrowserSolc.loadVersion ...) leads to the following error on the console: "Uncaught RangeError: WebAssembly.Compile is disallowed on the main thread, if the buffer size is larger than 4KB. Use WebAssembly.compile, or compile on a worker thread." I was getting the same error on my fork of browser-solc
    – Atharva Shukla
    Commented Dec 26, 2021 at 20:05
0

You need to use
You can use @agnostico/browser-solidity-compiler. It works in ReactJS and has typescript support.

Improve this answer
0

Looks the official ethereum/solc-js compiler works in browsers now (Ref)

<script
  type="text/javascript"
  src="https://binaries.soliditylang.org/bin/{{ SOLC VERSION }}.js"
></script>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.