Refactor the single page for clarity

.vscode/settings.json

@@ -4,5 +4,13 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": ["source.fixAll.eslint"],
-  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"]
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "vue"
+  ],
+  "[javascript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  }
 }

package.json

@@ -1,18 +1,23 @@
 {
   "name": "channels",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "description": "Dotsama HRMP Channel and token App",
   "productName": "Dotsama HRMP Channel and token App",
   "author": "Gregory Luneau <[email protected]>",
   "private": true,
+  "license": "MIT",
   "scripts": {
+    "dev": "quasar dev",
     "build": "quasar build",
     "deploy": "vercel",
+    "fetch": "node src/scripts/fetchEndpoints.js",
     "lint": "eslint --ext .js,.vue ./",
     "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
     "test": "echo \"No test specified\" && exit 0"
   },
   "dependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-typescript": "^7.24.7",
     "@equilab/definitions": "^1.4.11",
     "@moonbeam-network/xcm-config": "^0.0.25",
     "@moonbeam-network/xcm-sdk": "^0.0.25",
@@ -59,6 +64,5 @@
     "node": ">= 12.22.1",
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
-  },
-  "license": "MIT"
+  }
 }

src/components/AppHeader.vue

@@ -0,0 +1,82 @@
+<template>
+  <q-header elevated style="background-color: #e6007a">
+    <q-toolbar>
+      <q-btn
+        flat
+        dense
+        round
+        icon="menu"
+        aria-label="Menu"
+        @click="$emit('toggleLeftDrawer')"
+      />
+      <div class="q-ml-md">
+        <q-select
+          v-model="selectedChain"
+          :options="chainOptions"
+          label="Chain"
+          dense
+          dark
+          @update:model-value="$emit('updateChain', $event)"
+        />
+      </div>
+      <q-toolbar-title> Channels </q-toolbar-title>
+      <div>
+        <q-toggle
+          v-model="localMode"
+          checked-icon="dark_mode"
+          color="#40E0D0"
+          unchecked-icon="light_mode"
+          @update:model-value="$emit('updateMode', $event)"
+        />
+        About
+        <q-btn
+          flat
+          @click="$emit('toggleRightDrawer')"
+          round
+          dense
+          icon="help"
+        />
+        v{{ version }}
+      </div>
+    </q-toolbar>
+  </q-header>
+</template>
+
+<script>
+import { ref, watch } from "vue";
+import { version } from "../../package.json";
+
+export default {
+  name: "AppHeader",
+  props: {
+    chain: Object,
+    chainOptions: Array,
+    mode: Boolean,
+  },
+  emits: ["toggleLeftDrawer", "toggleRightDrawer", "updateChain", "updateMode"],
+  setup(props) {
+    const selectedChain = ref(props.chain);
+    const localMode = ref(props.mode);
+
+    watch(
+      () => props.chain,
+      (newChain) => {
+        selectedChain.value = newChain;
+      }
+    );
+
+    watch(
+      () => props.mode,
+      (newMode) => {
+        localMode.value = newMode;
+      }
+    );
+
+    return {
+      selectedChain,
+      localMode,
+      version,
+    };
+  },
+};
+</script>

src/components/LeftDrawer.vue

