Merge pull request #717 from telosnetwork/refactor_router

Including URL on route

jest.config.js

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

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/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/Header.vue

@@ -1,11 +1,12 @@
 <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',
@@ -16,17 +17,31 @@ export default defineComponent({
     },
     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 +55,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>

src/components/LoginHandler.vue

@@ -5,6 +5,7 @@ import WalletModal from 'src/components/WalletModal.vue';
 import { Authenticator } from 'universal-authenticator-library';
 import { useStore } from 'src/store';
 import { getAuthenticators } from 'src/boot/ual';
+import { getChain } from 'src/config/ConfigManager';
 
 export default defineComponent({
     name: 'LoginHandler',
@@ -18,10 +19,11 @@ export default defineComponent({
         const account = computed(() => store.state.account.accountName);
 
         onMounted(() => {
-            const storedAccount = localStorage.getItem('account');
+            console.log(getChain().getChainId());
+            const storedAccount = localStorage.getItem('account_' + getChain().getChainId());
             if (storedAccount) {
                 void store.commit('account/setAccountName', storedAccount);
-                const ualName = localStorage.getItem('autoLogin');
+                const ualName = localStorage.getItem('autoLogin_' + getChain().getChainId());
                 const ual: Authenticator = authenticators.find(
                     a => a.getName() === ualName,
                 );

src/components/LoginHandlerDropdown.vue

@@ -4,6 +4,7 @@ import WalletModal from 'src/components/WalletModal.vue';
 import { useStore } from 'src/store';
 import { getAuthenticators } from 'src/boot/ual';
 import { Authenticator } from 'universal-authenticator-library';
+import { getChain } from 'src/config/ConfigManager';
 
 export default defineComponent({
     name: 'LoginHandlerDropdown',
@@ -15,7 +16,7 @@ export default defineComponent({
         const showModal = ref(false);
 
         const getAuthenticator = (): Authenticator => {
-            const wallet = localStorage.getItem('autoLogin');
+            const wallet = localStorage.getItem('autoLogin_' + getChain().getChainId());
             const authenticator = authenticators.find(
                 auth => auth.getName() === wallet,
             );

src/components/resources/BuyRam.vue

@@ -101,7 +101,7 @@ export default defineComponent({
                 });
             }
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 openTransaction.value = true;
             }
         }

src/components/resources/RefundTab.vue

@@ -6,6 +6,7 @@ import { mapActions } from 'vuex';
 import ViewTransaction from 'src/components/ViewTransanction.vue';
 import { API } from '@greymass/eosio';
 import { formatCurrency } from 'src/utils/string-utils';
+import { getChain } from 'src/config/ConfigManager';
 
 export default defineComponent({
     name: 'RefundTab',
@@ -120,7 +121,7 @@ export default defineComponent({
             }
             await this.loadAccountData();
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 this.openTransaction = true;
             }
         },

src/components/resources/SellRam.vue

@@ -51,7 +51,7 @@ export default defineComponent({
                 amount: sellAmount.value,
             });
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 openTransaction.value = true;
             }
         }

src/components/resources/StakeTab.vue

@@ -97,7 +97,7 @@ export default defineComponent({
                         : `0.0000 ${symbol}`,
             });
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 this.openTransaction = true;
             }
         },

src/components/resources/UnstakeTab.vue

@@ -159,7 +159,7 @@ export default defineComponent({
                         : `0.0000 ${symbol}`,
             });
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 this.openTransaction = true;
             }
         },

src/components/staking/SavingsTab.vue

@@ -4,6 +4,7 @@ import { useStore } from 'src/store';
 import ViewTransaction from 'src/components/ViewTransanction.vue';
 import { API } from '@greymass/eosio';
 import { assetToAmount, formatNumberWithCommas } from 'src/utils/string-utils';
+import { getChain } from 'src/config/ConfigManager';
 
 export default defineComponent({
     name: 'SavingsTab',
@@ -61,7 +62,7 @@ export default defineComponent({
                 amount: toSavingAmount.value || '0',
             });
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 openTransaction.value = true;
             }
         }
@@ -79,7 +80,7 @@ export default defineComponent({
                 amount: fromSavingAmount.value || '0',
             });
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 openTransaction.value = true;
             }
         }

src/components/staking/StakeFromResources.vue

@@ -68,7 +68,7 @@ export default defineComponent({
                 netAmount: netTokens.value || '0',
             });
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 openTransaction.value = true;
             }
         }
@@ -83,7 +83,7 @@ export default defineComponent({
                 netAmount: netWithdraw.value || '0',
             });
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 openTransaction.value = true;
             }
         }

src/components/staking/StakingTab.vue

@@ -63,7 +63,7 @@ export default defineComponent({
                 amount: stakeTokens.value,
             });
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 openTransaction.value = true;
             }
         }

src/components/staking/UnstakingTab.vue

@@ -55,7 +55,7 @@ export default defineComponent({
                 amount: unstakeTokens.value,
             });
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 openTransaction.value = true;
             }
         }

src/config/BaseChain.ts

@@ -4,6 +4,34 @@ import { PriceChartData } from 'src/types/PriceChartData';
 import { Theme } from 'src/types/Theme';
 import { Token } from 'src/types';
 
+export const DEFAULT_THEME = {
+    primary: '#11589e',
+    secondary: '#5d5d5d',
+    accent: '#9C27B0',
+    dark: '#1d1d1d',
+    'dark-page': '#121212',
+    positive: '#21BA45',
+    negative: '#C10015',
+    info: '#31CCEC',
+    warning: '#F2C037',
+    'color-map': '#8C8C8C',
+    'color-sidebar-selected': '#d1d1d1',
+    'color-primary-gradient': 'linear-gradient(90deg, #5d5d5d 0%, #5d5d5d 100%)',
+    'color-secondary-gradient': 'linear-gradient(180deg, #5d5d5d 0%, #5d5d5d 147.34%)',
+    'color-tertiary-gradient': 'linear-gradient(90deg, #CBCAF5 0%, #A9CAF3 56.77%, #63C9EF 100%)',
+    'color-progress-gradient': '#11589e',
+    'color-producer-card-background': '#f0f0f0',
+    'color-select-box-background': '#e9e9e9',
+    'color-separator-background': 'rgba(138, 101, 212, 0.1)',
+    'color-card-shadow': 'rgba(37, 42, 97, 0.3)',
+    'color-dropdown-card': '#172c6c',
+    'color-header-background': '#4C4C4C',
+    'color-header-text': '#FFFFFF',
+    'color-header-border': '#777777',
+    'color-header-support-background': 'linear-gradient(180deg, #4C4C4C 0%, #3B3B3B 147.34%)',
+    'color-graph-shadow': '#3f65c228',
+};
+
 export default abstract class BaseChain implements Chain {
   protected name: string;