From b64dd135cc478faf7e0164e621922e00a9312b06 Mon Sep 17 00:00:00 2001
From: Derrick Hammer <derrick@derrickhammer.com>
Date: Tue, 25 Jul 2023 11:54:17 -0400
Subject: [PATCH] refactor: rewrite, implement backend logic, and componentize
 dashboard

---
 ui/apps/dashboard/App.scss                  | 118 ++++
 ui/apps/dashboard/App.svelte                |  50 ++
 ui/apps/dashboard/components/Art.scss       | 172 +++++
 ui/apps/dashboard/components/Art.svelte     |  24 +
 ui/apps/dashboard/components/Footer.scss    |  36 +
 ui/apps/dashboard/components/Footer.svelte  |  28 +
 ui/apps/dashboard/components/Header.scss    | 114 ++++
 ui/apps/dashboard/components/Header.svelte  |  46 ++
 ui/apps/dashboard/components/Network.scss   | 101 +++
 ui/apps/dashboard/components/Network.svelte |  35 +
 ui/components/dashboard/Dashboard.svelte    | 693 --------------------
 ui/dashboard.js                             |  10 +-
 12 files changed, 729 insertions(+), 698 deletions(-)
 create mode 100644 ui/apps/dashboard/App.scss
 create mode 100644 ui/apps/dashboard/App.svelte
 create mode 100644 ui/apps/dashboard/components/Art.scss
 create mode 100644 ui/apps/dashboard/components/Art.svelte
 create mode 100644 ui/apps/dashboard/components/Footer.scss
 create mode 100644 ui/apps/dashboard/components/Footer.svelte
 create mode 100644 ui/apps/dashboard/components/Header.scss
 create mode 100644 ui/apps/dashboard/components/Header.svelte
 create mode 100644 ui/apps/dashboard/components/Network.scss
 create mode 100644 ui/apps/dashboard/components/Network.svelte
 delete mode 100644 ui/components/dashboard/Dashboard.svelte

