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 @@ + + +
+
+

Unsupported Version

+
+ +
+

+ 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, '*');