From 87d007e78f2901739054707041254761aac2df91 Mon Sep 17 00:00:00 2001
From: Blaine Bublitz <blaine.bublitz@gmail.com>
Date: Thu, 22 Sep 2022 15:00:57 -0700
Subject: [PATCH 01/17] feat: Add Svelte to project

---
 .vscode/extensions.json  |   5 +-
 client/package.json      |   3 +
 client/src/vite-env.d.ts |   1 +
 client/vite.config.ts    |   7 +
 package-lock.json        | 552 +++++++++++++++++++++++++++++++++++++++
 5 files changed, 566 insertions(+), 2 deletions(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 6397e4a7..64eeb695 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,6 +1,6 @@
 {
   "recommendations": [
-    "NomicFoundation.hardhat-solidity",
+    "nomicfoundation.hardhat-solidity",
     "esbenp.prettier-vscode",
     "hbenl.vscode-mocha-test-adapter",
     "styled-components.vscode-styled-components",
@@ -10,6 +10,7 @@
     "redhat.vscode-yaml",
     "graphql.vscode-graphql",
     "dbaeumer.vscode-eslint",
-    "stkb.rewrap"
+    "stkb.rewrap",
+    "svelte.svelte-vscode"
   ]
 }
diff --git a/client/package.json b/client/package.json
index 52043bd4..cd01048f 100644
--- a/client/package.json
+++ b/client/package.json
@@ -88,6 +88,8 @@
     "@projectsophon/workspace": "^2.0.0",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "14.1.0",
+    "@sveltejs/vite-plugin-svelte": "^1.0.8",
+    "@testing-library/svelte": "^3.2.1",
     "@types/react-timeago": "^4.1.3",
     "@types/animejs": "^3.1.3",
     "@types/color": "^3.0.2",
@@ -108,6 +110,7 @@
     "jsdom": "^20.0.0",
     "netlify-cli": "^3.8.5",
     "prettier": "^2.7.1",
+    "svelte-preprocess": "^4.10.7",
     "typedoc": "^0.23.15",
     "typedoc-plugin-markdown": "3.13.x",
     "typescript": "4.7.x",
diff --git a/client/src/vite-env.d.ts b/client/src/vite-env.d.ts
index 11f02fe2..4078e747 100644
--- a/client/src/vite-env.d.ts
+++ b/client/src/vite-env.d.ts
@@ -1 +1,2 @@
+/// <reference types="svelte" />
 /// <reference types="vite/client" />
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 647016b1..42b298da 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -1,9 +1,11 @@
 import { all } from '@projectsophon/workspace';
 import commonjs from '@rollup/plugin-commonjs';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
 import react from '@vitejs/plugin-react';
 import esbuild from 'esbuild';
 import fs from 'fs/promises';
+import sveltePreprocess from 'svelte-preprocess';
 import { defineConfig, loadEnv } from 'vite';
 
 export default defineConfig(async ({ mode }) => {
@@ -17,6 +19,7 @@ export default defineConfig(async ({ mode }) => {
     assetsInclude: ['**/*.zkey'],
     plugins: [
       react(),
+      svelte({ hot: !env.VITEST, preprocess: sveltePreprocess() }),
       // Custom plugin for transpiling files in `embedded_plugins` and converting them to strings of source code
       {
         name: 'embedded-plugins',
@@ -43,6 +46,10 @@ export default defineConfig(async ({ mode }) => {
         plugins: [commonjs(), nodeResolve()],
       },
     },
+    test: {
+      globals: true,
+      environment: 'jsdom',
+    },
     envPrefix: 'DF_',
     clearScreen: false,
     optimizeDeps: {
diff --git a/package-lock.json b/package-lock.json
index 3a964e28..6d94f17a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -103,6 +103,8 @@
         "@projectsophon/workspace": "^2.0.0",
         "@rollup/plugin-commonjs": "^22.0.2",
         "@rollup/plugin-node-resolve": "14.1.0",
+        "@sveltejs/vite-plugin-svelte": "^1.0.8",
+        "@testing-library/svelte": "^3.2.1",
         "@types/animejs": "^3.1.3",
         "@types/color": "^3.0.2",
         "@types/gl-matrix": "^3.2.0",
@@ -123,6 +125,7 @@
         "jsdom": "^20.0.0",
         "netlify-cli": "^3.8.5",
         "prettier": "^2.7.1",
+        "svelte-preprocess": "^4.10.7",
         "typedoc": "^0.23.15",
         "typedoc-plugin-markdown": "3.13.x",
         "typescript": "4.7.x",
@@ -7294,6 +7297,64 @@
         "tslib": "^2.0.0"
       }
     },
+    "node_modules/@sveltejs/vite-plugin-svelte": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.8.tgz",
+      "integrity": "sha512-1xkVTB4pm6zuign858FzVYE9Fdw9MQBOlxrdd85STV0NvTDmcofcRpcrK+zcIyT8SZ2dseHLu8hvDwzssF6RfA==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^4.2.1",
+        "debug": "^4.3.4",
+        "deepmerge": "^4.2.2",
+        "kleur": "^4.1.5",
+        "magic-string": "^0.26.3",
+        "svelte-hmr": "^0.15.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >= 16"
+      },
+      "peerDependencies": {
+        "diff-match-patch": "^1.0.5",
+        "svelte": "^3.44.0",
+        "vite": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "diff-match-patch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@sveltejs/vite-plugin-svelte/node_modules/@rollup/pluginutils": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
+      "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
+      "dev": true,
+      "dependencies": {
+        "estree-walker": "^2.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
+    "node_modules/@sveltejs/vite-plugin-svelte/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true
+    },
+    "node_modules/@sveltejs/vite-plugin-svelte/node_modules/magic-string": {
+      "version": "0.26.4",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.4.tgz",
+      "integrity": "sha512-e5uXtVJ22aEpK9u1+eQf0fSxHeqwyV19K+uGnlROCxUhzwRip9tBsaMViK/0vC3viyPd5Gtucp3UmEp/Q2cPTQ==",
+      "dev": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@szmarczak/http-timer": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
@@ -7307,6 +7368,81 @@
         "node": ">=6"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.18.1.tgz",
+      "integrity": "sha512-oEvsm2B/WtcHKE+IcEeeCqNU/ltFGaVyGbpcm4g/2ytuT49jrlH9x5qRKL/H3A6yfM4YAbSbC0ceT5+9CEXnLg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^4.2.0",
+        "aria-query": "^5.0.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.4.4",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
+    "node_modules/@testing-library/svelte": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/svelte/-/svelte-3.2.1.tgz",
+      "integrity": "sha512-qP5nMAx78zt+a3y9Sws9BNQYP30cOQ/LXDYuAj7wNtw86b7AtB7TFAz6/Av9hFsW3IJHPBBIGff6utVNyq+F1g==",
+      "dev": true,
+      "dependencies": {
+        "@testing-library/dom": "^8.1.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "peerDependencies": {
+        "svelte": "3.x"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -7323,6 +7459,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/aria-query": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz",
+      "integrity": "sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==",
+      "dev": true
+    },
     "node_modules/@types/async-eventemitter": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/@types/async-eventemitter/-/async-eventemitter-0.2.1.tgz",
@@ -7716,6 +7858,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/pug": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
+      "integrity": "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==",
+      "dev": true
+    },
     "node_modules/@types/qs": {
       "version": "6.9.7",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
@@ -7811,6 +7959,15 @@
       "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==",
       "license": "MIT"
     },
+    "node_modules/@types/sass": {
+      "version": "1.43.1",
+      "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.43.1.tgz",
+      "integrity": "sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -8978,6 +9135,15 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "node_modules/aria-query": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.0.2.tgz",
+      "integrity": "sha512-eigU3vhqSO+Z8BKDnVLN/ompjhf3pYzecKXz8+whRy+9gZu8n1TCGfwzQUUPnqdHl9ax1Hr9031orZ+UOEYr7Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
     "node_modules/arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -13372,6 +13538,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/detect-indent": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
+      "integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-node": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
@@ -13602,6 +13777,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.14",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz",
+      "integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==",
+      "dev": true
+    },
     "node_modules/domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@@ -21396,6 +21577,15 @@
         "graceful-fs": "^4.1.9"
       }
     },
+    "node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/kuler": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz",
@@ -22778,6 +22968,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lz-string": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
+      "integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==",
+      "dev": true,
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/macos-release": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.5.0.tgz",
@@ -27732,6 +27931,36 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/sander": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
+      "integrity": "sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==",
+      "dev": true,
+      "dependencies": {
+        "es6-promise": "^3.1.2",
+        "graceful-fs": "^4.1.3",
+        "mkdirp": "^0.5.1",
+        "rimraf": "^2.5.2"
+      }
+    },
+    "node_modules/sander/node_modules/es6-promise": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
+      "integrity": "sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==",
+      "dev": true
+    },
+    "node_modules/sander/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
     "node_modules/sax": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
@@ -28817,6 +29046,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/sorcery": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",
+      "integrity": "sha512-R5ocFmKZQFfSTstfOtHjJuAwbpGyf9qjQa1egyhvXSbM7emjrtLXtGdZsDJDABC85YBfVvrOiGWKSYXPKdvP1g==",
+      "dev": true,
+      "dependencies": {
+        "buffer-crc32": "^0.2.5",
+        "minimist": "^1.2.0",
+        "sander": "^0.5.0",
+        "sourcemap-codec": "^1.3.0"
+      },
+      "bin": {
+        "sorcery": "bin/index.js"
+      }
+    },
     "node_modules/sort-keys": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
@@ -29595,6 +29839,94 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svelte": {
+      "version": "3.50.1",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz",
+      "integrity": "sha512-bS4odcsdj5D5jEg6riZuMg5NKelzPtmsCbD9RG+8umU03TeNkdWnP6pqbCm0s8UQNBkqk29w/Bdubn3C+HWSwA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/svelte-hmr": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.0.tgz",
+      "integrity": "sha512-Aw21SsyoohyVn4yiKXWPNCSW2DQNH/76kvUnE9kpt4h9hcg9tfyQc6xshx9hzgMfGF0kVx0EGD8oBMWSnATeOg==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20 || ^14.13.1 || >= 16"
+      },
+      "peerDependencies": {
+        "svelte": ">=3.19.0"
+      }
+    },
+    "node_modules/svelte-preprocess": {
+      "version": "4.10.7",
+      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.7.tgz",
+      "integrity": "sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@types/pug": "^2.0.4",
+        "@types/sass": "^1.16.0",
+        "detect-indent": "^6.0.0",
+        "magic-string": "^0.25.7",
+        "sorcery": "^0.10.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 9.11.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.10.2",
+        "coffeescript": "^2.5.1",
+        "less": "^3.11.3 || ^4.0.0",
+        "postcss": "^7 || ^8",
+        "postcss-load-config": "^2.1.0 || ^3.0.0 || ^4.0.0",
+        "pug": "^3.0.0",
+        "sass": "^1.26.8",
+        "stylus": "^0.55.0",
+        "sugarss": "^2.0.0",
+        "svelte": "^3.23.0",
+        "typescript": "^3.9.5 || ^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "coffeescript": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "postcss-load-config": {
+          "optional": true
+        },
+        "pug": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/symbol-observable": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
@@ -37653,6 +37985,47 @@
         "tslib": "^2.0.0"
       }
     },
+    "@sveltejs/vite-plugin-svelte": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.8.tgz",
+      "integrity": "sha512-1xkVTB4pm6zuign858FzVYE9Fdw9MQBOlxrdd85STV0NvTDmcofcRpcrK+zcIyT8SZ2dseHLu8hvDwzssF6RfA==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^4.2.1",
+        "debug": "^4.3.4",
+        "deepmerge": "^4.2.2",
+        "kleur": "^4.1.5",
+        "magic-string": "^0.26.3",
+        "svelte-hmr": "^0.15.0"
+      },
+      "dependencies": {
+        "@rollup/pluginutils": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
+          "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
+          "dev": true,
+          "requires": {
+            "estree-walker": "^2.0.1",
+            "picomatch": "^2.2.2"
+          }
+        },
+        "estree-walker": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+          "dev": true
+        },
+        "magic-string": {
+          "version": "0.26.4",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.4.tgz",
+          "integrity": "sha512-e5uXtVJ22aEpK9u1+eQf0fSxHeqwyV19K+uGnlROCxUhzwRip9tBsaMViK/0vC3viyPd5Gtucp3UmEp/Q2cPTQ==",
+          "dev": true,
+          "requires": {
+            "sourcemap-codec": "^1.4.8"
+          }
+        }
+      }
+    },
     "@szmarczak/http-timer": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
@@ -37662,6 +38035,62 @@
         "defer-to-connect": "^1.0.1"
       }
     },
