diff --git a/packages/core-cairo/src/index.ts b/packages/core-cairo/src/index.ts
index ea2f8341..9a01f17a 100644
--- a/packages/core-cairo/src/index.ts
+++ b/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';
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index b8bf1cc4..2c1b4c73 100644
--- a/packages/core/src/index.ts
+++ b/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';
\ No newline at end of file
+export { erc20, erc721, erc1155, governor, custom } from './api';
+
+export { compatibleContractsSemver } from './utils/version';
\ No newline at end of file
diff --git a/packages/ui/package.json b/packages/ui/package.json
index fb504504..2114cf81 100644
--- a/packages/ui/package.json
+++ b/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"
}
}
diff --git a/packages/ui/src/UnsupportedVersion.svelte b/packages/ui/src/UnsupportedVersion.svelte
new file mode 100644
index 00000000..706616d6
--- /dev/null
+++ b/packages/ui/src/UnsupportedVersion.svelte
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+ Version {requestedVersion} is not supported by the Wizard.
+
+
+ Select a version that is compatible with the version range: {compatibleVersionSemver}.
+
+
+
+
+
diff --git a/packages/ui/src/embed.ts b/packages/ui/src/embed.ts
index 703430dd..0dcfbbea 100644
--- a/packages/ui/src/embed.ts
+++ b/packages/ui/src/embed.ts
@@ -8,11 +8,22 @@ const currentScript = new URL(document.currentScript.src);
const iframes = new WeakMap();
+let unsupportedVersion: boolean = false;
+const unsupportedVersionFrameHeight = 'auto';
+
window.addEventListener('message', function (e: MessageEvent) {
- 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') {
diff --git a/packages/ui/src/main.ts b/packages/ui/src/main.ts
index 8b8404be..ae2a159e 100644
--- a/packages/ui/src/main.ts
+++ b/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 } });
diff --git a/packages/ui/src/post-message.ts b/packages/ui/src/post-message.ts
index c879cb1e..6fe72aae 100644
--- a/packages/ui/src/post-message.ts
+++ b/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, '*');