diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore
index d6af7659..6635cf55 100644
--- a/packages/ui/.gitignore
+++ b/packages/ui/.gitignore
@@ -1 +1,10 @@
-/public/build/
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/packages/ui/.npmrc b/packages/ui/.npmrc
new file mode 100644
index 00000000..0c05da45
--- /dev/null
+++ b/packages/ui/.npmrc
@@ -0,0 +1,2 @@
+engine-strict=true
+resolution-mode=highest
diff --git a/packages/ui/README.md b/packages/ui/README.md
new file mode 100644
index 00000000..5c91169b
--- /dev/null
+++ b/packages/ui/README.md
@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 17600a84..d602e1df 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,47 +1,34 @@
{
- "name": "ui",
- "version": "0.0.0",
- "private": true,
- "scripts": {
- "build": "rollup -c",
- "dev": "rollup -c -w",
- "start": "sirv public",
- "validate": "svelte-check"
- },
- "devDependencies": {
- "@rollup/plugin-alias": "^5.0.0",
- "@rollup/plugin-commonjs": "^25.0.0",
- "@rollup/plugin-json": "^6.0.0",
- "@rollup/plugin-node-resolve": "^15.0.1",
- "@rollup/plugin-replace": "^5.0.1",
- "@rollup/plugin-typescript": "^11.0.0",
- "@types/file-saver": "^2.0.1",
- "@types/resize-observer-browser": "^0.1.5",
- "@types/uuid": "^9.0.0",
- "autoprefixer": "^10.4.2",
- "path-browserify": "^1.0.1",
- "postcss": "^8.2.8",
- "postcss-load-config": "^4.0.0",
- "rollup": "^3.0.0",
- "rollup-plugin-livereload": "^2.0.0",
- "rollup-plugin-styles": "^4.0.0",
- "rollup-plugin-svelte": "^7.0.0",
- "rollup-plugin-terser": "^7.0.0",
- "svelte": "^3.55.0",
- "svelte-check": "^3.0.1",
- "svelte-preprocess": "^5.0.0",
- "tailwindcss": "^3.0.15",
- "tslib": "^2.0.0",
- "typescript": "^4.9.0"
- },
- "dependencies": {
- "file-saver": "^2.0.5",
- "highlight.js": "^11.0.0",
- "highlightjs-cairo": "^0.2.0",
- "highlightjs-solidity": "^2.0.0",
- "sirv-cli": "^2.0.0",
- "tippy.js": "^6.3.1",
- "util": "^0.12.4",
- "uuid": "^9.0.0"
- }
+ "name": "ui",
+ "version": "0.0.1",
+ "private": true,
+ "scripts": {
+ "dev": "vite dev",
+ "build": "vite build",
+ "preview": "vite preview",
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+ },
+ "devDependencies": {
+ "@sveltejs/adapter-auto": "^2.0.0",
+ "@sveltejs/kit": "^1.20.4",
+ "@types/file-saver": "^2.0.5",
+ "autoprefixer": "^10.4.16",
+ "postcss": "^8.4.30",
+ "svelte": "^4.0.5",
+ "svelte-check": "^3.4.3",
+ "tailwindcss": "^3.3.3",
+ "tslib": "^2.4.1",
+ "typescript": "^5.0.0",
+ "vite": "^4.4.2"
+ },
+ "type": "module",
+ "dependencies": {
+ "file-saver": "^2.0.5",
+ "highlight.js": "^11.8.0",
+ "highlightjs-cairo": "^0.2.0",
+ "highlightjs-solidity": "^2.0.6",
+ "tippy.js": "^6.3.7",
+ "uuid": "^9.0.1"
+ }
}
diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js
index 3dd96fd1..1d7d3e44 100644
--- a/packages/ui/postcss.config.js
+++ b/packages/ui/postcss.config.js
@@ -1,11 +1,7 @@
-const nesting = require('tailwindcss/nesting');
-const tailwindcss = require('tailwindcss');
-const autoprefixer = require('autoprefixer');
-
-module.exports = {
- plugins: [
- nesting,
- tailwindcss,
- autoprefixer,
- ],
-};
+export default {
+ plugins: {
+ 'tailwindcss/nesting': {},
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/packages/ui/public/cairo.html b/packages/ui/public/cairo.html
deleted file mode 100644
index 1eed027f..00000000
--- a/packages/ui/public/cairo.html
+++ /dev/null
@@ -1,68 +0,0 @@
-
-
-
-
-
- OpenZeppelin Contracts Wizard for Cairo
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/packages/ui/public/embed.html b/packages/ui/public/embed.html
deleted file mode 100644
index fdc273c0..00000000
--- a/packages/ui/public/embed.html
+++ /dev/null
@@ -1,39 +0,0 @@
-
-
-
-
-
-
- OpenZeppelin Contracts Wizard
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/packages/ui/public/index.html b/packages/ui/public/index.html
deleted file mode 100644
index 313f848e..00000000
--- a/packages/ui/public/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
-
-
-
-
-
- OpenZeppelin Contracts Wizard
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/packages/ui/rollup.config.mjs b/packages/ui/rollup.config.mjs
deleted file mode 100644
index 2ba76443..00000000
--- a/packages/ui/rollup.config.mjs
+++ /dev/null
@@ -1,154 +0,0 @@
-import svelte from 'rollup-plugin-svelte';
-import commonjs from '@rollup/plugin-commonjs';
-import json from '@rollup/plugin-json';
-import resolve from '@rollup/plugin-node-resolve';
-import replace from '@rollup/plugin-replace';
-import alias from '@rollup/plugin-alias';
-import livereload from 'rollup-plugin-livereload';
-import { terser } from 'rollup-plugin-terser';
-import typescript from '@rollup/plugin-typescript';
-import styles from 'rollup-plugin-styles';
-import proc from 'child_process';
-import events from 'events';
-import serve from './rollup.server.mjs';
-
-const production = !process.env.ROLLUP_WATCH;
-
-process.env.NODE_ENV = production ? 'production' : 'development';
-
-// Watch the `public` directory and refresh the
-// browser on changes when not in production
-const livereloader =
- !production &&
- livereload({
- watch: 'public',
- port: 35731,
- });
-
-function onStartRun(cmd, ...args) {
- let ran = false;
- return {
- async buildStart() {
- if (ran) return;
- const child = proc.spawn(cmd, args, { stdio: 'inherit', shell: process.platform == 'win32' });
- const [code, signal] = await events.once(child, 'exit');
- if (code || signal) {
- throw new Error(`Command \`${cmd}\` failed`);
- }
- ran = true;
- },
- };
-}
-
-/** @type import('rollup').RollupOptions */
-export default [
- {
- input: 'src/standalone.js',
- output: {
- dir: 'public/build',
- assetFileNames: '[name][extname]',
- sourcemap: true,
- },
- onwarn(warning, warn) {
- if (warning.code !== 'EMPTY_BUNDLE') {
- warn(warning);
- }
- },
- plugins: [
- styles({
- include: 'src/standalone.css',
- mode: ['extract'],
- url: false,
- sourceMap: true,
- }),
- ],
- },
- {
- input: 'src/embed.ts',
- output: {
- sourcemap: true,
- format: 'iife',
- name: 'embed',
- file: 'public/build/embed.js',
- },
- plugins: [
- typescript({
- include: ['src/**/*.ts'],
- sourceMap: true,
- inlineSources: true,
- }),
-
- livereloader,
-
- // If we're building for production (npm run build
- // instead of npm run dev), minify
- production && terser(),
- ],
- },
- {
- preserveEntrySignatures: false,
- input: 'src/main.ts',
- output: {
- sourcemap: true,
- format: 'es',
- dir: 'public/build',
- chunkFileNames: '[name].js',
- assetFileNames: '[name][extname]',
- },
- plugins: [
- // Generate openzeppelin-contracts.js data file
- onStartRun(...'yarn --cwd ../core prepare'.split(' ')),
-
- svelte(await import('./svelte.config.js')),
-
- styles({
- mode: ['extract', 'bundle.css'],
- sourceMap: true,
- }),
-
- alias({
- entries: {
- path: 'path-browserify',
- 'highlight.js/lib/languages/python': '../../node_modules/highlight.js/lib/languages/python.js',
- },
- }),
-
- resolve({
- browser: true,
- dedupe: ['svelte'],
- mainFields: ['ts:main', 'module', 'main'],
- preferBuiltins: false,
- }),
-
- replace({
- preventAssignment: true,
- include: '../../**/node_modules/**/*',
- 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
- 'process.env.NODE_DEBUG': JSON.stringify(process.env.NODE_DEBUG),
- }),
-
- json(),
-
- commonjs(),
-
- typescript({
- include: ['src/**/*.ts', '../core/src/**/*.ts', '../core-cairo/src/**/*.ts'],
- sourceMap: true,
- inlineSources: true,
- }),
-
- // In dev mode, call `npm run start` once
- // the bundle has been generated
- !production && serve(),
-
- livereloader,
-
- // If we're building for production (npm run build
- // instead of npm run dev), minify
- production && terser(),
- ],
- watch: {
- clearScreen: false,
- },
- },
-];
diff --git a/packages/ui/rollup.server.mjs b/packages/ui/rollup.server.mjs
deleted file mode 100644
index 33e18e92..00000000
--- a/packages/ui/rollup.server.mjs
+++ /dev/null
@@ -1,28 +0,0 @@
-import proc from 'child_process';
-
-const state = (global.ROLLUP_SERVER = global.ROLLUP_SERVER || {
- server: undefined,
-});
-
-export default function serve() {
- function toExit() {
- if (state.server) state.server.kill(0);
- }
-
- return {
- writeBundle() {
- if (state.server) return;
- state.server = proc.spawn(
- 'npm',
- ['run', 'start', '--', '--dev'],
- {
- stdio: ['ignore', 'inherit', 'inherit'],
- shell: true,
- },
- );
-
- process.on('SIGTERM', toExit);
- process.on('exit', toExit);
- },
- };
-}
diff --git a/packages/ui/src/app.d.ts b/packages/ui/src/app.d.ts
new file mode 100644
index 00000000..f59b884c
--- /dev/null
+++ b/packages/ui/src/app.d.ts
@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+ namespace App {
+ // interface Error {}
+ // interface Locals {}
+ // interface PageData {}
+ // interface Platform {}
+ }
+}
+
+export {};
diff --git a/packages/ui/src/app.html b/packages/ui/src/app.html
new file mode 100644
index 00000000..eb62a058
--- /dev/null
+++ b/packages/ui/src/app.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ %sveltekit.head%
+
+
+ %sveltekit.body%
+
+
+
+
+
diff --git a/packages/ui/src/embed.ts b/packages/ui/src/embed.ts
deleted file mode 100644
index 119c6fc7..00000000
--- a/packages/ui/src/embed.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import type { Message } from './post-message';
-
-if (!document.currentScript || !('src' in document.currentScript)) {
- throw new Error('Unknown script URL');
-}
-
-const currentScript = new URL(document.currentScript.src);
-
-const iframes = new WeakMap();
-
-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 = Math.ceil(e.data.height).toString() + 'px';
- }
- }
-});
-
-onDOMContentLoaded(function () {
- const wizards = document.querySelectorAll('oz-wizard');
-
- for (const w of wizards) {
- w.style.display = 'block';
- w.style.minHeight = '53rem';
-
- const src = new URL('embed', currentScript.origin);
-
- setSearchParam(w, src.searchParams, 'data-lang', 'lang');
- setSearchParam(w, src.searchParams, 'data-tab', 'tab');
- const sync = w.getAttribute('data-sync-url');
-
- if (sync === 'fragment') {
- const fragment = window.location.hash.replace('#', '');
- if (fragment) {
- src.searchParams.set('tab', fragment);
- }
- }
-
- const iframe = document.createElement('iframe');
- iframe.src = src.toString();
- iframe.style.display = 'block';
- iframe.style.border = '0';
- iframe.style.width = '100%';
- iframe.style.height = '53rem';
-
- w.appendChild(iframe);
-
- if (iframe.contentWindow !== null) {
- iframes.set(iframe.contentWindow, iframe);
- }
-
- if (sync === 'fragment') {
- window.addEventListener('message', (e: MessageEvent) => {
- if (e.source && e.data.kind === 'oz-wizard-tab-change') {
- if (iframe === iframes.get(e.source)) {
- window.location.hash = e.data.tab;
- }
- }
- });
- }
- }
-});
-
-function setSearchParam(w: HTMLElement, searchParams: URLSearchParams, dataParam: string, param: string) {
- const value = w.getAttribute(dataParam) ?? w.getAttribute(param);
- if (value) {
- searchParams.set(param, value);
- }
-}
-
-function onDOMContentLoaded(callback: () => void) {
- if (document.readyState === 'loading') {
- document.addEventListener('DOMContentLoaded', callback);
- } else {
- callback();
- }
-}
-
-export {};
diff --git a/packages/ui/src/icons/CheckIcon.svelte b/packages/ui/src/icons/CheckIcon.svelte
deleted file mode 100644
index ec3c83a6..00000000
--- a/packages/ui/src/icons/CheckIcon.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/packages/ui/src/Dropdown.svelte b/packages/ui/src/lib/Dropdown.svelte
similarity index 96%
rename from packages/ui/src/Dropdown.svelte
rename to packages/ui/src/lib/Dropdown.svelte
index d07ef79c..4e10bc9e 100644
--- a/packages/ui/src/Dropdown.svelte
+++ b/packages/ui/src/lib/Dropdown.svelte
@@ -24,7 +24,7 @@
-
+
diff --git a/packages/ui/src/HelpTooltip.svelte b/packages/ui/src/lib/HelpTooltip.svelte
similarity index 100%
rename from packages/ui/src/HelpTooltip.svelte
rename to packages/ui/src/lib/HelpTooltip.svelte
diff --git a/packages/ui/src/OverflowMenu.svelte b/packages/ui/src/lib/OverflowMenu.svelte
similarity index 100%
rename from packages/ui/src/OverflowMenu.svelte
rename to packages/ui/src/lib/OverflowMenu.svelte
diff --git a/packages/ui/src/Tooltip.svelte b/packages/ui/src/lib/Tooltip.svelte
similarity index 91%
rename from packages/ui/src/Tooltip.svelte
rename to packages/ui/src/lib/Tooltip.svelte
index 2556c262..27f025f5 100644
--- a/packages/ui/src/Tooltip.svelte
+++ b/packages/ui/src/lib/Tooltip.svelte
@@ -1,5 +1,5 @@
-