Basic cleos support and some login fixes

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@greymass/eosio": "^0.5.4",
     "@quasar/extras": "^1.13.4",
+    "@telosnetwork/ual-cleos": "^0.1.0",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "highcharts": "^9.3.2",

src/boot/ual.ts

@@ -1,6 +1,8 @@
 import { boot } from 'quasar/wrappers';
-import { UAL } from 'universal-authenticator-library';
+import { Authenticator, UAL } from 'universal-authenticator-library';
 import { Anchor } from 'ual-anchor';
+import { CleosAuthenticator } from '@telosnetwork/ual-cleos';
+
 declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
     $ual: UAL;
@@ -20,8 +22,47 @@ export default boot(({ app }) => {
     ]
   };
 
-  const authenticators = [
-    new Anchor([mainChain], { appName: process.env.APP_NAME })
+  function loginHandler() {
+    // TODO: dialog prompt for what account they want to login with
+    return {
+      accountName: 'eosio',
+      permission: 'active'
+    };
+  }
+
+  function signHandler(trx: any) {
+    // TODO: dialog prompt with cleos command for this transaction
+    /*
+    cleos -u https://telos.greymass.com push transaction '{
+      "delay_sec": 0,
+      "max_cpu_usage_ms": 0,
+      "actions": []
+      }'
+     */
+    const trxJSON: string = JSON.stringify(
+      Object.assign(
+        {
+          delay_sec: 0,
+          max_cpu_usage_ms: 0
+        },
+        trx
+      ),
+      null,
+      4
+    );
+
+    alert(
+      `cleos -u https://${process.env.NETWORK_HOST} push transaction '${trxJSON}'`
+    );
+  }
+
+  const authenticators: Authenticator[] = [
+    new Anchor([mainChain], { appName: process.env.APP_NAME }),
+    new CleosAuthenticator([mainChain], {
+      appName: process.env.APP_NAME,
+      loginHandler,
+      signHandler
+    })
   ];
 
   const ual = new UAL([mainChain], 'ual', authenticators);

src/components/LoginHandler.vue

@@ -1,8 +1,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { mapGetters, mapMutations } from 'vuex';
+import { mapGetters, mapMutations, mapActions } from 'vuex';
 import LoginHandlerDropdown from './LoginHandlerDropdown.vue';
 import WalletModal from './WalletModal.vue';
+import { Authenticator } from 'universal-authenticator-library';
 
 export default defineComponent({
   name: 'LoginHandler',
@@ -17,6 +18,11 @@ export default defineComponent({
     const storedAccount = localStorage.getItem('account');
     if (storedAccount) {
       this.setAccountName(storedAccount);
+      const ualName = localStorage.getItem('autoLogin');
+      const ual: Authenticator = this.$ual
+        .getAuthenticators()
+        .availableAuthenticators.find((a) => a.getName() === ualName);
+      void this.login({ account: storedAccount, authenticator: ual });
     }
   },
   computed: {
@@ -25,6 +31,9 @@ export default defineComponent({
   methods: {
     ...mapMutations({
       setAccountName: 'account/setAccountName'
+    }),
+    ...mapActions({
+      login: 'account/login'
     })
   }
 });

src/components/LoginHandlerDropdown.vue

@@ -17,7 +17,8 @@ export default defineComponent({
   },
   methods: {
     ...mapMutations({
-      setAccountName: 'account/setAccountName'
+      setAccountName: 'account/setAccountName',
+      setUser: 'account/setUser'
     }),
     ...mapActions({ logout: 'account/logout' }),
     getAuthenticator() {
@@ -46,6 +47,7 @@ export default defineComponent({
     clearAccount(): void {
       localStorage.clear();
       this.setAccountName('');
+      this.setUser(null);
     }
   }
 });

src/components/SendDialog.vue

@@ -59,14 +59,10 @@ export default defineComponent({
         quantity: `${this.sendAmount} ${this.sendToken.symbol}`,
         memo: this.memo
       };
-      const authenticators =
-        this.$ual.getAuthenticators().availableAuthenticators;
-      const users = await authenticators[0].login();
       try {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         this.transactionId = (
           await this.signTransaction({
-            user: users[0],
             account: actionAccount,
             data,
             name: 'transfer'
@@ -129,7 +125,7 @@ q-dialog( @show='setDefaults' :persistent='true' @hide='resetForm' maximized)
         q-btn(size="20px" flat dense round icon="clear" v-close-popup)
       .col-xs-12.col-sm-8.col-md-7.col-lg-6.maxSize
         .row
-          q-card-section 
+          q-card-section
             img.send-img.q-pr-md( src="~assets/send.svg")
             .text-h4.q-pb-md.inline-block.color-grey-3 Send Tokens
 
@@ -150,7 +146,7 @@ q-dialog( @show='setDefaults' :persistent='true' @hide='resetForm' maximized)
                       q-icon.fas.fa-chevron-down.q-pr-lg(size="17px")
 
               .col-8.q-pl-md
-                .row.justify-between.q-pb-sm.q-gutter-x-sm 
+                .row.justify-between.q-pb-sm.q-gutter-x-sm
                   div AMOUNT
                   q-space
                   .color-grey-3.text-weight-bold {{sendToken.amount}} AVAILABLE
@@ -167,12 +163,12 @@ q-dialog( @show='setDefaults' :persistent='true' @hide='resetForm' maximized)
         .transaction-result(v-else)
           q-card-section(v-if='transactionId')
             .row
-              .col-12 
+              .col-12
                 .row You successfully sent {{ sendAmount }} {{ sendToken.symbol }} to {{ recievingAccount }}.
-                .row.ellipsis-overflow(@click='navToTransaction') Click to view transaction: {{ transactionId }}            
+                .row.ellipsis-overflow(@click='navToTransaction') Click to view transaction: {{ transactionId }}
           q-card-section(v-else)
             .row
-              .col-12 
+              .col-12
                 .row Transaction Failed: {{ transactionError }}
           q-btn.close-dialog( v-close-popup label='Close')
     CoinSelectorDialog(:updateSelectedCoin="updateSelectedCoin" v-model="openCoinDialog" :availableTokens="availableTokens")

src/store/account/actions.ts

@@ -1,4 +1,4 @@
-import { Authenticator, User } from 'universal-authenticator-library';
+import { Authenticator } from 'universal-authenticator-library';
 import { ActionTree } from 'vuex';
 import { StateInterface } from '../index';
 import { AccountStateInterface } from './state';
@@ -27,12 +27,17 @@ export const actions: ActionTree<AccountStateInterface, StateInterface> = {
     if (users.length) {
       const account = users[0];
       const accountName = await account.getAccountName();
+      commit('setUser', account);
       commit('setAccountName', accountName);
       localStorage.setItem(
         'autoLogin',
         (authenticator as Authenticator).constructor.name
       );
       localStorage.setItem('account', accountName);
+      localStorage.setItem(
+        'autoLogin',
+        (authenticator as Authenticator).getName()
+      );
       localStorage.setItem('returning', 'true');
       commit('setLoadingWallet');
     }
@@ -99,7 +104,7 @@ export const actions: ActionTree<AccountStateInterface, StateInterface> = {
     const rexActions = (await api.getActions(account, filter)).actions;
     commit('setRexActions', rexActions);
   },
-  async sendTransaction({}, { user, account, data, name }) {
+  async sendTransaction({}, { account, data, name }) {
     let transaction = null;
     const actions = [
       {
@@ -115,7 +120,7 @@ export const actions: ActionTree<AccountStateInterface, StateInterface> = {
       }
     ];
     try {
-      transaction = await (user as User).signTransaction(
+      transaction = await this.state.account.user.signTransaction(
         {
           actions
         },

src/store/account/mutations.ts

@@ -1,11 +1,15 @@
 import { MutationTree } from 'vuex';
 import { AccountStateInterface } from './state';
 import { AccountDetails, Action, Rexbal, ABI } from 'src/types';
+import { User } from 'universal-authenticator-library';
 
 export const mutations: MutationTree<AccountStateInterface> = {
   setLoadingWallet(state: AccountStateInterface, wallet: string) {
     state.loading = wallet;
   },
+  setUser(state: AccountStateInterface, user: User) {
+    state.user = user;
+  },
   setAccountName(state: AccountStateInterface, accountName: string) {
     state.accountName = accountName;
   },

src/store/account/state.ts

@@ -1,8 +1,10 @@
 import { Authorization, AccountDetails, Action, Rexbal, ABI } from 'src/types';
+import { User } from 'universal-authenticator-library';
 
 export interface AccountStateInterface {
   loading: unknown;
   accountName: string;
+  user: User;
   autoLogin: unknown;
   isAuthenticated: boolean;
   linkedAccounts: Array<unknown>;
@@ -25,6 +27,7 @@ export function state(): AccountStateInterface {
   return {
     loading: false,
     accountName: '',
+    user: null,
     autoLogin: null,
     isAuthenticated: false,
     linkedAccounts: [],

yarn.lock

@@ -1820,6 +1820,16 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@telosnetwork/ual-cleos@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@telosnetwork/ual-cleos/-/ual-cleos-0.1.0.tgz#fdb67793311c76506d9848490ce8f034eaae35fd"
+  integrity sha512-1vZWwlax+WcpEqV/o7BwzINB5yrtCH8jweP14ZDJ/CC1RbOXuDfxLyPfYySQk91kci1gcdy0e5LXGC65+qfMtw==
+  dependencies:
+    eosjs "^22.1.0"
+    text-encoding "^0.7.0"
+    typescript "^4.7.4"
+    universal-authenticator-library "0.3.0"
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
@@ -4681,6 +4691,16 @@ eosjs@^21.0.3:
     hash.js "1.1.7"
     pako "2.0.3"
 
+eosjs@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/eosjs/-/eosjs-22.1.0.tgz#7ac40e2f1f959fab70539c30ac8ae46c9038aa3c"
+  integrity sha512-Ka8KO7akC3RxNdSg/3dkGWuUWUQESTzSUzQljBdVP16UG548vmQoBqSGnZdnjlZyfcab8VOu2iEt+JjyfYc5+A==
+  dependencies:
+    bn.js "5.2.0"
+    elliptic "6.5.4"
+    hash.js "1.1.7"
+    pako "2.0.3"
+
 err-code@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
@@ -10774,6 +10794,11 @@ test-exclude@^6.0.0:
     glob "^7.1.4"
     minimatch "^3.0.4"
 
+text-encoding@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/text-encoding/-/text-encoding-0.7.0.tgz#f895e836e45990624086601798ea98e8f36ee643"
+  integrity sha512-oJQ3f1hrOnbRLOcwKz0Liq2IcrvDeZRHXhd9RgLrsT+DjWY/nty1Hi7v3dtkaEYbPYe0mUoOfzRrMwfXXwgPUA==
+
 text-segmentation@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/text-segmentation/-/text-segmentation-1.0.3.tgz#52a388159efffe746b24a63ba311b6ac9f2d7943"
@@ -11030,6 +11055,11 @@ typescript@4.5.5:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
   integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
 
+typescript@^4.7.4:
+  version "4.7.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
+  integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
+
 ual-anchor@1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ual-anchor/-/ual-anchor-1.1.5.tgz#3c7595667e0c9381617820acf49ad4a8720ded0b"