+    "@testing-library/dom": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.18.1.tgz",
+      "integrity": "sha512-oEvsm2B/WtcHKE+IcEeeCqNU/ltFGaVyGbpcm4g/2ytuT49jrlH9x5qRKL/H3A6yfM4YAbSbC0ceT5+9CEXnLg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^4.2.0",
+        "aria-query": "^5.0.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.4.4",
+        "pretty-format": "^27.0.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+          "dev": true
+        },
+        "pretty-format": {
+          "version": "27.5.1",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+          "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.1",
+            "ansi-styles": "^5.0.0",
+            "react-is": "^17.0.1"
+          }
+        },
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+          "dev": true
+        }
+      }
+    },
+    "@testing-library/svelte": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/svelte/-/svelte-3.2.1.tgz",
+      "integrity": "sha512-qP5nMAx78zt+a3y9Sws9BNQYP30cOQ/LXDYuAj7wNtw86b7AtB7TFAz6/Av9hFsW3IJHPBBIGff6utVNyq+F1g==",
+      "dev": true,
+      "requires": {
+        "@testing-library/dom": "^8.1.0"
+      }
+    },
     "@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -37674,6 +38103,12 @@
       "integrity": "sha512-WUjeFT2SXd6intfE6cg6eL1jk/JL88JqM2gC4WqO4iHLmbCvHUq6aoLK13lGpDWs4FtS2PHoYraJZ0dEx99Dyg==",
       "dev": true
     },
+    "@types/aria-query": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz",
+      "integrity": "sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==",
+      "dev": true
+    },
     "@types/async-eventemitter": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/@types/async-eventemitter/-/async-eventemitter-0.2.1.tgz",
@@ -38026,6 +38461,12 @@
       "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
       "dev": true
     },
+    "@types/pug": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
+      "integrity": "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==",
+      "dev": true
+    },
     "@types/qs": {
       "version": "6.9.7",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
@@ -38111,6 +38552,15 @@
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
       "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g=="
     },
+    "@types/sass": {
+      "version": "1.43.1",
+      "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.43.1.tgz",
+      "integrity": "sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -38923,6 +39373,12 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "aria-query": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.0.2.tgz",
+      "integrity": "sha512-eigU3vhqSO+Z8BKDnVLN/ompjhf3pYzecKXz8+whRy+9gZu8n1TCGfwzQUUPnqdHl9ax1Hr9031orZ+UOEYr7Q==",
+      "dev": true
+    },
     "arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -40547,6 +41003,8 @@
         "@projectsophon/workspace": "^2.0.0",
         "@rollup/plugin-commonjs": "^22.0.2",
         "@rollup/plugin-node-resolve": "14.1.0",
+        "@sveltejs/vite-plugin-svelte": "^1.0.8",
+        "@testing-library/svelte": "^3.2.1",
         "@types/animejs": "^3.1.3",
         "@types/color": "^3.0.2",
         "@types/gl-matrix": "^3.2.0",
@@ -40601,6 +41059,7 @@
         "react-timeago": "^6.2.1",
         "sortablejs": "^1.10.2",
         "styled-components": "^5.3.3",
+        "svelte-preprocess": "^4.10.7",
         "ts-dedent": "^2.0.0",
         "typedoc": "^0.23.15",
         "typedoc-plugin-markdown": "3.13.x",
@@ -42292,6 +42751,12 @@
       "integrity": "sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==",
       "dev": true
     },
+    "detect-indent": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
+      "integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
+      "dev": true
+    },
     "detect-node": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
@@ -42455,6 +42920,12 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-accessibility-api": {
+      "version": "0.5.14",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz",
+      "integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==",
+      "dev": true
+    },
     "domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@@ -48233,6 +48704,12 @@
         "graceful-fs": "^4.1.9"
       }
     },
+    "kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "dev": true
+    },
     "kuler": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz",
@@ -49279,6 +49756,12 @@
       "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==",
       "dev": true
     },
+    "lz-string": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
+      "integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==",
+      "dev": true
+    },
     "macos-release": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.5.0.tgz",
@@ -52857,6 +53340,35 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sander": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
+      "integrity": "sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==",
+      "dev": true,
+      "requires": {
+        "es6-promise": "^3.1.2",
+        "graceful-fs": "^4.1.3",
+        "mkdirp": "^0.5.1",
+        "rimraf": "^2.5.2"
+      },
+      "dependencies": {
+        "es6-promise": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
+          "integrity": "sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==",
+          "dev": true
+        },
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
     "sax": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
@@ -53682,6 +54194,18 @@
       "integrity": "sha512-wciNMLg/Irp8OKGrh3S2tfvZiZ0NEyILfcRCXCD4mp7SgK/i9gzLfhY2hY7VMCQJ3kH9UB9BzNdibIVMchzyYw==",
       "dev": true
     },
+    "sorcery": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",
+      "integrity": "sha512-R5ocFmKZQFfSTstfOtHjJuAwbpGyf9qjQa1egyhvXSbM7emjrtLXtGdZsDJDABC85YBfVvrOiGWKSYXPKdvP1g==",
+      "dev": true,
+      "requires": {
+        "buffer-crc32": "^0.2.5",
+        "minimist": "^1.2.0",
+        "sander": "^0.5.0",
+        "sourcemap-codec": "^1.3.0"
+      }
+    },
     "sort-keys": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
@@ -54251,6 +54775,34 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "svelte": {
+      "version": "3.50.1",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz",
+      "integrity": "sha512-bS4odcsdj5D5jEg6riZuMg5NKelzPtmsCbD9RG+8umU03TeNkdWnP6pqbCm0s8UQNBkqk29w/Bdubn3C+HWSwA==",
+      "dev": true,
+      "peer": true
+    },
+    "svelte-hmr": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.0.tgz",
+      "integrity": "sha512-Aw21SsyoohyVn4yiKXWPNCSW2DQNH/76kvUnE9kpt4h9hcg9tfyQc6xshx9hzgMfGF0kVx0EGD8oBMWSnATeOg==",
+      "dev": true,
+      "requires": {}
+    },
+    "svelte-preprocess": {
+      "version": "4.10.7",
+      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.7.tgz",
+      "integrity": "sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==",
+      "dev": true,
+      "requires": {
+        "@types/pug": "^2.0.4",
+        "@types/sass": "^1.16.0",
+        "detect-indent": "^6.0.0",
+        "magic-string": "^0.25.7",
+        "sorcery": "^0.10.0",
+        "strip-indent": "^3.0.0"
+      }
+    },
     "symbol-observable": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",

From 0608220432f05b1c42528f18bc3fe11aac113713 Mon Sep 17 00:00:00 2001
From: Blaine Bublitz <blaine.bublitz@gmail.com>
Date: Thu, 22 Sep 2022 15:01:24 -0700
Subject: [PATCH 02/17] feat: Convert sample component to Svelte & write some
 tests

---
 .../Frontend/Components/Icons/Icons.test.ts   | 36 +++++++++++++++++++
 .../Frontend/Components/Icons/Quasar.svelte   |  7 ++++
 2 files changed, 43 insertions(+)
 create mode 100644 client/src/Frontend/Components/Icons/Icons.test.ts
 create mode 100644 client/src/Frontend/Components/Icons/Quasar.svelte

diff --git a/client/src/Frontend/Components/Icons/Icons.test.ts b/client/src/Frontend/Components/Icons/Icons.test.ts
new file mode 100644
index 00000000..ad0dc21f
--- /dev/null
+++ b/client/src/Frontend/Components/Icons/Icons.test.ts
@@ -0,0 +1,36 @@
+import { cleanup, render, screen } from '@testing-library/svelte';
+import { afterEach, expect } from 'vitest';
+import Quasar from './Quasar.svelte';
+
+afterEach(() => cleanup());
+
+test('Quasar icon: default', () => {
+  render(Quasar);
+
+  const el = screen.getByRole('img');
+  expect(el).toBeTruthy();
+  expect(el.getAttribute('alt')).toEqual('Quasar');
+  expect(el.getAttribute('src')?.endsWith('.svg')).toEqual(true);
+  expect(el.getAttribute('width')).toEqual('48px');
+  expect(el.getAttribute('height')).toEqual('48px');
+});
+
+test('Quasar icon: custom height & width', () => {
+  render(Quasar, { height: '24px', width: '24px' });
+
+  const el = screen.getByRole('img');
+  expect(el).toBeTruthy();
+  expect(el.getAttribute('width')).toEqual('24px');
+  expect(el.getAttribute('height')).toEqual('24px');
+});
+
+test('Quasar icon: rerender with new prop', () => {
+  const { rerender } = render(Quasar);
+
+  rerender({ width: '96px' });
+
+  const el = screen.getByRole('img');
+  expect(el).toBeTruthy();
+  expect(el.getAttribute('width')).toEqual('96px');
+  expect(el.getAttribute('height')).toEqual('48px');
+});
diff --git a/client/src/Frontend/Components/Icons/Quasar.svelte b/client/src/Frontend/Components/Icons/Quasar.svelte
new file mode 100644
index 00000000..a542268d
--- /dev/null
+++ b/client/src/Frontend/Components/Icons/Quasar.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    // exported values are props for Svelte components and the initial values are the defaults
+    export let width = '48px';
+    export let height = '48px';
+</script>
+
+<img height={height} width={width} alt="Quasar" src="/icons/alerts/planettypes/quasar.svg" />

From 093e163eb5d5b10adbaa4edf18352bcc83c06f07 Mon Sep 17 00:00:00 2001
From: cha0sg0d <tony.goss@protonmail.com>
Date: Fri, 23 Sep 2022 10:17:49 +0100
Subject: [PATCH 03/17] test: FoundRuins

---
 .../src/Frontend/Components/Icons/FoundRuins.svelte  |  9 +++++++++
 client/src/Frontend/Components/Icons/Icons.test.ts   | 12 ++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 client/src/Frontend/Components/Icons/FoundRuins.svelte

diff --git a/client/src/Frontend/Components/Icons/FoundRuins.svelte b/client/src/Frontend/Components/Icons/FoundRuins.svelte
new file mode 100644
index 00000000..6bc8a52a
--- /dev/null
+++ b/client/src/Frontend/Components/Icons/FoundRuins.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    export let width = '48px';
+    export let height = '48px';
+</script>
+
+<img height={height} width={width} alt="FoundRuins" src="/icons/alerts/planettypes/quasar.svg" />
+
+
+
diff --git a/client/src/Frontend/Components/Icons/Icons.test.ts b/client/src/Frontend/Components/Icons/Icons.test.ts
index ad0dc21f..7fe6915b 100644
--- a/client/src/Frontend/Components/Icons/Icons.test.ts
+++ b/client/src/Frontend/Components/Icons/Icons.test.ts
@@ -1,5 +1,6 @@
 import { cleanup, render, screen } from '@testing-library/svelte';
 import { afterEach, expect } from 'vitest';
+import FoundRuins from './FoundRuins.svelte';
 import Quasar from './Quasar.svelte';
 
 afterEach(() => cleanup());
@@ -34,3 +35,14 @@ test('Quasar icon: rerender with new prop', () => {
   expect(el.getAttribute('width')).toEqual('96px');
   expect(el.getAttribute('height')).toEqual('48px');
 });
+
+test('FoundRuins icon: default', () => {
+  render(FoundRuins);
+
+  const el = screen.getByRole('img');
+  expect(el).toBeTruthy();
+  expect(el.getAttribute('alt')).toEqual('FoundRuins');
+  expect(el.getAttribute('src')?.endsWith('.svg')).toEqual(true);
+  expect(el.getAttribute('width')).toEqual('48px');
+  expect(el.getAttribute('height')).toEqual('48px');
+});

From c2b4d3fccbeca16f81a38c5cd2980e0be2e21bf6 Mon Sep 17 00:00:00 2001
From: Blaine Bublitz <blaine.bublitz@gmail.com>
Date: Wed, 28 Sep 2022 10:33:51 -0700
Subject: [PATCH 04/17] chore: Format svelte code

---
 .vscode/settings.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 93c21f63..a26f21ca 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -37,5 +37,8 @@
   "yaml.format.singleQuote": true,
   "[solidity]": {
     "editor.defaultFormatter": "NomicFoundation.hardhat-solidity"
+  },
+  "[svelte]": {
+    "editor.defaultFormatter": "svelte.svelte-vscode"
   }
 }

