Merge pull request #13 from OpenZeppelin/main

Release to wizard

package.json

@@ -26,6 +26,7 @@
 		"@remixproject/plugin-utils": "^0.3.38",
 		"@sveltejs/adapter-netlify": "^4.3.6",
 		"bootstrap": "^5.3.3",
-		"ethers": "^6.13.4"
+		"ethers": "^6.13.4",
+		"solc": "^0.8.28"
 	}
 }

src/app.d.ts

@@ -13,3 +13,8 @@ declare global {
 declare interface Window {
   ethereum?: import('ethers').Eip1193Provider & import('ethers').BrowserProvider;
 }
+
+// solc does not have a type definition file.
+declare module 'solc' {
+  export function compile(input: string, opts?: any): any;
+}

src/lib/api.ts

@@ -1,6 +1,7 @@
 import type { CreateApprovalProcessRequest } from "./models/approval-process";
 import type { Credentials } from "./models/auth";
 import type { DeployContractRequest, UpdateDeploymentRequest } from "./models/deploy";
+import type { CompilerInput } from "./models/solc";
 
 class ApiClient {
   credentials: Credentials | null = null;
@@ -72,6 +73,16 @@ class ApiClient {
 
     return response.json();
   }
+
+  async compile(input: CompilerInput) {
+    const response = await fetch("/compiler", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ input }),
+    });
+
+    return response.json();
+  }
 }
 
 export const API = new ApiClient();

src/lib/models/solc.ts

@@ -0,0 +1,35 @@
+export type CompilerInput = {
+  /**
+   * The language, currently only Solidity is supported.
+   */
+  language: string;
+  /**
+   * Name of the file and the content of the file.
+   * e.g. { 'test.sol': { content: 'contract C { function f() public { L.f(); } }' } }
+   */
+  sources: ContractSources;
+  /**
+   * Settings for the compiler.
+   * e.g. { outputSelection: { '*': { '*': ['*'] } }"
+   */
+  settings: {
+    outputSelection: Record<string, Record<string, string[]>>;
+  };
+};
+
+export type ContractSources = {
+  [source: string]: { content: string };
+};
+
+export function buildCompilerInput(sources: ContractSources): CompilerInput {
+  return {
+    sources,
+    language: 'Solidity',
+    settings: {
+      outputSelection: {
+        '*': { '*': ['*'] }
+      }
+    }
+  };
+}
+

src/lib/wizard/components/Configure.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { API } from "$lib/api";
+  import { buildCompilerInput, type ContractSources } from "$lib/models/solc";
+  import { wizardState } from "../state.svelte";
+
+  let compilationResult: any;
+
+  async function compile() {
+    if (!wizardState.sources) return;
+    compilationResult = await API.compile(buildCompilerInput(wizardState.sources));
+  }
+
+  function getMainContractName(sources?: ContractSources) {
+    if (!sources) return '';
+    // The first name that is not a dependency
+    return Object.keys(sources).find(name => !name.startsWith('@'));
+  }
+
+</script>
+
+<p>
+  Contract to compile: {getMainContractName(wizardState.sources)}
+
+  <button onclick={compile} >
+    Compile
+  </button>
+</p>

src/lib/wizard/index.ts

@@ -1,4 +1,20 @@
+import type { ContractSources } from "../models/solc";
+import { wizardState } from "./state.svelte";
+
+export interface DefenderDeployMessage {
+  kind: 'oz-wizard-defender-deploy';
+  sources: ContractSources;
+}
+
 export const initWizardPlugin = () => {
   // when users configure a contract, the plugin gets the results.
-  // listenToContracts();
+  listenToContracts();
+}
+
+function listenToContracts() {
+  window.addEventListener('message', function (e: MessageEvent<DefenderDeployMessage>) {
+    if (e.data.kind === 'oz-wizard-defender-deploy') {
+      wizardState.sources = e.data.sources;
+    }
+  });
 }

src/lib/wizard/state.svelte.ts

@@ -0,0 +1,5 @@
+import type { ContractSources } from "../models/solc";
+
+export const wizardState = $state<{ sources: ContractSources | undefined }>({
+  sources: undefined,
+});

src/routes/+page.svelte

@@ -20,20 +20,17 @@
 		// assumes that when in dev mode and 
 		// the ancestor origin is localhost, we are in the wizard
 		if (dev && ancestorOrigin.includes("localhost")) {
-			parent = 'wizard';
-			return;
+			return parent = 'wizard';
 		}
 
-		if (ancestorOrigin.includes("remix.ethereum")) {
-			parent = 'remix';
-			return initRemixPlugin();
+		if (ancestorOrigin.includes("wizard.openzeppelin")) {
+			return parent = 'wizard';
 		}
 
-		if (ancestorOrigin.includes("wizard.openzeppelin")) {
-			parent = 'wizard';
-			// TODO: init wizard plugin
-			return;
+		if (ancestorOrigin.includes("remix.ethereum")) {
+			return parent = 'remix';
 		}
+
 	});
 </script>
 

src/routes/compiler/+server.ts

@@ -0,0 +1,19 @@
+import type { CompilerInput } from "$lib/models/solc";
+import { json } from '@sveltejs/kit';
+import { SolidityCompiler } from "./compiler";
+import { attempt } from "$lib/utils/attempt";
+
+
+export async function POST({ request }: { request: Request }) {
+  const { input }: { input: CompilerInput } = await request.json();
+
+  const compiler = new SolidityCompiler();
+
+  const [output, error] = await attempt(() => JSON.parse(compiler.compile(input)));
+
+  if (error) {
+    return json({ success: false, error: error.msg });
+  }
+
+  return json({ success: true, data: { output } });
+}

src/routes/compiler/compiler.ts

@@ -0,0 +1,20 @@
+import solc from 'solc';
+
+import type { ContractSources } from "$lib/models/solc";
+import type { CompilerInput } from "$lib/models/solc";
+
+export class SolidityCompiler {
+  getContent(path: string, contents: ContractSources) {
+    if (contents[path]) {
+      return contents[path];
+    }
+    return { error: 'File not found' };
+  }
+
+  compile(input: CompilerInput, contents?: ContractSources) {
+    const shouldFindImports = contents !== undefined;
+    const findImports = (path: string) => shouldFindImports ? this.getContent(path, contents) : undefined;
+    const output = solc.compile(JSON.stringify(input), shouldFindImports ? { import: findImports } : undefined);
+    return output;
+  }
+}

src/routes/remix.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { onMount } from "svelte";
+  import { initRemixPlugin } from "$lib/remix";
   import { globalState } from "$lib/remix/state/state.svelte";
   import Setup from "$lib/remix/components/Setup.svelte";
   import Network from "$lib/remix/components/Network.svelte";
@@ -48,6 +50,8 @@
 
 		return false;
 	});
+
+  onMount(initRemixPlugin);
 </script>
 
 <p>

src/routes/wizard.svelte

@@ -1,4 +1,10 @@
 <script lang="ts">
+  import { initWizardPlugin } from "$lib/wizard";
+  import { onMount } from "svelte";
+  import Configure from "$lib/wizard/components/Configure.svelte";
+
+  onMount(initWizardPlugin);
 </script>
 
-<p>Defender Deploy in Wizard</p>
+<Configure />
+