@@ -0,0 +1,77 @@
+<template>
+  <q-drawer v-model="isOpen" overlay side="left" bordered class="">
+    <div class="row text-h5 justify-center">HRMP Channel List</div>
+    <q-list dense bordered>
+      <q-item v-for="item in itemsArray" :key="item.label">
+        <q-item-section
+          :class="item.type === 'request' ? `text-red` : `text-grey-8`"
+        >
+          <div class="row items-center">
+            <div class="col column reverse">
+              <q-btn
+                :color="item.type === 'request' ? `negative` : `primary`"
+                :label="item.nameSender"
+                size="sm"
+                push
+                @click="$emit('getCurrencies', chain, item.sender)"
+              />
+            </div>
+            <div class="col">
+              <q-linear-progress
+                class=""
+                indeterminate
+                :color="item.type === 'request' ? `negative` : `primary`"
+              />
+            </div>
+            <div class="col column reverse">
+              <q-btn
+                :color="item.type === 'request' ? `negative` : `primary`"
+                :label="item.nameRecipient"
+                size="sm"
+                push
+                @click="$emit('getCurrencies', chain, item.recipient)"
+              />
+            </div>
+          </div>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-drawer>
+</template>
+
+<script>
+import { computed } from "vue";
+
+export default {
+  name: "LeftDrawer",
+  props: {
+    modelValue: Boolean,
+    items: {
+      type: [Array, Object],
+      default: () => [],
+    },
+    chain: String,
+  },
+  emits: ["update:modelValue", "getCurrencies"],
+  setup(props, { emit }) {
+    const isOpen = computed({
+      get: () => props.modelValue,
+      set: (value) => emit("update:modelValue", value),
+    });
+
+    const itemsArray = computed(() => {
+      if (Array.isArray(props.items)) {
+        return props.items;
+      } else if (typeof props.items === "object" && props.items !== null) {
+        return Object.values(props.items);
+      }
+      return [];
+    });
+
+    return {
+      isOpen,
+      itemsArray,
+    };
+  },
+};
+</script>

src/components/NetworkGraph.vue

@@ -0,0 +1,102 @@
+<template>
+  <v-network-graph
+    :nodes="nodes"
+    :edges="edges"
+    :configs="configs"
+    :zoom-level="zoomLevel"
+    :layers="layers"
+    :event-handlers="eventHandlers"
+  >
+    <defs>
+      <clipPath id="faceCircle" clipPathUnits="objectBoundingBox">
+        <circle cx="0.5" cy="0.5" r="0.5" />
+      </clipPath>
+    </defs>
+
+    <template #override-node="{ nodeId, scale, config, ...slotProps }">
+      <circle
+        class="face-circle"
+        :r="config.radius * scale"
+        fill="#ffffff"
+        v-bind="slotProps"
+      />
+      <image
+        class="face-picture"
+        :x="-config.radius * scale * 2"
+        :y="-config.radius * scale * 2"
+        :width="config.radius * scale * 4"
+        :height="config.radius * scale * 4"
+        :xlink:href="getNodeImage(nodes[nodeId].number)"
+        clip-path="url(#faceCircle)"
+      />
+      <circle
+        class="face-circle"
+        :r="config.radius * scale * 2"
+        fill="none"
+        :stroke="nodes[nodeId].type === 'request' ? '#e6007a' : '#40E0D0'"
+        :stroke-width="1 * scale * 2"
+        v-bind="slotProps"
+      />
+    </template>
+  </v-network-graph>
+</template>
+
+<script>
+export default {
+  name: "NetworkGraph",
+  props: {
+    nodes: {
+      type: Object,
+      required: true,
+    },
+    edges: {
+      type: Object,
+      required: true,
+    },
+    configs: {
+      type: Object,
+      required: true,
+    },
+    zoomLevel: {
+      type: Number,
+      default: 1,
+    },
+    layers: {
+      type: Object,
+      default: () => ({}),
+    },
+    eventHandlers: {
+      type: Object,
+      default: () => ({}),
+    },
+    chain: {
+      type: String,
+      required: true,
+    },
+    endpoints: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    getNodeImage(paraId) {
+      const endpoint = this.endpoints.find((e) => e.paraId === paraId);
+      if (endpoint && endpoint.ui && endpoint.ui.logo) {
+        return endpoint.ui.logo;
+      }
+      return `https://cdn.pixabay.com/photo/2015/08/27/10/14/icon-909830_1280.png`;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.face-circle,
+.face-picture {
+  transition: all 0.1s linear;
+}
+
+.face-picture {
+  pointer-events: none;
+}
+</style>