From e63b52033cc97855f7a13d4f80fafef55bffee31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viterbo=20Rodr=C3=ADguez?= <viter.rod@gmail.com>
Date: Wed, 15 May 2024 20:11:11 -0300
Subject: [PATCH 1/2] add network selector to home page

---
 src/antelope/chains/evm/telos-evm/index.ts    |   2 +-
 .../chains/native/telos-testnet/index.ts      |   7 +-
 src/antelope/chains/native/telos/index.ts     |   7 +-
 src/antelope/stores/account.ts                |  34 +-
 src/i18n/en-us/index.js                       |   1 +
 src/pages/home/HomePage.vue                   | 208 ++++---
 src/pages/home/HomePageOld.vue                | 251 +++++++++
 src/pages/home/LoginButtons.vue               | 508 ++++++++++++++++++
 8 files changed, 916 insertions(+), 102 deletions(-)
 create mode 100644 src/pages/home/HomePageOld.vue
 create mode 100644 src/pages/home/LoginButtons.vue

diff --git a/src/antelope/chains/evm/telos-evm/index.ts b/src/antelope/chains/evm/telos-evm/index.ts
index 9669b3403..3a4099350 100644
--- a/src/antelope/chains/evm/telos-evm/index.ts
+++ b/src/antelope/chains/evm/telos-evm/index.ts
@@ -9,7 +9,7 @@ import { getFiatPriceFromIndexer } from 'src/api/price';
 const LOGO = 'https://raw.githubusercontent.com/telosnetwork/token-list/main/logos/telos.png';
 const CHAIN_ID = '40';
 export const NETWORK = 'telos-evm';
