Telos Cloud Login | simpler flow

env.js

@@ -11,7 +11,9 @@ const sharedEnv = {
     PROJECT_ID: '2392473d6d98499c7138cd2d705a791f',
     METAKEEP_APP_ID_NATIVE: 'ad5e05fb-280a-41ae-b186-5a2654567b92',
     METAKEEP_APP_ID_EVM: 'd190c88f-1bb5-4e16-bc48-96dbf33b77e0',
-    GOOGLE_APP_ID: '56634824599-ff3iu788c32c3s7ec65cs4bieop9gpgv.apps.googleusercontent.com',
+    // GOOGLE_APP_ID: '56634824599-ff3iu788c32c3s7ec65cs4bieop9gpgv.apps.googleusercontent.com',
+    GOOGLE_APP_ID: '639241197544-kcubenhmti6u7ef3uj360n2lcl5cmn8c.apps.googleusercontent.com',
+    // FIXME: This is a auxillary key for the app, it should be replaced for the one commented
 };
 
 const TESTNET = {

src/antelope/stores/account.ts

@@ -38,7 +38,7 @@ import {
 } from 'src/antelope';
 
 
-export interface LoginNativeActionData {
+export interface loginZeroActionData {
     authenticator: Authenticator,
     network: string,
 }
@@ -110,8 +110,8 @@ export const useAccountStore = defineStore(store_name, {
     },
     actions: {
         trace: createTraceFunction(store_name),
-        async loginNative({ authenticator, network }: LoginNativeActionData): Promise<boolean> {
-            this.trace('loginNative', authenticator, network);
+        async loginZero({ authenticator, network }: loginZeroActionData): Promise<boolean> {
+            this.trace('loginZero', authenticator, network);
             let success = false;
             try {
                 await authenticator.init();
@@ -254,7 +254,7 @@ export const useAccountStore = defineStore(store_name, {
                             console.error(authenticators.map(a => a.getName()).join(', '));
                             throw new Error('antelope.account.error_auto_login');
                         }
-                        this.loginNative({
+                        this.loginZero({
                             authenticator,
                             network,
                         });

src/antelope/wallets/ual/MetakeepUAL.ts

@@ -205,11 +205,9 @@ export class MetakeepAuthenticator extends Authenticator {
                     public_key: publicKey,
                 });
                 const accountExists = response?.data?.account_names.length>0;
-                console.log('accountExists: ', accountExists, 'pero la descartamos');
                 if (accountExists) {
                     accountName = response.data.account_names[0];
                 } else {
-                    console.log('vamos a crear la cuenta');
                     accountName = await this.createAccount(publicKey);
                 }
 
@@ -326,6 +324,16 @@ class MetakeepUser extends User {
         this.reasonCallback = callback;
     }
 
+    handleCatchError(error: any): Error {
+        if (
+            (error as unknown as {status:string}).status === 'USER_REQUEST_DENIED'
+        ) {
+            return new Error('antelope.evm.error_transaction_canceled');
+        } else {
+            return new Error('antelope.evm.error_send_transaction');
+        }
+    }
+
     /**
     * @param transaction    The transaction to be signed (a object that matches the RpcAPI structure).
     */
@@ -423,13 +431,7 @@ class MetakeepUser extends User {
             return Promise.resolve(finalResponse);
 
         } catch (e: any) {
-            if (e.status) {
-                throw new Error(e.status);
-            } else if (e.message) {
-                throw new Error(e.message);
-            } else {
-                throw new Error('Unknown error');
-            }
+            throw this.handleCatchError(e);
         }
     }
 

src/boot/ual.js

@@ -50,7 +50,7 @@ export default boot(async ({ app, store }) => {
             }).catch((e) => {
                 throw e;
             });
-            if (store.state.account.justViewer) {
+            if (store.state.account.justViewer || localStorage.getItem('justViewer')) {
                 permission = 'active';
             } else {
                 await new Promise((resolve) => {

src/i18n/en-us/index.js

@@ -31,6 +31,7 @@ export default {
         view_any_account: 'View Any Account',
         connect_with_wallet: 'Connect Your Wallet',
         telos_cloud_wallet: 'Telos Cloud Wallet',
+        telos_cloud_login: 'Telos Cloud Login',
         sign_with_google: 'Sign with Google',
         sign_with_facebook: 'Sign with Facebook',
         sign_with_x: 'Sign with X',

src/pages/home/HomePage.vue

@@ -1,36 +1,51 @@
 <script setup lang="ts">
 import { computed,  onMounted,  ref } from 'vue';
 
-import NativeLoginButton from 'pages/home/NativeLoginButton.vue';
-import EVMLoginButtons from 'pages/home/EVMLoginButtons.vue';
+import LoginButtons from 'pages/home/LoginButtons.vue';
 import { Menu } from 'src/pages/home/MenuType';
 import { LocationQueryValue, useRoute, useRouter } from 'vue-router';
+import { CURRENT_CONTEXT, useChainStore } from 'src/antelope';
 
-type TabReference = 'evm' | 'zero';
+type TabReference = 'evm' | 'zero' | 'unset';
 
 const route = useRoute();
 const router = useRouter();
+const chainStore = useChainStore();
 
-const tab = ref<TabReference>('evm');
-const currentMenu = ref<Menu>(Menu.MAIN);
-
-const showLoginBtns = computed((): boolean => currentMenu.value === Menu.MAIN);
+const tab = ref<TabReference>('unset');
 const walletOption = computed(() => route.query.login as LocationQueryValue);
 
-function goBack(): void {
-    currentMenu.value = Menu.MAIN;
+function setChainForTab(tab: TabReference): void {
+    // set chain
+    if (!process.env.CHAIN_NAME) {
+        console.error('No chain name specified in environment config; the application will not run correctly');
+    } else {
+        const chainNetworkNames: Record<string, string> = (tab === 'zero') ? {
+            'telos': 'telos',
+            'telos-testnet': 'telos-testnet',
+        } : {
+            'telos': 'telos-evm',
+            'telos-testnet': 'telos-evm-testnet',
+        };
+        const network: string = chainNetworkNames[process.env.CHAIN_NAME];
+        chainStore.setChain(CURRENT_CONTEXT, network);
+    }
 }
 
 function setTab(login: TabReference): void {
     if (route.path !== login){
         router.replace({ path: route.path, query:{ login } });
         tab.value = login;
+        setChainForTab(login);
     }
 }
 
 onMounted(() => {
     if (walletOption.value){
-        tab.value = walletOption.value as TabReference;
+        setTab(walletOption.value as TabReference);
+    } else {
+        // set evm as default
+        setTab('evm');
     }
 });
 
@@ -47,7 +62,7 @@ onMounted(() => {
                     class="c-home__logo"
                 ></div>
                 <div class="c-home__button-container">
-                    <div v-if="showLoginBtns" class="c-home__network-toggle-container" role="tablist">
+                    <div class="c-home__network-toggle-container" role="tablist">
                         <button
                             :class="{
                                 'c-home__network-toggle-button': true,
@@ -75,28 +90,12 @@ onMounted(() => {
                             {{ $t('global.native') }}
                         </button>
                     </div>
-                    <div v-else>
-                        <q-btn
-                            class="c-home__menu-back-button"
-                            flat
-                            dense
-                            icon="arrow_back_ios"
-                            @click="goBack"
-                        >
 
-                            {{ $t('global.back') }}
-                        </q-btn>
-                    </div>
-
-                    <NativeLoginButton
-                        v-if="tab === 'zero'"
-                        v-model="currentMenu"
+                    <LoginButtons
+                        :chain="tab"
                     />
 
-                    <EVMLoginButtons
-                        v-else-if="tab === 'evm'"
-                        v-model="currentMenu"
-                    />
+
                 </div>
                 <div class="c-home__external-link">
                     <a