resolving conflicts

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.0.0",
+    "@telosnetwork/ual-cleos": "^0.1.0",
     "assert": "^2.0.0",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",

quasar.config.js

@@ -216,7 +216,7 @@ module.exports = configure(function (ctx) {
       directives: ["ClosePopup", "Ripple"],
 
       // Quasar plugins
-      plugins: ["Notify", "Loading", "BottomSheet"],
+      plugins: ["Notify", "Dialog", "Loading", "BottomSheet"],
     },
 
     // animations: 'all', // --- includes all animations

src/boot/api.js

@@ -16,17 +16,15 @@ const signTransaction = async function (actions) {
   });
   let transaction = null;
   try {
-    if (this.$type === "ual") {
-      transaction = await this.$ualUser.signTransaction(
-        {
-          actions,
-        },
-        {
-          blocksBehind: 3,
-          expireSeconds: 30,
-        }
-      );
-    }
+    transaction = await this.$ualUser.signTransaction(
+      {
+        actions,
+      },
+      {
+        blocksBehind: 3,
+        expireSeconds: 30,
+      }
+    );
   } catch (e) {
     throw e.cause.error.details[0].message.replace(
       /assertion failure with message: /g,
@@ -38,26 +36,19 @@ const signTransaction = async function (actions) {
 };
 
 const getTableRows = async function (options) {
-  if (this.$type === "ual") {
-    return this.$ualUser.rpc.get_table_rows({
-      json: true,
-      ...options,
-    });
-  } else {
+  try {
     return this.$defaultApi.rpc.get_table_rows({
       json: true,
       ...options,
     });
+  } catch (e) {
+    console.error(e);
   }
 };
 
 const getAccount = async function (account) {
   try {
-    if (this.$type === "ual") {
-      return this.$ualUser.rpc.get_account(account);
-    } else {
-      return this.$defaultApi.rpc.get_account(account);
-    }
+    return this.$defaultApi.rpc.get_account(account);
   } catch (e) {
     console.error(e);
   }

src/boot/layouts.js

@@ -1,12 +1,12 @@
 import { boot } from "quasar/wrappers";
-import LayoutMain from "../layouts/main.vue";
-import LayoutEmpty from "../layouts/empty.vue";
-import LayoutGuest from "../layouts/guest.vue";
+import AuthLayout from "../layouts/AuthLayout.vue";
+import EmptyLayout from "../layouts/EmptyLayout.vue";
+import GuestLayout from "../layouts/GuestLayout.vue";
 
 // "async" is optional;
 // more info on params: https://v2.quasar.dev/quasar-cli/boot-files
 export default boot(async ({ app }) => {
-  app.component("layout-main", LayoutMain);
-  app.component("layout-empty", LayoutEmpty);
-  app.component("layout-guest", LayoutGuest);
+  app.component("layout-main", AuthLayout);
+  app.component("layout-empty", EmptyLayout);
+  app.component("layout-guest", GuestLayout);
 });

src/boot/ual.js

@@ -1,6 +1,8 @@
 import { boot } from "quasar/wrappers";
 import { UAL } from "universal-authenticator-library";
 import { Anchor } from "ual-anchor";
+import { CleosAuthenticator } from "@telosnetwork/ual-cleos";
+import { copyToClipboard } from "quasar";
 
 // "async" is optional;
 // more info on params: https://v2.quasar.dev/quasar-cli/boot-files
@@ -17,8 +19,130 @@ export default boot(async ({ app, store }) => {
     ],
   };
 
+  async function loginHandler() {
+    let accountName = "eosio";
+    let permission = "active";
+    if (localStorage.getItem("autoLogin") === "cleos") {
+      accountName = localStorage.getItem("account");
+    } else {
+      await new Promise((resolve) => {
+        app.config.globalProperties.$q
+          .dialog({
+            color: "primary",
+            title: "Connect to cleos",
+            message: "Account name",
+            prompt: {
+              model: "",
+              type: "text",
+            },
+            cancel: true,
+            persistent: true,
+          })
+          .onOk((data) => {
+            accountName = data != "" ? data : "eosio";
+          })
+          .onCancel(() => {
+            throw "Cancelled!";
+          })
+          .onDismiss(() => {
+            resolve(true);
+          });
+      });
+      await new Promise((resolve) => {
+        app.config.globalProperties.$q
+          .dialog({
+            color: "primary",
+            title: "Connect to cleos",
+            message: "Account permission",
+            options: {
+              type: "radio",
+              model: [],
+              items: [
+                { label: "Active", value: "active" },
+                { label: "Owner", value: "owner" },
+              ],
+            },
+            cancel: true,
+            persistent: true,
+          })
+          .onOk((data) => {
+            permission = data;
+          })
+          .onCancel(() => {
+            throw "Cancelled!";
+          })
+          .onDismiss(() => {
+            resolve(true);
+          });
+      });
+    }
+    return {
+      accountName,
+      permission,
+    };
+  }
+
+  async function signHandler(trx) {
+    const trxJSON = JSON.stringify(
+      Object.assign(
+        {
+          delay_sec: 0,
+          max_cpu_usage_ms: 0,
+        },
+        trx
+      ),
+      null,
+      4
+    );
+    await new Promise((resolve) => {
+      app.config.globalProperties.$q
+        .dialog({
+          color: "primary",
+          message: `<pre>cleos -u https://${process.env.NETWORK_HOST} push transaction '${trxJSON}'</pre>`,
+          html: true,
+          cancel: true,
+          fullWidth: true,
+          ok: {
+            label: "Copy",
+          },
+        })
+        .onOk(() => {
+          copyToClipboard(
+            `cleos -u https://${process.env.NETWORK_HOST} push transaction '${trxJSON}`
+          )
+            .then(() => {
+              app.config.globalProperties.$q.notify({
+                color: "green-4",
+                textColor: "white",
+                message: "Copied to clipboard",
+                timeout: 1000,
+              });
+            })
+            .catch(() => {
+              app.config.globalProperties.$q.notify({
+                color: "red-8",
+                textColor: "white",
+                message: "Could not copy",
+                timeout: 1000,
+              });
+            });
+        })
+        .onCancel(() => {
+          throw "Cancelled!";
+        })
+        .onDismiss(() => {
+          resolve(true);
+        });
+    });
+  }
+
   const authenticators = [
     new Anchor([mainChain], { appName: process.env.APP_NAME }),
+    new CleosAuthenticator([mainChain], {
+      appName: process.env.APP_NAME,
+      loginHandler,
+      signHandler,
+    }),
   ];
 
   const ual = new UAL([mainChain], "tet-ual", authenticators);

src/components/action-bar.vue → src/components/ActionBar.vue

@@ -1,10 +1,10 @@
 <script>
-import Btn from "./btn";
+import Btn from "./CustomButton";
 import { mapActions, mapMutations, mapGetters } from "vuex";
 import { scroll } from "quasar";
 
 export default {
-  name: "action-bar",
+  name: "ActionBar",
   components: { Btn },
   props: {
     treasuriesOptions: {},

src/components/confirm-dialog.vue → src/components/ConfirmDialog.vue

@@ -23,7 +23,7 @@ q-dialog(
 
 <script>
 export default {
-  name: 'confirm-dialog',
+  name: 'ConfirmDialog',
   props: {
     show: { type: Boolean, required: true }
   },

src/components/btn.vue → src/components/CustomButton.vue

@@ -1,7 +1,6 @@
 <script>
 export default {
-  // eslint-disable-next-line vue/multi-word-component-names
-  name: "btn",
+  name: "CustomButton",
   props: {
     primary: Boolean,
     labelText: String,

src/components/welcome-card.vue → src/components/WelcomeCard.vue

@@ -1,9 +1,9 @@
 <script>
 import { mapGetters } from "vuex";
-import Btn from "./btn";
+import Btn from "./CustomButton";
 
 export default {
-  name: "welcome-card",
+  name: "WelcomeCard",
   components: { Btn },
   data() {
     return {

src/components/layout/app-header.vue → src/components/layout/AppHeader.vue

@@ -1,11 +1,11 @@
 <script>
 import { mapActions, mapMutations, mapGetters } from "vuex";
-import HeaderMenu from "~/components/layout/header-menu";
-import RightMenuAuthenticated from "~/components/layout/right-menu-authenticated";
-import RightMenuGuest from "~/components/layout/right-menu-guest";
+import HeaderMenu from "~/components/layout/HeaderMenu";
+import RightMenuAuthenticated from "~/components/layout/RightMenuAuthenticated";
+import RightMenuGuest from "~/components/layout/RightMenuGuest";
 
 export default {
-  name: "app-header",
+  name: "AppHeader",
   components: {
     HeaderMenu,
     RightMenuAuthenticated,

src/components/layout/header-menu.vue → src/components/layout/HeaderMenu.vue

@@ -2,7 +2,7 @@
 import { mapGetters } from "vuex";
 
 export default {
-  name: "header-menu",
+  name: "HeaderMenu",
   computed: {
     ...mapGetters("accounts", ["isAuthenticated"]),
   },

src/components/layout/left-menu.vue → src/components/layout/LeftMenu.vue

@@ -1,6 +1,6 @@
 <script>
 export default {
-  name: "left-menu-authenticated",
+  name: "LeftMenu",
   methods: {
     closeMenu: function () {
       this.$emit("close");

src/components/layout/login.vue → src/components/layout/LoginLayout.vue

@@ -2,8 +2,7 @@
 import { mapActions, mapGetters } from "vuex";
 
 export default {
-  // eslint-disable-next-line vue/multi-word-component-names
-  name: "login",
+  name: "LoginLayout",
   data() {
     return {
       show: false,

src/components/layout/right-menu-authenticated.vue → src/components/layout/RightMenuAuthenticated.vue

@@ -3,7 +3,7 @@ import { mapActions, mapGetters } from "vuex";
 import ProfileAvatar from "src/pages/profiles/ProfileAvatar.vue";
 
 export default {
-  name: "right-menu-authenticated",
+  name: "RightMenuAuthenticated",
   components: {
     ProfileAvatar,
   },

src/components/layout/right-menu-guest.vue → src/components/layout/RightMenuGuest.vue

@@ -1,9 +1,9 @@
 <script>
-import Btn from "../btn";
+import Btn from "../CustomButton";
 
 import { mapActions } from "vuex";
 export default {
-  name: "right-menu-guest",
+  name: "RightMenuGuest",
   components: { Btn },
   props: {
     landingPage: Boolean,

src/components/layout/right-menu-notifications.vue → src/components/layout/RightMenuNotifications.vue

@@ -2,7 +2,7 @@
 import { mapGetters, mapMutations } from 'vuex'
 
 export default {
-  name: 'right-menu-notifications',
+  name: 'RightMenuNotifications',
   computed: {
     ...mapGetters('notifications', ['notifications'])
   },

src/layouts/main.vue → src/layouts/AuthLayout.vue

@@ -1,11 +1,11 @@
 <script>
 import { mapActions, mapGetters, mapMutations } from "vuex";
-import AppHeader from "~/components/layout/app-header";
-import LeftMenu from "~/components/layout/left-menu";
-import RightMenuNotifications from "~/components/layout/right-menu-notifications";
+import AppHeader from "~/components/layout/AppHeader";
+import LeftMenu from "~/components/layout/LeftMenu";
+import RightMenuNotifications from "~/components/layout/RightMenuNotifications";
 
 export default {
-  name: "layout-auth",
+  name: "AuthLayout",
   components: {
     AppHeader,
     LeftMenu,

src/layouts/empty.vue → src/layouts/EmptyLayout.vue

@@ -1,7 +1,7 @@
 <script>
 import { mapActions, mapGetters, mapMutations } from "vuex";
-import RightMenuAuthenticated from "~/components/layout/right-menu-authenticated";
-import RightMenuGuest from "~/components/layout/right-menu-guest";
+import RightMenuAuthenticated from "~/components/layout/RightMenuAuthenticated";
+import RightMenuGuest from "~/components/layout/RightMenuGuest";
 
 export default {
   components: {
@@ -20,7 +20,7 @@ export default {
     ]),
     ...mapActions("accounts", ["autoLogin"]),
   },
-  name: "layout-empty",
+  name: "EmptyLayout",
 };
 </script>
 

src/layouts/guest.vue → src/layouts/GuestLayout.vue

@@ -1,6 +1,6 @@
 <script>
 export default {
-  name: "layout-guest",
+  name: "GuestLayout",
   computed: {
     title() {
       return this.$t(this.$route.meta.title || "common.defaultTitle");