v1.2.3-rc

.env.example

@@ -5,6 +5,6 @@ APP_NAME=OBE
 # default network
 CHAIN_NAME=telos-testnet
 
-# enable sidebar to switch chains
-#SHOW_SIDEBAR=true
+# enable selector on header to switch chains
+#SHOW_MULTICHAIN_SELECTOR=true
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "open-block-explorer",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "..",
   "productName": "Telos Block Explorer",
   "author": "DonaldPeat <don@caleos.io>",

src/boot/ual.ts

@@ -147,12 +147,14 @@ function getMainChain() {
 const authenticators: Authenticator[] = [];
 
 export const getAuthenticators = () => {
+    // we initialize the authenticators inside this function on demand
     if (authenticators.length === 0) {
-        // we initialize the authenticators inside this function on demand
+        // UAL is not looking at the chain when checking the localstorage for an already logged in account
+        // A quick fix is to add the chain in appName until we move forward with WharfKit
         const mainChain = getMainChain();
-        authenticators.push(new Anchor([mainChain], { appName: process.env.APP_NAME })),
+        authenticators.push(new Anchor([mainChain], { appName: `${process.env.APP_NAME}_${mainChain.chainId}` })),
         authenticators.push(new CleosAuthenticator([mainChain], {
-            appName: process.env.APP_NAME,
+            appName: `${process.env.APP_NAME}_${mainChain.chainId}`,
             loginHandler,
             signHandler: signHandlerForMainChain,
         }));

src/components/AccountCard.vue

@@ -140,10 +140,9 @@ export default defineComponent({
         };
 
         const loadBalances = async () => {
-            const { staked, profits } = await getRexBalance();
+            const total  = await getRexBalance();
             rexDeposits.value = await getRexFund();
-            rexStaked.value = staked;
-            rexProfits.value = profits;
+            rexStaked.value = total;
         };
 
         const loadResources = () => {
@@ -254,14 +253,11 @@ export default defineComponent({
 
             const rexBal = ((await api.getTableRows(paramsrexbal)) as RexbalRows)
                 .rows[0];
+
             const totalRexBalance =
                 rexBal?.rex_balance
                     ? Number(rexBal.rex_balance.split(' ')[0])
                     : 0;
-            const staked =
-                rexBal?.vote_stake
-                    ? Number(rexBal.vote_stake.split(' ')[0])
-                    : 0;
 
             const paramsrexpool = {
                 code: 'eosio',
@@ -279,12 +275,7 @@ export default defineComponent({
             const tlosRexRatio = totalRex > 0 ? totalLendable / totalRex : 1;
 
             const total = totalRex > 0 ? tlosRexRatio * totalRexBalance : 0.0;
-            const profits = total - staked;
-            return {
-                total,
-                profits,
-                staked,
-            };
+            return total;
         };
 
         const fixDec = (val: number): number => parseFloat(val.toFixed(3));
@@ -349,7 +340,6 @@ export default defineComponent({
             totalTokens.value = '--';
             stakedResources.value = delegatedByOthers.value = 0;
             rexStaked.value = 0;
-            rexProfits.value = 0;
             rexDeposits.value = 0;
         };
 
@@ -395,7 +385,6 @@ export default defineComponent({
             totalValueString,
             rex,
             rexStaked,
-            rexProfits,
             rexDeposits,
             none,
             system_account,
@@ -560,10 +549,6 @@ export default defineComponent({
                         <td class="text-left">REX staked (includes savings)</td>
                         <td class="text-right">{{ formatAsset(rexStaked) }}</td>
                     </tr>
-                    <tr>
-                        <td class="text-left">REX profits</td>
-                        <td class="text-right">{{ formatAsset(rexProfits) }}</td>
-                    </tr>
                     <tr>
                         <td class="text-left">REX liquid deposits</td>
                         <td class="text-right">{{ formatAsset(rexDeposits) }}</td>

src/components/ChainsSidebar.vue → src/components/ChainsMenu.vue

@@ -1,13 +1,20 @@
 <script lang="ts">
-import { computed, ref, onMounted } from 'vue';
+import { computed, defineComponent, onMounted, ref } from 'vue';
 import ConfigManager from 'src/config/ConfigManager';
 import { Chain } from 'src/types/Chain';
+import { useStore } from 'src/store';
+import { getAuthenticators } from 'src/boot/ual';
 
 const configMgr = ConfigManager.get();
 
-export default {
-    name: 'ChainsSidebar',
+export default defineComponent({
+    name: 'ChainsMenu',
     setup() {
+        const menuOpened = ref(false);
+        const store = useStore();
+        const account = computed(() => store.state.account);
+
+        const menuIcon = computed(() => menuOpened.value ? 'expand_less' : 'expand_more');
         const mainnets = computed(() => sortChainsUsingName(configMgr.getMainnets()));
         const testnets = computed(() => sortChainsUsingName(configMgr.getTestnets()));
 
@@ -21,6 +28,19 @@ export default {
             return localStorage.getItem(ConfigManager.CHAIN_LOCAL_STORAGE) === chain.getName();
         }
 
+        const logout = async (): Promise<void> => {
+            const wallet = localStorage.getItem('autoLogin');
+            const authenticator = getAuthenticators().find(
+                auth => auth.getName() === wallet,
+            );
+            try {
+                authenticator && (await authenticator.logout());
+            } catch (error) {
+                console.error('Authenticator logout error', error);
+            }
+            void store.dispatch('account/logout');
+        };
+
         function chainSelected(chain: Chain) {
             if (isSelected(chain)) {
                 return;
@@ -30,6 +50,11 @@ export default {
                 ConfigManager.CHAIN_LOCAL_STORAGE,
                 chain.getName(),
             );
+
+            if (account.value) {
+                void logout();
+            }
+
             location.reload();
         }
 
@@ -43,30 +68,23 @@ export default {
         });
 
         return {
-            miniState: ref(true),
+            menuOpened,
+            menuIcon,
             mainnets,
             testnets,
             chainSelected,
             isSelected,
         };
     },
-};
+});
 </script>
 
 <template>
-
-<q-drawer
-    show-if-above
-    :mini="miniState"
-    mini-to-overlay
-    :width="175"
-    :breakpoint="500"
-    bordered
-    @mouseover="miniState = false"
-    @mouseout="miniState = true"
->
-    <q-scroll-area class="fit">
+<q-btn v-if="testnets.length > 0 || mainnets.length > 0" flat class="chain-button">
+    <q-icon :name="menuIcon" size="md" />
+    <q-menu v-model="menuOpened">
         <q-list>
+            <div v-if="mainnets.length > 0" class="section-title">MAINNETS</div>
             <q-item
                 v-for="(chain, index) in mainnets"
                 :key="`mainnet-${index}`"
@@ -79,7 +97,8 @@ export default {
                     <div class="q-pl-md">{{ chain.getDisplay() }}</div>
                 </q-item-section>
             </q-item>
-            <q-separator class="separator"/>
+            <q-separator v-if="testnets.length > 0 && mainnets.length > 0" class="separator"/>
+            <div v-if="testnets.length > 0" class="section-title">TESTNETS</div>
             <q-item
                 v-for="(chain, index) in testnets"
                 :key="`testnet-${index}`"
@@ -90,45 +109,57 @@ export default {
             >
                 <div class="testnet-logo-container">
                     <img class="sidebar-logo sidebar-logo--testnet" :src="chain.getSmallLogoPath()">
-                    <div class="testnet-text">Testnet</div>
+                    <div class="testnet-text">TESTNET</div>
                 </div>
                 <q-item-section>
                     <div class="q-pl-md">{{ chain.getDisplay() }}</div>
                 </q-item-section>
             </q-item>
         </q-list>
-    </q-scroll-area>
-</q-drawer>
-
+    </q-menu>
+</q-btn>
 </template>
 
 <style lang="sass" scoped>
+.chain-button
+    padding: 0px 4px
+
 .q-item
-  &:hover, &.selected
-    background-color: var(--q-color-sidebar-selected)
-  padding-left: 4px
-  padding-top: 4px
+    &:hover, &.selected
+        background-color: var(--q-color-sidebar-selected)
+    padding-left: 16px
+    padding-top: 8px
+    width: 170px
+
+.q-list
+    padding-bottom: 8px
+    padding-top: 8px
 
 .separator
-  margin-top: .5rem
-  margin-bottom: .5rem
-  margin-left: 5px
-  min-height: 5px
-  min-width: 0
-  width: calc(100% - 10px)
-  background: var(--q-color-sidebar-selected)
+    margin-top: .5rem
+    margin-bottom: .5rem
+    min-height: 1px
+    min-width: 0
+    width: 100%
+    background: var(--q-color-sidebar-selected)
 
 .sidebar-logo
-  height: auto
-  width: auto
-  max-height: 48px
-  max-width: 48px
-  object-fit: contain
+    height: auto
+    width: auto
+    max-height: 32px
+    max-width: 32px
+    object-fit: contain
+
+.section-title
+    padding-left: 16px
+    padding-top: 8px
+    padding-bottom: 8px
+    font-size: 10px
 
 .testnet-logo-container
     position: relative
-    height: 48px
-    width: 48px
+    height: 32px
+    width: 32px
 
 .testnet-text, .sidebar-logo--testnet
     position: absolute
@@ -140,7 +171,7 @@ export default {
 
 .testnet-text
     color: white
-    font-size: 12px
+    font-size: 6px
     width: min-content
     height: min-content
     padding: 0 2px