From 8ecb8718dd6ee649c385ff69814454b5f7a4e08d Mon Sep 17 00:00:00 2001
From: Blaine Bublitz <blaine.bublitz@gmail.com>
Date: Wed, 28 Sep 2022 10:34:24 -0700
Subject: [PATCH 05/17] chore: Remove the organize-imports plugin because it
 removes svelte component imports

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index b856340b..32f77dfe 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,6 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
-    "prettier-plugin-organize-imports": "^3.1.1",
     "prettier-plugin-solidity": "=1.0.0-beta.24",
     "typescript": "4.7.x"
   }

From d09ccecc3a12495661d0f2f1cc87e74caf476f40 Mon Sep 17 00:00:00 2001
From: Blaine Bublitz <blaine.bublitz@gmail.com>
Date: Wed, 28 Sep 2022 10:35:21 -0700
Subject: [PATCH 06/17] feat: Add an IconLink component

---
 .../src/Frontend/Components/IconLink.svelte   | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 client/src/Frontend/Components/IconLink.svelte

diff --git a/client/src/Frontend/Components/IconLink.svelte b/client/src/Frontend/Components/IconLink.svelte
new file mode 100644
index 00000000..7d0a9e93
--- /dev/null
+++ b/client/src/Frontend/Components/IconLink.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import dfstyles from '../Styles/dfstyles';
+
+  export let to: string;
+  export let icon: keyof typeof dfstyles.colors.icons;
+
+  let color = dfstyles.colors.dfwhite;
+  $: hoverColor = dfstyles.colors.icons[icon];
+</script>
+
+<a style:--link-color={color} style:--link-hover-color={hoverColor} href={to}>
+  <span class="icon-{icon}" />
+</a>
+
+<style>
+  a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    cursor: pointer;
+    transition: color 0.2s;
+    color: var(--link-color);
+  }
+
+  a:hover {
+    color: var(--link-hover-color);
+  }
+
+  .icon-twitter:before {
+    content: '\e901';
+  }
+  .icon-github:before {
+    content: '\e903';
+  }
+  .icon-discord:before {
+    content: '\e900';
+  }
+  .icon-email:before {
+    content: '\e902';
+  }
+  .icon-blog:before {
+    /* TODO: Blog icon*/
+  }
+</style>

From d26feef66d8237bf2a89c8a3d344d0b34a1f8b34 Mon Sep 17 00:00:00 2001
From: Blaine Bublitz <blaine.bublitz@gmail.com>
Date: Wed, 28 Sep 2022 10:35:42 -0700
Subject: [PATCH 07/17] feat: Migrate MythicLabel component

---
 .../Components/Labels/MythicLabel.svelte      | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 client/src/Frontend/Components/Labels/MythicLabel.svelte

diff --git a/client/src/Frontend/Components/Labels/MythicLabel.svelte b/client/src/Frontend/Components/Labels/MythicLabel.svelte
new file mode 100644
index 00000000..b71d8ec7
--- /dev/null
+++ b/client/src/Frontend/Components/Labels/MythicLabel.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  export let text: string;
+</script>
+
+<span class="Anim">
+  {#each text as c, i}
+    <span class="AnimDelay" style:--index={-i}>
+      {c}
+    </span>
+  {/each}
+</span>
+
+<style>
+  @keyframes color {
+    0% {
+      filter: hue-rotate(0);
+    }
+    30% {
+      filter: hue-rotate(0);
+    }
+    100% {
+      filter: hue-rotate(360deg);
+    }
+  }
+
+  .Anim {
+    color: var(--df-colors-artifact-rarity-mythic);
+  }
+
+  .AnimDelay {
+    animation: color 1s ease-in-out infinite alternate;
+    animation-delay: calc(var(--index) * 0.04s);
+  }
+</style>

From a5e0781e79d6f00725adbc7389e7245bbe5c8b1b Mon Sep 17 00:00:00 2001
From: Blaine Bublitz <blaine.bublitz@gmail.com>
Date: Wed, 28 Sep 2022 10:36:09 -0700
Subject: [PATCH 08/17] feat: Migrate Link component

---
 client/src/Frontend/Components/Link.svelte | 26 ++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 client/src/Frontend/Components/Link.svelte

diff --git a/client/src/Frontend/Components/Link.svelte b/client/src/Frontend/Components/Link.svelte
new file mode 100644
index 00000000..cb9e509b
--- /dev/null
+++ b/client/src/Frontend/Components/Link.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import colors from 'color';
+  import dfstyles from '../Styles/dfstyles';
+
+  export let to: string;
+  export let openNewTab = false;
+  export let color: string = dfstyles.colors.dfblue;
+  export let hoverColor: string | undefined = undefined;
+
+  $: hoverColor = hoverColor ?? colors(color).lighten(0.3).hex();
+  $: target = openNewTab ? '_blank' : undefined;
+</script>
+
+<a style:--link-color={color} style:--link-hover-color={hoverColor} href={to} {target}><slot /></a>
+
+<style>
+  a {
+    cursor: pointer;
+    text-decoration: underline;
+    color: var(--link-color);
+  }
+
+  a:hover {
+    color: var(--link-hover-color);
+  }
+</style>

From 8442f8acd0ee3e8645b5a61fc39f92a9bf142fef Mon Sep 17 00:00:00 2001
From: Blaine Bublitz <blaine.bublitz@gmail.com>
Date: Wed, 28 Sep 2022 10:36:37 -0700
Subject: [PATCH 09/17] chore: Add DF_DEFAULT_RPC to the vite env

---
 client/src/vite-env.d.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/src/vite-env.d.ts b/client/src/vite-env.d.ts
index 4078e747..da930743 100644
--- a/client/src/vite-env.d.ts
+++ b/client/src/vite-env.d.ts
@@ -1,2 +1,6 @@
 /// <reference types="svelte" />
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  DF_DEFAULT_RPC: string;
+}

From 514afaba67b9cf11678e13b7ebf3edde507653f5 Mon Sep 17 00:00:00 2001
From: Blaine Bublitz <blaine.bublitz@gmail.com>
Date: Wed, 28 Sep 2022 10:38:00 -0700
Subject: [PATCH 10/17] feat: Migrate TextPreview component

---
 .../Frontend/Components/TextPreview.svelte    | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 client/src/Frontend/Components/TextPreview.svelte

diff --git a/client/src/Frontend/Components/TextPreview.svelte b/client/src/Frontend/Components/TextPreview.svelte
new file mode 100644
index 00000000..0245679b
--- /dev/null
+++ b/client/src/Frontend/Components/TextPreview.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  export let unFocusedWidth = '50px';
+  export let focusedWidth = '150px';
+  export let text = '';
+
+  let isFocused = false;
+
+  function setFocused() {
+    isFocused = true;
+  }
+
+  function unsetFocused() {
+    isFocused = false;
+  }
+
+  $: width = isFocused ? focusedWidth : unFocusedWidth;
+</script>
+
+{#if isFocused}
+  <div class="InputContainer" style:--width={width}>
+    <df-text-input selected={true} readonly={true} value={text} on:blur={unsetFocused} />
+  </div>
+{:else}
+  <span class="ShortenedText" style:--width={width} on:click|stopPropagation={setFocused}>
+    {text}
+  </span>
+{/if}
+
+<style>
+  .ShortenedText {
+    cursor: zoom-in;
+    display: inline-block;
+    width: var(--width);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: bottom;
+  }
+  .InputContainer {
+    display: inline-block;
+    width: var(--width);
+  }
+</style>

From 74c4f596fd2db73391256a7a67a1e21d2714040b Mon Sep 17 00:00:00 2001
From: Blaine Bublitz <blaine.bublitz@gmail.com>
Date: Wed, 28 Sep 2022 10:38:30 -0700
Subject: [PATCH 11/17] feat: Migrate LandingPageRoundArt component

---
 .../Frontend/Views/LandingPageRoundArt.svelte | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 client/src/Frontend/Views/LandingPageRoundArt.svelte

diff --git a/client/src/Frontend/Views/LandingPageRoundArt.svelte b/client/src/Frontend/Views/LandingPageRoundArt.svelte
new file mode 100644
index 00000000..2c872cac
--- /dev/null
+++ b/client/src/Frontend/Views/LandingPageRoundArt.svelte
@@ -0,0 +1,50 @@
+<div class="Container">
+  <div class="ImgContainer">
+    <img src="/round_art/round5.jpg" alt="Art by @JannehMoe" />
+    <span class="Smaller">
+      <span class="Text">Art by</span>
+      <a class="TwitterLink" href="https://twitter.com/JannehMoe">@JannehMoe</a>
+    </span>
+  </div>
+</div>
+
+<style>
+  .Container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .Smaller {
+    font-size: 80%;
+  }
+
+  .Text {
+    color: var(--df-colors-text);
+  }
+
+  .TwitterLink {
+    text-decoration: underline;
+    color: var(--df-colors-dfblue);
+  }
+  .TwitterLink:hover {
+    /* TODO: Figure out dynamic lighten by 30% */
+    color: rgb(37, 205, 255);
+  }
+
+  .ImgContainer {
+    display: inline-block;
+    text-align: right;
+    width: 750px;
+    max-width: 80vw;
+  }
+
+  @media only screen and (max-device-width: 1000px) {
+    .ImgContainer {
+      width: 100%;
+      max-width: 100%;
+      padding: 8px;
+      font-size: 80%;
+    }
+  }
+</style>

From 5f3b7f9a7b6d65f61902911cea72ecc1850c2c14 Mon Sep 17 00:00:00 2001
From: Blaine Bublitz <blaine.bublitz@gmail.com>
Date: Wed, 28 Sep 2022 10:39:00 -0700
Subject: [PATCH 12/17] fix: Target es2020 to support native bigint in deps

---
 client/vite.config.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/vite.config.ts b/client/vite.config.ts
index 42b298da..2a193c0a 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -54,6 +54,9 @@ export default defineConfig(async ({ mode }) => {
     clearScreen: false,
     optimizeDeps: {
       include: Array.from(all().keys()).filter((name) => !privateWorkspaces.includes(name)),
+      esbuildOptions: {
+        target: 'es2020',
+      },
     },
   };
 });

From 1df5d3804dbf78fca719f800ee68fda2567238ba Mon Sep 17 00:00:00 2001
From: Blaine Bublitz <blaine.bublitz@gmail.com>
Date: Wed, 28 Sep 2022 10:40:02 -0700
Subject: [PATCH 13/17] fix: Target es2021 to have replaceAll on strings

---
 client/tsconfig.json  | 4 ++--
 client/vite.config.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/tsconfig.json b/client/tsconfig.json
index b4a1bd63..d8b65f46 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -9,7 +9,7 @@
   ],
   "compilerOptions": {
     "module": "esnext",
-    "target": "es2020",
+    "target": "es2021",
     "sourceMap": true,
     "noImplicitAny": true,
     "strictNullChecks": true,
@@ -17,7 +17,7 @@
     "jsx": "react", // use typescript to transpile jsx to js
     "allowJs": true, // allow a partial TypeScript and JavaScript codebase
     "moduleResolution": "Node",
-    "lib": ["es2020", "dom"],
+    "lib": ["es2021", "dom"],
     "skipLibCheck": true,
     "noEmit": true
   },
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 2a193c0a..41c78443 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -55,7 +55,7 @@ export default defineConfig(async ({ mode }) => {
     optimizeDeps: {
       include: Array.from(all().keys()).filter((name) => !privateWorkspaces.includes(name)),
       esbuildOptions: {
-        target: 'es2020',
+        target: 'es2021',
       },
     },
   };

From a6457641cb024895728d3c2af62a10b22412cf28 Mon Sep 17 00:00:00 2001
From: Blaine Bublitz <blaine.bublitz@gmail.com>
Date: Wed, 28 Sep 2022 10:49:52 -0700
Subject: [PATCH 14/17] feat: Bootstrap svelte and begin migrating the homepage

---
 client/index.html                            |   2 +-
 client/package.json                          |   2 +
 client/src/Frontend/EntryPoints/index.ts     |  19 ++
 client/src/Frontend/Pages/App.svelte         |  28 +++
 client/src/Frontend/Pages/LandingPage.svelte | 219 +++++++++++++++++++
 5 files changed, 269 insertions(+), 1 deletion(-)
 create mode 100644 client/src/Frontend/EntryPoints/index.ts
 create mode 100644 client/src/Frontend/Pages/App.svelte
 create mode 100644 client/src/Frontend/Pages/LandingPage.svelte

diff --git a/client/index.html b/client/index.html
index 7c089e0f..8e2c3888 100644
--- a/client/index.html
+++ b/client/index.html
@@ -58,6 +58,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script type="module" src="/src/Frontend/EntryPoints/index.tsx"></script>
+    <script type="module" src="/src/Frontend/EntryPoints/index.ts"></script>
   </body>
 </html>
diff --git a/client/package.json b/client/package.json
index cd01048f..8880b946 100644
--- a/client/package.json
+++ b/client/package.json
@@ -55,6 +55,8 @@
     "react-timeago": "^6.2.1",
     "sortablejs": "^1.10.2",
     "styled-components": "^5.3.3",
+    "svelte": "^3.50.1",
+    "svelte-spa-router": "^3.3.0",
     "ts-dedent": "^2.0.0",
     "uuid": "^8.3.2"
   },
