resolves #1031

frontend/src/App.vue

@@ -88,6 +88,8 @@ import { apiUrl } from './utils/common';
 import i18n from './i18n';
 import { getConfigValue } from './contracts';
 import '@/mixins/general';
+import config from '../app-config.json';
+import { addChainToRouter } from '@/utils/common';
 
 Vue.directive('visible', (el, bind) => {
   el.style.visibility = bind.value ? 'visible' : 'hidden';
@@ -139,6 +141,7 @@ export default {
     },
     $route(to) {
       // react to route changes
+      this.checkChainAndParams();
       if(to.path === '/options') {
         return this.isOptions = true;
       } else this.isOptions = false;
@@ -166,7 +169,28 @@ export default {
     ...mapGetters([
       'getExchangeTransakUrl'
     ]),
+    async checkChainAndParams(){
+      const currentChain = localStorage.getItem('currentChain') || 'BSC';
+      const paramChain = this.$router.currentRoute.query.chain;
+      const supportedChains = config.supportedChains;
+
+      if(!paramChain){
+        localStorage.setItem('currentChain', currentChain);
+        addChainToRouter(currentChain);
+      }
+
+      //add chain as query param if chain unchanged
+      if(currentChain === paramChain || !paramChain){
+        localStorage.setItem('currentChain', currentChain);
+        addChainToRouter(currentChain);
+      }
 
+      //set chain in localStorage & MM from query param; check if supported
+      else if (currentChain !== paramChain && supportedChains.includes(paramChain)){
+        localStorage.setItem('currentChain', paramChain);
+        await this.configureMetaMask(+getConfigValue('VUE_APP_NETWORK_ID'));
+      }
+    },
     async updateCharacterStamina(id) {
       if (this.featureFlagStakeOnly) return;
 
@@ -312,6 +336,7 @@ export default {
   },
 
   async created() {
+    this.checkChainAndParams();
     try {
       await this.initializeStore();
     } catch (e) {

frontend/src/utils/common.ts

@@ -2,12 +2,23 @@ import axios from 'axios';
 import BigNumber from 'bignumber.js';
 import Web3 from 'web3';
 import config from '../../app-config.json';
+import createRouter from '../router';
+const router = createRouter();
 
 BigNumber.config({ ROUNDING_MODE: BigNumber.ROUND_DOWN });
 BigNumber.config({ EXPONENTIAL_AT: 100 });
 
 const web3 = new Web3(Web3.givenProvider || process.env.VUE_APP_WEB3_FALLBACK_PROVIDER);
 
+export function addChainToRouter(chain: string){
+  router.replace(
+    {
+      query: Object.assign({ ...router.currentRoute.query }, { chain }),
+    },
+    () => {}
+  );
+}
+
 interface Config {
   environments: Record<string, Chain>;
 }
@@ -25,6 +36,7 @@ interface Chain {
   for (const [chainName, values] of Object.entries(chains)){
     if(+values.VUE_APP_NETWORK_ID === chainId){
       localStorage.setItem('currentChain', chainName);
+      addChainToRouter(chainName);
     }
   }
   window.location.reload();

frontend/src/views/Options.vue

@@ -101,6 +101,7 @@ import i18n from '../i18n';
 import { getConfigValue } from '@/contracts';
 import config from '../../app-config.json';
 import { SupportedProject } from './Treasury.vue';
+import { addChainToRouter } from '@/utils/common';
 
 interface StoreMappedState {
   skillRewards: string;
@@ -303,6 +304,7 @@ export default Vue.extend({
     async setCurrentChain() {
       localStorage.setItem('currentChain', this.currentChain);
       Events.$emit('setting:currentChain', { value: this.currentChain });
+      addChainToRouter(this.currentChain);
       await this.configureMetaMask(+getConfigValue('VUE_APP_NETWORK_ID'));
     },
   },