Enable prefilling initial options from URL search parameters (#380)

Co-authored-by: Ernesto García <[email protected]>

Author: ericglau

packages/ui/src/App.svelte

@@ -27,6 +27,7 @@
 
     import { saveAs } from 'file-saver';
     import { injectHyperlinks } from './utils/inject-hyperlinks';
+    import { InitialOptions } from './initial-options';
 
     const dispatch = createEventDispatcher();
 
@@ -38,17 +39,34 @@
       dispatch('tab-change', tab);
     };
 
+    export let initialOpts: InitialOptions = {};
+    let initialValuesSet = false;
+
     let allOpts: { [k in Kind]?: Required<KindedOptions[k]> } = {};
     let errors: { [k in Kind]?: OptionsErrorMessages } = {};
 
-    let contract: Contract = new ContractBuilder('MyToken');
+    let contract: Contract = new ContractBuilder(initialOpts.name ?? 'MyToken');
 
     $: functionCall && applyFunctionCall()
 
     $: opts = allOpts[tab];
 
     $: {
       if (opts) {
+        if (!initialValuesSet) {
+          opts.name = initialOpts.name ?? opts.name;
+          switch (opts.kind) {
+            case 'ERC20':
+              opts.premint = initialOpts.premint ?? opts.premint;
+            case 'ERC721':
+              opts.symbol = initialOpts.symbol ?? opts.symbol;
+              break;
+            case 'ERC1155':
+            case 'Governor':
+            case 'Custom':
+          }
+          initialValuesSet = true;
+        }
         try {
           contract = buildGeneric(opts);
           errors[tab] = undefined;

packages/ui/src/cairo/App.svelte

@@ -20,6 +20,7 @@
 
     import { saveAs } from 'file-saver';
     import { injectHyperlinks } from './inject-hyperlinks';
+    import { InitialOptions } from '../initial-options';
 
     const dispatch = createEventDispatcher();
 
@@ -31,15 +32,31 @@
       dispatch('tab-change', tab);
     };
 
+    export let initialOpts: InitialOptions = {};
+    let initialValuesSet = false;
+
     let allOpts: { [k in Kind]?: Required<KindedOptions[k]> } = {};
     let errors: { [k in Kind]?: OptionsErrorMessages } = {};
 
-    let contract: Contract = new ContractBuilder('MyToken');
+    let contract: Contract = new ContractBuilder(initialOpts.name ?? 'MyToken');
 
     $: opts = allOpts[tab];
 
     $: {
       if (opts) {
+        if (!initialValuesSet) {
+          opts.name = initialOpts.name ?? opts.name;
+          switch (opts.kind) {
+            case 'ERC20':
+              opts.premint = initialOpts.premint ?? opts.premint;
+            case 'ERC721':
+              opts.symbol = initialOpts.symbol ?? opts.symbol;
+              break;
+            case 'ERC1155':
+            case 'Custom':
+          }
+          initialValuesSet = true;
+        }
         try {
           contract = buildGeneric(opts);
           errors[tab] = undefined;

packages/ui/src/embed.ts

@@ -39,12 +39,19 @@ onDOMContentLoaded(function () {
     setSearchParam(w, src.searchParams, 'data-lang', 'lang');
     setSearchParam(w, src.searchParams, 'data-tab', 'tab');
     setSearchParam(w, src.searchParams, 'version', 'version');
+
     const sync = w.getAttribute('data-sync-url');
 
     if (sync === 'fragment') {
-      const fragment = window.location.hash.replace('#', '');
-      if (fragment) {
-        src.searchParams.set('tab', fragment);
+      // Uses format: #tab&key=value&key=value...
+      const fragments = window.location.hash.replace('#', '').split('&');
+      for (const fragment of fragments) {
+        const [key, value] = fragment.split('=', 2);
+        if (key && value) {
+          src.searchParams.set(key, value);
+        } else {
+          src.searchParams.set('tab', fragment);
+        }
       }
     }
 

packages/ui/src/initial-options.ts

@@ -0,0 +1 @@
+export interface InitialOptions { name?: string, symbol?: string, premint?: string };

packages/ui/src/main.ts

@@ -8,6 +8,7 @@ import UnsupportedVersion from './UnsupportedVersion.svelte';
 import semver from 'semver';
 import { compatibleContractsSemver as compatibleSolidityContractsSemver } from '@openzeppelin/wizard';
 import { compatibleContractsSemver as compatibleCairoContractsSemver } from '@openzeppelin/wizard-cairo';
+import { InitialOptions } from './initial-options';
 
 function postResize() {
   const { height } = document.documentElement.getBoundingClientRect();
@@ -25,16 +26,22 @@ const initialTab = params.get('tab') ?? undefined;
 const lang = params.get('lang') ?? undefined;
 const requestedVersion = params.get('version') ?? undefined;
 
+const initialOpts: InitialOptions = {
+  name: params.get('name') ?? undefined,
+  symbol: params.get('symbol') ?? undefined,
+  premint: params.get('premint') ?? undefined,
+}
+
 let compatibleVersionSemver = lang === 'cairo' ? compatibleCairoContractsSemver : compatibleSolidityContractsSemver;
 
 let app;
 if (requestedVersion && !semver.satisfies(requestedVersion, compatibleVersionSemver)) {
   postMessage({ kind: 'oz-wizard-unsupported-version' });
   app = new UnsupportedVersion({ target: document.body, props: { requestedVersion, compatibleVersionSemver }});
 } else if (lang === 'cairo') {
-  app = new CairoApp({ target: document.body, props: { initialTab } });
+  app = new CairoApp({ target: document.body, props: { initialTab, initialOpts } });
 } else {
-  app = new App({ target: document.body, props: { initialTab } });
+  app = new App({ target: document.body, props: { initialTab, initialOpts } });
 }
 
 app.$on('tab-change', (e: CustomEvent) => {