diff --git a/client/src/Frontend/EntryPoints/index.ts b/client/src/Frontend/EntryPoints/index.ts
new file mode 100644
index 00000000..efc7a786
--- /dev/null
+++ b/client/src/Frontend/EntryPoints/index.ts
@@ -0,0 +1,19 @@
+import App from '../Pages/App.svelte';
+import '../Styles/font/stylesheet.css';
+import '../Styles/icomoon/style.css';
+import '../Styles/preflight.css';
+import '../Styles/style.css';
+
+import { DarkForestTheme, DarkForestButton, DarkForestTextInput } from '@dfdao/ui';
+customElements.define(DarkForestTheme.tagName, DarkForestTheme);
+customElements.define(DarkForestButton.tagName, DarkForestButton);
+customElements.define(DarkForestTextInput.tagName, DarkForestTextInput);
+
+const target = document.getElementById('root');
+if (!target) {
+  throw new Error('Could not locate #root node');
+}
+
+const app = new App({ target });
+
+export default app;
diff --git a/client/src/Frontend/Pages/App.svelte b/client/src/Frontend/Pages/App.svelte
new file mode 100644
index 00000000..aecabe17
--- /dev/null
+++ b/client/src/Frontend/Pages/App.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { CONTRACT_ADDRESS } from '@dfdao/contracts';
+  import { address } from '@dfdao/serde';
+  import Router from 'svelte-spa-router';
+  import GameLandingPage from './GameLandingPage.svelte';
+  import LandingPage from './LandingPage.svelte';
+
+  const defaultAddress = address(CONTRACT_ADDRESS);
+
+  const routes = {
+    '/play/:contract': GameLandingPage,
+    // '/play': // redirect to default address
+    '/': LandingPage,
+  };
+</script>
+
+<!-- Provides theming for WebComponents from the `@dfdao/ui` package -->
+<df-theme color="dark" scale="medium">
+  <Router {routes} />
+</df-theme>
+
+<style>
+  :global(body) {
+    width: 100vw;
+    min-height: 100vh;
+    background-color: var(--df-colors-background);
+  }
+</style>
diff --git a/client/src/Frontend/Pages/LandingPage.svelte b/client/src/Frontend/Pages/LandingPage.svelte
new file mode 100644
index 00000000..4ed63b32
--- /dev/null
+++ b/client/src/Frontend/Pages/LandingPage.svelte
@@ -0,0 +1,219 @@
+<script lang="ts">
+  import { CONTRACT_ADDRESS } from '@dfdao/contracts';
+  import { address } from '@dfdao/serde';
+  import { push } from 'svelte-spa-router';
+  import IconLink from '../Components/IconLink.svelte';
+  import Link from '../Components/Link.svelte';
+  import LandingPageRoundArt from '../Views/LandingPageRoundArt.svelte';
+
+  const links = {
+    twitter: 'http://twitter.com/darkforest_eth',
+    email: 'mailto:ivan@0xparc.org',
+    blog: 'https://blog.zkga.me/',
+    discord: 'https://discord.gg/2u2TN6v8r6',
+    github: 'https://github.com/darkforest-eth',
+    wiki: 'https://dfwiki.net/wiki/Main_Page',
+    plugins: 'https://plugins.zkga.me/',
+  };
+
+  const defaultAddress = address(CONTRACT_ADDRESS);
+</script>
+
+<div class="PrettyOverlayGradient" />
+<div class="Page">
+  <div class="MainContentContainer">
+    <div class="Header">
+      <div class="LinkContainer">
+        <Link to={links.email} openNewTab>email</Link>
+        <Link to={links.blog} openNewTab>blog</Link>
+        <IconLink to={links.twitter} icon="twitter" />
+        <IconLink to={links.discord} icon="discord" />
+        <IconLink to={links.github} icon="github" />
+        <Link to={links.plugins} openNewTab>plugins</Link>
+        <Link to={links.wiki} openNewTab>wiki</Link>
+      </div>
+
+      <LandingPageRoundArt />
+
+      <p>
+        <span class="White">Dark Forest</span>
+        <span class="Text">zkSNARK space warfare</span>
+        <br />
+        <span class="Text">Round 5:</span>
+        <span class="White">The Junk Wars</span>
+      </p>
+
+      <div class="ButtonWrapper">
+        <df-button size="large" on:click={() => push(`/lobby/${defaultAddress}`)}
+          >Create Lobby</df-button
+        >
+        <df-button size="large" on:click={() => push(`/play/${defaultAddress}`)}
+          >Enter Round 5</df-button
+        >
+        <df-button size="large" on:click={() => push(`/events`)}>Events</df-button>
+      </div>
+    </div>
+
+    Ways to get Involved
+
+    <div class="Involved">
+      <a
+        class="InvolvedItem"
+        href="https://blog.zkga.me/hosting-a-dark-forest-community-round"
+        style:background-image="url('/get_involved/community_round.png')"
+      />
+      <a
+        class="InvolvedItem"
+        href="https://github.com/darkforest-eth/plugins#adding-your-plugin"
+        style:background-image="url('/get_involved/write_plugin.png')"
+      />
+      <a
+        class="InvolvedItem"
+        href="https://github.com/darkforest-eth/plugins#reviewer-guidelines"
+        style:background-image="url('/get_involved/reveiw_plugin.png')"
+      />
+      <a
+        class="InvolvedItem"
+        href="https://blog.zkga.me/renderer-plugin-contest"
+        style:background-image="url('/get_involved/plugin_render.png')"
+      />
+      <a
+        class="InvolvedItem"
+        href="https://blog.zkga.me/introducing-dark-forest-lobbies"
+        style:background-image="url('/get_involved/lobby.png')"
+      />
+    </div>
+  </div>
+</div>
+
+<style>
+  .PrettyOverlayGradient {
+    width: 100vw;
+    height: 100vh;
+    background: linear-gradient(to left top, rgba(74, 74, 74, 0.628), rgba(60, 1, 255, 0.2)) fixed;
+    background-position: 50%, 50%;
+    display: inline-block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+
+  .Page {
+    position: absolute;
+    width: 100vw;
+    max-width: 100vw;
+    height: 100%;
+    color: white;
+    font-size: var(--df-font-size);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    /* did this need to be a variable? */
+    z-index: 2;
+
+    /* Fuck spacers */
+    margin-top: 150px;
+  }
+
+  .MainContentContainer {
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .Header {
+    text-align: center;
+
+    /* Fuck spacers */
+    margin-bottom: 3em;
+  }
+
+  .LinkContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    /* Fuck spacers */
+    margin-bottom: 16px;
+    column-gap: 20px;
+  }
+
+  .ButtonWrapper {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    flex-direction: row;
+
+    /* Fuck spacers */
+    margin-top: 16px;
+
+    --df-button-color: var(--df-colors-dfgreen);
+    --df-button-border: 1px solid var(--df-colors-dfgreen);
+    --df-button-hover-background: var(--df-colors-dfgreen);
+    --df-button-hover-border: 1px solid var(--df-colors-dfgreen);
+  }
+
+  .Involved {
+    width: 100%;
+    padding-left: 16px;
+    padding-right: 16px;
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: 10px;
+    grid-auto-rows: minmax(100px, auto);
+
+    /* Fuck spacers */
+    margin-top: 1em;
+    margin-bottom: 3em;
+  }
+
+  .InvolvedItem {
+    height: 150px;
+    display: inline-block;
+    margin: 4px;
+    padding: 4px 8px;
+
+    background-color: var(--df-colors-backgroundlighter);
+    background-size: cover;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+
+    cursor: pointer;
+    transition: transform 200ms;
+  }
+  .InvolvedItem:hover,
+  .InvolvedItem:active {
+    transform: scale(1.03);
+  }
+
+  @media only screen and (max-device-width: 1000px) {
+    .Page {
+      /* Fuck spacers */
+      margin-top: 8px;
+    }
+
+    .LinkContainer {
+      /* Fuck spacers */
+      margin-bottom: 4px;
+    }
+
+    .ButtonWrapper {
+      grid-template-columns: auto;
+      flex-direction: column;
+    }
+
+    .Involved {
+      grid-template-columns: auto;
+    }
+  }
+
+  .White {
+    color: var(--df-colors-dfwhite);
+  }
+  .Text {
+    color: var(--df-colors-text);
+  }
+</style>

From da75ba4adb288f4d968f4dbdd5808e935801fdc5 Mon Sep 17 00:00:00 2001
From: Blaine Bublitz <blaine.bublitz@gmail.com>
Date: Wed, 28 Sep 2022 10:50:21 -0700
Subject: [PATCH 15/17] feat: Prototype a Terminal component replacement

---
 client/src/Frontend/Views/Terminal.svelte | 232 ++++++++++++++++++++++
 1 file changed, 232 insertions(+)
 create mode 100644 client/src/Frontend/Views/Terminal.svelte

diff --git a/client/src/Frontend/Views/Terminal.svelte b/client/src/Frontend/Views/Terminal.svelte
new file mode 100644
index 00000000..1900a771
--- /dev/null
+++ b/client/src/Frontend/Views/Terminal.svelte
@@ -0,0 +1,232 @@
+<script lang="ts" context="module">
+  import { afterUpdate, ComponentProps, ComponentType, SvelteComponent } from 'svelte';
+  import { writable } from 'svelte/store';
+  import dfstyles from '../Styles/dfstyles';
+  import { isFirefox } from '../Utils/BrowserChecks';
+
+  const history = writable<string[]>([]);
+
+  type PromptCallback = (input: string) => void;
+
+  const promptCallback = writable<PromptCallback | undefined>(undefined);
+
+  type Fragment =
+    | {
+        type: 'element';
+        tag: string;
+        content?: string;
+        color?: string;
+        index: number;
+      }
+    | {
+        type: 'component';
+        ctor: ComponentType;
+        content?: string;
+        props?: Record<string, any>;
+        index: number;
+      };
+
+  type MessageStyle = {
+    color?: string;
+  };
+
+  let index = 0;
+
+  function element(tag: string, content?: string, color?: string): Fragment {
+    return { type: 'element', tag, content, color, index: index++ };
+  }
+
+  function component<C extends SvelteComponent>(
+    ctor: ComponentType<C>,
+    props?: ComponentProps<C>,
+    content?: string
+  ): Fragment {
+    return { type: 'component', ctor, content, props: props ?? {}, index: index++ };
+  }
+
+  const fragments = writable<Fragment[]>([]);
+
+  export function removeLast(n: number) {
+    fragments.update((frags) => [...frags.slice(0, frags.length - n)]);
+  }
+
+  export function newline() {
+    fragments.update((frags) => [...frags, element('br')]);
+  }
+
+  export function print(content: string, { color }: MessageStyle = {}) {
+    fragments.update((frags) => [...frags, element('span', content, color)]);
+  }
+
+  export function println(content: string, { color }: MessageStyle = {}) {
+    fragments.update((frags) => [...frags, element('span', content, color), element('br')]);
+  }
+
+  export function printComponent<C extends SvelteComponent>(
+    ctor: ComponentType<C>,
+    props?: ComponentProps<C>,
+    content?: string
+  ) {
+    fragments.update((frags) => [...frags, component(ctor, props, content)]);
+  }
+
+  export function clear() {
+    fragments.set([]);
+  }
+
+  export function prompt(cb: PromptCallback) {
+    promptCallback.set(cb);
+  }
+</script>
+
+<script lang="ts">
+  let inputHeight = `1px`;
+
+  let inputText: string | undefined = undefined;
+
+  let containerRef: HTMLDivElement;
+  let inputRef: HTMLTextAreaElement;
+
+  const ENTER_KEY_CODE = 13;
+  const UP_ARROW_KEY_CODE = 38;
+  const DOWN_ARROW_KEY_CODE = 40;
+
+  // We use -1 as then "empty" slot when scrolling through the history because accessing the -1
+  // index in the history array returns `undefined`
+  let historyIdx = -1;
+
+  function onKeyUp(e: KeyboardEvent) {
+    const callback = $promptCallback;
+
+    if (callback === undefined) return;
+
+    if (e.keyCode === ENTER_KEY_CODE && !e.shiftKey) {
+      const userInput = inputText ?? '';
+      // Reset everything before we callback since it could recurse sync
+      inputText = '';
+      historyIdx = -1;
+      // We don't want to track empty input as a historical entry
+      if (userInput) {
+        history.update((hist) => [userInput, ...hist]);
+      }
+      $promptCallback = undefined;
+
+      // Capture the input on screen
+      print('$ ', { color: dfstyles.colors.dfgreen });
+      // Since the textarea is offset, appending two spaces to newlines prints the same as when typing
+      print(userInput.replaceAll('\n', '\n  '), { color: dfstyles.colors.text });
+      newline();
+
+      callback(userInput);
+    } else if (e.keyCode === UP_ARROW_KEY_CODE) {
+      historyIdx = Math.min(historyIdx + 1, $history.length - 1);
+      inputText = $history[historyIdx];
+    } else if (e.keyCode === DOWN_ARROW_KEY_CODE) {
+      historyIdx = Math.max(historyIdx - 1, -1);
+      inputText = $history[historyIdx];
+    }
+  }
+
+  function preventEnterDefault(e: KeyboardEvent) {
+    e.stopPropagation();
+    if (e.keyCode === ENTER_KEY_CODE && !e.shiftKey) {
+      e.preventDefault();
+    } else if (e.keyCode === UP_ARROW_KEY_CODE) {
+      e.preventDefault();
+    } else if (e.keyCode === DOWN_ARROW_KEY_CODE) {
+      e.preventDefault();
+    }
+  }
+
+  const onKeyPress = isFirefox() ? noop : preventEnterDefault;
+
+  function noop() {}
+
+  afterUpdate(() => {
+    inputHeight = `${inputRef.scrollHeight}px`;
+    if ($promptCallback) {
+      inputRef.focus();
+    }
+    containerRef.scrollTo(0, containerRef.scrollHeight);
+  });
+
+  $: promptOpacity = $promptCallback ? 1 : 0;
+</script>
+
+<div class="TerminalContainer" bind:this={containerRef}>
+  {#each $fragments as frag (frag.index)}
+    {#if frag.type === 'element'}
+      {#if frag.content}
+        <svelte:element this={frag.tag} style:color={frag.color}>{frag.content}</svelte:element>
+      {:else}
+        <svelte:element this={frag.tag} style:color={frag.color} />
+      {/if}
+    {:else if frag.content}
+      <svelte:component this={frag.ctor} {...frag.props}>{frag.content}</svelte:component>
+    {:else}
+      <svelte:component this={frag.ctor} {...frag.props} />
+    {/if}
+  {/each}
+  <div class="Prompt" style:--prompt-opacity={promptOpacity}>
+    <span class="PromptCharacter">$&nbsp;</span>
+    <div class="TextAreas">
+      <textarea
+        class="InputTextArea"
+        style:--height={inputHeight}
+        bind:this={inputRef}
+        bind:value={inputText}
+        on:keyup|preventDefault|stopPropagation={onKeyUp}
+        on:keydown={preventEnterDefault}
+        on:keypress={onKeyPress}
+        disabled={$promptCallback === undefined}
+      />
+    </div>
+  </div>
+</div>
+
+<style>
+  .TerminalContainer {
+    height: 100%;
+    width: 100%;
+    margin: 0 auto;
+    overflow: scroll;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+  }
+
+  .Prompt {
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: row;
+    opacity: var(--prompt-opacity);
+  }
+
+  .PromptCharacter {
+    color: var(--df-colors-dfgreen);
+  }
+
+  .TextAreas {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  .InputTextArea {
+    background: none;
+    outline: none;
+    border: none;
+    color: var(--df-colors-text);
+    height: var(--height);
+    resize: none;
+    /* flex-grow: ${height === 0 ? 0 : 1}; */
+    flex-grow: 1;
+  }
+
+  /* TODO: Size variable */
+  @media (max-width: 660px) {
+    .TerminalContainer {
+      font-size: var(--df-font-size-xs);
+    }
+  }
+</style>

From 504e5507651b605898cd8fe65c362959e51a73b3 Mon Sep 17 00:00:00 2001
From: Blaine Bublitz <blaine.bublitz@gmail.com>
Date: Wed, 28 Sep 2022 10:52:55 -0700
Subject: [PATCH 16/17] feat: Begin prototyping & migrating the GameLandingPage

---
 client/package.json                           |   2 +
 client/src/Backend/Network/Blockchain.ts      |  20 +
 .../Backend/Utils/WhitelistSnarkArgsHelper.ts |  16 +-
 .../src/Frontend/Pages/GameLandingPage.svelte | 631 ++++++++++++++++++
 client/src/Frontend/Styles/icomoon/style.css  |  43 --
 client/src/Frontend/Styles/style.css          |  29 +
 6 files changed, 685 insertions(+), 56 deletions(-)
 create mode 100644 client/src/Frontend/Pages/GameLandingPage.svelte

diff --git a/client/package.json b/client/package.json
index 8880b946..6c5c818a 100644
--- a/client/package.json
+++ b/client/package.json
@@ -21,6 +21,8 @@
     "@dfdao/ui": "100.0.0-dev.0",
     "@dfdao/whitelist": "100.0.0-dev.0",
     "@lit-labs/react": "^1.0.0",
+    "@projectsophon/network": "^0.1.3",
+    "@projectsophon/types": "^0.1.3",
     "animejs": "^3.2.1",
     "auto-bind": "^4.0.0",
     "bad-words": "^3.0.4",
diff --git a/client/src/Backend/Network/Blockchain.ts b/client/src/Backend/Network/Blockchain.ts
index 16facdc0..a82b5ade 100644
--- a/client/src/Backend/Network/Blockchain.ts
+++ b/client/src/Backend/Network/Blockchain.ts
@@ -1,5 +1,6 @@
 import diamondContractAbiUrl from '@dfdao/contracts/abis/DarkForest.json?url';
 import { createContract, createEthConnection, EthConnection } from '@dfdao/network';
+import { ConnectionManager } from '@projectsophon/network';
 import type { Contract, providers, Wallet } from 'ethers';
 
 /**
@@ -33,3 +34,22 @@ export function getEthConnection(): Promise<EthConnection> {
 
   return createEthConnection(url);
 }
+
+export function makeConnection(): ConnectionManager {
+  const defaultUrl = import.meta.env.DF_DEFAULT_RPC;
+
+  let url: string;
+
+  if (import.meta.env.PROD) {
+    url = localStorage.getItem('XDAI_RPC_ENDPOINT_v5') || defaultUrl;
+  } else {
+    url = 'http://localhost:8545';
+  }
+
+  console.log(`GAME METADATA:`);
+  console.log(`rpc url: ${url}`);
+  console.log(`is production: ${import.meta.env.PROD}`);
+  console.log(`webserver url: ${import.meta.env.DF_WEBSERVER_URL}`);
+
+  return new ConnectionManager(url);
+}
diff --git a/client/src/Backend/Utils/WhitelistSnarkArgsHelper.ts b/client/src/Backend/Utils/WhitelistSnarkArgsHelper.ts
index 42a45db8..aa902481 100644
--- a/client/src/Backend/Utils/WhitelistSnarkArgsHelper.ts
+++ b/client/src/Backend/Utils/WhitelistSnarkArgsHelper.ts
@@ -7,8 +7,8 @@ import {
 import whitelistCircuitPath from '@dfdao/snarks/whitelist.wasm?url';
 import whitelistZkeyPath from '@dfdao/snarks/whitelist.zkey?url';
 import { EthAddress } from '@dfdao/types';
+import { EthAddress as PSEthAddress } from '@projectsophon/types';
 import bigInt, { BigInteger } from 'big-integer';
-import { TerminalTextStyle } from '../../Frontend/Utils/TerminalTypes';
 import { TerminalHandle } from '../../Frontend/Views/Terminal';
 
 /**
@@ -19,15 +19,10 @@ import { TerminalHandle } from '../../Frontend/Views/Terminal';
  */
 export const getWhitelistArgs = async (
   key: BigInteger,
-  recipient: EthAddress,
-  terminal?: React.MutableRefObject<TerminalHandle | undefined>
+  recipient: EthAddress | PSEthAddress,
+  _terminal?: React.MutableRefObject<TerminalHandle | undefined>
 ): Promise<WhitelistSnarkContractCallArgs> => {
   try {
-    const start = Date.now();
-    terminal?.current?.println(
-      'WHITELIST REGISTER: calculating witness and proof',
-      TerminalTextStyle.Sub
-    );
     const input: WhitelistSnarkInput = {
       key: key.toString(),
       recipient: bigInt(recipient.substring(2), 16).toString(),
@@ -40,11 +35,6 @@ export const getWhitelistArgs = async (
     );
     const { proof, publicSignals }: SnarkJSProofAndSignals = fullProveResponse;
     const ret = buildContractCallArgs(proof, publicSignals) as WhitelistSnarkContractCallArgs;
-    const end = Date.now();
-    terminal?.current?.println(
-      `WHITELIST REGISTER: calculated witness and proof in ${end - start}ms`,
-      TerminalTextStyle.Sub
-    );
 
     return ret;
   } catch (e) {
diff --git a/client/src/Frontend/Pages/GameLandingPage.svelte b/client/src/Frontend/Pages/GameLandingPage.svelte
new file mode 100644
index 00000000..64051516
--- /dev/null
+++ b/client/src/Frontend/Pages/GameLandingPage.svelte
@@ -0,0 +1,631 @@
+<script lang="ts">
+  import { loadDiamondContract, makeConnection } from '../../Backend/Network/Blockchain';
+  import dfstyles from '../Styles/dfstyles';
+  import { Incompatibility, unsupportedFeatures } from '../Utils/BrowserChecks';
+  import Terminal, {
+    println,
+    print,
+    newline,
+    printComponent,
+    prompt,
+    clear,
+  } from '../Views/Terminal.svelte';
+  import { address } from '@dfdao/serde';
+  import { CONTRACT_ADDRESS } from '@dfdao/contracts';
+  import Link from '../Components/Link.svelte';
+  import MythicLabel from '../Components/Labels/MythicLabel.svelte';
+  import TextPreview from '../Components/TextPreview.svelte';
+  import { addAccount, getAccounts } from '../../Backend/Network/AccountManager';
+  import { querystring, push } from 'svelte-spa-router';
+  import { writable } from 'svelte/store';
+  import { utils, Wallet } from 'ethers';
+  import { ContractManager } from '@projectsophon/network';
+  import type { DarkForest } from '@dfdao/contracts/typechain';
+  import { EmailResponse, submitInterestedEmail } from '../../Backend/Network/UtilityServerAPI';
+  import { bigIntFromKey } from '@dfdao/whitelist';
+  import { getWhitelistArgs } from '../../Backend/Utils/WhitelistSnarkArgsHelper';
+  import { BLOCK_EXPLORER_URL } from '@dfdao/constants';
+
+  export let params: { contract?: string } = {};
+
+  let ethConnection = makeConnection();
+
+  let contracts = new ContractManager(ethConnection);
+
+  $: contractAddress = address(params.contract || CONTRACT_ADDRESS);
+
+  $: isLobby = params.contract !== address(CONTRACT_ADDRESS);
+
+  type TerminalPromptStep = {
+    type:
+      | 'COMPATIBILITY'
+      | 'INTRODUCTION'
+      | 'ACCOUNT_SELECTION'
+      | 'DISPLAY_ACCOUNTS'
+      | 'GENERATE_ACCOUNT'
+      | 'IMPORT_ACCOUNT'
+      | 'ACCOUNT_SET'
+      | 'ASKING_HAS_WHITELIST_KEY'
+      | 'ASKING_WAITLIST_EMAIL'
+      | 'ASKING_WHITELIST_KEY'
+      | 'ASKING_PLAYER_EMAIL'
+      | 'FETCHING_ETH_DATA'
+      | 'ASK_ADD_ACCOUNT'
+      | 'ADD_ACCOUNT'
+      | 'NO_HOME_PLANET'
+      | 'SEARCHING_FOR_HOME_PLANET'
+      | 'ALL_CHECKS_PASS'
+      | 'COMPLETE'
+      | 'TERMINATED'
+      | 'ERROR';
+  };
+
+  // These use an object to avoid Svelte's logic that doesn't run subscriptions
+  // if the previous value and new value are the same
+  let step = writable<TerminalPromptStep>({ type: 'COMPATIBILITY' });
+
+  function setStep(type: TerminalPromptStep['type']) {
+    $step = { type };
+  }
+
+  step.subscribe(({ type }) => {
+    switch (type) {
+      case 'COMPATIBILITY':
+        return checkCompatibility();
+      case 'INTRODUCTION':
+        return showIntroduction();
+      case 'ACCOUNT_SELECTION':
+        return selectAccount();
+      case 'DISPLAY_ACCOUNTS':
+        return displayAccounts();
+      case 'GENERATE_ACCOUNT':
+        return generateAccount();
+      case 'IMPORT_ACCOUNT':
+        return importAccount();
+      case 'ACCOUNT_SET':
+        return validateAccount();
+      case 'ASKING_HAS_WHITELIST_KEY':
+        return checkHasWhitelistKey();
+      case 'ASKING_WHITELIST_KEY':
+        return requestWhitelistKey();
+      case 'ASKING_WAITLIST_EMAIL':
+        return requestWaitlistEmail();
+      case 'ASKING_PLAYER_EMAIL':
+        return requestPlayerEmail();
+      case 'TERMINATED':
+        return terminate();
+    }
+  });
+
+  async function checkCompatibility() {
+    console.log('running COMPAT');
+    const issues = await unsupportedFeatures();
+
+    if (issues.includes(Incompatibility.MobileOrTablet)) {
+      println('ERROR: Mobile or tablet device detected. Please use desktop.', {
+        color: dfstyles.colors.dfred,
+      });
+    }
+
+    if (issues.includes(Incompatibility.NoIDB)) {
+      println('ERROR: IndexedDB not found. Try using a different browser.', {
+        color: dfstyles.colors.dfred,
+      });
+    }
+
+    if (issues.includes(Incompatibility.UnsupportedBrowser)) {
+      println('ERROR: Browser unsupported. Try Brave, Firefox, or Chrome.', {
+        color: dfstyles.colors.dfred,
+      });
+    }
+
+    if (issues.length > 0) {
+      print(`${issues.length.toString()} errors found. `, { color: dfstyles.colors.dfred });
+      println('Please resolve them and refresh the page.');
+      // I **think** this should be error
+      setStep('ERROR');
+    } else {
+      setStep('INTRODUCTION');
+    }
+  }
+
+  async function showIntroduction() {
+    console.log('running INTRO');
+    if (isLobby) {
+      newline();
+      printComponent(MythicLabel, { text: 'You are joining a Dark Forest lobby' });
+      newline();
+      newline();
+    } else {
+      newline();
+      newline();
+      printComponent(MythicLabel, { text: '                 Dark Forest' });
+      newline();
+      newline();
+
+      print('    ');
+      print('Version', { color: dfstyles.colors.subtext });
+      print('    ');
+      print('Date', { color: dfstyles.colors.subtext });
+      print('              ');
+      print('Champion', { color: dfstyles.colors.subtext });
+      newline();
+
+      print('    v0.1       ', { color: dfstyles.colors.text });
+      print('02/05/2020        ', { color: dfstyles.colors.text });
+      printComponent(Link, { to: 'https://twitter.com/zoink', openNewTab: true }, 'Dylan Field');
+      newline();
+      print('    v0.2       ', { color: dfstyles.colors.text });
+      println('06/06/2020        Nate Foss', { color: dfstyles.colors.text });
+      print('    v0.3       ', { color: dfstyles.colors.text });
+      print('08/07/2020        ', { color: dfstyles.colors.text });
+      printComponent(
+        Link,
+        { to: 'https://twitter.com/hideandcleanse', openNewTab: true },
+        '@hideandcleanse'
+      );
+      newline();
+      print('    v0.4       ', { color: dfstyles.colors.text });
+      print('10/02/2020        ', { color: dfstyles.colors.text });
+      printComponent(
+        Link,
+        { to: 'https://twitter.com/jacobrosenthal', openNewTab: true },
+        'Jacob Rosenthal'
+      );
+      newline();
+      print('    v0.5       ', { color: dfstyles.colors.text });
+      print('12/25/2020        ', { color: dfstyles.colors.text });
+      printComponent(TextPreview, {
+        text: '0xb05d95422bf8d5024f9c340e8f7bd696d67ee3a9',
+        focusedWidth: '100px',
+        unFocusedWidth: '100px',
+      });
+      newline();
+
+      print('    v0.6 r1    ', { color: dfstyles.colors.text });
+      print('05/22/2021        ', { color: dfstyles.colors.text });
+      printComponent(
+        Link,
+        { to: 'https://twitter.com/adietrichs', openNewTab: true },
+        'Ansgar Dietrichs'
+      );
+      newline();
+
+      print('    v0.6 r2    ', { color: dfstyles.colors.text });
+      print('06/28/2021        ', { color: dfstyles.colors.text });
+      printComponent(Link, { to: 'https://twitter.com/orden_gg', openNewTab: true }, '@orden_gg');
+      newline();
+
+      print('    v0.6 r3    ', { color: dfstyles.colors.text });
+      print('08/22/2021        ', { color: dfstyles.colors.text });
+      printComponent(
+        Link,
+        { to: 'https://twitter.com/dropswap_gg', openNewTab: true },
+        '@dropswap_gg'
+      );
+      newline();
+
+      print('    v0.6 r4    ', { color: dfstyles.colors.text });
+      print('10/01/2021        ', { color: dfstyles.colors.text });
+      printComponent(Link, { to: 'https://twitter.com/orden_gg', openNewTab: true }, '@orden_gg');
+      newline();
+
+      print('    v0.6 r5    ', { color: dfstyles.colors.text });
+      print('02/18/2022        ', { color: dfstyles.colors.text });
+      printComponent(Link, { to: 'https://twitter.com/d_fdao', openNewTab: true }, '@d_fdao');
+      print(' + ');
+      printComponent(Link, { to: 'https://twitter.com/orden_gg', openNewTab: true }, '@orden_gg');
+      newline();
+      newline();
+    }
+
+    setStep('ACCOUNT_SELECTION');
+  }
+
+  async function selectAccount() {
+    console.log('running SELECT');
+
+    const search = new URLSearchParams($querystring);
+    const selectedAddress = search.get('account');
+    // TODO: Async / store API
+    const accounts = getAccounts();
+    println(`Found ${accounts.length} accounts on this device.`);
+    newline();
+
+    if (accounts.length > 0) {
+      print('(a) ', { color: dfstyles.colors.subtext });
+      println('Login with existing account.');
+    }
+
+    print('(n) ', { color: dfstyles.colors.subtext });
+    println(`Generate new burner wallet account.`);
+    print('(i) ', { color: dfstyles.colors.subtext });
+    println(`Import private key.`);
+    newline();
+    println(`Select an option:`, { color: dfstyles.colors.text });
+
+    if (selectedAddress !== null) {
+      println(`Selecting account ${selectedAddress} from url...`, {
+        color: dfstyles.colors.dfgreen,
+      });
+
+      const account = accounts.find((a) => a.address === selectedAddress);
+      if (account) {
+        try {
+          ethConnection.privateKey = account.privateKey;
+          setStep('ACCOUNT_SET');
+        } catch (e) {
+          println('An unknown error occurred. please try again.', { color: dfstyles.colors.dfred });
+          setStep('ERROR');
+        }
+      } else {
+        println('Unrecognized account found in url.', { color: dfstyles.colors.dfred });
+        setStep('ERROR');
+      }
+    } else {
+      prompt((userInput) => {
+        if (userInput === 'a' && accounts.length > 0) {
+          setStep('DISPLAY_ACCOUNTS');
+        } else if (userInput === 'n') {
+          setStep('GENERATE_ACCOUNT');
+        } else if (userInput === 'i') {
+          setStep('IMPORT_ACCOUNT');
+        } else {
+          println('Unrecognized input. Please try again.');
+          newline();
+          setStep('ACCOUNT_SELECTION');
+        }
+      });
+    }
+  }
+
+  async function displayAccounts() {
+    newline();
+    const accounts = getAccounts();
+    for (let i = 0; i < accounts.length; i += 1) {
+      print(`(${i + 1}): `, { color: dfstyles.colors.subtext });
+      println(`${accounts[i].address}`);
+    }
+    newline();
+    println(`Select an account:`, { color: dfstyles.colors.text });
+
+    prompt((userInput) => {
+      const selection = +(userInput || '');
+      if (isNaN(selection) || selection > accounts.length) {
+        println('Unrecognized input. Please try again.');
+        setStep('DISPLAY_ACCOUNTS');
+      } else {
+        const account = accounts[selection - 1];
+        try {
+          ethConnection.privateKey = account.privateKey;
+          setStep('ACCOUNT_SET');
+        } catch (e) {
+          println('An unknown error occurred. please try again.', { color: dfstyles.colors.dfred });
+          setStep('ERROR');
+        }
+      }
+    });
+  }
+
+  async function generateAccount() {
+    console.log('running GENERATE');
+    const newWallet = Wallet.createRandom();
+    const newAddr = address(newWallet.address);
+    try {
+      addAccount(newWallet.privateKey);
+      ethConnection.privateKey = newWallet.privateKey;
+
+      newline();
+      print(`Created new burner wallet with address `);
+      printComponent(TextPreview, {
+        text: newAddr,
+        unFocusedWidth: '100px',
+      });
+      newline();
+      newline();
+      println('Note: Burner wallets are stored in local storage.', { color: dfstyles.colors.text });
+      println('They are relatively insecure and you should avoid ');
+      println('storing substantial funds in them.');
+      newline();
+      println('Also, clearing browser local storage/cache will render your');
+      println('burner wallets inaccessible, unless you export your private keys.');
+      newline();
+      println('Press any key to continue:', { color: dfstyles.colors.text });
+
+      prompt(() => {
+        setStep('ACCOUNT_SET');
+      });
+    } catch (e) {
+      println('An unknown error occurred. please try again.', { color: dfstyles.colors.dfred });
+      setStep('ERROR');
+    }
+  }
+
+  async function importAccount() {
+    println('Enter the 0x-prefixed private key of the account you wish to import', {
+      color: dfstyles.colors.text,
+    });
+    println("NOTE: THIS WILL STORE THE PRIVATE KEY IN YOUR BROWSER'S LOCAL STORAGE", {
+      color: dfstyles.colors.text,
+    });
+    println(
+      'Local storage is relatively insecure. We recommend only importing accounts with zero-to-no funds.'
+    );
+
+    prompt((newSKey) => {
+      try {
+        const newAddr = address(utils.computeAddress(newSKey));
+
+        addAccount(newSKey);
+
+        ethConnection.privateKey = newSKey;
+        println(`Imported account with address ${newAddr}.`);
+        setStep('ACCOUNT_SET');
+      } catch (e) {
+        println('An unknown error occurred. please try again.', { color: dfstyles.colors.dfred });
+        setStep('ERROR');
+      }
+    });
+  }
+
+  async function validateAccount() {
+    if (!ethConnection.account) {
+      println('No account selected', { color: dfstyles.colors.dfred });
+      newline();
+      setStep('ACCOUNT_SELECTION');
+
+      return;
+    }
+    try {
+      const contract = await contracts.loadContract<DarkForest>(
+        contractAddress,
+        loadDiamondContract
+      );
+      const isWhitelisted = await contract.isWhitelisted(ethConnection.account);
+
+      newline();
+      print('Checking if whitelisted... ');
+
+      if (isWhitelisted) {
+        println('Player whitelisted.');
+        newline();
+        println(`Welcome, player ${ethConnection.account}.`);
+        // TODO: Provide own env variable for this feature
+        //   if (import.meta.env.DEV) {
+        //     // in development, automatically get some ether from faucet
+        //     const balance = weiToEth(await ethConnection?.loadBalance(playerAddress));
+        //     if (balance === 0) {
+        //       await requestDevFaucet(playerAddress);
+        //     }
+        //   }
+        setStep('FETCHING_ETH_DATA');
+      } else {
+        setStep('ASKING_HAS_WHITELIST_KEY');
+      }
+    } catch (e) {
+      console.error(`error connecting to whitelist: ${e}`);
+      println(
+        'ERROR: Could not connect to whitelist contract. Please refresh and try again in a few minutes.',
+        { color: dfstyles.colors.dfred }
+      );
+      setStep('TERMINATED');
+    }
+  }
+
+  async function checkHasWhitelistKey() {
+    print('Do you have a whitelist key?', { color: dfstyles.colors.text });
+    println(' (y/n)');
+    prompt((userInput) => {
+      if (userInput === 'y') {
+        setStep('ASKING_WHITELIST_KEY');
+      } else if (userInput === 'n') {
+        setStep('ASKING_WAITLIST_EMAIL');
+      } else {
+        println('Unrecognized input. Please try again.');
+        newline();
+        setStep('ASKING_HAS_WHITELIST_KEY');
+      }
+    });
+  }
+
+  async function requestWhitelistKey() {
+    if (!ethConnection.account) {
+      println('No account selected', { color: dfstyles.colors.dfred });
+      newline();
+      setStep('ACCOUNT_SELECTION');
+
+      return;
+    }
+
+    println('Please enter your invite key (XXXXXX-XXXXXX-XXXXXX-XXXXXX):', {
+      color: dfstyles.colors.subtext,
+    });
+
+    const account = ethConnection.account;
+    const contract = await contracts.loadContract<DarkForest>(contractAddress, loadDiamondContract);
+
+    prompt(async (key) => {
+      print('Processing key... (this may take up to 30s)');
+      newline();
+
+      let keyBigInt;
+      try {
+        keyBigInt = bigIntFromKey(key);
+      } catch (err) {
+        println(`ERROR: Key ${key} is not valid.`, { color: dfstyles.colors.dfred });
+        newline();
+        setStep('ASKING_HAS_WHITELIST_KEY');
+
+        return;
+      }
+
+      try {
+        const start = Date.now();
+        println('WHITELIST REGISTER: calculating witness and proof', {
+          color: dfstyles.colors.subtext,
+        });
+        const snarkArgs = await getWhitelistArgs(keyBigInt, account);
+        const end = Date.now();
+        println(`WHITELIST REGISTER: calculated witness and proof in ${end - start}ms`, {
+          color: dfstyles.colors.subtext,
+        });
+
+        const ukReceipt = await contract.useKey(...snarkArgs);
+        await ukReceipt.wait();
+        print('Successfully joined game. ', { color: dfstyles.colors.dfgreen });
+        print('Welcome, player ');
+        println(account, { color: dfstyles.colors.text });
+        print('Sent player $0.15 :) ', { color: dfstyles.colors.dfblue });
+        printComponent(
+          Link,
+          { to: `${BLOCK_EXPLORER_URL}/${ukReceipt.hash}`, color: dfstyles.colors.dfblue },
+          '(View Transaction)'
+        );
+        newline();
+        setStep('ASKING_PLAYER_EMAIL');
+      } catch (e) {
+        const error = e.error;
+        console.error('Error whitelisting.', e);
+
+        if (error instanceof Error) {
+          const invalidKey = error.message.includes('invalid key');
+          if (invalidKey) {
+            println(`ERROR: Key ${key} is not valid.`, { color: dfstyles.colors.dfred });
+            newline();
+            setStep('ASKING_HAS_WHITELIST_KEY');
+
+            return;
+          }
+        }
+        println(`ERROR: Something went wrong.`, { color: dfstyles.colors.dfred });
+        println('Press any key to try again.');
+        prompt(() => {
+          setStep('ASKING_WHITELIST_KEY');
+        });
+      }
+    });
+  }
+
+  async function requestWaitlistEmail() {
+    println('Enter your email address to sign up for the whitelist.', {
+      color: dfstyles.colors.text,
+    });
+    prompt(async (email) => {
+      const response = await submitInterestedEmail(email);
+      if (response === EmailResponse.Success) {
+        println('Email successfully recorded. ', { color: dfstyles.colors.dfgreen });
+        println('Response pending...', { color: dfstyles.colors.subtext });
+        println('Keep an eye out for updates and invite keys in the next few weeks.', {
+          color: dfstyles.colors.subtext,
+        });
+        newline();
+        setStep('TERMINATED'); // TODO: Terminated needs to prompt to return to homepage
+      } else if (response === EmailResponse.Invalid) {
+        println('Email invalid. Please try again.', { color: dfstyles.colors.dfred });
+        newline();
+        setStep('ASKING_WAITLIST_EMAIL');
+      } else {
+        println('ERROR: Server error. ', { color: dfstyles.colors.dfred });
+        newline();
+        // println('Press ENTER to return to homepage.', { color: dfstyles.colors.subtext });
+        setStep('TERMINATED');
+      }
+    });
+  }
+
+  async function terminate() {
+    println('Press any key to return to homepage.', { color: dfstyles.colors.subtext });
+    // setStep('')
+    prompt(() => {
+      clear();
+      push('/');
+    });
+  }
+
+  async function requestPlayerEmail() {
+    if (!ethConnection.account) {
+      println('No account selected', { color: dfstyles.colors.dfred });
+      newline();
+      setStep('ACCOUNT_SELECTION');
+
+      return;
+    }
+
+    println('Enter your email address. ', { color: dfstyles.colors.text });
+    println("We'll use this email address to notify you if you win a prize.");
+
+    prompt(async (email) => {
+      //   const response = await submitPlayerEmail(await ethConnection?.signMessageObject({ email }));
+      const response = EmailResponse.Success;
+
+      if (response === EmailResponse.Success) {
+        println('Email successfully recorded.');
+        setStep('FETCHING_ETH_DATA');
+      } else if (response === EmailResponse.Invalid) {
+        println('Email invalid. Please try again.', { color: dfstyles.colors.dfred });
+        newline();
+        setStep('ASKING_PLAYER_EMAIL');
+      } else {
+        println('Error recording email.', { color: dfstyles.colors.dfred });
+        setStep('FETCHING_ETH_DATA');
+      }
+    });
+  }
+
+  async function loadGameData() {
+    let newGameManager: GameManager;
+
+    try {
+      newGameManager = await GameManager.create({
+        connection: ethConnection,
+        terminal,
+        contractAddress,
+      });
+    } catch (e) {
+      console.error(e);
+
+      setStep('ERROR');
+
+      print('Network under heavy load. Please refresh the page, and check ', {
+        color: dfstyles.colors.dfred,
+      });
+
+      printComponent(
+        Link,
+        { to: 'https://blockscout.com/poa/xdai/', color: dfstyles.colors.dfred },
+        'https://blockscout.com/poa/xdai/'
+      );
+
+      newline();
+
+      return;
+    }
+
+    setGameManager(newGameManager);
+
+    window.df = newGameManager;
+
+    const newGameUIManager = await GameUIManager.create(newGameManager, terminal);
+
+    window.ui = newGameUIManager;
+
+    newline();
+    println('Connected to Dark Forest Contract');
+    gameUIManagerRef.current = newGameUIManager;
+
+    if (!newGameManager.hasJoinedGame()) {
+      setStep(TerminalPromptStep.NO_HOME_PLANET);
+    } else {
+      const browserHasData = !!newGameManager.getHomeCoords();
+      if (!browserHasData) {
+        println('ERROR: Home coords not found on this browser.', TerminalTextStyle.Red);
+        setStep(TerminalPromptStep.ASK_ADD_ACCOUNT);
+        return;
+      }
+      println('Validated Local Data...');
+      setStep(TerminalPromptStep.ALL_CHECKS_PASS);
+    }
+  }
+</script>
+
+<Terminal />
diff --git a/client/src/Frontend/Styles/icomoon/style.css b/client/src/Frontend/Styles/icomoon/style.css
index fcda6033..35911826 100644
--- a/client/src/Frontend/Styles/icomoon/style.css
+++ b/client/src/Frontend/Styles/icomoon/style.css
@@ -24,46 +24,3 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-.icon-github:before {
-  content: '\e903';
-}
-.icon-discord:before {
-  content: '\e900';
-}
-.icon-twitter:before {
-  content: '\e901';
-}
-.icon-brand:before {
-  content: '\e901';
-}
-.icon-tweet:before {
-  content: '\e901';
-}
-.icon-social:before {
-  content: '\e901';
-}
-.icon-mail:before {
-  content: '\e902';
-}
-.icon-contact:before {
-  content: '\e902';
-}
-.icon-support:before {
-  content: '\e902';
-}
-.icon-newsletter:before {
-  content: '\e902';
-}
-.icon-letter:before {
-  content: '\e902';
-}
-.icon-email:before {
-  content: '\e902';
-}
-.icon-envelop:before {
-  content: '\e902';
-}
-.icon-social1:before {
-  content: '\e902';
-}
diff --git a/client/src/Frontend/Styles/style.css b/client/src/Frontend/Styles/style.css
index 4f4191cd..2b7810b0 100644
--- a/client/src/Frontend/Styles/style.css
+++ b/client/src/Frontend/Styles/style.css
@@ -1,5 +1,34 @@
 @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&display=swap');
 
+:root {
+  --df-font-size: 16pt;
+  --df-font-size-s: 12pt;
+  --df-font-size-xs: 10pt;
+
+  --df-colors-background: #151515;
+  --df-colors-backgroundlighter: #282828;
+
+  --df-screen-size-s: 660px;
+
+  --df-colors-text: #bbb;
+  --df-colors-subtext: #838383;
+  --df-colors-dfblue: #00ade1;
+  --df-colors-dfgreen: #00dc82;
+  --df-colors-dfwhite: #ffffff;
+  --df-colors-icons-twitter: #1da1f2;
+  --df-colors-icons-github: #8e65db;
+  --df-colors-icons-discord: #7289da;
+  --df-colors-icons-email: #d44638;
+  --df-colors-icons-blog: #ffcb1f;
+
+  --df-colors-artifact-rarity-unknown: #000000;
+  --df-colors-artifact-rarity-common: var(--df-colors-subtext);
+  --df-colors-artifact-rarity-rare: #6b68ff;
+  --df-colors-artifact-rarity-epic: #c13cff;
+  --df-colors-artifact-rarity-legendary: #f8b73e;
+  --df-colors-artifact-rarity-mythic: #ff44b7;
+}
+
 html,
 body,
 #root {

From ef1a0f20b5f02f87da0f14d02898e82436d46983 Mon Sep 17 00:00:00 2001
From: Blaine Bublitz <blaine.bublitz@gmail.com>
Date: Wed, 28 Sep 2022 10:57:11 -0700
Subject: [PATCH 17/17] chore: Regenerate package-lock

---
 package-lock.json | 303 +++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 274 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6d94f17a..b349b0b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,6 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "npm-run-all": "^4.1.5",
         "prettier": "^2.7.1",
-        "prettier-plugin-organize-imports": "^3.1.1",
         "prettier-plugin-solidity": "=1.0.0-beta.24",
         "typescript": "4.7.x"
       },
@@ -62,6 +61,8 @@
         "@dfdao/ui": "100.0.0-dev.0",
         "@dfdao/whitelist": "100.0.0-dev.0",
         "@lit-labs/react": "^1.0.0",
+        "@projectsophon/network": "^0.1.3",
+        "@projectsophon/types": "^0.1.3",
         "animejs": "^3.2.1",
         "auto-bind": "^4.0.0",
         "bad-words": "^3.0.4",
@@ -96,6 +97,8 @@
         "react-timeago": "^6.2.1",
         "sortablejs": "^1.10.2",
         "styled-components": "^5.3.3",
+        "svelte": "^3.50.1",
+        "svelte-spa-router": "^3.3.0",
         "ts-dedent": "^2.0.0",
         "uuid": "^8.3.2"
       },
@@ -6547,6 +6550,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/@projectsophon/constants": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@projectsophon/constants/-/constants-0.1.3.tgz",
+      "integrity": "sha512-f7OBz3QMD4I9PKMi7jA2mp0s8K0YHKNO0kMrbaIXhW3s3D+zcFfWpx5NWdR35OlcM3iadwCIRoIWxPH7LAzM7g==",
+      "dependencies": {
+        "@projectsophon/types": "^0.1.3"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/@projectsophon/eslint-plugin-typescript-enum": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@projectsophon/eslint-plugin-typescript-enum/-/eslint-plugin-typescript-enum-2.2.0.tgz",
@@ -6559,6 +6573,132 @@
         "node": ">=14"
       }
     },
+    "node_modules/@projectsophon/events": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@projectsophon/events/-/events-0.1.3.tgz",
+      "integrity": "sha512-aBOiIpFvYKZVts9+oA5D+IjmbT+X7Pv17yuh2kO2+01+xW+qJAXaYKFz3E699fIfAIfB+4Qm0bu6dlLrLpUHtA==",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@projectsophon/hexgen": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@projectsophon/hexgen/-/hexgen-0.1.3.tgz",
+      "integrity": "sha512-2RUPenziI7g6P8DCtq0nWVhnvd3ob7FHKHv7WOiqmjFsz3/QI9RpMDD7oDwRGzjLXL4reJrxf+IldSQnjruxEg==",
+      "dependencies": {
+        "@projectsophon/types": "^0.1.3"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@projectsophon/network": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@projectsophon/network/-/network-0.1.3.tgz",
+      "integrity": "sha512-ootuREkyWmyTtRXKF4FkB65rb/J35O/k9VIQR1NBau7VGVgTl5dLI53ghY/uH0nZWtSlEexEYba6nf1YFY62uQ==",
+      "dependencies": {
+        "@projectsophon/constants": "^0.1.3",
+        "@projectsophon/events": "^0.1.3",
+        "@projectsophon/serde": "^0.1.3",
+        "@projectsophon/types": "^0.1.3",
+        "async-mutex": "^0.3.2",
+        "ethers": "^5.5.1",
+        "just-debounce": "^1.1.0",
+        "lodash": "^4.17.15",
+        "mnemonist": "^0.38.1",
+        "p-defer": "^4.0.0",
+        "p-retry": "^5.1.1",
+        "p-timeout": "^6.0.0",
+        "uuid": "^8.3.2"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@projectsophon/network/node_modules/p-defer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-4.0.0.tgz",
+      "integrity": "sha512-Vb3QRvQ0Y5XnF40ZUWW7JfLogicVh/EnA5gBIvKDJoYpeI82+1E3AlB9yOcKFS0AhHrWVnAQO39fbR0G99IVEQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@projectsophon/network/node_modules/p-retry": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-5.1.1.tgz",
+      "integrity": "sha512-i69WkEU5ZAL8mrmdmVviWwU+DN+IUF8f4sSJThoJ3z5A7Nn5iuO5ROX3Boye0u+uYQLOSfgFl7SuFZCjlAVbQA==",
+      "dependencies": {
+        "@types/retry": "0.12.1",
+        "retry": "^0.13.1"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@projectsophon/network/node_modules/p-timeout": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-6.0.0.tgz",
+      "integrity": "sha512-5iS61MOdUMemWH9CORQRxVXTp9g5K8rPnI9uQpo97aWgsH3vVXKjkIhDi+OgIDmN3Ly9+AZ2fZV01Wut1yzfKA==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@projectsophon/network/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/@projectsophon/serde": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@projectsophon/serde/-/serde-0.1.3.tgz",
+      "integrity": "sha512-esqB42MG4VIQSWXZcIA0uiDzqZ6CWy2TIkQShV+IVKmBmoJJ2Ma2d0LQMKHAEM63MsY0Rj8skeR2ZBDDIqVwXA==",
+      "dependencies": {
+        "@projectsophon/constants": "^0.1.3",
+        "@projectsophon/hexgen": "^0.1.3",
+        "@projectsophon/types": "^0.1.3",
+        "ethers": "^5.5.1"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@projectsophon/types": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@projectsophon/types/-/types-0.1.3.tgz",
+      "integrity": "sha512-AWv5R9x8IWbwlOssgdaCkMblXSq32N6Q4s3++9rJRQZId/Yj82e8rbzYU5O4vKZJyCMVdKN9tRYP27falC1zAA==",
+      "dependencies": {
+        "@types/gl-matrix": "^3.2.0",
+        "ethers": "^5.5.1",
+        "gl-matrix": "^3.3.0",
+        "type-fest": "^2.12.1"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@projectsophon/types/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@projectsophon/workspace": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@projectsophon/workspace/-/workspace-2.0.0.tgz",
@@ -26171,22 +26311,6 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
-    "node_modules/prettier-plugin-organize-imports": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-3.1.1.tgz",
-      "integrity": "sha512-6bHIQzybqA644h0WGUW3gpWEVbMBvzui5wCMRBi7qA++d5ov2xjjfDk8pxJJ/ardfZrGAwizKMq/fQMFdJ+0Zw==",
-      "dev": true,
-      "peerDependencies": {
-        "@volar/vue-typescript": ">=0.40.2",
-        "prettier": ">=2.0",
-        "typescript": ">=2.9"
-      },
-      "peerDependenciesMeta": {
-        "@volar/vue-typescript": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/prettier-plugin-solidity": {
       "version": "1.0.0-beta.24",
       "resolved": "https://registry.npmjs.org/prettier-plugin-solidity/-/prettier-plugin-solidity-1.0.0-beta.24.tgz",
@@ -27286,6 +27410,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/regexparam": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.1.tgz",
+      "integrity": "sha512-zRgSaYemnNYxUv+/5SeoHI0eJIgTL/A2pUtXUPLHQxUldagouJ9p+K6IbIZ/JiQuCEv2E2B1O11SjVQy3aMCkw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/regexpp": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
@@ -29843,8 +29975,6 @@
       "version": "3.50.1",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz",
       "integrity": "sha512-bS4odcsdj5D5jEg6riZuMg5NKelzPtmsCbD9RG+8umU03TeNkdWnP6pqbCm0s8UQNBkqk29w/Bdubn3C+HWSwA==",
-      "dev": true,
-      "peer": true,
       "engines": {
         "node": ">= 8"
       }
@@ -29927,6 +30057,17 @@
         }
       }
     },
+    "node_modules/svelte-spa-router": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-3.3.0.tgz",
+      "integrity": "sha512-cwRNe7cxD43sCvSfEeaKiNZg3FCizGxeMcf7CPiWRP3jKXjEma3vxyyuDtPOam6nWbVxl9TNM3hlE/i87ZlqcQ==",
+      "dependencies": {
+        "regexparam": "2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ItalyPaleAle"
+      }
+    },
     "node_modules/symbol-observable": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
@@ -37399,6 +37540,14 @@
         }
       }
     },
+    "@projectsophon/constants": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@projectsophon/constants/-/constants-0.1.3.tgz",
+      "integrity": "sha512-f7OBz3QMD4I9PKMi7jA2mp0s8K0YHKNO0kMrbaIXhW3s3D+zcFfWpx5NWdR35OlcM3iadwCIRoIWxPH7LAzM7g==",
+      "requires": {
+        "@projectsophon/types": "^0.1.3"
+      }
+    },
     "@projectsophon/eslint-plugin-typescript-enum": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@projectsophon/eslint-plugin-typescript-enum/-/eslint-plugin-typescript-enum-2.2.0.tgz",
@@ -37408,6 +37557,94 @@
         "@typescript-eslint/experimental-utils": "^5.33.0"
       }
     },
+    "@projectsophon/events": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@projectsophon/events/-/events-0.1.3.tgz",
+      "integrity": "sha512-aBOiIpFvYKZVts9+oA5D+IjmbT+X7Pv17yuh2kO2+01+xW+qJAXaYKFz3E699fIfAIfB+4Qm0bu6dlLrLpUHtA=="
+    },
+    "@projectsophon/hexgen": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@projectsophon/hexgen/-/hexgen-0.1.3.tgz",
+      "integrity": "sha512-2RUPenziI7g6P8DCtq0nWVhnvd3ob7FHKHv7WOiqmjFsz3/QI9RpMDD7oDwRGzjLXL4reJrxf+IldSQnjruxEg==",
+      "requires": {
+        "@projectsophon/types": "^0.1.3"
+      }
+    },
+    "@projectsophon/network": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@projectsophon/network/-/network-0.1.3.tgz",
+      "integrity": "sha512-ootuREkyWmyTtRXKF4FkB65rb/J35O/k9VIQR1NBau7VGVgTl5dLI53ghY/uH0nZWtSlEexEYba6nf1YFY62uQ==",
+      "requires": {
+        "@projectsophon/constants": "^0.1.3",
+        "@projectsophon/events": "^0.1.3",
+        "@projectsophon/serde": "^0.1.3",
+        "@projectsophon/types": "^0.1.3",
+        "async-mutex": "^0.3.2",
+        "ethers": "^5.5.1",
+        "just-debounce": "^1.1.0",
+        "lodash": "^4.17.15",
+        "mnemonist": "^0.38.1",
+        "p-defer": "^4.0.0",
+        "p-retry": "^5.1.1",
+        "p-timeout": "^6.0.0",
+        "uuid": "^8.3.2"
+      },
+      "dependencies": {
+        "p-defer": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-4.0.0.tgz",
+          "integrity": "sha512-Vb3QRvQ0Y5XnF40ZUWW7JfLogicVh/EnA5gBIvKDJoYpeI82+1E3AlB9yOcKFS0AhHrWVnAQO39fbR0G99IVEQ=="
+        },
+        "p-retry": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-5.1.1.tgz",
+          "integrity": "sha512-i69WkEU5ZAL8mrmdmVviWwU+DN+IUF8f4sSJThoJ3z5A7Nn5iuO5ROX3Boye0u+uYQLOSfgFl7SuFZCjlAVbQA==",
+          "requires": {
+            "@types/retry": "0.12.1",
+            "retry": "^0.13.1"
+          }
+        },
+        "p-timeout": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-6.0.0.tgz",
+          "integrity": "sha512-5iS61MOdUMemWH9CORQRxVXTp9g5K8rPnI9uQpo97aWgsH3vVXKjkIhDi+OgIDmN3Ly9+AZ2fZV01Wut1yzfKA=="
+        },
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+        }
+      }
+    },
+    "@projectsophon/serde": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@projectsophon/serde/-/serde-0.1.3.tgz",
+      "integrity": "sha512-esqB42MG4VIQSWXZcIA0uiDzqZ6CWy2TIkQShV+IVKmBmoJJ2Ma2d0LQMKHAEM63MsY0Rj8skeR2ZBDDIqVwXA==",
+      "requires": {
+        "@projectsophon/constants": "^0.1.3",
+        "@projectsophon/hexgen": "^0.1.3",
+        "@projectsophon/types": "^0.1.3",
+        "ethers": "^5.5.1"
+      }
+    },
+    "@projectsophon/types": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@projectsophon/types/-/types-0.1.3.tgz",
+      "integrity": "sha512-AWv5R9x8IWbwlOssgdaCkMblXSq32N6Q4s3++9rJRQZId/Yj82e8rbzYU5O4vKZJyCMVdKN9tRYP27falC1zAA==",
+      "requires": {
+        "@types/gl-matrix": "^3.2.0",
+        "ethers": "^5.5.1",
+        "gl-matrix": "^3.3.0",
+        "type-fest": "^2.12.1"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "2.19.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+          "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA=="
+        }
+      }
+    },
     "@projectsophon/workspace": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@projectsophon/workspace/-/workspace-2.0.0.tgz",
