Turning off maps for other networks

package.json

@@ -9,8 +9,8 @@
     "dev": "quasar dev",
     "build": "quasar clean && quasar build",
     "lint": "eslint --ext .js,.ts,.vue ./",
-    "test": "jest --coverage",
-    "test:coverage": "quasar serve test/jest/coverage/lcov-report/ --port 8788"
+    "test": "jest",
+    "test:coverage": "jest --coverage"
   },
   "dependencies": {
     "@greymass/eosio": "^0.6.8",

src/components/LoginHandler.vue

@@ -19,7 +19,6 @@ export default defineComponent({
         const account = computed(() => store.state.account.accountName);
 
         onMounted(() => {
-            console.log(getChain().getChainId());
             const storedAccount = localStorage.getItem('account_' + getChain().getChainId());
             if (storedAccount) {
                 void store.commit('account/setAccountName', storedAccount);

src/components/WorldMap.vue

@@ -22,74 +22,6 @@ import { useStore } from 'src/store';
 import VectorImageLayer from 'ol/layer/VectorImage';
 import { getCssVar } from 'quasar';
 
-// Map core style
-const style = new Style({
-    image: new CircleStyle({
-        fill: new Fill({
-            color: '#FFFFFF'
-        }),
-        radius: 5
-    }),
-    fill: new Fill({
-        color: getCssVar('color-map')
-    }),
-    stroke: new Stroke({
-        color: getCssVar('color-map'),
-        width: 1
-    }),
-    zIndex: 50
-});
-
-// BP location feature style with zIndex biggetr that map
-const producerStyle = new Style({
-    image: new CircleStyle({
-        fill: new Fill({
-            color: '#8276d2'
-        }),
-        stroke: new Stroke({
-            color: '#63C9EF',
-            width: 3
-        }),
-        radius: 5
-    }),
-    zIndex: 51
-});
-
-const top21Style = new Style({
-    image: new CircleStyle({
-        fill: new Fill({
-            color: '#8276d2'
-        }),
-        stroke: new Stroke({
-            color: '#FFFFFF',
-            width: 3
-        }),
-        radius: 5
-    }),
-    zIndex: 51
-});
-
-// Map source uses vectorLayer with vector source
-const source = new VectorSource({
-    wrapX: false,
-    url: 'https://openlayers.org/data/vector/ecoregions.json',
-    format: new GeoJSON()
-});
-
-const vectorLayer = new VectorImageLayer({
-    imageRatio: 1,
-    source: source,
-    style: style
-});
-
-const vectorSource = new VectorSource({
-    wrapX: false
-});
-
-const vector = new VectorLayer({
-    source: vectorSource
-});
-
 export default defineComponent({
     name: 'WorldMap',
     components: {
@@ -142,6 +74,74 @@ export default defineComponent({
     async mounted() {
         await this.updateBpList();
 
+        // ---- Map Styles ----
+        const style = new Style({
+            image: new CircleStyle({
+                fill: new Fill({
+                    color: '#FFFFFF'
+                }),
+                radius: 5
+            }),
+            fill: new Fill({
+                color: getCssVar('color-map')
+            }),
+            stroke: new Stroke({
+                color: getCssVar('color-map'),
+                width: 1
+            }),
+            zIndex: 50
+        });
+
+        // BP location feature style with zIndex biggetr that map
+        const producerStyle = new Style({
+            image: new CircleStyle({
+                fill: new Fill({
+                    color: '#8276d2'
+                }),
+                stroke: new Stroke({
+                    color: '#63C9EF',
+                    width: 3
+                }),
+                radius: 5
+            }),
+            zIndex: 51
+        });
+
+        const top21Style = new Style({
+            image: new CircleStyle({
+                fill: new Fill({
+                    color: '#8276d2'
+                }),
+                stroke: new Stroke({
+                    color: '#FFFFFF',
+                    width: 3
+                }),
+                radius: 5
+            }),
+            zIndex: 51
+        });
+
+        // Map source uses vectorLayer with vector source
+        const source = new VectorSource({
+            wrapX: false,
+            url: 'https://openlayers.org/data/vector/ecoregions.json',
+            format: new GeoJSON()
+        });
+
+        const vectorLayer = new VectorImageLayer({
+            imageRatio: 1,
+            source: source,
+            style: style
+        });
+
+        const vectorSource = new VectorSource({
+            wrapX: false
+        });
+
+        const vector = new VectorLayer({
+            source: vectorSource
+        });
+
         // ---- Overlay ----
         const container = this.$refs['popup'] as any;
         const content = this.$refs['popup-content'] as any;

src/config/BaseChain.ts

@@ -30,6 +30,7 @@ export const DEFAULT_THEME = {
     'color-header-border': '#777777',
     'color-header-support-background': 'linear-gradient(180deg, #4C4C4C 0%, #3B3B3B 147.34%)',
     'color-graph-shadow': '#3f65c228',
+    'color-footer-background': '#000000',
 };
 
 export default abstract class BaseChain implements Chain {

src/config/chains/eos/index.ts

@@ -31,7 +31,7 @@ const FUEL_RPC_ENDPOINT = {
 };
 const API_ENDPOINT = 'https://example.com';
 const S3_PRODUCER_BUCKET = 'https://telos-producer-validation.s3.amazonaws.com';
-const DISPLAY_MAP = true;
+const DISPLAY_MAP = false;
 const THEME = {
     primary: '#28417c',
     secondary: '#000000', //disso

src/config/chains/jungle/index.ts

@@ -41,7 +41,7 @@ const RPC_ENDPOINT = {
     port: 443,
 };
 const API_ENDPOINT = 'https://jungle4.cryptolions.io';
-const DISPLAY_MAP = true;
+const DISPLAY_MAP = false;
 const THEME = {
     primary: '#28417c',
     secondary: '#000000', //disso

src/config/chains/ux/index.ts

@@ -23,7 +23,7 @@ const RPC_ENDPOINT = {
 };
 const API_ENDPOINT = 'https://example.com';
 const S3_PRODUCER_BUCKET = 'https://telos-producer-validation.s3.amazonaws.com';
-const DISPLAY_MAP = true;
+const DISPLAY_MAP = false;
 const THEME = {};
 
 export default class UX extends BaseChain {

src/config/chains/wax/index.ts

@@ -26,7 +26,7 @@ const RPC_ENDPOINT = {
 };
 const API_ENDPOINT = 'https://example.com';
 const S3_PRODUCER_BUCKET = 'https://telos-producer-validation.s3.amazonaws.com';
-const DISPLAY_MAP = true;
+const DISPLAY_MAP = false;
 const THEME = {};
 
 export default class EOS extends BaseChain {

src/pages/Network.vue

@@ -131,7 +131,7 @@ export default defineComponent({
         <div v-if="mapDisplay && !showMap" class="col-12 map-data-position">
             <MapData :mapVisible="showMap" />
         </div>
-        <PriceChart v-if='mapDisplay' class="price-box-position" :class="{'overlap-map' : mapDisplay && showMap}"/>
+        <PriceChart class="price-box-position" :class="{'overlap-map' : mapDisplay && showMap}"/>
         <TransactionsTable/>
     </div>
 </div>

src/router/index.ts

@@ -3,7 +3,7 @@ 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';
+import { ComputedRef, computed, reactive } from 'vue';
 
 const configMgr = ConfigManager.get();
 
@@ -67,6 +67,6 @@ export default route<StateInterface>(function (/* { store, ssrContext } */) {
     return Router;
 });
 
-export function useRouteDataNetwork() {
+export function useRouteDataNetwork(): ComputedRef<string> {
     return computed(() => routeData.network);
 }

src/store/account/actions.ts

@@ -37,7 +37,6 @@ export const actions: ActionTree<AccountStateInterface, StateInterface> = {
             commit('setAccountName', accountName);
             commit('setChainId', (authenticator as Authenticator).chains[0].chainId);
 
-            console.log(authenticator);
             localStorage.setItem(`account_${(authenticator as Authenticator).chains[0].chainId}`, accountName);
             localStorage.setItem(
                 `autoLogin_${(authenticator as Authenticator).chains[0].chainId}`,

test/jest/__tests__/store/account/actions.spec.ts

@@ -46,12 +46,12 @@ global.fetch = jest.fn((input: RequestInfo | URL) =>
     } as unknown as Response),
 );
 
-const sessionStorageMock = {
+const localStorageMock = {
     getItem: jest.fn(),
     setItem: jest.fn(),
     removeItem:jest.fn(),
 };
-Object.defineProperty(window, 'sessionStorage', { value: sessionStorageMock });
+Object.defineProperty(window, 'localStorage', { value: localStorageMock });
 
 
 const transactionHeaders = {
@@ -88,16 +88,23 @@ jest.mock('@greymass/eosio', () => ({
 import { actions } from 'src/store/account/actions';
 import { User } from 'universal-authenticator-library';
 
+const chainIdMock = 'chainIdMock';
+
 describe('Store - Account Actions', () => {
     let commit: jest.Mock;
     let state: AccountStateInterface;
     let users: User[] = [];
 
+
+    // commit('setChainId', (authenticator as Authenticator).chains[0].chainId);
     const newAuthenticatorMock = (requestName = false) => ({
         init: jest.fn(),
         shouldRequestAccountName: jest.fn().mockResolvedValue(new Promise(resolve => resolve(requestName))),
         login: jest.fn().mockResolvedValue(new Promise(resolve => resolve(users))),
         getName: jest.fn().mockReturnValue('autoLogin'),
+        chains: [{
+            chainId: chainIdMock,
+        }],
     });
     let authenticator = newAuthenticatorMock();
 
@@ -116,6 +123,7 @@ describe('Store - Account Actions', () => {
             user: null,
             accountName: '',
             accountPermission: '',
+            chainId: chainIdMock,
         } as AccountStateInterface;
 
     });
@@ -162,8 +170,8 @@ describe('Store - Account Actions', () => {
             expect(commit).toHaveBeenCalledWith('setUser', expect.any(FuelUserWrapper));
             expect(commit).toHaveBeenCalledWith('setIsAuthenticated', true);
             expect(commit).toHaveBeenCalledWith('setAccountName', 'john.doe');
-            expect(sessionStorageMock.setItem).toHaveBeenCalledWith('account', 'john.doe');
-            expect(sessionStorageMock.setItem).toHaveBeenCalledWith('autoLogin', 'autoLogin');
+            expect(localStorageMock.setItem).toHaveBeenCalledWith('account_' + chainIdMock, 'john.doe');
+            expect(localStorageMock.setItem).toHaveBeenCalledWith('autoLogin_' + chainIdMock, 'autoLogin');
 
         });
 
@@ -183,8 +191,8 @@ describe('Store - Account Actions', () => {
             expect(commit).toHaveBeenCalledWith('setUser', expect.any(FuelUserWrapper));
             expect(commit).toHaveBeenCalledWith('setIsAuthenticated', true);
             expect(commit).toHaveBeenCalledWith('setAccountName', 'john.doe');
-            expect(sessionStorageMock.setItem).toHaveBeenCalledWith('account', 'john.doe');
-            expect(sessionStorageMock.setItem).toHaveBeenCalledWith('autoLogin', 'autoLogin');
+            expect(localStorageMock.setItem).toHaveBeenCalledWith('account_' + chainIdMock, 'john.doe');
+            expect(localStorageMock.setItem).toHaveBeenCalledWith('autoLogin_' + chainIdMock, 'autoLogin');
         });
 
     });
@@ -199,8 +207,8 @@ describe('Store - Account Actions', () => {
             expect(commit).toHaveBeenCalledWith('setAccountName', '');
             expect(commit).toHaveBeenCalledWith('setUser', null);
 
-            expect(sessionStorageMock.removeItem).toHaveBeenCalledWith('account');
-            expect(sessionStorageMock.removeItem).toHaveBeenCalledWith('autoLogin');
+            expect(localStorageMock.removeItem).toHaveBeenCalledWith('account_' + chainIdMock);
+            expect(localStorageMock.removeItem).toHaveBeenCalledWith('autoLogin_' + chainIdMock);
         });
     });
 });