Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

standalone app (wails) #504

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 1 addition & 31 deletions ui/.gitignore
Original file line number Diff line number Diff line change
@@ -1,33 +1,3 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
/node_modules
146 changes: 116 additions & 30 deletions ui/.svelte-kit/ambient.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,76 +27,119 @@
*/
declare module '$env/static/private' {
export const SHELL: string;
export const npm_command: string;
export const LSCOLORS: string;
export const WINDOWID: string;
export const npm_config_userconfig: string;
export const COLORTERM: string;
export const npm_config_cache: string;
export const LESS: string;
export const NVM_INC: string;
export const CONDA_EXE: string;
export const _CE_M: string;
export const npm_package_dependencies_ethers: string;
export const npm_package_dependencies_flowbite: string;
export const I3SOCK: string;
export const NODE: string;
export const COLOR: string;
export const npm_config_local_prefix: string;
export const npm_package_devDependencies_tslib: string;
export const npm_config_ignore_scripts: string;
export const npm_package_devDependencies_autoprefixer: string;
export const npm_package_devDependencies_tailwindcss: string;
export const npm_package_scripts_check_watch: string;
export const npm_package_dependencies__popperjs_core: string;
export const npm_package_private: string;
export const npm_package_devDependencies_svelte_heros_v2: string;
export const npm_config_argv: string;
export const npm_config_bin_links: string;
export const KITTY_PID: string;
export const npm_config_globalconfig: string;
export const EDITOR: string;
export const npm_package_scripts_test_unit: string;
export const npm_package_dependencies_classnames: string;
export const GTK_MODULES: string;
export const XDG_SEAT: string;
export const npm_package_dependencies_axios: string;
export const PWD: string;
export const npm_config_save_prefix: string;
export const npm_package_devDependencies_vite: string;
export const LOGNAME: string;
export const XDG_SESSION_TYPE: string;
export const npm_config_init_module: string;
export const npm_package_readmeFilename: string;
export const npm_package_dependencies_svelte_awesome_icons: string;
export const npm_package_scripts_build: string;
export const _: string;
export const XAUTHORITY: string;
export const DESKTOP_STARTUP_ID: string;
export const npm_package_devDependencies_prettier: string;
export const KITTY_PUBLIC_KEY: string;
export const MOTD_SHOWN: string;
export const HOME: string;
export const npm_config_version_git_tag: string;
export const LANG: string;
export const npm_package_devDependencies_typescript: string;
export const LS_COLORS: string;
export const npm_config_init_license: string;
export const npm_package_version: string;
export const npm_config_version_commit_hooks: string;
export const KITTY_WINDOW_ID: string;
export const npm_package_scripts_test_integration: string;
export const npm_package_devDependencies_prettier_plugin_svelte: string;
export const INIT_CWD: string;
export const npm_package_scripts_format: string;
export const npm_package_scripts_preview: string;
export const npm_lifecycle_script: string;
export const npm_package_description: string;
export const NVM_DIR: string;
export const npm_config_version_tag_prefix: string;
export const npm_package_devDependencies__sveltejs_vite_plugin_svelte: string;
export const YARN_WRAP_OUTPUT: string;
export const npm_package_devDependencies_svelte_check: string;
export const XDG_SESSION_CLASS: string;
export const TERMINFO: string;
export const TERM: string;
export const TERMINFO: string;
export const npm_package_name: string;
export const ZSH: string;
export const _CE_CONDA: string;
export const npm_config_prefix: string;
export const npm_package_type: string;
export const USER: string;
export const npm_package_devDependencies_vitest: string;
export const npm_package_dependencies_flowbite_svelte: string;
export const CONDA_SHLVL: string;
export const DISPLAY: string;
export const npm_lifecycle_event: string;
export const SHLVL: string;
export const npm_config_version_git_sign: string;
export const NVM_CD_FLAGS: string;
export const npm_config_version_git_message: string;
export const PAGER: string;
export const XDG_VTNR: string;
export const UBUNTU_MENUPROXY: string;
export const XDG_SESSION_ID: string;
export const npm_config_user_agent: string;
export const npm_package_scripts_lint: string;
export const npm_execpath: string;
export const CONDA_PYTHON_EXE: string;
export const npm_package_devDependencies__sveltejs_adapter_auto: string;
export const npm_package_devDependencies_svelte: string;
export const npm_package_scripts_test: string;
export const XDG_RUNTIME_DIR: string;
export const npm_package_devDependencies_svelte_preprocess: string;
export const npm_config_strict_ssl: string;
export const DEBUGINFOD_URLS: string;
export const npm_package_json: string;
export const npm_config_noproxy: string;
export const npm_package_scripts_dev: string;
export const npm_package_scripts_check: string;
export const PATH: string;
export const npm_config_metrics_registry: string;
export const npm_config_node_gyp: string;
export const npm_package_devDependencies__sveltejs_kit: string;
export const npm_package_dependencies_identicon_js: string;
export const DBUS_SESSION_BUS_ADDRESS: string;
export const npm_config_global_prefix: string;
export const NVM_BIN: string;
export const npm_package_devDependencies__playwright_test: string;
export const MAIL: string;
export const NVM_BIN: string;
export const npm_config_registry: string;
export const npm_config_ignore_optional: string;
export const npm_config_scripts_prepend_node_path: string;
export const npm_package_devDependencies_postcss: string;
export const KITTY_INSTALLATION_DIR: string;
export const npm_node_execpath: string;
export const npm_package_devDependencies_postcss_load_config: string;
export const OLDPWD: string;
export const npm_config_init_version: string;
export const NODE_ENV: string;
}