@@ -41000,6 +41237,8 @@
         "@dfdao/ui": "100.0.0-dev.0",
         "@dfdao/whitelist": "100.0.0-dev.0",
         "@lit-labs/react": "^1.0.0",
+        "@projectsophon/network": "^0.1.3",
+        "@projectsophon/types": "^0.1.3",
         "@projectsophon/workspace": "^2.0.0",
         "@rollup/plugin-commonjs": "^22.0.2",
         "@rollup/plugin-node-resolve": "14.1.0",
@@ -41059,7 +41298,9 @@
         "react-timeago": "^6.2.1",
         "sortablejs": "^1.10.2",
         "styled-components": "^5.3.3",
+        "svelte": "^3.50.1",
         "svelte-preprocess": "^4.10.7",
+        "svelte-spa-router": "^3.3.0",
         "ts-dedent": "^2.0.0",
         "typedoc": "^0.23.15",
         "typedoc-plugin-markdown": "3.13.x",
@@ -52064,13 +52305,6 @@
       "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
       "dev": true
     },
-    "prettier-plugin-organize-imports": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-3.1.1.tgz",
-      "integrity": "sha512-6bHIQzybqA644h0WGUW3gpWEVbMBvzui5wCMRBi7qA++d5ov2xjjfDk8pxJJ/ardfZrGAwizKMq/fQMFdJ+0Zw==",
-      "dev": true,
-      "requires": {}
-    },
     "prettier-plugin-solidity": {
       "version": "1.0.0-beta.24",
       "resolved": "https://registry.npmjs.org/prettier-plugin-solidity/-/prettier-plugin-solidity-1.0.0-beta.24.tgz",
@@ -52876,6 +53110,11 @@
         "functions-have-names": "^1.2.2"
       }
     },