-const DISPLAY = 'Telos EVM Mainnet';
+const DISPLAY = 'Telos EVM';
 const TOKEN = new TokenClass({
     name: 'Telos',
     symbol: 'TLOS',
diff --git a/src/antelope/chains/native/telos-testnet/index.ts b/src/antelope/chains/native/telos-testnet/index.ts
index ae520eaa5..ac959a54a 100644
--- a/src/antelope/chains/native/telos-testnet/index.ts
+++ b/src/antelope/chains/native/telos-testnet/index.ts
@@ -3,10 +3,11 @@ import { RpcEndpoint } from 'universal-authenticator-library';
 import { api } from 'src/api';
 import { TokenClass, TokenSourceInfo, PriceChartData, Theme } from 'src/antelope/types';
 
+const LOGO = 'https://raw.githubusercontent.com/telosnetwork/token-list/main/logos/telos.png';
 const CHAIN_ID =
   '1eaa0824707c8c16bd25145493bf062aecddfeb56c736f6ba6397f3195f33c9f';
 const NETWORK = 'telos-testnet';
-const DISPLAY = 'Telos';
+const DISPLAY = 'Telos Zero Testnet';
 const TOKEN = new TokenClass({
     symbol: 'TLOS',
     precision: 4,
@@ -95,11 +96,11 @@ export default class TelosTestnet extends NativeChainSettings {
     }
 
     getLargeLogoPath(): string {
-        return 'chains/telos/telos_logo.svg';
+        return LOGO;
     }
 
     getSmallLogoPath(): string {
-        return 'chains/telos/tlos.png';
+        return LOGO;
     }
 
     getMapDisplay(): boolean {
diff --git a/src/antelope/chains/native/telos/index.ts b/src/antelope/chains/native/telos/index.ts
index 20be122dd..7e08c15ab 100644
--- a/src/antelope/chains/native/telos/index.ts
+++ b/src/antelope/chains/native/telos/index.ts
@@ -3,10 +3,11 @@ import { RpcEndpoint } from 'universal-authenticator-library';
 import { api } from 'src/api';
 import { TokenClass, TokenSourceInfo, PriceChartData, Theme } from 'src/antelope/types';
 
+const LOGO = 'https://raw.githubusercontent.com/telosnetwork/token-list/main/logos/telos.png';
 const CHAIN_ID =
   '4667b205c6838ef70ff7988f6e8257e8be0e1284a2f59699054a018f743b1d11';
 const NETWORK = 'telos';
-const DISPLAY = 'Telos';
+const DISPLAY = 'Telos Zero';
 const TOKEN = new TokenClass({
     symbol: 'TLOS',
     precision: 4,
@@ -98,11 +99,11 @@ export default class Telos extends NativeChainSettings {
     }
 
     getLargeLogoPath(): string {
-        return 'chains/telos/telos_logo.svg';
+        return LOGO;
     }
 
     getSmallLogoPath(): string {
-        return 'chains/telos/tlos.png';
+        return LOGO;
     }
 
     getMapDisplay(): boolean {
diff --git a/src/antelope/stores/account.ts b/src/antelope/stores/account.ts
index 5a52645fa..0218e1e05 100644
--- a/src/antelope/stores/account.ts
+++ b/src/antelope/stores/account.ts
@@ -20,7 +20,6 @@ import { initFuelUserWrapper } from 'src/api/fuel';
 import { createTraceFunction, errorToString } from 'src/antelope/config';
 import NativeChainSettings from 'src/antelope/chains/NativeChainSettings';
 import {
-    Action,
     Label,
     NativeTransactionResponse,
     addressString,
@@ -29,7 +28,6 @@ import { EVMAuthenticator } from 'src/antelope/wallets';
 import { truncateAddress } from 'src/antelope/stores/utils/text-utils';
 import { toRaw } from 'vue';
 import { getAddress } from 'ethers/lib/utils';
-import { OreIdAuthenticator } from 'ual-oreid';
 
 // dependencies --
 import {
@@ -40,7 +38,7 @@ import {
 } from 'src/antelope';
 
 
-export interface LoginNativeActionData {
+export interface loginZeroActionData {
     authenticator: Authenticator,
     network: string,
 }
@@ -113,15 +111,17 @@ 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 {
+                this.trace('loginZero', 'authenticator.init()...');
                 await authenticator.init();
+                this.trace('loginZero', 'authenticator.login()...');
                 const ualUsers = await authenticator.login();
                 if (ualUsers?.length) {
-                    // OreId has it's own authorization service, only init fuel service for other ual users
-                    const ualUser = ualUsers[0] instanceof OreIdAuthenticator ? ualUsers[0] : await initFuelUserWrapper(ualUsers[0]);
+                    this.trace('loginZero', 'authenticator.login() OK! ualUsers:', ualUsers);
+                    const ualUser = await initFuelUserWrapper(ualUsers[0]);
                     const permission = (ualUser as unknown as { requestPermission: string })
                         .requestPermission ?? 'active';
                     const account = await ualUser.getAccountName();
@@ -246,8 +246,10 @@ export const useAccountStore = defineStore(store_name, {
                 const rawAddress = localStorage.getItem('rawAddress');
                 const isNative = localStorage.getItem('isNative') === 'true';
                 const autoLogin = localStorage.getItem('autoLogin');
-                this.trace('autoLogin', account, isNative, autoLogin);
+                this.trace('autoLogin', account, network, autoLogin, isNative, this.__accounts[label]);
                 if (account && network && autoLogin && !this.__accounts[label]) {
+                    // Ensure we are working with the correct network
+                    useChainStore().setChain(label, network);
                     if (isNative) {
                         const authenticators = getAntelope().config.authenticatorsGetter();
                         const authenticator = authenticators.find(
@@ -257,7 +259,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,
                         });
@@ -274,6 +276,8 @@ export const useAccountStore = defineStore(store_name, {
                             autoLogAccount,
                         });
                     }
+                } else {
+                    this.trace('autoLogin', 'canceled!', account, network, autoLogin, !this.__accounts[label]);
                 }
             } catch (error) {
                 console.error('Error: ', errorToString(error));
@@ -326,7 +330,6 @@ export const useAccountStore = defineStore(store_name, {
             this.trace('sendAction', account, data, name, actor, permission);
             try {
                 useFeedbackStore().setLoading('account.sendAction');
-                console.error('Account.sendAction() not implemented', account, data, name, actor, permission);
                 return Promise.resolve({ hash: '0x0' } as NativeTransactionResponse);
             } catch (error) {
                 console.error('Error: ', errorToString(error));
@@ -336,16 +339,6 @@ export const useAccountStore = defineStore(store_name, {
             }
         },
 
-        async sendTransaction(actions: Action[]) {
-            this.trace('sendTransaction', actions);
-            try {
-                useFeedbackStore().setLoading('account.sendTransaction');
-                console.error('Account.sendTransaction() not implemented', actions);
-            } catch (error) {
-                console.error('Error: ', errorToString(error));
-            }
-        },
-
         async fetchAccountDataFor(label: string, account: AccountModel) {
             this.trace('fetchAccountDataFor', account);
             try {
@@ -395,4 +388,3 @@ export const useAccountStore = defineStore(store_name, {
 const accountInitialState: AccountState = {
     __accounts: {},
 };
-
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index bb090d901..ffdfcb2e6 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -128,6 +128,7 @@ export default {
         table_controls_change_rows_per_page_label: 'Change rows per page to {num}',
     },
     global: {
+        network: 'Network',
         address: 'Address',
         allowance: 'Allowance',
         allowed: 'Allowed',
diff --git a/src/pages/home/HomePage.vue b/src/pages/home/HomePage.vue
index 74ae1528f..98b5b085f 100644
--- a/src/pages/home/HomePage.vue
+++ b/src/pages/home/HomePage.vue
@@ -1,24 +1,74 @@
 <script setup lang="ts">
-import { computed,  onMounted,  ref } from 'vue';
+import { computed,  onMounted,  ref, watch } from 'vue';
 
-import NativeLoginButton from 'pages/home/NativeLoginButton.vue';
-import EVMLoginButtons from 'pages/home/EVMLoginButtons.vue';
-import { Menu } from 'src/pages/home/MenuType';
+import LoginButtons from 'pages/home/LoginButtons.vue';
 import { LocationQueryValue, useRoute, useRouter } from 'vue-router';
+import { CURRENT_CONTEXT, useChainStore } from 'src/antelope';
+import { useI18n } from 'vue-i18n';
+import { ChainSettings } from 'src/antelope/types';
+import { settings } from 'src/antelope/stores/chain';
 
-type TabReference = 'evm' | 'zero';
+type TabReference = 'evm' | 'zero' | 'unset';
 
+const { t: $t } = useI18n();
 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;
+interface Network {
+    value: string;
+    label: string;
+    tab: string;
+    chain: ChainSettings;
+}
+
+const networks = [
+    {
+        value: 'telos-evm',
+        label: 'Telos EVM',
+        tab: 'evm',
+        chain: settings['telos-evm'],
+    },
+    {
+        value: 'telos',
+        label: 'Telos',
+        tab: 'zero',
+        chain: settings['telos'],
+    },
+    {
+        value: 'telos-evm-testnet',
+        label: 'Telos EVM Testnet',
+        tab: 'evm',
+        chain: settings['telos-evm-testnet'],
+    },
+    {
+        value: 'telos-testnet',
+        label: 'Telos Testnet',
+        tab: 'zero',
+        chain: settings['telos-testnet'],
+    },
+] as Network[];
+
+const selectedNetwork = ref<Network | undefined>(undefined);
+
+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 {
@@ -29,11 +79,26 @@ function setTab(login: TabReference): void {
 }
 
 onMounted(() => {
-    if (walletOption.value){
-        tab.value = walletOption.value as TabReference;
+    selectedNetwork.value = networks.find(n => n.value === 'telos-evm');
+    /*
+    if (walletOption.value && walletOption.value !== 'unset') {
+        setTab(walletOption.value as TabReference);
+    } else {
+        // set evm as default
+        setTab('evm');
+    }
+    */
+});
+
+watch(selectedNetwork, () => {
+    if (selectedNetwork.value) {
+        chainStore.setChain(CURRENT_CONTEXT, selectedNetwork.value.value);
+        setTab(selectedNetwork.value.tab as TabReference);
     }
 });
 
+
+
 </script>
 
 <template>
@@ -47,53 +112,38 @@ onMounted(() => {
                     class="c-home__logo"
                 ></div>
                 <div class="c-home__button-container">
-                    <div v-if="showLoginBtns" class="c-home__network-toggle-container" role="tablist">
-                        <button
-                            :class="{
-                                'c-home__network-toggle-button': true,
-                                'c-home__network-toggle-button--activated': tab === 'evm',
-                            }"
-                            role="tab"
-                            :aria-selected="tab === 'evm'"
-                            @keydown.enter="setTab('evm')"
-                            @click="setTab('evm')"
+                    <div class="c-home__network-selector-container" role="tablist">
+
+                        <q-select
+                            v-model="selectedNetwork"
+                            outlined
+                            :label="$t('global.network')"
+                            :options="networks"
+                            class="c-home__network-selector"
+                            :showPopup="true"
+                            color="accent"
+                            label-color="grey"
                         >
+                            <template v-slot:selected>
+                                <span>{{ selectedNetwork?.chain.getDisplay() }}</span>
+                            </template>
+
+                            <template v-slot:option="scope">
+                                <q-item class="c-home__network-selector-op" v-bind="scope.itemProps">
+                                    <q-avatar :size="'32px'" :src="scope.opt.chain.getSmallLogoPath()" class="c-home__network-selector-op-icon">
+                                        <img class="c-home__network-selector-op-icon" :src="scope.opt.chain.getSmallLogoPath()">
+                                    </q-avatar>
+                                    <q-item-label class="c-home__network-selector-op-name">{{ scope.opt.chain.getDisplay() }}</q-item-label>
+                                </q-item>
+                            </template>
+                        </q-select>
 
-                            {{ $t('global.telos_evm') }}
-                        </button>
-                        <button
-                            :class="{
-                                'c-home__network-toggle-button': true,
-                                'c-home__network-toggle-button--activated': tab === 'zero',
-                            }"
-                            role="tab"
-                            :aria-selected="tab === 'zero'"
-                            @keydown.enter.space="setTab('zero')"
-                            @click="setTab('zero')"
-                        >
-
-                            {{ $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'" />
-
-                    <EVMLoginButtons
-                        v-else-if="tab === 'evm'"
-                        v-model="currentMenu"
+                    <LoginButtons
+                        :chain="tab"
                     />
+
                 </div>
                 <div class="c-home__external-link">
                     <a
@@ -178,33 +228,42 @@ onMounted(() => {
         margin: 0 auto 48px;
     }
 
-    &__network-toggle-container {
+    &__network-selector-container {
         display: flex;
+        flex-direction: column;
         justify-content: center;
-        margin-bottom: 48px;
+        margin-bottom: 25px;
+        padding: 7px;
     }
 
-    &__network-toggle-button {
-        text-transform: uppercase;
-        text-align: center;
-        padding: 8px 24px;
-        background-color: rgba(white, 0.2);
-        border: unset;
-        color: white;
-        cursor: pointer;
-
-        &:first-of-type {
-            border-radius: 4px 0 0 4px;
+    &__network-selector {
+        .q-field__native, .q-field__marginal {
+            color: white;
         }
 
-        &:last-of-type {
-            border-radius: 0 4px 4px 0;
+        &-op {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            &-name {
+                margin-top: 2px;
+            }
+            &-avatar {
+                width: 32px;
+                height: 32px;
+                border-radius: 50%;
+                overflow: hidden;
+            }
+
+            &-icon {
+                width: 32px;
+                height: 32px;
+            }
         }
+    }
 
-        &--activated {
-            background-color: white;
-            color: var(--link-color);
-        }
+    .q-field--outlined .q-field__control:before {
+        border-color: white;
     }
 
     &__menu-back-button {
@@ -248,4 +307,5 @@ onMounted(() => {
         }
     }
 }
+
 </style>
diff --git a/src/pages/home/HomePageOld.vue b/src/pages/home/HomePageOld.vue
new file mode 100644
index 000000000..74ae1528f
--- /dev/null
+++ b/src/pages/home/HomePageOld.vue
@@ -0,0 +1,251 @@
+<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 { Menu } from 'src/pages/home/MenuType';
+import { LocationQueryValue, useRoute, useRouter } from 'vue-router';
+
+type TabReference = 'evm' | 'zero';
+
+const route = useRoute();
+const router = useRouter();
+
+const tab = ref<TabReference>('evm');
+const currentMenu = ref<Menu>(Menu.MAIN);
+
+const showLoginBtns = computed((): boolean => currentMenu.value === Menu.MAIN);
+const walletOption = computed(() => route.query.login as LocationQueryValue);
+
+function goBack(): void {
+    currentMenu.value = Menu.MAIN;
+}
+
+function setTab(login: TabReference): void {
+    if (route.path !== login){
+        router.replace({ path: route.path, query:{ login } });
+        tab.value = login;
+    }
+}
+
+onMounted(() => {
+    if (walletOption.value){
+        tab.value = walletOption.value as TabReference;
+    }
+});
+
+</script>
+
+<template>
+<q-layout>
+    <q-page-container class="c-home__page-container">
+        <div class="c-home">
+            <div class="c-home__container">
+                <div class="c-home__logo-container"><img
+                    src="branding/telos-wallet-light.png"
+                    :alt="$t('home.wallet_logo_alt')"
+                    class="c-home__logo"
+                ></div>
+                <div class="c-home__button-container">
+                    <div v-if="showLoginBtns" class="c-home__network-toggle-container" role="tablist">
+                        <button
+                            :class="{
+                                'c-home__network-toggle-button': true,
+                                'c-home__network-toggle-button--activated': tab === 'evm',
+                            }"
+                            role="tab"
+                            :aria-selected="tab === 'evm'"
+                            @keydown.enter="setTab('evm')"
+                            @click="setTab('evm')"
+                        >
+
+                            {{ $t('global.telos_evm') }}
+                        </button>
+                        <button
+                            :class="{
+                                'c-home__network-toggle-button': true,
+                                'c-home__network-toggle-button--activated': tab === 'zero',
+                            }"
+                            role="tab"
+                            :aria-selected="tab === 'zero'"
+                            @keydown.enter.space="setTab('zero')"
+                            @click="setTab('zero')"
+                        >
+
+                            {{ $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'" />
+
+                    <EVMLoginButtons
+                        v-else-if="tab === 'evm'"
+                        v-model="currentMenu"
+                    />
+                </div>
+                <div class="c-home__external-link">
+                    <a
+                        href="https://docs.telos.net/evm/about/setup-a-wallet"
+                        target="_blank"
+                        class="c-home__external-link-text"
+                    >
+                        {{$t('home.wallet_introduction')}}
+                    </a>
+                    <q-icon size="16px" name="launch" />
+                </div>
+                <q-footer bordered class="c-home__footer">
+
+                    <q-toolbar class="c-home__footer-second-line bg-dark flex-center">
+                        <a
+                            href="https://www.telos.net/terms-and-conditions"
+                            target="_blank"
+                            class="c-home__external-link-text"
+                        >
+                            {{$t('home.terms')}}
+                        </a>
+                        &nbsp;&nbsp;|&nbsp;&nbsp;
+                        <a
+                            href="https://www.telos.net/privacy-policy"
+                            target="_blank"
+                            class="c-home__external-link-text"
+                        >
+                            {{$t('home.privacy')}}
+                        </a>
+                    </q-toolbar>
+                </q-footer>
+            </div>
+
+        </div>
+    </q-page-container>
+</q-layout>
+
+</template>
+
+<style lang="scss">
+.c-home {
+    position: relative;
+    background: var(--site-gradient);
+    width: 100%;
+    padding-top: 64px;
+
+    &__page-container {
+        // override inline style of unknown origin (do not delete)
+        padding-bottom: 0 !important;
+    }
+
+    &__container {
+        min-height: calc(100svh - 64px);
+        position: relative;
+        padding-bottom: 88px;
+    }
+
+    &__logo-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 48px;
+    }
+
+    &__logo-container {
+        flex-grow: 1;
+        align-self: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+    }
+
+    &__logo {
+        width: 180px;
+    }
+
+    &__button-container {
+        border-radius: 4px;
+        padding: 24px;
+        background-color: rgba(white, 0.1);
+        max-width: 320px;
+        margin: 0 auto 48px;
+    }
+
+    &__network-toggle-container {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 48px;
+    }
+
+    &__network-toggle-button {
+        text-transform: uppercase;
+        text-align: center;
+        padding: 8px 24px;
+        background-color: rgba(white, 0.2);
+        border: unset;
+        color: white;
+        cursor: pointer;
+
+        &:first-of-type {
+            border-radius: 4px 0 0 4px;
+        }
+
+        &:last-of-type {
+            border-radius: 0 4px 4px 0;
+        }
+
+        &--activated {
+            background-color: white;
+            color: var(--link-color);
+        }
+    }
+
+    &__menu-back-button {
+        color: white;
+        margin-bottom: 24px;
+    }
+
+    &__external-link {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+
+        color: white;
+    }
+
+    &__external-link-text {
+        @include text--small;
+        color: white;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    &__footer {
+        position: absolute;
+        bottom: 0;
+    }
+
+    &__connect-wallet {
+        z-index: $z-index--connect-wallet-popup;
+    }
+
+    @include md-and-up {
+        &__logo-container {
+            margin-bottom: 128px;
+        }
+    }
+}
+</style>
diff --git a/src/pages/home/LoginButtons.vue b/src/pages/home/LoginButtons.vue
new file mode 100644
index 000000000..0fb69efff
--- /dev/null
+++ b/src/pages/home/LoginButtons.vue
@@ -0,0 +1,508 @@
+<script lang="ts">
+import {
+    CURRENT_CONTEXT,
+    getAntelope,
+    useAccountStore,
+    useChainStore,
+    useFeedbackStore,
+    usePlatformStore,
+} from 'src/antelope';
+import {
+    ComponentInternalInstance,
+    computed,
+    defineComponent,
+    getCurrentInstance,
+    ref,
+    watch,
+} from 'vue';
+import { QSpinnerFacebook } from 'quasar';
+import InlineSvg from 'vue-inline-svg';
+
+export default defineComponent({
+    name: 'LoginButtons',
+    components: {
+        QSpinnerFacebook,
+        InlineSvg,
+    },
+    props: {
+        chain: {
+            type: String,
+        },
+    },
+    setup(props, { emit }) {
+        const ant = getAntelope();
+        const accountStore = useAccountStore();
+        const chainStore = useChainStore();
+
+        const globalProps = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties;
+        const isMobile = ref(usePlatformStore().isMobile);
+        const isBraveBrowser = ref((navigator as any).brave && (navigator as any).brave.isBrave());
+
+        const showEVMButtons = computed(() =>
+            props.chain === 'evm');
+        const showZeroButtons = computed(() =>
+            props.chain === 'zero' &&
+            !requestAccountSelection.value &&
+            selectedZeroAccount.value === '');
+
+        // EVM Login -----------------------------------------------------------
+        const supportsMetamask = computed(() => {
+            const e = window.ethereum as unknown as { [key:string]: boolean };
+            return e && e.isMetaMask && !supportsSafePal.value && !unsupportedExtensions.value;
+        });
+
+        const supportsSafePal = computed(() => {
+            const e = window.ethereum as unknown as { [key:string]: boolean };
+            return e && (isMobile.value ? e.isSafePal : e._isSafePal);
+        });
+
+        const supportsBrave = computed(() => {
+            const e = window.ethereum as unknown as { [key:string]: boolean };
+            return e && e.isBraveWallet;
+        });
+
+        const showMetamaskButton = computed(() => !isMobile.value || supportsMetamask.value);
+        const showSafePalButton = computed(() => !isMobile.value || supportsSafePal.value);
+        const injectedProviderDetected = computed(() => !!window.ethereum);
+        const showWalletConnectButton = computed(() => !isMobile.value || !injectedProviderDetected.value || (isMobile.value && isBraveBrowser.value)); // temp solution until Brave support is added https://github.com/telosnetwork/telos-wallet/issues/501
+        const showBraveButton = isBraveBrowser.value && !isMobile.value;
+
+        const unsupportedExtensions = computed(() => {
+            const e = window.ethereum as unknown as { [key:string]: boolean };
+            return e && (e.isBraveWallet || e.isCoinbaseWallet); // replace this with a regex to check for unknown/unsupported extensions see https://github.com/telosnetwork/telos-wallet/issues/500
+        });
+
+        const redirectToMetamaskDownload = () => {
+            window.open('https://metamask.io/download/', '_blank');
+        };
+
+        const redirectToSafepalDownload = () => {
+            window.open('https://www.safepal.com/en/download', '_blank');
+        };
+
+        const setMetamaskEVM = async () => {
+            setEVMAuthenticator('Metamask', CURRENT_CONTEXT);
+        };
+        const setBraveEVM = async () => {
+            setEVMAuthenticator('Brave', CURRENT_CONTEXT);
+        };
+        const setSafePalEVM = async () => {
+            setEVMAuthenticator('SafePal', CURRENT_CONTEXT);
+        };
+        const setWalletConnectEVM = async () => {
+            setEVMAuthenticator('WalletConnect', CURRENT_CONTEXT);
+        };
+
+        const setEVMAuthenticator = async(name: string, label: string) => {
+            const auth = ant.wallets.getAuthenticator(name);
+            if (!auth) {
+                console.error(`${name} authenticator not found`);
+                return;
+            }
+            const authenticator = auth.newInstance(label);
+            const accountStore = useAccountStore();
+            const chainStore = useChainStore();
+
+            const network = chainStore.currentChain.settings.getNetwork();
+            const correctChainId = useChainStore().currentChain.settings.getChainId();
+            accountStore.loginEVM({ authenticator, network }).then(async () => {
+                // we verify that the authenticator is connected to the correct network
+                if (!await authenticator.isConnectedTo(correctChainId)) {
+                    const networkName = useChainStore().getChain(label).settings.getDisplay();
+                    const warningMessage = globalProps.$t('evm_wallet.incorrect_network', { networkName });
+                    globalProps.$warningNotification(warningMessage);
+                }
+            });
+        };
+
+        const notifyNoProvider = (provider:string) => {
+            const message = globalProps.$t('home.multiple_providers_notification_message');
+            ant.config.notifyFailureMessage(message);
+        };
+
+        const notifyEnableBrave = () => {
+            const message = globalProps.$t('home.enable_brave_notification_message');
+            ant.config.notifyFailureMessage(message);
+        };
+
+        const isLoading = (loginName: string) => useFeedbackStore().isLoading(loginName);
+
+        // Telos Zero Login ----------------------------------------------------
+        const ualAuthenticators = ant.config.authenticatorsGetter();
+        const loginTelosZero = (idx:number, justViewer:boolean = false) => {
+            if (justViewer) {
+                localStorage.setItem('justViewer', 'true');
+            } else {
+                localStorage.removeItem('justViewer');
+            }
+            const network = chainStore.currentChain.settings.getNetwork();
+            const authenticator = ualAuthenticators[idx];
+            accountStore.loginZero({ authenticator, network });
+        };
+        const getZeroAuthenticator = (name: string) => {
+            const idx = ualAuthenticators.map(a => a.getName()).indexOf(name);
+            return ualAuthenticators[idx];
+        };
+        // Intermediate interactive steps to select or create name account for Telos Zero.
+        const selectedZeroAccount = ref('');
+        const availableZeroAccounts = ref([] as string[]);
+        const setSelectedName = ref<(name: string) => void>((name: string) => {});
+        const requestAccountSelection = computed(() =>
+            // there are available accounts and no account is selected
+            availableZeroAccounts.value.length > 0 &&
+            selectedZeroAccount.value === '',
+        );
+        const setCleosViewerZero = () => {
+            const idx = ant.config.authenticatorsGetter().map(a => a.getName()).indexOf('cleos');
+            loginTelosZero(idx, true);
+        };
+        const redirectToNewAccountWebsite = () => {
+            window.open('https://app.telos.net/accounts/add');
+        };
+
+        return {
+            isLoading,
+            supportsMetamask,
+            supportsBrave,
+            supportsSafePal,
+            showMetamaskButton,
+            showBraveButton,
+            showSafePalButton,
+            showWalletConnectButton,
+            setMetamaskEVM,
+            setBraveEVM,
+            setSafePalEVM,
+            setWalletConnectEVM,
+            notifyNoProvider,
+            notifyEnableBrave,
+            redirectToMetamaskDownload,
+            redirectToSafepalDownload,
+            showEVMButtons,
+            showZeroButtons,
+            ualAuthenticators,
+            loginTelosZero,
+            setCleosViewerZero,
+            redirectToNewAccountWebsite,
+            availableZeroAccounts,
+            selectedZeroAccount,
+            setSelectedName,
+            requestAccountSelection,
+        };
+    },
+    unmounted() {
+    },
+});
+</script>
+
+<template>
+<div class="c-login-buttons">
+
+    <template v-if="showEVMButtons">
+        <!-- Brave Authenticator button -->
+        <div
+            v-if="showBraveButton"
+            class="c-login-buttons__option"
+            @click="supportsBrave ? setBraveEVM() : notifyEnableBrave()"
+        >
+            <template v-if="isLoading('Brave.login')">
+                <div class="c-login-buttons__loading"><QSpinnerFacebook /></div>
+            </template>
+            <template v-else>
+                <InlineSvg
+                    :src="require('src/assets/evm/brave_lion.svg')"
+                    class="c-login-buttons__icon c-login-buttons__icon--brave"
+                    height="24"
+                    width="24"
+                    aria-hidden="true"
+                />
+                {{ supportsBrave ? $t('home.brave') : $t('home.brave') }}
+            </template>
+        </div>
+
+        <!-- Metamask Authenticator button -->
+        <div
+            v-if="showMetamaskButton"
+            class="c-login-buttons__option"
+            @click="supportsMetamask ?  setMetamaskEVM() : supportsSafePal ? notifyNoProvider('Metamask') : redirectToMetamaskDownload()"
+        >
+            <template v-if="isLoading('Metamask.login')">
+                <div class="c-login-buttons__loading"><QSpinnerFacebook /></div>
+            </template>
+            <template v-else>
+                <InlineSvg
+                    :src="require('src/assets/evm/metamask_fox.svg')"
+                    class="c-login-buttons__icon c-login-buttons__icon--metamask"
+                    height="24"
+                    width="24"
+                    aria-hidden="true"
+                />
+                {{ supportsMetamask ? $t('home.metamask') : $t('home.install_metamask') }}
+            </template>
+        </div>
+
+        <!-- WalletConnect Authenticator button -->
+        <div
+            v-if="showWalletConnectButton"
+            class="c-login-buttons__option"
+            @click="setWalletConnectEVM()"
+        >
+            <template v-if="isLoading('WalletConnect.login')">
+                <div class="c-login-buttons__loading"><QSpinnerFacebook /></div>
+            </template>
+            <template v-else>
+                <InlineSvg
+                    :src="require('src/assets/evm/wallet_connect.svg')"
+                    class="c-login-buttons__icon c-login-buttons__icon--wallet-connect"
+                    height="24"
+                    width="24"
+                    aria-hidden="true"
+                />
+                {{ $t('home.walletconnect') }}
+            </template>
+        </div>
+
+        <!-- Safepal Authenticator button -->
+        <div
+            v-if="showSafePalButton"
+            class="c-login-buttons__option"
+            @click="supportsSafePal ? setSafePalEVM() : redirectToSafepalDownload()"
+        >
+            <template v-if="isLoading('SafePal.login')">
+                <div class="c-login-buttons__loading"><QSpinnerFacebook /></div>
+            </template>
+            <template v-else>
+                <InlineSvg
+                    :src="require('src/assets/evm/safepal.svg')"
+                    class="c-login-buttons__icon c-login-buttons__icon--safepal"
+                    height="24"
+                    width="24"
+                    aria-hidden="true"
+                />
+                {{ supportsSafePal ? $t('home.safepal') : $t('home.install_safepal') }}
+            </template>
+        </div>
+
+    </template>
+
+    <template v-if="showZeroButtons">
+        <!-- Authenticator buttons -->
+        <template
+            v-for="(wallet, idx) in ualAuthenticators"
+            :key="idx"
+        >
+            <div
+                v-if="wallet.getName() !== 'metakeep.ual'"
+                class="c-login-buttons__option"
+                @click="loginTelosZero(idx)"
+            >
+                <template v-if="isLoading(wallet.getStyle().text)">
+                    <div class="c-login-buttons__loading"><QSpinnerFacebook /></div>
+                </template>
+                <template v-else>
+                    <img
+                        :src="wallet.getStyle().icon"
+                        width="24"
+                        class="c-login-buttons__ual-logo"
+                    >
+                    {{ wallet.getStyle().text }}
+                </template>
+            </div>
+        </template>
+
+        <hr class="c-login-buttons__hr">
+
+        <div
+            class="c-login-buttons__option c-login-buttons__option--centered"
+            tabindex="0"
+            aria-role="button"
+            @keyup.enter="setCleosViewerZero"
+            @click="setCleosViewerZero"
+        >
+            {{ $t('home.view_any_account') }}
+        </div>
+
+        <div
+            class="c-login-buttons__option c-login-buttons__option--centered"
+            tabindex="0"
+            aria-role="button"
+            @keyup.enter="redirectToNewAccountWebsite"
+            @click="redirectToNewAccountWebsite"
+        >
+            {{ $t('home.create_new_account') }}
+        </div>
+    </template>
+</div>
+</template>
+
+<style lang="scss">
+.c-login-buttons {
+    $width: 255px;
+    $gap: 15px;
+    color: $white;
+    $self: &;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: $gap;
+
+    &__loading{
+        width: 100%;
+        text-align: center;
+    }
+
+    &__header{
+        display: inline-block;
+        font-size: 16px;
+        margin-bottom: 16px;
+    }
+
+    &__icon {
+        margin-top: -1px;
+        transition: all 0.3s;
+        &--disabled {
+            opacity: 0.5;
+        }
+    }
+
+    &__cloud-btn-container {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+    }
+
+    &__cloud-btn-line-icons {
+        display: flex;
+        width: 100%;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+    }
+
+    &__cloud-btn-line-title {
+        display: flex;
+        width: 100%;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        gap: $gap;
+    }
+
+    &__title {
+        @include text--header-4;
+        text-align: center;
+    }
+
+    &__zero-accounts-title {
+        padding: 5px;
+        @include text--small;
+        text-align: center;
+    }
+
+    &__zero-account-loading {
+        margin-right: 1px;
+        margin-top: -3px;
+    }
+
+    &__zero-accounts {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+    }
+
+    &__option {
+        display: flex;
+        gap: $gap;
+
+        width: $width;
+        height: 54px;
+        outline-color: $white;
+        outline-width: 1px;
+        outline-style: solid;
+        border-radius: 4px;
+        font-size: 16px;
+        font-weight: 500;
+        padding: 14px;
+        cursor: pointer;
+
+        &:hover:not(&--disabled) {
+            outline-color: $white;
+            outline-width: 2px;
+        }
+
+        &:not(:hover) #{$self}__icon {
+            &--metamask, &--safepal, &--wallet-connect {
+                opacity: 0.8;
+
+                @include mobile-only {
+                    opacity: 1;
+                }
+            }
+        }
+
+        &--telos-cloud {
+            height: max-content;
+            &:not(:hover) {
+                outline-width: 0;
+                @include gradient_border();
+            }
+            &--gradient:hover {
+                outline-width: 0px !important;
+                @include gradient_border();
+            }
+        }
+
+        &--disabled {
+            color: #9289b1;
+            outline-color: #9289b1;
+            cursor: not-allowed;
+        }
+
+        &--zero-account {
+            height: 32px;
+            width: calc(100% - 16px);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+
+    &__hr {
+        width: $width;
+    }
+
+    &__account-name-input-container {
+        background-color: rgba(255, 255, 255, 1);
+        padding: 10px;
+        border-radius: 6px;
+    }
+
+    &__account-name-buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 8px;
+    }
+
+    &__account-name-button {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 8px;
+        border-radius: 4px;
+        border: 1px solid #ffffff;
+        color: #ffffff;
+        background-color: transparent;
+        cursor: pointer;
+    }
+}
+</style>

From a35d990e0b7c73ab09f04be469c46f1eca31ddcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viterbo=20Rodr=C3=ADguez?= <viter.rod@gmail.com>
Date: Thu, 16 May 2024 21:34:59 -0300
Subject: [PATCH 2/2] multichain support working!

---
 quasar.conf.js                                |   2 +-
 src/App.vue                                   |  21 ++-
 .../chains/evm/telos-evm-testnet/index.ts     |   2 +-
 .../chains/native/telos-testnet/index.ts      |   2 +-
 src/antelope/index.ts                         |   7 +
 src/antelope/stores/allowances.ts             |   5 +
 src/antelope/stores/chain.ts                  | 139 +++++++++++++-----
 src/antelope/stores/history.ts                |   9 +-
 src/antelope/stores/rex.ts                    |  81 +++++++---
 src/antelope/wallets/AntelopeWallets.ts       |  11 ++
 src/boot/antelope.ts                          |  36 +++--
 src/boot/api.js                               |  56 ++++---
 src/boot/hyperion.js                          |  12 --
 src/boot/ual.js                               |   2 +-
 src/components/evm/AppNav.vue                 |   6 +-
 src/css/components/_notification.scss         |   9 ++
 src/layouts/NativeLayout.vue                  |  18 ++-
 src/pages/evm/nfts/NftTransferForm.vue        |   2 +-
 src/pages/home/EVMLoginButtons.vue            |   3 +-
 src/pages/home/HomePage.vue                   |  45 ++----
 src/pages/native/BalanceInfo.vue              |   5 +-
 src/pages/native/balance/CoinHistory.vue      |   5 +-
 src/pages/native/balance/CoinInfo.vue         |   4 +-
 src/pages/native/balance/RexStaking.vue       |   2 +-
 src/store/account/actions.js                  |  11 +-
 25 files changed, 324 insertions(+), 171 deletions(-)
 delete mode 100644 src/boot/hyperion.js

diff --git a/quasar.conf.js b/quasar.conf.js
index deef1ec28..703818f3c 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -30,7 +30,7 @@ module.exports = function(/* ctx */) {
         // app boot file (/src/boot)
         // --> boot files are part of "main.js"
         // https://quasar.dev/quasar-cli/boot-files
-        boot: ['ual', 'hyperion', 'i18n', 'fuel', 'api', 'errorHandling', 'helpers', 'mixin', 'emitter', 'telosApi', 'wagmi', 'antelope'],
+        boot: ['ual', 'i18n', 'fuel', 'api', 'errorHandling', 'helpers', 'mixin', 'emitter', 'telosApi', 'wagmi', 'antelope'],
 
         // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
         css: ['index.scss'],
diff --git a/src/App.vue b/src/App.vue
index dc13a9894..e5a9244de 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,8 +5,6 @@ import { TELOS_CHAIN_IDS } from 'src/antelope/chains/chain-constants';
 import packageInfo from '../package.json';
 import { defineComponent } from 'vue';
 
-export const isTodayBeforeTelosCloudDown = new Date().getTime() < new Date('2023-12-31').getTime();
-
 export default defineComponent({
     name: 'App',
     created() {
@@ -44,16 +42,15 @@ export default defineComponent({
         }
     },
     mounted() {
-        const chainSettings = useChainStore().currentChain.settings as EVMChainSettings;
-        // if the organization using this application is Telos, import Fathom analytics
-        if (TELOS_CHAIN_IDS.includes(chainSettings.getChainId())) {
-            const script = document.createElement('script');
-            script.src = 'https://cdn.usefathom.com/script.js';
-            script.dataset.site = 'ISPYEAKT';
-            script.dataset.spa = 'auto';
-            script.defer = true;
-            document.body.appendChild(script);
-        }
+
+        // Telos Wallet allows users to switch between Telos Zero and Telos EVM.
+        // The loading of this script should be independent of the chain the user is on.
+        const script = document.createElement('script');
+        script.src = 'https://cdn.usefathom.com/script.js';
+        script.dataset.site = 'ISPYEAKT';
+        script.dataset.spa = 'auto';
+        script.defer = true;
+        document.body.appendChild(script);
     },
 });
 </script>
diff --git a/src/antelope/chains/evm/telos-evm-testnet/index.ts b/src/antelope/chains/evm/telos-evm-testnet/index.ts
index 3ca376f6b..2d606ac42 100644
--- a/src/antelope/chains/evm/telos-evm-testnet/index.ts
+++ b/src/antelope/chains/evm/telos-evm-testnet/index.ts
@@ -9,7 +9,7 @@ import { getFiatPriceFromIndexer } from 'src/api/price';
 const LOGO = 'https://raw.githubusercontent.com/telosnetwork/token-list/main/logos/telos.png';
 const CHAIN_ID = '41';
 export const NETWORK = 'telos-evm-testnet';
-const DISPLAY = 'Telos EVM Testnet';
+const DISPLAY = 'Telos EVM (Testnet)';
 const TOKEN = new TokenClass({
     name: 'Telos',
     symbol: 'TLOS',
diff --git a/src/antelope/chains/native/telos-testnet/index.ts b/src/antelope/chains/native/telos-testnet/index.ts
index ac959a54a..1d26c598b 100644
--- a/src/antelope/chains/native/telos-testnet/index.ts
+++ b/src/antelope/chains/native/telos-testnet/index.ts
@@ -7,7 +7,7 @@ const LOGO = 'https://raw.githubusercontent.com/telosnetwork/token-list/main/log
 const CHAIN_ID =
   '1eaa0824707c8c16bd25145493bf062aecddfeb56c736f6ba6397f3195f33c9f';
 const NETWORK = 'telos-testnet';
-const DISPLAY = 'Telos Zero Testnet';
+const DISPLAY = 'Telos Zero (Testnet)';
 const TOKEN = new TokenClass({
     symbol: 'TLOS',
     precision: 4,
diff --git a/src/antelope/index.ts b/src/antelope/index.ts
index 8c399e3f0..960c3f78e 100644
--- a/src/antelope/index.ts
+++ b/src/antelope/index.ts
@@ -64,6 +64,13 @@ export class Antelope {
         this.config.init(app);
         this.wallets.init();
 
+        // each time the user changes the network,
+        // we need to reset the current web3 provider instance
+        events.onNetworkChanged.subscribe(() => {
+            this.wallets.resetWeb3Provider();
+        });
+
+
         // call for the first time useXStore for all X stores in Antelope library
         const stores = this.stores;
 
diff --git a/src/antelope/stores/allowances.ts b/src/antelope/stores/allowances.ts
index ab18018bf..7a3fd7301 100644
--- a/src/antelope/stores/allowances.ts
+++ b/src/antelope/stores/allowances.ts
@@ -230,6 +230,11 @@ export const useAllowancesStore = defineStore(store_name, {
 
             const chainSettings = useChainStore().currentChain.settings as EVMChainSettings;
 
+            if (chainSettings.isNative()) {
+                this.trace('fetchAllowancesForAccount', 'Native chain does not have allowances');
+                return;
+            }
+
             const erc20AllowancesPromise   = chainSettings.fetchErc20Allowances(account, { limit: ALLOWANCES_LIMIT });
             const erc721AllowancesPromise  = chainSettings.fetchErc721Allowances(account, { limit: ALLOWANCES_LIMIT });
             const erc1155AllowancesPromise = chainSettings.fetchErc1155Allowances(account, { limit: ALLOWANCES_LIMIT });
diff --git a/src/antelope/stores/chain.ts b/src/antelope/stores/chain.ts
index f330ebb9b..c35f91f73 100644
--- a/src/antelope/stores/chain.ts
+++ b/src/antelope/stores/chain.ts
@@ -53,7 +53,7 @@ import {
 } from 'src/antelope';
 
 
-export const settings: { [key: string]: ChainSettings } = {
+export const settings: { [network: string]: ChainSettings } = {
     // Native chains
     'eos': new EOS('eos'),
     'telos': new Telos('telos'),
@@ -66,13 +66,17 @@ export const settings: { [key: string]: ChainSettings } = {
     'telos-evm-testnet': new TelosEVMTestnet('telos-evm-testnet'),
 };
 
+export const chains: { [network: string]: ChainModel } = {};
+
 export interface ChainModel {
+    lastUpdate: number;
     apy: string;
     settings: ChainSettings;
     tokens: TokenClass[];
 }
 
 export interface EvmChainModel {
+    lastUpdate: number;
     apy: string;
     stakeRatio: ethers.BigNumber;
     unstakeRatio: ethers.BigNumber;
@@ -82,6 +86,7 @@ export interface EvmChainModel {
 }
 
 export interface NativeChainModel {
+    lastUpdate: number;
     apy: string;
     settings: NativeChainSettings;
     tokens: TokenClass[];
@@ -89,6 +94,7 @@ export interface NativeChainModel {
 
 const newChainModel = (network: string, isNative: boolean): ChainModel => {
     const model = {
+        lastUpdate: 0,
         apy: '',
         stakeRatio: ethers.constants.Zero,
         unstakeRatio: ethers.constants.Zero,
@@ -116,7 +122,7 @@ export const useChainStore = defineStore(store_name, {
         loggedChain: state => state.__chains[CURRENT_CONTEXT],
         currentChain: state => state.__chains[CURRENT_CONTEXT],
         loggedEvmChain: state => state.__chains[CURRENT_CONTEXT].settings.isNative() ? undefined : state.__chains[CURRENT_CONTEXT] as EvmChainModel,
-        currentEvmChain: state => state.__chains[CURRENT_CONTEXT].settings.isNative() ? undefined : state.__chains[CURRENT_CONTEXT] as EvmChainModel,
+        currentEvmChain: state => state.__chains[CURRENT_CONTEXT]?.settings.isNative() ? undefined : state.__chains[CURRENT_CONTEXT] as EvmChainModel,
         loggedNativeChain: state => state.__chains[CURRENT_CONTEXT].settings.isNative() ? state.__chains[CURRENT_CONTEXT] as NativeChainModel : undefined,
         currentNativeChain: state => state.__chains[CURRENT_CONTEXT].settings.isNative() ? state.__chains[CURRENT_CONTEXT] as NativeChainModel : undefined,
         getChain: state => (label: string) => state.__chains[label],
@@ -137,12 +143,24 @@ export const useChainStore = defineStore(store_name, {
             this.trace('updateChainData');
             useFeedbackStore().setLoading('updateChainData');
             try {
-                await Promise.all([
-                    this.updateSettings(label),
-                    this.updateApy(label),
-                    this.updateGasPrice(label),
-                    this.updateStakedRatio(label),
-                ]);
+                const chain = useChainStore().getChain(label);
+                const now = Date.now();
+                const tolerance = 10 * 60 * 1000; // 10 minutes
+                const lastUpdate = chain.lastUpdate;
+                const isUpToDate = now - lastUpdate < tolerance;
+                this.trace('updateChainData', { isUpToDate, now, lastUpdate, tolerance });
+                if (isUpToDate) {
+                    // This avoid to update the chain data if the user switches from one chain to another and back
+                    this.trace('updateChainData', label, '-> already up to date');
+                } else {
+                    this.setChainLastUpdate(label, Date.now());
+                    await Promise.all([
+                        this.updateSettings(label),
+                        this.updateApy(label),
+                        this.updateGasPrice(label),
+                        this.updateStakedRatio(label),
+                    ]);
+                }
             } catch (error) {
                 console.error(error);
                 throw new Error('antelope.chain.error_update_data');
@@ -153,7 +171,7 @@ export const useChainStore = defineStore(store_name, {
         async updateSettings(label: string): Promise<void> {
             this.trace('updateSettings', label);
             try {
-                const settings = this.getChain(label).settings as EVMChainSettings;
+                const settings = useChainStore().getChain(label).settings as EVMChainSettings;
                 settings.init().then(() => {
                     this.trace('updateSettings', label, '-> onChainIndexerReady.next()');
                     getAntelope().events.onChainIndexerReady.next({ label, ready: true });
@@ -169,7 +187,7 @@ export const useChainStore = defineStore(store_name, {
         async updateApy(label: string): Promise<void> {
             useFeedbackStore().setLoading('updateApy');
             this.trace('updateApy', label);
-            const chain = this.getChain(label);
+            const chain = useChainStore().getChain(label);
             try {
                 chain.apy = await chain.settings.getApy();
             } catch (error) {
@@ -181,32 +199,42 @@ export const useChainStore = defineStore(store_name, {
         },
         async updateStakedRatio(label: string): Promise<void> {
             // first we need the contract instance to be able to execute queries
-            this.trace('actualUpdateStakedRatio', label);
-            useFeedbackStore().setLoading('actualUpdateStakedRatio');
-            const chain_settings = useChainStore().getChain(label).settings as EVMChainSettings;
-            const sysToken = chain_settings.getSystemToken();
-            const stkToken = chain_settings.getStakedSystemToken();
+            this.trace('updateStakedRatio', label);
+            const chain = useChainStore().getChain(label);
+            try {
+                useFeedbackStore().setLoading('updateStakedRatio');
+                if (!chain.settings.isNative()) {
+                    const chain_settings = chain.settings as EVMChainSettings;
+                    const sysToken = chain_settings.getSystemToken();
+                    const stkToken = chain_settings.getStakedSystemToken();
 
-            const abi = [stlosAbiPreviewDeposit[0], stlosAbiPreviewRedeem[0]];
-            const provider = await getAntelope().wallets.getWeb3Provider(label);
-            const contractInstance = new ethers.Contract(stkToken.address, abi, provider);
-            // Now we preview a deposit of 1 SYS to get the ratio
-            const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
-            const stakedRatio = await contractInstance.previewDeposit(oneSys.toString());
-            const unstakedRatio:ethers.BigNumber = await contractInstance.previewRedeem(oneSys);
-            // Finally we update the store
-            this.setStakedRatio(label, stakedRatio);
-            this.setUnstakedRatio(label, unstakedRatio);
-            useFeedbackStore().unsetLoading('actualUpdateStakedRatio');
+                    const abi = [stlosAbiPreviewDeposit[0], stlosAbiPreviewRedeem[0]];
+                    const provider = await getAntelope().wallets.getWeb3Provider(label);
+                    const contractInstance = new ethers.Contract(stkToken.address, abi, provider);
+                    // Now we preview a deposit of 1 SYS to get the ratio
+                    const oneSys = ethers.utils.parseUnits('1.0', sysToken.decimals);
+                    const stakedRatio = await contractInstance.previewDeposit(oneSys.toString());
+                    const unstakedRatio:ethers.BigNumber = await contractInstance.previewRedeem(oneSys);
+                    // Finally we update the store
+                    this.setStakedRatio(label, stakedRatio);
+                    this.setUnstakedRatio(label, unstakedRatio);
+                }
+            } catch (error) {
+                console.error(error);
+            } finally {
+                useFeedbackStore().unsetLoading('updateStakedRatio');
+            }
         },
         async updateGasPrice(label: string): Promise<void> {
             useFeedbackStore().setLoading('updateGasPrice');
             this.trace('updateGasPrice');
-            const chain = this.getChain(label);
+            const chain = useChainStore().getChain(label);
             try {
                 if (!chain.settings.isNative()) {
                     const wei = await (chain.settings as EVMChainSettings).getGasPrice();
                     (chain as EvmChainModel).gasPrice = wei;
+                } else {
+                    this.trace('updateGasPrice', label, 'Native chain has no gas costs');
                 }
             } catch (error) {
                 console.error(error);
@@ -217,7 +245,7 @@ export const useChainStore = defineStore(store_name, {
         async updateTokenList(label: string): Promise<void> {
             useFeedbackStore().setLoading('updateTokenList');
             this.trace('updateTokenList');
-            const chain = this.getChain(label);
+            const chain = useChainStore().getChain(label);
             try {
                 if (chain.settings.isNative()) {
                     chain.tokens = await (chain.settings as NativeChainSettings).getTokenList();
@@ -235,9 +263,15 @@ export const useChainStore = defineStore(store_name, {
         setChain(label: string, network: string) {
             this.trace('setChain', label, network);
             if (network in settings) {
+
+                // create the chain model if it doesn't exist
+                if (!chains[network]) {
+                    chains[network] = newChainModel(network, settings[network].isNative());
+                }
+
                 // make the change only if they are different
                 if (network !== this.__chains[label]?.settings.getNetwork()) {
-                    this.__chains[label] = newChainModel(network, settings[network].isNative());
+                    this.__chains[label] = chains[network];
                     this.trace('setChain', label, network, '--> void this.updateChainData(label);');
                     void this.updateChainData(label);
                     getAntelope().events.onNetworkChanged.next(
@@ -249,16 +283,47 @@ export const useChainStore = defineStore(store_name, {
             }
         },
         setStakedRatio(label: string, ratio: ethers.BigNumber) {
-            const decimals = (this.getChain(label).settings as EVMChainSettings).getStakedSystemToken().decimals;
-            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, decimals));
-            this.trace('setStakedRatio', label, ratio.toString(), ratioNumber);
-            (this.__chains[label] as EvmChainModel).stakeRatio = ratio;
+            this.trace('setStakedRatio', label, ratio.toString());
+            const chain = useChainStore().getChain(label);
+            try {
+                if (!chain.settings.isNative()) {
+                    const decimals = (useChainStore().getChain(label).settings as EVMChainSettings).getStakedSystemToken().decimals;
+                    const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, decimals));
+                    this.trace('setStakedRatio', label, ratio.toString(), ratioNumber);
+                    (this.__chains[label] as EvmChainModel).stakeRatio = ratio;
+                } else {
+                    this.trace('setStakedRatio', label, 'Native chain has no staked ratio');
+                }
+            } catch (error) {
+                console.error(error);
+                throw new Error('antelope.chain.error_token_list');
+            } finally {
+                useFeedbackStore().unsetLoading('updateTokenList');
+            }
+
         },
         setUnstakedRatio(label: string, ratio: ethers.BigNumber) {
-            const decimals = (this.getChain(label).settings as EVMChainSettings).getStakedSystemToken().decimals;
-            const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, decimals));
-            this.trace('setUnstakedRatio', label, ratio.toString(), ratioNumber);
-            (this.__chains[label] as EvmChainModel).unstakeRatio = ratio;
+            this.trace('setUnstakedRatio', label, ratio.toString());
+            const chain = useChainStore().getChain(label);
+            try {
+                if (!chain.settings.isNative()) {
+                    const decimals = (useChainStore().getChain(label).settings as EVMChainSettings).getStakedSystemToken().decimals;
+                    const ratioNumber = parseFloat(ethers.utils.formatUnits(ratio, decimals));
+                    this.trace('setUnstakedRatio', label, ratio.toString(), ratioNumber);
+                    (this.__chains[label] as EvmChainModel).unstakeRatio = ratio;
+                } else {
+                    this.trace('setUnstakedRatio', label, 'Native chain has no unstaked ratio');
+                }
+            } catch (error) {
+                console.error(error);
+                throw new Error('antelope.chain.error_token_list');
+            } finally {
+                useFeedbackStore().unsetLoading('updateTokenList');
+            }
+        },
+        setChainLastUpdate(label: string, timestamp: number) {
+            this.trace('setChainLastUpdate', label, timestamp);
+            this.__chains[label].lastUpdate = timestamp;
         },
     },
 });
diff --git a/src/antelope/stores/history.ts b/src/antelope/stores/history.ts
index 382765b6e..ec8a16401 100644
--- a/src/antelope/stores/history.ts
+++ b/src/antelope/stores/history.ts
@@ -198,11 +198,14 @@ export const useHistoryStore = defineStore(store_name, {
             const contractStore = useContractStore();
 
             this.trace('fetchEvmNftTransfersForAccount', label);
-
-            feedbackStore.setLoading('history.fetchEvmNftTransfersForAccount');
-
             const chainSettings = useChainStore().getChain(label).settings as EVMChainSettings;
 
+            if (chainSettings.isNative()) {
+                this.trace('fetchEvmNftTransfersForAccount', 'Native networks not supported yet');
+                return;
+            }
+
+            feedbackStore.setLoading('history.fetchEvmNftTransfersForAccount');
             try {
                 // get all erc721 and erc1155 transfers for the given account
                 const [
diff --git a/src/antelope/stores/rex.ts b/src/antelope/stores/rex.ts
index 6a46223b4..3c8b51c4b 100644
--- a/src/antelope/stores/rex.ts
+++ b/src/antelope/stores/rex.ts
@@ -108,6 +108,7 @@ export const useRexStore = defineStore(store_name, {
         async getStakedSystemContractInstance(label: string) {
             this.trace('getStakedSystemContractInstance', label);
             const address = (useChainStore().getChain(label).settings as EVMChainSettings).getStakedSystemToken().address;
+            this.trace('getStakedSystemContractInstance', label, address);
             return this.getContractInstance(label, address);
         },
         /**
@@ -118,17 +119,30 @@ export const useRexStore = defineStore(store_name, {
         async getEscrowContractInstance(label: string) {
             this.trace('getEscrowContractInstance', label);
             const address = (useChainStore().getChain(label).settings as EVMChainSettings).getEscrowContractAddress();
+            this.trace('getEscrowContractInstance', label, address);
             return this.getContractInstance(label, address);
         },
+        /**
+         * This method should be called to check if the REX system is available for a given context.
+         * @param label identifies the context (network on this case) for the data
+         * @returns true if the REX system is available for the given context
+         */
+        isNetworkEVM(label: string) {
+            return !useChainStore().getChain(label).settings.isNative();
+        },
         /**
          * This method queries the total amount of staked tokens in the system and maintains it in the store.
          * @param label identifies the context (network on this case) for the data
          */
         async updateTotalStaking(label: string) {
             this.trace('updateTotalStaking', label);
-            const contract = await this.getStakedSystemContractInstance(label);
-            const totalStaking = await contract.totalAssets();
-            this.setTotalStaking(label, totalStaking);
+            if (this.isNetworkEVM(label)) {
+                const contract = await this.getStakedSystemContractInstance(label);
+                const totalStaking = await contract.totalAssets();
+                this.setTotalStaking(label, totalStaking);
+            } else {
+                this.trace('updateTotalStaking', label, 'not supported for native chains yet');
+            }
         },
 
         /**
@@ -137,9 +151,13 @@ export const useRexStore = defineStore(store_name, {
          */
         async updateUnstakingPeriod(label: string) {
             this.trace('updateUnstakingPeriod', label);
-            const contract = await this.getEscrowContractInstance(label);
-            const period = await contract.lockDuration();
-            this.setUnstakingPeriod(label, period.toNumber());
+            if (this.isNetworkEVM(label)) {
+                const contract = await this.getEscrowContractInstance(label);
+                const period = await contract.lockDuration();
+                this.setUnstakingPeriod(label, period.toNumber());
+            } else {
+                this.trace('updateUnstakingPeriod', label, 'not supported for native chains yet');
+            }
         },
 
         /**
@@ -182,10 +200,19 @@ export const useRexStore = defineStore(store_name, {
          */
         async updateWithdrawable(label: string) {
             this.trace('updateWithdrawable', label);
-            const contract = await this.getEscrowContractInstance(label);
-            const address = useAccountStore().getAccount(label).account;
-            const withdrawable = await contract.maxWithdraw(address);
-            this.setWithdrawable(label, withdrawable);
+            if (this.isNetworkEVM(label)) {
+                try {
+                    const contract = await this.getEscrowContractInstance(label);
+                    const address = useAccountStore().getAccount(label).account;
+                    const withdrawable = await contract.maxWithdraw(address);
+                    this.setWithdrawable(label, withdrawable);
+                } catch (error) {
+                    console.error('updateWithdrawable', label, error);
+                    throw error;
+                }
+            } else {
+                this.trace('updateWithdrawable', label, 'not supported for native chains yet');
+            }
         },
         /**
          * This method queries the deposits for a given account and maintains it in the store.
@@ -195,10 +222,19 @@ export const useRexStore = defineStore(store_name, {
          */
         async updateDeposits(label: string) {
             this.trace('updateDeposits', label);
-            const contract = await this.getEscrowContractInstance(label);
-            const address = useAccountStore().getAccount(label).account;
-            const deposits = await contract.depositsOf(address);
-            this.setDeposits(label, deposits);
+            if (this.isNetworkEVM(label)) {
+                try {
+                    const contract = await this.getEscrowContractInstance(label);
+                    const address = useAccountStore().getAccount(label).account;
+                    const deposits = await contract.depositsOf(address);
+                    this.setDeposits(label, deposits);
+                } catch (error) {
+                    console.error('updateDeposits', label, error);
+                    throw error;
+                }
+            } else {
+                console.error('updateDeposits', label, 'not supported for native chains yet');
+            }
         },
         /**
          * This method queries the balance for a given account and maintains it in the store.
@@ -207,10 +243,19 @@ export const useRexStore = defineStore(store_name, {
          */
         async updateBalance(label: string) {
             this.trace('updateBalance', label);
-            const contract = await this.getEscrowContractInstance(label);
-            const address = useAccountStore().getAccount(label).account;
-            const balance = await contract.balanceOf(address);
-            this.setBalance(label, balance);
+            if (this.isNetworkEVM(label)) {
+                try {
+                    const contract = await this.getStakedSystemContractInstance(label);
+                    const address = useAccountStore().getAccount(label).account;
+                    const balance = await contract.balanceOf(address);
+                    this.setBalance(label, balance);
+                } catch (error) {
+                    console.error('updateBalance', label, error);
+                    throw error;
+                }
+            } else {
+                console.error('updateBalance', label, 'not supported for native chains yet');
+            }
         },
         /**
          * utility function to get the number of decimals for the staked system token
diff --git a/src/antelope/wallets/AntelopeWallets.ts b/src/antelope/wallets/AntelopeWallets.ts
index 83b4c8a7b..1fd38b6c0 100644
--- a/src/antelope/wallets/AntelopeWallets.ts
+++ b/src/antelope/wallets/AntelopeWallets.ts
@@ -21,6 +21,8 @@ export class AntelopeWallets {
 
     init() {
         this.trace('init');
+
+
     }
 
     addEVMAuthenticator(authenticator: EVMAuthenticator) {
@@ -42,11 +44,13 @@ export class AntelopeWallets {
 
         // If a provider instance already exists, return it immediately.
         if (this.web3Provider) {
+            this.trace('getWeb3Provider', 'Returning existing provider instance');
             return this.web3Provider;
         }
 
         // If an initialization is already underway, wait for it to complete.
         if (this.web3ProviderInitializationPromise) {
+            this.trace('getWeb3Provider', 'Waiting for existing initialization to complete');
             return this.web3ProviderInitializationPromise;
         }
 
@@ -58,6 +62,7 @@ export class AntelopeWallets {
                 const jsonRpcProvider = new ethers.providers.JsonRpcProvider(url);
                 await jsonRpcProvider.ready;
                 this.web3Provider = jsonRpcProvider as ethers.providers.Web3Provider;
+                this.trace('getWeb3Provider', 'Initialized provider instance', url, this.web3Provider);
                 return this.web3Provider;
             } catch (e) {
                 this.trace('getWeb3Provider authenticator.web3Provider() Failed!', e);
@@ -69,4 +74,10 @@ export class AntelopeWallets {
         return this.web3ProviderInitializationPromise;
     }
 
+    resetWeb3Provider() {
+        this.trace('resetWeb3Provider');
+        this.web3Provider = null;
+        this.web3ProviderInitializationPromise = null;
+    }
+
 }
diff --git a/src/boot/antelope.ts b/src/boot/antelope.ts
index 69cb8fbdc..ac7a420f6 100644
--- a/src/boot/antelope.ts
+++ b/src/boot/antelope.ts
@@ -2,7 +2,8 @@ import { EthereumClient } from '@web3modal/ethereum';
 import { Web3ModalConfig } from '@web3modal/html';
 import { OreIdOptions } from 'oreid-js';
 import { boot } from 'quasar/wrappers';
-import { CURRENT_CONTEXT, installAntelope } from 'src/antelope';
+import { installAntelope } from 'src/antelope';
+import { AccountModel } from 'src/antelope/stores/account';
 import { AntelopeError } from 'src/antelope/types';
 import {
     MetamaskAuth,
@@ -13,7 +14,7 @@ import {
 import { BraveAuth } from 'src/antelope/wallets/authenticators/BraveAuth';
 import { App } from 'vue';
 import { Router } from 'vue-router';
-
+import { resetNativeApi } from 'src/boot/api';
 
 const getRouter = async (app: App) => new Promise<Router>((resolve) => {
     const intervalId = setInterval(() => {
@@ -28,6 +29,15 @@ const getRouter = async (app: App) => new Promise<Router>((resolve) => {
 export default boot(({ app }) => {
     const ant = installAntelope(app);
 
+    // if the user changes the network, we need to reset the native api
+    ant.events.onNetworkChanged.subscribe({
+        next: async ({ chain }) => {
+
+            resetNativeApi(chain);
+            chain.settings.getRPCEndpoint();
+        },
+    });
+
     // settting notification handlers --
     ant.config.setNotifySuccessfulTrxHandler(app.config.globalProperties.$notifySuccessTransaction);
     ant.config.setNotifySuccessMessageHandler(app.config.globalProperties.$notifySuccessMessage);
@@ -43,10 +53,19 @@ export default boot(({ app }) => {
 
     // we need to wait 1000 milisec to ensure app.config.globalProperties?.$router is not null
     ant.events.onLoggedIn.subscribe({
-        next: async () => {
-            if (window.location.pathname === '/') {
-                (await getRouter(app)).push({ path: '/evm/wallet?tab=balance' });
+        next: async (account: AccountModel) => {
+            if (account.isNative) {
+                if (!window.location.pathname.startsWith('/zero')) {
+                    const router = await getRouter(app);
+                    router.push({ path: '/zero/balance' });
+                }
+            } else {
+                if (!window.location.pathname.startsWith('/evm')) {
+                    const router = await getRouter(app);
+                    router.push({ path: '/evm/wallet?tab=balance' });
+                }
             }
+
         },
     });
     ant.events.onLoggedOut.subscribe({
@@ -103,13 +122,6 @@ export default boot(({ app }) => {
     const weAreInNetlify = document.location.hostname.includes('netlify');
     ant.config.debug.allowDebugMode(weAreNotInProduction || weAreInLocalhost || weAreInNetlify);
 
-    // Finally, we check if the url has the network parameter and if so, we connect to that network
-    // Otherwise we just let the store decide which network to connect to
-    const network = new URLSearchParams(window.location.search).get('network');
-    if (network) {
-        ant.stores.chain.setChain(CURRENT_CONTEXT, network);
-    }
-
     // We can simulate the indexer being down for testing purposes by uncommenting the following line
     // (ant.stores.chain.currentChain.settings as EVMChainSettings).simulateIndexerDown(true);
 
diff --git a/src/boot/api.js b/src/boot/api.js
index 044f1bc41..c447ce811 100644
--- a/src/boot/api.js
+++ b/src/boot/api.js
@@ -1,4 +1,5 @@
 import { boot } from 'quasar/wrappers';
+import axios from 'axios';
 import { Api, JsonRpc } from 'eosjs';
 import { TelosEvmApi } from '@telosnetwork/telosevm-js';
 
@@ -61,35 +62,54 @@ const getAccount = async function (accountName) {
     return await rpc.get_account(accountName);
 };
 
-export default boot(async ({ store }) => {
-    const rpc = new JsonRpc(
-        `${process.env.NETWORK_PROTOCOL}://${process.env.NETWORK_HOST}:${process.env.NETWORK_PORT}`,
-    );
+const holder = {};
+export default boot(async ({ store, app }) => {
+    holder.store = store;
+    holder.app = app;
+});
+
+export const resetNativeApi = async function (chain) {
+    if (!chain.settings.isNative()) {
+        return;
+    }
+    const p = chain.settings.getRPCEndpoint();
+    const url = `${p.protocol}://${p.host}:${p.port}${p.path ?? ''}`;
+    const rpc = new JsonRpc(url);
 
-    store['$account'] = {};
+    holder.store['$account'] = {};
 
-    store['$defaultApi'] = new Api({
+    holder.store['$defaultApi'] = new Api({
         rpc,
         textDecoder: new TextDecoder(),
         textEncoder: new TextEncoder(),
     });
 
-    store['$evmApi'] = new TelosEvmApi({
-        endpoint: process.env.HYPERION_ENDPOINT,
-        chainId: process.env.CHAIN_NAME === 'telos' ? 40 : 41,
+    holder.store['$evmApi'] = new TelosEvmApi({
+        endpoint: chain.settings.getHyperionEndpoint(),
+        chainId: chain.settings.getNetwork() === 'telos' ? 40 : 41,
         ethPrivateKeys: [],
         telosContract: process.env.EVM_CONTRACT,
         telosPrivateKeys: [],
     });
 
-    store['$api'] = {
-        getInfo: getInfo.bind(store),
-        getAbi: getAbi.bind(store),
-        signTransaction: signTransaction.bind(store),
-        getTableRows: getTableRows.bind(store),
-        getAccount: getAccount.bind(store),
-        getRpc: getRpc.bind(store),
+    holder.store['$api'] = {
+        getInfo: getInfo.bind(holder.store),
+        getAbi: getAbi.bind(holder.store),
+        signTransaction: signTransaction.bind(holder.store),
+        getTableRows: getTableRows.bind(holder.store),
+        getAccount: getAccount.bind(holder.store),
+        getRpc: getRpc.bind(holder.store),
     };
 
-    window.$api = store['$api'];
-});
+    window.$api = holder.store['$api'];
+
+    holder.hyperion = axios.create({
+        baseURL: chain.settings.getHyperionEndpoint(),
+    });
+};
+
+export const getHyperion = function () {
+    return holder.hyperion;
+};
+
+
diff --git a/src/boot/hyperion.js b/src/boot/hyperion.js
deleted file mode 100644
index 1f97914f6..000000000
--- a/src/boot/hyperion.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { boot } from 'quasar/wrappers';
-import axios from 'axios';
-
-const hyperion = axios.create({
-    baseURL: process.env.HYPERION_ENDPOINT,
-});
-
-export default boot(({ app }) => {
-    app.config.globalProperties.$hyperion = hyperion;
-});
-
-export { hyperion };
diff --git a/src/boot/ual.js b/src/boot/ual.js
index 3f988b301..de961b694 100644
--- a/src/boot/ual.js
+++ b/src/boot/ual.js
@@ -51,7 +51,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) => {
diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
index 0a0ef5199..87d01846b 100644
--- a/src/components/evm/AppNav.vue
+++ b/src/components/evm/AppNav.vue
@@ -4,7 +4,7 @@ import InlineSvg from 'vue-inline-svg';
 
 import UserInfo from 'components/evm/UserInfo.vue';
 import { getAntelope, useChainStore } from 'src/antelope';
-import EVMLoginButtons from 'pages/home/EVMLoginButtons.vue';
+import LoginButtons from 'pages/home/LoginButtons.vue';
 import { getShortenedHash } from 'src/antelope/stores/utils';
 
 const ant = getAntelope();
@@ -14,7 +14,7 @@ const chainStore = useChainStore();
 export default defineComponent({
     name: 'AppNav',
     components: {
-        EVMLoginButtons,
+        LoginButtons,
         UserInfo,
         InlineSvg,
     },
@@ -451,7 +451,7 @@ export default defineComponent({
                 @click="closeLoginMenu()"
             />
         </div>
-        <EVMLoginButtons/>
+        <LoginButtons v-if="showWalletOptions" chain="evm"/>
     </div>
 </q-dialog>
 
diff --git a/src/css/components/_notification.scss b/src/css/components/_notification.scss
index 709705f90..51d523a17 100644
--- a/src/css/components/_notification.scss
+++ b/src/css/components/_notification.scss
@@ -107,6 +107,15 @@
             font-weight: bold;
             margin-bottom: 1rem;
         }
+        &--bold {
+            font-weight: bold;
+        }
+        &--center {
+            text-align: center;
+        }
+        &--paragraph {
+            margin-bottom: 1rem;
+        }
     }
     &__action-btn {
         color: var(--text-color, #000);
diff --git a/src/layouts/NativeLayout.vue b/src/layouts/NativeLayout.vue
index 1324074d4..586444596 100644
--- a/src/layouts/NativeLayout.vue
+++ b/src/layouts/NativeLayout.vue
@@ -2,8 +2,9 @@
 
 import { mapGetters, mapActions } from 'vuex';
 import navBar from 'components/native/NavBar.vue';
-import NativeLoginButton from 'pages/home/NativeLoginButton.vue';
+import LoginButtons from 'pages/home/LoginButtons.vue';
 import { getAntelope } from 'src/antelope';
+import { getHyperion } from 'src/boot/api';
 
 const pagesData = [
     {
@@ -31,7 +32,7 @@ const pagesData = [
 
 export default {
     name: 'NativeLayout',
-    components: { NavBar: navBar, NativeLoginButton },
+    components: { NavBar: navBar, LoginButtons },
     data() {
         return {
             avatar: null,
@@ -106,12 +107,12 @@ export default {
             this.loadUserProfile();
         },
         async loadAccountHistory() {
-            const actionHistory = await this.$hyperion.get(
+            const actionHistory = await getHyperion().get(
                 `/v2/history/get_actions?limit=20&account=${this.accountName}`,
             );
             this.accountHistory = actionHistory.data.actions || [];
         },
-        logOut() {
+        performLogOut() {
             this.resetTokens();
             this.logout(true);
         },
@@ -121,16 +122,17 @@ export default {
         },
     },
     async mounted() {
-        await this.memoryAutoLogin();
+        if (!this.isUserAuthenticated) {
+            await this.memoryAutoLogin();
+        }
         this.loadUserProfile();
-        this.checkPath();
     },
 };
 </script>
 
 <template>
 <q-layout view="hHh Lpr fFf" class="c-native-layout">
-    <NativeLoginButton v-if="isUserAuthenticated" class="login-button"/>
+    <LoginButtons v-if="!isUserAuthenticated" class="login-button" chain="zero"/>
     <div class="videoWrapper">
         <video
             id="bgvid"
@@ -153,7 +155,7 @@ export default {
     <div class="videoOverlay" ></div>
     <div class="videoOverlay shadedOverlay" ></div>
 
-    <NavBar v-if="isUserAuthenticated" v-model:balanceTab="balanceTab" @logOut="logOut"/>
+    <NavBar v-if="isUserAuthenticated" v-model:balanceTab="balanceTab" @logOut="performLogOut"/>
     <q-page-container
         :class="`pageContainer ${isUserAuthenticated ? 'authenticated' : ''}`"
     >
diff --git a/src/pages/evm/nfts/NftTransferForm.vue b/src/pages/evm/nfts/NftTransferForm.vue
index 8d179a63d..c8e51781b 100644
--- a/src/pages/evm/nfts/NftTransferForm.vue
+++ b/src/pages/evm/nfts/NftTransferForm.vue
@@ -25,7 +25,6 @@ import UserInfo from 'components/evm/UserInfo.vue';
 import AddressInput from 'components/evm/inputs/AddressInput.vue';
 import IntegerInput from 'src/components/evm/inputs/IntegerInput.vue';
 
-
 const props = defineProps<{
     nft: Collectible;
 }>();
@@ -110,6 +109,7 @@ async function startTransfer() {
         transferLoading.value = false;
     }
 }
+
 </script>
 
 <template>
diff --git a/src/pages/home/EVMLoginButtons.vue b/src/pages/home/EVMLoginButtons.vue
index ea3f83454..e640cbf6c 100644
--- a/src/pages/home/EVMLoginButtons.vue
+++ b/src/pages/home/EVMLoginButtons.vue
@@ -19,7 +19,7 @@ import { QSpinnerFacebook } from 'quasar';
 import { OreIdAuth } from 'src/antelope/wallets';
 import { Menu } from 'src/pages/home/MenuType';
 import InlineSvg from 'vue-inline-svg';
-import { isTodayBeforeTelosCloudDown } from 'src/App.vue';
+
 
 export default defineComponent({
     name: 'EVMLoginButtons',
@@ -164,7 +164,6 @@ export default defineComponent({
             notifyEnableBrave,
             redirectToMetamaskDownload,
             redirectToSafepalDownload,
-            isTodayBeforeTelosCloudDown,
             // menu navigation
             showMainMenu,
             showTelosCloudMenu,
diff --git a/src/pages/home/HomePage.vue b/src/pages/home/HomePage.vue
index 98b5b085f..694acfa97 100644
--- a/src/pages/home/HomePage.vue
+++ b/src/pages/home/HomePage.vue
@@ -3,7 +3,7 @@ import { computed,  onMounted,  ref, watch } from 'vue';
 
 import LoginButtons from 'pages/home/LoginButtons.vue';
 import { LocationQueryValue, useRoute, useRouter } from 'vue-router';
-import { CURRENT_CONTEXT, useChainStore } from 'src/antelope';
+import { CURRENT_CONTEXT, getAntelope, useChainStore } from 'src/antelope';
 import { useI18n } from 'vue-i18n';
 import { ChainSettings } from 'src/antelope/types';
 import { settings } from 'src/antelope/stores/chain';
@@ -20,7 +20,6 @@ const walletOption = computed(() => route.query.login as LocationQueryValue);
 
 interface Network {
     value: string;
-    label: string;
     tab: string;
     chain: ChainSettings;
 }
@@ -28,25 +27,21 @@ interface Network {
 const networks = [
     {
         value: 'telos-evm',
-        label: 'Telos EVM',
         tab: 'evm',
         chain: settings['telos-evm'],
     },
     {
         value: 'telos',
-        label: 'Telos',
         tab: 'zero',
         chain: settings['telos'],
     },
     {
         value: 'telos-evm-testnet',
-        label: 'Telos EVM Testnet',
         tab: 'evm',
         chain: settings['telos-evm-testnet'],
     },
     {
         value: 'telos-testnet',
-        label: 'Telos Testnet',
         tab: 'zero',
         chain: settings['telos-testnet'],
     },
@@ -54,23 +49,6 @@ const networks = [
 
 const selectedNetwork = ref<Network | undefined>(undefined);
 
-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 } });
@@ -79,21 +57,26 @@ function setTab(login: TabReference): void {
 }
 
 onMounted(() => {
-    selectedNetwork.value = networks.find(n => n.value === 'telos-evm');
-    /*
-    if (walletOption.value && walletOption.value !== 'unset') {
-        setTab(walletOption.value as TabReference);
-    } else {
-        // set evm as default
-        setTab('evm');
+    // we check if the url has the network parameter and if so, we connect to that network
+    // Otherwise we just let the store decide which network to connect to
+    const network = new URLSearchParams(window.location.search).get('network');
+    if (network) {
+        // only if the network is in the list of networks we set it as the selected network
+        selectedNetwork.value = networks.find(n => n.value === network);
+    }
+
+    if (!selectedNetwork.value) {
+        // set the default network
+        selectedNetwork.value = networks.find(n => n.value === 'telos-evm');
     }
-    */
 });
 
 watch(selectedNetwork, () => {
     if (selectedNetwork.value) {
         chainStore.setChain(CURRENT_CONTEXT, selectedNetwork.value.value);
         setTab(selectedNetwork.value.tab as TabReference);
+        // change the url to reflect the network
+        router.replace({ query: { network: selectedNetwork.value.value } });
     }
 });
 
diff --git a/src/pages/native/BalanceInfo.vue b/src/pages/native/BalanceInfo.vue
index 0d8ca70b7..c699eaf88 100644
--- a/src/pages/native/BalanceInfo.vue
+++ b/src/pages/native/BalanceInfo.vue
@@ -14,6 +14,8 @@ import DepositEVM from '~/pages/native/balance/DepositEVM';
 import WithdrawEVM from '~/pages/native/balance/WithdrawEVM';
 import RexStaking from '~/pages/native/balance/RexStaking';
 import { copyToClipboard } from 'quasar';
+import { getHyperion } from 'src/boot/api';
+
 
 const GETTING_STARTED_URL = 'https://www.telos.net/buy';
 
@@ -262,7 +264,8 @@ export default {
             });
         },
         async loadUserTokens() {
-            const userCoins = await this.$hyperion.get(
+            const hyperion = getHyperion();
+            const userCoins = await hyperion.get(
                 `/v2/state/get_tokens?account=${this.accountName}&limit=1000`,
             );
             if (userCoins.status === 200) {
diff --git a/src/pages/native/balance/CoinHistory.vue b/src/pages/native/balance/CoinHistory.vue
index 3d370792f..38b55d910 100644
--- a/src/pages/native/balance/CoinHistory.vue
+++ b/src/pages/native/balance/CoinHistory.vue
@@ -1,6 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import tokenAvatar from 'components/native/TokenAvatar.vue';
+import { getHyperion } from 'src/boot/api';
 
 const GETTING_STARTED_URL = 'https://www.telos.net/buy';
 
@@ -54,12 +55,12 @@ export default {
             if (this.loadedAll) {
                 return;
             }
-            const actionHistory = await this.$hyperion.get(
+            const actionHistory = await getHyperion().get(
                 `/v2/history/get_actions?limit=${this.pageLimit}&skip=${this.page}&account=${this.accountName}&filter=${this.selectedCoin.account}:*`,
             );
             this.accountHistory.push(...(actionHistory.data.actions.
                 filter(a => 'quantity' in a.act.data &&
-           a.act.data.quantity.split(' ')[1] ===this.selectedCoin.symbol) || []));
+                    a.act.data.quantity.split(' ')[1] ===this.selectedCoin.symbol) || []));
             this.page += this.pageLimit;
             if (actionHistory.data.actions.length === 0) {
                 this.loadedAll = true;
diff --git a/src/pages/native/balance/CoinInfo.vue b/src/pages/native/balance/CoinInfo.vue
index a909c1816..b1d825b7a 100644
--- a/src/pages/native/balance/CoinInfo.vue
+++ b/src/pages/native/balance/CoinInfo.vue
@@ -48,11 +48,11 @@ export default {
             return coin.symbol === 'TLOS' && coin.account === 'eosio.token' && coin.network !== 'tevm';
         },
         formatLiquidBalance(balance) {
-            const [amount, symbol] = balance.split(' ');
+            const [amount, symbol] = balance?.split(' ') ?? ['0', 'TLOS'];
             return `${this.getFixed(amount, 4)} ${symbol}`;
         },
         getLiquidBalance(balance) {
-            const [amount] = balance.split(' ');
+            const [amount] = balance?.split(' ') ?? ['0'];
             return Number(amount);
         },
     },
diff --git a/src/pages/native/balance/RexStaking.vue b/src/pages/native/balance/RexStaking.vue
index 669df7498..908cafed3 100644
--- a/src/pages/native/balance/RexStaking.vue
+++ b/src/pages/native/balance/RexStaking.vue
@@ -31,7 +31,7 @@ export default {
             return Number(
                 (
                     await this.rpc.get_currency_balance('eosio.token', this.accountName, 'TLOS')
-                )[0].split(' ')[0],
+                )[0]?.split(' ')[0] ?? '0',
             );
         },
 
diff --git a/src/store/account/actions.js b/src/store/account/actions.js
index b0253471d..134a4ae73 100644
--- a/src/store/account/actions.js
+++ b/src/store/account/actions.js
@@ -21,15 +21,15 @@ export const login = async function(
         commit('setJustViewer', justViewer);
         const users = await authenticator.login(account);
         if (users.length) {
-            // OreId has it's own authorization service, only init fuel service for other ual users
-            this.$ualUser = users[0] instanceof OreUser ? users[0] : await initFuelUserWrapper(users[0]);
+            this.$ualUser = await initFuelUserWrapper(users[0]);
             const accountName = await this.$ualUser.getAccountName();
             this.$type = 'ual';
             this.$idx = idx;
             commit('setAccountName', accountName);
             localStorage.setItem('autoLogin', authenticator.getName());
             localStorage.setItem('account', accountName);
-            localStorage.setItem('returning', true);
+            localStorage.setItem('isNative', true);
+            localStorage.setItem('network', network);
             if (this.$router.currentRoute.path === '/') {
                 await this.$router.push({ path: '/zero/balance' });
             }
@@ -46,7 +46,7 @@ export const login = async function(
             commit('general/setErrorMsg', error, { root: true });
             throw e;
         } else {
-            console.log('Login cancelled');
+            console.debug('Login cancelled');
         }
     } finally {
         commit('setLoadingWallet');
@@ -65,15 +65,18 @@ export const memoryAutoLogin = async function ({
     } else {
         return null;
     }
+    return null;
 };
 
 export const autoLogin = async function({ dispatch, commit }, returnUrl) {
     const { authenticator, idx } = getAuthenticator(this.$ual);
     if (authenticator) {
         commit('setAutoLogin', true);
+        const network = localStorage.getItem('network');
         await dispatch('login', {
             idx,
             returnUrl,
+            network,
             account: localStorage.getItem('account'),
         });
         this.$idx = idx;