Meta Icon Update, Header Fixes, Remove Resource Information from Account Card

.env.example

@@ -3,7 +3,7 @@
 APP_NAME=OBE
 
 # default network
-CHAIN_NAME=telos-testnet
+CHAIN_NAME=koyn
 
 # enable selector on header to switch chains
 #SHOW_MULTICHAIN_SELECTOR=true

deploy-front.sh

@@ -0,0 +1,3 @@
+quasar build
+sudo rm -rf /var/www/html/obe/
+sudo cp -r dist/spa /var/www/html/obe

jest.config.js

@@ -47,7 +47,7 @@ module.exports = {
         },
         './src/layouts/': {
             statements: 0,
-            branches: 100,
+            branches: 0,
             functions: 0,
             lines: 0,
         },

package.json

@@ -24,6 +24,7 @@
     "highcharts-vue": "^1.4.0",
     "moment": "^2.29.4",
     "ol": "^6.14.1",
+    "pm2": "^5.3.0",
     "quasar": "^2.6.2",
     "ual-anchor": "1.3.0",
     "universal-authenticator-library": "^0.3.0",
@@ -40,8 +41,8 @@
     "@quasar/quasar-app-extension-testing-unit-jest": "^3.0.0-alpha.10",
     "@types/jest": "^27.4.0",
     "@types/node": "^12.20.21",
-    "@typescript-eslint/eslint-plugin": "^4.16.1",
-    "@typescript-eslint/parser": "^4.16.1",
+    "@typescript-eslint/eslint-plugin": "4.5.0",
+    "@typescript-eslint/parser": "4.5.0",
     "dotenv": "^14.3.0",
     "eslint": "^7.14.0",
     "eslint-plugin-jest": "^25.2.2",

quasar.conf.js