+    "regexparam": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.1.tgz",
+      "integrity": "sha512-zRgSaYemnNYxUv+/5SeoHI0eJIgTL/A2pUtXUPLHQxUldagouJ9p+K6IbIZ/JiQuCEv2E2B1O11SjVQy3aMCkw=="
+    },
     "regexpp": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
@@ -54778,9 +55017,7 @@
     "svelte": {
       "version": "3.50.1",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz",
-      "integrity": "sha512-bS4odcsdj5D5jEg6riZuMg5NKelzPtmsCbD9RG+8umU03TeNkdWnP6pqbCm0s8UQNBkqk29w/Bdubn3C+HWSwA==",
-      "dev": true,
-      "peer": true
+      "integrity": "sha512-bS4odcsdj5D5jEg6riZuMg5NKelzPtmsCbD9RG+8umU03TeNkdWnP6pqbCm0s8UQNBkqk29w/Bdubn3C+HWSwA=="
     },
     "svelte-hmr": {
       "version": "0.15.0",
@@ -54803,6 +55040,14 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "svelte-spa-router": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-3.3.0.tgz",
+      "integrity": "sha512-cwRNe7cxD43sCvSfEeaKiNZg3FCizGxeMcf7CPiWRP3jKXjEma3vxyyuDtPOam6nWbVxl9TNM3hlE/i87ZlqcQ==",
+      "requires": {
+        "regexparam": "2.0.1"
+      }
+    },
     "symbol-observable": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",