Show error page if embed version out of supported range (#335)

Author: ericglau

packages/core-cairo/src/index.ts

@@ -20,6 +20,6 @@ export { OptionsError } from './error';
 export type { Kind } from './kind';
 export { sanitizeKind } from './kind';
 
-export { contractsVersion, contractsVersionTag } from './utils/version';
+export { contractsVersion, contractsVersionTag, compatibleContractsSemver } from './utils/version';
 
 export { erc20, erc721, custom } from './api';

packages/core/src/index.ts

@@ -19,4 +19,6 @@ export { OptionsError } from './error';
 export type { Kind } from './kind';
 export { sanitizeKind } from './kind';
 
-export { erc20, erc721, erc1155, governor, custom } from './api';
+export { erc20, erc721, erc1155, governor, custom } from './api';
+
+export { compatibleContractsSemver } from './utils/version';

packages/ui/package.json

@@ -19,6 +19,7 @@
     "@types/resize-observer-browser": "^0.1.5",
     "@types/uuid": "^9.0.0",
     "@types/node": "^18.0.0",
+    "@types/semver": "^7.5.7",
     "autoprefixer": "^10.4.2",
     "path-browserify": "^1.0.1",
     "postcss": "^8.2.8",
@@ -43,6 +44,7 @@
     "sirv-cli": "^2.0.0",
     "tippy.js": "^6.3.1",
     "util": "^0.12.4",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "semver": "^7.6.0"
   }
 }

packages/ui/src/UnsupportedVersion.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  export let requestedVersion: string;
+  export let compatibleVersionSemver: string;
+</script>
+
+<div class="container flex flex-col gap-4 p-4">
+  <div class="header flex justify-between items-center">
+    <h1 class="text-lg font-bold">Unsupported Version</h1>
+  </div>
+
+  <div class="controls p-4">
+    <p>
+      Version <strong>{requestedVersion}</strong> is not supported by the Wizard.
+    </p>
+    <p>
+      Select a version that is compatible with the version range: <strong>{compatibleVersionSemver}</strong>.
+    </p>
+  </div>
+</div>
+
+<style lang="postcss">
+  .container {
+    background-color: var(--gray-1);
+    border: 1px solid var(--gray-2);
+    border-radius: 10px;
+    min-width: 32rem;
+  }
+
+  .header {
+    font-size: var(--text-small);
+  }
+
+  .controls {
+    background-color: white;
+    padding: var(--size-4);
+    border-radius: 5px;
+    box-shadow: var(--shadow);
+  }
+</style>

packages/ui/src/embed.ts

@@ -8,11 +8,22 @@ const currentScript = new URL(document.currentScript.src);
 
 const iframes = new WeakMap<MessageEventSource, HTMLIFrameElement>();
 
+let unsupportedVersion: boolean = false;
+const unsupportedVersionFrameHeight = 'auto';
+
 window.addEventListener('message', function (e: MessageEvent<Message>) {
-  if (e.source && e.data.kind === 'oz-wizard-resize') {
-    const iframe = iframes.get(e.source);
-    if (iframe) {
-      iframe.style.height = 'calc(100vh - 158px)';
+  if (e.source) {
+    if (e.data.kind === 'oz-wizard-unsupported-version') {
+      unsupportedVersion = true;
+      const iframe = iframes.get(e.source);
+      if (iframe) {
+        iframe.style.height = unsupportedVersionFrameHeight;
+      }
+    } else if (e.data.kind === 'oz-wizard-resize') {
+      const iframe = iframes.get(e.source);
+      if (iframe) {
+        iframe.style.height = unsupportedVersion ? unsupportedVersionFrameHeight : 'calc(100vh - 158px)';
+      }
     }
   }
 });
@@ -27,6 +38,7 @@ 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') {

packages/ui/src/main.ts

@@ -4,6 +4,10 @@ import type {} from 'svelte';
 import App from './App.svelte';
 import CairoApp from './cairo/App.svelte';
 import { postMessage } from './post-message';
+import UnsupportedVersion from './UnsupportedVersion.svelte';
+import semver from 'semver';
+import { compatibleContractsSemver as compatibleSolidityContractsSemver } from '@openzeppelin/wizard';
+import { compatibleContractsSemver as compatibleCairoContractsSemver } from '@openzeppelin/wizard-cairo';
 
 function postResize() {
   const { height } = document.documentElement.getBoundingClientRect();
@@ -18,10 +22,16 @@ resizeObserver.observe(document.body);
 const params = new URLSearchParams(window.location.search);
 
 const initialTab = params.get('tab') ?? undefined;
-const lang = params.get('lang');
+const lang = params.get('lang') ?? undefined;
+const requestedVersion = params.get('version') ?? undefined;
+
+let compatibleVersionSemver = lang === 'cairo' ? compatibleCairoContractsSemver : compatibleSolidityContractsSemver;
 
 let app;
-if (lang === 'cairo') {
+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 } });
 } else {
   app = new App({ target: document.body, props: { initialTab } });

packages/ui/src/post-message.ts

@@ -1,4 +1,4 @@
-export type Message = ResizeMessage | TabChangeMessage;
+export type Message = ResizeMessage | TabChangeMessage | UnsupportedVersionMessage;
 
 export interface ResizeMessage {
   kind: 'oz-wizard-resize';
@@ -10,6 +10,10 @@ export interface TabChangeMessage {
   tab: string;
 }
 
+export interface UnsupportedVersionMessage {
+  kind: 'oz-wizard-unsupported-version';
+}
+
 export function postMessage(msg: Message) {
   if (parent) {
     parent.postMessage(msg, '*');