feat(router): CAN-596 add web-solc to compile on browser (#1481)

package.json

@@ -9,7 +9,7 @@
     "lint:fix:js": "prettier --write '{packages,examples}/**/*.{js,ts}' && eslint --fix '{packages,examples}/**/*.{js,ts}'",
     "lint:fix:sol": "prettier --write '{packages,examples}/*/{contracts,src}/**/*.sol'",
     "lint:fix": "pnpm run '/^lint:fix:(js|sol)/'",
-    "build": "pnpm -r --if-present run clean && pnpm -r --filter @usecannon/builder --filter @usecannon/cli --filter hardhat-cannon --filter @usecannon/api run build",
+    "build": "pnpm -r --if-present --filter @usecannon/builder --filter @usecannon/cli --filter hardhat-cannon --filter @usecannon/api run clean && pnpm -r --filter @usecannon/builder --filter @usecannon/cli --filter hardhat-cannon --filter @usecannon/api run build",
     "watch": "pnpm -r --parallel --filter @usecannon/builder --filter @usecannon/cli run watch",
     "version-alpha": "lerna version prerelease --no-private",
     "version-patch": "lerna version patch --no-private",

packages/builder/package.json

@@ -43,7 +43,8 @@
     "typedoc-plugin-zod": "^1.2.0"
   },
   "dependencies": {
-    "@synthetixio/router": "^3.4.0",
+    "@usecannon/router": "^4.0.0",
+    "@usecannon/web-solc": "0.5.1",
     "axios": "^1.7.2",
     "axios-retry": "^4.4.2",
     "buffer": "^6.0.3",

packages/builder/src/steps/router.ts

@@ -2,6 +2,7 @@ import Debug from 'debug';
 import _ from 'lodash';
 import * as viem from 'viem';
 import { z } from 'zod';
+import { generateRouter } from '@usecannon/router';
 import { computeTemplateAccesses, mergeTemplateAccesses } from '../access-recorder';
 import { ChainBuilderRuntime } from '../runtime';
 import { routerSchema } from '../schemas';
@@ -13,6 +14,7 @@ import {
   getMergedAbiFromContractPaths,
 } from '../util';
 import { template } from '../utils/template';
+import { compileContract } from '../utils/compile';
 
 const debug = Debug('cannon:builder:router');
 
@@ -101,8 +103,6 @@ const routerStep = {
     config: Config,
     packageState: PackageState
   ): Promise<ChainArtifacts> {
-    const { generateRouter, getCompileInput, compileContract } = await import('@synthetixio/router');
-
     debug('exec', config);
 
     const contracts = config.contracts.map((n) => {
@@ -111,16 +111,18 @@ const routerStep = {
         throw new Error(`contract not found: ${n}`);
       }
 
+      const contractName = n.replace('.', '_'); // Use step name, and replace '.' in case is pointing to an import.
+
       return {
         constructorArgs: contract.constructorArgs,
         abi: contract.abi,
         deployedAddress: contract.address ? viem.getAddress(contract.address) : contract.address, // Make sure address is checksum encoded
         deployTxnHash: contract.deployTxnHash,
         deployTxnBlockNumber: '',
         deployTimestamp: '',
-        contractName: contract.contractName,
+        contractName: contractName,
         sourceName: contract.sourceName,
-        contractFullyQualifiedName: `${contract.sourceName}:${contract.contractName}`,
+        contractFullyQualifiedName: `${contract.sourceName}:${contractName}`,
       };
     });
 
@@ -134,11 +136,7 @@ const routerStep = {
 
     debug('router source code', sourceCode);
 
-    // On Mainnet, use default local solc evmVersion, for everything else, 'paris'
-    const evmVersion = [1, 5, 11155111].includes(runtime.chainId) ? undefined : 'paris';
-
-    const inputData = getCompileInput(contractName, sourceCode, evmVersion);
-    const solidityInfo = await compileContract(contractName, sourceCode, evmVersion);
+    const { input: inputData, output: solidityInfo } = await compileContract(contractName, sourceCode);
 
     // the ABI is entirely based on the fallback call so we have to generate ABI here
     const routableAbi = getMergedAbiFromContractPaths(ctx, config.contracts);

packages/builder/src/utils/compile.ts

@@ -0,0 +1,81 @@
+import * as viem from 'viem';
+import { fetchSolc } from '@usecannon/web-solc';
+
+interface CompileResult {
+  sourceName: string;
+  contractName: string;
+  abi: viem.Abi;
+  metadata: string;
+  solcVersion: string;
+  assembly: string;
+  bytecode: string;
+  deployedBytecode: string;
+  gasEstimates: {
+    creation: {
+      codeDepositCost: string;
+      executionCost: string;
+      totalCost: string;
+    };
+    external: {
+      '': string;
+    };
+  };
+}
+
+export async function compileContract(
+  contractName: string,
+  sourceCode: string,
+  evmVersion = 'paris',
+  compilerVersion = '0.8.27'
+) {
+  const { compile, stopWorker } = await fetchSolc(compilerVersion);
+
+  const sourceName = `${contractName}.sol`;
+
+  const input = {
+    language: 'Solidity',
+    sources: {
+      [sourceName]: {
+        content: sourceCode,
+      },
+    },
+    settings: {
+      outputSelection: {
+        '*': { '*': ['*'] },
+      },
+      evmVersion,
+    },
+  };
+
+  try {
+    const output = await compile(input);
+
+    if (output.errors) {
+      throw new Error(
+        [
+          `There was an error when compiling "${contractName}".`,
+          ...output.errors.map((err: { message: string }) => err.message),
+        ].join(' ')
+      );
+    }
+
+    const info = (output.contracts as any)[sourceName][contractName];
+    const metadata = JSON.parse(info.metadata);
+
+    const result = {
+      contractName,
+      sourceName,
+      abi: info.abi,
+      metadata: info.metadata,
+      solcVersion: metadata.compiler.version,
+      assembly: info.evm.assembly,
+      bytecode: info.evm.bytecode.object,
+      deployedBytecode: info.evm.deployedBytecode.object,
+      gasEstimates: info.evm.gasEstimates,
+    } satisfies CompileResult;
+
+    return { input, output: result };
+  } finally {
+    stopWorker();
+  }
+}

packages/website/src/features/Deploy/QueueFromGitOpsPage.tsx

@@ -563,7 +563,7 @@ export default function QueueFromGitOps() {
       !prevDeployLocation &&
       tomlRequiresPrevPackage &&
       !previousPackageInput) ||
-    canTomlBeDeployedUsingWebsite;
+    !canTomlBeDeployedUsingWebsite;
 
   const PreviewButton = ({ message }: { message?: string }) => (
     <Tooltip label={message}>