From 50aaae485f3d4668f503586bced9d24fabb33f82 Mon Sep 17 00:00:00 2001 From: Eduardo Jaeger Date: Fri, 23 Jun 2023 23:13:46 -0300 Subject: [PATCH 1/8] Including network on routes --- src/components/ChainsMenu.vue | 15 ++-- src/config/ConfigManager.ts | 152 +++++++++++++++++++--------------- src/router/index.ts | 54 ++++++++++++ 3 files changed, 146 insertions(+), 75 deletions(-) diff --git a/src/components/ChainsMenu.vue b/src/components/ChainsMenu.vue index 2ee774f2..6ad8a1cf 100644 --- a/src/components/ChainsMenu.vue +++ b/src/components/ChainsMenu.vue @@ -4,6 +4,7 @@ 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(); @@ -12,6 +13,8 @@ export default defineComponent({ setup() { const menuOpened = ref(false); const store = useStore(); + const route = useRoute(); + const router = useRouter(); const account = computed(() => store.state.account); const menuIcon = computed(() => menuOpened.value ? 'expand_less' : 'expand_more'); @@ -45,17 +48,17 @@ export default defineComponent({ 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(); } - location.reload(); + void router.push({ + path: route.path, + query: { network: chain.getName() }, + }); + + menuOpened.value = false; } onMounted(() => { diff --git a/src/config/ConfigManager.ts b/src/config/ConfigManager.ts index 61a8fbbf..8d654b50 100644 --- a/src/config/ConfigManager.ts +++ b/src/config/ConfigManager.ts @@ -7,73 +7,87 @@ export function getChain(): Chain { } export default class ConfigManager { - public static CHAIN_LOCAL_STORAGE = 'selectedChainName'; - private static thisManager: ConfigManager; - private testnets: Chain[]; - private mainnets: Chain[]; - private currentChain: Chain; - - public constructor() { - this.init(); - } - - private init(): void { - const showMultichainSelector = process.env.SHOW_MULTICHAIN_SELECTOR; - const configuredChain = process.env.CHAIN_NAME; - this.testnets = chainsConfig.testnets; - this.mainnets = chainsConfig.mainnets; - if (showMultichainSelector) { - // eslint-disable-next-line @typescript-eslint/no-unsafe-call - const userConfiguredChain = this.getSelectedChain(); - - if (userConfiguredChain) { - this.currentChain = this.findChain(userConfiguredChain); - - if (!this.currentChain) { - this.currentChain = this.findChain(configuredChain); - } - } else { - this.currentChain = this.findChain(configuredChain); - } - } else { - this.currentChain = this.findChain(configuredChain); - } - } - - public static get(): ConfigManager { - if (!ConfigManager.thisManager) { - ConfigManager.thisManager = new ConfigManager(); - } - - return ConfigManager.thisManager; - } - - public getCurrentChain(): Chain { - return this.currentChain; - } - - private getSelectedChain(): string { - return LocalStorage.getItem(ConfigManager.CHAIN_LOCAL_STORAGE); - } - - public getAllChains(): Chain[] { - return this.mainnets.concat(this.testnets); - } - - public getMainnets(): Chain[] { - return this.mainnets; - } - - public getTestnets(): Chain[] { - return this.testnets; - } - - private findChain(chainName: string) { - const fromMainnet = this.mainnets.find(c => c.getName() === chainName); - if (fromMainnet) { - return fromMainnet; - } - - return this.testnets.find(c => c.getName() === chainName); - } + public static CHAIN_LOCAL_STORAGE = 'selectedChainName'; + private static thisManager: ConfigManager; + private testnets: Chain[]; + private mainnets: Chain[]; + private currentChain: Chain; + + public constructor() { + this.init(); + } + + private init(): void { + const showMultichainSelector = process.env.SHOW_MULTICHAIN_SELECTOR; + const configuredChain = process.env.CHAIN_NAME; + this.testnets = chainsConfig.testnets; + this.mainnets = chainsConfig.mainnets; + if (showMultichainSelector) { + // eslint-disable-next-line @typescript-eslint/no-unsafe-call + const userConfiguredChain = this.getSelectedChain(); + + if (userConfiguredChain) { + this.currentChain = this.findChain(userConfiguredChain); + + if (!this.currentChain) { + this.currentChain = this.findChain(configuredChain); + } + } else { + this.currentChain = this.findChain(configuredChain); + } + } else { + this.currentChain = this.findChain(configuredChain); + } + } + + public static get(): ConfigManager { + if (!ConfigManager.thisManager) { + ConfigManager.thisManager = new ConfigManager(); + } + + return ConfigManager.thisManager; + } + + public getCurrentChain(): Chain { + return this.currentChain; + } + + private getSelectedChain(): string { + return LocalStorage.getItem(ConfigManager.CHAIN_LOCAL_STORAGE); + } + + public setCurrentChain(chain: Chain): boolean { + if (!this.findChain(chain.getName())) { + return false; + } + localStorage.setItem( + ConfigManager.CHAIN_LOCAL_STORAGE, + chain.getName(), + ); + this.currentChain = chain; + return true; + } + + public getAllChains(): Chain[] { + return this.mainnets.concat(this.testnets); + } + + public getMainnets(): Chain[] { + return this.mainnets; + } + + public getTestnets(): Chain[] { + return this.testnets; + } + + private findChain(chainName: string) { + const fromMainnet = this.mainnets.find( + c => c.getName() === chainName, + ); + if (fromMainnet) { + return fromMainnet; + } + + return this.testnets.find(c => c.getName() === chainName); + } } diff --git a/src/router/index.ts b/src/router/index.ts index 21b3554d..b5169f70 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -2,6 +2,10 @@ import { route } from 'quasar/wrappers'; import { createRouter, createWebHistory } from 'vue-router'; import { StateInterface } from 'src/store'; import routes from 'src/router/routes'; +import ConfigManager from 'src/config/ConfigManager'; +import { computed, reactive } from 'vue'; + +const configMgr = ConfigManager.get(); /* * If not building with SSR mode, you can @@ -12,6 +16,8 @@ import routes from 'src/router/routes'; * with the Router instance. */ +const routeData = reactive({ network: '' }); + export default route(function (/* { store, ssrContext } */) { const createHistory = createWebHistory; const Router = createRouter({ @@ -23,5 +29,53 @@ export default route(function (/* { store, ssrContext } */) { history: createHistory(process.env.VUE_ROUTER_BASE), }); + Router.beforeEach((to, from) => { + const chains = configMgr.getAllChains(); + const selectedChainOnStore = localStorage.getItem(ConfigManager.CHAIN_LOCAL_STORAGE); + // console.log(to); + if (!to.query.network) { // if doesn't have network param + // console.log('if doesn\'t have network param'); + if (selectedChainOnStore) { // if has a chain selected on sotre + // console.log('if has a chain selected on sotre'); + routeData.network = selectedChainOnStore; + return ({ + ...to, + query: { + ...to.query, + network: selectedChainOnStore, + }, + }); + } else { // if doesn't have chain selected on store, attempt to get telos, if not find, get the first one + const chain = chains.filter(chain => chain.getName() === 'telos')[0] ?? chains[0]; + configMgr.setCurrentChain(chain); + routeData.network = chain.getName(); + + setTimeout(() => location.reload(), 500); + } + } else if (chains.filter(chain => chain.getName() === to.query.network).length === 0) { // check if the network is not part of the system + const chain = chains.filter(chain => chain.getName() === 'telos')[0] ?? chains[0]; // attempt to get telos network or the first one + configMgr.setCurrentChain(chain); + routeData.network = chain.getName(); + + setTimeout(() => location.reload(), 500); + } else if ((from.query.network && from.query.network !== to.query.network) || selectedChainOnStore !== to.query.network) { // if i'm changing from network + // console.log('changing network'); + // console.log(selectedChainOnStore); + // console.log(from); + const chain = chains.filter(chain => chain.getName() === to.query.network)[0]; + routeData.network = chain.getName(); + configMgr.setCurrentChain(chain); + + setTimeout(() => location.reload(), 500); + } else { + // console.log('else'); + } + + }); + return Router; }); + +export function useRouteDataNetwork() { + return computed(() => routeData.network); +} From 21e699fda09932b586d5c9f7a297e7541156ad5e Mon Sep 17 00:00:00 2001 From: Eduardo Jaeger Date: Tue, 27 Jun 2023 09:11:46 -0300 Subject: [PATCH 2/8] Including changes for theme --- src/App.vue | 33 ------------------------- src/config/BaseChain.ts | 28 ++++++++++++++++++++++ src/layouts/MainLayout.vue | 49 ++++++++++++++++++++++++++++++++++++-- 3 files changed, 75 insertions(+), 35 deletions(-) diff --git a/src/App.vue b/src/App.vue index 884c214b..a3e371b3 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,37 +1,4 @@