threefoldtech · maayarosama · Dec 19, 2024 · Dec 22, 2024 · Dec 23, 2024 · Dec 23, 2024
diff --git a/.gitignore b/.gitignore
@@ -9,8 +9,6 @@ lerna-debug.log*
 
 node_modules
 .DS_Store
-dist
-dist-ssr
 coverage
 *.local
 

diff --git a/index.html b/index.html
@@ -2,9 +2,10 @@
 <html lang="">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
+    <link rel="icon" href="/favicon.png">
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>Rmb Executor</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/package.json b/package.json
@@ -13,8 +13,11 @@
   "dependencies": {
     "@mdi/font": "^7.4.47",
     "@threefold/rmb_direct_client": "^2.6.3",
+    "axios": "^1.7.9",
+    "highlight.js": "^11.11.0",
     "material-design-icons-iconfont": "^6.7.0",
     "pinia": "^2.3.0",
+    "url-join": "^5.0.0",
     "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-vuetify": "^2.0.4",
     "vue": "^3.5.13",
@@ -28,6 +31,7 @@
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "^0.7.0",
     "npm-run-all2": "^7.0.1",
+    "sass-embedded": "^1.83.0",
     "typescript": "~5.6.3",
     "vite": "^6.0.1",
     "vite-plugin-vue-devtools": "^7.6.5",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/src/App.vue b/src/App.vue
@@ -1,77 +1,25 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from "vue-router";
-import HelloWorld from "./components/HelloWorld.vue";
-import { onMounted } from "vue";
+import HomeView from "./views/HomeView.vue";
+import NavBar from "./components/navbar.vue";
+import { useProfile } from "./stores/profile";
+const profileStore = useProfile();
+import { useRmb } from "./stores/client";
+const rmbStore = useRmb();
 </script>
 
 <template>
-  <header>
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+  <v-app>
+    <NavBar />
+    <div class="pa-5" v-if="profileStore.profile && rmbStore.client">
+      <HomeView />
     </div>
-  </header>
+    <div v-else class="ma-6">
+      <v-alert type="info" variant="tonal" class="my-6">
+        <p>Please enter your Mnemonic.</p>
+      </v-alert>
+    </div>
+  </v-app>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-  max-height: 100vh;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-nav {
-  width: 100%;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-  color: var(--color-text);
-}
-
-nav a.router-link-exact-active:hover {
-  background-color: transparent;
-}
-
-nav a {
-  display: inline-block;
-  padding: 0 1rem;
-  border-left: 1px solid var(--color-border);
-}
-
-nav a:first-of-type {
-  border: 0;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-
-  nav {
-    text-align: left;
-    margin-left: -1rem;
-    font-size: 1rem;
-
-    padding: 1rem 0;
-    margin-top: 1rem;
-  }
-}
-</style>
+<style scoped></style>
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -1,9 +1,9 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
   font-weight: normal;
 }
 
@@ -21,15 +21,10 @@ a,
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 100%) {
   body {
-    display: flex;
     place-items: center;
   }
 
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
+
 }
diff --git a/src/client/client.ts b/src/client/client.ts
@@ -1,11 +1,14 @@
 import { Client } from "@threefold/rmb_direct_client";
-
-export async function connectClient(): Promise<Client | undefined> {
-  // create client
+// export async function connectClient(
+//   mnemonic: string
+// )
+export async function connectClient(
+  mnemonic: string
+): Promise<Client | undefined> {
   const client = new Client(
-    "wss://tfchain.dev.grid.tf/ws",
-    `wss://relay.dev.grid.tf/`,
-    "",
+    window.env.TFCHAIN_URL,
+    window.env.RELAY_URL,
+    mnemonic,
     "test_client",
     "sr25519",
     10
@@ -22,17 +25,30 @@ export async function connectClient(): Promise<Client | undefined> {
 
 export async function requestRmb(
   rmbClient: Client,
-  command: string,
-  payload: any,
-  destTwinIds: number[] = [17]
-): Promise<any> {
-  const requestID = await rmbClient.send(
-    command,
-    payload,
-    destTwinIds[0],
-    20 / 60,
-    5
-  );
-  const response = await rmbClient.read(requestID);
-  return response;
+  destTwinIds: number[],
+  cmd: string,
+  payload: string,
+  expiration = 10,
+  retries = 1
+) {
+  let result;
+  try {
+    const requestId = await rmbClient.send(
+      cmd,
+      payload,
+      destTwinIds[0],
+      expiration / 60,
+      retries
+    );
+    result = await rmbClient.read(requestId);
+    return result;
+  } catch (e) {
+    console.error(e);
+    return null;
+  }
+}
+
+export async function disconnectClient(rmbClient: Client | undefined) {
+  if (!rmbClient) return;
+  return rmbClient.disconnect();
 }
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue