Enable routing

package-lock.json

@@ -1,12 +1,13 @@
 {
-  "name": "radicle-registrar",
+  "name": "radicle-app",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "dependencies": {
         "ethers": "^5.0.31",
-        "svelte": "^3.32.3"
+        "svelte": "^3.32.3",
+        "svelte-routing": "^1.5.0"
       },
       "devDependencies": {
         "@snowpack/plugin-svelte": "^3.5.2",
@@ -1090,6 +1091,14 @@
         }
       }
     },
+    "node_modules/svelte-routing": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/svelte-routing/-/svelte-routing-1.5.0.tgz",
+      "integrity": "sha512-4ftcSO2x5kzCUWQKm9Td6/C+t7lRjMEo72utRO0liS/aWZuRwAXOBl3y+hWZw8tV+DTGElqaAAyi44AuWXcVBg==",
+      "peerDependencies": {
+        "svelte": "^3.20.x"
+      }
+    },
     "node_modules/ws": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.2.3.tgz",
@@ -1759,6 +1768,12 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "svelte-routing": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/svelte-routing/-/svelte-routing-1.5.0.tgz",
+      "integrity": "sha512-4ftcSO2x5kzCUWQKm9Td6/C+t7lRjMEo72utRO0liS/aWZuRwAXOBl3y+hWZw8tV+DTGElqaAAyi44AuWXcVBg==",
+      "requires": {}
+    },
     "ws": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.2.3.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "ethers": "^5.0.31",
-    "svelte": "^3.32.3"
+    "svelte": "^3.32.3",
+    "svelte-routing": "^1.5.0"
   }
 }

snowpack.config.js

@@ -9,7 +9,7 @@ module.exports = {
   ],
   routes: [
     /* Enable an SPA Fallback in development: */
-    // {"match": "routes", "src": ".*", "dest": "/index.html"},
+    {"match": "routes", "src": ".*", "dest": "/index.html"},
   ],
   optimize: {
     /* Example: Bundle your final build: */

src/App.svelte

@@ -1,15 +1,17 @@
 <script lang="javascript">
   import { ethers } from 'ethers';
   import { get } from 'svelte/store';
+  import { Router, Link, Route } from "svelte-routing";
   import { getConfig } from './config.js';
   import { session } from './session.js';
 
   import Vesting from './base/vesting/Vesting.svelte';
   import Header from './Header.svelte';
 
+  export let url = "";
+
   let contractAddress = "";
   let info = null;
-  let app = Vesting;
 
   function handleKeydown(event) {
     if (event.key === 'Enter') {
@@ -36,6 +38,8 @@
 <div class="app">
   <Header/>
   <div class="wrapper">
-    <svelte:component this={app}/>
+    <Router url="{url}">
+      <Route path="vesting" component={Vesting} />
+    </Router>
   </div>
 </div>

src/Header.svelte

@@ -1,4 +1,4 @@
-<script lang="js">
+<script lang="javascript">
   // TODO: Shorten tx hash
   // TODO: Link to correct network on etherscan
   import { ethers } from "ethers";

src/snowpack.config.js

@@ -1,27 +0,0 @@
-/** @type {import("snowpack").SnowpackUserConfig } */
-module.exports = {
-  mount: {
-    /* ... */
-  },
-  plugins: [
-    '@snowpack/plugin-svelte'
-  ],
-  routes: [
-    /* Enable an SPA Fallback in development: */
-    // {"match": "routes", "src": ".*", "dest": "/index.html"},
-  ],
-  optimize: {
-    /* Example: Bundle your final build: */
-    // "bundle": true,
-  },
-  packageOptions: {
-    polyfillNode: true,
-  },
-  devOptions: {
-    open: "none",
-    output: "dashboard"
-  },
-  buildOptions: {
-    /* ... */
-  },
-};