@@ -84,7 +84,7 @@ module.exports = configure(function (ctx) {
       server: {
         type: 'http'
       },
-      port: 8080,
+      port: 8081,
       open: true, // opens browser window automatically
       historyApiFallback: {
         disableDotRule: true

src/App.vue

@@ -1,37 +1,4 @@
 <script lang="ts">
-import { setCssVar } from 'quasar';
-import ConfigManager from 'src/config/ConfigManager';
-import { themeProps } from 'src/types/Theme';
-
-const chain = ConfigManager.get().getCurrentChain();
-const chainName = chain.getName();
-const theme = chain.getTheme();
-
-setTheme();
-setMetaData();
-
-function setTheme(): void {
-    for (let themeVar of themeProps) {
-        if (theme[themeVar]) {
-            setCssVar(themeVar, theme[themeVar]);
-        }
-    }
-}
-
-function setMetaData(): void {
-    setFavIcon();
-    setTitle();
-}
-
-function setFavIcon(): void {
-    let link = document.querySelector('link[rel~="icon"]');
-    (link as HTMLLinkElement).href = `chains/${chainName}/favicon.png`;
-}
-
-function setTitle(): void {
-    document.title = chainName;
-}
-
 export default {
     name: 'App',
 };

src/boot/ual.ts

@@ -21,8 +21,8 @@ declare module '@vue/runtime-core' {
 async function loginHandler() {
     let accountName = 'eosio';
     let permission = 'active';
-    if (localStorage.getItem('autoLogin') === 'cleos') {
-        accountName = localStorage.getItem('account');
+    if (localStorage.getItem('autoLogin_' + getChain().getChainId()) === 'cleos') {
+        accountName = localStorage.getItem('account_' + getChain().getChainId());
     } else {
         await new Promise((resolve) => {
             Dialog.create({
@@ -149,7 +149,7 @@ const authenticators: Authenticator[] = [];
 export const getAuthenticators = () => {
     // we initialize the authenticators inside this function on demand
     if (authenticators.length === 0) {
-        // UAL is not looking at the chain when checking the localstorage for an already logged in account
+        // UAL is not looking at the chain when checking the sessionStorage 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}_${mainChain.chainId}` })),

src/components/AccountCard.vue

@@ -2,7 +2,6 @@
 import { Token, GetTableRowsParams, RexbalRows, RexPoolRows } from 'src/types';
 import { defineComponent, computed, ref, onMounted, watch } from 'vue';
 import { useAntelopeStore } from 'src/store/antelope.store';
-import PercentCircle from 'src/components/PercentCircle.vue';
 import SendDialog from 'src/components/SendDialog.vue';
 import ResourcesDialog from 'src/components/resources/ResourcesDialog.vue';
 import StakingDialog from 'src/components/staking/StakingDialog.vue';
@@ -20,7 +19,6 @@ const chain = getChain();
 export default defineComponent({
     name: 'AccountCard',
     components: {
-        PercentCircle,
         SendDialog,
         ResourcesDialog,
         DateField,
@@ -462,30 +460,6 @@ export default defineComponent({
                 <q-space/>
             </div>
             <div v-if="account !== system_account" class="resources">
-                <PercentCircle
-                    :radius="radius"
-                    :fraction="cpu_used"
-                    :total="cpu_max"
-                    label="CPU"
-                    unit="s"
-                />
-                <PercentCircle
-                    :radius="radius"
-                    :fraction="net_used"
-                    :total="net_max"
-                    label="NET"
-                    unit="kb"
-                />
-                <PercentCircle
-                    :radius="radius"
-                    :fraction="ram_used"
-                    :total="ram_max"
-                    label="RAM"
-                    unit="kb"
-                />
-            </div>
-            <div v-else class="resources">
-                <div class="usage">RAM USED: {{ ram_used }} kb</div>
             </div>
         </q-card-section>
         <q-card-section class="resources-container">
@@ -542,37 +516,9 @@ export default defineComponent({
                     </tr>
                     <tr></tr>
                     <tr>
-                        <td class="text-left">LIQUID (Telos native)</td>
+                        <td class="text-left">LIQUID</td>
                         <td class="text-right">{{ formatAsset(liquidNative) }}</td>
                     </tr>
-                    <tr>
-                        <td class="text-left">REX staked (includes savings)</td>
-                        <td class="text-right">{{ formatAsset(rexStaked) }}</td>
-                    </tr>
-                    <tr>
-                        <td class="text-left">REX liquid deposits</td>
-                        <td class="text-right">{{ formatAsset(rexDeposits) }}</td>
-                    </tr>
-                    <tr>
-                        <td class="text-left">STAKED for CPU</td>
-                        <td class="text-right">{{ formatAsset(stakedCPU) }}</td>
-                    </tr>
-                    <tr>
-                        <td class="text-left">STAKED for NET</td>
-                        <td class="text-right">{{ formatAsset(stakedNET) }}</td>
-                    </tr>
-                    <tr>
-                        <td class="text-left">REFUNDING from staking</td>
-                        <td class="text-right">{{ formatAsset(stakedRefund) }}</td>
-                    </tr>
-                    <tr>
-                        <td class="text-left">DELEGATED to others</td>
-                        <td class="text-right">{{ formatAsset(delegatedToOthers) }}</td>
-                    </tr>
-                    <tr>
-                        <td class="text-left">DELEGATED by others</td>
-                        <td class="text-right">{{ formatAsset(delegatedByOthers) }}</td>
-                    </tr>
                 </tbody>
             </thead>
         </q-markup-table>

src/components/ChainsMenu.vue

@@ -2,17 +2,16 @@
 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';
+import { useRoute, useRouter } from 'vue-router';
 
 const configMgr = ConfigManager.get();
 
 export default defineComponent({
     name: 'ChainsMenu',
     setup() {
         const menuOpened = ref(false);
-        const store = useStore();
-        const account = computed(() => store.state.account);
+        const route = useRoute();
+        const router = useRouter();
 
         const menuIcon = computed(() => menuOpened.value ? 'expand_less' : 'expand_more');
         const mainnets = computed(() => sortChainsUsingName(configMgr.getMainnets()));
@@ -25,41 +24,24 @@ export default defineComponent({
         }
 
         function isSelected(chain: Chain): boolean {
-            return localStorage.getItem(ConfigManager.CHAIN_LOCAL_STORAGE) === chain.getName();
+            return sessionStorage.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;
             }
-            // TODO: maybe we can reload vue store and boot files instead of full reload?
-            localStorage.setItem(
-                ConfigManager.CHAIN_LOCAL_STORAGE,
-                chain.getName(),
-            );
 
-            if (account.value) {
-                void logout();
-            }
+            void router.push({
+                path: route.path,
+                query: { network: chain.getName() },
+            });
 
-            location.reload();
+            menuOpened.value = false;
         }
 
         onMounted(() => {
-            const currentChain = localStorage.getItem(ConfigManager.CHAIN_LOCAL_STORAGE);
+            const currentChain = sessionStorage.getItem(ConfigManager.CHAIN_LOCAL_STORAGE);
             if (currentChain === null) {
                 const chains = configMgr.getMainnets();
                 const telos = chains.filter(chain => chain.getName() === 'telos')[0];

src/components/Footer.vue

@@ -25,7 +25,7 @@ export default {
     text-decoration: none
     color: #ffffff
 .footer-background
-    background: var(--q-primary-linear-gradient)
+    background: var(--q-color-footer-background)
     backdrop-filter: blur(14px)
 .no-dec
     text-decoration: none

src/components/Header.vue

@@ -1,32 +1,45 @@
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
+import { defineComponent, computed, ref, watch } from 'vue';
 import { useQuasar } from 'quasar';
-import LoginHandler from 'components/LoginHandler.vue';
 import HeaderSearch from 'components/HeaderSearch.vue';
 import ChainsMenu from 'components/ChainsMenu.vue';
 import { getChain } from 'src/config/ConfigManager';
 import { useStore } from 'src/store';
+import { useRouteDataNetwork } from 'src/router';
 
 export default defineComponent({
     name: 'AppHeader',
     components: {
-        LoginHandler,
         HeaderSearch,
         ChainsMenu,
     },
     setup() {
         const $q = useQuasar();
-        const chain = getChain();
         const store = useStore();
+
         const account = computed(() => store.state.account.accountName);
         const isLarge = computed((): boolean => $q.screen.gt.sm);
         const showMultichainSelector = computed(() => process.env.SHOW_MULTICHAIN_SELECTOR === 'true');
 
+        const isTestnet = ref(getChain().isTestnet());
+        const smallLogoPath = ref(getChain().getSmallLogoPath());
+        const largeLogoPath = ref(getChain().getLargeLogoPath());
+
+        const network = useRouteDataNetwork();
+
+        watch(network, () => {
+            smallLogoPath.value = getChain().getSmallLogoPath();
+            largeLogoPath.value = getChain().getLargeLogoPath();
+            isTestnet.value = getChain().isTestnet();
+        });
+
         return {
             account,
             isLarge: isLarge,
-            chain,
             showMultichainSelector,
+            smallLogoPath,
+            largeLogoPath,
+            isTestnet,
         };
     },
 });
@@ -40,12 +53,12 @@ export default defineComponent({
                 <div class="logo-header-container">
                     <div class="logo-chain-selector-container">
                         <a class="float-left" href="/">
-                            <img v-if="isLarge" class="logo" :src="chain.getLargeLogoPath()">
-                            <img v-else class="logo-token" :src="chain.getSmallLogoPath()">
+                            <img v-if="isLarge" class="logo" :src="largeLogoPath">
+                            <img v-else class="logo-token" :src="smallLogoPath">
                         </a>
                         <ChainsMenu v-if="showMultichainSelector"/>
                     </div>
-                    <div v-if="chain.isTestnet()" class="testnet-text">TESTNET</div>
+                    <div v-if="isTestnet" class="testnet-text">TESTNET</div>
                 </div>
             </div>
         </div>
@@ -58,42 +71,8 @@ export default defineComponent({
                 </div>
             </div>
         </div>
-        <LoginHandler/>
     </div>
     <div class="row justify-center col-12 q-pt-sm">
-        <q-tabs
-            active-class="active-tab"
-            indicator-color="white"
-            align="justify"
-            narrow-indicator
-            color="white"
-        >
-            <q-route-tab
-                class="deactive"
-                name="network"
-                label="Network"
-                to="/"
-            />
-            <q-route-tab
-                v-if="account"
-                class="deactive"
-                name="wallet"
-                label="Wallet"
-                :to="'/account/' + account"
-            />
-            <q-route-tab
-                class="deactive"
-                name="vote"
-                label="Vote"
-                to="/vote"
-            />
-            <q-route-tab
-                class="deactive"
-                name="proposal"
-                label="Proposal"
-                to="/proposal"
-            />
-        </q-tabs>
     </div>
 </div>
 </template>