Expand Down Expand Up @@ -128,76 +171,119 @@ declare module '$env/static/public' {
declare module '$env/dynamic/private' {
export const env: {
SHELL: string;
npm_command: string;
LSCOLORS: string;
WINDOWID: string;
npm_config_userconfig: string;
COLORTERM: string;
npm_config_cache: string;
LESS: string;
NVM_INC: string;
CONDA_EXE: string;
_CE_M: string;
npm_package_dependencies_ethers: string;
npm_package_dependencies_flowbite: string;
I3SOCK: string;
NODE: string;
COLOR: string;
npm_config_local_prefix: string;
npm_package_devDependencies_tslib: string;
npm_config_ignore_scripts: string;
npm_package_devDependencies_autoprefixer: string;
npm_package_devDependencies_tailwindcss: string;
npm_package_scripts_check_watch: string;
npm_package_dependencies__popperjs_core: string;
npm_package_private: string;
npm_package_devDependencies_svelte_heros_v2: string;
npm_config_argv: string;
npm_config_bin_links: string;
KITTY_PID: string;
npm_config_globalconfig: string;
EDITOR: string;
npm_package_scripts_test_unit: string;
npm_package_dependencies_classnames: string;
GTK_MODULES: string;
XDG_SEAT: string;
npm_package_dependencies_axios: string;
PWD: string;
npm_config_save_prefix: string;
npm_package_devDependencies_vite: string;
LOGNAME: string;
XDG_SESSION_TYPE: string;
npm_config_init_module: string;
npm_package_readmeFilename: string;
npm_package_dependencies_svelte_awesome_icons: string;
npm_package_scripts_build: string;
_: string;
XAUTHORITY: string;
DESKTOP_STARTUP_ID: string;
npm_package_devDependencies_prettier: string;
KITTY_PUBLIC_KEY: string;
MOTD_SHOWN: string;
HOME: string;
npm_config_version_git_tag: string;
LANG: string;
npm_package_devDependencies_typescript: string;
LS_COLORS: string;
npm_config_init_license: string;
npm_package_version: string;
npm_config_version_commit_hooks: string;
KITTY_WINDOW_ID: string;
npm_package_scripts_test_integration: string;
npm_package_devDependencies_prettier_plugin_svelte: string;
INIT_CWD: string;
npm_package_scripts_format: string;
npm_package_scripts_preview: string;
npm_lifecycle_script: string;
npm_package_description: string;
NVM_DIR: string;
npm_config_version_tag_prefix: string;
npm_package_devDependencies__sveltejs_vite_plugin_svelte: string;
YARN_WRAP_OUTPUT: string;
npm_package_devDependencies_svelte_check: string;
XDG_SESSION_CLASS: string;
TERMINFO: string;
TERM: string;
TERMINFO: string;
npm_package_name: string;
ZSH: string;
_CE_CONDA: string;
npm_config_prefix: string;
npm_package_type: string;
USER: string;
npm_package_devDependencies_vitest: string;
npm_package_dependencies_flowbite_svelte: string;
CONDA_SHLVL: string;
DISPLAY: string;
npm_lifecycle_event: string;
SHLVL: string;
npm_config_version_git_sign: string;
NVM_CD_FLAGS: string;
npm_config_version_git_message: string;
PAGER: string;
XDG_VTNR: string;
UBUNTU_MENUPROXY: string;
XDG_SESSION_ID: string;
npm_config_user_agent: string;
npm_package_scripts_lint: string;
npm_execpath: string;
CONDA_PYTHON_EXE: string;
npm_package_devDependencies__sveltejs_adapter_auto: string;
npm_package_devDependencies_svelte: string;
npm_package_scripts_test: string;
XDG_RUNTIME_DIR: string;
npm_package_devDependencies_svelte_preprocess: string;
npm_config_strict_ssl: string;
DEBUGINFOD_URLS: string;
npm_package_json: string;
npm_config_noproxy: string;
npm_package_scripts_dev: string;
npm_package_scripts_check: string;
PATH: string;
npm_config_metrics_registry: string;
npm_config_node_gyp: string;
npm_package_devDependencies__sveltejs_kit: string;
npm_package_dependencies_identicon_js: string;
DBUS_SESSION_BUS_ADDRESS: string;
npm_config_global_prefix: string;
NVM_BIN: string;
npm_package_devDependencies__playwright_test: string;
MAIL: string;
NVM_BIN: string;
npm_config_registry: string;
npm_config_ignore_optional: string;
npm_config_scripts_prepend_node_path: string;
npm_package_devDependencies_postcss: string;
KITTY_INSTALLATION_DIR: string;
npm_node_execpath: string;
npm_package_devDependencies_postcss_load_config: string;
OLDPWD: string;
npm_config_init_version: string;
NODE_ENV: string;
[key: `PUBLIC_${string}`]: undefined;
[key: `${string}`]: string | undefined;
Expand Down
2 changes: 1 addition & 1 deletion ui/.svelte-kit/generated/server/internal.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const options = {
app: ({ head, body, assets, nonce, env }) => "<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<!--\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\t\t-->\n\t\t<meta name=\"viewport\" content=\"width=device-width\" />\n\t\t" + head + "\n\t</head>\n\t<body data-sveltekit-preload-data=\"hover\">\n\t\t<div style=\"display: contents\">" + body + "</div>\n\t</body>\n</html>\n",
error: ({ status, message }) => "<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,\n\t\t\t\t\tUbuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
},
version_hash: "cgqvn8"
version_hash: "1vj7znf"
};

export function get_hooks() {
Expand Down
57 changes: 9 additions & 48 deletions ui/README.md
Original file line number Diff line number Diff line change
@@ -1,53 +1,14 @@
# Svelte + Vite
# ETH-XMR atomic swap UI

This template should help get you started developing with Svelte in Vite.
UI for ETH-XMR atomic swap

## Dev

```yarn```
```yarn dev```
## Live Development

To run in live development mode, run `wails dev` in the project directory. This will run a Vite development
server that will provide very fast hot reload of your frontend changes. If you want to develop in a browser
and have access to your Go methods, there is also a dev server that runs on http://localhost:34115. Connect
to this in your browser, and you can call your Go code from devtools.

## Recommended IDE Setup
## Building

[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).

## Need an official Svelte framework?

Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.

## Technical considerations

**Why use this over SvelteKit?**

- It brings its own routing solution which might not be preferable for some users.
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.

This template contains as little as possible to get started with Vite + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.

Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.

**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**

Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.

**Why include `.vscode/extensions.json`?**

Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.

**Why enable `checkJs` in the JS template?**

It is likely that most cases of changing variable types in runtime are likely to be accidental, rather than deliberate. This provides advanced typechecking out of the box. Should you like to take advantage of the dynamically-typed nature of JavaScript, it is trivial to change the configuration.

**Why is HMR not preserving my local component state?**

HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/sveltejs/svelte-hmr/tree/master/packages/svelte-hmr#preservation-of-local-state).

If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.

```js
// store.js
// An extremely simple external store
import { writable } from 'svelte/store'
export default writable(0)
```
To build a redistributable, production mode package, use `wails build`.
Loading