From 959730f4c51df237a24f7972dd0f3c6742260d6e Mon Sep 17 00:00:00 2001 From: Eric Lau Date: Fri, 23 Feb 2024 13:59:53 -0500 Subject: [PATCH 1/3] Show error page if version out of supported range --- packages/core-cairo/src/index.ts | 2 +- packages/core/src/index.ts | 4 ++- packages/ui/package.json | 4 ++- packages/ui/src/UnsupportedVersion.svelte | 39 +++++++++++++++++++++++ packages/ui/src/embed.ts | 1 + packages/ui/src/main.ts | 13 ++++++-- 6 files changed, 58 insertions(+), 5 deletions(-) create mode 100644 packages/ui/src/UnsupportedVersion.svelte 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..fc253adb --- /dev/null +++ b/packages/ui/src/UnsupportedVersion.svelte @@ -0,0 +1,39 @@ + + +
+
+

Unsupported Version

+
+ +
+

+ Version {requestedVersion} is not supported by the Contracts Wizard. +

+

+ Select a version that matches the supported version range: {compatibleVersionSemver}. +

+
+
+ + diff --git a/packages/ui/src/embed.ts b/packages/ui/src/embed.ts index 703430dd..fe1e93ca 100644 --- a/packages/ui/src/embed.ts +++ b/packages/ui/src/embed.ts @@ -27,6 +27,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..7cad7d5e 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,15 @@ 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)) { + 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 } }); From 08fd325d9fb05fbb5560bccf5a49f28a3d61b012 Mon Sep 17 00:00:00 2001 From: Eric Lau Date: Fri, 23 Feb 2024 16:22:34 -0500 Subject: [PATCH 2/3] Reduce frame height if unsupported version --- packages/ui/src/embed.ts | 19 +++++++++++++++---- packages/ui/src/main.ts | 1 + packages/ui/src/post-message.ts | 6 +++++- 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/packages/ui/src/embed.ts b/packages/ui/src/embed.ts index fe1e93ca..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)'; + } } } }); diff --git a/packages/ui/src/main.ts b/packages/ui/src/main.ts index 7cad7d5e..ae2a159e 100644 --- a/packages/ui/src/main.ts +++ b/packages/ui/src/main.ts @@ -29,6 +29,7 @@ let compatibleVersionSemver = lang === 'cairo' ? compatibleCairoContractsSemver 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 } }); 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, '*'); From 70d3f7ef6146923df12657e988a9a1a26e2e7ce2 Mon Sep 17 00:00:00 2001 From: Eric Lau Date: Fri, 23 Feb 2024 16:38:39 -0500 Subject: [PATCH 3/3] Update message --- packages/ui/src/UnsupportedVersion.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/UnsupportedVersion.svelte b/packages/ui/src/UnsupportedVersion.svelte index fc253adb..706616d6 100644 --- a/packages/ui/src/UnsupportedVersion.svelte +++ b/packages/ui/src/UnsupportedVersion.svelte @@ -10,10 +10,10 @@

- Version {requestedVersion} is not supported by the Contracts Wizard. + Version {requestedVersion} is not supported by the Wizard.

- Select a version that matches the supported version range: {compatibleVersionSemver}. + Select a version that is compatible with the version range: {compatibleVersionSemver}.