Merge pull request #12 from OpenZeppelin/listen-to-wizard-contracts

feat: listen to wizard contract changes

Author: MCarlomagno

src/lib/models/solc.ts

@@ -7,7 +7,7 @@ export type CompilerInput = {
    * Name of the file and the content of the file.
    * e.g. { 'test.sol': { content: 'contract C { function f() public { L.f(); } }' } }
    */
-  sources: Record<string, { content: string }>;
+  sources: ContractSources;
   /**
    * Settings for the compiler.
    * e.g. { outputSelection: { '*': { '*': ['*'] } }"
@@ -17,4 +17,19 @@ export type CompilerInput = {
   };
 };
 
-export type ImportContents = Record<string, { contents: 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,2 +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();
+}
+
+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/compiler.ts

@@ -1,17 +1,17 @@
 import solc from 'solc';
 
-import type { ImportContents } from "$lib/models/solc";
+import type { ContractSources } from "$lib/models/solc";
 import type { CompilerInput } from "$lib/models/solc";
 
 export class SolidityCompiler {
-  getContent(path: string, contents: Record<string, { contents: string }>) {
+  getContent(path: string, contents: ContractSources) {
     if (contents[path]) {
       return contents[path];
     }
     return { error: 'File not found' };
   }
 
-  compile(input: CompilerInput, contents?: ImportContents) {
+  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);

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,8 +1,10 @@
 <script lang="ts">
-  import { onMount } from "svelte";
   import { initWizardPlugin } from "$lib/wizard";
+  import { onMount } from "svelte";
+  import Configure from "$lib/wizard/components/Configure.svelte";
 
-  let output = $state<any>(null);
+  onMount(initWizardPlugin);
 </script>
 
-<p>Defender Deploy in Wizard</p>
+<Configure />
+