redesign (#475)

2026-01-09 14:18:03 -05:00 · 2023-05-29 08:06:21 +02:00
parent 7d2b8acbee
commit 65f75c295a
42 changed files with 1761 additions and 5202 deletions
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -1,4 +1,24 @@
-/node_modules/
-/public/build/
+# 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?
--- a/ui/.prettierrc.json
+++ b/ui/.prettierrc.json
@@ -1,9 +0,0 @@
-{
-  "tabWidth": 2,
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "plugins": [
-    "prettier-plugin-svelte"
-  ]
-}
--- a/ui/README.md
+++ b/ui/README.md
@@ -1,97 +1,53 @@
-# Atomic swap UI
+# Svelte + Vite

-This is a draft UI to interact with the atomic swap nodes
+This template should help get you started developing with Svelte in Vite.

-## Get started
+## Dev
 
-Install the dependencies...
-
-```bash
-yarn install
-```
-
-...then start [Rollup](https://rollupjs.org):
-
-```bash
-yarn dev
-```
-
-To set the swapd RPC port:
-```bash
-SWAPD_PORT=5000 yarn dev
-```
-
-Navigate to [localhost:8080](http://localhost:8080). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
-
-By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
-
-If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
-
-## Building and running in production mode
-
-To create an optimised version of the app:
-
-```bash
-yarn build
-```
-
-You can run the newly built app with `yarn start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
+```yarn```
+```yarn dev```


-## Single-page app mode
+## Recommended IDE Setup

-By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).

-If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
+## 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
-"start": "sirv public --single"
-```
-
-## Using TypeScript
-
-This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
-
-```bash
-node scripts/setupTypeScript.js
-```
-
-Or remove the script via:
-
-```bash
-rm scripts/setupTypeScript.js
-```
-
-If you want to use `baseUrl` or `path` aliases within your `tsconfig`, you need to set up `@rollup/plugin-alias` to tell Rollup to resolve the aliases. For more info, see [this StackOverflow question](https://stackoverflow.com/questions/63427935/setup-tsconfig-path-in-svelte).
-
-## Deploying to the web
-
-### With [Vercel](https://vercel.com)
-
-Install `vercel` if you haven't already:
-
-```bash
-yarn global add vercel
-```
-
-Then, from within your project folder:
-
-```bash
-cd public
-vercel deploy --name my-project
-```
-
-### With [surge](https://surge.sh/)
-
-Install `surge` if you haven't already:
-
-```bash
-yarn global add surge
-```
-
-Then, from within your project folder:
-
-```bash
-yarn build
-surge public my-project.surge.sh
+// store.js
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
 ```
--- a/ui/index.html
+++ b/ui/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Atomic Swap</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/ui/jsconfig.json
+++ b/ui/jsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "target": "ESNext",
+    "module": "ESNext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}
--- a/ui/package.json
+++ b/ui/package.json
@@ -1,53 +1,32 @@
 {
-  "name": "svelte-app",
-  "version": "1.0.0",
-  "private": true,
+  "name": "atomicswap-ui",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
  "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
-    "start": "sirv public --no-clear",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "format": "yarn prettier --write \"{,!(node_modules|public)/**/}*.{js,svelte}\""
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
  },
  "devDependencies": {
-    "@mdi/js": "^6.5.95",
-    "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^11.0.0",
-    "@rollup/plugin-typescript": "^8.0.0",
-    "@smui/button": "^6.0.0-beta.13",
-    "@smui/circular-progress": "^6.0.0-beta.13",
-    "@smui/data-table": "^6.0.0-beta.13",
-    "@smui/dialog": "^6.0.0-beta.13",
-    "@smui/icon-button": "^6.0.0-beta.13",
-    "@smui/layout-grid": "^6.0.0-beta.13",
-    "@smui/linear-progress": "^6.0.0-beta.13",
-    "@smui/menu-surface": "^6.0.0-beta.13",
-    "@smui/paper": "^6.0.0-beta.13",
-    "@smui/textfield": "^6.0.0-beta.13",
-    "@smui/tooltip": "^6.0.0-beta.13",
-    "@tsconfig/svelte": "^2.0.0",
-    "@types/identicon.js": "^2.3.1",
-    "identicon.js": "^2.3.3",
-    "prettier": "^2.5.1",
-    "prettier-plugin-svelte": "^2.6.0",
-    "rollup": "^2.3.4",
-    "rollup-plugin-css-only": "^3.1.0",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-svelte": "^7.0.0",
-    "rollup-plugin-terser": "^7.0.0",
-    "svelte": "^3.0.0",
-    "svelte-check": "^2.0.0",
-    "svelte-preprocess": "^4.0.0",
-    "tslib": "^2.0.0",
-    "typescript": "^4.0.0"
+    "@sveltejs/vite-plugin-svelte": "^2.0.3",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.23",
+    "postcss-load-config": "^4.0.1",
+    "svelte": "^3.57.0",
+    "svelte-heros-v2": "^0.4.2",
+    "svelte-preprocess": "^5.0.3",
+    "tailwindcss": "^3.3.1",
+    "vite": "^4.3.5"
  },
  "dependencies": {
-    "@metamask/detect-provider": "^1.2.0",
-    "axios": "0.21.1",
-    "ethers": "^5.6.8",
-    "sirv-cli": "^2.0.0",
-    "svelte-material-ui": "^6.0.0-beta.13"
+    "@popperjs/core": "^2.11.7",
+    "axios": "^1.4.0",
+    "classnames": "^2.3.2",
+    "ethers": "^6.3.0",
+    "flowbite": "^1.6.5",
+    "flowbite-svelte": "^0.34.12",
+    "identicon.js": "^2.3.3",
+    "svelte-awesome-icons": "^0.4.4"
  }
 }
--- a/ui/postcss.config.cjs
+++ b/ui/postcss.config.cjs
@@ -0,0 +1,13 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+
+const config = {
+  plugins: [
+    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+    tailwindcss(),
+    //But others, like autoprefixer, need to run after,
+    autoprefixer,
+  ],
+};
+
+module.exports = config;
--- a/ui/public/global.css
+++ b/ui/public/global.css
@@ -7,9 +7,8 @@ html, body {
 body {
 	color: #333;
 	margin: 0;
-	padding: 8px;
 	box-sizing: border-box;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	--mdc-typography-font-family: Iosevka, sans-serif;
 }

 a {
@@ -30,6 +29,7 @@ label {
 }

 input, button, select, textarea {
+	/*
 	font-family: inherit;
 	font-size: inherit;
 	-webkit-padding: 0.4em 0;
@@ -38,6 +38,7 @@ input, button, select, textarea {
 	box-sizing: border-box;
 	border: 1px solid #ccc;
 	border-radius: 2px;
+	*/
 }

 input:disabled {
@@ -54,10 +55,21 @@ button:disabled {
 	color: #999;
 }

-button:not(:disabled):active {
-	background-color: #ddd;
-}
-
 button:focus {
 	border-color: #666;
 }
+
+
+@font-face {
+	font-family: 'Iosevka';
+	font-display: swap;
+	font-weight: 400;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('iosevka-regular.ttf') format('truetype');
+}
+
+.mdc-top-app-bar {
+	background: transparent;
+	color: #222;
+}
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-
-    <title>ETH-XMR Atomic Swap</title>
-
-    <link rel="icon" type="image/png" href="/favicon.png" />
-    <link rel="stylesheet" href="/global.css" />
-    <link rel="stylesheet" href="/build/bundle.css" />
-
-    <script defer src="/build/bundle.js"></script>
-  </head>
-
-  <body></body>
-</html>
--- a/ui/public/iosevka-regular.ttf
+++ b/ui/public/iosevka-regular.ttf
--- a/ui/public/vite.svg
+++ b/ui/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/ui/rollup.config.js
+++ b/ui/rollup.config.js
@@ -1,96 +0,0 @@
-import svelte from 'rollup-plugin-svelte'
-import commonjs from '@rollup/plugin-commonjs'
-import resolve from '@rollup/plugin-node-resolve'
-import replace from 'rollup-plugin-replace';
-import livereload from 'rollup-plugin-livereload'
-import { terser } from 'rollup-plugin-terser'
-import sveltePreprocess from 'svelte-preprocess'
-import typescript from '@rollup/plugin-typescript'
-import css from 'rollup-plugin-css-only'
-import json from '@rollup/plugin-json'
-
-const production = !process.env.ROLLUP_WATCH
-
-function serve() {
-  let server
-
-  function toExit() {
-    if (server) server.kill(0)
-  }
-
-  return {
-    writeBundle() {
-      if (server) return
-      server = require('child_process').spawn(
-        'npm',
-        ['run', 'start', '--', '--dev'],
-        {
-          stdio: ['ignore', 'inherit', 'inherit'],
-          shell: true,
-        }
-      )
-
-      process.on('SIGTERM', toExit)
-      process.on('exit', toExit)
-    },
-  }
-}
-
-export default {
-  input: 'src/main.ts',
-  output: {
-    sourcemap: true,
-    format: 'iife',
-    name: 'app',
-    file: 'public/build/bundle.js',
-  },
-  plugins: [
-    json({
-      compact: true,
-    }),
-    svelte({
-      preprocess: sveltePreprocess({ sourceMap: !production }),
-      compilerOptions: {
-        // enable run-time checks when not in production
-        dev: !production,
-      },
-    }),
-    // we'll extract any component CSS out into
-    // a separate file - better for performance
-    css({ output: 'bundle.css' }),
-
-    // If you have external dependencies installed from
-    // npm, you'll most likely need these plugins. In
-    // some cases you'll need additional configuration -
-    // consult the documentation for details:
-    // https://github.com/rollup/plugins/tree/master/packages/commonjs
-    resolve({
-      browser: true,
-      dedupe: ['svelte'],
-    }),
-    commonjs(),
-    typescript({
-      sourceMap: !production,
-      inlineSources: !production,
-    }),
-    replace({
-      exclude: 'node_modules/**',
-      'process.env.SWAPD_PORT': process.env.SWAPD_PORT,
-    }),
-
-    // In dev mode, call `npm run start` once
-    // the bundle has been generated
-    !production && serve(),
-
-    // Watch the `public` directory and refresh the
-    // browser on changes when not in production
-    !production && livereload('public'),
-
-    // If we're building for production (npm run build
-    // instead of npm run dev), minify
-    production && terser(),
-  ],
-  watch: {
-    clearScreen: false,
-  },
-}
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -1,82 +1,16 @@
-<script lang="ts">
-  import Spacer from './components/Spacer.svelte'
-  import LayoutGrid, { Cell, InnerGrid } from '@smui/layout-grid'
-  import Button from '@smui/button'
-  import { peers, getPeers } from './stores/peerStore'
-  import { offers, refreshOffers } from './stores/offerStore'
-  import { connectAccount, currentAccount } from './stores/metamask'
-  import OffersTable from './components/OffersTable.svelte'
-  import StatCard from './components/StatCard.svelte'
-  import TakeDealDrawer from './components/TakeDealDialog.svelte'
-
-  const handleRefreshClick = () => {
-    getPeers()
-  }
-
-  const connectMetamask = () => {
-    connectAccount()
-  }
+<script>
+  import svelteLogo from './assets/svelte.svg'
+  import viteLogo from '/vite.svg'
+  import Navbar from './lib/Navbar.svelte'
+  import OffersTable from './lib/OffersTable.svelte'
+  import TakeDealDialog from './lib/TakeDealDialog.svelte'
 </script>

 <main>
-  <LayoutGrid>
-    <Spacer />
-    <Cell spanDevices={{ desktop: 8, tablet: 6, phone: 12 }}>
-        <Cell spanDevices={{ desktop: 8, tablet: 6, phone: 12 }}>
-          <StatCard title="ETH-XMR Atomic Swap" content="Please ensure your Metamask is unlocked and set to the correct network before swapping. DO NOT REFRESH THE PAGE WHILE A SWAP IS HAPPENING!" />
-        </Cell>
-        <br />
-      <InnerGrid>
-        <Cell spanDevices={{ desktop: 2, tablet: 4, phone: 12 }}>
-          <StatCard title="Peers" content={$peers.length.toString()} />
-        </Cell>
-        <Cell spanDevices={{ desktop: 2, tablet: 4, phone: 12 }}>
-          <StatCard title="Offers" content={$offers.length.toString()} />
-        </Cell>
-        <Cell class="refreshButton">
-          <Button on:click={handleRefreshClick}>Refresh</Button>
-        </Cell>
-        <Cell class="metamask">
-          {#if $currentAccount}
-            <StatCard title="Account" content={$currentAccount} />
-          {:else}
-            <Button on:click={connectMetamask}>Connect Metamask</Button>
-          {/if}
-        </Cell>
-      </InnerGrid>
-      <br />
+  <Navbar />
  <OffersTable />
-    </Cell>
-    <TakeDealDrawer />
-  </LayoutGrid>
+  <TakeDealDialog />
 </main>

-<svelte:head>
-  <!-- <link rel="stylesheet" href="node_modules/svelte-material-ui/bare.css" /> -->
-  <link
-    rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/svelte-material-ui@6.0.0-beta.13/bare.min.css"
-  />
-  <!-- Material Icons -->
-  <link
-    rel="stylesheet"
-    href="https://fonts.googleapis.com/icon?family=Material+Icons"
-  />
-  <!-- Roboto -->
-  <link
-    rel="stylesheet"
-    href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"
-  />
-  <!-- Roboto Mono -->
-  <link
-    rel="stylesheet"
-    href="https://fonts.googleapis.com/css?family=Roboto+Mono"
-  />
-</svelte:head>
-
 <style>
-  * :global(.refreshButton) {
-    display: flex;
-    align-items: center;
-  }
 </style>
--- a/ui/src/app.postcss
+++ b/ui/src/app.postcss
@@ -0,0 +1,83 @@
+/* Write your global styles here, in PostCSS syntax */
+
+@tailwind base;
+
+@font-face {
+	font-family: 'Iosevka';
+	font-display: swap;
+	font-weight: 400;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('assets/iosevka-regular.ttf') format('truetype');
+}
+
+:root {
+  font-family: 'Iosevka', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color: #213547;
+  background-color: #ffffff;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  //display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  //padding: 2rem;
+  //text-align: center;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@tailwind components;
+@tailwind utilities;
+
--- a/ui/src/assets/coins/eth.png
+++ b/ui/src/assets/coins/eth.png
--- a/ui/src/assets/coins/xmr.png
+++ b/ui/src/assets/coins/xmr.png
--- a/ui/src/assets/iosevka-regular.ttf
+++ b/ui/src/assets/iosevka-regular.ttf
--- a/ui/src/assets/logo.svg
+++ b/ui/src/assets/logo.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="10.005638mm"
+   height="10.005638mm"
+   viewBox="0 0 10.005638 10.005638"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="logo.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="8.0908238"
+     inkscape:cx="33.741929"
+     inkscape:cy="18.045134"
+     inkscape:window-width="1596"
+     inkscape:window-height="861"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="text1626" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-73.973988,-104.82479)">
+    <path
+       id="path236"
+       style="fill:#ededed;stroke-width:0.499999;stroke-linecap:round;stroke-linejoin:round"
+       d="m 83.979626,109.82761 a 5.0028191,5.0028191 0 0 1 -5.002819,5.00282 5.0028191,5.0028191 0 0 1 -5.002819,-5.00282 5.0028191,5.0028191 0 0 1 5.002819,-5.00282 5.0028191,5.0028191 0 0 1 5.002819,5.00282 z" />
+    <g
+       aria-label="LOGO"
+       id="text1626"
+       style="font-size:3.40926px;line-height:1.25;fill:#999999;stroke-width:0.232449">
+      <path
+         d="m 75.799376,111.08051 v -2.5058 h 0.422748 v 2.14783 h 0.818223 v 0.35797 z"
+         style="font-weight:800;font-family:Iosevka;-inkscape-font-specification:'Iosevka Ultra-Bold'"
+         id="path3278" />
+      <path
+         d="m 78.063125,111.10779 q -0.09546,0 -0.190919,-0.0205 -0.09546,-0.017 -0.177281,-0.0648 -0.08182,-0.0511 -0.146598,-0.12274 -0.06478,-0.075 -0.102278,-0.16023 -0.0375,-0.0886 -0.05114,-0.1841 -0.01364,-0.0955 -0.01364,-0.19092 v -1.07392 q 0,-0.0955 0.01364,-0.19092 0.01364,-0.0955 0.05114,-0.18069 0.0375,-0.0886 0.102278,-0.16023 0.06478,-0.075 0.146598,-0.12274 0.08182,-0.0511 0.177281,-0.0682 0.09546,-0.0205 0.190919,-0.0205 0.09546,0 0.190918,0.0205 0.09546,0.017 0.177282,0.0682 0.08182,0.0477 0.146598,0.12274 0.06478,0.0716 0.102278,0.16023 0.0375,0.0852 0.05114,0.18069 0.01364,0.0955 0.01364,0.19092 v 1.07392 q 0,0.0955 -0.01364,0.19092 -0.01364,0.0955 -0.05114,0.1841 -0.0375,0.0852 -0.102278,0.16023 -0.06478,0.0716 -0.146598,0.12274 -0.08182,0.0477 -0.177282,0.0648 -0.09546,0.0205 -0.190918,0.0205 z m 0,-0.35798 q 0.04432,0 0.08523,-0.0136 0.04091,-0.017 0.07159,-0.0477 0.03409,-0.0307 0.05114,-0.0682 0.02045,-0.0409 0.03068,-0.0818 0.01364,-0.0443 0.01705,-0.0886 0.0034,-0.0443 0.0034,-0.0852 v -1.07392 q 0,-0.0409 -0.0034,-0.0852 -0.0034,-0.0443 -0.01705,-0.0852 -0.01023,-0.0443 -0.03068,-0.0818 -0.01705,-0.0409 -0.05114,-0.0716 -0.03068,-0.0307 -0.07159,-0.0443 -0.04091,-0.017 -0.08523,-0.017 -0.04432,0 -0.08523,0.017 -0.04091,0.0136 -0.075,0.0443 -0.03068,0.0307 -0.05114,0.0716 -0.01705,0.0375 -0.03068,0.0818 -0.01023,0.0409 -0.01364,0.0852 -0.0034,0.0443 -0.0034,0.0852 v 1.07392 q 0,0.0409 0.0034,0.0852 0.0034,0.0443 0.01364,0.0886 0.01364,0.0409 0.03068,0.0818 0.02046,0.0375 0.05114,0.0682 0.03409,0.0307 0.075,0.0477 0.04091,0.0136 0.08523,0.0136 z"
+         style="font-weight:800;font-family:Iosevka;-inkscape-font-specification:'Iosevka Ultra-Bold'"
+         id="path3280" />
+      <path
+         d="m 79.587064,111.10779 q -0.08523,0 -0.167054,-0.0273 -0.07841,-0.0307 -0.139779,-0.0886 -0.05796,-0.0614 -0.09887,-0.13637 -0.0375,-0.0784 -0.06137,-0.15682 -0.02045,-0.0818 -0.02727,-0.16706 -0.0068,-0.0852 -0.0068,-0.16705 v -1.07392 q 0,-0.0955 0.01364,-0.18751 0.01364,-0.0955 0.05114,-0.1841 0.0375,-0.0886 0.09887,-0.16023 0.06137,-0.075 0.143189,-0.12274 0.08182,-0.0511 0.177282,-0.0682 0.09546,-0.0205 0.190918,-0.0205 0.08864,0 0.177282,0.017 0.08864,0.017 0.167054,0.058 0.07841,0.0409 0.139779,0.10568 0.06478,0.0648 0.105687,0.1466 0.04091,0.0784 0.05796,0.16706 0.02045,0.0886 0.02045,0.17728 h -0.422748 q 0,-0.0545 -0.01364,-0.1091 -0.01023,-0.058 -0.04091,-0.10569 -0.03068,-0.0477 -0.08523,-0.0716 -0.05114,-0.0273 -0.105687,-0.0273 -0.04432,0 -0.08523,0.017 -0.04091,0.0136 -0.07159,0.0477 -0.03068,0.0307 -0.05114,0.0716 -0.01705,0.0375 -0.02727,0.0784 -0.01023,0.0409 -0.01364,0.0852 -0.0034,0.0443 -0.0034,0.0852 v 1.07392 q 0,0.0648 0.0068,0.12955 0.01023,0.0648 0.04091,0.12273 0.03068,0.058 0.08523,0.0955 0.05796,0.0375 0.122734,0.0375 0.04091,0 0.08182,-0.017 0.04091,-0.017 0.06818,-0.0477 0.02727,-0.0341 0.04432,-0.0716 0.01705,-0.0409 0.02727,-0.0818 0.01023,-0.0409 0.01023,-0.0818 0.0034,-0.0443 0.0034,-0.0852 v -0.31706 h -0.23183 v -0.35798 h 0.654578 v 1.39098 h -0.385247 v -0.38865 q -0.02045,0.0818 -0.05796,0.16023 -0.03409,0.075 -0.09205,0.13637 -0.05796,0.058 -0.13637,0.0886 -0.07841,0.0307 -0.163645,0.0307 z"
+         style="font-weight:800;font-family:Iosevka;-inkscape-font-specification:'Iosevka Ultra-Bold'"
+         id="path3282" />
+      <path
+         d="m 81.472385,111.10779 q -0.09546,0 -0.190919,-0.0205 -0.09546,-0.017 -0.177281,-0.0648 -0.08182,-0.0511 -0.146598,-0.12274 -0.06478,-0.075 -0.102278,-0.16023 -0.0375,-0.0886 -0.05114,-0.1841 -0.01364,-0.0955 -0.01364,-0.19092 v -1.07392 q 0,-0.0955 0.01364,-0.19092 0.01364,-0.0955 0.05114,-0.18069 0.0375,-0.0886 0.102278,-0.16023 0.06478,-0.075 0.146598,-0.12274 0.08182,-0.0511 0.177281,-0.0682 0.09546,-0.0205 0.190919,-0.0205 0.09546,0 0.190919,0.0205 0.09546,0.017 0.177281,0.0682 0.08182,0.0477 0.146598,0.12274 0.06478,0.0716 0.102278,0.16023 0.0375,0.0852 0.05114,0.18069 0.01364,0.0955 0.01364,0.19092 v 1.07392 q 0,0.0955 -0.01364,0.19092 -0.01364,0.0955 -0.05114,0.1841 -0.0375,0.0852 -0.102278,0.16023 -0.06478,0.0716 -0.146598,0.12274 -0.08182,0.0477 -0.177281,0.0648 -0.09546,0.0205 -0.190919,0.0205 z m 0,-0.35798 q 0.04432,0 0.08523,-0.0136 0.04091,-0.017 0.0716,-0.0477 0.03409,-0.0307 0.05114,-0.0682 0.02045,-0.0409 0.03068,-0.0818 0.01364,-0.0443 0.01705,-0.0886 0.0034,-0.0443 0.0034,-0.0852 v -1.07392 q 0,-0.0409 -0.0034,-0.0852 -0.0034,-0.0443 -0.01705,-0.0852 -0.01023,-0.0443 -0.03068,-0.0818 -0.01705,-0.0409 -0.05114,-0.0716 -0.03068,-0.0307 -0.0716,-0.0443 -0.04091,-0.017 -0.08523,-0.017 -0.04432,0 -0.08523,0.017 -0.04091,0.0136 -0.075,0.0443 -0.03068,0.0307 -0.05114,0.0716 -0.01705,0.0375 -0.03068,0.0818 -0.01023,0.0409 -0.01364,0.0852 -0.0034,0.0443 -0.0034,0.0852 v 1.07392 q 0,0.0409 0.0034,0.0852 0.0034,0.0443 0.01364,0.0886 0.01364,0.0409 0.03068,0.0818 0.02045,0.0375 0.05114,0.0682 0.03409,0.0307 0.075,0.0477 0.04091,0.0136 0.08523,0.0136 z"
+         style="font-weight:800;font-family:Iosevka;-inkscape-font-specification:'Iosevka Ultra-Bold'"
+         id="path3284" />
+    </g>
+  </g>
+</svg>
--- a/ui/src/assets/svelte.svg
+++ b/ui/src/assets/svelte.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
--- a/ui/src/components/Identicon.svelte
+++ b/ui/src/components/Identicon.svelte
@@ -1,12 +0,0 @@
-<script lang="ts">
-  import Identicon from 'identicon.js'
-
-  export let size: number = 50
-  export let peerAddress: string = ''
-  const source = `data:image/png;base64,${new Identicon(peerAddress, {
-    background: [255, 255, 255, 255],
-    size,
-  }).toString()}`
-</script>
-
-<img width={size} height={size} src={source} alt="peer" />
--- a/ui/src/components/OffersTable.svelte
+++ b/ui/src/components/OffersTable.svelte
@@ -1,134 +0,0 @@
-<script lang="ts">
-  import DataTable, {
-    Head,
-    Body,
-    Row,
-    Cell,
-    Label,
-    SortValue,
-  } from '@smui/data-table'
-  import Button from '@smui/button'
-  import IconButton from '@smui/icon-button'
-  import type { Offer } from 'src/types'
-  import { offers, selectedOffer } from '../stores/offerStore'
-  import { isLoadingPeers } from '../stores/peerStore'
-  import LinearProgress from '@smui/linear-progress'
-  import Identicon from '../components/Identicon.svelte'
-  import Tooltip, { Wrapper } from '@smui/tooltip'
-
-  $: sortedOffers = $offers
-  $: linearProgressClosed = !$isLoadingPeers
-  let sort: keyof Offer = 'id'
-  let sortDirection: Lowercase<keyof typeof SortValue> = 'ascending'
-
-  function handleSort() {
-    sortedOffers = $offers.sort((a, b) => {
-      const [aVal, bVal] = [a[sort], b[sort]][
-        sortDirection === 'ascending' ? 'slice' : 'reverse'
-      ]()
-      if (typeof aVal === 'string' && typeof bVal === 'string') {
-        return aVal.localeCompare(bVal)
-      }
-      return Number(aVal) - Number(bVal)
-    })
-  }
-</script>
-
-<!-- 
-  curl -X POST http://127.0.0.1:5001 -d '{"jsonrpc":"2.0","id":"0","method":"net_takeOffer", 
-  "params":{
-    "peerID":"12D3KooWC547RfLcveQi1vBxACjnT6Uv15V11ortDTuxRWuhubGv",
-    "offerID":"cf4bf01a0775a0d13fa41b14516e4b89034300707a1754e0d99b65f6cb6fffb9", 
-    "providesAmount": 0.05 
-}}' -H 'Content-Type: application/json' 
-->
-
-<!-- {"jsonrpc":"2.0","result":{"success":true,"receivedAmount":2.999999999999},"id":"0"} -->
-<div>
-  <DataTable
-    sortable
-    bind:sort
-    bind:sortDirection
-    on:SMUIDataTable:sorted={handleSort}
-    table$aria-label="User list"
-    style="width: 100%;"
-  >
-    <Head>
-      <Row>
-        <!--
-        Note: whatever you supply to "columnId" is
-        appended with "-status-label" and used as an ID
-        for the hidden label that describes the sort
-        status to screen readers.
-
-        You can localize those labels with the
-        "sortAscendingAriaLabel" and
-        "sortDescendingAriaLabel" props on the DataTable.
-      -->
-        <Cell columnId="peer">
-          <!-- For numeric columns, icon comes first. -->
-          <Label>Peer</Label>
-          <IconButton class="material-icons">arrow_drop_up</IconButton>
-        </Cell>
-        <Cell sortable={false} columnId="id" class="idCell">
-          <!-- For numeric columns, icon comes first. -->
-          <!-- <IconButton class="material-icons">arrow_drop_up</IconButton> -->
-          <Label>Offer id</Label>
-        </Cell>
-        <Cell columnId="exchangeRate">
-          <Label>Exchange rate</Label>
-          <!-- For non-numeric columns, icon comes second. -->
-          <IconButton class="material-icons">arrow_drop_up</IconButton>
-        </Cell>
-        <Cell columnId="maxAmount">
-          <Label>Max amount</Label>
-          <IconButton class="material-icons">arrow_drop_up</IconButton>
-        </Cell>
-        <Cell columnId="minAmount" l>
-          <Label>Min amount</Label>
-          <IconButton class="material-icons">arrow_drop_up</IconButton>
-        </Cell>
-        <Cell>
-          <Label>Provides</Label>
-          <IconButton class="material-icons">arrow_drop_up</IconButton>
-        </Cell>
-        <!-- Button to take a deal -->
-        <Cell />
-      </Row>
-    </Head>
-    <Body>
-      {#each sortedOffers as offer (offer.offerID)}
-        <Row>
-          <Cell>
-            <Wrapper>
-              <Identicon peerAddress={offer.peerID} />
-              <Tooltip xPos="center" style={'min-width: 100px'}>
-                {offer.peerID}
-              </Tooltip>
-            </Wrapper>
-          </Cell>
-          <Cell class="idCell">{offer.offerID}</Cell>
-          <Cell>{offer.exchangeRate}</Cell>
-          <Cell>{offer.maxAmount}</Cell>
-          <Cell>{offer.minAmount}</Cell>
-          <Cell>{offer.provides}</Cell>
-          <Cell>
-            <Button on:click={() => selectedOffer.set(offer)}>Take</Button>
-          </Cell>
-        </Row>
-      {/each}
-    </Body>
-    <LinearProgress
-      indeterminate
-      bind:closed={linearProgressClosed}
-      aria-label="Data is being loaded..."
-      slot="progress"
-    />
-  </DataTable>
-</div>
-
-<style>
-  * :global(.idCell) {
-    max-width: 200px;
-  }
-</style>
--- a/ui/src/components/Spacer.svelte
+++ b/ui/src/components/Spacer.svelte
@@ -1,5 +0,0 @@
-<script lang="ts">
-  import { Cell } from '@smui/layout-grid'
-</script>
-
-<Cell spanDevices={{ desktop: 2, tablet: 1, phone: 0 }} />
--- a/ui/src/components/StatCard.svelte
+++ b/ui/src/components/StatCard.svelte
@@ -1,31 +0,0 @@
-<script lang="ts">
-  import Paper, { Title, Subtitle, Content } from '@smui/paper'
-
-  export let title = ''
-  export let subtitle = ''
-  export let content = ''
-</script>
-
-<div>
-  <Paper class="root">
-    {#if title}
-      <Title>{title}</Title>
-      <br />
-    {/if}
-    {#if subtitle}
-      <Subtitle>{subtitle}</Subtitle>
-      <br />
-    {/if}
-    {#if content}
-      <Content>{content}</Content>
-    {/if}
-  </Paper>
-</div>
-
-<style>
-  * :global(.root) {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-  }
-</style>
--- a/ui/src/components/TakeDealDialog.svelte
+++ b/ui/src/components/TakeDealDialog.svelte
@@ -1,226 +0,0 @@
-<script lang="ts">
-  import Dialog, { Title, Content, Actions } from '@smui/dialog'
-  import Button, { Label } from '@smui/button'
-  import type { CancelResult } from 'src/types/Cancel'
-  import type { NetTakeOfferSyncResult } from 'src/types/NetTakeOfferSync'
-  import { getCorrespondingToken, rpcRequest, getPort } from 'src/utils'
-  import { selectedOffer } from '../stores/offerStore'
-  import { getPeers } from '../stores/peerStore'
-  import Textfield from '@smui/textfield'
-  import { mdiSwapVertical } from '@mdi/js'
-  import { Icon } from '@smui/icon-button'
-  import { Svg } from '@smui/common/elements'
-  import CircularProgress from '@smui/circular-progress'
-  import HelperText from '@smui/textfield/helper-text'
-  import { currentAccount, sign } from '../stores/metamask'
-
-  const WS_ADDRESS = `ws://127.0.0.1:${getPort()}/ws`
-
-  let amountProvided: number | null = null
-  let isSuccess = false
-  let isLoadingSwap = false
-  let error = ''
-  let swapError = ''
-
-  $: willReceive =
-    amountProvided && amountProvided > 0 && $selectedOffer?.exchangeRate
-      ? amountProvided / $selectedOffer.exchangeRate
-      : 0
-
-  $: if (
-    willReceive !== 0 &&
-    $selectedOffer &&
-    willReceive < $selectedOffer.minAmount
-  ) {
-    error = `The amount of ${getCorrespondingToken(
-      $selectedOffer.provides
-    )} to swap is too low`
-  } else if (
-    willReceive !== 0 &&
-    $selectedOffer &&
-    willReceive > $selectedOffer.maxAmount
-  ) {
-    error = `The amount of ${getCorrespondingToken(
-      $selectedOffer.provides
-    )} to swap is too high`
-  } else {
-    error = ''
-  }
-
-  const handleSendTakeOffer = () => {
-    const offerID = $selectedOffer?.offerID
-    const webSocket = new WebSocket(WS_ADDRESS)
-
-    webSocket.onopen = () => {
-      console.log('WebSocket opened')
-      const req = {
-        jsonRPC: '2.0',
-        id: 0,
-        method: 'net_takeOfferAndSubscribe',
-        params: {
-          peerID: $selectedOffer?.peerID,
-          offerID,
-          providesAmount: amountProvided,
-        },
-      }
-      webSocket.send(JSON.stringify(req))
-      console.log('takeOfferAndSubscribe sent', req)
-    }
-
-    webSocket.onmessage = async (msg) => {
-      const { result, err } = JSON.parse(msg.data)
-      // if (!result) ...
-      const { status } = result
-      console.log(status)      
-      if (status === "Success") {
-        isSuccess = true
-        isLoadingSwap = false
-      }
-    }
-
-    webSocket.onclose = (event: Event) => {
-      console.log('closed:', event)
-      swapError = "Swapd websocket closed"
-      isLoadingSwap = false
-    }
-
-    webSocket.onerror = (event: Event) => {
-      console.error(event)
-      swapError = event.toString()
-      isLoadingSwap = false
-    }
-
-    isLoadingSwap = true
-  }
-
-  const onReset = (resetOffer = true) => {
-    resetOffer && selectedOffer.set(undefined)
-    amountProvided = 0
-    willReceive = 0
-    isSuccess = false
-    swapError = ''
-  }
-</script>
-
-{#if !!$selectedOffer}
-  <Dialog
-    open={true}
-    on:SMUIDialog:action={() => console.log('action')}
-    on:SMUIDialog:closed={() => onReset(true)}
-    aria-labelledby="mandatory-title"
-    aria-describedby="mandatory-content"
-  >
-    <div>
-      <Title class="title" id="mandatory-title">
-        Swap offer {$selectedOffer.offerID}
-      </Title>
-    </div>
-    <Content id="mandatory-content">
-      <section class="container">
-        {#if isLoadingSwap}
-          <div class="flexBox">
-            <CircularProgress
-              style="height: 48px; width: 48px;"
-              indeterminate
-            />
-            <p>Swapping...</p>
-          </div>
-        {:else if isSuccess}
-          <div class="flexBox">
-            <span class="material-icons circleCheck">check_circle</span>
-            <p class="successMessage">
-              You received {willReceive}{$selectedOffer.provides}
-            </p>
-          </div>
-        {:else if !!swapError}
-          <div class="flexBox">
-            <span class="material-icons circleCross">error_outline</span>
-            <p class="errorMessage">
-              {swapError}
-            </p>
-          </div>
-        {:else}
-          <Textfield
-            bind:value={amountProvided}
-            variant="outlined"
-            label={`${getCorrespondingToken($selectedOffer.provides)} amount`}
-            invalid={!!error}
-            suffix={getCorrespondingToken($selectedOffer.provides)}
-          >
-            <HelperText slot="helper">{error}</HelperText>
-          </Textfield>
-          <Icon class="swapIcon" component={Svg} viewBox="0 0 24 24">
-            <path fill="currentColor" d={mdiSwapVertical} />
-          </Icon>
-          <div class="receivingAmount">
-            {willReceive}
-            {$selectedOffer.provides}
-          </div>
-        {/if}
-      </section>
-    </Content>
-    {#if isSuccess}
-      <Actions>
-        <Button>
-          <Label>Done</Label>
-        </Button>
-      </Actions>
-    {:else if !!swapError}
-      <Button on:click={() => onReset(false)}>
-        <Label>Back</Label>
-      </Button>
-    {:else}
-      <Button
-        on:click={handleSendTakeOffer}
-        disabled={isLoadingSwap || !!error || !willReceive}
-      >
-        <Label>Swap</Label>
-      </Button>
-    {/if}
-  </Dialog>
-{/if}
-
-<style>
-  .container {
-    margin: 1em;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .receivingAmount {
-    font-size: x-large;
-  }
-
-  .flexBox {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex: 1;
-    flex-direction: column;
-  }
-
-  .circleCheck {
-    font-size: 45px;
-    color: darkcyan;
-  }
-
-  .circleCross {
-    font-size: 45px;
-    color: var(--mdc-theme-error, #b00020);
-  }
-
-  * :global(.swapIcon) {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    height: 3rem;
-  }
-
-  * :global(.title) {
-    text-overflow: ellipsis;
-    width: 100%;
-    overflow: hidden;
-    word-break: break-all;
-    white-space: nowrap;
-  }
-</style>
--- a/ui/src/global.d.ts
+++ b/ui/src/global.d.ts
@@ -1 +0,0 @@
-/// <reference types="svelte" />
--- a/ui/src/lib/Identicon.svelte
+++ b/ui/src/lib/Identicon.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import Identicon from 'identicon.js'
+  
+    export let size: number = 30
+    export let peerAddress: string = ''
+    var options = {
+      background: [240, 240, 240, 255],
+      margin: 0.2,
+      size,
+      format: 'svg'
+    };
+    const source = `data:image/svg+xml;base64,${new Identicon(peerAddress, options).toString()}`
+</script>
+
+<img width={size} height={size} src={source} alt="peer" />
+
+<style>
+img {
+    border-radius: 50%;
+    display: inline;
+}
+</style>
--- a/ui/src/lib/Loader.svelte
+++ b/ui/src/lib/Loader.svelte
@@ -0,0 +1,36 @@
+<span class="loader"></span>
+
+<style>
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 3px solid #000;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after {
+  content: '';  
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: 3px solid;
+  border-color: #00CCEE transparent;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+} 
+</style>
--- a/ui/src/lib/Navbar.svelte
+++ b/ui/src/lib/Navbar.svelte
@@ -0,0 +1,45 @@
+<script>
+	import { Alert, P } from 'flowbite-svelte'
+    import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+    import { Badge } from 'flowbite-svelte'
+    
+    import { peers, getPeers } from '../stores/peerStore'
+
+    import atomic from '../assets/logo.svg'
+</script>
+
+
+<Navbar let:hidden let:toggle>
+    <NavBrand href="/">
+        <img width="36" src={atomic} style="margin-right: 10px;" />
+        <div>
+            <p class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+                Atomic Swap
+            </p>
+            <Badge color="blue">Beta</Badge>
+        </div>
+    </NavBrand>
+    <NavUl {hidden}>
+        <NavLi href="/pairs">Pairs</NavLi>
+        <NavLi href="/wallets">Wallets</NavLi>
+        <NavLi href="/docs">Docs</NavLi>
+        <NavLi target="_blank" href="https://github.com/AthanorLabs/atomic-swap">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
+                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
+            </svg>
+        </NavLi>
+    </NavUl>
+    <NavHamburger on:click={toggle} />
+    <NavUl {hidden}>
+        <!--<Badge rounded color="blue">mainnet</Badge>-->
+        <Badge border color="white"><div class="connected mr-2"></div>{$peers.length.toString()} Peers</Badge>
+    </NavUl>
+</Navbar>
+
+<style>
+    .connected {
+        width: 8px; height: 8px;
+        background: rgb(82, 246, 49);
+        border-radius: 999px;
+    }
+</style>
--- a/ui/src/lib/OffersTable.svelte
+++ b/ui/src/lib/OffersTable.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+    import {onMount} from 'svelte';
+
+    import { offers, selectedOffer, refreshOffers } from '../stores/offerStore'
+    import { isLoadingPeers, getPeers } from '../stores/peerStore'
+
+    import { Button, Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
+    import { Toolbar, ToolbarButton, ToolbarGroup } from 'flowbite-svelte';
+    import { Heading } from 'flowbite-svelte'
+
+    import Identicon from './Identicon.svelte'
+
+    import xmr from '../assets/coins/xmr.png'
+    import eth from '../assets/coins/eth.png'
+
+    $: sortedOffers = $offers
+</script>
+
+<div class="offers">
+    <Toolbar color="none" style="position:relative;">
+        <Heading tag="h5">
+            <img width="25" height="25" src={eth} alt="eth" style="display: inline; vertical-align: top;"/>
+            <span>ETH / XMR</span>
+            <img width="25" height="25" src={xmr} alt="xmr" style="display: inline; vertical-align: top;" />
+        </Heading>
+
+        <ToolbarGroup slot="end">
+        <ToolbarButton>
+            {sortedOffers.length} Offers
+        </ToolbarButton>
+        <ToolbarButton on:click={getPeers}>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3" />
+            </svg>              
+        </ToolbarButton>
+        </ToolbarGroup>
+      </Toolbar>
+      <br>
+    {#if sortedOffers.length > 0}
+    <Table class="offers" divClass="relative overflow-x-auto sm:rounded-lg border">
+    <TableHead>
+        <TableHeadCell>Peer</TableHeadCell>
+        <TableHeadCell>Offer Id</TableHeadCell>
+        <TableHeadCell>Rate</TableHeadCell>
+        <TableHeadCell>Min</TableHeadCell>
+        <TableHeadCell>Max</TableHeadCell>
+        <TableHeadCell></TableHeadCell>
+    </TableHead>
+    <TableBody>
+        {#each sortedOffers as offer (offer.offerID)}
+        <TableBodyRow>
+            <TableBodyCell>
+                <Identicon peerAddress={offer.peerID}/>
+                <span style="display: inline;">{offer.peerID.slice(-8)}</span>
+            </TableBodyCell>
+            <TableBodyCell>{offer.offerID.slice(0,8)}</TableBodyCell>
+            <TableBodyCell>{offer.exchangeRate}</TableBodyCell>
+            <TableBodyCell>{offer.minAmount}</TableBodyCell>
+            <TableBodyCell>{offer.maxAmount}</TableBodyCell>
+            <TableBodyCell class="text-right">
+                <Button on:click={() => selectedOffer.set(offer)} gradient color="purpleToBlue" size="xs">SWAP</Button>
+            </TableBodyCell>
+        </TableBodyRow>
+        {/each}
+    </TableBody>
+    </Table>
+    {:else}
+    <div>
+        <p class="text-center">No Offers</p>
+    </div>
+    {/if}
+</div>
+
+<style>
+.offers {
+    max-width: 650px;
+    margin: auto;
+    margin-top: 60px;
+    margin-bottom: 40px;
+}
+:global(.identicon > canvas) {
+    border-radius: 50%;
+}
+</style>
--- a/ui/src/lib/TakeDealDialog.svelte
+++ b/ui/src/lib/TakeDealDialog.svelte
@@ -0,0 +1,188 @@
+<script lang="ts">
+  import type { CancelResult } from '../types/Cancel'
+  import type { NetTakeOfferSyncResult } from '../types/NetTakeOfferSync'
+  import { getCorrespondingToken, rpcRequest, getPort } from '../utils'
+  import { selectedOffer } from '../stores/offerStore'
+  import { getPeers } from '../stores/peerStore'
+  //import { currentAccount, sign } from '../stores/metamask'
+  import Loader from './Loader.svelte'
+
+  import { Button, Modal } from 'flowbite-svelte'
+  import { Badge, Label, Input, Helper, InputAddon, ButtonGroup, Spinner } from 'flowbite-svelte'
+  
+  import { CheckSolid, XmarkSolid } from 'svelte-awesome-icons';
+  
+  import eth from '../assets/coins/eth.png'
+  
+  let popupModal = true;
+
+  const WS_ADDRESS = `ws://127.0.0.1:${getPort()}/ws`
+
+  let amountProvided: number | null = null
+  let isSuccess = false
+  let isLoadingSwap = false
+  let error = ''
+  let swapError = ''
+  let swapStatus = ''
+
+  $: willReceive =
+    amountProvided && amountProvided > 0 && $selectedOffer?.exchangeRate
+      ? amountProvided / $selectedOffer.exchangeRate
+      : 0
+
+  $: if (
+    willReceive !== 0 &&
+    $selectedOffer &&
+    willReceive < $selectedOffer.minAmount
+  ) {
+    error = `The amount of ${getCorrespondingToken(
+      $selectedOffer.provides
+    )} to swap is too low`
+  } else if (
+    willReceive !== 0 &&
+    $selectedOffer &&
+    willReceive > $selectedOffer.maxAmount
+  ) {
+    error = `The amount of ${getCorrespondingToken(
+      $selectedOffer.provides
+    )} to swap is too high`
+  } else {
+    error = ''
+  }
+
+  const handleSendTakeOffer = () => {
+    const offerID = $selectedOffer?.offerID
+    const webSocket = new WebSocket(WS_ADDRESS)
+
+    webSocket.onopen = () => {
+      console.log('WebSocket opened')
+      const req = {
+        jsonRPC: '2.0',
+        id: 0,
+        method: 'net_takeOfferAndSubscribe',
+        params: {
+          peerID: $selectedOffer?.peerID,
+          offerID,
+          providesAmount: amountProvided,
+        },
+      }
+      webSocket.send(JSON.stringify(req))
+      console.log('takeOfferAndSubscribe sent', req)
+    }
+
+    webSocket.onmessage = async (msg) => {
+      const { result, error } = JSON.parse(msg.data)
+      if (error) {
+        console.error(error)
+        swapError = error.message
+        isSuccess = false
+        isLoadingSwap = false
+        getPeers()
+        return
+      }
+
+      const { status } = result
+      swapStatus = status
+      if (status === "Success") {
+        isSuccess = true
+        isLoadingSwap = false
+        getPeers()
+      }
+    }
+
+    webSocket.onclose = (event: Event) => {
+      console.log('closed:', event)
+      swapError = "Swapd websocket closed"
+      isLoadingSwap = false
+    }
+
+    webSocket.onerror = (event: Event) => {
+      console.error(event)
+      swapError = event.toString()
+      isLoadingSwap = false
+    }
+
+    isLoadingSwap = true
+  }
+
+  const onReset = (resetOffer = true) => {
+    resetOffer && selectedOffer.set(undefined)
+    amountProvided = 0
+    willReceive = 0
+    isSuccess = false
+    swapError = ''
+    swapStatus = ''
+  }
+</script>
+
+{#if !!$selectedOffer}
+  <Modal bind:open={$selectedOffer} permanent="true" size="xs" class="{isLoadingSwap ? 'modal-hide-footer' : ''}"style="min-width: 300px;"> 
+    <section class="container">
+      {#if isLoadingSwap}
+        <div class="flexBox justify-center align-center text-center">
+          <Spinner size={10}/>
+          <p class="mt-5 m-auto">Swapping ...</p>
+          <p class="mt-1 m-auto">{swapStatus}</p>
+        </div>
+      {:else if isSuccess}
+        <div class="flexBox text-center justify-center">
+          <CheckSolid class="m-auto mb-3 w-16 h-16" style="color: #0c4;" />
+          <p class="successMessage">
+            You received <b>{willReceive} {$selectedOffer.provides}</b>
+          </p>
+        </div>
+      {:else if !!swapError}
+        <div class="flexBox text-center justify-center">
+          <XmarkSolid class="m-auto mb-3 w-16 h-16" style="color: #e40;" /> 
+          <p class="errorMessage">
+            {swapError}
+          </p>
+        </div>
+      {:else}
+      Offer ID
+      <br>
+      <Badge border color="blue" large>{$selectedOffer.offerID.slice(0,12)}...</Badge>    
+      
+      <div class='mt-4 mb-1'>
+        <Label 
+          for='default-input' class='block mb-2'>
+          {getCorrespondingToken($selectedOffer.provides)} amount
+          <span>
+            (Min {$selectedOffer.exchangeRate * $selectedOffer.minAmount}
+            / Max {$selectedOffer.exchangeRate * $selectedOffer.maxAmount})
+          </span>
+        </Label>
+        <Input 
+            bind:value={amountProvided}
+            invalid={!!error}
+            id='large-input'
+            size="lg"
+            placeholder="Your amount ...">
+            <img slot="left" width="32" height="32" src={eth} alt="asset" class="pr-1" />
+        </Input>
+        <Helper class="mt-2" color="red">{error}</Helper>
+      </div>
+          
+     <p class="text-center pt-4">You will receive<br>{willReceive} XMR</p>
+      
+      {/if}
+    </section>
+
+    <svelte:fragment slot="footer">
+      {#if isSuccess}
+        <Button on:click={() => onReset(true)} class="w-full" gradient color="purpleToBlue">Done</Button>
+      {:else if !!swapError}
+        <Button on:click={() => onReset(false)} class="w-full" gradient color="purpleToBlue">Back</Button>
+      {:else if !isLoadingSwap}
+          <Button on:click={() => selectedOffer.set(null)} color='alternative' class="w-1/2">CANCEL</Button>
+          <Button on:click={handleSendTakeOffer} disabled={isLoadingSwap || !!error || !willReceive} class="w-1/2" gradient color="cyanToBlue" s>SWAP</Button>
+      {/if}
+    </svelte:fragment>
+  </Modal>
+{/if}
+
+<style>
+:global(.modal-hide-footer > div:last-of-type) {
+  display: none;
+}
+</style>
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -0,0 +1,8 @@
+import "./app.postcss";
+import App from "./App.svelte";
+
+const app = new App({
+  target: document.getElementById("app"),
+});
+
+export default app;
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -1,7 +0,0 @@
-import App from './App.svelte'
-
-const app = new App({
-  target: document.body,
-})
-
-export default app
--- a/ui/src/theme/_smui-theme.scss
+++ b/ui/src/theme/_smui-theme.scss
@@ -0,0 +1,38 @@
+@use 'sass:color';
+
+@use '@material/theme/color-palette';
+
+// Svelte Colors!
+@use '@material/theme/index' as theme with (
+  $primary: #ff3e00,
+  $on-primary: #222,
+  $secondary: #676778,
+  $surface: #fcfcfc,
+  $on-surface: #222,
+  $background: #fff,
+  $error: color-palette.$red-900,
+);
+
+html,
+body {
+  background-color: theme.$surface;
+  color: theme.$on-surface;
+  padding: 0;
+}
+
+a {
+  color: #40b3ff;
+}
+a:visited {
+  color: color.scale(#40b3ff, $lightness: -35%);
+}
+
+
+.topappbar {
+  background: #fff;
+}
+.mdc-top-app-bar {
+  background: transparent
+}
+
+// Import the mixins.
--- a/ui/src/theme/dark/_smui-theme.scss
+++ b/ui/src/theme/dark/_smui-theme.scss
@@ -0,0 +1,25 @@
+@use 'sass:color';
+
+@use '@material/theme/color-palette';
+
+// Svelte Colors! (Dark Theme)
+@use '@material/theme/index' as theme with (
+  $primary: #ff3e00,
+  $secondary: color.scale(#676778, $whiteness: -10%),
+  $surface: color.adjust(color-palette.$grey-900, $blue: +4),
+  $background: #000,
+  $error: color-palette.$red-700
+);
+
+html,
+body {
+  background-color: #000;
+  color: theme.$on-surface;
+}
+
+a {
+  color: #40b3ff;
+}
+a:visited {
+  color: color.scale(#40b3ff, $lightness: -35%);
+}
--- a/ui/src/utils/rpcApi.ts
+++ b/ui/src/utils/rpcApi.ts
@@ -8,8 +8,8 @@ export type JSONRPCResult<Data> = {
 }

 export const getPort = () : number => {
-    const port = Number(process.env.SWAPD_PORT)
-    return isNaN(port) ? 5001 : port
+    const port = Number(import.meta.env.SWAPD_PORT)
+    return isNaN(port) ? 5000 : port
 }

 // Create a instance of axios to use the same base url.
--- a/ui/src/vite-env.d.ts
+++ b/ui/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
--- a/ui/svelte.config.js
+++ b/ui/svelte.config.js
@@ -0,0 +1,15 @@
+import preprocess from "svelte-preprocess";
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: [
+    vitePreprocess(),
+    /*
+    preprocess({
+      postcss: true,
+    }),
+    */
+  ],
+};
--- a/ui/tailwind.config.cjs
+++ b/ui/tailwind.config.cjs
@@ -0,0 +1,85 @@
+const config = {
+  content: [
+    "./src/**/*.{html,js,svelte,ts}",
+    "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
+  ],
+
+  theme: {
+    extend: {
+      colors: {
+        // flowbite-svelte
+         primary: {50:'#ebf5ff',100: '#fff1ee',200:'#ffe4de',300:'#ffd5cc',400:'#ffbcad',500:'#fe795d',600:'#ef562f',700:'#eb4f27',800:'#d3330a',900:'#d3330a'}
+
+        // pink
+        // primary: {"50":"#fdf2f8","100":"#fce7f3","200":"#fbcfe8","300":"#f9a8d4","400":"#f472b6","500":"#ec4899","600":"#db2777","700":"#be185d","800":"#9d174d","900":"#831843"}
+
+        // fuchsia
+        // primary: {"50":"#fdf4ff","100":"#fae8ff","200":"#f5d0fe","300":"#f0abfc","400":"#e879f9","500":"#d946ef","600":"#c026d3","700":"#a21caf","800":"#86198f","900":"#701a75"}
+
+        // purple
+        // primary: {"50":"#faf5ff","100":"#f3e8ff","200":"#e9d5ff","300":"#d8b4fe","400":"#c084fc","500":"#a855f7","600":"#9333ea","700":"#7e22ce","800":"#6b21a8","900":"#581c87"}
+
+        // violet
+        // primary: {"50":"#f5f3ff","100":"#ede9fe","200":"#ddd6fe","300":"#c4b5fd","400":"#a78bfa","500":"#8b5cf6","600":"#7c3aed","700":"#6d28d9","800":"#5b21b6","900":"#4c1d95"}
+
+        // indigo
+        // primary: {"50":"#eef2ff","100":"#e0e7ff","200":"#c7d2fe","300":"#a5b4fc","400":"#818cf8","500":"#6366f1","600":"#4f46e5","700":"#4338ca","800":"#3730a3","900":"#312e81"}
+
+        // blue
+        // primary: {"50":"#eff6ff","100":"#dbeafe","200":"#bfdbfe","300":"#93c5fd","400":"#60a5fa","500":"#3b82f6","600":"#2563eb","700":"#1d4ed8","800":"#1e40af","900":"#1e3a8a"}
+
+        // sky
+        // primary: {"50":"#f0f9ff","100":"#e0f2fe","200":"#bae6fd","300":"#7dd3fc","400":"#38bdf8","500":"#0ea5e9","600":"#0284c7","700":"#0369a1","800":"#075985","900":"#0c4a6e"}
+
+        // cyan
+        // primary: {"50":"#ecfeff","100":"#cffafe","200":"#a5f3fc","300":"#67e8f9","400":"#22d3ee","500":"#06b6d4","600":"#0891b2","700":"#0e7490","800":"#155e75","900":"#164e63"}
+
+        // teal
+        // primary: {"50":"#f0fdfa","100":"#ccfbf1","200":"#99f6e4","300":"#5eead4","400":"#2dd4bf","500":"#14b8a6","600":"#0d9488","700":"#0f766e","800":"#115e59","900":"#134e4a"}
+
+        // emerald
+        // primary: {"50":"#ecfdf5","100":"#d1fae5","200":"#a7f3d0","300":"#6ee7b7","400":"#34d399","500":"#10b981","600":"#059669","700":"#047857","800":"#065f46","900":"#064e3b"}
+
+        // green
+        // primary: {"50":"#f0fdf4","100":"#dcfce7","200":"#bbf7d0","300":"#86efac","400":"#4ade80","500":"#22c55e","600":"#16a34a","700":"#15803d","800":"#166534","900":"#14532d"}
+
+        // lime
+        // primary: {"50":"#f7fee7","100":"#ecfccb","200":"#d9f99d","300":"#bef264","400":"#a3e635","500":"#84cc16","600":"#65a30d","700":"#4d7c0f","800":"#3f6212","900":"#365314"}
+
+        // yellow
+        // primary: {"50":"#fefce8","100":"#fef9c3","200":"#fef08a","300":"#fde047","400":"#facc15","500":"#eab308","600":"#ca8a04","700":"#a16207","800":"#854d0e","900":"#713f12"}
+
+        // amber
+        // primary: {"50":"#fffbeb","100":"#fef3c7","200":"#fde68a","300":"#fcd34d","400":"#fbbf24","500":"#f59e0b","600":"#d97706","700":"#b45309","800":"#92400e","900":"#78350f"}
+
+        // orange
+        // primary: {"50":"#fff7ed","100":"#ffedd5","200":"#fed7aa","300":"#fdba74","400":"#fb923c","500":"#f97316","600":"#ea580c","700":"#c2410c","800":"#9a3412","900":"#7c2d12"}
+
+        // red
+        // primary: {"50":"#fef2f2","100":"#fee2e2","200":"#fecaca","300":"#fca5a5","400":"#f87171","500":"#ef4444","600":"#dc2626","700":"#b91c1c","800":"#991b1b","900":"#7f1d1d"}
+
+        // stone
+        // primary: {"50":"#fafaf9","100":"#f5f5f4","200":"#e7e5e4","300":"#d6d3d1","400":"#a8a29e","500":"#78716c","600":"#57534e","700":"#44403c","800":"#292524","900":"#1c1917"}
+
+        // neutral
+        // primary: {"50":"#fafafa","100":"#f5f5f5","200":"#e5e5e5","300":"#d4d4d4","400":"#a3a3a3","500":"#737373","600":"#525252","700":"#404040","800":"#262626","900":"#171717"}
+
+        // zinc
+        // primary: {"50":"#fafafa","100":"#f4f4f5","200":"#e4e4e7","300":"#d4d4d8","400":"#a1a1aa","500":"#71717a","600":"#52525b","700":"#3f3f46","800":"#27272a","900":"#18181b"}
+
+        // gray
+        // primary: {"50":"#f9fafb","100":"#f3f4f6","200":"#e5e7eb","300":"#d1d5db","400":"#9ca3af","500":"#6b7280","600":"#4b5563","700":"#374151","800":"#1f2937","900":"#111827"}
+
+        // slate
+        // primary: {"50":"#f8fafc","100":"#f1f5f9","200":"#e2e8f0","300":"#cbd5e1","400":"#94a3b8","500":"#64748b","600":"#475569","700":"#334155","800":"#1e293b","900":"#0f172a"}
+      }
+    }
+  },
+
+  plugins: [
+    require('flowbite/plugin')
+  ],
+  darkMode: 'class',
+};
+
+module.exports = config;
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -1,10 +0,0 @@
-{
-  "extends": "@tsconfig/svelte/tsconfig.json",
-  "compilerOptions": {
-    "strict": true,
-    "baseUrl": ".",
-    "esModuleInterop": true
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
-}
--- a/ui/vite.config.js
+++ b/ui/vite.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()],
+  optimizeDeps: {
+    exclude: ['js-big-decimal']
+  }
+})
--- a/ui/yarn-error.log
+++ b/ui/yarn-error.log
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>