diff --git a/ui/apps/dashboard/App.scss b/ui/apps/dashboard/App.scss
new file mode 100644
index 0000000..d742881
--- /dev/null
+++ b/ui/apps/dashboard/App.scss
@@ -0,0 +1,118 @@
+@import "../../styles/global";
+
+.content {
+    display: flex;
+    flex-direction: column;
+    max-width: 64em;
+    margin-top: 14em;
+    margin-bottom: 10em;
+    @include fluid-position-left(68em, 58em);
+    color: #fff;
+    opacity: 0;
+    transition: opacity 500ms;
+
+    &.connected {
+        opacity: 1;
+    }
+}
+
+.content-grid {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap: 4em;
+    margin: 4em 0;
+
+    @media screen and (min-width: 36rem) {
+        grid-template-columns: repeat(2, 1fr);
+        grid-auto-rows: 1fr;
+        gap: 10em;
+        margin-top: 3em;
+    }
+
+    @media screen and (max-width: 80rem) {
+        > div {
+            background: rgba(#080808, 0.7);
+            border-radius: 0.5em;
+            padding: 0.8em 1.5em 1em;
+            margin: -0.8em -1.5em -1em;
+        }
+    }
+}
+
+main {
+    position: relative;
+    animation: 1000ms fade-in;
+    display: flex;
+    align-items: center;
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(127.54deg);
+    }
+
+    20% {
+        transform: rotate(127.54deg);
+    }
+
+    30% {
+        transform: rotate(420deg);
+    }
+
+    50% {
+        transform: rotate(420deg);
+    }
+
+    60% {
+        transform: rotate(360deg);
+    }
+
+    90% {
+        transform: rotate(360deg);
+    }
+
+    100% {
+        transform: rotate(540deg);
+    }
+}
+
+@keyframes rotate-full {
+    0% {
+        transform: rotate(-52.46deg);
+    }
+
+    20% {
+        transform: rotate(-52.46deg);
+    }
+
+    30% {
+        transform: rotate(240deg);
+    }
+
+    50% {
+        transform: rotate(240deg);
+    }
+
+    60% {
+        transform: rotate(180deg);
+    }
+
+    90% {
+        transform: rotate(180deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
diff --git a/ui/apps/dashboard/App.svelte b/ui/apps/dashboard/App.svelte
new file mode 100644
index 0000000..0b29ba5
--- /dev/null
+++ b/ui/apps/dashboard/App.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import Header from "./components/Header.svelte";
+  import Art from "./components/Art.svelte";
+  import { waitForConnected } from "../../../shared/util.ts";
+  import { createClient } from "@lumeweb/kernel-network-registry-client";
+  import Network from "./components/Network.svelte";
+  import Footer from "./components/Footer.svelte";
+
+  const networkClient = createClient();
+
+  let connected = false;
+
+  let types = {};
+
+  const waitConnect = waitForConnected(async () => {
+    connected = true;
+
+    const types = await networkClient.getTypes();
+
+    for (const type of types) {
+      types[type] = await networkClient.getNetworksByType();
+    }
+  });
+</script>
+
+<main>
+  <Header />
+  <Art />
+  <div class="content" class:connected>
+    {#await waitConnect}
+      <div class="content-grid">
+        {#each Object.entries(types) as [type, networks]}
+          <div>
+            <h4>{type} Networks</h4>
+            <ul>
+              {#each networks as network}
+                <Network module={network} />
+              {/each}
+            </ul>
+          </div>
+        {/each}
+      </div>
+    {/await}
+  </div>
+  <Footer />
+</main>
+
+<style lang="scss">
+  @import "App.scss";
+</style>
diff --git a/ui/apps/dashboard/components/Art.scss b/ui/apps/dashboard/components/Art.scss
new file mode 100644
index 0000000..7c4e993
--- /dev/null
+++ b/ui/apps/dashboard/components/Art.scss
@@ -0,0 +1,172 @@
+@import "../../../styles/mixins";
+@import "../../../styles/vars";
+@import "../../../styles/artwork";
+.art-wrapper {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -125%);
+    transition: left 500ms, transform 500ms;
+    z-index: -1;
+
+    &.done {
+        top: 50%;
+        left: -35em;
+        transform: translate(0, -50%);
+    }
+}
+
+.art-rotate {
+    transform: rotate(-180deg);
+    animation: 5000ms rotate;
+    transition: transform 500ms;
+
+    &.done {
+        transform: rotate(-151.13deg);
+    }
+}
+
+.art {
+    position: relative;
+    @include fluid-width-height(9.0625rem, 9.0625rem);
+    background-image: $lume-2-base64;
+    background-size: cover;
+    background-position: 50%;
+    transition: width 500ms, height 500ms;
+
+    > div {
+        position: absolute;
+        inset: 0;
+        transition: opacity 500ms;
+    }
+
+    .gradient-1 {
+        background: linear-gradient(
+                272.67deg,
+                #ff005c -27.49%,
+                #0c0c0d 26.91%,
+                #ff005c 49.4%,
+                #ed6a5e 99.62%
+        );
+        z-index: -1;
+    }
+
+    .gradient-2 {
+        background: conic-gradient(
+                from 180deg at 50% 50%,
+                #a67833 -15.8deg,
+                #e91f1f 222.32deg,
+                #a67833 344.2deg,
+                #e91f1f 582.32deg
+        );
+        opacity: 0;
+        z-index: -2;
+    }
+
+    .gradient-3 {
+        background: conic-gradient(
+                from -89.79deg at 50% 50%,
+                #33a653 -15.8deg,
+                #080808 222.32deg,
+                #33a653 344.2deg,
+                #080808 582.32deg
+        );
+        opacity: 0;
+        z-index: -3;
+    }
+
+    .gradient-4 {
+        background: conic-gradient(
+                from 180deg at 50% 50%,
+                #2f2f2f -15.8deg,
+                #66d155 222.32deg,
+                #2f2f2f 344.2deg,
+                #66d155 582.32deg
+        );
+        opacity: 0;
+        z-index: -4;
+    }
+
+    &.pulse {
+        .gradient-1 {
+            opacity: 0;
+        }
+
+        .gradient-2 {
+            opacity: 1;
+        }
+    }
+
+    &.connected {
+        .gradient-1 {
+            opacity: 0;
+        }
+
+        .gradient-3 {
+            opacity: 1;
+        }
+    }
+
+    &.done {
+        @include fluid-width-height(72rem, 72rem);
+
+        .gradient-1 {
+            opacity: 0;
+        }
+
+        .gradient-4 {
+            opacity: 1;
+        }
+
+        .loading-text {
+            display: block;
+
+            .loading-text-connected {
+                top: 0;
+                left: -25%;
+                transform: translate(-125%, 0);
+                opacity: 0;
+            }
+        }
+    }
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(127.54deg);
+    }
+
+    20% {
+        transform: rotate(127.54deg);
+    }
+
+    30% {
+        transform: rotate(420deg);
+    }
+
+    50% {
+        transform: rotate(420deg);
+    }
+
+    60% {
+        transform: rotate(360deg);
+    }
+
+    90% {
+        transform: rotate(360deg);
+    }
+
+    100% {
+        transform: rotate(540deg);
+    }
+}
diff --git a/ui/apps/dashboard/components/Art.svelte b/ui/apps/dashboard/components/Art.svelte
new file mode 100644
index 0000000..44fb34e
--- /dev/null
+++ b/ui/apps/dashboard/components/Art.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { waitForConnected } from "../../../../shared/util.ts";
+
+  let connected = false;
+
+  waitForConnected(() => {
+    connected = true;
+  });
+</script>
+
+<div class="art-wrapper">
+  <div class="art-rotate">
+    <div class="art">
+      <div class="gradient-1" />
+      <div class="gradient-2" />
+      <div class="gradient-3" />
+      <div class="gradient-4" />
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  @import "Art.scss";
+</style>
diff --git a/ui/apps/dashboard/components/Footer.scss b/ui/apps/dashboard/components/Footer.scss
new file mode 100644
index 0000000..0e86967
--- /dev/null
+++ b/ui/apps/dashboard/components/Footer.scss
@@ -0,0 +1,36 @@
+.socials {
+    position: absolute;
+    bottom: 5em;
+    left: 5em;
+    display: flex;
+    align-items: center;
+    gap: 1.5em;
+    margin: -0.5em;
+    opacity: 0;
+    transition: opacity 500ms;
+
+    a {
+        padding: 0.5em;
+        color: #fff;
+        transition: color 250ms;
+
+        &:hover {
+            color: #62c554;
+        }
+    }
+
+    :global(svg) {
+        @include fluid-width-height(2rem, 2rem);
+    }
+
+    @media screen and (max-width: 80rem) {
+        background: rgba(#080808, 0.7);
+        border-radius: 0.5em;
+        padding: 1.25em 1.5em;
+        margin: -1.25em -1.5em;
+    }
+
+    &.connected{
+        opacity: 1;
+    }
+}
diff --git a/ui/apps/dashboard/components/Footer.svelte b/ui/apps/dashboard/components/Footer.svelte
new file mode 100644
index 0000000..e42282b
--- /dev/null
+++ b/ui/apps/dashboard/components/Footer.svelte
@@ -0,0 +1,28 @@
+<script>
+  import svgGithub from "../../../assets/icon/github.svg";
+  import svgDiscord from "../../../assets/icon/discord.svg";
+  import svgTwitter from "../../../assets/icon/twitter.svg";
+  import svgFacebook from "../../../assets/icon/facebook.svg";
+  import { waitForConnected } from "../../../../shared/util.ts";
+
+  let connected = false;
+
+  waitForConnected(() => {
+    connected = true;
+  });
+</script>
+
+<div class="socials" class:connected>
+  <a href="#" title="GitHub" class="github-logo">
+    {@html svgGithub}
+  </a>
+  <a href="#" title="Discord" class="discord-logo">
+    {@html svgDiscord}
+  </a>
+  <a href="#" title="Twitter" class="twitter-logo">
+    {@html svgTwitter}
+  </a>
+  <a href="#" title="Facebook" class="facebook-logo">
+    {@html svgFacebook}
+  </a>
+</div>
diff --git a/ui/apps/dashboard/components/Header.scss b/ui/apps/dashboard/components/Header.scss
new file mode 100644
index 0000000..568e7dd
--- /dev/null
+++ b/ui/apps/dashboard/components/Header.scss
@@ -0,0 +1,114 @@
+@import "../../../styles/mixins";
+header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    z-index: 3;
+
+    .status {
+        @include fluid-font-size(1.25rem);
+        margin: -0.5em 0 -0.5em 1em;
+        animation: 1000ms fade-in;
+
+        > div {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+        }
+
+        .network {
+            display: grid;
+
+            > div {
+                grid-column-start: 1;
+                grid-row-start: 1;
+                display: flex;
+                align-items: center;
+                line-height: 1;
+                white-space: nowrap;
+                transition: opacity 500ms;
+            }
+
+            .connecting {
+                color: #edca4f;
+                z-index: 2;
+
+                .icon {
+                    animation: 5000ms rotate-full;
+                }
+            }
+
+            .connected {
+                color: #64c555;
+                z-index: 1;
+                opacity: 0;
+            }
+        }
+
+        .user-count {
+            @include fluid-font-size(1rem);
+            color: #8e8e8e;
+            height: 1.5em;
+            padding-top: 0.3em;
+            transition: height 500ms, padding-top 500ms;
+            overflow: hidden;
+
+            &.user-count-hidden {
+                height: 0;
+                padding: 0;
+            }
+
+            svg {
+                @include fluid-width-height(1rem, 1rem);
+                margin-right: 0.3em;
+            }
+        }
+
+        .network.connected {
+            .connecting {
+                z-index: 1;
+                opacity: 0;
+            }
+
+            .connected {
+                z-index: 2;
+                opacity: 1;
+            }
+        }
+    }
+}
+
+
+@keyframes rotate-full {
+    0% {
+        transform: rotate(-52.46deg);
+    }
+
+    20% {
+        transform: rotate(-52.46deg);
+    }
+
+    30% {
+        transform: rotate(240deg);
+    }
+
+    50% {
+        transform: rotate(240deg);
+    }
+
+    60% {
+        transform: rotate(180deg);
+    }
+
+    90% {
+        transform: rotate(180deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
diff --git a/ui/apps/dashboard/components/Header.svelte b/ui/apps/dashboard/components/Header.svelte
new file mode 100644
index 0000000..f5c3d63
--- /dev/null
+++ b/ui/apps/dashboard/components/Header.svelte
@@ -0,0 +1,46 @@
+<script>
+  import lumeLogo from "../../../assets/lume-logo.png";
+  import { waitForConnected } from "../../../../shared/util.ts";
+
+  let userCount;
+
+  let connected = false;
+
+  waitForConnected(() => {
+    connected = true;
+  });
+</script>
+
+<header>
+  <img src={lumeLogo} alt="Lume" />
+  <div class="status">
+    <div class="network" class:connected>
+      <div class="connected" class:connected class:connecting={!connected}>
+        <span
+          class="icon"
+          class:icon-success={connected}
+          class:icon-wait={!connected}
+          class:icon-wait-yellow={!connected} />
+        Lume Network
+      </div>
+    </div>
+    <div class="user-count" class:user-count-hidden={!userCount}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
+      </svg>
+      {userCount}
+    </div>
+  </div>
+</header>
+
+<style lang="scss">
+  @import "Header.scss";
+</style>
diff --git a/ui/apps/dashboard/components/Network.scss b/ui/apps/dashboard/components/Network.scss
new file mode 100644
index 0000000..2ffa0d5
--- /dev/null
+++ b/ui/apps/dashboard/components/Network.scss
@@ -0,0 +1,101 @@
+@import "../../../styles/artwork";
+@import "../../../styles/mixins";
+@import "../../../styles/vars";
+
+h3 {
+    @include fluid-font-size(3.125rem);
+    font-family: $font-family-jetbrains-mono;
+    line-height: 110%;
+    text-shadow: 0.017em 0.017em 0.034em #000;
+}
+
+h4 {
+    @include fluid-font-size(1.5rem);
+    line-height: 168%;
+    text-shadow: 0.017em 0.017em 0.034em #000;
+
+    &:first-letter {
+        text-transform: capitalize;
+    }
+}
+
+li {
+    @include fluid-font-size(1.25rem);
+    margin-top: 0.9em;
+
+    .network {
+        display: flex;
+        align-items: center;
+        margin-bottom: -0.2em;
+    }
+
+    .status {
+        @include fluid-font-size(1rem);
+        display: flex;
+    }
+
+    &.success {
+        .status {
+            color: #62c554;
+        }
+    }
+
+    &.loading {
+        .status {
+            color: #fb891f;
+        }
+    }
+
+    &.error {
+        .status {
+            color: #cc1b50;
+        }
+    }
+
+    .user-count {
+        @include fluid-font-size(1rem);
+        color: #8e8e8e;
+        display: flex;
+        align-items: center;
+
+        svg {
+            @include fluid-width-height(1rem, 1rem);
+            margin: 0 0.3em 0 1.2em;
+        }
+    }
+}
+
+.icon {
+    display: block;
+    width: 1.125em;
+    height: 1.125em;
+    margin-right: 0.375em;
+    @include fluid-font-size(1.125rem);
+
+    &.icon-success {
+        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>');
+        mask-size: 1.125em 1.125em;
+        mask-repeat: no-repeat;
+        mask-position: 50%;
+        background-color: #68cc58;
+    }
+
+    &.icon-wait {
+        background-image: url("../../../assets/wait-icon-orange.png");
+        background-size: 1.125em 1.125em;
+        background-repeat: no-repeat;
+        background-position: 50%;
+    }
+
+    &.icon-wait-yellow {
+        background-image: url("../../../assets/wait-icon-yellow.png");
+    }
+
+    &.icon-error {
+        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>');
+        mask-size: 1.125em 1.125em;
+        mask-repeat: no-repeat;
+        mask-position: 50%;
+        background-color: #cc1b50;
+    }
+}
diff --git a/ui/apps/dashboard/components/Network.svelte b/ui/apps/dashboard/components/Network.svelte
new file mode 100644
index 0000000..9b80bb8
--- /dev/null
+++ b/ui/apps/dashboard/components/Network.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { onDestroy, onMount } from "svelte";
+  import { getNetworkModuleStatus } from "@lumeweb/libkernel";
+
+  export let module;
+
+  let destroy;
+
+  let ready = false;
+  let sync = null;
+  let peers = 0;
+
+  onMount(() => {
+    destroy = getNetworkModuleStatus((data) => {
+      ready = data.ready;
+      sync = data.sync;
+      peers = data.peers;
+    }, module);
+  });
+  onDestroy(() => {
+    destroy?.();
+  });
+</script>
+
+<li class:success={ready}>
+  <div class="network">
+    <span class="icon" class:icon-success={ready} />
+    Network
+  </div>
+  {#if ready}
+    <div class="status">Synced</div>
+  {:else}
+    <div class="status">Syncing</div>
+  {/if}
+</li>
diff --git a/ui/components/dashboard/Dashboard.svelte b/ui/components/dashboard/Dashboard.svelte
deleted file mode 100644
index f0c8c71..0000000
--- a/ui/components/dashboard/Dashboard.svelte
+++ /dev/null
@@ -1,693 +0,0 @@
-<script>
-  import "../../styles/global.scss";
-  import lumeLogo from "../../assets/lume-logo.png";
-
-  import svgGithub from "../../assets/icon/github.svg?raw";
-  import svgDiscord from "../../assets/icon/discord.svg?raw";
-  import svgTwitter from "../../assets/icon/twitter.svg?raw";
-  import svgFacebook from "../../assets/icon/facebook.svg?raw";
-
-  let step = 1;
-  let userCount;
-
-  setTimeout(() => {
-    step = 2;
-  }, 5000);
-
-  setTimeout(() => {
-    step = 3;
-    userCount = "23k";
-  }, 6000);
-
-  setTimeout(() => {
-    step = 4;
-  }, 7000);
-</script>
-
-<header>
-  <img src={lumeLogo} alt="Lume" />
-  <div
-    class="status"
-    class:step-2={step === 2}
-    class:step-3={step === 3}
-    class:step-4={step === 4}>
-    <div class="network">
-      <div class="connected">
-        <span class="icon icon-success" />
-        Lume Network
-      </div>
-      <div class="connecting">
-        <span class="icon icon-wait icon-wait-yellow" />
-        Lume Network
-      </div>
-    </div>
-    <div class="user-count" class:user-count-hidden={!userCount}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor">
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
-      </svg>
-      {userCount}
-    </div>
-  </div>
-</header>
-<main
-  class:step-2={step === 2}
-  class:step-3={step === 3}
-  class:step-4={step === 4}>
-  <div class="art-wrapper">
-    <div class="art-rotate">
-      <div class="art">
-        <div class="gradient-1" />
-        <div class="gradient-2" />
-        <div class="gradient-3" />
-        <div class="gradient-4" />
-      </div>
-    </div>
-  </div>
-  <div class="loading-text">
-    <div class="loading-text-connected">
-      <h3>Network Ready</h3>
-      <p>All networks sync’d and ready to go.</p>
-    </div>
-  </div>
-  <div class="content">
-    <h3>All set.</h3>
-    <div class="content-grid">
-      <div>
-        <h4>Blockchain Networks</h4>
-        <ul>
-          <li class="success">
-            <div class="network">
-              <span class="icon icon-success" />
-              HNS
-            </div>
-            <div class="status">Synced</div>
-          </li>
-          <li class="loading">
-            <div class="network">
-              <span class="icon icon-wait" />
-              ENS
-            </div>
-            <div class="status">Syncing</div>
-          </li>
-          <li class="error">
-            <div class="network">
-              <span class="icon icon-error" />
-              Arweave
-            </div>
-            <div class="status">Issue</div>
-          </li>
-        </ul>
-      </div>
-      <div>
-        <h4>Content Networks</h4>
-        <ul>
-          <li class="success">
-            <div class="network">
-              <span class="icon icon-success" />
-              IPFS
-            </div>
-            <div class="status">
-              Connected
-              <div class="user-count">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                  stroke="currentColor">
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
-                </svg>
-                {userCount}
-              </div>
-            </div>
-          </li>
-          <li class="loading">
-            <div class="network">
-              <span class="icon icon-wait" />
-              Arweave
-            </div>
-            <div class="status">
-              Connecting
-              <div class="user-count">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                  stroke="currentColor">
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
-                </svg>
-                {userCount}
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-  <div class="socials">
-    <a href="#" title="GitHub" class="github-logo">
-      {@html svgGithub}
-    </a>
-    <a href="#" title="Discord" class="discord-logo">
-      {@html svgDiscord}
-    </a>
-    <a href="#" title="Twitter" class="twitter-logo">
-      {@html svgTwitter}
-    </a>
-    <a href="#" title="Facebook" class="facebook-logo">
-      {@html svgFacebook}
-    </a>
-  </div>
-</main>
-
-<style lang="scss">
-  @import "../../styles/artwork";
-  @import "../../styles/mixins";
-  @import "../../styles/vars";
-
-  .icon {
-    display: block;
-    width: 1.125em;
-    height: 1.125em;
-    margin-right: 0.375em;
-    @include fluid-font-size(1.125rem);
-
-    &.icon-success {
-      mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>');
-      mask-size: 1.125em 1.125em;
-      mask-repeat: no-repeat;
-      mask-position: 50%;
-      background-color: #68cc58;
-    }
-
-    &.icon-wait {
-      background-image: url("../../assets/wait-icon-orange.png");
-      background-size: 1.125em 1.125em;
-      background-repeat: no-repeat;
-      background-position: 50%;
-    }
-
-    &.icon-wait-yellow {
-      background-image: url("../../assets/wait-icon-yellow.png");
-    }
-
-    &.icon-error {
-      mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>');
-      mask-size: 1.125em 1.125em;
-      mask-repeat: no-repeat;
-      mask-position: 50%;
-      background-color: #cc1b50;
-    }
-  }
-
-  header {
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    z-index: 3;
-
-    .status {
-      @include fluid-font-size(1.25rem);
-      margin: -0.5em 0 -0.5em 1em;
-      animation: 1000ms fade-in;
-
-      > div {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-      }
-
-      .network {
-        display: grid;
-
-        > div {
-          grid-column-start: 1;
-          grid-row-start: 1;
-          display: flex;
-          align-items: center;
-          line-height: 1;
-          white-space: nowrap;
-          transition: opacity 500ms;
-        }
-
-        .connecting {
-          color: #edca4f;
-          z-index: 2;
-
-          .icon {
-            animation: 5000ms rotate-full;
-          }
-        }
-
-        .connected {
-          color: #64c555;
-          z-index: 1;
-          opacity: 0;
-        }
-      }
-
-      .user-count {
-        @include fluid-font-size(1rem);
-        color: #8e8e8e;
-        height: 1.5em;
-        padding-top: 0.3em;
-        transition: height 500ms, padding-top 500ms;
-        overflow: hidden;
-
-        &.user-count-hidden {
-          height: 0;
-          padding: 0;
-        }
-
-        svg {
-          @include fluid-width-height(1rem, 1rem);
-          margin-right: 0.3em;
-        }
-      }
-
-      &.step-3,
-      &.step-4 {
-        .network {
-          .connecting {
-            z-index: 1;
-            opacity: 0;
-          }
-
-          .connected {
-            z-index: 2;
-            opacity: 1;
-          }
-        }
-      }
-    }
-  }
-
-  main {
-    position: relative;
-    animation: 1000ms fade-in;
-    display: flex;
-    align-items: center;
-  }
-
-  .art-wrapper {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -125%);
-    transition: left 500ms, transform 500ms;
-    z-index: -1;
-  }
-
-  .art-rotate {
-    transform: rotate(-180deg);
-    animation: 5000ms rotate;
-    transition: transform 500ms;
-  }
-
-  .art {
-    position: relative;
-    @include fluid-width-height(9.0625rem, 9.0625rem);
-    background-image: $lume-2-base64;
-    background-size: cover;
-    background-position: 50%;
-    transition: width 500ms, height 500ms;
-
-    > div {
-      position: absolute;
-      inset: 0;
-      transition: opacity 500ms;
-    }
-
-    .gradient-1 {
-      background: linear-gradient(
-        272.67deg,
-        #ff005c -27.49%,
-        #0c0c0d 26.91%,
-        #ff005c 49.4%,
-        #ed6a5e 99.62%
-      );
-      z-index: -1;
-    }
-
-    .gradient-2 {
-      background: conic-gradient(
-        from 180deg at 50% 50%,
-        #a67833 -15.8deg,
-        #e91f1f 222.32deg,
-        #a67833 344.2deg,
-        #e91f1f 582.32deg
-      );
-      opacity: 0;
-      z-index: -2;
-    }
-
-    .gradient-3 {
-      background: conic-gradient(
-        from -89.79deg at 50% 50%,
-        #33a653 -15.8deg,
-        #080808 222.32deg,
-        #33a653 344.2deg,
-        #080808 582.32deg
-      );
-      opacity: 0;
-      z-index: -3;
-    }
-
-    .gradient-4 {
-      background: conic-gradient(
-        from 180deg at 50% 50%,
-        #2f2f2f -15.8deg,
-        #66d155 222.32deg,
-        #2f2f2f 344.2deg,
-        #66d155 582.32deg
-      );
-      opacity: 0;
-      z-index: -4;
-    }
-  }
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    max-width: 64em;
-    margin-top: 14em;
-    margin-bottom: 10em;
-    @include fluid-position-left(68em, 58em);
-    color: #fff;
-    opacity: 0;
-    transition: opacity 500ms;
-
-    h3 {
-      @include fluid-font-size(3.125rem);
-      font-family: $font-family-jetbrains-mono;
-      line-height: 110%;
-      text-shadow: 0.017em 0.017em 0.034em #000;
-    }
-
-    h4 {
-      @include fluid-font-size(1.5rem);
-      line-height: 168%;
-      text-shadow: 0.017em 0.017em 0.034em #000;
-    }
-
-    li {
-      @include fluid-font-size(1.25rem);
-      margin-top: 0.9em;
-
-      .network {
-        display: flex;
-        align-items: center;
-        margin-bottom: -0.2em;
-      }
-
-      .status {
-        @include fluid-font-size(1rem);
-        display: flex;
-      }
-
-      &.success {
-        .status {
-          color: #62c554;
-        }
-      }
-
-      &.loading {
-        .status {
-          color: #fb891f;
-        }
-      }
-
-      &.error {
-        .status {
-          color: #cc1b50;
-        }
-      }
-
-      .user-count {
-        @include fluid-font-size(1rem);
-        color: #8e8e8e;
-        display: flex;
-        align-items: center;
-
-        svg {
-          @include fluid-width-height(1rem, 1rem);
-          margin: 0 0.3em 0 1.2em;
-        }
-      }
-    }
-  }
-
-  .content-grid {
-    display: grid;
-    grid-template-columns: repeat(1, 1fr);
-    gap: 4em;
-    margin: 4em 0;
-
-    @media screen and (min-width: 36rem) {
-      grid-template-columns: repeat(2, 1fr);
-      grid-auto-rows: 1fr;
-      gap: 10em;
-      margin-top: 3em;
-    }
-
-    @media screen and (max-width: 80rem) {
-      > div {
-        background: rgba(#080808, 0.7);
-        border-radius: 0.5em;
-        padding: 0.8em 1.5em 1em;
-        margin: -0.8em -1.5em -1em;
-      }
-    }
-  }
-
-  .loading-text {
-    display: none;
-    text-align: center;
-
-    .loading-text-connected {
-      position: absolute;
-      top: 50%;
-      left: 75%;
-      transform: translate(-50%, 0);
-      opacity: 0;
-      transition: top 500ms, left 500ms, transform 500ms, opacity 500ms;
-    }
-
-    h3 {
-      @include fluid-font-size(3.125rem);
-      font-family: $font-family-jetbrains-mono;
-      line-height: 110%;
-      text-shadow: 0.017em 0.017em 0.034em #000;
-      color: #fff;
-    }
-
-    p {
-      @include fluid-font-size(1.25rem);
-      margin-top: 0.625em;
-      line-height: 122%;
-      color: #808080;
-    }
-  }
-
-  .socials {
-    position: absolute;
-    bottom: 5em;
-    left: 5em;
-    display: flex;
-    align-items: center;
-    gap: 1.5em;
-    margin: -0.5em;
-    opacity: 0;
-    transition: opacity 500ms;
-
-    a {
-      padding: 0.5em;
-      color: #fff;
-      transition: color 250ms;
-
-      &:hover {
-        color: #62c554;
-      }
-    }
-
-    :global(svg) {
-      @include fluid-width-height(2rem, 2rem);
-    }
-
-    @media screen and (max-width: 80rem) {
-      background: rgba(#080808, 0.7);
-      border-radius: 0.5em;
-      padding: 1.25em 1.5em;
-      margin: -1.25em -1.5em;
-    }
-  }
-
-  main.step-2 {
-    .art {
-      .gradient-1 {
-        opacity: 0;
-      }
-
-      .gradient-2 {
-        opacity: 1;
-      }
-    }
-
-    .loading-text {
-      display: block;
-    }
-  }
-
-  main.step-3 {
-    .art {
-      .gradient-1 {
-        opacity: 0;
-      }
-
-      .gradient-3 {
-        opacity: 1;
-      }
-    }
-
-    .loading-text {
-      display: block;
-
-      .loading-text-connected {
-        left: 50%;
-        opacity: 1;
-      }
-    }
-  }
-
-  main.step-4 {
-    .art-wrapper {
-      top: 50%;
-      left: -35em;
-      transform: translate(0, -50%);
-    }
-
-    .art-rotate {
-      transform: rotate(-151.13deg);
-    }
-
-    .art {
-      @include fluid-width-height(72rem, 72rem);
-
-      .gradient-1 {
-        opacity: 0;
-      }
-
-      .gradient-4 {
-        opacity: 1;
-      }
-    }
-
-    .loading-text {
-      display: block;
-
-      .loading-text-connected {
-        top: 0;
-        left: -25%;
-        transform: translate(-125%, 0);
-        opacity: 0;
-      }
-    }
-
-    .content {
-      opacity: 1;
-    }
-
-    .socials {
-      opacity: 1;
-    }
-  }
-
-  @keyframes fade-in {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @keyframes rotate {
-    0% {
-      transform: rotate(127.54deg);
-    }
-
-    20% {
-      transform: rotate(127.54deg);
-    }
-
-    30% {
-      transform: rotate(420deg);
-    }
-
-    50% {
-      transform: rotate(420deg);
-    }
-
-    60% {
-      transform: rotate(360deg);
-    }
-
-    90% {
-      transform: rotate(360deg);
-    }
-
-    100% {
-      transform: rotate(540deg);
-    }
-  }
-
-  @keyframes rotate-full {
-    0% {
-      transform: rotate(-52.46deg);
-    }
-
-    20% {
-      transform: rotate(-52.46deg);
-    }
-
-    30% {
-      transform: rotate(240deg);
-    }
-
-    50% {
-      transform: rotate(240deg);
-    }
-
-    60% {
-      transform: rotate(180deg);
-    }
-
-    90% {
-      transform: rotate(180deg);
-    }
-
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-</style>
diff --git a/ui/dashboard.js b/ui/dashboard.js
index 8208134..9afdf57 100644
--- a/ui/dashboard.js
+++ b/ui/dashboard.js
@@ -1,7 +1,7 @@
-import Dashboard from './components/dashboard/Dashboard.svelte'
+import App from "./apps/dashboard/App.svelte";
 
-const app = new Dashboard({
-  target: document.getElementById('app'),
-})
+const app = new App({
+  target: document.getElementById("app"),
+});
 
-export default app
+export default app;